@kaufmann-lab/ui 0.1.16 → 0.1.18

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

@@ -0,0 +1,53 @@
+import * as _angular_core from '@angular/core';
+
+/**
+ * Franja fija en la base de una pantalla completa para apps mobile del
+ * ecosistema: encapsula el padding con `safe-area-inset-bottom` (para no
+ * invadir la zona del home indicator), el borde superior y el fondo —
+ * cualquier acción, chip de estado o hint que necesite vivir pegado al
+ * borde inferior del dispositivo se proyecta acá vía `<ng-content>`.
+ *
+ *   <kf-mobile-footer>
+ *     <kf-button>Cerrar orden</kf-button>
+ *   </kf-mobile-footer>
+ */
+declare class MobileFooter {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MobileFooter, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MobileFooter, "kf-mobile-footer", never, {}, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Encabezado de pantalla completa (fondo navy) para apps mobile del
+ * ecosistema — cubre tanto la raíz de un tab (sin volver) como el detalle
+ * de un flujo (con volver).
+ *
+ *   <kf-mobile-header title="Mis asignaciones" />
+ *
+ *   <kf-mobile-header title="STAR-20841" subtitle="Cerrado hoy · 15:18" [showBack]="true" (back)="onBack()" />
+ *
+ * Sin `kf-text` para `eyebrow`/`title`/`subtitle`: su `tone` es un set
+ * cerrado sin blanco/inverso, y sus variantes fijan `color` explícito sobre
+ * el elemento interno — un `color: white` heredado desde afuera nunca le
+ * gana a esa declaración directa. Markup propio con los tokens reales.
+ *
+ * El botón "volver" tampoco es `kf-button`: su `variant="ghost"` fija el
+ * mismo token de color que este fondo navy (el ícono quedaría invisible).
+ */
+declare class MobileHeader {
+    readonly title: _angular_core.InputSignal<string>;
+    /** Línea chica y translúcida ARRIBA del título — ej. un folio o un saludo. */
+    readonly eyebrow: _angular_core.InputSignal<string | undefined>;
+    /** `true` cuando `eyebrow` es un código (folio) — usa tipografía monoespaciada. */
+    readonly eyebrowMono: _angular_core.InputSignal<boolean>;
+    /** Línea chica y translúcida DEBAJO del título — ej. "Cerrado hoy · 15:18". */
+    readonly subtitle: _angular_core.InputSignal<string | undefined>;
+    readonly showBack: _angular_core.InputSignal<boolean>;
+    /** El componente no navega por sí solo: cada pantalla decide qué significa
+     * "volver" (`Location.back()`, retroceder un paso del flujo, etc.). */
+    readonly back: _angular_core.OutputEmitterRef<void>;
+    protected onBackClick(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MobileHeader, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MobileHeader, "kf-mobile-header", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "eyebrow": { "alias": "eyebrow"; "required": false; "isSignal": true; }; "eyebrowMono": { "alias": "eyebrowMono"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "showBack": { "alias": "showBack"; "required": false; "isSignal": true; }; }, { "back": "back"; }, never, ["[kf-mobile-header-trailing]"], true, never>;
+}
+
+export { MobileFooter, MobileHeader };

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

@@ -0,0 +1,154 @@
+import { Signal } from '@angular/core';
+
+/** Opciones de `formatNumber` — todas opcionales. */
+interface FormatNumberOptions {
+    /** Cantidad de decimales a mostrar. Default `0`. */
+    decimals?: number;
+    /** Locale de `Intl`/`toLocaleString` — decide separador de miles y de
+     * decimales. Default `'es'` (punto de miles, coma decimal). */
+    locale?: string;
+}
+/**
+ * Separador de miles genérico — sin signo, sin asumir que el valor es
+ * dinero. Cubre casos como kilometraje/horómetro (`formatNumber(45231,
+ * { locale: 'en-US' })` → `'45,231'`), no solo moneda.
+ *
+ *   formatNumber(16800);                              // '16.800'
+ *   formatNumber(16800.5, { decimals: 2 });            // '16.800,50'
+ *   formatNumber(45231, { locale: 'en-US' });          // '45,231'
+ */
+declare function formatNumber(value: number, options?: FormatNumberOptions): string;
+/** Opciones de `formatCurrency` — extiende `FormatNumberOptions` con el
+ * signo/prefijo de moneda. */
+interface FormatCurrencyOptions extends FormatNumberOptions {
+    /** Símbolo o prefijo antepuesto al monto. Default `'$'`. */
+    sign?: string;
+}
+/**
+ * Formatea un monto de dinero — compone sobre `formatNumber` agregando el
+ * signo. Mismos defaults que la convención de OTD (punto de miles, sin
+ * decimales, prefijo `$`), overrideables para otra moneda/país/formato:
+ *
+ *   formatCurrency(16800);                                    // '$16.800'
+ *   formatCurrency(16800.5, { decimals: 2 });                  // '$16.800,50'
+ *   formatCurrency(16800, { sign: '' });                       // '16.800'
+ *   formatCurrency(16800, { sign: 'US$', locale: 'en-US' });   // 'US$16,800'
+ */
+declare function formatCurrency(amount: number, options?: FormatCurrencyOptions): string;
+/**
+ * Inverso de `formatNumber` — recupera el número crudo de un valor ya
+ * formateado con el mismo `locale`. Solo soporta `locale` cuyo separador de
+ * miles y decimal sean `'.'`/`','` (`es`) o `','`/`'.'` (`en-US`) — son los
+ * 2 casos reales del ecosistema hoy; si aparece un tercer locale con otros
+ * separadores, extender acá antes de usarlo.
+ */
+declare function parseNumber(formatted: string, locale?: string): number;
+/**
+ * Inverso de `formatCurrency` — recupera el número crudo de un monto ya
+ * formateado, descartando cualquier signo/prefijo de moneda.
+ *
+ *   parseCurrency('$16.800'); // 16800
+ */
+declare function parseCurrency(formatted: string, locale?: string): number;
+/** "12:40" — hora en formato de 24 horas. */
+declare function formatClockTime(date: Date): string;
+/**
+ * Quita espacios (incluido cualquier espacio en blanco intermedio, no solo
+ * al principio/final) y puntos de un identificador de documento — un
+ * espacio invisible (ej. pegado por accidente desde otra fuente) es un
+ * motivo de rechazo silencioso real que un usuario no sabe explicarse.
+ * Genérico: sirve tanto para RUT (`formatChileanRut` ya lo usa por
+ * dentro) como para cualquier otro identificador con el mismo problema.
+ *
+ *   sanitizeDocumentId(' 51 00004-8 '); // '5100004-8'
+ *   sanitizeDocumentId('12.345.678-9'); // '12345678-9'
+ */
+declare function sanitizeDocumentId(raw: string): string;
+/**
+ * Formatea un RUT chileno insertando el guion automáticamente a medida
+ * que se escribe — igual que un input de tarjeta de crédito, el usuario
+ * solo tipea dígitos (y opcionalmente `k`/`K` como dígito verificador) y
+ * el guion aparece solo antes del último carácter. Solo da forma al
+ * string — no valida si el dígito verificador es matemáticamente
+ * correcto (ver `isValidChileanRut` para eso) ni si la cuenta existe
+ * (eso lo confirma GAM del lado servidor al autenticar).
+ *
+ *   formatChileanRut('123456789');   // '12345678-9'
+ *   formatChileanRut('5100004-8');   // '5100004-8' (ya formateado, idempotente)
+ *   formatChileanRut('5100004k');    // '5100004-k'
+ *   formatChileanRut('510000 4-8 '); // '5100004-8' (espacios ignorados)
+ */
+declare function formatChileanRut(raw: string): string;
+/**
+ * Valida un RUT chileno YA formateado (`cuerpo-DV`, ej. `'12345678-9'`)
+ * contra el algoritmo módulo 11 real — a diferencia del `pattern` de
+ * `document-id.config.ts` en cada portal consumidor (que solo exige la
+ * FORMA: dígitos + guion + dígito verificador), esta función confirma
+ * que el dígito verificador sea matemáticamente correcto para ese
+ * cuerpo. Sigue sin confirmar que la cuenta exista — eso solo lo sabe
+ * GAM al autenticar — pero atrapa el error tipográfico más común
+ * (invertir/cambiar un dígito) antes de intentar el login.
+ *
+ *   isValidChileanRut('20236276-1'); // true  (DV real de ese cuerpo)
+ *   isValidChileanRut('20236276-8'); // false (DV real es '1', no '8')
+ *   isValidChileanRut('no-es-rut');  // false (ni siquiera tiene la forma)
+ */
+declare function isValidChileanRut(rut: string): boolean;
+
+/**
+ * Signal reactivo con el estado actual de un media query — para cuando un
+ * componente necesita SABER en qué lado de un breakpoint está (no solo
+ * mostrar/ocultar con CSS). Un `@media` en `styles` no alcanza cuando la
+ * decisión no es puramente visual: por ejemplo, un componente hijo que
+ * recibe un input booleano (`[collapsed]`) no puede "leer" un breakpoint
+ * CSS del padre — necesita que alguien en TypeScript se lo diga.
+ *
+ * Encontrado al construir `SidebarShell`: el estado `collapsed` (colapso
+ * del rail en desktop) se pasaba tal cual a cada `kf-sidebar-nav-item`, sin
+ * importar el viewport. En mobile, donde el rail deslizado siempre muestra
+ * etiquetas completas (ver estilos de `SidebarShell`), los ítems seguían
+ * ocultando su label si el usuario había dejado el rail colapsado en
+ * desktop antes de achicar la ventana — un CSS que dice "en mobile se ve
+ * ancho" no cambia el valor del input que ya llegó al hijo.
+ *
+ * Debe llamarse dentro de un contexto de inyección (el `constructor` de un
+ * componente, o un campo de clase inicializado ahí — mismo requisito que
+ * cualquier función que use `inject()`).
+ *
+ *   protected readonly isMobile = matchMediaSignal('(max-width: 900px)');
+ *   // ...
+ *   [collapsed]="collapsed() && !isMobile()"
+ */
+declare function matchMediaSignal(query: string): Signal<boolean>;
+
+/**
+ * Navegación estándar de ARIA tabs/listbox/radiogroup: flechas mueven el
+ * foco entre opciones y activan la seleccionada. Usado por `kf-tabs`,
+ * `kf-folder-tabs` (orientación horizontal) y `kf-selectable-card-group`
+ * (vertical) — todos comparten la misma forma (lista de opciones con
+ * `value`, botones identificados por `idPrefix + value`).
+ *
+ * `orientation` decide qué par de flechas avanza/retrocede — mismo patrón
+ * que exige el WAI-ARIA Authoring Practices para radiogroup vertical
+ * (ArrowDown/ArrowUp) vs. tablist horizontal (ArrowRight/ArrowLeft). Home/End
+ * funcionan igual en ambas orientaciones.
+ *
+ * `select` es responsabilidad del consumidor: esta función solo calcula
+ * cuál es la siguiente opción y mueve el foco al botón correspondiente.
+ */
+declare function handleArrowKeyNavigation<T extends {
+    value: string;
+}>(event: KeyboardEvent, options: T[], currentValue: string, idPrefix: string, select: (value: string) => void, orientation?: 'horizontal' | 'vertical'): void;
+
+/**
+ * Normaliza texto para comparación de búsqueda insensible a mayúsculas y
+ * diacríticos — así "cor" encuentre "Córdoba" sin necesidad de tildes.
+ *
+ * Compartida entre `Select` y `MultiSelect` (`/core`, los dos componentes con
+ * buscador interno auto-activado por `searchThreshold`) y `QuotePicker`
+ * (`/business`).
+ */
+declare function normalizeForSearch(text: string): string;
+
+export { formatChileanRut, formatClockTime, formatCurrency, formatNumber, handleArrowKeyNavigation, isValidChileanRut, matchMediaSignal, normalizeForSearch, parseCurrency, parseNumber, sanitizeDocumentId };
+export type { FormatCurrencyOptions, FormatNumberOptions };