TodoSalud Form Citas - Web Component

Web Component creado con Angular Elements para formularios de citas médicas. Compatible con Angular, Ionic y cualquier framework que soporte Custom Elements.

Instalación

``bash
npm install todosalud-webc-form-citas
`

Uso

$3

#### Paso 1: Instalar el paquete

`bash
npm install todosalud-webc-form-citas
`

#### Paso 2: Importar en tu módulo o componente standalone

Para módulos tradicionales (app.module.ts):

`typescript
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

// Importar el web component desde node_modules
// ⚠️ NO uses el archivo todosalud-webc-form-citas.js (loader)
// Importa directamente los archivos .js y .css
import 'todosalud-webc-form-citas/todosalud-webc-form-citas-polyfills.js';
import 'todosalud-webc-form-citas/todosalud-webc-form-citas-main.js';
import 'todosalud-webc-form-citas/todosalud-webc-form-citas.css';

@NgModule({
imports: [BrowserModule],
schemas: [CUSTOM_ELEMENTS_SCHEMA], // IMPORTANTE: Necesario para web components
// ...
})
export class AppModule { }
`

Para componentes standalone:

`typescript
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

// Importar el web component desde node_modules
// ⚠️ NO uses el archivo todosalud-webc-form-citas.js (loader)
// Importa directamente los archivos .js y .css
import 'todosalud-webc-form-citas/todosalud-webc-form-citas-polyfills.js';
import 'todosalud-webc-form-citas/todosalud-webc-form-citas-main.js';
import 'todosalud-webc-form-citas/todosalud-webc-form-citas.css';

@Component({
selector: 'app-mi-componente',
standalone: true,
schemas: [CUSTOM_ELEMENTS_SCHEMA], // IMPORTANTE
template: ...
})
export class MiComponente { }
`

#### Paso 3: Usar en tu template

`html
[appName]="'Mi Aplicación'"
[minPasswordLength]="8"
(formSubmitted)="onFormSubmitted($event)"
(cancel)="onCancel()">

`

#### Paso 4: Escuchar eventos en tu componente

`typescript
onFormSubmitted(event: CustomEvent) {
const { app, data } = event.detail;
console.log('Datos del formulario:', data);
// Hacer lo que necesites con los datos
}

onCancel() {
console.log('Formulario cancelado');
}
`

📖 Ver guía completa en GUIA-USO-ANGULAR.md

$3

1. Importar en tu página o componente:

`typescript
import { Component } from '@ionic/angular';
import 'todosalud-webc-form-citas/todosalud-webc-form-citas.js';
import 'todosalud-webc-form-citas/todosalud-webc-form-citas.css';

@Component({
selector: 'app-citas',
templateUrl: './citas.page.html'
})
export class CitasPage {
// ...
}
`

2. Usar en el template:

`html

[appName]="'Ionic App'"
(formSubmitted)="handleSubmit($event)">


`

$3

Nota importante: Para uso en HTML puro, se recomienda usar el componente dentro de una aplicación Angular o usar el servidor de desarrollo (npm start). Los archivos compilados pueden tener problemas con Zone.js cuando se cargan directamente.

Si necesitas usarlo en HTML puro, carga los archivos en este orden:

`html






app-name="Mi App"
min-password-length="8">






`

Propiedades (Inputs)

- appName (string): Nombre de la aplicación
- minPasswordLength (number): Longitud mínima de contraseña (default: 6)

Eventos (Outputs)

- formSubmitted: Se emite cuando el formulario es enviado exitosamente
`typescript
event.detail = {
app: string,
data: any
}
`

- cancel: Se emite cuando el usuario cancela el formulario
`typescript
event.detail = {
app: string,
cancelled: boolean,
timestamp: string
}
`

Desarrollo

`bash


Instalar dependencias

npm install

Desarrollo

npm start

Build para producción

npm run build:elements
``

Licencia

MIT