@kaufmann-lab/ui 0.1.19 → 0.1.21

package/package.json

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

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

@@ -1,6 +1,6 @@
 import * as _angular_core from '@angular/core';
 import { TemplateRef } from '@angular/core';
-import { DataTableColumn, IconName } from '@kaufmann-lab/ui/core';
+import { DataTableColumn, IconName, ContentStateKind, FilterChipOption, SelectOption } from '@kaufmann-lab/ui/core';
 export { DataTableColumn } from '@kaufmann-lab/ui/core';
 
 /** Metadato clave mostrado junto al selector (RUC, identificación, sucursal). */
@@ -8,6 +8,18 @@ interface CompanySelectorMeta {
     label: string;
     value: string;
 }
+/**
+ * Empresa elegible. `value` es el identificador único (ej. número de
+ * cuenta) — dos empresas con el mismo `label` se seleccionan por separado.
+ * `tag` se muestra como badge junto al nombre (ej. 'Personal' | 'Empresa')
+ * y `detail` como línea secundaria en el panel (ej. 'RUC 20434860808').
+ */
+interface CompanySelectorOption {
+    value: string;
+    label: string;
+    tag?: string;
+    detail?: string;
+}
 /**
  * Conmutador de empresa activa con metadatos clave (página 32) — encabeza
  * la pantalla de inicio del portal. Compone `kf-select` para el propio
@@ -25,10 +37,22 @@ interface CompanySelectorMeta {
  *       { label: 'Sucursal', value: 'Sucursal Norte' },
  *     ]"
  *   />
+ *
+ * Con opciones en forma de objeto, `value`/`valueChange` usan el `value` de
+ * la opción, no su nombre:
+ *
+ *   <kf-company-selector
+ *     [companies]="[
+ *       { value: '1002099', label: 'DIANA CAROLINA PINZÓN MALDONADO', tag: 'Personal', detail: 'DNI 46594489' },
+ *       { value: '1004410', label: 'TRANSPORTES VIRGEN DE LA AGRICULTURA', tag: 'Empresa', detail: 'RUC 20434860808' },
+ *     ]"
+ *     [value]="activeAccount()"
+ *     (valueChange)="activeAccount.set($event)"
+ *   />
  */
 declare class CompanySelector {
     readonly label: _angular_core.InputSignal<string>;
-    readonly companies: _angular_core.InputSignal<string[]>;
+    readonly companies: _angular_core.InputSignal<readonly (string | CompanySelectorOption)[]>;
     readonly value: _angular_core.InputSignal<string | undefined>;
     readonly meta: _angular_core.InputSignal<CompanySelectorMeta[]>;
     readonly valueChange: _angular_core.OutputEmitterRef<string>;
@@ -36,6 +60,19 @@ declare class CompanySelector {
     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>;
 }
 
+/**
+ * Alias del mismo `DataTableColumn`, para leer la API del picker sin ir a la
+ * tabla. En `modalLayout="list"` usa: `cardRole` (`title` → primera columna
+ * en mono; el primer campo sin rol → columna flexible con elipsis; `status`
+ * → última columna, hasta 13.75rem salvo `maxWidth`), `width` (ancho fijo de
+ * la pista), `maxWidth`, `align`/`right` y `truncate` (elipsis + `title`).
+ */
+type QuotePickerColumn = DataTableColumn;
+/** Sustantivo de los ítems para el conteo del encabezado ("86 cotizaciones"). */
+interface QuotePickerItemLabels {
+    singular: string;
+    plural: string;
+}
 /** 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`.
@@ -97,10 +134,8 @@ interface QuotePickerSortOption {
  * 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).
+ * reimplementa, igual que el buscador (`kf-input`), el orden (`kf-select`)
+ * y los chips (`kf-filter-chips`).
  *
  * En mobile, `kf-data-table[cardable]` con `defaultView` forzado a
  * `'cards'` decide la vista (mismo criterio que `matchMediaSignal` ya
@@ -108,12 +143,70 @@ interface QuotePickerSortOption {
  * 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.
+ * El modal mide `min(modalWidth, 100vw - 32px)` (default 1040px) con alto
+ * máximo de 85vh: encabezado (título + conteo "12 de 86 cotizaciones" en
+ * región `aria-live`) y filtros FIJOS arriba, solo la lista se desplaza. En
+ * ≤640px de viewport ocupa toda la pantalla (`fullscreenOnMobile` de
+ * `kf-modal`). Filtros: fila 1 = buscador (`kf-input`, crece, mínimo 240px)
+ * + orden (`kf-select` estándar); fila 2 = `kf-filter-chips` con contador y
+ * un chip "Todas" (`allChipLabel`) — en varias líneas en escritorio, una
+ * sola línea con scroll horizontal en mobile. Elegir un ítem (o el actual)
+ * cierra el modal.
+ *
+ * ## Trigger (variante `inline`)
+ * - `triggerSize="default"` (histórico): tarjeta a ancho completo con
+ *   miniatura y resumen.
+ * - `triggerSize="compact"`: control de barra de herramientas de alto FIJO
+ *   (`--kf-quote-picker-trigger-height`, 48px), sin miniatura: línea 1 =
+ *   título en mono + estado (columnas `status`), línea 2 = primer campo con
+ *   elipsis, y caret. Ancho flexible (`min-width: 0`). Su nombre accesible
+ *   es el texto visible con un prefijo: "Cambiar cotización. Actual: <id>,
+ *   <estado>, <modelo>".
+ * - `inlinePanel` (default `true`): con `false`, el trigger abre DIRECTO el
+ *   modal del picker (`aria-haspopup="dialog"`), sin panel inline — el mismo
+ *   modal que la variante `modal`, así todas las pantallas comparten un
+ *   único selector.
+ *
+ *   Con `loading` el trigger compacto muestra un esqueleto del MISMO alto
+ *   (región `role="status"` con `loadingLabel`), así la barra no salta.
+ *
+ *   <kf-quote-picker [items]="quotes()" [columns]="columns" [idKey]="idKey"
+ *     triggerSize="compact" [inlinePanel]="false" modalLayout="list"
+ *     [selectedId]="id()" [chips]="chips()" [sortOptions]="sortOptions"
+ *     [itemLabels]="{ singular: 'cotización', plural: 'cotizaciones' }"
+ *     (selectedIdChange)="go($event)" />
+ *
+ * ## `modalLayout` (modal de la variante `modal` y el de `inlinePanel` en false)
+ * - `'table'` (default, comportamiento histórico): `kf-data-table` paginada
+ *   con toggle Tabla/Tarjetas. La fila/tarjeta de `selectedId` lleva
+ *   `aria-current="true"` y fondo `primary-soft` (`currentRowKey`).
+ * - `'list'`: lista de una línea por ítem con COLUMNAS ALINEADAS (CSS grid
+ *   + `subgrid`: cada pista mide lo mismo en todas las filas), sin paginar
+ *   ni toggle; se desplaza el cuerpo del modal. Orden de columnas: título
+ *   (`cardRole: 'title'`, mono) | primer campo (flexible, una línea con
+ *   elipsis y `title`) | resto de campos (`width` o su ancho de contenido;
+ *   `align: 'end'` para montos, cifras tabulares) | `status` (hasta
+ *   13.75rem; el consumidor pasa `kf-badge truncate` con `title`) | check
+ *   de la fila actual. Cabecera de columnas discreta y fija al desplazar
+ *   (`listHeader`). Filas de 52px como mínimo; la de `selectedId` lleva
+ *   `aria-current="true"`, fondo `primary-soft` y un check, y al abrir se
+ *   desplaza a la vista. Con la lista de hasta 560px de ancho (container
+ *   query, no viewport): 2 líneas (título + estado / campos), con el primer
+ *   campo en hasta 2 líneas.
+ *
+ *   Límite conocido: sin virtualización. Cada fila es un `<button>` en el
+ *   DOM (búsqueda, foco y `aria-current` funcionan sin trucos); se probó
+ *   fluido con 120 filas y sigue usable con unos cientos. Para miles,
+ *   filtrar en el servidor antes de pasar `items`.
+ *
+ * En la variante modal, además: orden con `kf-select` estándar (ícono
+ * `sort`, "Ordenar por"), chips con `aria-pressed`, buscador con
+ * `searchAriaLabel` y foco inicial (`initialFocus` de `kf-modal`), conteo
+ * en una región `aria-live="polite"` (`itemLabels`), y estados
+ * `loading` (spinner con `loadingLabel`) y `error` (mensaje + botón
+ * "Reintentar" que emite `retry`) vía `kf-content-state`. El vacío "Sin
+ * resultados para esta búsqueda" solo aparece sin carga ni error. Escape
+ * con el panel del `kf-select` abierto cierra solo el select.
  *
  *   <kf-quote-picker
  *     [items]="quotes()"
@@ -161,7 +254,34 @@ declare class QuotePicker<T = unknown> {
      * 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>;
+    /** Disposición de la variante `modal`. Ver JSDoc de la clase. */
+    readonly modalLayout: _angular_core.InputSignal<"list" | "table">;
+    /** Nombre accesible del buscador. Default: `searchPlaceholder`. */
+    readonly searchAriaLabel: _angular_core.InputSignal<string | undefined>;
+    /** Estado de carga: spinner con `loadingLabel` en el modal y, con
+     * `triggerSize="compact"`, un esqueleto del trigger del mismo alto. */
+    readonly loading: _angular_core.InputSignal<boolean>;
+    /** Texto del estado de carga. */
+    readonly loadingLabel: _angular_core.InputSignal<string>;
+    /** Mensaje de error de la variante `modal`; con valor muestra el estado de error y "Reintentar". */
+    readonly error: _angular_core.InputSignal<string | null>;
+    /** Tamaño del trigger de la variante `inline`. Ver JSDoc de la clase. */
+    readonly triggerSize: _angular_core.InputSignal<"default" | "compact">;
+    /** Con `false`, el trigger abre directo el modal (sin panel inline). */
+    readonly inlinePanel: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Ancho máximo del modal (se topa con el viewport menos 32px). */
+    readonly modalWidth: _angular_core.InputSignal<string>;
+    /** Sustantivo del conteo del encabezado. Default "resultado/resultados". */
+    readonly itemLabels: _angular_core.InputSignal<QuotePickerItemLabels>;
+    /** Chip inicial "sin filtro" con el total. Vacío (`''`) lo oculta. */
+    readonly allChipLabel: _angular_core.InputSignal<string>;
+    /** Nombre accesible del grupo de chips del modal. */
+    readonly chipsAriaLabel: _angular_core.InputSignal<string>;
+    /** Cabecera de columnas en `modalLayout="list"` (solo visual). */
+    readonly listHeader: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly selectedIdChange: _angular_core.OutputEmitterRef<string>;
+    /** "Reintentar" del estado de error. */
+    readonly retry: _angular_core.OutputEmitterRef<void>;
     /** 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>;
@@ -176,8 +296,13 @@ declare class QuotePicker<T = unknown> {
      * vs. cards apiladas dentro del modal.
      */
     protected readonly isMobile: _angular_core.Signal<boolean>;
+    /** Mismo corte que el modal a pantalla completa: chips en una sola línea. */
+    protected readonly isNarrowViewport: _angular_core.Signal<boolean>;
     private readonly destroyRef;
     private readonly previewScrollEl;
+    private readonly modalListEl;
+    /** Para desplazar la fila actual a la vista UNA vez por apertura, no en cada render. */
+    private scrolledToCurrent;
     /** 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>;
@@ -195,13 +320,46 @@ declare class QuotePicker<T = unknown> {
     protected readonly previewItems: _angular_core.Signal<T[]>;
     protected readonly pages: _angular_core.Signal<number>;
     protected readonly pagedItems: _angular_core.Signal<T[]>;
+    protected readonly resolvedSearchAriaLabel: _angular_core.Signal<string>;
+    /** Estado del cuerpo del modal para `kf-content-state`. */
+    protected readonly modalState: _angular_core.Signal<ContentStateKind>;
+    /**
+     * Conteo del encabezado, en región `aria-live`: "86 cotizaciones" sin
+     * filtros, "12 de 86 cotizaciones" con búsqueda o chip. Vacío mientras
+     * carga o con error.
+     */
+    protected readonly resultsLabel: _angular_core.Signal<string>;
+    /** Chips del modal en el formato de `kf-filter-chips`, con "Todas" al inicio. */
+    protected readonly chipOptions: _angular_core.Signal<FilterChipOption[]>;
+    /**
+     * Pistas de la grilla de `modalLayout="list"`, en el orden visual: título,
+     * primer campo (flexible), resto, estados y el check. Todas las filas
+     * comparten estas pistas vía `subgrid`, por eso las columnas alinean.
+     */
+    protected readonly listGridColumns: _angular_core.Signal<string>;
+    protected readonly sortSelectOptions: _angular_core.Signal<SelectOption[]>;
+    protected readonly statusColumns: _angular_core.Signal<DataTableColumn[]>;
+    /** Primer campo (ej. modelo): ocupa el espacio libre de la fila en `modalLayout="list"`. */
+    protected readonly primaryFieldColumn: _angular_core.Signal<DataTableColumn>;
+    protected readonly restFieldColumns: _angular_core.Signal<DataTableColumn[]>;
+    /** Alineada al final: `align: 'end'` o el histórico `right: true`. */
+    protected isEndAligned(column: DataTableColumn): boolean;
+    /** `title` con el valor completo de una celda que puede cortarse con elipsis. */
+    protected cellTitle(item: T, column: DataTableColumn): string | null;
+    protected isSelected(item: T): boolean;
     protected readonly sortLabel: _angular_core.Signal<string>;
     constructor();
     private updateFadeState;
     private cellText;
     toggleExpandedPanel(): void;
+    /** Click en el trigger: alterna el panel inline o, sin él, abre el modal. */
+    protected onTriggerClick(): void;
     onSearchInput(event: Event): void;
+    /** Buscador del modal (`kf-input` con `ngModel`), incluido el botón "×". */
+    protected onSearchChange(value: string): void;
     selectChip(value: string): void;
+    /** Chips del modal: `''` es "Todas" (sin filtro). */
+    protected onChipChange(value: string): void;
     select(item: T): void;
     onItemKeydown(event: KeyboardEvent, item: T): void;
     onSeeAll(): void;
@@ -209,7 +367,10 @@ declare class QuotePicker<T = unknown> {
         row: T;
         index: number;
     }): void;
