@kaufmann-lab/ui 0.1.20 → 0.1.22

package/fesm2022/kaufmann-lab-ui-business.mjs

@@ -1,7 +1,9 @@
 import * as i0 from '@angular/core';
-import { input, output, Component, model, signal, inject, DestroyRef, viewChild, computed, afterNextRender, booleanAttribute } from '@angular/core';
-import { Divider, Select, Text, Icon, Modal, DataTable, EmptyState, Pagination, Link } from '@kaufmann-lab/ui/core';
+import { input, output, Component, model, booleanAttribute, signal, inject, DestroyRef, viewChild, computed, afterRenderEffect, untracked, afterNextRender } from '@angular/core';
+import { Divider, Select, Text, Button, ContentState, FilterChips, Icon, Input, Modal, DataTable, EmptyState, Pagination, Skeleton, Link } from '@kaufmann-lab/ui/core';
 import { NgTemplateOutlet } from '@angular/common';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
 import { matchMediaSignal, normalizeForSearch } from '@kaufmann-lab/ui/shared';
 
 /**
@@ -45,7 +47,7 @@ class CompanySelector {
     ...(ngDevMode ? [{ debugName: "meta" }] : /* istanbul ignore next */ []));
     valueChange = output();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CompanySelector, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: CompanySelector, isStandalone: true, selector: "kf-company-selector", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, companies: { classPropertyName: "companies", publicName: "companies", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<kf-select\n  class=\"kf-company-selector__select\"\n  [label]=\"label()\"\n  [options]=\"companies()\"\n  [value]=\"value()\"\n  (valueChange)=\"valueChange.emit($event)\"\n/>\n@if (meta().length) {\n  <div class=\"kf-company-selector__meta\">\n    @for (item of meta(); track item.label; let last = $last) {\n      <div class=\"kf-company-selector__meta-item\">\n        <kf-text as=\"span\" variant=\"overline\">{{ item.label }}</kf-text>\n        <span class=\"kf-company-selector__meta-value\">{{ item.value }}</span>\n      </div>\n      @if (!last) {\n        <kf-divider orientation=\"vertical\" />\n      }\n    }\n  </div>\n}\n", styles: [":host{display:flex;align-items:center;gap:var(--kf-space-lg);flex-wrap:wrap;padding:var(--kf-space-md);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-md);background:var(--kf-color-white);font-family:var(--kf-font-body)}.kf-company-selector__select{flex:1 1 260px;min-width:0}.kf-company-selector__meta{display:flex;gap:var(--kf-space-lg);flex-wrap:wrap}.kf-company-selector__meta-item{display:flex;flex-direction:column;gap:2px}.kf-company-selector__meta-value{font-family:var(--kf-font-mono);font-size:.875rem;color:var(--kf-color-ink)}\n"], dependencies: [{ kind: "component", type: Divider, selector: "kf-divider", inputs: ["orientation"] }, { kind: "component", type: Select, selector: "kf-select", inputs: ["label", "options", "value", "placeholder", "disabled", "invalid", "errorMessage", "variant", "width", "searchable", "searchThreshold"], outputs: ["valueChange"] }, { kind: "component", type: Text, selector: "kf-text", inputs: ["as", "variant", "tone"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: CompanySelector, isStandalone: true, selector: "kf-company-selector", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, companies: { classPropertyName: "companies", publicName: "companies", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<kf-select\n  class=\"kf-company-selector__select\"\n  [label]=\"label()\"\n  [options]=\"companies()\"\n  [value]=\"value()\"\n  (valueChange)=\"valueChange.emit($event)\"\n/>\n@if (meta().length) {\n  <div class=\"kf-company-selector__meta\">\n    @for (item of meta(); track item.label; let last = $last) {\n      <div class=\"kf-company-selector__meta-item\">\n        <kf-text as=\"span\" variant=\"overline\">{{ item.label }}</kf-text>\n        <span class=\"kf-company-selector__meta-value\">{{ item.value }}</span>\n      </div>\n      @if (!last) {\n        <kf-divider orientation=\"vertical\" />\n      }\n    }\n  </div>\n}\n", styles: [":host{display:flex;align-items:center;gap:var(--kf-space-lg);flex-wrap:wrap;padding:var(--kf-space-md);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-md);background:var(--kf-color-white);font-family:var(--kf-font-body)}.kf-company-selector__select{flex:1 1 260px;min-width:0}.kf-company-selector__meta{display:flex;gap:var(--kf-space-lg);flex-wrap:wrap}.kf-company-selector__meta-item{display:flex;flex-direction:column;gap:2px}.kf-company-selector__meta-value{font-family:var(--kf-font-mono);font-size:.875rem;color:var(--kf-color-ink)}\n"], dependencies: [{ kind: "component", type: Divider, selector: "kf-divider", inputs: ["orientation"] }, { kind: "component", type: Select, selector: "kf-select", inputs: ["label", "options", "value", "placeholder", "disabled", "invalid", "errorMessage", "variant", "width", "searchable", "searchThreshold", "ariaLabel", "icon", "panelTitle", "panelWidth"], outputs: ["valueChange"] }, { kind: "component", type: Text, selector: "kf-text", inputs: ["as", "variant", "tone"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CompanySelector, decorators: [{
             type: Component,
@@ -95,10 +97,8 @@ const PAGE_SIZE = 10;
  * 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
@@ -106,12 +106,70 @@ const PAGE_SIZE = 10;
  * 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()"
@@ -170,7 +228,47 @@ class QuotePicker {
      * ícono fijo. Default `'file'` solo por no dejar el input sin valor. */
     placeholderIcon = input('file', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "placeholderIcon" }] : /* istanbul ignore next */ []));
+    /** Disposición de la variante `modal`. Ver JSDoc de la clase. */
+    modalLayout = input('table', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "modalLayout" }] : /* istanbul ignore next */ []));
+    /** Nombre accesible del buscador. Default: `searchPlaceholder`. */
+    searchAriaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "searchAriaLabel" }] : /* istanbul ignore next */ []));
+    /** Estado de carga: spinner con `loadingLabel` en el modal y, con
+     * `triggerSize="compact"`, un esqueleto del trigger del mismo alto. */
+    loading = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    /** Texto del estado de carga. */
+    loadingLabel = input('Cargando…', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loadingLabel" }] : /* istanbul ignore next */ []));
+    /** Mensaje de error de la variante `modal`; con valor muestra el estado de error y "Reintentar". */
+    error = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    /** Tamaño del trigger de la variante `inline`. Ver JSDoc de la clase. */
+    triggerSize = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerSize" }] : /* istanbul ignore next */ []));
+    /** Con `false`, el trigger abre directo el modal (sin panel inline). */
+    inlinePanel = input(true, { ...(ngDevMode ? { debugName: "inlinePanel" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Ancho máximo del modal (se topa con el viewport menos 32px). */
+    modalWidth = input('1040px', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "modalWidth" }] : /* istanbul ignore next */ []));
+    /** Sustantivo del conteo del encabezado. Default "resultado/resultados". */
+    itemLabels = input({
+        singular: 'resultado',
+        plural: 'resultados',
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemLabels" }] : /* istanbul ignore next */ []));
+    /** Chip inicial "sin filtro" con el total. Vacío (`''`) lo oculta. */
+    allChipLabel = input('Todas', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allChipLabel" }] : /* istanbul ignore next */ []));
+    /** Nombre accesible del grupo de chips del modal. */
+    chipsAriaLabel = input('Filtrar resultados', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "chipsAriaLabel" }] : /* istanbul ignore next */ []));
+    /** Cabecera de columnas en `modalLayout="list"` (solo visual). */
+    listHeader = input(true, { ...(ngDevMode ? { debugName: "listHeader" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     selectedIdChange = output();
+    /** "Reintentar" del estado de error. */
+    retry = output();
     /** Disparado al superar `expandThreshold` en modo inline; el consumidor decide pasar a `modal`. */
     expandToModal = output();
     searchQuery = signal('', /* @ts-ignore */
@@ -190,9 +288,15 @@ class QuotePicker {
      * vs. cards apiladas dentro del modal.
      */
     isMobile = matchMediaSignal('(max-width: 900px)');
+    /** Mismo corte que el modal a pantalla completa: chips en una sola línea. */
+    isNarrowViewport = matchMediaSignal('(max-width: 640px)');
     destroyRef = inject(DestroyRef);
     previewScrollEl = viewChild('previewScroll', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "previewScrollEl" }] : /* istanbul ignore next */ []));
+    modalListEl = viewChild('modalList', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "modalListEl" }] : /* istanbul ignore next */ []));
+    /** Para desplazar la fila actual a la vista UNA vez por apertura, no en cada render. */
+    scrolledToCurrent = false;
     /** Mismo mecanismo de fade que `kf-data-table` — ver comentario en QuotePicker.css. */
     canFadeBottom = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "canFadeBottom" }] : /* istanbul ignore next */ []));
