@kaufmann-lab/ui 0.1.1 → 0.1.2

package/package.json

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

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

@@ -2,8 +2,14 @@ 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í.
+ */
+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,
@@ -780,6 +786,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 +814,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 +825,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 +845,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>;
 }
 
 /**