@telcomdev/ui 0.0.3 → 0.0.5
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.
- package/README.md +66 -3
- package/fesm2022/telcomdev-ui.mjs +1322 -17
- package/fesm2022/telcomdev-ui.mjs.map +1 -1
- package/package.json +6 -2
- package/types/telcomdev-ui.d.ts +242 -10
package/README.md
CHANGED
|
@@ -1,5 +1,63 @@
|
|
|
1
1
|
# Telcomdev UI
|
|
2
2
|
|
|
3
|
+
## Input outline
|
|
4
|
+
|
|
5
|
+
```html
|
|
6
|
+
<td-input
|
|
7
|
+
label="Nombre completo"
|
|
8
|
+
icon="person"
|
|
9
|
+
[clearable]="true"
|
|
10
|
+
[(ngModel)]="nombre"
|
|
11
|
+
/>
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
`TdInput` es compatible con `ngModel` y formularios reactivos. La etiqueta y
|
|
15
|
+
el borde outline permanecen visibles en todos los estados.
|
|
16
|
+
|
|
17
|
+
## Selects
|
|
18
|
+
|
|
19
|
+
```html
|
|
20
|
+
<td-select
|
|
21
|
+
label="Estado"
|
|
22
|
+
[options]="estados"
|
|
23
|
+
[(ngModel)]="estado"
|
|
24
|
+
/>
|
|
25
|
+
|
|
26
|
+
<td-autocomplete-select
|
|
27
|
+
label="Ciudad"
|
|
28
|
+
[options]="ciudades"
|
|
29
|
+
[(ngModel)]="ciudad"
|
|
30
|
+
/>
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
Ambos controles usan `TdSelectOption<T>`, son compatibles con formularios
|
|
34
|
+
Angular y muestran su panel mediante Angular CDK Overlay.
|
|
35
|
+
|
|
36
|
+
El comportamiento predeterminado durante el scroll es `reposition`, por lo que
|
|
37
|
+
el panel permanece unido al control. Puede cambiarse con
|
|
38
|
+
`scrollBehavior="close"`.
|
|
39
|
+
|
|
40
|
+
Para usar componentes basados en Overlay, como `TdDialog`, agrega el estilo
|
|
41
|
+
estructural del CDK en `angular.json`:
|
|
42
|
+
|
|
43
|
+
```json
|
|
44
|
+
"styles": [
|
|
45
|
+
"node_modules/@angular/cdk/overlay-prebuilt.css",
|
|
46
|
+
"src/styles.scss"
|
|
47
|
+
]
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
Los diálogos pueden abrir cualquier componente standalone. El contenido decide
|
|
51
|
+
libremente sus acciones:
|
|
52
|
+
|
|
53
|
+
```html
|
|
54
|
+
<td-dialog-actions>
|
|
55
|
+
<button type="button" [tdDialogClose]="false">Cancelar</button>
|
|
56
|
+
<button type="button" (click)="guardarBorrador()">Borrador</button>
|
|
57
|
+
<button type="submit" tdDialogPrimary>Guardar</button>
|
|
58
|
+
</td-dialog-actions>
|
|
59
|
+
```
|
|
60
|
+
|
|
3
61
|
## Iconos
|
|
4
62
|
|
|
5
63
|
```ts
|
|
@@ -57,6 +115,7 @@ export class Establecimientos {
|
|
|
57
115
|
];
|
|
58
116
|
|
|
59
117
|
botones: TdDataTableBoton[] = [
|
|
118
|
+
{ id: 'agregar', etiqueta: 'Agregar establecimiento', icono: 'add', tono: 'primario' },
|
|
60
119
|
{ id: 'pdf', etiqueta: 'Exportar PDF', icono: 'pdf', tono: 'peligro' },
|
|
61
120
|
{ id: 'excel', etiqueta: 'Exportar Excel', icono: 'description', tono: 'exito' },
|
|
62
121
|
];
|
|
@@ -64,24 +123,28 @@ export class Establecimientos {
|
|
|
64
123
|
ejecutar(evento: TdDataTableAccionEvento<Establecimiento>) {
|
|
65
124
|
// evento.accion.id, evento.fila y evento.indice
|
|
66
125
|
}
|
|
126
|
+
|
|
127
|
+
ejecutarBoton(boton: TdDataTableBoton) {
|
|
128
|
+
if (boton.id === 'agregar') this.abrirModal(0);
|
|
129
|
+
if (boton.id === 'pdf') this.exportarPdf();
|
|
130
|
+
}
|
|
67
131
|
}
|
|
68
132
|
```
|
|
69
133
|
|
|
70
134
|
```html
|
|
71
135
|
<td-data-table
|
|
72
136
|
campoId="establecimientoId"
|
|
73
|
-
textoAgregar="Agregar establecimiento"
|
|
74
137
|
[datos]="lista()"
|
|
75
138
|
[columnas]="columnas"
|
|
76
139
|
[acciones]="acciones"
|
|
77
140
|
[botones]="botones"
|
|
78
141
|
[total]="totalEstablecimientos()"
|
|
79
142
|
[cargando]="cargando()"
|
|
143
|
+
[filasAntesDeCargar]="5"
|
|
80
144
|
[puedeCargarMas]="paginaActual() < totalPaginas()"
|
|
81
145
|
(busquedaChange)="buscar($event)"
|
|
82
|
-
(agregar)="abrirModal(0)"
|
|
83
146
|
(accion)="ejecutar($event)"
|
|
84
|
-
(botonClick)="
|
|
147
|
+
(botonClick)="ejecutarBoton($event)"
|
|
85
148
|
(cargarMas)="paginaSiguiente()"
|
|
86
149
|
>
|
|
87
150
|
<select tdDataTableFilters [(ngModel)]="estado">
|