@kaufmann-lab/ui 0.1.1 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaufmann-lab/ui",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Shared Angular component library for the Kaufmann frontends",
   "license": "MIT",
   "author": "Kaufmann Lab",

package/types/kaufmann-lab-ui.d.ts

@@ -2,11 +2,23 @@ import * as _angular_core from '@angular/core';
 import { AfterContentInit, TemplateRef, AfterViewInit } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 
-/** Nombre de cada uno de los 59 íconos del design system (página 5). */
-type IconName = 'activity' | 'alert-circle' | 'alert-octagon' | 'alert-triangle' | 'award' | 'bar-chart' | 'bell' | 'bus' | 'calculator' | 'calendar' | 'car' | 'cart' | 'check' | 'check-circle' | 'check-square' | 'chevron-down' | 'chevron-left' | 'chevron-left-bar' | 'chevron-right' | 'clipboard' | 'clock' | 'credit-card' | 'download' | 'edit' | 'external-link' | 'eye' | 'file' | 'filter' | 'gauge' | 'gift' | 'grid' | 'history' | 'inbox' | 'layers' | 'list' | 'map' | 'map-pin' | 'menu' | 'mic' | 'mic-off' | 'more-vertical' | 'pause' | 'phone' | 'play' | 'plus' | 'search' | 'settings' | 'shield-check' | 'sort' | 'star' | 'ticket' | 'tool' | 'trash' | 'truck' | 'upload-cloud' | 'user' | 'user-search' | 'video' | 'x';
+/**
+ * Nombre de cada ícono del design system. Página 5 del PDF fija un set de
+ * 59; `eye-off` es una extensión propia por fuera de ese set, agregada para
+ * el toggle de mostrar/ocultar contraseña de `Input` — no hay un ícono de
+ * "ojo tachado" en la spec original porque esa interacción no estaba
+ * contemplada ahí.
+ *
+ * Separado de `Icon.ts` a propósito: este type es el contrato público que
+ * comparten `Icon`, `icons/index.ts` (registro) y cualquier componente que
+ * reciba un `IconName` (`Button`, `MetricCard`, etc.) — no debería requerir
+ * importar el componente `Icon` completo solo para tipar una prop.
+ */
+type IconName = 'activity' | 'alert-circle' | 'alert-octagon' | 'alert-triangle' | 'award' | 'bar-chart' | 'bell' | 'bus' | 'calculator' | 'calendar' | 'car' | 'cart' | 'check' | 'check-circle' | 'check-square' | 'chevron-down' | 'chevron-left' | 'chevron-left-bar' | 'chevron-right' | 'clipboard' | 'clock' | 'credit-card' | 'download' | 'edit' | 'external-link' | 'eye' | 'eye-off' | 'file' | 'filter' | 'gauge' | 'gift' | 'grid' | 'history' | 'inbox' | 'layers' | 'list' | 'map' | 'map-pin' | 'menu' | 'mic' | 'mic-off' | 'more-vertical' | 'pause' | 'phone' | 'play' | 'plus' | 'search' | 'settings' | 'shield-check' | 'sort' | 'star' | 'ticket' | 'tool' | 'trash' | 'truck' | 'upload-cloud' | 'user' | 'user-search' | 'video' | 'x';
+
 type IconSize = 'sm' | 'md' | 'lg';
 /**
- * Ícono de trazo del design system — 59 glyphs (página 5), grilla 24×24,
+ * Ícono de trazo del design system — 60 glyphs (59 de la página 5 + `eye-off`), grilla 24×24,
  * grosor de trazo 1.9px. Referencia un sprite SVG embebido (ver
  * `icon-sprite.ts`) vía `<use>`, así que no hay peso de red adicional por
  * cada instancia: el sprite se inyecta al DOM una única vez, la primera
@@ -577,6 +589,22 @@ declare class DataTable<T = unknown> {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DataTable<any>, "kf-data-table", never, { "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "rows": { "alias": "rows"; "required": true; "isSignal": true; }; "rowKey": { "alias": "rowKey"; "required": false; "isSignal": true; }; "flush": { "alias": "flush"; "required": false; "isSignal": true; }; "cardable": { "alias": "cardable"; "required": false; "isSignal": true; }; "defaultView": { "alias": "defaultView"; "required": false; "isSignal": true; }; "render": { "alias": "render"; "required": false; "isSignal": true; }; "cellTemplates": { "alias": "cellTemplates"; "required": false; "isSignal": true; }; }, { "rowClick": "rowClick"; }, never, ["[empty]", "[footer]"], true, never>;
 }
 
+type DividerOrientation = 'horizontal' | 'vertical';
+/**
+ * Línea separadora decorativa entre bloques de contenido (ej. columnas de
+ * metadata en `kf-company-selector`). `vertical` necesita que el contenedor
+ * padre sea flex/grid con altura definida — se estira con `align-self:
+ * stretch`; sin eso no tiene alto propio y no se ve.
+ *
+ *   <kf-divider />
+ *   <kf-divider orientation="vertical" />
+ */
+declare class Divider {
+    readonly orientation: _angular_core.InputSignal<DividerOrientation>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Divider, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Divider, "kf-divider", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
 /**
  * Placeholder para una sección sin contenido. Dos tonos, con anatomía
  * distinta (páginas 27-28 del design system, que los trata como piezas
@@ -780,6 +808,16 @@ declare class FolderTabs {
  *   <kf-input label="Correo" formControlName="email"
  *     [invalid]="email.invalid && email.touched"
  *     [errorMessage]="email.touched && email.hasError('required') ? 'Ingresa tu correo.' : undefined" />
+ *
+ * `toggleable` solo tiene efecto cuando `type="password"`: agrega un botón
+ * de ojo al final del campo que alterna la visibilidad del valor tipeado
+ * (cambia el `type` real del `<input>` nativo entre `password` y `text`,
+ * nunca expone el valor en el DOM de otra forma). El botón es `type="button"`
+ * — nunca dispara submit del form contenedor — y anuncia su acción con
+ * `aria-label` dinámico y `aria-pressed`, ya que es un toggle, no un botón
+ * de una sola acción.
+ *
+ *   <kf-input type="password" label="Contraseña" toggleable formControlName="password" />
  */
 declare class Input implements ControlValueAccessor, AfterViewInit {
     private static nextId;
@@ -798,6 +836,8 @@ declare class Input implements ControlValueAccessor, AfterViewInit {
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly type: _angular_core.InputSignal<string>;
     readonly placeholder: _angular_core.InputSignal<string>;
+    /** Agrega el botón de mostrar/ocultar — sin efecto si `type` no es `"password"`. */
+    readonly toggleable: _angular_core.InputSignalWithTransform<boolean, unknown>;
     protected readonly inputId: string;
     protected readonly hintId: string;
     protected readonly errorId: string;
@@ -807,6 +847,17 @@ declare class Input implements ControlValueAccessor, AfterViewInit {
     private readonly disabledByForm;
     /** Disabled real: por input() directo o por el FormControl asociado. */
     protected readonly isDisabled: _angular_core.Signal<boolean>;
+    /** Estado interno del toggle — irrelevante si `showPasswordToggle()` es false. */
+    protected readonly passwordVisible: _angular_core.WritableSignal<boolean>;
+    /** El botón solo tiene sentido si el campo realmente es de contraseña. */
+    protected readonly showPasswordToggle: _angular_core.Signal<boolean>;
+    /**
+     * `type` real que recibe el `<input>` nativo: igual a `type()` salvo
+     * cuando el toggle está activo y visible, donde pasa a `text` para
+     * mostrar el valor en claro sin cambiar `type()` en sí (evita que un
+     * consumidor que lee `type()` desde afuera vea un valor inconsistente).
+     */
+    protected readonly effectiveType: _angular_core.Signal<string>;
     private onChange;
     private onTouched;
     ngAfterViewInit(): void;
@@ -816,8 +867,14 @@ declare class Input implements ControlValueAccessor, AfterViewInit {
     setDisabledState(isDisabled: boolean): void;
     protected onInput(rawValue: string): void;
     protected onBlur(): void;
+    /**
+     * Alterna la visibilidad del valor. No dispara `onBlur`/pierde el foco:
+     * el botón vive dentro del mismo `.kf-input__field`, así que un click acá
+     * no debe tratarse como si el usuario hubiese abandonado el campo.
+     */
+    protected onTogglePasswordVisibility(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Input, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Input, "kf-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Input, "kf-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "toggleable": { "alias": "toggleable"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -1524,5 +1581,5 @@ declare class ViewToggle {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ViewToggle, "kf-view-toggle", never, { "view": { "alias": "view"; "required": true; "isSignal": true; }; }, { "viewChange": "viewChange"; }, never, never, true, never>;
 }
 
-export { ActionTile, AdminBadge, Alert, Avatar, Badge, Breadcrumb, Button, Card, Carousel, CarouselSlide, Checkbox, Chip, CompanySelector, ContentSlot, ContentState, DataTable, EmptyState, FeatureCard, Field, FieldLabel, FilterChips, FolderTabs, Icon, Input, MetricCard, Modal, MultiSelect, PageHeader, Pagination, Panel, PortalHeader, ReserveBlock, SectionHeader, Segmented, Select, SelectMenu, Skeleton, Spinner, StatTile, StatusPill, Tabs, ToastHost, ToastService, VehicleHeader, ViewToggle };
-export type { AlertTone, BreadcrumbItem, CompanySelectorMeta, ContentStateKind, ContentStateLoad, DataTableCardRole, DataTableColumn, DataTableView, FolderTabOption, IconName, IconSize, MultiSelectOption, PaginationItem, PortalHeaderAdminAction, PortalHeaderNavItem, SegmentedOption, SelectMenuOption, SkeletonVariant, SpinnerSize, TabOption, ToastOptions, ToastPromiseMessages, ToastState, ToastTone, VehicleHeaderStatus, ViewToggleOption };
+export { ActionTile, AdminBadge, Alert, Avatar, Badge, Breadcrumb, Button, Card, Carousel, CarouselSlide, Checkbox, Chip, CompanySelector, ContentSlot, ContentState, DataTable, Divider, EmptyState, FeatureCard, Field, FieldLabel, FilterChips, FolderTabs, Icon, Input, MetricCard, Modal, MultiSelect, PageHeader, Pagination, Panel, PortalHeader, ReserveBlock, SectionHeader, Segmented, Select, SelectMenu, Skeleton, Spinner, StatTile, StatusPill, Tabs, ToastHost, ToastService, VehicleHeader, ViewToggle };
+export type { AlertTone, BreadcrumbItem, CompanySelectorMeta, ContentStateKind, ContentStateLoad, DataTableCardRole, DataTableColumn, DataTableView, DividerOrientation, FolderTabOption, IconName, IconSize, MultiSelectOption, PaginationItem, PortalHeaderAdminAction, PortalHeaderNavItem, SegmentedOption, SelectMenuOption, SkeletonVariant, SpinnerSize, TabOption, ToastOptions, ToastPromiseMessages, ToastState, ToastTone, VehicleHeaderStatus, ViewToggleOption };