todosalud-webc-form-citas

v1.6.0

Published

a month ago

Web Component para formulario de citas médicas TodoSalud

0High
0Medium
0Low

camicalle04

web-component angular angular-elements todosalud formulario citas custom-element

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

npm install todosalud-webc-form-citas

Uso

En Angular

Paso 1: Instalar el paquete

npm install todosalud-webc-form-citas

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

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

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:

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

<todosalud-webc-form-citas
  [appName]="'Mi Aplicación'"
  [minPasswordLength]="8"
  (formSubmitted)="onFormSubmitted($event)"
  (cancel)="onCancel()">
</todosalud-webc-form-citas>

Paso 4: Escuchar eventos en tu componente

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

En Ionic

Importar en tu página o componente:

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 {
  // ...
}

Usar en el template:

<ion-content>
  <todosalud-webc-form-citas
    [appName]="'Ionic App'"
    (formSubmitted)="handleSubmit($event)">
  </todosalud-webc-form-citas>
</ion-content>

En HTML puro / Vanilla JS

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:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="node_modules/todosalud-webc-form-citas/todosalud-webc-form-citas.css">
</head>
<body>
  <todosalud-webc-form-citas
    app-name="Mi App"
    min-password-length="8">
  </todosalud-webc-form-citas>

  <script src="node_modules/todosalud-webc-form-citas/todosalud-webc-form-citas.js"></script>
  <script>
    const element = document.querySelector('todosalud-webc-form-citas');
    
    element.addEventListener('formSubmitted', (event) => {
      console.log('Datos:', event.detail);
    });
    
    element.addEventListener('cancel', () => {
      console.log('Cancelado');
    });
  </script>
</body>
</html>

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
```
event.detail = {
  app: string,
  data: any
}
```

cancel: Se emite cuando el usuario cancela el formulario

event.detail = {
  app: string,
  cancelled: boolean,
  timestamp: string
}

Desarrollo

# Instalar dependencias
npm install

# Desarrollo
npm start

# Build para producción
npm run build:elements

Licencia

MIT