@telcomdev/ui 0.0.1 → 0.0.3

package/README.md

@@ -1,11 +1,169 @@
 # Telcomdev UI
 
+## Iconos
+
+```ts
+import { TdIcon, TdIconoRegistry } from '@telcomdev/ui';
+
+@Component({
+  imports: [TdIcon],
+})
+export class App {
+  constructor(registry: TdIconoRegistry) {
+    registry.registrar({
+      estrella: 'M12 2 15 9 22 9 17 14 19 22 12 17 5 22 7 14 2 9 9 9Z',
+    });
+  }
+}
+```
+
+```html
+<td-icon nombre="security" tamano="24px" />
+<td-icon nombre="estrella" titulo="Favorito" />
+```
+
+El icono hereda el color CSS mediante `currentColor`. Si el nombre no existe, se muestra
+`folder`.
+
+## Data table
+
+`TdDataTable` usa `@angular/cdk/scrolling` para virtualizar las filas. La aplicación
+consumidora mantiene la responsabilidad de consultar, paginar y modificar datos.
+
+```ts
+import {
+  TdDataTable,
+  TdDataTableAccion,
+  TdDataTableAccionEvento,
+  TdDataTableBoton,
+  TdDataTableColumna,
+} from '@telcomdev/ui';
+
+@Component({
+  imports: [TdDataTable],
+})
+export class Establecimientos {
+  columnas: TdDataTableColumna<Establecimiento>[] = [
+    { clave: 'nombre', encabezado: 'Nombre', ancho: '1fr' },
+    { clave: 'codigoSunat', encabezado: 'Código Sunat', ancho: '8rem' },
+    { clave: 'direccion', encabezado: 'Dirección', ancho: '1.5fr' },
+    { clave: 'esPrincipal', encabezado: 'Principal', tipo: 'booleano' },
+    { clave: 'activo', encabezado: 'Estado', tipo: 'estado' },
+  ];
+
+  acciones: TdDataTableAccion<Establecimiento>[] = [
+    { id: 'editar', etiqueta: 'Editar', icono: 'edit' },
+    { id: 'eliminar', etiqueta: 'Eliminar', icono: 'delete', tono: 'peligro' },
+  ];
+
+  botones: TdDataTableBoton[] = [
+    { id: 'pdf', etiqueta: 'Exportar PDF', icono: 'pdf', tono: 'peligro' },
+    { id: 'excel', etiqueta: 'Exportar Excel', icono: 'description', tono: 'exito' },
+  ];
+
+  ejecutar(evento: TdDataTableAccionEvento<Establecimiento>) {
+    // evento.accion.id, evento.fila y evento.indice
+  }
+}
+```
+
+```html
+<td-data-table
+  campoId="establecimientoId"
+  textoAgregar="Agregar establecimiento"
+  [datos]="lista()"
+  [columnas]="columnas"
+  [acciones]="acciones"
+  [botones]="botones"
+  [total]="totalEstablecimientos()"
+  [cargando]="cargando()"
+  [puedeCargarMas]="paginaActual() < totalPaginas()"
+  (busquedaChange)="buscar($event)"
+  (agregar)="abrirModal(0)"
+  (accion)="ejecutar($event)"
+  (botonClick)="exportar($event)"
+  (cargarMas)="paginaSiguiente()"
+>
+  <select tdDataTableFilters [(ngModel)]="estado">
+    <option value="">Todos los estados</option>
+    <option value="activo">Activos</option>
+    <option value="inactivo">Inactivos</option>
+  </select>
+
+  <input tdDataTableFilters type="date" [(ngModel)]="fecha" />
+
+  <button tdDataTableActions type="button">Acción personalizada</button>
+</td-data-table>
+```
+
+Incluye búsqueda con debounce, scroll virtual, carga incremental, chips de estado,
+acciones condicionales, tema oscuro, estado vacío y skeleton de carga. Los elementos
+marcados con `tdDataTableFilters` se colocan junto al buscador. Los elementos
+`tdDataTableActions` aparecen junto al contador y al botón Agregar.
+
+## Header
+
+```ts
+import { TdHeader } from '@telcomdev/ui';
+
+@Component({
+  imports: [TdHeader],
+})
+export class App {
+  sidebarAbierto = true;
+}
+```
+
+```html
+<td-header
+  [menuAbierto]="sidebarAbierto"
+  [oscuro]="oscuro"
+  usuario="Andrea Torres"
+  cargo="Administradora"
+  [notificaciones]="notificaciones"
+  (menuToggle)="sidebarAbierto = !sidebarAbierto"
+  (notificacionSeleccionada)="abrirNotificacion($event)"
+  (verTodasNotificaciones)="verNotificaciones()"
+  (accionPerfil)="ejecutarAccionPerfil($event)"
+>
+  <button tdHeaderActions type="button">Acción adicional</button>
+</td-header>
+```
+
+El header incluye dropdowns funcionales de notificaciones y perfil, avatar por iniciales,
+modo responsive y tema oscuro. Las acciones `tdHeaderActions` aparecen a la derecha.
+
+## Footer
+
+```ts
+import { TdFooter } from '@telcomdev/ui';
+
+@Component({
+  imports: [TdFooter],
+})
+export class App {}
+```
+
+```html
+<td-footer
+  empresa="TelcomDev"
+  texto="Todos los derechos reservados."
+  version="1.0.0"
+  [oscuro]="oscuro"
+>
+  <a tdFooterLinks href="/privacidad">Privacidad</a>
+  <span tdFooterActions>Angular 21</span>
+</td-footer>
+```
+
+El footer calcula el año actual por defecto y admite el modo `compacto`.
+
 ## Sidebar
 
 `TdSidebar` es standalone y no depende de Angular Material ni Tailwind.
 
 ```ts
-import { MenuSidebar, TdSidebar } from 'telcomdev-ui';
+import { MenuSidebar, TdSidebar } from '@telcomdev/ui';
 
 @Component({
   imports: [TdSidebar],
@@ -32,6 +190,7 @@ export class App {
   subtitulo="Central Platform"
   [menu]="menu"
   [(abierto)]="abierto"
+  modoCerrado="oculto"
   [oscuro]="oscuro"
   [cargando]="false"
   error=""
@@ -39,6 +198,17 @@ export class App {
 />
 ```
 
+El botón para abrir o cerrar debe vivir en el header de la aplicación:
+
+```html
+<button type="button" (click)="abierto = !abierto">
+  <td-icon [nombre]="abierto ? 'close' : 'menu'" />
+</button>
+```
+
+`modoCerrado` acepta `compacto` para conservar una barra de iconos u `oculto` para cerrar
+completamente el sidebar.
+
 La aplicación consumidora obtiene el menú desde su propia API. El componente ordena cada
 nivel por `orden`, usa `folder` cuando no recibe icono y renderiza los submenús
 recursivamente.