@telcomdev/ui 0.0.5 → 0.0.7
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 +57 -0
- package/fesm2022/telcomdev-ui.mjs +1353 -141
- package/fesm2022/telcomdev-ui.mjs.map +1 -1
- package/package.json +5 -1
- package/types/telcomdev-ui.d.ts +370 -54
package/README.md
CHANGED
|
@@ -37,6 +37,22 @@ El comportamiento predeterminado durante el scroll es `reposition`, por lo que
|
|
|
37
37
|
el panel permanece unido al control. Puede cambiarse con
|
|
38
38
|
`scrollBehavior="close"`.
|
|
39
39
|
|
|
40
|
+
## Tabs
|
|
41
|
+
|
|
42
|
+
```html
|
|
43
|
+
<td-tabs [(selectedIndex)]="indice">
|
|
44
|
+
<td-tab label="General" icon="settings">
|
|
45
|
+
<app-general />
|
|
46
|
+
</td-tab>
|
|
47
|
+
<td-tab label="Usuarios" icon="people" [badge]="12">
|
|
48
|
+
<app-usuarios />
|
|
49
|
+
</td-tab>
|
|
50
|
+
</td-tabs>
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
Incluye las variantes `linea`, `pastilla` y `contenida`, además de navegación
|
|
54
|
+
con flechas, Home y End.
|
|
55
|
+
|
|
40
56
|
Para usar componentes basados en Overlay, como `TdDialog`, agrega el estilo
|
|
41
57
|
estructural del CDK en `angular.json`:
|
|
42
58
|
|
|
@@ -280,6 +296,47 @@ Iconos incluidos: `home`, `dashboard`, `folder`, `settings`, `people`, `person`,
|
|
|
280
296
|
`security`, `inventory`, `shopping_cart`, `receipt`, `assessment`, `description` y
|
|
281
297
|
`business`.
|
|
282
298
|
|
|
299
|
+
## Signal Forms
|
|
300
|
+
|
|
301
|
+
`TdInput`, `TdSelect`, `TdAutocompleteSelect` y `TdDatePicker` implementan
|
|
302
|
+
`FormValueControl` y conservan soporte para `ngModel` y Reactive Forms.
|
|
303
|
+
|
|
304
|
+
```ts
|
|
305
|
+
import { signal } from '@angular/core';
|
|
306
|
+
import { form, FormField } from '@angular/forms/signals';
|
|
307
|
+
|
|
308
|
+
readonly model = signal({
|
|
309
|
+
nombre: '',
|
|
310
|
+
periodo: null as TdDatePickerValue,
|
|
311
|
+
});
|
|
312
|
+
readonly fields = form(this.model);
|
|
313
|
+
```
|
|
314
|
+
|
|
315
|
+
```html
|
|
316
|
+
<td-input [formField]="fields.nombre" />
|
|
317
|
+
<td-date-picker mode="rango" [formField]="fields.periodo" />
|
|
318
|
+
```
|
|
319
|
+
|
|
320
|
+
## Date Picker
|
|
321
|
+
|
|
322
|
+
```html
|
|
323
|
+
<td-date-picker
|
|
324
|
+
label="Fecha de emisión"
|
|
325
|
+
min="2026-01-01"
|
|
326
|
+
max="2027-12-31"
|
|
327
|
+
[(ngModel)]="fecha"
|
|
328
|
+
/>
|
|
329
|
+
|
|
330
|
+
<td-date-picker
|
|
331
|
+
label="Periodo"
|
|
332
|
+
mode="rango"
|
|
333
|
+
[(ngModel)]="rango"
|
|
334
|
+
/>
|
|
335
|
+
```
|
|
336
|
+
|
|
337
|
+
Las fechas se almacenan como `YYYY-MM-DD`. En modo rango el valor tiene la forma
|
|
338
|
+
`{ inicio: string, fin: string | null }`.
|
|
339
|
+
|
|
283
340
|
## Build
|
|
284
341
|
|
|
285
342
|
```bash
|