@@ -262,12 +366,107 @@ class QuotePicker {
         return this.sortedItems().slice(start, start + PAGE_SIZE);
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "pagedItems" }] : /* istanbul ignore next */ []));
+    resolvedSearchAriaLabel = computed(() => this.searchAriaLabel() ?? this.searchPlaceholder(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSearchAriaLabel" }] : /* istanbul ignore next */ []));
+    /** Estado del cuerpo del modal para `kf-content-state`. */
+    modalState = computed(() => this.loading() ? 'loading' : this.error() ? 'error' : 'ready', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "modalState" }] : /* istanbul ignore next */ []));
+    /**
+     * 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.
+     */
+    resultsLabel = computed(() => {
+        if (this.modalState() !== 'ready') {
+            return '';
+        }
+        const total = this.items().length;
+        const shown = this.sortedItems().length;
+        const { singular, plural } = this.itemLabels();
+        const noun = total === 1 ? singular : plural;
+        return shown === total ? `${total} ${noun}` : `${shown} de ${total} ${noun}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resultsLabel" }] : /* istanbul ignore next */ []));
+    /** Chips del modal en el formato de `kf-filter-chips`, con "Todas" al inicio. */
+    chipOptions = computed(() => {
+        const chips = this.chips().map((chip) => ({
+            value: chip.value,
+            label: chip.label,
+            count: chip.count,
+        }));
+        const allLabel = this.allChipLabel();
+        return allLabel
+            ? [{ value: '', label: allLabel, count: this.items().length }, ...chips]
+            : chips;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "chipOptions" }] : /* istanbul ignore next */ []));
+    /**
+     * 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.
+     */
+    listGridColumns = computed(() => {
+        const tracks = [];
+        const titleCol = this.titleColumn();
+        const primary = this.primaryFieldColumn();
+        if (titleCol) {
+            tracks.push(titleCol.width ?? 'max-content');
+        }
+        if (primary) {
+            tracks.push(primary.width ?? 'minmax(0, 1fr)');
+        }
+        for (const col of this.restFieldColumns()) {
+            tracks.push(col.width ?? (col.truncate ? `minmax(0, ${col.maxWidth ?? 'max-content'})` : 'max-content'));
+        }
+        for (const col of this.statusColumns()) {
+            tracks.push(col.width ?? `fit-content(${col.maxWidth ?? '13.75rem'})`);
+        }
+        tracks.push('1.25rem');
+        return tracks.join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listGridColumns" }] : /* istanbul ignore next */ []));
+    sortSelectOptions = computed(() => this.sortOptions().map((option) => ({ value: option.value, label: option.label })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sortSelectOptions" }] : /* istanbul ignore next */ []));
+    statusColumns = computed(() => this.columns().filter((c) => c.cardRole === 'status'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "statusColumns" }] : /* istanbul ignore next */ []));
+    /** Primer campo (ej. modelo): ocupa el espacio libre de la fila en `modalLayout="list"`. */
+    primaryFieldColumn = computed(() => this.fieldColumns()[0], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "primaryFieldColumn" }] : /* istanbul ignore next */ []));
+    restFieldColumns = computed(() => this.fieldColumns().slice(1), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "restFieldColumns" }] : /* istanbul ignore next */ []));
+    /** Alineada al final: `align: 'end'` o el histórico `right: true`. */
+    isEndAligned(column) {
+        return column.align === 'end' || !!column.right;
+    }
+    /** `title` con el valor completo de una celda que puede cortarse con elipsis. */
+    cellTitle(item, column) {
+        return this.cellText(item, column) || null;
+    }
+    isSelected(item) {
+        return this.idKey()(item) === this.selectedId();
+    }
     sortLabel = computed(() => {
         const current = this.sortOptions().find((option) => option.value === this.sort());
         return current?.label ?? 'Ordenar por';
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "sortLabel" }] : /* istanbul ignore next */ []));
     constructor() {
+        afterRenderEffect(() => {
+            const list = this.modalListEl()?.nativeElement;
+            if (!this.open() || !list) {
+                this.scrolledToCurrent = false;
+                return;
+            }
+            untracked(() => {
+                if (this.scrolledToCurrent) {
+                    return;
+                }
+                this.scrolledToCurrent = true;
+                list
+                    .querySelector('.kf-quote-picker__row--current')
+                    ?.scrollIntoView?.({ block: 'nearest' });
+            });
+        });
         afterNextRender(() => {
             const el = this.previewScrollEl()?.nativeElement;
             if (!el) {
@@ -296,14 +495,32 @@ class QuotePicker {
     toggleExpandedPanel() {
         this.expanded.set(!this.expanded());
     }
+    /** Click en el trigger: alterna el panel inline o, sin él, abre el modal. */
+    onTriggerClick() {
+        if (this.inlinePanel()) {
+            this.toggleExpandedPanel();
+        }
+        else {
+            this.open.set(true);
+        }
+    }
     onSearchInput(event) {
-        this.searchQuery.set(event.target.value);
+        this.onSearchChange(event.target.value);
+    }
+    /** Buscador del modal (`kf-input` con `ngModel`), incluido el botón "×". */
+    onSearchChange(value) {
+        this.searchQuery.set(value ?? '');
         this.page.set(1);
     }
     selectChip(value) {
         this.activeChip.set(this.activeChip() === value ? null : value);
         this.page.set(1);
     }
+    /** Chips del modal: `''` es "Todas" (sin filtro). */
+    onChipChange(value) {
+        this.activeChip.set(value || null);
+        this.page.set(1);
+    }
     select(item) {
         const id = this.idKey()(item);
         // El panel se cierra siempre al elegir (haya cambiado el id o no) —
@@ -312,6 +529,9 @@ class QuotePicker {
         // consumidor sería una carga que ningún otro componente de la
         // librería le pide.
         this.expanded.set(false);
+        // El modal también se cierra al elegir: el consumidor ya no necesita
+        // cerrarlo a mano en `selectedIdChange` (hacerlo igual es inocuo).
+        this.open.set(false);
         if (id === this.selectedId()) {
             return;
         }
@@ -329,9 +549,14 @@ class QuotePicker {
     onTableRowClick(event) {
         this.select(event.row);
     }
+    /** @deprecated El orden de la variante modal ahora es un `kf-select`; este método ya no lo usa la plantilla. */
     toggleSort() {
         this.sortOpen.update((open) => !open);
     }
+    onSortChange(value) {
+        this.sort.set(value);
+    }
+    /** Alterna el orden (elegir el vigente lo quita). Se conserva por compatibilidad. */
     setSort(value) {
         this.sort.set(this.sort() === value ? null : value);
         this.sortOpen.set(false);
@@ -355,12 +580,27 @@ class QuotePicker {
     fieldColumns = computed(() => this.columns().filter((c) => !c.cardRole || c.cardRole === 'field'), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "fieldColumns" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: QuotePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: QuotePicker, isStandalone: true, selector: "kf-quote-picker", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, selectedId: { classPropertyName: "selectedId", publicName: "selectedId", isSignal: true, isRequired: false, transformFunction: null }, idKey: { classPropertyName: "idKey", publicName: "idKey", isSignal: true, isRequired: true, transformFunction: null }, cellTemplates: { classPropertyName: "cellTemplates", publicName: "cellTemplates", isSignal: true, isRequired: false, transformFunction: null }, chips: { classPropertyName: "chips", publicName: "chips", isSignal: true, isRequired: false, transformFunction: null }, sortOptions: { classPropertyName: "sortOptions", publicName: "sortOptions", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, expandThreshold: { classPropertyName: "expandThreshold", publicName: "expandThreshold", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, placeholderIcon: { classPropertyName: "placeholderIcon", publicName: "placeholderIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sort: "sortChange", open: "openChange", selectedIdChange: "selectedIdChange", expandToModal: "expandToModal" }, viewQueries: [{ propertyName: "previewScrollEl", first: true, predicate: ["previewScroll"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (variant() === 'inline') {\n  <div class=\"kf-quote-picker__inline\">\n    <!-- Trigger colapsado (default): ancho completo, nunca una caja angosta. -->\n    <button\n      type=\"button\"\n      class=\"kf-quote-picker__trigger\"\n      [attr.aria-expanded]=\"expanded()\"\n      (click)=\"toggleExpandedPanel()\"\n    >\n      <span class=\"kf-quote-picker__thumb\">\n        @if (mediaColumn(); as media) {\n          @if (cellTemplates()?.[media.key]; as template) {\n            <ng-container\n              [ngTemplateOutlet]=\"template\"\n              [ngTemplateOutletContext]=\"{ $implicit: selectedItem(), index: 0 }\"\n            />\n          }\n        } @else {\n          <kf-icon [name]=\"placeholderIcon()\" size=\"md\" />\n        }\n      </span>\n      @if (selectedItem(); as item) {\n        <span class=\"kf-quote-picker__trigger-summary\">\n          @if (titleColumn(); as title) {\n            <span class=\"kf-quote-picker__trigger-field kf-quote-picker__trigger-field--title\">{{\n              cellValue(item, title)\n            }}</span>\n          }\n          <!--\n            En mobile solo se muestra el t\u00EDtulo (ID) \u2014 mostrar los 5 campos\n            en una sola l\u00EDnea de ~90px de ancho real corta el texto sin\n            elipsis a mitad del segundo campo (bug real medido:\n            scrollWidth=519 vs. clientWidth=87 en 390px). El resto de los\n            campos siguen disponibles en el panel expandido y en el modal,\n            donde s\u00ED hay espacio horizontal.\n          -->\n          @if (!isMobile()) {\n            @for (col of fieldColumns(); track col.key) {\n              <span class=\"kf-quote-picker__trigger-sep\" aria-hidden=\"true\">\u00B7</span>\n              <span class=\"kf-quote-picker__trigger-field\">{{ cellValue(item, col) }}</span>\n            }\n          }\n        </span>\n      } @else {\n        <span class=\"kf-quote-picker__trigger-summary kf-quote-picker__trigger-summary--empty\"\n          >Sin selecci\u00F3n</span\n        >\n      }\n      <span class=\"kf-quote-picker__trigger-action\">\n        {{ expanded() ? 'Cerrar' : title() }}\n        <kf-icon\n          name=\"chevron-down\"\n          size=\"sm\"\n          class=\"kf-quote-picker__chevron\"\n          [class.kf-quote-picker__chevron--open]=\"expanded()\"\n        />\n      </span>\n    </button>\n\n    @if (expanded()) {\n      <div class=\"kf-quote-picker__panel\">\n        <div class=\"kf-quote-picker__toolbar\">\n          <div class=\"kf-quote-picker__search\">\n            <kf-icon name=\"search\" size=\"sm\" />\n            <input\n              type=\"text\"\n              class=\"kf-quote-picker__search-input\"\n              [placeholder]=\"searchPlaceholder()\"\n              [value]=\"searchQuery()\"\n              (input)=\"onSearchInput($event)\"\n            />\n          </div>\n          @for (chip of chips(); track chip.value) {\n            <button\n              type=\"button\"\n              class=\"kf-quote-picker__chip\"\n              [class.kf-quote-picker__chip--active]=\"activeChip() === chip.value\"\n              (click)=\"selectChip(chip.value)\"\n            >\n              {{ chip.label }} ({{ chip.count }})\n            </button>\n          }\n        </div>\n\n        <div class=\"kf-quote-picker__results-wrap\">\n          <div #previewScroll class=\"kf-quote-picker__results\" role=\"listbox\">\n            @for (item of previewItems(); track trackItem(item, $index)) {\n              <button\n                type=\"button\"\n                class=\"kf-quote-picker__result\"\n                [class.kf-quote-picker__result--active]=\"idKey()(item) === selectedId()\"\n                role=\"option\"\n                [attr.aria-selected]=\"idKey()(item) === selectedId()\"\n                (click)=\"select(item)\"\n                (keydown)=\"onItemKeydown($event, item)\"\n              >\n                <span class=\"kf-quote-picker__thumb kf-quote-picker__thumb--sm\">\n                  @if (mediaColumn(); as media) {\n                    @if (cellTemplates()?.[media.key]; as template) {\n                      <ng-container\n                        [ngTemplateOutlet]=\"template\"\n                        [ngTemplateOutletContext]=\"{ $implicit: item, index: $index }\"\n                      />\n                    }\n                  } @else {\n                    <kf-icon [name]=\"placeholderIcon()\" size=\"sm\" />\n                  }\n                </span>\n                @if (titleColumn(); as title) {\n                  <span\n                    class=\"kf-quote-picker__result-field kf-quote-picker__result-field--title\"\n                    >{{ cellValue(item, title) }}</span\n                  >\n                }\n                <!--\n                  Wrapper propio (no los spans sueltos) para los campos\n                  secundarios: en mobile necesita saltar de l\u00EDnea COMPLETO\n                  (mismo criterio que \"unidades\" no debe competir con\n                  \"modelo\" en la primera l\u00EDnea) \u2014 `flex-basis: 100%` en un\n                  solo elemento fuerza ese salto sin tener que asumir cu\u00E1l\n                  de los N campos gen\u00E9ricos es el m\u00E1s corto o el m\u00E1s largo.\n                -->\n                <span class=\"kf-quote-picker__result-fields\">\n                  @for (col of fieldColumns(); track col.key; let first = $first) {\n                    <span\n                      class=\"kf-quote-picker__result-field\"\n                      [class.kf-quote-picker__result-field--primary]=\"first\"\n                      >{{ cellValue(item, col) }}</span\n                    >\n                  }\n                </span>\n              </button>\n            } @empty {\n              <p class=\"kf-quote-picker__empty\">Sin resultados para esta b\u00FAsqueda.</p>\n            }\n          </div>\n          @if (canFadeBottom()) {\n            <div class=\"kf-quote-picker__fade\" aria-hidden=\"true\"></div>\n          }\n        </div>\n\n        @if (isHighVolume()) {\n          <button type=\"button\" class=\"kf-quote-picker__see-all\" (click)=\"onSeeAll()\">\n            Ver las {{ sortedItems().length }} en pantalla completa\n          </button>\n        }\n      </div>\n    }\n  </div>\n} @else {\n  <kf-modal [(open)]=\"open\" [title]=\"title()\" [dismissible]=\"true\">\n    <div class=\"kf-quote-picker__modal-toolbar\">\n      <div class=\"kf-quote-picker__search\">\n        <kf-icon name=\"search\" size=\"sm\" />\n        <input\n          type=\"text\"\n          class=\"kf-quote-picker__search-input\"\n          [placeholder]=\"searchPlaceholder()\"\n          [value]=\"searchQuery()\"\n          (input)=\"onSearchInput($event)\"\n        />\n      </div>\n      <div class=\"kf-quote-picker__modal-filters\">\n        <div class=\"kf-quote-picker__modal-chips\">\n          @for (chip of chips(); track chip.value) {\n            <button\n              type=\"button\"\n              class=\"kf-quote-picker__chip\"\n              [class.kf-quote-picker__chip--active]=\"activeChip() === chip.value\"\n              (click)=\"selectChip(chip.value)\"\n            >\n              {{ chip.label }} ({{ chip.count }})\n            </button>\n          }\n        </div>\n        @if (sortOptions().length > 0) {\n          <div class=\"kf-quote-picker__sort\">\n            <button\n              type=\"button\"\n              class=\"kf-quote-picker__sort-trigger\"\n              [attr.aria-expanded]=\"sortOpen()\"\n              (click)=\"toggleSort()\"\n            >\n              <kf-icon name=\"sort\" size=\"sm\" />\n              {{ sortLabel() }}\n              <kf-icon name=\"chevron-down\" size=\"sm\" />\n            </button>\n            @if (sortOpen()) {\n              <div class=\"kf-quote-picker__sort-panel\">\n                @for (option of sortOptions(); track option.value) {\n                  <button\n                    type=\"button\"\n                    class=\"kf-quote-picker__sort-option\"\n                    [class.kf-quote-picker__sort-option--active]=\"sort() === option.value\"\n                    (click)=\"setSort(option.value)\"\n                  >\n                    {{ option.label }}\n                  </button>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n\n    <kf-data-table\n      [columns]=\"columns()\"\n      [rows]=\"pagedItems()\"\n      [cardable]=\"true\"\n      [defaultView]=\"isMobile() ? 'cards' : 'table'\"\n      [cellTemplates]=\"cellTemplates()\"\n      [rowKey]=\"rowKeyFn\"\n      (rowClick)=\"onTableRowClick($event)\"\n    >\n      <kf-empty-state empty icon=\"file\">Sin resultados para esta b\u00FAsqueda.</kf-empty-state>\n      @if (sortedItems().length > 0) {\n        <kf-pagination footer [page]=\"page()\" [pages]=\"pages()\" (pageChange)=\"page.set($event)\">\n          {{ sortedItems().length }} resultados\n        </kf-pagination>\n      }\n    </kf-data-table>\n  </kf-modal>\n}\n", styles: [":host{display:block;font-family:var(--kf-font-body)}.kf-quote-picker__trigger{box-sizing:border-box;display:flex;align-items:center;gap:var(--kf-space-md);width:100%;padding:var(--kf-space-sm) var(--kf-space-md);background:var(--kf-color-white);border:1.5px solid var(--kf-color-primary);border-radius:var(--kf-radius-md);box-shadow:var(--kf-shadow-sm);cursor:pointer;font:inherit;text-align:left}.kf-quote-picker__trigger:hover{box-shadow:var(--kf-shadow-md)}.kf-quote-picker__trigger:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-quote-picker__thumb{display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none;border-radius:var(--kf-radius-sm);background:var(--kf-color-surface);color:var(--kf-color-gray-400)}.kf-quote-picker__thumb--sm{width:36px;height:36px}.kf-quote-picker__result--active .kf-quote-picker__thumb{background:var(--kf-color-white);color:var(--kf-color-primary)}.kf-quote-picker__trigger-summary{flex:1;min-width:0;display:flex;align-items:baseline;gap:var(--kf-space-xs);overflow:hidden;white-space:nowrap;color:var(--kf-color-ink)}.kf-quote-picker__trigger-summary--empty{color:var(--kf-color-text-muted)}.kf-quote-picker__trigger-field--title{font-family:var(--kf-font-title);font-weight:700;font-size:1.05rem;color:var(--kf-color-ink)}.kf-quote-picker__trigger-field{font-size:.85rem;color:var(--kf-color-text)}.kf-quote-picker__trigger-sep{color:var(--kf-color-border-strong)}.kf-quote-picker__trigger-action{flex:none;display:flex;align-items:center;gap:6px;color:var(--kf-color-primary);font-size:.85rem;font-weight:600}.kf-quote-picker__chevron{transition:transform .14s}.kf-quote-picker__chevron--open{transform:rotate(180deg)}.kf-quote-picker__panel{display:flex;flex-direction:column;gap:var(--kf-space-md);margin-top:var(--kf-space-sm);padding:var(--kf-space-md) var(--kf-space-lg);background:var(--kf-color-surface);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-md)}.kf-quote-picker__toolbar{display:flex;flex-wrap:wrap;gap:var(--kf-space-sm)}.kf-quote-picker__search{flex:1;min-width:200px;display:flex;align-items:center;gap:var(--kf-space-sm);padding:var(--kf-space-sm) var(--kf-space-md);background:var(--kf-color-white);border:1.5px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);color:var(--kf-color-text-muted)}.kf-quote-picker__search:focus-within{border-color:var(--kf-color-primary);box-shadow:var(--kf-shadow-focus)}.kf-quote-picker__search-input{flex:1;border:none;outline:none;background:transparent;font:inherit;color:var(--kf-color-ink)}.kf-quote-picker__search-input::placeholder{color:var(--kf-color-text-muted)}.kf-quote-picker__chip{flex:none;padding:var(--kf-space-sm) var(--kf-space-md);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);background:var(--kf-color-white);color:var(--kf-color-text);font:inherit;font-size:.8rem;font-weight:600;cursor:pointer}.kf-quote-picker__chip--active{background:var(--kf-color-primary);border-color:var(--kf-color-primary);color:var(--kf-color-white)}.kf-quote-picker__results-wrap{position:relative}.kf-quote-picker__results{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--kf-space-sm);max-height:340px;overflow-y:auto}@media(max-width:900px){.kf-quote-picker__results{grid-template-columns:1fr}}.kf-quote-picker__result{box-sizing:border-box;display:flex;align-items:center;gap:var(--kf-space-sm);padding:var(--kf-space-sm) var(--kf-space-md);border:1px solid transparent;border-radius:var(--kf-radius-sm);background:var(--kf-color-white);cursor:pointer;text-align:left;font:inherit;min-width:0;flex-wrap:wrap;row-gap:2px}.kf-quote-picker__result-fields{display:flex;align-items:center;gap:var(--kf-space-sm);min-width:0;flex:1}.kf-quote-picker__result:hover{border-color:var(--kf-color-border)}.kf-quote-picker__result--active{border-color:var(--kf-color-primary);background:var(--kf-color-primary-soft)}.kf-quote-picker__result-field{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.85rem;color:var(--kf-color-text)}.kf-quote-picker__result-field--title{flex:none;min-width:92px;font-weight:700;color:var(--kf-color-ink)}.kf-quote-picker__result-field--primary{flex:1;min-width:0}@media(max-width:900px){.kf-quote-picker__result-fields{flex-basis:100%;flex-wrap:wrap;row-gap:2px;padding-left:calc(36px + var(--kf-space-sm))}.kf-quote-picker__result-field--primary{flex:none;min-width:0;max-width:100%}}.kf-quote-picker__fade{position:absolute;left:0;right:0;bottom:0;height:36px;background:linear-gradient(to top,var(--kf-color-surface),transparent);pointer-events:none}.kf-quote-picker__see-all{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:var(--kf-space-sm);width:100%;margin-top:var(--kf-space-sm);padding:var(--kf-space-sm);border:1.5px dashed var(--kf-color-primary);border-radius:var(--kf-radius-sm);background:var(--kf-color-white);color:var(--kf-color-primary);font:inherit;font-size:.85rem;font-weight:600;cursor:pointer}.kf-quote-picker__see-all:hover{background:var(--kf-color-primary-soft)}.kf-quote-picker__empty{grid-column:1 / -1;padding:var(--kf-space-md);text-align:center;color:var(--kf-color-text-muted);font-size:.85rem;margin:0}.kf-quote-picker__modal-toolbar{display:flex;flex-direction:column;gap:var(--kf-space-sm);margin-bottom:var(--kf-space-md)}.kf-quote-picker__modal-filters{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);flex-wrap:wrap}.kf-quote-picker__modal-chips{display:flex;gap:var(--kf-space-sm);flex-wrap:wrap}.kf-quote-picker__sort{position:relative;flex:none}.kf-quote-picker__sort-trigger{display:flex;align-items:center;gap:var(--kf-space-sm);padding:6px var(--kf-space-md);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);background:var(--kf-color-white);color:var(--kf-color-text);font:inherit;font-size:.8rem;font-weight:600;cursor:pointer}.kf-quote-picker__sort-trigger:hover{border-color:var(--kf-color-border-strong)}.kf-quote-picker__sort-panel{position:absolute;top:calc(100% + 4px);right:0;z-index:1;min-width:180px;padding:var(--kf-space-xs) 0;background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);box-shadow:var(--kf-shadow-md)}.kf-quote-picker__sort-option{display:block;width:100%;padding:var(--kf-space-sm) var(--kf-space-md);border:none;background:transparent;color:var(--kf-color-text);font:inherit;font-size:.85rem;text-align:left;cursor:pointer}.kf-quote-picker__sort-option:hover{background:var(--kf-color-primary-soft)}.kf-quote-picker__sort-option--active{color:var(--kf-color-primary);font-weight:600}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }, { kind: "component", type: Modal, selector: "kf-modal", inputs: ["title", "open", "dismissible", "width"], outputs: ["openChange"] }, { kind: "component", type: DataTable, selector: "kf-data-table", inputs: ["columns", "rows", "loading", "rowKey", "flush", "cardable", "defaultView", "render", "cellTemplates", "density", "rowClickable", "pageSize", "pageSizeOptions", "itemLabel", "sort"], outputs: ["rowClick", "pageChange", "pageSizeChange", "sortChange"] }, { kind: "component", type: EmptyState, selector: "kf-empty-state", inputs: ["icon", "tone"] }, { kind: "component", type: Pagination, selector: "kf-pagination", inputs: ["page", "pages", "pageSizeOptions", "pageSize"], outputs: ["pageChange", "pageSizeChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: QuotePicker, isStandalone: true, selector: "kf-quote-picker", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, selectedId: { classPropertyName: "selectedId", publicName: "selectedId", isSignal: true, isRequired: false, transformFunction: null }, idKey: { classPropertyName: "idKey", publicName: "idKey", isSignal: true, isRequired: true, transformFunction: null }, cellTemplates: { classPropertyName: "cellTemplates", publicName: "cellTemplates", isSignal: true, isRequired: false, transformFunction: null }, chips: { classPropertyName: "chips", publicName: "chips", isSignal: true, isRequired: false, transformFunction: null }, sortOptions: { classPropertyName: "sortOptions", publicName: "sortOptions", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, expandThreshold: { classPropertyName: "expandThreshold", publicName: "expandThreshold", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, placeholderIcon: { classPropertyName: "placeholderIcon", publicName: "placeholderIcon", isSignal: true, isRequired: false, transformFunction: null }, modalLayout: { classPropertyName: "modalLayout", publicName: "modalLayout", isSignal: true, isRequired: false, transformFunction: null }, searchAriaLabel: { classPropertyName: "searchAriaLabel", publicName: "searchAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingLabel: { classPropertyName: "loadingLabel", publicName: "loadingLabel", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null }, inlinePanel: { classPropertyName: "inlinePanel", publicName: "inlinePanel", isSignal: true, isRequired: false, transformFunction: null }, modalWidth: { classPropertyName: "modalWidth", publicName: "modalWidth", isSignal: true, isRequired: false, transformFunction: null }, itemLabels: { classPropertyName: "itemLabels", publicName: "itemLabels", isSignal: true, isRequired: false, transformFunction: null }, allChipLabel: { classPropertyName: "allChipLabel", publicName: "allChipLabel", isSignal: true, isRequired: false, transformFunction: null }, chipsAriaLabel: { classPropertyName: "chipsAriaLabel", publicName: "chipsAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, listHeader: { classPropertyName: "listHeader", publicName: "listHeader", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sort: "sortChange", open: "openChange", selectedIdChange: "selectedIdChange", retry: "retry", expandToModal: "expandToModal" }, viewQueries: [{ propertyName: "previewScrollEl", first: true, predicate: ["previewScroll"], descendants: true, isSignal: true }, { propertyName: "modalListEl", first: true, predicate: ["modalList"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (variant() === 'inline') {\n  <div class=\"kf-quote-picker__inline\">\n    <!-- Trigger colapsado. `default`: tarjeta a ancho completo con miniatura\n         (hist\u00F3rico). `compact`: control de barra de herramientas de alto fijo,\n         sin miniatura. Con `inlinePanel` en false abre directo el modal. -->\n    @if (triggerSize() === 'compact' && loading()) {\n      <!-- Mismo alto que el trigger real: la barra no salta al llegar los datos. -->\n      <div\n        class=\"kf-quote-picker__trigger kf-quote-picker__trigger--compact kf-quote-picker__trigger--loading\"\n        role=\"status\"\n        aria-busy=\"true\"\n      >\n        <span class=\"kf-quote-picker__sr-only\">{{ loadingLabel() }}</span>\n        <span class=\"kf-quote-picker__compact\" aria-hidden=\"true\">\n          <kf-skeleton width=\"35%\" height=\"12px\" />\n          <kf-skeleton width=\"65%\" height=\"12px\" />\n        </span>\n      </div>\n    } @else {\n      <button\n        type=\"button\"\n        class=\"kf-quote-picker__trigger\"\n        [class.kf-quote-picker__trigger--compact]=\"triggerSize() === 'compact'\"\n        [attr.aria-expanded]=\"inlinePanel() ? expanded() : open()\"\n        [attr.aria-haspopup]=\"inlinePanel() ? null : 'dialog'\"\n        (click)=\"onTriggerClick()\"\n      >\n        @if (triggerSize() === 'compact') {\n          <!-- Nombre accesible = texto visible con un prefijo y comas solo\n             para lectores de pantalla: \"Cambiar cotizaci\u00F3n. Actual: <id>,\n             <estado>, <modelo>\". -->\n          <span class=\"kf-quote-picker__sr-only\">{{ title() }}. Actual: </span>\n          @if (selectedItem(); as item) {\n            <span class=\"kf-quote-picker__compact\">\n              <span class=\"kf-quote-picker__compact-line\">\n                @if (titleColumn(); as titleCol) {\n                  <span class=\"kf-quote-picker__compact-id\">{{ cellValue(item, titleCol) }}</span>\n                }\n                @for (col of statusColumns(); track col.key) {\n                  <span class=\"kf-quote-picker__sr-only\">, </span>\n                  <span class=\"kf-quote-picker__compact-status\">\n                    <ng-container\n                      *ngTemplateOutlet=\"cell; context: { $implicit: item, column: col, index: 0 }\"\n                    />\n                  </span>\n                }\n              </span>\n              @if (primaryFieldColumn(); as primary) {\n                <span class=\"kf-quote-picker__compact-line\">\n                  <span class=\"kf-quote-picker__sr-only\">, </span>\n                  <span class=\"kf-quote-picker__compact-primary\">{{\n                    cellValue(item, primary)\n                  }}</span>\n                </span>\n              }\n            </span>\n          } @else {\n            <span class=\"kf-quote-picker__compact kf-quote-picker__trigger-summary--empty\"\n              >Sin selecci\u00F3n</span\n            >\n          }\n          <kf-icon\n            name=\"chevron-down\"\n            size=\"sm\"\n            class=\"kf-quote-picker__chevron\"\n            [class.kf-quote-picker__chevron--open]=\"inlinePanel() && expanded()\"\n          />\n        } @else {\n          <span class=\"kf-quote-picker__thumb\">\n            @if (mediaColumn(); as media) {\n              @if (cellTemplates()?.[media.key]; as template) {\n                <ng-container\n                  [ngTemplateOutlet]=\"template\"\n                  [ngTemplateOutletContext]=\"{ $implicit: selectedItem(), index: 0 }\"\n                />\n              }\n            } @else {\n              <kf-icon [name]=\"placeholderIcon()\" size=\"md\" />\n            }\n          </span>\n          @if (selectedItem(); as item) {\n            <span class=\"kf-quote-picker__trigger-summary\">\n              @if (titleColumn(); as title) {\n                <span\n                  class=\"kf-quote-picker__trigger-field kf-quote-picker__trigger-field--title\"\n                  >{{ cellValue(item, title) }}</span\n                >\n              }\n              <!--\n              En mobile solo se muestra el t\u00EDtulo (ID) \u2014 mostrar los 5 campos\n              en una sola l\u00EDnea de ~90px de ancho real corta el texto sin\n              elipsis a mitad del segundo campo (bug real medido:\n              scrollWidth=519 vs. clientWidth=87 en 390px). El resto de los\n              campos siguen disponibles en el panel expandido y en el modal,\n              donde s\u00ED hay espacio horizontal.\n            -->\n              @if (!isMobile()) {\n                @for (col of fieldColumns(); track col.key) {\n                  <span class=\"kf-quote-picker__trigger-sep\" aria-hidden=\"true\">\u00B7</span>\n                  <span class=\"kf-quote-picker__trigger-field\">{{ cellValue(item, col) }}</span>\n                }\n              }\n            </span>\n          } @else {\n            <span class=\"kf-quote-picker__trigger-summary kf-quote-picker__trigger-summary--empty\"\n              >Sin selecci\u00F3n</span\n            >\n          }\n          <span class=\"kf-quote-picker__trigger-action\">\n            {{ inlinePanel() && expanded() ? 'Cerrar' : title() }}\n            <kf-icon\n              name=\"chevron-down\"\n              size=\"sm\"\n              class=\"kf-quote-picker__chevron\"\n              [class.kf-quote-picker__chevron--open]=\"inlinePanel() && expanded()\"\n            />\n          </span>\n        }\n      </button>\n    }\n\n    @if (inlinePanel() && expanded()) {\n      <div class=\"kf-quote-picker__panel\">\n        <div class=\"kf-quote-picker__toolbar\">\n          <div class=\"kf-quote-picker__search\">\n            <kf-icon name=\"search\" size=\"sm\" />\n            <input\n              type=\"text\"\n              class=\"kf-quote-picker__search-input\"\n              [placeholder]=\"searchPlaceholder()\"\n              [attr.aria-label]=\"resolvedSearchAriaLabel()\"\n              [value]=\"searchQuery()\"\n              (input)=\"onSearchInput($event)\"\n            />\n          </div>\n          @for (chip of chips(); track chip.value) {\n            <button\n              type=\"button\"\n              class=\"kf-quote-picker__chip\"\n              [class.kf-quote-picker__chip--active]=\"activeChip() === chip.value\"\n              [attr.aria-pressed]=\"activeChip() === chip.value\"\n              (click)=\"selectChip(chip.value)\"\n            >\n              {{ chip.label }} ({{ chip.count }})\n            </button>\n          }\n        </div>\n\n        <div class=\"kf-quote-picker__results-wrap\">\n          <div #previewScroll class=\"kf-quote-picker__results\" role=\"listbox\">\n            @for (item of previewItems(); track trackItem(item, $index)) {\n              <button\n                type=\"button\"\n                class=\"kf-quote-picker__result\"\n                [class.kf-quote-picker__result--active]=\"idKey()(item) === selectedId()\"\n                role=\"option\"\n                [attr.aria-selected]=\"idKey()(item) === selectedId()\"\n                (click)=\"select(item)\"\n                (keydown)=\"onItemKeydown($event, item)\"\n              >\n                <span class=\"kf-quote-picker__thumb kf-quote-picker__thumb--sm\">\n                  @if (mediaColumn(); as media) {\n                    @if (cellTemplates()?.[media.key]; as template) {\n                      <ng-container\n                        [ngTemplateOutlet]=\"template\"\n                        [ngTemplateOutletContext]=\"{ $implicit: item, index: $index }\"\n                      />\n                    }\n                  } @else {\n                    <kf-icon [name]=\"placeholderIcon()\" size=\"sm\" />\n                  }\n                </span>\n                @if (titleColumn(); as title) {\n                  <span\n                    class=\"kf-quote-picker__result-field kf-quote-picker__result-field--title\"\n                    >{{ cellValue(item, title) }}</span\n                  >\n                }\n                <!--\n                  Wrapper propio (no los spans sueltos) para los campos\n                  secundarios: en mobile necesita saltar de l\u00EDnea COMPLETO\n                  (mismo criterio que \"unidades\" no debe competir con\n                  \"modelo\" en la primera l\u00EDnea) \u2014 `flex-basis: 100%` en un\n                  solo elemento fuerza ese salto sin tener que asumir cu\u00E1l\n                  de los N campos gen\u00E9ricos es el m\u00E1s corto o el m\u00E1s largo.\n                -->\n                <span class=\"kf-quote-picker__result-fields\">\n                  @for (col of fieldColumns(); track col.key; let first = $first) {\n                    <span\n                      class=\"kf-quote-picker__result-field\"\n                      [class.kf-quote-picker__result-field--primary]=\"first\"\n                      >{{ cellValue(item, col) }}</span\n                    >\n                  }\n                </span>\n              </button>\n            } @empty {\n              <p class=\"kf-quote-picker__empty\">Sin resultados para esta b\u00FAsqueda.</p>\n            }\n          </div>\n          @if (canFadeBottom()) {\n            <div class=\"kf-quote-picker__fade\" aria-hidden=\"true\"></div>\n          }\n        </div>\n\n        @if (isHighVolume()) {\n          <button type=\"button\" class=\"kf-quote-picker__see-all\" (click)=\"onSeeAll()\">\n            Ver las {{ sortedItems().length }} en pantalla completa\n          </button>\n        }\n      </div>\n    }\n  </div>\n}\n\n<!-- Modal: la variante `modal` y el que abre el trigger con `inlinePanel` en\n     false. Zona de filtros FIJA (slot `kf-modal-toolbar`) y lista\n     desplazable (cuerpo del modal). -->\n@if (variant() === 'modal' || !inlinePanel()) {\n  <kf-modal\n    class=\"kf-quote-picker__modal\"\n    [(open)]=\"open\"\n    [title]=\"title()\"\n    [dismissible]=\"true\"\n    [width]=\"modalWidth()\"\n    maxHeight=\"85vh\"\n    fullscreenOnMobile\n    initialFocus=\".kf-quote-picker__modal-search\"\n  >\n    <p kf-modal-meta class=\"kf-quote-picker__count\" aria-live=\"polite\">{{ resultsLabel() }}</p>\n\n    <div kf-modal-toolbar class=\"kf-quote-picker__filters\">\n      <div class=\"kf-quote-picker__filters-row\">\n        <kf-input\n          class=\"kf-quote-picker__modal-search\"\n          type=\"search\"\n          icon=\"search\"\n          clearable\n          [placeholder]=\"searchPlaceholder()\"\n          [ariaLabel]=\"resolvedSearchAriaLabel()\"\n          [ngModel]=\"searchQuery()\"\n          (ngModelChange)=\"onSearchChange($event)\"\n        />\n        @if (sortOptions().length > 0) {\n          <kf-select\n            class=\"kf-quote-picker__sort\"\n            icon=\"sort\"\n            ariaLabel=\"Ordenar por\"\n            panelTitle=\"Ordenar por\"\n            placeholder=\"Ordenar por\"\n            [options]=\"sortSelectOptions()\"\n            [value]=\"sort() ?? undefined\"\n            (valueChange)=\"onSortChange($event)\"\n          />\n        }\n      </div>\n      @if (chips().length > 0) {\n        <kf-filter-chips\n          class=\"kf-quote-picker__chips\"\n          deselectable\n          [ariaLabel]=\"chipsAriaLabel()\"\n          [options]=\"chipOptions()\"\n          [value]=\"activeChip() ?? ''\"\n          [layout]=\"isNarrowViewport() ? 'scroll' : 'wrap'\"\n          (valueChange)=\"onChipChange($event)\"\n        />\n      }\n    </div>\n\n    <kf-content-state\n      [state]=\"modalState()\"\n      load=\"spinner\"\n      [loadingLabel]=\"loadingLabel()\"\n      [title]=\"error() ?? ''\"\n    >\n      <kf-button actions type=\"button\" variant=\"outline\" icon=\"refresh\" (click)=\"retry.emit()\">\n        Reintentar\n      </kf-button>\n      @if (modalLayout() === 'list') {\n        @if (sortedItems().length > 0) {\n          <div class=\"kf-quote-picker__list-wrap\">\n            <ul\n              #modalList\n              class=\"kf-quote-picker__list\"\n              [style.grid-template-columns]=\"listGridColumns()\"\n            >\n              @if (listHeader()) {\n                <!-- Cabecera visual de columnas: cada fila (bot\u00F3n) ya se anuncia\n                     completa, as\u00ED que para lectores de pantalla ser\u00EDa ruido. -->\n                <li class=\"kf-quote-picker__list-head\" aria-hidden=\"true\">\n                  @if (titleColumn(); as titleCol) {\n                    <span class=\"kf-quote-picker__head-cell kf-quote-picker__cell--title\">\n                      <kf-text as=\"span\" variant=\"overline\">{{ titleCol.label }}</kf-text>\n                    </span>\n                  }\n                  @if (primaryFieldColumn(); as primary) {\n                    <span class=\"kf-quote-picker__head-cell kf-quote-picker__cell--primary\">\n                      <kf-text as=\"span\" variant=\"overline\">{{ primary.label }}</kf-text>\n                    </span>\n                  }\n                  @for (col of restFieldColumns(); track col.key) {\n                    <span\n                      class=\"kf-quote-picker__head-cell kf-quote-picker__cell--field\"\n                      [class.kf-quote-picker__cell--end]=\"isEndAligned(col)\"\n                      [class.kf-quote-picker__cell--center]=\"col.align === 'center'\"\n                    >\n                      <kf-text as=\"span\" variant=\"overline\">{{ col.label }}</kf-text>\n                    </span>\n                  }\n                  @for (col of statusColumns(); track col.key) {\n                    <span class=\"kf-quote-picker__head-cell kf-quote-picker__cell--status\">\n                      <kf-text as=\"span\" variant=\"overline\">{{ col.label }}</kf-text>\n                    </span>\n                  }\n                  <span class=\"kf-quote-picker__head-cell kf-quote-picker__cell--check\"></span>\n                </li>\n              }\n              @for (item of sortedItems(); track trackItem(item, $index); let i = $index) {\n                <li class=\"kf-quote-picker__list-item\">\n                  <button\n                    type=\"button\"\n                    class=\"kf-quote-picker__row\"\n                    [class.kf-quote-picker__row--current]=\"isSelected(item)\"\n                    [attr.aria-current]=\"isSelected(item) ? 'true' : null\"\n                    (click)=\"select(item)\"\n                  >\n                    <span class=\"kf-quote-picker__row-head\">\n                      @if (titleColumn(); as titleCol) {\n                        <span class=\"kf-quote-picker__row-title kf-quote-picker__cell--title\">\n                          <ng-container\n                            *ngTemplateOutlet=\"\n                              cell;\n                              context: { $implicit: item, column: titleCol, index: i }\n                            \"\n                          />\n                        </span>\n                      }\n                      @for (col of statusColumns(); track col.key) {\n                        <span class=\"kf-quote-picker__row-status kf-quote-picker__cell--status\">\n                          <ng-container\n                            *ngTemplateOutlet=\"\n                              cell;\n                              context: { $implicit: item, column: col, index: i }\n                            \"\n                          />\n                        </span>\n                      }\n                    </span>\n                    <span class=\"kf-quote-picker__row-body\">\n                      @if (primaryFieldColumn(); as primary) {\n                        <span\n                          class=\"kf-quote-picker__row-primary kf-quote-picker__cell--primary\"\n                          [attr.title]=\"cellTitle(item, primary)\"\n                        >\n                          <ng-container\n                            *ngTemplateOutlet=\"\n                              cell;\n                              context: { $implicit: item, column: primary, index: i }\n                            \"\n                          />\n                        </span>\n                      }\n                      @for (col of restFieldColumns(); track col.key) {\n                        <span\n                          class=\"kf-quote-picker__row-field kf-quote-picker__cell--field\"\n                          [class.kf-quote-picker__row-field--right]=\"isEndAligned(col)\"\n                          [class.kf-quote-picker__cell--end]=\"isEndAligned(col)\"\n                          [class.kf-quote-picker__cell--center]=\"col.align === 'center'\"\n                          [class.kf-quote-picker__cell--truncate]=\"col.truncate\"\n                          [attr.title]=\"col.truncate ? cellTitle(item, col) : null\"\n                        >\n                          <ng-container\n                            *ngTemplateOutlet=\"\n                              cell;\n                              context: { $implicit: item, column: col, index: i }\n                            \"\n                          />\n                        </span>\n                      }\n                    </span>\n                    <span class=\"kf-quote-picker__row-check kf-quote-picker__cell--check\">\n                      @if (isSelected(item)) {\n                        <kf-icon name=\"check\" size=\"sm\" />\n                      }\n                    </span>\n                  </button>\n                </li>\n              }\n            </ul>\n          </div>\n        } @else {\n          <kf-empty-state icon=\"file\">Sin resultados para esta b\u00FAsqueda.</kf-empty-state>\n        }\n      } @else {\n        <kf-data-table\n          [columns]=\"columns()\"\n          [rows]=\"pagedItems()\"\n          [cardable]=\"true\"\n          [defaultView]=\"isMobile() ? 'cards' : 'table'\"\n          [cellTemplates]=\"cellTemplates()\"\n          [rowKey]=\"rowKeyFn\"\n          [currentRowKey]=\"selectedId()\"\n          (rowClick)=\"onTableRowClick($event)\"\n        >\n          <kf-empty-state empty icon=\"file\">Sin resultados para esta b\u00FAsqueda.</kf-empty-state>\n          @if (sortedItems().length > 0) {\n            <kf-pagination footer [page]=\"page()\" [pages]=\"pages()\" (pageChange)=\"page.set($event)\">\n              {{ sortedItems().length }} resultados\n            </kf-pagination>\n          }\n        </kf-data-table>\n      }\n    </kf-content-state>\n  </kf-modal>\n}\n\n<!-- Celda de la lista compacta: el template del consumidor si existe (badge,\n     monto formateado), si no el valor como texto. -->\n<ng-template #cell let-item let-column=\"column\" let-index=\"index\">\n  @if (cellTemplates()?.[column.key]; as template) {\n    <ng-container\n      [ngTemplateOutlet]=\"template\"\n      [ngTemplateOutletContext]=\"{ $implicit: item, index: index }\"\n    />\n  } @else {\n    {{ cellValue(item, column) }}\n  }\n</ng-template>\n", styles: [":host{display:block;min-width:0;font-family:var(--kf-font-body)}.kf-quote-picker__sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.kf-quote-picker__trigger{box-sizing:border-box;display:flex;align-items:center;gap:var(--kf-space-md);width:100%;padding:var(--kf-space-sm) var(--kf-space-md);background:var(--kf-color-white);border:1.5px solid var(--kf-color-primary);border-radius:var(--kf-radius-md);box-shadow:var(--kf-shadow-sm);cursor:pointer;font:inherit;text-align:left}.kf-quote-picker__trigger:hover{box-shadow:var(--kf-shadow-md)}.kf-quote-picker__trigger:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-quote-picker__thumb{display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none;border-radius:var(--kf-radius-sm);background:var(--kf-color-surface);color:var(--kf-color-gray-400)}.kf-quote-picker__thumb--sm{width:36px;height:36px}.kf-quote-picker__result--active .kf-quote-picker__thumb{background:var(--kf-color-white);color:var(--kf-color-primary)}.kf-quote-picker__trigger-summary{flex:1;min-width:0;display:flex;align-items:baseline;gap:var(--kf-space-xs);overflow:hidden;white-space:nowrap;color:var(--kf-color-ink)}.kf-quote-picker__trigger-summary--empty{color:var(--kf-color-text-muted)}.kf-quote-picker__trigger-field--title{font-family:var(--kf-font-title);font-weight:700;font-size:1.05rem;color:var(--kf-color-ink)}.kf-quote-picker__trigger-field{font-size:.85rem;color:var(--kf-color-text)}.kf-quote-picker__trigger-sep{color:var(--kf-color-border-strong)}.kf-quote-picker__trigger-action{flex:none;display:flex;align-items:center;gap:6px;color:var(--kf-color-primary);font-size:.85rem;font-weight:600}.kf-quote-picker__chevron{transition:transform .14s}.kf-quote-picker__chevron--open{transform:rotate(180deg)}.kf-quote-picker__panel{display:flex;flex-direction:column;gap:var(--kf-space-md);margin-top:var(--kf-space-sm);padding:var(--kf-space-md) var(--kf-space-lg);background:var(--kf-color-surface);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-md)}.kf-quote-picker__toolbar{display:flex;flex-wrap:wrap;gap:var(--kf-space-sm)}.kf-quote-picker__search{flex:1;min-width:200px;display:flex;align-items:center;gap:var(--kf-space-sm);padding:var(--kf-space-sm) var(--kf-space-md);background:var(--kf-color-white);border:1.5px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);color:var(--kf-color-text-muted)}.kf-quote-picker__search:focus-within{border-color:var(--kf-color-primary);box-shadow:var(--kf-shadow-focus)}.kf-quote-picker__search-input{flex:1;border:none;outline:none;background:transparent;font:inherit;color:var(--kf-color-ink)}.kf-quote-picker__search-input::placeholder{color:var(--kf-color-text-muted)}.kf-quote-picker__chip{flex:none;padding:var(--kf-space-sm) var(--kf-space-md);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);background:var(--kf-color-white);color:var(--kf-color-text);font:inherit;font-size:.8rem;font-weight:600;cursor:pointer}.kf-quote-picker__chip--active{background:var(--kf-color-primary);border-color:var(--kf-color-primary);color:var(--kf-color-white)}.kf-quote-picker__results-wrap{position:relative}.kf-quote-picker__results{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--kf-space-sm);max-height:340px;overflow-y:auto}@media(max-width:900px){.kf-quote-picker__results{grid-template-columns:1fr}}.kf-quote-picker__result{box-sizing:border-box;display:flex;align-items:center;gap:var(--kf-space-sm);padding:var(--kf-space-sm) var(--kf-space-md);border:1px solid transparent;border-radius:var(--kf-radius-sm);background:var(--kf-color-white);cursor:pointer;text-align:left;font:inherit;min-width:0;flex-wrap:wrap;row-gap:2px}.kf-quote-picker__result-fields{display:flex;align-items:center;gap:var(--kf-space-sm);min-width:0;flex:1}.kf-quote-picker__result:hover{border-color:var(--kf-color-border)}.kf-quote-picker__result--active{border-color:var(--kf-color-primary);background:var(--kf-color-primary-soft)}.kf-quote-picker__result-field{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.85rem;color:var(--kf-color-text)}.kf-quote-picker__result-field--title{flex:none;min-width:92px;font-weight:700;color:var(--kf-color-ink)}.kf-quote-picker__result-field--primary{flex:1;min-width:0}@media(max-width:900px){.kf-quote-picker__result-fields{flex-basis:100%;flex-wrap:wrap;row-gap:2px;padding-left:calc(36px + var(--kf-space-sm))}.kf-quote-picker__result-field--primary{flex:none;min-width:0;max-width:100%}}.kf-quote-picker__fade{position:absolute;left:0;right:0;bottom:0;height:36px;background:linear-gradient(to top,var(--kf-color-surface),transparent);pointer-events:none}.kf-quote-picker__see-all{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:var(--kf-space-sm);width:100%;margin-top:var(--kf-space-sm);padding:var(--kf-space-sm);border:1.5px dashed var(--kf-color-primary);border-radius:var(--kf-radius-sm);background:var(--kf-color-white);color:var(--kf-color-primary);font:inherit;font-size:.85rem;font-weight:600;cursor:pointer}.kf-quote-picker__see-all:hover{background:var(--kf-color-primary-soft)}.kf-quote-picker__empty{grid-column:1 / -1;padding:var(--kf-space-md);text-align:center;color:var(--kf-color-text-muted);font-size:.85rem;margin:0}.kf-quote-picker__trigger--compact{position:relative;height:var(--kf-quote-picker-trigger-height, 48px);min-width:0;gap:var(--kf-space-sm);padding:0 var(--kf-space-sm) 0 var(--kf-space-md);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);box-shadow:none;transition:border-color .14s,box-shadow .14s}.kf-quote-picker__trigger--compact:hover{border-color:var(--kf-color-border-strong);box-shadow:none}.kf-quote-picker__trigger--compact:focus-visible{border-color:var(--kf-color-primary);box-shadow:var(--kf-shadow-focus)}.kf-quote-picker__compact{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px;line-height:1.25}.kf-quote-picker__compact-line{display:flex;align-items:center;gap:var(--kf-space-sm);min-width:0}.kf-quote-picker__compact-id{flex:none;font-family:var(--kf-font-mono);font-size:var(--kf-font-size-body-sm);font-weight:700;color:var(--kf-color-ink)}.kf-quote-picker__compact-status{display:flex;min-width:0;overflow:hidden}.kf-quote-picker__compact-primary{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--kf-font-size-body-sm);color:var(--kf-color-text)}.kf-quote-picker__trigger--loading{display:flex;align-items:center;cursor:progress}.kf-quote-picker__trigger--compact .kf-quote-picker__chevron{flex:none;color:var(--kf-color-text)}@media(prefers-reduced-motion:reduce){.kf-quote-picker__trigger--compact{transition:none}}.kf-quote-picker__count{margin:0;font-size:var(--kf-font-size-body-sm);font-variant-numeric:tabular-nums;color:var(--kf-color-text)}.kf-quote-picker__count:empty{display:none}.kf-quote-picker__filters{container:kf-quote-picker-filters / inline-size;display:flex;flex-direction:column;gap:var(--kf-space-sm)}.kf-quote-picker__filters-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--kf-space-sm)}.kf-quote-picker__modal-search{flex:1 1 240px;min-width:240px}.kf-quote-picker__sort{flex:none}@container kf-quote-picker-filters (max-width: 520px){.kf-quote-picker__modal-search{flex-basis:100%;min-width:0}.kf-quote-picker__sort{width:100%}}.kf-quote-picker__list-wrap{container:kf-quote-picker-list / inline-size}.kf-quote-picker__list{display:grid;column-gap:var(--kf-space-md);row-gap:2px;margin:0;padding:0 0 2px;list-style:none}.kf-quote-picker__list-head,.kf-quote-picker__list-item{display:grid;grid-column:1 / -1;grid-template-columns:subgrid}.kf-quote-picker__list-head{position:sticky;top:0;z-index:1;align-items:end;padding:var(--kf-space-xs) var(--kf-space-md) var(--kf-space-sm);border-bottom:1px solid var(--kf-color-border);background:var(--kf-color-white)}.kf-quote-picker__row{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;align-items:center;box-sizing:border-box;width:100%;min-height:52px;padding:var(--kf-space-sm) var(--kf-space-md);border:1px solid transparent;border-radius:var(--kf-radius-sm);background:var(--kf-color-white);color:var(--kf-color-text);font:inherit;font-size:var(--kf-font-size-body-sm);text-align:start;cursor:pointer;scroll-margin-top:48px;scroll-margin-bottom:var(--kf-space-sm)}.kf-quote-picker__row:hover{border-color:var(--kf-color-border);background:var(--kf-color-surface)}.kf-quote-picker__row:focus-visible{outline:2px solid var(--kf-color-primary);outline-offset:-2px}.kf-quote-picker__row--current,.kf-quote-picker__row--current:hover{border-color:var(--kf-color-primary);background:var(--kf-color-primary-soft)}.kf-quote-picker__row-head,.kf-quote-picker__row-body{display:contents}.kf-quote-picker__head-cell{min-width:0;white-space:nowrap}.kf-quote-picker__cell--title{order:0;white-space:nowrap}.kf-quote-picker__row-title{font-family:var(--kf-font-mono);font-weight:700;color:var(--kf-color-ink)}.kf-quote-picker__cell--primary{order:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-quote-picker__row-primary{color:var(--kf-color-ink)}.kf-quote-picker__cell--field{order:2;min-width:0;white-space:nowrap;font-variant-numeric:tabular-nums}.kf-quote-picker__cell--truncate{overflow:hidden;text-overflow:ellipsis}.kf-quote-picker__cell--end{justify-self:end;text-align:end}.kf-quote-picker__cell--center{justify-self:center;text-align:center}.kf-quote-picker__row-field--right{font-weight:600;color:var(--kf-color-ink)}.kf-quote-picker__cell--status{order:3;display:flex;min-width:0;overflow:hidden}.kf-quote-picker__cell--check{order:4;display:flex;justify-content:center;color:var(--kf-color-primary)}@container kf-quote-picker-list (max-width: 560px){.kf-quote-picker__list{display:flex;flex-direction:column}.kf-quote-picker__list-head{display:none}.kf-quote-picker__list-item{display:block}.kf-quote-picker__row{grid-template-columns:minmax(0,1fr) 1.25rem;grid-template-areas:\"head check\" \"body check\";column-gap:var(--kf-space-sm);row-gap:var(--kf-space-xs);padding:var(--kf-space-sm);scroll-margin-top:var(--kf-space-sm)}.kf-quote-picker__row-head,.kf-quote-picker__row-body{display:flex;align-items:center;gap:var(--kf-space-sm);min-width:0}.kf-quote-picker__row-head{grid-area:head;justify-content:space-between}.kf-quote-picker__row-body{grid-area:body;flex-wrap:wrap;row-gap:var(--kf-space-xs)}.kf-quote-picker__row-body .kf-quote-picker__cell--end{margin-left:auto}.kf-quote-picker__row-check{grid-area:check}.kf-quote-picker__cell--status{flex:0 1 auto;justify-content:flex-end;max-width:65%}.kf-quote-picker__cell--primary{flex:1 1 100%;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;white-space:normal;overflow-wrap:anywhere}.kf-quote-picker__cell--field{flex:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Button, selector: "kf-button", inputs: ["variant", "size", "shape", "disabled", "type", "icon", "block", "loading", "ariaLabel", "ariaExpanded", "ariaPressed", "ariaHaspopup"] }, { kind: "component", type: ContentState, selector: "kf-content-state", inputs: ["state", "load", "title", "subtitle", "loadingLabel", "loadingTemplate", "loadingPreset"] }, { kind: "component", type: FilterChips, selector: "kf-filter-chips", inputs: ["options", "value", "ariaLabel", "layout", "deselectable"], outputs: ["valueChange"] }, { kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }, { kind: "component", type: Input, selector: "kf-input", inputs: ["label", "required", "icon", "suffix", "hint", "invalid", "errorMessage", "disabled", "readonly", "type", "placeholder", "autocomplete", "name", "inputmode", "min", "max", "step", "maxlength", "toggleable", "ariaLabel", "clearable", "clearLabel"], outputs: ["cleared"] }, { kind: "component", type: Modal, selector: "kf-modal", inputs: ["title", "open", "dismissible", "width", "maxHeight", "fullscreenOnMobile", "initialFocus"], outputs: ["openChange"] }, { kind: "component", type: DataTable, selector: "kf-data-table", inputs: ["columns", "rows", "loading", "skeletonRows", "rowKey", "flush", "cardable", "defaultView", "showViewToggle", "cardMinWidth", "render", "cellTemplates", "density", "rowClickable", "cellAriaLabel", "ariaLabel", "currentRowKey", "pageSize", "pageSizeOptions", "page", "keepPageOnRowsChange", "itemLabel", "sort", "view"], outputs: ["rowClick", "cellClick", "pageChange", "pageSizeChange", "sortChange", "viewChange"] }, { kind: "component", type: EmptyState, selector: "kf-empty-state", inputs: ["icon", "tone", "variant", "title"] }, { kind: "component", type: Pagination, selector: "kf-pagination", inputs: ["page", "pages", "pageSizeOptions", "pageSize"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: Select, selector: "kf-select", inputs: ["label", "options", "value", "placeholder", "disabled", "invalid", "errorMessage", "variant", "width", "searchable", "searchThreshold", "ariaLabel", "icon", "panelTitle", "panelWidth"], outputs: ["valueChange"] }, { kind: "component", type: Skeleton, selector: "kf-skeleton", inputs: ["variant", "width", "height"] }, { kind: "component", type: Text, selector: "kf-text", inputs: ["as", "variant", "tone"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: QuotePicker, decorators: [{
             type: Component,
-            args: [{ selector: 'kf-quote-picker', imports: [NgTemplateOutlet, Icon, Modal, DataTable, EmptyState, Pagination], template: "@if (variant() === 'inline') {\n  <div class=\"kf-quote-picker__inline\">\n    <!-- Trigger colapsado (default): ancho completo, nunca una caja angosta. -->\n    <button\n      type=\"button\"\n      class=\"kf-quote-picker__trigger\"\n      [attr.aria-expanded]=\"expanded()\"\n      (click)=\"toggleExpandedPanel()\"\n    >\n      <span class=\"kf-quote-picker__thumb\">\n        @if (mediaColumn(); as media) {\n          @if (cellTemplates()?.[media.key]; as template) {\n            <ng-container\n              [ngTemplateOutlet]=\"template\"\n              [ngTemplateOutletContext]=\"{ $implicit: selectedItem(), index: 0 }\"\n            />\n          }\n        } @else {\n          <kf-icon [name]=\"placeholderIcon()\" size=\"md\" />\n        }\n      </span>\n      @if (selectedItem(); as item) {\n        <span class=\"kf-quote-picker__trigger-summary\">\n          @if (titleColumn(); as title) {\n            <span class=\"kf-quote-picker__trigger-field kf-quote-picker__trigger-field--title\">{{\n              cellValue(item, title)\n            }}</span>\n          }\n          <!--\n            En mobile solo se muestra el t\u00EDtulo (ID) \u2014 mostrar los 5 campos\n            en una sola l\u00EDnea de ~90px de ancho real corta el texto sin\n            elipsis a mitad del segundo campo (bug real medido:\n            scrollWidth=519 vs. clientWidth=87 en 390px). El resto de los\n            campos siguen disponibles en el panel expandido y en el modal,\n            donde s\u00ED hay espacio horizontal.\n          -->\n          @if (!isMobile()) {\n            @for (col of fieldColumns(); track col.key) {\n              <span class=\"kf-quote-picker__trigger-sep\" aria-hidden=\"true\">\u00B7</span>\n              <span class=\"kf-quote-picker__trigger-field\">{{ cellValue(item, col) }}</span>\n            }\n          }\n        </span>\n      } @else {\n        <span class=\"kf-quote-picker__trigger-summary kf-quote-picker__trigger-summary--empty\"\n          >Sin selecci\u00F3n</span\n        >\n      }\n      <span class=\"kf-quote-picker__trigger-action\">\n        {{ expanded() ? 'Cerrar' : title() }}\n        <kf-icon\n          name=\"chevron-down\"\n          size=\"sm\"\n          class=\"kf-quote-picker__chevron\"\n          [class.kf-quote-picker__chevron--open]=\"expanded()\"\n        />\n      </span>\n    </button>\n\n    @if (expanded()) {\n      <div class=\"kf-quote-picker__panel\">\n        <div class=\"kf-quote-picker__toolbar\">\n          <div class=\"kf-quote-picker__search\">\n            <kf-icon name=\"search\" size=\"sm\" />\n            <input\n              type=\"text\"\n              class=\"kf-quote-picker__search-input\"\n              [placeholder]=\"searchPlaceholder()\"\n              [value]=\"searchQuery()\"\n              (input)=\"onSearchInput($event)\"\n            />\n          </div>\n          @for (chip of chips(); track chip.value) {\n            <button\n              type=\"button\"\n              class=\"kf-quote-picker__chip\"\n              [class.kf-quote-picker__chip--active]=\"activeChip() === chip.value\"\n              (click)=\"selectChip(chip.value)\"\n            >\n              {{ chip.label }} ({{ chip.count }})\n            </button>\n          }\n        </div>\n\n        <div class=\"kf-quote-picker__results-wrap\">\n          <div #previewScroll class=\"kf-quote-picker__results\" role=\"listbox\">\n            @for (item of previewItems(); track trackItem(item, $index)) {\n              <button\n                type=\"button\"\n                class=\"kf-quote-picker__result\"\n                [class.kf-quote-picker__result--active]=\"idKey()(item) === selectedId()\"\n                role=\"option\"\n                [attr.aria-selected]=\"idKey()(item) === selectedId()\"\n                (click)=\"select(item)\"\n                (keydown)=\"onItemKeydown($event, item)\"\n              >\n                <span class=\"kf-quote-picker__thumb kf-quote-picker__thumb--sm\">\n                  @if (mediaColumn(); as media) {\n                    @if (cellTemplates()?.[media.key]; as template) {\n                      <ng-container\n                        [ngTemplateOutlet]=\"template\"\n                        [ngTemplateOutletContext]=\"{ $implicit: item, index: $index }\"\n                      />\n                    }\n                  } @else {\n                    <kf-icon [name]=\"placeholderIcon()\" size=\"sm\" />\n                  }\n                </span>\n                @if (titleColumn(); as title) {\n                  <span\n                    class=\"kf-quote-picker__result-field kf-quote-picker__result-field--title\"\n                    >{{ cellValue(item, title) }}</span\n                  >\n                }\n                <!--\n                  Wrapper propio (no los spans sueltos) para los campos\n                  secundarios: en mobile necesita saltar de l\u00EDnea COMPLETO\n                  (mismo criterio que \"unidades\" no debe competir con\n                  \"modelo\" en la primera l\u00EDnea) \u2014 `flex-basis: 100%` en un\n                  solo elemento fuerza ese salto sin tener que asumir cu\u00E1l\n                  de los N campos gen\u00E9ricos es el m\u00E1s corto o el m\u00E1s largo.\n                -->\n                <span class=\"kf-quote-picker__result-fields\">\n                  @for (col of fieldColumns(); track col.key; let first = $first) {\n                    <span\n                      class=\"kf-quote-picker__result-field\"\n                      [class.kf-quote-picker__result-field--primary]=\"first\"\n                      >{{ cellValue(item, col) }}</span\n                    >\n                  }\n                </span>\n              </button>\n            } @empty {\n              <p class=\"kf-quote-picker__empty\">Sin resultados para esta b\u00FAsqueda.</p>\n            }\n          </div>\n          @if (canFadeBottom()) {\n            <div class=\"kf-quote-picker__fade\" aria-hidden=\"true\"></div>\n          }\n        </div>\n\n        @if (isHighVolume()) {\n          <button type=\"button\" class=\"kf-quote-picker__see-all\" (click)=\"onSeeAll()\">\n            Ver las {{ sortedItems().length }} en pantalla completa\n          </button>\n        }\n      </div>\n    }\n  </div>\n} @else {\n  <kf-modal [(open)]=\"open\" [title]=\"title()\" [dismissible]=\"true\">\n    <div class=\"kf-quote-picker__modal-toolbar\">\n      <div class=\"kf-quote-picker__search\">\n        <kf-icon name=\"search\" size=\"sm\" />\n        <input\n          type=\"text\"\n          class=\"kf-quote-picker__search-input\"\n          [placeholder]=\"searchPlaceholder()\"\n          [value]=\"searchQuery()\"\n          (input)=\"onSearchInput($event)\"\n        />\n      </div>\n      <div class=\"kf-quote-picker__modal-filters\">\n        <div class=\"kf-quote-picker__modal-chips\">\n          @for (chip of chips(); track chip.value) {\n            <button\n              type=\"button\"\n              class=\"kf-quote-picker__chip\"\n              [class.kf-quote-picker__chip--active]=\"activeChip() === chip.value\"\n              (click)=\"selectChip(chip.value)\"\n            >\n              {{ chip.label }} ({{ chip.count }})\n            </button>\n          }\n        </div>\n        @if (sortOptions().length > 0) {\n          <div class=\"kf-quote-picker__sort\">\n            <button\n              type=\"button\"\n              class=\"kf-quote-picker__sort-trigger\"\n              [attr.aria-expanded]=\"sortOpen()\"\n              (click)=\"toggleSort()\"\n            >\n              <kf-icon name=\"sort\" size=\"sm\" />\n              {{ sortLabel() }}\n              <kf-icon name=\"chevron-down\" size=\"sm\" />\n            </button>\n            @if (sortOpen()) {\n              <div class=\"kf-quote-picker__sort-panel\">\n                @for (option of sortOptions(); track option.value) {\n                  <button\n                    type=\"button\"\n                    class=\"kf-quote-picker__sort-option\"\n                    [class.kf-quote-picker__sort-option--active]=\"sort() === option.value\"\n                    (click)=\"setSort(option.value)\"\n                  >\n                    {{ option.label }}\n                  </button>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n\n    <kf-data-table\n      [columns]=\"columns()\"\n      [rows]=\"pagedItems()\"\n      [cardable]=\"true\"\n      [defaultView]=\"isMobile() ? 'cards' : 'table'\"\n      [cellTemplates]=\"cellTemplates()\"\n      [rowKey]=\"rowKeyFn\"\n      (rowClick)=\"onTableRowClick($event)\"\n    >\n      <kf-empty-state empty icon=\"file\">Sin resultados para esta b\u00FAsqueda.</kf-empty-state>\n      @if (sortedItems().length > 0) {\n        <kf-pagination footer [page]=\"page()\" [pages]=\"pages()\" (pageChange)=\"page.set($event)\">\n          {{ sortedItems().length }} resultados\n        </kf-pagination>\n      }\n    </kf-data-table>\n  </kf-modal>\n}\n", styles: [":host{display:block;font-family:var(--kf-font-body)}.kf-quote-picker__trigger{box-sizing:border-box;display:flex;align-items:center;gap:var(--kf-space-md);width:100%;padding:var(--kf-space-sm) var(--kf-space-md);background:var(--kf-color-white);border:1.5px solid var(--kf-color-primary);border-radius:var(--kf-radius-md);box-shadow:var(--kf-shadow-sm);cursor:pointer;font:inherit;text-align:left}.kf-quote-picker__trigger:hover{box-shadow:var(--kf-shadow-md)}.kf-quote-picker__trigger:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-quote-picker__thumb{display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none;border-radius:var(--kf-radius-sm);background:var(--kf-color-surface);color:var(--kf-color-gray-400)}.kf-quote-picker__thumb--sm{width:36px;height:36px}.kf-quote-picker__result--active .kf-quote-picker__thumb{background:var(--kf-color-white);color:var(--kf-color-primary)}.kf-quote-picker__trigger-summary{flex:1;min-width:0;display:flex;align-items:baseline;gap:var(--kf-space-xs);overflow:hidden;white-space:nowrap;color:var(--kf-color-ink)}.kf-quote-picker__trigger-summary--empty{color:var(--kf-color-text-muted)}.kf-quote-picker__trigger-field--title{font-family:var(--kf-font-title);font-weight:700;font-size:1.05rem;color:var(--kf-color-ink)}.kf-quote-picker__trigger-field{font-size:.85rem;color:var(--kf-color-text)}.kf-quote-picker__trigger-sep{color:var(--kf-color-border-strong)}.kf-quote-picker__trigger-action{flex:none;display:flex;align-items:center;gap:6px;color:var(--kf-color-primary);font-size:.85rem;font-weight:600}.kf-quote-picker__chevron{transition:transform .14s}.kf-quote-picker__chevron--open{transform:rotate(180deg)}.kf-quote-picker__panel{display:flex;flex-direction:column;gap:var(--kf-space-md);margin-top:var(--kf-space-sm);padding:var(--kf-space-md) var(--kf-space-lg);background:var(--kf-color-surface);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-md)}.kf-quote-picker__toolbar{display:flex;flex-wrap:wrap;gap:var(--kf-space-sm)}.kf-quote-picker__search{flex:1;min-width:200px;display:flex;align-items:center;gap:var(--kf-space-sm);padding:var(--kf-space-sm) var(--kf-space-md);background:var(--kf-color-white);border:1.5px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);color:var(--kf-color-text-muted)}.kf-quote-picker__search:focus-within{border-color:var(--kf-color-primary);box-shadow:var(--kf-shadow-focus)}.kf-quote-picker__search-input{flex:1;border:none;outline:none;background:transparent;font:inherit;color:var(--kf-color-ink)}.kf-quote-picker__search-input::placeholder{color:var(--kf-color-text-muted)}.kf-quote-picker__chip{flex:none;padding:var(--kf-space-sm) var(--kf-space-md);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);background:var(--kf-color-white);color:var(--kf-color-text);font:inherit;font-size:.8rem;font-weight:600;cursor:pointer}.kf-quote-picker__chip--active{background:var(--kf-color-primary);border-color:var(--kf-color-primary);color:var(--kf-color-white)}.kf-quote-picker__results-wrap{position:relative}.kf-quote-picker__results{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--kf-space-sm);max-height:340px;overflow-y:auto}@media(max-width:900px){.kf-quote-picker__results{grid-template-columns:1fr}}.kf-quote-picker__result{box-sizing:border-box;display:flex;align-items:center;gap:var(--kf-space-sm);padding:var(--kf-space-sm) var(--kf-space-md);border:1px solid transparent;border-radius:var(--kf-radius-sm);background:var(--kf-color-white);cursor:pointer;text-align:left;font:inherit;min-width:0;flex-wrap:wrap;row-gap:2px}.kf-quote-picker__result-fields{display:flex;align-items:center;gap:var(--kf-space-sm);min-width:0;flex:1}.kf-quote-picker__result:hover{border-color:var(--kf-color-border)}.kf-quote-picker__result--active{border-color:var(--kf-color-primary);background:var(--kf-color-primary-soft)}.kf-quote-picker__result-field{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.85rem;color:var(--kf-color-text)}.kf-quote-picker__result-field--title{flex:none;min-width:92px;font-weight:700;color:var(--kf-color-ink)}.kf-quote-picker__result-field--primary{flex:1;min-width:0}@media(max-width:900px){.kf-quote-picker__result-fields{flex-basis:100%;flex-wrap:wrap;row-gap:2px;padding-left:calc(36px + var(--kf-space-sm))}.kf-quote-picker__result-field--primary{flex:none;min-width:0;max-width:100%}}.kf-quote-picker__fade{position:absolute;left:0;right:0;bottom:0;height:36px;background:linear-gradient(to top,var(--kf-color-surface),transparent);pointer-events:none}.kf-quote-picker__see-all{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:var(--kf-space-sm);width:100%;margin-top:var(--kf-space-sm);padding:var(--kf-space-sm);border:1.5px dashed var(--kf-color-primary);border-radius:var(--kf-radius-sm);background:var(--kf-color-white);color:var(--kf-color-primary);font:inherit;font-size:.85rem;font-weight:600;cursor:pointer}.kf-quote-picker__see-all:hover{background:var(--kf-color-primary-soft)}.kf-quote-picker__empty{grid-column:1 / -1;padding:var(--kf-space-md);text-align:center;color:var(--kf-color-text-muted);font-size:.85rem;margin:0}.kf-quote-picker__modal-toolbar{display:flex;flex-direction:column;gap:var(--kf-space-sm);margin-bottom:var(--kf-space-md)}.kf-quote-picker__modal-filters{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);flex-wrap:wrap}.kf-quote-picker__modal-chips{display:flex;gap:var(--kf-space-sm);flex-wrap:wrap}.kf-quote-picker__sort{position:relative;flex:none}.kf-quote-picker__sort-trigger{display:flex;align-items:center;gap:var(--kf-space-sm);padding:6px var(--kf-space-md);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);background:var(--kf-color-white);color:var(--kf-color-text);font:inherit;font-size:.8rem;font-weight:600;cursor:pointer}.kf-quote-picker__sort-trigger:hover{border-color:var(--kf-color-border-strong)}.kf-quote-picker__sort-panel{position:absolute;top:calc(100% + 4px);right:0;z-index:1;min-width:180px;padding:var(--kf-space-xs) 0;background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);box-shadow:var(--kf-shadow-md)}.kf-quote-picker__sort-option{display:block;width:100%;padding:var(--kf-space-sm) var(--kf-space-md);border:none;background:transparent;color:var(--kf-color-text);font:inherit;font-size:.85rem;text-align:left;cursor:pointer}.kf-quote-picker__sort-option:hover{background:var(--kf-color-primary-soft)}.kf-quote-picker__sort-option--active{color:var(--kf-color-primary);font-weight:600}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], selectedId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedId", required: false }] }], idKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "idKey", required: true }] }], cellTemplates: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellTemplates", required: false }] }], chips: [{ type: i0.Input, args: [{ isSignal: true, alias: "chips", required: false }] }], sortOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortOptions", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }, { type: i0.Output, args: ["sortChange"] }], expandThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandThreshold", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], placeholderIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderIcon", required: false }] }], selectedIdChange: [{ type: i0.Output, args: ["selectedIdChange"] }], expandToModal: [{ type: i0.Output, args: ["expandToModal"] }], previewScrollEl: [{ type: i0.ViewChild, args: ['previewScroll', { isSignal: true }] }] } });
+            args: [{ selector: 'kf-quote-picker', imports: [
+                        NgTemplateOutlet,
+                        FormsModule,
+                        Button,
+                        ContentState,
+                        FilterChips,
+                        Icon,
+                        Input,
+                        Modal,
+                        DataTable,
+                        EmptyState,
+                        Pagination,
+                        Select,
+                        Skeleton,
+                        Text,
+                    ], template: "@if (variant() === 'inline') {\n  <div class=\"kf-quote-picker__inline\">\n    <!-- Trigger colapsado. `default`: tarjeta a ancho completo con miniatura\n         (hist\u00F3rico). `compact`: control de barra de herramientas de alto fijo,\n         sin miniatura. Con `inlinePanel` en false abre directo el modal. -->\n    @if (triggerSize() === 'compact' && loading()) {\n      <!-- Mismo alto que el trigger real: la barra no salta al llegar los datos. -->\n      <div\n        class=\"kf-quote-picker__trigger kf-quote-picker__trigger--compact kf-quote-picker__trigger--loading\"\n        role=\"status\"\n        aria-busy=\"true\"\n      >\n        <span class=\"kf-quote-picker__sr-only\">{{ loadingLabel() }}</span>\n        <span class=\"kf-quote-picker__compact\" aria-hidden=\"true\">\n          <kf-skeleton width=\"35%\" height=\"12px\" />\n          <kf-skeleton width=\"65%\" height=\"12px\" />\n        </span>\n      </div>\n    } @else {\n      <button\n        type=\"button\"\n        class=\"kf-quote-picker__trigger\"\n        [class.kf-quote-picker__trigger--compact]=\"triggerSize() === 'compact'\"\n        [attr.aria-expanded]=\"inlinePanel() ? expanded() : open()\"\n        [attr.aria-haspopup]=\"inlinePanel() ? null : 'dialog'\"\n        (click)=\"onTriggerClick()\"\n      >\n        @if (triggerSize() === 'compact') {\n          <!-- Nombre accesible = texto visible con un prefijo y comas solo\n             para lectores de pantalla: \"Cambiar cotizaci\u00F3n. Actual: <id>,\n             <estado>, <modelo>\". -->\n          <span class=\"kf-quote-picker__sr-only\">{{ title() }}. Actual: </span>\n          @if (selectedItem(); as item) {\n            <span class=\"kf-quote-picker__compact\">\n              <span class=\"kf-quote-picker__compact-line\">\n                @if (titleColumn(); as titleCol) {\n                  <span class=\"kf-quote-picker__compact-id\">{{ cellValue(item, titleCol) }}</span>\n                }\n                @for (col of statusColumns(); track col.key) {\n                  <span class=\"kf-quote-picker__sr-only\">, </span>\n                  <span class=\"kf-quote-picker__compact-status\">\n                    <ng-container\n                      *ngTemplateOutlet=\"cell; context: { $implicit: item, column: col, index: 0 }\"\n                    />\n                  </span>\n                }\n              </span>\n              @if (primaryFieldColumn(); as primary) {\n                <span class=\"kf-quote-picker__compact-line\">\n                  <span class=\"kf-quote-picker__sr-only\">, </span>\n                  <span class=\"kf-quote-picker__compact-primary\">{{\n                    cellValue(item, primary)\n                  }}</span>\n                </span>\n              }\n            </span>\n          } @else {\n            <span class=\"kf-quote-picker__compact kf-quote-picker__trigger-summary--empty\"\n              >Sin selecci\u00F3n</span\n            >\n          }\n          <kf-icon\n            name=\"chevron-down\"\n            size=\"sm\"\n            class=\"kf-quote-picker__chevron\"\n            [class.kf-quote-picker__chevron--open]=\"inlinePanel() && expanded()\"\n          />\n        } @else {\n          <span class=\"kf-quote-picker__thumb\">\n            @if (mediaColumn(); as media) {\n              @if (cellTemplates()?.[media.key]; as template) {\n                <ng-container\n                  [ngTemplateOutlet]=\"template\"\n                  [ngTemplateOutletContext]=\"{ $implicit: selectedItem(), index: 0 }\"\n                />\n              }\n            } @else {\n              <kf-icon [name]=\"placeholderIcon()\" size=\"md\" />\n            }\n          </span>\n          @if (selectedItem(); as item) {\n            <span class=\"kf-quote-picker__trigger-summary\">\n              @if (titleColumn(); as title) {\n                <span\n                  class=\"kf-quote-picker__trigger-field kf-quote-picker__trigger-field--title\"\n                  >{{ cellValue(item, title) }}</span\n                >\n              }\n              <!--\n              En mobile solo se muestra el t\u00EDtulo (ID) \u2014 mostrar los 5 campos\n              en una sola l\u00EDnea de ~90px de ancho real corta el texto sin\n              elipsis a mitad del segundo campo (bug real medido:\n              scrollWidth=519 vs. clientWidth=87 en 390px). El resto de los\n              campos siguen disponibles en el panel expandido y en el modal,\n              donde s\u00ED hay espacio horizontal.\n            -->\n              @if (!isMobile()) {\n                @for (col of fieldColumns(); track col.key) {\n                  <span class=\"kf-quote-picker__trigger-sep\" aria-hidden=\"true\">\u00B7</span>\n                  <span class=\"kf-quote-picker__trigger-field\">{{ cellValue(item, col) }}</span>\n                }\n              }\n            </span>\n          } @else {\n            <span class=\"kf-quote-picker__trigger-summary kf-quote-picker__trigger-summary--empty\"\n              >Sin selecci\u00F3n</span\n            >\n          }\n          <span class=\"kf-quote-picker__trigger-action\">\n            {{ inlinePanel() && expanded() ? 'Cerrar' : title() }}\n            <kf-icon\n              name=\"chevron-down\"\n              size=\"sm\"\n              class=\"kf-quote-picker__chevron\"\n              [class.kf-quote-picker__chevron--open]=\"inlinePanel() && expanded()\"\n            />\n          </span>\n        }\n      </button>\n    }\n\n    @if (inlinePanel() && expanded()) {\n      <div class=\"kf-quote-picker__panel\">\n        <div class=\"kf-quote-picker__toolbar\">\n          <div class=\"kf-quote-picker__search\">\n            <kf-icon name=\"search\" size=\"sm\" />\n            <input\n              type=\"text\"\n              class=\"kf-quote-picker__search-input\"\n              [placeholder]=\"searchPlaceholder()\"\n              [attr.aria-label]=\"resolvedSearchAriaLabel()\"\n              [value]=\"searchQuery()\"\n              (input)=\"onSearchInput($event)\"\n            />\n          </div>\n          @for (chip of chips(); track chip.value) {\n            <button\n              type=\"button\"\n              class=\"kf-quote-picker__chip\"\n              [class.kf-quote-picker__chip--active]=\"activeChip() === chip.value\"\n              [attr.aria-pressed]=\"activeChip() === chip.value\"\n              (click)=\"selectChip(chip.value)\"\n            >\n              {{ chip.label }} ({{ chip.count }})\n            </button>\n          }\n        </div>\n\n        <div class=\"kf-quote-picker__results-wrap\">\n          <div #previewScroll class=\"kf-quote-picker__results\" role=\"listbox\">\n            @for (item of previewItems(); track trackItem(item, $index)) {\n              <button\n                type=\"button\"\n                class=\"kf-quote-picker__result\"\n                [class.kf-quote-picker__result--active]=\"idKey()(item) === selectedId()\"\n                role=\"option\"\n                [attr.aria-selected]=\"idKey()(item) === selectedId()\"\n                (click)=\"select(item)\"\n                (keydown)=\"onItemKeydown($event, item)\"\n              >\n                <span class=\"kf-quote-picker__thumb kf-quote-picker__thumb--sm\">\n                  @if (mediaColumn(); as media) {\n                    @if (cellTemplates()?.[media.key]; as template) {\n                      <ng-container\n                        [ngTemplateOutlet]=\"template\"\n                        [ngTemplateOutletContext]=\"{ $implicit: item, index: $index }\"\n                      />\n                    }\n                  } @else {\n                    <kf-icon [name]=\"placeholderIcon()\" size=\"sm\" />\n                  }\n                </span>\n                @if (titleColumn(); as title) {\n                  <span\n                    class=\"kf-quote-picker__result-field kf-quote-picker__result-field--title\"\n                    >{{ cellValue(item, title) }}</span\n                  >\n                }\n                <!--\n                  Wrapper propio (no los spans sueltos) para los campos\n                  secundarios: en mobile necesita saltar de l\u00EDnea COMPLETO\n                  (mismo criterio que \"unidades\" no debe competir con\n                  \"modelo\" en la primera l\u00EDnea) \u2014 `flex-basis: 100%` en un\n                  solo elemento fuerza ese salto sin tener que asumir cu\u00E1l\n                  de los N campos gen\u00E9ricos es el m\u00E1s corto o el m\u00E1s largo.\n                -->\n                <span class=\"kf-quote-picker__result-fields\">\n                  @for (col of fieldColumns(); track col.key; let first = $first) {\n                    <span\n                      class=\"kf-quote-picker__result-field\"\n                      [class.kf-quote-picker__result-field--primary]=\"first\"\n                      >{{ cellValue(item, col) }}</span\n                    >\n                  }\n                </span>\n              </button>\n            } @empty {\n              <p class=\"kf-quote-picker__empty\">Sin resultados para esta b\u00FAsqueda.</p>\n            }\n          </div>\n          @if (canFadeBottom()) {\n            <div class=\"kf-quote-picker__fade\" aria-hidden=\"true\"></div>\n          }\n        </div>\n\n        @if (isHighVolume()) {\n          <button type=\"button\" class=\"kf-quote-picker__see-all\" (click)=\"onSeeAll()\">\n            Ver las {{ sortedItems().length }} en pantalla completa\n          </button>\n        }\n      </div>\n    }\n  </div>\n}\n\n<!-- Modal: la variante `modal` y el que abre el trigger con `inlinePanel` en\n     false. Zona de filtros FIJA (slot `kf-modal-toolbar`) y lista\n     desplazable (cuerpo del modal). -->\n@if (variant() === 'modal' || !inlinePanel()) {\n  <kf-modal\n    class=\"kf-quote-picker__modal\"\n    [(open)]=\"open\"\n    [title]=\"title()\"\n    [dismissible]=\"true\"\n    [width]=\"modalWidth()\"\n    maxHeight=\"85vh\"\n    fullscreenOnMobile\n    initialFocus=\".kf-quote-picker__modal-search\"\n  >\n    <p kf-modal-meta class=\"kf-quote-picker__count\" aria-live=\"polite\">{{ resultsLabel() }}</p>\n\n    <div kf-modal-toolbar class=\"kf-quote-picker__filters\">\n      <div class=\"kf-quote-picker__filters-row\">\n        <kf-input\n          class=\"kf-quote-picker__modal-search\"\n          type=\"search\"\n          icon=\"search\"\n          clearable\n          [placeholder]=\"searchPlaceholder()\"\n          [ariaLabel]=\"resolvedSearchAriaLabel()\"\n          [ngModel]=\"searchQuery()\"\n          (ngModelChange)=\"onSearchChange($event)\"\n        />\n        @if (sortOptions().length > 0) {\n          <kf-select\n            class=\"kf-quote-picker__sort\"\n            icon=\"sort\"\n            ariaLabel=\"Ordenar por\"\n            panelTitle=\"Ordenar por\"\n            placeholder=\"Ordenar por\"\n            [options]=\"sortSelectOptions()\"\n            [value]=\"sort() ?? undefined\"\n            (valueChange)=\"onSortChange($event)\"\n          />\n        }\n      </div>\n      @if (chips().length > 0) {\n        <kf-filter-chips\n          class=\"kf-quote-picker__chips\"\n          deselectable\n          [ariaLabel]=\"chipsAriaLabel()\"\n          [options]=\"chipOptions()\"\n          [value]=\"activeChip() ?? ''\"\n          [layout]=\"isNarrowViewport() ? 'scroll' : 'wrap'\"\n          (valueChange)=\"onChipChange($event)\"\n        />\n      }\n    </div>\n\n    <kf-content-state\n      [state]=\"modalState()\"\n      load=\"spinner\"\n      [loadingLabel]=\"loadingLabel()\"\n      [title]=\"error() ?? ''\"\n    >\n      <kf-button actions type=\"button\" variant=\"outline\" icon=\"refresh\" (click)=\"retry.emit()\">\n        Reintentar\n      </kf-button>\n      @if (modalLayout() === 'list') {\n        @if (sortedItems().length > 0) {\n          <div class=\"kf-quote-picker__list-wrap\">\n            <ul\n              #modalList\n              class=\"kf-quote-picker__list\"\n              [style.grid-template-columns]=\"listGridColumns()\"\n            >\n              @if (listHeader()) {\n                <!-- Cabecera visual de columnas: cada fila (bot\u00F3n) ya se anuncia\n                     completa, as\u00ED que para lectores de pantalla ser\u00EDa ruido. -->\n                <li class=\"kf-quote-picker__list-head\" aria-hidden=\"true\">\n                  @if (titleColumn(); as titleCol) {\n                    <span class=\"kf-quote-picker__head-cell kf-quote-picker__cell--title\">\n                      <kf-text as=\"span\" variant=\"overline\">{{ titleCol.label }}</kf-text>\n                    </span>\n                  }\n                  @if (primaryFieldColumn(); as primary) {\n                    <span class=\"kf-quote-picker__head-cell kf-quote-picker__cell--primary\">\n                      <kf-text as=\"span\" variant=\"overline\">{{ primary.label }}</kf-text>\n                    </span>\n                  }\n                  @for (col of restFieldColumns(); track col.key) {\n                    <span\n                      class=\"kf-quote-picker__head-cell kf-quote-picker__cell--field\"\n                      [class.kf-quote-picker__cell--end]=\"isEndAligned(col)\"\n                      [class.kf-quote-picker__cell--center]=\"col.align === 'center'\"\n                    >\n                      <kf-text as=\"span\" variant=\"overline\">{{ col.label }}</kf-text>\n                    </span>\n                  }\n                  @for (col of statusColumns(); track col.key) {\n                    <span class=\"kf-quote-picker__head-cell kf-quote-picker__cell--status\">\n                      <kf-text as=\"span\" variant=\"overline\">{{ col.label }}</kf-text>\n                    </span>\n                  }\n                  <span class=\"kf-quote-picker__head-cell kf-quote-picker__cell--check\"></span>\n                </li>\n              }\n              @for (item of sortedItems(); track trackItem(item, $index); let i = $index) {\n                <li class=\"kf-quote-picker__list-item\">\n                  <button\n                    type=\"button\"\n                    class=\"kf-quote-picker__row\"\n                    [class.kf-quote-picker__row--current]=\"isSelected(item)\"\n                    [attr.aria-current]=\"isSelected(item) ? 'true' : null\"\n                    (click)=\"select(item)\"\n                  >\n                    <span class=\"kf-quote-picker__row-head\">\n                      @if (titleColumn(); as titleCol) {\n                        <span class=\"kf-quote-picker__row-title kf-quote-picker__cell--title\">\n                          <ng-container\n                            *ngTemplateOutlet=\"\n                              cell;\n                              context: { $implicit: item, column: titleCol, index: i }\n                            \"\n                          />\n                        </span>\n                      }\n                      @for (col of statusColumns(); track col.key) {\n                        <span class=\"kf-quote-picker__row-status kf-quote-picker__cell--status\">\n                          <ng-container\n                            *ngTemplateOutlet=\"\n                              cell;\n                              context: { $implicit: item, column: col, index: i }\n                            \"\n                          />\n                        </span>\n                      }\n                    </span>\n                    <span class=\"kf-quote-picker__row-body\">\n                      @if (primaryFieldColumn(); as primary) {\n                        <span\n                          class=\"kf-quote-picker__row-primary kf-quote-picker__cell--primary\"\n                          [attr.title]=\"cellTitle(item, primary)\"\n                        >\n                          <ng-container\n                            *ngTemplateOutlet=\"\n                              cell;\n                              context: { $implicit: item, column: primary, index: i }\n                            \"\n                          />\n                        </span>\n                      }\n                      @for (col of restFieldColumns(); track col.key) {\n                        <span\n                          class=\"kf-quote-picker__row-field kf-quote-picker__cell--field\"\n                          [class.kf-quote-picker__row-field--right]=\"isEndAligned(col)\"\n                          [class.kf-quote-picker__cell--end]=\"isEndAligned(col)\"\n                          [class.kf-quote-picker__cell--center]=\"col.align === 'center'\"\n                          [class.kf-quote-picker__cell--truncate]=\"col.truncate\"\n                          [attr.title]=\"col.truncate ? cellTitle(item, col) : null\"\n                        >\n                          <ng-container\n                            *ngTemplateOutlet=\"\n                              cell;\n                              context: { $implicit: item, column: col, index: i }\n                            \"\n                          />\n                        </span>\n                      }\n                    </span>\n                    <span class=\"kf-quote-picker__row-check kf-quote-picker__cell--check\">\n                      @if (isSelected(item)) {\n                        <kf-icon name=\"check\" size=\"sm\" />\n                      }\n                    </span>\n                  </button>\n                </li>\n              }\n            </ul>\n          </div>\n        } @else {\n          <kf-empty-state icon=\"file\">Sin resultados para esta b\u00FAsqueda.</kf-empty-state>\n        }\n      } @else {\n        <kf-data-table\n          [columns]=\"columns()\"\n          [rows]=\"pagedItems()\"\n          [cardable]=\"true\"\n          [defaultView]=\"isMobile() ? 'cards' : 'table'\"\n          [cellTemplates]=\"cellTemplates()\"\n          [rowKey]=\"rowKeyFn\"\n          [currentRowKey]=\"selectedId()\"\n          (rowClick)=\"onTableRowClick($event)\"\n        >\n          <kf-empty-state empty icon=\"file\">Sin resultados para esta b\u00FAsqueda.</kf-empty-state>\n          @if (sortedItems().length > 0) {\n            <kf-pagination footer [page]=\"page()\" [pages]=\"pages()\" (pageChange)=\"page.set($event)\">\n              {{ sortedItems().length }} resultados\n            </kf-pagination>\n          }\n        </kf-data-table>\n      }\n    </kf-content-state>\n  </kf-modal>\n}\n\n<!-- Celda de la lista compacta: el template del consumidor si existe (badge,\n     monto formateado), si no el valor como texto. -->\n<ng-template #cell let-item let-column=\"column\" let-index=\"index\">\n  @if (cellTemplates()?.[column.key]; as template) {\n    <ng-container\n      [ngTemplateOutlet]=\"template\"\n      [ngTemplateOutletContext]=\"{ $implicit: item, index: index }\"\n    />\n  } @else {\n    {{ cellValue(item, column) }}\n  }\n</ng-template>\n", styles: [":host{display:block;min-width:0;font-family:var(--kf-font-body)}.kf-quote-picker__sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.kf-quote-picker__trigger{box-sizing:border-box;display:flex;align-items:center;gap:var(--kf-space-md);width:100%;padding:var(--kf-space-sm) var(--kf-space-md);background:var(--kf-color-white);border:1.5px solid var(--kf-color-primary);border-radius:var(--kf-radius-md);box-shadow:var(--kf-shadow-sm);cursor:pointer;font:inherit;text-align:left}.kf-quote-picker__trigger:hover{box-shadow:var(--kf-shadow-md)}.kf-quote-picker__trigger:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-quote-picker__thumb{display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none;border-radius:var(--kf-radius-sm);background:var(--kf-color-surface);color:var(--kf-color-gray-400)}.kf-quote-picker__thumb--sm{width:36px;height:36px}.kf-quote-picker__result--active .kf-quote-picker__thumb{background:var(--kf-color-white);color:var(--kf-color-primary)}.kf-quote-picker__trigger-summary{flex:1;min-width:0;display:flex;align-items:baseline;gap:var(--kf-space-xs);overflow:hidden;white-space:nowrap;color:var(--kf-color-ink)}.kf-quote-picker__trigger-summary--empty{color:var(--kf-color-text-muted)}.kf-quote-picker__trigger-field--title{font-family:var(--kf-font-title);font-weight:700;font-size:1.05rem;color:var(--kf-color-ink)}.kf-quote-picker__trigger-field{font-size:.85rem;color:var(--kf-color-text)}.kf-quote-picker__trigger-sep{color:var(--kf-color-border-strong)}.kf-quote-picker__trigger-action{flex:none;display:flex;align-items:center;gap:6px;color:var(--kf-color-primary);font-size:.85rem;font-weight:600}.kf-quote-picker__chevron{transition:transform .14s}.kf-quote-picker__chevron--open{transform:rotate(180deg)}.kf-quote-picker__panel{display:flex;flex-direction:column;gap:var(--kf-space-md);margin-top:var(--kf-space-sm);padding:var(--kf-space-md) var(--kf-space-lg);background:var(--kf-color-surface);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-md)}.kf-quote-picker__toolbar{display:flex;flex-wrap:wrap;gap:var(--kf-space-sm)}.kf-quote-picker__search{flex:1;min-width:200px;display:flex;align-items:center;gap:var(--kf-space-sm);padding:var(--kf-space-sm) var(--kf-space-md);background:var(--kf-color-white);border:1.5px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);color:var(--kf-color-text-muted)}.kf-quote-picker__search:focus-within{border-color:var(--kf-color-primary);box-shadow:var(--kf-shadow-focus)}.kf-quote-picker__search-input{flex:1;border:none;outline:none;background:transparent;font:inherit;color:var(--kf-color-ink)}.kf-quote-picker__search-input::placeholder{color:var(--kf-color-text-muted)}.kf-quote-picker__chip{flex:none;padding:var(--kf-space-sm) var(--kf-space-md);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);background:var(--kf-color-white);color:var(--kf-color-text);font:inherit;font-size:.8rem;font-weight:600;cursor:pointer}.kf-quote-picker__chip--active{background:var(--kf-color-primary);border-color:var(--kf-color-primary);color:var(--kf-color-white)}.kf-quote-picker__results-wrap{position:relative}.kf-quote-picker__results{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--kf-space-sm);max-height:340px;overflow-y:auto}@media(max-width:900px){.kf-quote-picker__results{grid-template-columns:1fr}}.kf-quote-picker__result{box-sizing:border-box;display:flex;align-items:center;gap:var(--kf-space-sm);padding:var(--kf-space-sm) var(--kf-space-md);border:1px solid transparent;border-radius:var(--kf-radius-sm);background:var(--kf-color-white);cursor:pointer;text-align:left;font:inherit;min-width:0;flex-wrap:wrap;row-gap:2px}.kf-quote-picker__result-fields{display:flex;align-items:center;gap:var(--kf-space-sm);min-width:0;flex:1}.kf-quote-picker__result:hover{border-color:var(--kf-color-border)}.kf-quote-picker__result--active{border-color:var(--kf-color-primary);background:var(--kf-color-primary-soft)}.kf-quote-picker__result-field{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.85rem;color:var(--kf-color-text)}.kf-quote-picker__result-field--title{flex:none;min-width:92px;font-weight:700;color:var(--kf-color-ink)}.kf-quote-picker__result-field--primary{flex:1;min-width:0}@media(max-width:900px){.kf-quote-picker__result-fields{flex-basis:100%;flex-wrap:wrap;row-gap:2px;padding-left:calc(36px + var(--kf-space-sm))}.kf-quote-picker__result-field--primary{flex:none;min-width:0;max-width:100%}}.kf-quote-picker__fade{position:absolute;left:0;right:0;bottom:0;height:36px;background:linear-gradient(to top,var(--kf-color-surface),transparent);pointer-events:none}.kf-quote-picker__see-all{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:var(--kf-space-sm);width:100%;margin-top:var(--kf-space-sm);padding:var(--kf-space-sm);border:1.5px dashed var(--kf-color-primary);border-radius:var(--kf-radius-sm);background:var(--kf-color-white);color:var(--kf-color-primary);font:inherit;font-size:.85rem;font-weight:600;cursor:pointer}.kf-quote-picker__see-all:hover{background:var(--kf-color-primary-soft)}.kf-quote-picker__empty{grid-column:1 / -1;padding:var(--kf-space-md);text-align:center;color:var(--kf-color-text-muted);font-size:.85rem;margin:0}.kf-quote-picker__trigger--compact{position:relative;height:var(--kf-quote-picker-trigger-height, 48px);min-width:0;gap:var(--kf-space-sm);padding:0 var(--kf-space-sm) 0 var(--kf-space-md);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);box-shadow:none;transition:border-color .14s,box-shadow .14s}.kf-quote-picker__trigger--compact:hover{border-color:var(--kf-color-border-strong);box-shadow:none}.kf-quote-picker__trigger--compact:focus-visible{border-color:var(--kf-color-primary);box-shadow:var(--kf-shadow-focus)}.kf-quote-picker__compact{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px;line-height:1.25}.kf-quote-picker__compact-line{display:flex;align-items:center;gap:var(--kf-space-sm);min-width:0}.kf-quote-picker__compact-id{flex:none;font-family:var(--kf-font-mono);font-size:var(--kf-font-size-body-sm);font-weight:700;color:var(--kf-color-ink)}.kf-quote-picker__compact-status{display:flex;min-width:0;overflow:hidden}.kf-quote-picker__compact-primary{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--kf-font-size-body-sm);color:var(--kf-color-text)}.kf-quote-picker__trigger--loading{display:flex;align-items:center;cursor:progress}.kf-quote-picker__trigger--compact .kf-quote-picker__chevron{flex:none;color:var(--kf-color-text)}@media(prefers-reduced-motion:reduce){.kf-quote-picker__trigger--compact{transition:none}}.kf-quote-picker__count{margin:0;font-size:var(--kf-font-size-body-sm);font-variant-numeric:tabular-nums;color:var(--kf-color-text)}.kf-quote-picker__count:empty{display:none}.kf-quote-picker__filters{container:kf-quote-picker-filters / inline-size;display:flex;flex-direction:column;gap:var(--kf-space-sm)}.kf-quote-picker__filters-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--kf-space-sm)}.kf-quote-picker__modal-search{flex:1 1 240px;min-width:240px}.kf-quote-picker__sort{flex:none}@container kf-quote-picker-filters (max-width: 520px){.kf-quote-picker__modal-search{flex-basis:100%;min-width:0}.kf-quote-picker__sort{width:100%}}.kf-quote-picker__list-wrap{container:kf-quote-picker-list / inline-size}.kf-quote-picker__list{display:grid;column-gap:var(--kf-space-md);row-gap:2px;margin:0;padding:0 0 2px;list-style:none}.kf-quote-picker__list-head,.kf-quote-picker__list-item{display:grid;grid-column:1 / -1;grid-template-columns:subgrid}.kf-quote-picker__list-head{position:sticky;top:0;z-index:1;align-items:end;padding:var(--kf-space-xs) var(--kf-space-md) var(--kf-space-sm);border-bottom:1px solid var(--kf-color-border);background:var(--kf-color-white)}.kf-quote-picker__row{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;align-items:center;box-sizing:border-box;width:100%;min-height:52px;padding:var(--kf-space-sm) var(--kf-space-md);border:1px solid transparent;border-radius:var(--kf-radius-sm);background:var(--kf-color-white);color:var(--kf-color-text);font:inherit;font-size:var(--kf-font-size-body-sm);text-align:start;cursor:pointer;scroll-margin-top:48px;scroll-margin-bottom:var(--kf-space-sm)}.kf-quote-picker__row:hover{border-color:var(--kf-color-border);background:var(--kf-color-surface)}.kf-quote-picker__row:focus-visible{outline:2px solid var(--kf-color-primary);outline-offset:-2px}.kf-quote-picker__row--current,.kf-quote-picker__row--current:hover{border-color:var(--kf-color-primary);background:var(--kf-color-primary-soft)}.kf-quote-picker__row-head,.kf-quote-picker__row-body{display:contents}.kf-quote-picker__head-cell{min-width:0;white-space:nowrap}.kf-quote-picker__cell--title{order:0;white-space:nowrap}.kf-quote-picker__row-title{font-family:var(--kf-font-mono);font-weight:700;color:var(--kf-color-ink)}.kf-quote-picker__cell--primary{order:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-quote-picker__row-primary{color:var(--kf-color-ink)}.kf-quote-picker__cell--field{order:2;min-width:0;white-space:nowrap;font-variant-numeric:tabular-nums}.kf-quote-picker__cell--truncate{overflow:hidden;text-overflow:ellipsis}.kf-quote-picker__cell--end{justify-self:end;text-align:end}.kf-quote-picker__cell--center{justify-self:center;text-align:center}.kf-quote-picker__row-field--right{font-weight:600;color:var(--kf-color-ink)}.kf-quote-picker__cell--status{order:3;display:flex;min-width:0;overflow:hidden}.kf-quote-picker__cell--check{order:4;display:flex;justify-content:center;color:var(--kf-color-primary)}@container kf-quote-picker-list (max-width: 560px){.kf-quote-picker__list{display:flex;flex-direction:column}.kf-quote-picker__list-head{display:none}.kf-quote-picker__list-item{display:block}.kf-quote-picker__row{grid-template-columns:minmax(0,1fr) 1.25rem;grid-template-areas:\"head check\" \"body check\";column-gap:var(--kf-space-sm);row-gap:var(--kf-space-xs);padding:var(--kf-space-sm);scroll-margin-top:var(--kf-space-sm)}.kf-quote-picker__row-head,.kf-quote-picker__row-body{display:flex;align-items:center;gap:var(--kf-space-sm);min-width:0}.kf-quote-picker__row-head{grid-area:head;justify-content:space-between}.kf-quote-picker__row-body{grid-area:body;flex-wrap:wrap;row-gap:var(--kf-space-xs)}.kf-quote-picker__row-body .kf-quote-picker__cell--end{margin-left:auto}.kf-quote-picker__row-check{grid-area:check}.kf-quote-picker__cell--status{flex:0 1 auto;justify-content:flex-end;max-width:65%}.kf-quote-picker__cell--primary{flex:1 1 100%;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;white-space:normal;overflow-wrap:anywhere}.kf-quote-picker__cell--field{flex:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], selectedId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedId", required: false }] }], idKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "idKey", required: true }] }], cellTemplates: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellTemplates", required: false }] }], chips: [{ type: i0.Input, args: [{ isSignal: true, alias: "chips", required: false }] }], sortOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortOptions", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }, { type: i0.Output, args: ["sortChange"] }], expandThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandThreshold", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], placeholderIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderIcon", required: false }] }], modalLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "modalLayout", required: false }] }], searchAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchAriaLabel", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingLabel", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], triggerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerSize", required: false }] }], inlinePanel: [{ type: i0.Input, args: [{ isSignal: true, alias: "inlinePanel", required: false }] }], modalWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "modalWidth", required: false }] }], itemLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemLabels", required: false }] }], allChipLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "allChipLabel", required: false }] }], chipsAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "chipsAriaLabel", required: false }] }], listHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "listHeader", required: false }] }], selectedIdChange: [{ type: i0.Output, args: ["selectedIdChange"] }], retry: [{ type: i0.Output, args: ["retry"] }], expandToModal: [{ type: i0.Output, args: ["expandToModal"] }], previewScrollEl: [{ type: i0.ViewChild, args: ['previewScroll', { isSignal: true }] }], modalListEl: [{ type: i0.ViewChild, args: ['modalList', { isSignal: true }] }] } });
 
 /**
  * Estado vacío de reservas en taller con llamada a agendar (página 36):