todosalud-webc-form-citas 1.0.0 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +115 -60
  2. package/package.json +13 -4
package/README.md CHANGED
@@ -1,88 +1,143 @@
1
1
  # TodoSalud Form Citas - Web Component
2
2
 
3
+ Web Component creado con Angular Elements para formularios de citas médicas. Compatible con Angular, Ionic y cualquier framework que soporte Custom Elements.
4
+
3
5
  ## Instalación
4
6
 
5
7
  ```bash
6
8
  npm install todosalud-webc-form-citas
7
9
  ```
8
10
 
9
- ## Uso en Angular
10
-
11
- ### 1. Configurar angular.json
12
-
13
- ```json
14
- {
15
- "projects": {
16
- "tu-proyecto": {
17
- "architect": {
18
- "build": {
19
- "options": {
20
- "scripts": [
21
- "node_modules/todosalud-webc-form-citas/todosalud-webc-form-citas.js"
22
- ],
23
- "styles": [
24
- "node_modules/todosalud-webc-form-citas/todosalud-webc-form-citas.css"
25
- ]
26
- }
27
- }
28
- }
29
- }
30
- }
31
- }
32
- ```
11
+ ## Uso
33
12
 
34
- ### 2. Agregar CUSTOM_ELEMENTS_SCHEMA
13
+ ### En Angular
35
14
 
36
- ```typescript
37
- // app.module.ts
38
- import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
15
+ 1. **Importar el componente en tu módulo o componente standalone:**
39
16
 
40
- @NgModule({
41
- declarations: [...],
42
- imports: [...],
43
- schemas: [CUSTOM_ELEMENTS_SCHEMA]
44
- })
45
- export class AppModule { }
17
+ ```typescript
18
+ import 'todosalud-webc-form-citas/todosalud-webc-form-citas.js';
19
+ import 'todosalud-webc-form-citas/todosalud-webc-form-citas.css';
46
20
  ```
47
21
 
48
- ### 3. Usar en tu componente
22
+ 2. **Usar en tu template:**
49
23
 
50
24
  ```html
51
25
  <todosalud-webc-form-citas
52
- app-name="plsrecaudos"
53
- min-password-length="6"
54
- (formSubmitted)="onSubmit($event)"
55
- (cancel)="onCancel($event)">
26
+ [appName]="'Mi Aplicación'"
27
+ [minPasswordLength]="8"
28
+ (formSubmitted)="onFormSubmitted($event)"
29
+ (cancel)="onCancel()">
56
30
  </todosalud-webc-form-citas>
57
31
  ```
58
32
 
33
+ 3. **Escuchar eventos en tu componente:**
34
+
59
35
  ```typescript
