@telcomdev/ui 0.0.7 → 0.0.8
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 +34 -0
- package/fesm2022/telcomdev-ui.mjs +255 -108
- package/fesm2022/telcomdev-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/types/telcomdev-ui.d.ts +96 -38
package/README.md
CHANGED
|
@@ -301,6 +301,29 @@ Iconos incluidos: `home`, `dashboard`, `folder`, `settings`, `people`, `person`,
|
|
|
301
301
|
`TdInput`, `TdSelect`, `TdAutocompleteSelect` y `TdDatePicker` implementan
|
|
302
302
|
`FormValueControl` y conservan soporte para `ngModel` y Reactive Forms.
|
|
303
303
|
|
|
304
|
+
Cuando existe `[formField]`, el field pasa a ser la fuente principal del valor y
|
|
305
|
+
del estado. Los controles reciben automáticamente `errors`, `invalid`,
|
|
306
|
+
`required`, `readonly`, `disabled`, `min`, `max`, `minLength`, `maxLength` y
|
|
307
|
+
`pattern` cuando corresponda. Las propiedades tradicionales (`value`,
|
|
308
|
+
`valueChange`, `error`, `disabled`, etc.) continúan disponibles para no exigir
|
|
309
|
+
una migración completa.
|
|
310
|
+
|
|
311
|
+
`TdInput` acepta fields `string`, `number` y sus variantes anulables. Un valor
|
|
312
|
+
`null` se presenta como un input vacío. Con `type="number"` y Signal Forms, el
|
|
313
|
+
control entrega `number | null`, evitando números almacenados como texto.
|
|
314
|
+
|
|
315
|
+
La política de vaciado se resuelve automáticamente y puede fijarse cuando sea
|
|
316
|
+
necesario:
|
|
317
|
+
|
|
318
|
+
```html
|
|
319
|
+
<td-input type="number" [formField]="fields.cantidad" />
|
|
320
|
+
<td-input [formField]="fields.correo" emptyValue="null" />
|
|
321
|
+
```
|
|
322
|
+
|
|
323
|
+
`emptyValue` acepta `auto` (predeterminado), `null` y `empty-string`. En modo
|
|
324
|
+
tradicional se conserva el comportamiento histórico: `type="number"` continúa
|
|
325
|
+
emitiendo texto mediante CVA para no romper formularios existentes.
|
|
326
|
+
|
|
304
327
|
```ts
|
|
305
328
|
import { signal } from '@angular/core';
|
|
306
329
|
import { form, FormField } from '@angular/forms/signals';
|
|
@@ -312,11 +335,22 @@ readonly model = signal({
|
|
|
312
335
|
readonly fields = form(this.model);
|
|
313
336
|
```
|
|
314
337
|
|
|
338
|
+
Agrega `FormField` a los imports del componente. La librería no registra un
|
|
339
|
+
segundo selector `[formField]`, evitando conflictos con la directiva oficial y
|
|
340
|
+
con la transformación especial del compilador de Angular.
|
|
341
|
+
|
|
315
342
|
```html
|
|
316
343
|
<td-input [formField]="fields.nombre" />
|
|
317
344
|
<td-date-picker mode="rango" [formField]="fields.periodo" />
|
|
318
345
|
```
|
|
319
346
|
|
|
347
|
+
El uso clásico sigue siendo válido:
|
|
348
|
+
|
|
349
|
+
```html
|
|
350
|
+
<td-input [(ngModel)]="nombre" />
|
|
351
|
+
<td-select [formControl]="form.controls.estado" [options]="estados" />
|
|
352
|
+
```
|
|
353
|
+
|
|
320
354
|
## Date Picker
|
|
321
355
|
|
|
322
356
|
```html
|