+    /** @deprecated El orden de la variante modal ahora es un `kf-select`; este método ya no lo usa la plantilla. */
     toggleSort(): void;
+    protected onSortChange(value: string): void;
+    /** Alterna el orden (elegir el vigente lo quita). Se conserva por compatibilidad. */
     setSort(value: string): void;
     trackItem(item: T, index: number): string | number;
     /** Arrow function como campo (no un método) para que `[rowKey]` reciba
@@ -222,7 +383,7 @@ declare class QuotePicker<T = unknown> {
     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>;
+    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; }; "modalLayout": { "alias": "modalLayout"; "required": false; "isSignal": true; }; "searchAriaLabel": { "alias": "searchAriaLabel"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "loadingLabel": { "alias": "loadingLabel"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "triggerSize": { "alias": "triggerSize"; "required": false; "isSignal": true; }; "inlinePanel": { "alias": "inlinePanel"; "required": false; "isSignal": true; }; "modalWidth": { "alias": "modalWidth"; "required": false; "isSignal": true; }; "itemLabels": { "alias": "itemLabels"; "required": false; "isSignal": true; }; "allChipLabel": { "alias": "allChipLabel"; "required": false; "isSignal": true; }; "chipsAriaLabel": { "alias": "chipsAriaLabel"; "required": false; "isSignal": true; }; "listHeader": { "alias": "listHeader"; "required": false; "isSignal": true; }; }, { "sort": "sortChange"; "open": "openChange"; "selectedIdChange": "selectedIdChange"; "retry": "retry"; "expandToModal": "expandToModal"; }, never, never, true, never>;
 }
 
 /**
@@ -310,4 +471,4 @@ declare class VehicleHeader {
 }
 
 export { CompanySelector, QuotePicker, ReserveBlock, VehicleHeader };
-export type { CompanySelectorMeta, QuotePickerChip, QuotePickerSortOption, VehicleHeaderStatus };
+export type { CompanySelectorMeta, CompanySelectorOption, QuotePickerChip, QuotePickerColumn, QuotePickerItemLabels, QuotePickerSortOption, VehicleHeaderStatus };