60
- export class MiComponente {
61
- onSubmit(event: any) {
62
- console.log('Datos:', event.detail);
63
- const { app, data } = event.detail;
64
- // data.email, data.password
65
- }
36
+ onFormSubmitted(event: CustomEvent) {
37
+ console.log('Datos del formulario:', event.detail);
38
+ }
66
39
 
67
- onCancel(event: any) {
68
- console.log('Cancelado:', event.detail);
69
- }
40
+ onCancel() {
41
+ console.log('Formulario cancelado');
42
+ }
43
+ ```
44
+
45
+ ### En Ionic
46
+
47
+ 1. **Importar en tu página o componente:**
48
+
49
+ ```typescript
50
+ import { Component } from '@ionic/angular';
51
+ import 'todosalud-webc-form-citas/todosalud-webc-form-citas.js';
52
+ import 'todosalud-webc-form-citas/todosalud-webc-form-citas.css';
53
+
54
+ @Component({
55
+ selector: 'app-citas',
56
+ templateUrl: './citas.page.html'
57
+ })
58
+ export class CitasPage {
59
+ // ...
70
60
  }
71
61
  ```
72
62
 
73
- ## Propiedades
63
+ 2. **Usar en el template:**
64
+
65
+ ```html
66
+ <ion-content>
67
+ <todosalud-webc-form-citas
68
+ [appName]="'Ionic App'"
69
+ (formSubmitted)="handleSubmit($event)">
70
+ </todosalud-webc-form-citas>
71
+ </ion-content>
72
+ ```
73
+
74
+ ### En HTML puro / Vanilla JS
75
+
76
+ ```html
77
+ <!DOCTYPE html>
78
+ <html>
79
+ <head>
80
+ <link rel="stylesheet" href="node_modules/todosalud-webc-form-citas/todosalud-webc-form-citas.css">
81
+ </head>
82
+ <body>
83
+ <todosalud-webc-form-citas
84
+ app-name="Mi App"
85
+ min-password-length="8">
86
+ </todosalud-webc-form-citas>
87
+
88
+ <script src="node_modules/todosalud-webc-form-citas/todosalud-webc-form-citas.js"></script>
89
+ <script>
90
+ const element = document.querySelector('todosalud-webc-form-citas');
91
+
92
+ element.addEventListener('formSubmitted', (event) => {
93
+ console.log('Datos:', event.detail);
94
+ });
95
+
96
+ element.addEventListener('cancel', () => {
97
+ console.log('Cancelado');
98
+ });
99
+ </script>
100
+ </body>
101
+ </html>
102
+ ```
103
+
104
+ ## Propiedades (Inputs)
74
105
 
75
- | Propiedad | Tipo | Default | Descripción |
76
- |-----------|------|---------|-------------|
77
- | app-name | string | '' | Nombre de la aplicación |
78
- | min-password-length | number | 6 | Longitud mínima del password |
106
+ - `appName` (string): Nombre de la aplicación
107
+ - `minPasswordLength` (number): Longitud mínima de contraseña (default: 6)
79
108
 
80
- ## Eventos
109
+ ## Eventos (Outputs)
110
+
111
+ - `formSubmitted`: Se emite cuando el formulario es enviado exitosamente
112
+ ```typescript
113
+ event.detail = {
114
+ app: string,
115
+ data: any
116
+ }
117
+ ```
118
+
119
+ - `cancel`: Se emite cuando el usuario cancela el formulario
120
+ ```typescript
121
+ event.detail = {
122
+ app: string,
123
+ cancelled: boolean,
124
+ timestamp: string
125
+ }
126
+ ```
127
+
128
+ ## Desarrollo
129
+
130
+ ```bash
131
+ # Instalar dependencias
132
+ npm install
133
+
134
+ # Desarrollo
135
+ npm start
136
+
137
+ # Build para producción
138
+ npm run build:elements
139
+ ```
81
140
 
82
- | Evento | Payload | Descripción |
83
- |--------|---------|-------------|
84
- | formSubmitted | {app, data: {email, password}} | Formulario enviado |
85
- | cancel | {app, cancelled, timestamp} | Formulario cancelado |
141
+ ## Licencia
86
142
 
87
- ## Versión
88
- 1.0.0
143
+ MIT
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "todosalud-webc-form-citas",
3
- "version": "1.0.0",
3
+ "version": "1.1.0",
4
4
  "description": "Web Component para formulario de citas médicas TodoSalud",
5
5
  "main": "todosalud-webc-form-citas.js",
6
6
  "scripts": {
@@ -8,21 +8,30 @@
8
8
  "build": "ng build --configuration production",
9
9
  "build:elements": "npm run build && node build-elements.js",
10
10
  "pack": "npm run build:elements && npm pack",
11
- "publish:npm": "npm run build:elements && npm publish"
11
+ "publish:npm": "npm run build:elements && npm publish",
12
+ "prepublishOnly": "npm run build:elements"
12
13
  },
13
14
  "keywords": [
14
15
  "web-component",
15
16
  "angular",
17
+ "angular-elements",
16
18
  "todosalud",
17
- "formulario"
19
+ "formulario",
20
+ "citas",
21
+ "custom-element"
18
22
  ],
19
23
  "author": "TodoSalud",
20
24
  "license": "MIT",
21
25
  "files": [
22
26
  "todosalud-webc-form-citas.js",
23
27
  "todosalud-webc-form-citas.css",
24
- "README.md"
28
+ "README.md",
29
+ "package.json"
25
30
  ],
31
+ "repository": {
32
+ "type": "git",
33
+ "url": ""
34
+ },
26
35
  "dependencies": {
27
36
  "@angular/animations": "^19.2.18",
28
37
  "@angular/common": "^19.2.0",