@kaufmann-lab/ui 0.1.16 → 0.1.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaufmann-lab/ui",
-  "version": "0.1.16",
+  "version": "0.1.18",
   "description": "Shared Angular component library for the Kaufmann frontends",
   "license": "MIT",
   "author": "Kaufmann Lab",
@@ -26,6 +26,30 @@
     ".": {
       "types": "./types/kaufmann-lab-ui.d.ts",
       "default": "./fesm2022/kaufmann-lab-ui.mjs"
+    },
+    "./auth": {
+      "types": "./types/kaufmann-lab-ui-auth.d.ts",
+      "default": "./fesm2022/kaufmann-lab-ui-auth.mjs"
+    },
+    "./business": {
+      "types": "./types/kaufmann-lab-ui-business.d.ts",
+      "default": "./fesm2022/kaufmann-lab-ui-business.mjs"
+    },
+    "./core": {
+      "types": "./types/kaufmann-lab-ui-core.d.ts",
+      "default": "./fesm2022/kaufmann-lab-ui-core.mjs"
+    },
+    "./map": {
+      "types": "./types/kaufmann-lab-ui-map.d.ts",
+      "default": "./fesm2022/kaufmann-lab-ui-map.mjs"
+    },
+    "./mobile": {
+      "types": "./types/kaufmann-lab-ui-mobile.d.ts",
+      "default": "./fesm2022/kaufmann-lab-ui-mobile.mjs"
+    },
+    "./shared": {
+      "types": "./types/kaufmann-lab-ui-shared.d.ts",
+      "default": "./fesm2022/kaufmann-lab-ui-shared.mjs"
     }
   },
   "type": "module"

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

