@telcomdev/ui 0.0.6 → 0.0.8

package/README.md

@@ -296,6 +296,81 @@ Iconos incluidos: `home`, `dashboard`, `folder`, `settings`, `people`, `person`,
 `security`, `inventory`, `shopping_cart`, `receipt`, `assessment`, `description` y
 `business`.
 
+## Signal Forms
+
+`TdInput`, `TdSelect`, `TdAutocompleteSelect` y `TdDatePicker` implementan
+`FormValueControl` y conservan soporte para `ngModel` y Reactive Forms.
+
+Cuando existe `[formField]`, el field pasa a ser la fuente principal del valor y
+del estado. Los controles reciben automáticamente `errors`, `invalid`,
+`required`, `readonly`, `disabled`, `min`, `max`, `minLength`, `maxLength` y
+`pattern` cuando corresponda. Las propiedades tradicionales (`value`,
+`valueChange`, `error`, `disabled`, etc.) continúan disponibles para no exigir
+una migración completa.
+
+`TdInput` acepta fields `string`, `number` y sus variantes anulables. Un valor
+`null` se presenta como un input vacío. Con `type="number"` y Signal Forms, el
+control entrega `number | null`, evitando números almacenados como texto.
+
+La política de vaciado se resuelve automáticamente y puede fijarse cuando sea
+necesario:
+
+```html
+<td-input type="number" [formField]="fields.cantidad" />
+<td-input [formField]="fields.correo" emptyValue="null" />
+```
+
+`emptyValue` acepta `auto` (predeterminado), `null` y `empty-string`. En modo
+tradicional se conserva el comportamiento histórico: `type="number"` continúa
+emitiendo texto mediante CVA para no romper formularios existentes.
+
+```ts
+import { signal } from '@angular/core';
+import { form, FormField } from '@angular/forms/signals';
+
+readonly model = signal({
+  nombre: '',
+  periodo: null as TdDatePickerValue,
+});
+readonly fields = form(this.model);
+```
+
+Agrega `FormField` a los imports del componente. La librería no registra un
+segundo selector `[formField]`, evitando conflictos con la directiva oficial y
+con la transformación especial del compilador de Angular.
+
+```html
+<td-input [formField]="fields.nombre" />
+<td-date-picker mode="rango" [formField]="fields.periodo" />
+```
+
+El uso clásico sigue siendo válido:
+
+```html
+<td-input [(ngModel)]="nombre" />
+<td-select [formControl]="form.controls.estado" [options]="estados" />
+```
+
+## Date Picker
+
+```html
+<td-date-picker
+  label="Fecha de emisión"
+  min="2026-01-01"
+  max="2027-12-31"
+  [(ngModel)]="fecha"
+/>
+
+<td-date-picker
+  label="Periodo"
+  mode="rango"
+  [(ngModel)]="rango"
+/>
+```
+
+Las fechas se almacenan como `YYYY-MM-DD`. En modo rango el valor tiene la forma
+`{ inicio: string, fin: string | null }`.
+
 ## Build
 
 ```bash