@@ -0,0 +1,240 @@
+import * as _angular_core from '@angular/core';
+
+/**
+ * Marca el contenido que va en el slot de SSO de `kf-auth-layout` (típico:
+ * un `kf-sso-button`, o varios si el ecosistema suma más de un proveedor).
+ * `AuthLayout` la detecta vía `contentChild` para decidir si renderiza el
+ * separador "o" entre el bloque de SSO y el formulario tradicional
+ * proyectado en el slot por defecto — sin este marcador, `AuthLayout`
+ * tendría que adivinar si hubo proyección leyendo el DOM a mano.
+ *
+ *   <kf-auth-layout brand="Mi Portal">
+ *     <div kfAuthLayoutSso>
+ *       <kf-sso-button provider="microsoft" (click)="loginWithMicrosoft()" />
+ *     </div>
+ *     <form ...>...</form>
+ *   </kf-auth-layout>
+ */
+declare class AuthLayoutSso {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AuthLayoutSso, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AuthLayoutSso, "[kfAuthLayoutSso]", never, {}, {}, never, never, true, never>;
+}
+
+type AuthLayoutBackground = 'plain' | 'gradient' | 'pattern';
+/**
+ * Layout a pantalla completa para pantallas de autenticación (login,
+ * recuperar contraseña, confirmación de envío) — panel de marca a la
+ * izquierda, contenido libre a la derecha en desktop; en mobile el panel de
+ * marca se oculta y un logo compacto queda visible arriba del formulario.
+ *
+ * Resuelve solo el "cascarón": cada portal arma su propio `<form>` con los
+ * componentes de la librería y lo proyecta en el slot por defecto.
+ *
+ *   <kf-auth-layout
+ *     brand="Mi Portal"
+ *     brandLogoSrc="images/mi-portal-logo-white.png"
+ *     brandLogoMobileSrc="images/mi-portal-logo-black.png"
+ *     brandTagline="Frase corta de marca, propia de cada portal."
+ *   >
+ *     <form (ngSubmit)="onSubmit()">
+ *       <kf-input label="Correo" type="email" />
+ *       <kf-input label="Contraseña" type="password" toggleable />
+ *       <kf-button type="submit">Ingresar</kf-button>
+ *     </form>
+ *   </kf-auth-layout>
+ *
+ * `backgroundVariant` controla la superficie del panel derecho:
+ * `'plain'` (fondo liso, comportamiento histórico), `'gradient'` (default —
+ * degradé sutil derivado de `--kf-color-primary`/`--kf-color-surface` vía
+ * `color-mix()`, ningún color hardcodeado) o `'pattern'` (el mismo degradé
+ * más una textura de puntos, también resuelta con tokens). Los tres se
+ * resuelven contra los tokens de tema ACTIVOS — cambiar de tema
+ * (`andes-maq`, `divemotor-star`, `kaufmann-ar`, futuros) no requiere tocar
+ * este componente ni pasarle un color a mano.
+ *
+ * `card`, en `false` por defecto (comportamiento histórico: el contenido
+ * proyectado flota sin superficie propia), envuelve el slot por defecto con
+ * la misma superficie de `kf-card` (fondo, borde, sombra, radio) para que
+ * el formulario deje de verse suelto sobre el fondo del panel.
+ *
+ * `title`/`subtitle` renderizan un encabezado de bienvenida DENTRO de la
+ * card, antes que cualquier otro contenido (jerarquía ya resuelta:
+ * `title-lg` + `body-muted`, ver `Text.ts`) — así ningún consumidor tiene
+ * que adivinar la variante de `kf-text` correcta ni terminar con un
+ * "Iniciar sesión" repetido y suelto dentro de su propio `<form>`. Sin
+ * `title`, no se renderiza ningún encabezado (comportamiento histórico).
+ *
+ * El slot `[kfAuthLayoutSso]` (ver `AuthLayoutSso`) es para el patrón
+ * "SSO primero, credenciales como alternativa secundaria" — típicamente un
+ * `kf-sso-button`. Cuando hay contenido ahí, `AuthLayout` resuelve el
+ * separador "o" automáticamente entre ese bloque y el contenido por
+ * defecto; sin ese slot, nada cambia frente al comportamiento actual.
+ *
+ *   <kf-auth-layout
+ *     brand="Mi Portal"
+ *     backgroundVariant="pattern"
+ *     card
+ *     title="Iniciar sesión"
+ *     subtitle="Usa tu cuenta corporativa o ingresa con contraseña"
+ *   >
+ *     <div kfAuthLayoutSso>
+ *       <kf-sso-button provider="microsoft" (click)="loginWithMicrosoft()" />
+ *     </div>
+ *     <form (ngSubmit)="onSubmit()">
+ *       <kf-input label="Correo" type="email" />
+ *       <kf-input label="Contraseña" type="password" toggleable />
+ *       <kf-button type="submit">Ingresar</kf-button>
+ *     </form>
+ *   </kf-auth-layout>
+ */
+declare class AuthLayout {
+    /** Nombre de marca/portal — wordmark de respaldo si no hay logo, y `alt` de ambos logos. */
+    readonly brand: _angular_core.InputSignal<string>;
+    /** Logo en blanco para el panel oscuro de desktop. Sin esto, se muestra `brand()` como wordmark. */
+    readonly brandLogoSrc: _angular_core.InputSignal<string | undefined>;
+    /** Frase corta bajo el logo. */
+    readonly brandTagline: _angular_core.InputSignal<string | undefined>;
+    /** Logo compacto para mobile, sobre fondo claro. Sin esto, reutiliza `brandLogoSrc`. */
+    readonly brandLogoMobileSrc: _angular_core.InputSignal<string | undefined>;
+    /** Superficie del panel derecho. Default `'gradient'`; `'plain'` preserva el fondo liso histórico. */
+    readonly backgroundVariant: _angular_core.InputSignal<AuthLayoutBackground>;
+    /** Envuelve el contenido proyectado con la superficie de `kf-card` (fondo, borde, sombra). Default `false` — preserva el comportamiento histórico. */
+    readonly card: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Título del encabezado dentro de la card (`title-lg`). Sin este input, no se renderiza ningún encabezado. */
+    readonly title: _angular_core.InputSignal<string | undefined>;
+    /** Subtítulo del encabezado (`body-muted`), debajo de `title`. Sin efecto si `title` no está presente. */
+    readonly subtitle: _angular_core.InputSignal<string | undefined>;
+    /** Presencia de contenido en el slot `[kfAuthLayoutSso]` — controla si se renderiza el separador "o". */
+    protected readonly ssoContent: _angular_core.Signal<AuthLayoutSso | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AuthLayout, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AuthLayout, "kf-auth-layout", never, { "brand": { "alias": "brand"; "required": true; "isSignal": true; }; "brandLogoSrc": { "alias": "brandLogoSrc"; "required": false; "isSignal": true; }; "brandTagline": { "alias": "brandTagline"; "required": false; "isSignal": true; }; "brandLogoMobileSrc": { "alias": "brandLogoMobileSrc"; "required": false; "isSignal": true; }; "backgroundVariant": { "alias": "backgroundVariant"; "required": false; "isSignal": true; }; "card": { "alias": "card"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; }, {}, ["ssoContent"], ["[kfAuthLayoutSso]", "*"], true, never>;
+}
+
+/**
+ * Botón de cerrar sesión, pensado para proyectarse dentro de
+ * `[kf-drawer-footer]` de `kf-drawer`, o junto a `kf-drawer-session` dentro
+ * de `[kf-sidebar-footer]` de `kf-sidebar-shell` — separado de
+ * `kf-drawer-session` (que solo muestra identidad: brand, avatar, nombre,
+ * email), no anidado dentro de ella.
+ *
+ * Ícono `log-out` + label, color `--kf-color-error` con hover en
+ * `--kf-color-error-soft` y foco visible con `--kf-shadow-focus`. Separado
+ * de `kf-drawer-session` (solo identidad) por responsabilidad única.
+ *
+ * No sabe nada de autenticación real — solo emite `logoutClick` cuando el
+ * consumidor debe cerrar la sesión real.
+ *
+ * `collapsed` oculta el label y centra el ícono, exponiéndolo vía `title`
+ * — mismo criterio que `SidebarNavItem.collapsed` y
+ * `DrawerSession.collapsed`, para cuando este botón vive dentro de un
+ * `kf-sidebar-shell` colapsado.
+ *
+ *   <kf-drawer-logout kf-portal-header-footer (logoutClick)="onLogout()" />
+ */
+declare class DrawerLogout {
+    /** Label del botón, en español neutro por defecto. Input opcional por si
+     * algún consumidor futuro necesita otro texto. */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Oculta el label y centra el ícono — ver comentario de la clase. */
+    readonly collapsed: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly logoutClick: _angular_core.OutputEmitterRef<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DrawerLogout, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DrawerLogout, "kf-drawer-logout", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; }, { "logoutClick": "logoutClick"; }, never, never, true, never>;
+}
+
+/**
+ * Bloque de identidad para `[kf-drawer-header]` de `kf-drawer` o
+ * `[kf-sidebar-footer]` de `kf-sidebar-shell`: avatar + nombre + email,
+ * brand opcional arriba. Solo identidad — el logout vive aparte, en
+ * `kf-drawer-logout`.
+ *
+ * `collapsed` oculta brand/nombre/email y deja solo el avatar (para un
+ * `kf-sidebar-shell` colapsado). `interactive` convierte la tarjeta en un
+ * botón real que emite `cardClick`, para cuando la identidad es el
+ * disparador de un menú de acciones (ej. envuelta en `kf-dropdown`).
+ *
+ *   <kf-dropdown [(open)]="menuOpen">
+ *     <kf-drawer-session interactive name="Juan Pérez" email="juan@empresa.com" (cardClick)="menuOpen.set(!menuOpen())" />
+ *     <kf-dropdown-panel variant="dark">
+ *       <kf-dropdown-item icon="log-out" tone="error" (click)="onLogout()">Cerrar sesión</kf-dropdown-item>
+ *     </kf-dropdown-panel>
+ *   </kf-dropdown>
+ */
+declare class DrawerSession {
+    readonly name: _angular_core.InputSignal<string>;
+    readonly email: _angular_core.InputSignal<string>;
+    /**
+     * Etiqueta de rol o función del usuario dentro de la sesión (ej.
+     * "Coordinador", "Supervisor"). Se muestra como badge dentro de la
+     * identidad, debajo del email — distinto de `brand`, que es la marca o
+     * cliente mostrada como encabezado de todo el bloque, no un atributo de
+     * la persona.
+     */
+    readonly role: _angular_core.InputSignal<string>;
+    readonly initials: _angular_core.InputSignal<string>;
+    readonly avatarUrl: _angular_core.InputSignal<string>;
+    /** Label superior opcional, ej. "Portal Kaufmann LATAM". */
+    readonly brand: _angular_core.InputSignal<string>;
+    /** Oculta brand/nombre/email y centra el avatar — ver comentario de la clase. */
+    readonly collapsed: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Convierte la tarjeta en un botón real con ícono de kebab — ver comentario de la clase. */
+    readonly interactive: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Se emite al clickear la tarjeta, solo cuando `interactive` es `true`. */
+    readonly cardClick: _angular_core.OutputEmitterRef<void>;
+    /** Si no se pasa `initials`, se derivan de `name`: primera letra de cada
+     * una de las primeras 2 palabras, en mayúscula. */
+    protected readonly displayInitials: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DrawerSession, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DrawerSession, "kf-drawer-session", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "email": { "alias": "email"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "initials": { "alias": "initials"; "required": false; "isSignal": true; }; "avatarUrl": { "alias": "avatarUrl"; "required": false; "isSignal": true; }; "brand": { "alias": "brand"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; }, { "cardClick": "cardClick"; }, never, never, true, never>;
+}
+
+type SsoProvider = 'microsoft';
+/** Copy y glyph por proveedor — agregar una entrada acá es todo lo que hace
+ * falta para soportar un proveedor nuevo (ej. `google`), sin tocar el
+ * template ni los estilos del componente. */
+interface SsoProviderConfig {
+    readonly label: string;
+}
+/**
+ * Botón de inicio de sesión vía SSO corporativo — pensado como pieza suelta,
+ * no acoplada a `kf-auth-layout`: cualquier consumidor puede usarlo solo,
+ * dentro o fuera del slot `[sso]` de `AuthLayout`.
+ *
+ * `provider` resuelve copy y glyph — hoy solo `'microsoft'` (el método
+ * principal de acceso del ecosistema, cuenta corporativa de Grupo Kaufmann),
+ * con la puerta abierta a sumar otros a futuro sin romper la API existente.
+ *
+ * El glyph es el ícono GENÉRICO de 4 cuadrados de colores que Microsoft
+ * publica en sus propias guías de marca para botones de terceros ("Sign in
+ * with Microsoft") — nunca el logotipo/wordmark oficial completo. No vive en
+ * el sprite de `kf-icon` (`icon-sprite.ts`) a propósito: ese catálogo es
+ * monocromático (`currentColor`, ver `Icon.ts`), pensado para trazos de un
+ * solo color — este glyph necesita sus 4 colores fijos tal como los define
+ * la guía de marca, así que un SVG inline propio es la opción correcta, no
+ * un glyph nuevo forzado al sprite compartido.
+ *
+ * El label por defecto viene de `provider` — pasar contenido propio via
+ * `<ng-content>` lo reemplaza (ej. un texto más corto en un lugar angosto).
+ *
+ *   <kf-sso-button provider="microsoft" (ssoClick)="loginWithMicrosoft()" />
+ *   <kf-sso-button provider="microsoft" [loading]="loggingIn()">
+ *     Ingresar con cuenta corporativa
+ *   </kf-sso-button>
+ */
+declare class SsoButton {
+    readonly provider: _angular_core.InputSignal<"microsoft">;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Reemplaza el glyph + label por `kf-spinner` y fuerza `disabled` — mismo
+     * patrón que `kf-button[loading]`. */
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Igual que `kf-button`: por defecto `submit` dentro de un `<form>`, pero
+     * este botón normalmente vive fuera de cualquier form (dispara un
+     * redirect a Microsoft Entra ID), así que casi siempre conviene `button`. */
+    readonly type: _angular_core.InputSignal<"button" | "submit">;
+    protected readonly config: _angular_core.Signal<SsoProviderConfig>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SsoButton, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SsoButton, "kf-sso-button", never, { "provider": { "alias": "provider"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { AuthLayout, AuthLayoutSso, DrawerLogout, DrawerSession, SsoButton };
+export type { AuthLayoutBackground, SsoProvider };

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

@@ -0,0 +1,298 @@
+import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
+import { DataTableColumn, IconName } from '@kaufmann-lab/ui/core';
+export { DataTableColumn } from '@kaufmann-lab/ui/core';
+
+/** Metadato clave mostrado junto al selector (RUC, identificación, sucursal). */
+interface CompanySelectorMeta {
+    label: string;
+    value: string;
+}
+/**
+ * Conmutador de empresa activa con metadatos clave (página 32) — encabeza
+ * la pantalla de inicio del portal. Compone `kf-select` para el propio
+ * selector (mismo panel propio, sin `<select>` nativo) y proyecta hasta 3
+ * pares label/valor (RUC, Identificación, Sucursal en el ejemplo del PDF).
+ *
+ *   <kf-company-selector
+ *     label="Selecciona empresa"
+ *     [companies]="['TRANSPORTES DEL SUR S.A.C.', 'ANDES MAQ LTDA.']"
+ *     [value]="activeCompany()"
+ *     (valueChange)="activeCompany.set($event)"
+ *     [meta]="[
+ *       { label: 'RUC', value: '20448712359' },
+ *       { label: 'Identificación', value: '0004002232' },
+ *       { label: 'Sucursal', value: 'Sucursal Norte' },
+ *     ]"
+ *   />
+ */
+declare class CompanySelector {
+    readonly label: _angular_core.InputSignal<string>;
+    readonly companies: _angular_core.InputSignal<string[]>;
+    readonly value: _angular_core.InputSignal<string | undefined>;
+    readonly meta: _angular_core.InputSignal<CompanySelectorMeta[]>;
+    readonly valueChange: _angular_core.OutputEmitterRef<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CompanySelector, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CompanySelector, "kf-company-selector", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "companies": { "alias": "companies"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "meta": { "alias": "meta"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+}
+
+/** Chip de filtro genérico con contador — nunca hardcodeado a un dominio
+ * concreto (ej. estado de una cotización); el consumidor decide qué
+ * representa cada `value` y cómo mapea sus items contra él vía `predicate`.
+ *
+ * Bug real corregido: la primera versión leía `item.status`/`item.chip` por
+ * nombre de campo mágico en vez de un `predicate` — colisionaba con
+ * dominios donde `status` ya significa otra cosa (ej. `Quote.status` en
+ * `web-otd-frontend` es 'ok'|'error'|'warn' de aprobación, no "tiene saldo
+ * pendiente"). Un chip "Con saldo pendiente" sobre cotizaciones terminaba
+ * filtrando por un campo que no tenía nada que ver, mostrando 0 resultados
+ * siempre. `predicate` es explícito y no depende de convenciones de nombre. */
+interface QuotePickerChip<T = unknown> {
+    value: string;
+    label: string;
+    count: number;
+    predicate: (item: T) => boolean;
+}
+/** Una opción del dropdown "Ordenar por", visible solo en `variant="modal"`. */
+interface QuotePickerSortOption {
+    value: string;
+    label: string;
+}
+/**
+ * Selector de un ítem "rico" de una lista buscable/filtrable — generalización
+ * del patrón "elegir una cotización" de Pagos y Facturas de OTD, pero sin
+ * ningún acoplamiento a `Quote`: todo el contenido de cada fila/card llega
+ * por `columns` (mismo `DataTableColumn` de `kf-data-table`, reexportado acá
+ * en vez de duplicar el concepto) + `cellTemplates` para contenido custom
+ * (thumbnail, monto formateado, etc. — mismo mecanismo `TemplateRef` +
+ * `ngTemplateOutlet` que ya usa `kf-data-table`).
+ *
+ * Un solo componente, dos contenedores (`variant: 'inline' | 'modal'`), UNA
+ * sola lógica de búsqueda/filtro/orden interna. Nunca dos implementaciones
+ * paralelas: el riesgo real de eso es que un fix de filtro se aplique en un
+ * modo y se olvide en el otro. Los `computed()` de más abajo
+ * (`filteredItems`, `sortedItems`) son la ÚNICA fuente de verdad para ambos
+ * `variant`; lo que cambia entre inline y modal es solo qué contenedor
+ * envuelve esos datos ya resueltos.
+ *
+ * ## Modo `inline` (default)
+ * Trigger a ANCHO COMPLETO (nunca una caja angosta de ancho fijo) que
+ * muestra el ítem activo colapsado — thumbnail, id + modelo, unidades +
+ * fecha + monto, CTA "Cambiar cotización" con chevron-down. Al click, el
+ * panel se expande INLINE (empuja el contenido de abajo, nunca flota
+ * encima) con buscador propio + chips de filtro + un grid de 2 columnas (1
+ * en mobile, breakpoint `max-width: 900px` vía `matchMediaSignal` — mismo
+ * mecanismo que ya usa el resto de la librería para decisiones de layout en
+ * TypeScript, no solo CSS). Por encima de `expandThreshold` resultados
+ * visibles, el panel recorta a un preview de `PREVIEW_ROWS` filas con un
+ * fade inferior y un botón dashed "Ver las N en pantalla completa" que
+ * emite `expandToModal` — el picker no decide qué pasa después (típicamente
+ * el consumidor pone `variant` en `'modal'` y `open` en `true`).
+ *
+ * ## Modo `modal`
+ * Mismo buscador, mismos chips, misma lógica de filtrado — compone
+ * `kf-modal` (proyectando el contenido) en vez de reimplementar un
+ * `<dialog>` a mano: la API de `Modal` (`[(open)]`, cierre con
+ * Escape/backdrop/botón vía `<dialog>` nativo) ya cubre exactamente lo que
+ * este modo necesita. Compone también `kf-data-table` para la tabla
+ * completa (columnas configurables, fade de overflow horizontal ya
+ * resuelto ahí) y `kf-pagination` para paginar — ninguno de los tres se
+ * reimplementa. Agrega un dropdown propio de "Ordenar por" (calibrado
+ * visualmente contra el trigger de `kf-select`, pero compacto: `kf-select`
+ * fuerza un ancho fijo de 240px pensado para formularios, no para una
+ * barra de herramientas de tabla — ver JSDoc de `sortOpen` más abajo).
+ *
+ * En mobile, `kf-data-table[cardable]` con `defaultView` forzado a
+ * `'cards'` decide la vista (mismo criterio que `matchMediaSignal` ya
+ * resolvió en otros consumidores): dentro de un modal a pantalla completa
+ * no tiene sentido ofrecer un toggle tabla/cards que en mobile daría una
+ * tabla angosta con scroll horizontal.
+ *
+ * DEUDA TÉCNICA CONOCIDA (confirmada con el usuario, ver CHANGELOG.md): el
+ * diseño validado con mockups pedía que en mobile el modal ocupe el 100%
+ * de la pantalla (botón "atrás", sin overlay centrado) — `kf-modal` no
+ * tiene ese modo, así que hoy en mobile se ve como un diálogo centrado
+ * angosto (`width: min(480px, ...)`). Es funcional (cards legibles,
+ * búsqueda, chips, paginación), solo visualmente distinto del mockup.
+ *
+ *   <kf-quote-picker
+ *     [items]="quotes()"
+ *     [columns]="columns"
+ *     [selectedId]="selectedQuoteId()"
+ *     [idKey]="(q) => q.id"
+ *     [chips]="statusChips()"
+ *     [cellTemplates]="{ photo: photoCell(), amount: amountCell() }"
+ *     (selectedIdChange)="selectedQuoteId.set($event)"
+ *     (expandToModal)="variant.set('modal'); open.set(true)"
+ *   />
+ */
+declare class QuotePicker<T = unknown> {
+    readonly items: _angular_core.InputSignal<T[]>;
+    readonly columns: _angular_core.InputSignal<DataTableColumn[]>;
+    readonly selectedId: _angular_core.InputSignal<string | null>;
+    readonly idKey: _angular_core.InputSignal<(item: T) => string>;
+    /**
+     * Mapa `columnKey -> TemplateRef`, mismo mecanismo que `kf-data-table`
+     * (`ngTemplateOutlet` + contexto `{ $implicit: item, index }`) — se
+     * reenvía tal cual a la tabla interna del modo `modal`, y se usa
+     * directamente en el grid de cards del modo `inline`. Un solo mapa para
+     * ambos modos, consistente con la regla de "una sola lógica interna".
+     */
+    readonly cellTemplates: _angular_core.InputSignal<Record<string, TemplateRef<{
+        $implicit: T;
+        index: number;
+    }>> | undefined>;
+    readonly chips: _angular_core.InputSignal<QuotePickerChip<T>[]>;
+    readonly sortOptions: _angular_core.InputSignal<QuotePickerSortOption[]>;
+    readonly sort: _angular_core.ModelSignal<string | null>;
+    /**
+     * Umbral de volumen alto — el consumidor decide el número exacto, nunca
+     * hardcodeado a "cotizaciones" ni a ningún caso de uso puntual. Default
+     * 15 según el diseño validado con mockups.
+     */
+    readonly expandThreshold: _angular_core.InputSignal<number>;
+    readonly variant: _angular_core.InputSignal<"inline" | "modal">;
+    /** Visibilidad del modo `modal`, two-way — mismo patrón que `[(open)]` de `kf-modal`. */
+    readonly open: _angular_core.ModelSignal<boolean>;
+    readonly title: _angular_core.InputSignal<string>;
+    readonly searchPlaceholder: _angular_core.InputSignal<string>;
+    /** Ícono de placeholder cuando ninguna columna `cardRole: 'media'` resuelve
+     * un thumbnail real vía `cellTemplates` — el picker no asume qué dominio
+     * consume (cotización, vehículo, cliente...), así que no hardcodea un
+     * ícono fijo. Default `'file'` solo por no dejar el input sin valor. */
+    readonly placeholderIcon: _angular_core.InputSignal<IconName>;
+    readonly selectedIdChange: _angular_core.OutputEmitterRef<string>;
+    /** Disparado al superar `expandThreshold` en modo inline; el consumidor decide pasar a `modal`. */
+    readonly expandToModal: _angular_core.OutputEmitterRef<void>;
+    protected readonly searchQuery: _angular_core.WritableSignal<string>;
+    protected readonly activeChip: _angular_core.WritableSignal<string | null>;
+    protected readonly expanded: _angular_core.WritableSignal<boolean>;
+    protected readonly page: _angular_core.WritableSignal<number>;
+    protected readonly sortOpen: _angular_core.WritableSignal<boolean>;
+    /**
+     * Mismo breakpoint (`max-width: 900px`) que el resto de la librería usa
+     * para decisiones de layout en TypeScript (no solo CSS) — ver
+     * `matchMediaSignal`. Decide 1 vs. 2 columnas en el grid inline, y tabla
+     * vs. cards apiladas dentro del modal.
+     */
+    protected readonly isMobile: _angular_core.Signal<boolean>;
+    private readonly destroyRef;
+    private readonly previewScrollEl;
+    /** Mismo mecanismo de fade que `kf-data-table` — ver comentario en QuotePicker.css. */
+    protected readonly canFadeBottom: _angular_core.WritableSignal<boolean>;
+    readonly selectedItem: _angular_core.Signal<T | undefined>;
+    /** Filtro por texto (buscador propio) + filtro por chip activo, en ese orden. */
+    protected readonly filteredItems: _angular_core.Signal<T[]>;
+    /**
+     * Orden solo tiene efecto visible en modo `modal` (el diseño validado no
+     * pide dropdown de orden en inline) — se calcula igual en ambos casos
+     * porque es la MISMA lógica interna; en inline `sort()` simplemente se
+     * queda en `null` salvo que el consumidor lo setee explícitamente.
+     */
+    protected readonly sortedItems: _angular_core.Signal<T[]>;
+    /** Por encima del umbral, el preview inline se recorta salvo que el usuario ya haya expandido. */
+    protected readonly isHighVolume: _angular_core.Signal<boolean>;
+    protected readonly previewItems: _angular_core.Signal<T[]>;
+    protected readonly pages: _angular_core.Signal<number>;
+    protected readonly pagedItems: _angular_core.Signal<T[]>;
+    protected readonly sortLabel: _angular_core.Signal<string>;
+    constructor();
+    private updateFadeState;
+    private cellText;
+    toggleExpandedPanel(): void;
+    onSearchInput(event: Event): void;
+    selectChip(value: string): void;
+    select(item: T): void;
+    onItemKeydown(event: KeyboardEvent, item: T): void;
+    onSeeAll(): void;
+    onTableRowClick(event: {
+        row: T;
+        index: number;
+    }): void;
+    toggleSort(): void;
+    setSort(value: string): void;
+    trackItem(item: T, index: number): string | number;
+    /** Arrow function como campo (no un método) para que `[rowKey]` reciba
+     * una referencia ESTABLE entre change detections — `trackItem.bind(this)`
+     * en el template recrearía una función nueva en cada ciclo, invalidando
+     * cualquier optimización de `kf-data-table` que dependa de identidad. */
+    protected readonly rowKeyFn: (item: T, index: number) => string | number;
+    protected cellValue(item: T, column: DataTableColumn): string;
+    protected readonly mediaColumn: _angular_core.Signal<DataTableColumn | undefined>;
+    protected readonly titleColumn: _angular_core.Signal<DataTableColumn | undefined>;
+    protected readonly fieldColumns: _angular_core.Signal<DataTableColumn[]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<QuotePicker<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<QuotePicker<any>, "kf-quote-picker", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "selectedId": { "alias": "selectedId"; "required": false; "isSignal": true; }; "idKey": { "alias": "idKey"; "required": true; "isSignal": true; }; "cellTemplates": { "alias": "cellTemplates"; "required": false; "isSignal": true; }; "chips": { "alias": "chips"; "required": false; "isSignal": true; }; "sortOptions": { "alias": "sortOptions"; "required": false; "isSignal": true; }; "sort": { "alias": "sort"; "required": false; "isSignal": true; }; "expandThreshold": { "alias": "expandThreshold"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "placeholderIcon": { "alias": "placeholderIcon"; "required": false; "isSignal": true; }; }, { "sort": "sortChange"; "open": "openChange"; "selectedIdChange": "selectedIdChange"; "expandToModal": "expandToModal"; }, never, never, true, never>;
+}
+
+/**
+ * Estado vacío de reservas en taller con llamada a agendar (página 36):
+ * barra de estado vacío arriba ("No tienes reservas de taller"), panel de
+ * invitación al medio (ícono en círculo azul, título, descripción, link) y
+ * una fila de dos acciones al pie — un slot `[actions]` proyectado, para no
+ * acoplar el componente a botones fijos.
+ *
+ * Distinto de `kf-empty-state` genérico: este combina la barra + la
+ * invitación + las acciones como un bloque compuesto propio del dominio
+ * "taller", no un placeholder de una sola pieza.
+ *
+ * `grow` estira el panel de invitación para llenar el espacio vertical
+ * disponible — solo cuando el consumidor comparte fila con una tarjeta más
+ * alta (ej. junto a "Total de vehículos"); en un lugar sin esa presión
+ * (home, debajo del carousel) se deja en su alto natural.
+ *
+ *   <kf-reserve-block emptyLabel="No tienes reservas de taller" grow
+ *     title="¿Necesitas mantención?" description="Tenemos la mejor red de talleres."
+ *     actionLabel="Agenda tu reserva aquí" actionHref="/taller/agendar">
+ *     <kf-button actions icon="calendar">Reservar hora</kf-button>
+ *     <kf-button actions variant="outline" icon="list">Ver agenda</kf-button>
+ *   </kf-reserve-block>
+ */
+declare class ReserveBlock {
+    readonly emptyLabel: _angular_core.InputSignal<string>;
+    readonly title: _angular_core.InputSignal<string>;
+    readonly description: _angular_core.InputSignal<string | undefined>;
+    readonly actionLabel: _angular_core.InputSignal<string | undefined>;
+    readonly actionHref: _angular_core.InputSignal<string | undefined>;
+    /** La invitación se estira para llenar la tarjeta (ej. junto a "Total de vehículos"). */
+    readonly grow: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ReserveBlock, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ReserveBlock, "kf-reserve-block", never, { "emptyLabel": { "alias": "emptyLabel"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "actionLabel": { "alias": "actionLabel"; "required": false; "isSignal": true; }; "actionHref": { "alias": "actionHref"; "required": false; "isSignal": true; }; "grow": { "alias": "grow"; "required": false; "isSignal": true; }; }, {}, never, ["[actions]"], true, never>;
+}
+
+/**
+ * Estado puntual mostrado junto a la identidad del vehículo (ej. "En ruta",
+ * "Mantenimiento", "Fuera de servicio"). `tone` define el color semántico:
+ * "crit" no tiene token propio en base.css, se mapea a var(--kf-color-error).
+ */
+interface VehicleHeaderStatus {
+    label: string;
+    tone?: 'ok' | 'warn' | 'crit';
+    icon?: IconName;
+}
+/**
+ * Header de identidad de un vehículo de flota: unidad (patente/id), modelo
+ * (como badge, no texto plano — página 24: "ABC-123" junto a un badge
+ * "TITAN 4X2"), VIN en fuente mono y un estado opcional. Un área de acciones
+ * opcional se proyecta vía `<ng-content select="[actions]">` para no acoplar
+ * el componente a un set fijo de botones — el patrón real de la spec es
+ * `kf-button variant="outline"` (ej. "Llamar", con ícono) + un `primary`
+ * (ej. "Crear Ticket", con ícono "+"):
+ *
+ *   <kf-vehicle-header unit="AB123CD" model="Sprinter 415" vin="9BW..."
+ *     [status]="{ label: 'En ruta', tone: 'ok' }">
+ *     <kf-button actions variant="outline" icon="phone">Llamar</kf-button>
+ *     <kf-button actions icon="plus">Crear Ticket</kf-button>
+ *   </kf-vehicle-header>
+ */
+declare class VehicleHeader {
+    readonly unit: _angular_core.InputSignal<string>;
+    readonly model: _angular_core.InputSignal<string | undefined>;
+    readonly vin: _angular_core.InputSignal<string | undefined>;
+    readonly status: _angular_core.InputSignal<VehicleHeaderStatus | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<VehicleHeader, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<VehicleHeader, "kf-vehicle-header", never, { "unit": { "alias": "unit"; "required": true; "isSignal": true; }; "model": { "alias": "model"; "required": false; "isSignal": true; }; "vin": { "alias": "vin"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; }, {}, never, ["[actions]"], true, never>;
+}
+
+export { CompanySelector, QuotePicker, ReserveBlock, VehicleHeader };
+export type { CompanySelectorMeta, QuotePickerChip, QuotePickerSortOption, VehicleHeaderStatus };