@kaufmann-lab/ui 0.1.17 → 0.1.18

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

@@ -0,0 +1,453 @@
+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 { NgTemplateOutlet } from '@angular/common';
+import { matchMediaSignal, normalizeForSearch } from '@kaufmann-lab/ui/shared';
+
+/**
+ * Conmutador de empresa activa con metadatos clave (página 32) — encabeza
+ * la pantalla de inicio del portal. Compone `kf-select` para el propio
+ * selector (mismo panel propio, sin `<select>` nativo) y proyecta hasta 3
+ * pares label/valor (RUC, Identificación, Sucursal en el ejemplo del PDF).
+ *
+ *   <kf-company-selector
+ *     label="Selecciona empresa"
+ *     [companies]="['TRANSPORTES DEL SUR S.A.C.', 'ANDES MAQ LTDA.']"
+ *     [value]="activeCompany()"
+ *     (valueChange)="activeCompany.set($event)"
+ *     [meta]="[
+ *       { label: 'RUC', value: '20448712359' },
+ *       { label: 'Identificación', value: '0004002232' },
+ *       { label: 'Sucursal', value: 'Sucursal Norte' },
+ *     ]"
+ *   />
+ */
+class CompanySelector {
+    label = input('Selecciona empresa', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    companies = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "companies" }] : /* istanbul ignore next */ []));
+    value = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+    meta = input([], /* @ts-ignore */
+    ...(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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CompanySelector, decorators: [{
+            type: Component,
+            args: [{ selector: 'kf-company-selector', imports: [Divider, Select, Text], 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"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], companies: [{ type: i0.Input, args: [{ isSignal: true, alias: "companies", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+
+/** Filas visibles en el preview acotado (modo `inline`, volumen alto) antes del fade + CTA. */
+const PREVIEW_ROWS = 5;
+/** Filas por página en la tabla del modo `modal`. */
+const PAGE_SIZE = 10;
+/**
+ * Selector de un ítem "rico" de una lista buscable/filtrable — generalización
+ * del patrón "elegir una cotización" de Pagos y Facturas de OTD, pero sin
+ * ningún acoplamiento a `Quote`: todo el contenido de cada fila/card llega
+ * por `columns` (mismo `DataTableColumn` de `kf-data-table`, reexportado acá
+ * en vez de duplicar el concepto) + `cellTemplates` para contenido custom
+ * (thumbnail, monto formateado, etc. — mismo mecanismo `TemplateRef` +
+ * `ngTemplateOutlet` que ya usa `kf-data-table`).
+ *
+ * Un solo componente, dos contenedores (`variant: 'inline' | 'modal'`), UNA
+ * sola lógica de búsqueda/filtro/orden interna. Nunca dos implementaciones
+ * paralelas: el riesgo real de eso es que un fix de filtro se aplique en un
+ * modo y se olvide en el otro. Los `computed()` de más abajo
+ * (`filteredItems`, `sortedItems`) son la ÚNICA fuente de verdad para ambos
+ * `variant`; lo que cambia entre inline y modal es solo qué contenedor
+ * envuelve esos datos ya resueltos.
+ *
+ * ## Modo `inline` (default)
+ * Trigger a ANCHO COMPLETO (nunca una caja angosta de ancho fijo) que
+ * muestra el ítem activo colapsado — thumbnail, id + modelo, unidades +
+ * fecha + monto, CTA "Cambiar cotización" con chevron-down. Al click, el
+ * panel se expande INLINE (empuja el contenido de abajo, nunca flota
+ * encima) con buscador propio + chips de filtro + un grid de 2 columnas (1
+ * en mobile, breakpoint `max-width: 900px` vía `matchMediaSignal` — mismo
+ * mecanismo que ya usa el resto de la librería para decisiones de layout en
+ * TypeScript, no solo CSS). Por encima de `expandThreshold` resultados
+ * visibles, el panel recorta a un preview de `PREVIEW_ROWS` filas con un
+ * fade inferior y un botón dashed "Ver las N en pantalla completa" que
+ * emite `expandToModal` — el picker no decide qué pasa después (típicamente
+ * el consumidor pone `variant` en `'modal'` y `open` en `true`).
+ *
+ * ## Modo `modal`
+ * Mismo buscador, mismos chips, misma lógica de filtrado — compone
+ * `kf-modal` (proyectando el contenido) en vez de reimplementar un
+ * `<dialog>` a mano: la API de `Modal` (`[(open)]`, cierre con
+ * Escape/backdrop/botón vía `<dialog>` nativo) ya cubre exactamente lo que
+ * este modo necesita. Compone también `kf-data-table` para la tabla
+ * completa (columnas configurables, fade de overflow horizontal ya
+ * resuelto ahí) y `kf-pagination` para paginar — ninguno de los tres se
+ * reimplementa. Agrega un dropdown propio de "Ordenar por" (calibrado
+ * visualmente contra el trigger de `kf-select`, pero compacto: `kf-select`
+ * fuerza un ancho fijo de 240px pensado para formularios, no para una
+ * barra de herramientas de tabla — ver JSDoc de `sortOpen` más abajo).
+ *
+ * En mobile, `kf-data-table[cardable]` con `defaultView` forzado a
+ * `'cards'` decide la vista (mismo criterio que `matchMediaSignal` ya
+ * resolvió en otros consumidores): dentro de un modal a pantalla completa
+ * no tiene sentido ofrecer un toggle tabla/cards que en mobile daría una
+ * tabla angosta con scroll horizontal.
+ *
+ * DEUDA TÉCNICA CONOCIDA (confirmada con el usuario, ver CHANGELOG.md): el
+ * diseño validado con mockups pedía que en mobile el modal ocupe el 100%
+ * de la pantalla (botón "atrás", sin overlay centrado) — `kf-modal` no
+ * tiene ese modo, así que hoy en mobile se ve como un diálogo centrado
+ * angosto (`width: min(480px, ...)`). Es funcional (cards legibles,
+ * búsqueda, chips, paginación), solo visualmente distinto del mockup.
+ *
+ *   <kf-quote-picker
+ *     [items]="quotes()"
+ *     [columns]="columns"
+ *     [selectedId]="selectedQuoteId()"
+ *     [idKey]="(q) => q.id"
+ *     [chips]="statusChips()"
+ *     [cellTemplates]="{ photo: photoCell(), amount: amountCell() }"
+ *     (selectedIdChange)="selectedQuoteId.set($event)"
+ *     (expandToModal)="variant.set('modal'); open.set(true)"
+ *   />
+ */
+class QuotePicker {
+    items = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    columns = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    selectedId = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedId" }] : /* istanbul ignore next */ []));
+    idKey = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "idKey" }] : /* istanbul ignore next */ []));
+    /**
+     * Mapa `columnKey -> TemplateRef`, mismo mecanismo que `kf-data-table`
+     * (`ngTemplateOutlet` + contexto `{ $implicit: item, index }`) — se
+     * reenvía tal cual a la tabla interna del modo `modal`, y se usa
+     * directamente en el grid de cards del modo `inline`. Un solo mapa para
+     * ambos modos, consistente con la regla de "una sola lógica interna".
+     */
+    cellTemplates = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "cellTemplates" }] : /* istanbul ignore next */ []));
+    chips = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "chips" }] : /* istanbul ignore next */ []));
+    sortOptions = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sortOptions" }] : /* istanbul ignore next */ []));
+    sort = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sort" }] : /* istanbul ignore next */ []));
+    /**
+     * Umbral de volumen alto — el consumidor decide el número exacto, nunca
+     * hardcodeado a "cotizaciones" ni a ningún caso de uso puntual. Default
+     * 15 según el diseño validado con mockups.
+     */
+    expandThreshold = input(15, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expandThreshold" }] : /* istanbul ignore next */ []));
+    variant = input('inline', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Visibilidad del modo `modal`, two-way — mismo patrón que `[(open)]` de `kf-modal`. */
+    open = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    title = input('Cambiar cotización', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    searchPlaceholder = input('Buscar…', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
+    /** Ícono de placeholder cuando ninguna columna `cardRole: 'media'` resuelve
+     * un thumbnail real vía `cellTemplates` — el picker no asume qué dominio
+     * consume (cotización, vehículo, cliente...), así que no hardcodea un
+     * ícono fijo. Default `'file'` solo por no dejar el input sin valor. */
+    placeholderIcon = input('file', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholderIcon" }] : /* istanbul ignore next */ []));
+    selectedIdChange = output();
+    /** Disparado al superar `expandThreshold` en modo inline; el consumidor decide pasar a `modal`. */
+    expandToModal = output();
+    searchQuery = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchQuery" }] : /* istanbul ignore next */ []));
+    activeChip = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeChip" }] : /* istanbul ignore next */ []));
+    expanded = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    page = signal(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
+    sortOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sortOpen" }] : /* istanbul ignore next */ []));
+    /**
+     * Mismo breakpoint (`max-width: 900px`) que el resto de la librería usa
+     * para decisiones de layout en TypeScript (no solo CSS) — ver
+     * `matchMediaSignal`. Decide 1 vs. 2 columnas en el grid inline, y tabla
+     * vs. cards apiladas dentro del modal.
+     */
+    isMobile = matchMediaSignal('(max-width: 900px)');
+    destroyRef = inject(DestroyRef);
+    previewScrollEl = viewChild('previewScroll', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "previewScrollEl" }] : /* istanbul ignore next */ []));
+    /** Mismo mecanismo de fade que `kf-data-table` — ver comentario en QuotePicker.css. */
+    canFadeBottom = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canFadeBottom" }] : /* istanbul ignore next */ []));
+    selectedItem = computed(() => this.items().find((item) => this.idKey()(item) === this.selectedId()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedItem" }] : /* istanbul ignore next */ []));
+    /** Filtro por texto (buscador propio) + filtro por chip activo, en ese orden. */
+    filteredItems = computed(() => {
+        const query = normalizeForSearch(this.searchQuery().trim());
+        const chipValue = this.activeChip();
+        const chip = chipValue ? this.chips().find((c) => c.value === chipValue) : undefined;
+        const idKeyFn = this.idKey();
+        const cols = this.columns();
+        return this.items().filter((item) => {
+            if (chip && !chip.predicate(item)) {
+                return false;
+            }
+            if (!query) {
+                return true;
+            }
+            const haystack = cols
+                .map((column) => this.cellText(item, column))
+                .concat(idKeyFn(item))
+                .join(' ');
+            return normalizeForSearch(haystack).includes(query);
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filteredItems" }] : /* istanbul ignore next */ []));
+    /**
+     * Orden solo tiene efecto visible en modo `modal` (el diseño validado no
+     * pide dropdown de orden en inline) — se calcula igual en ambos casos
+     * porque es la MISMA lógica interna; en inline `sort()` simplemente se
+     * queda en `null` salvo que el consumidor lo setee explícitamente.
+     */
+    sortedItems = computed(() => {
+        const sortValue = this.sort();
+        const items = this.filteredItems();
+        if (!sortValue) {
+            return items;
+        }
+        const [key, direction] = sortValue.split(':');
+        const sorted = [...items].sort((a, b) => {
+            const va = a[key];
+            const vb = b[key];
+            if (va === vb) {
+                return 0;
+            }
+            return va > vb ? 1 : -1;
+        });
+        return direction === 'desc' ? sorted.reverse() : sorted;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sortedItems" }] : /* istanbul ignore next */ []));
+    /** Por encima del umbral, el preview inline se recorta salvo que el usuario ya haya expandido. */
+    isHighVolume = computed(() => this.sortedItems().length > this.expandThreshold(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isHighVolume" }] : /* istanbul ignore next */ []));
+    previewItems = computed(() => {
+        const all = this.sortedItems();
+        if (!this.isHighVolume() || this.expanded()) {
+            return all;
+        }
+        return all.slice(0, PREVIEW_ROWS);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "previewItems" }] : /* istanbul ignore next */ []));
+    pages = computed(() => Math.max(Math.ceil(this.sortedItems().length / PAGE_SIZE), 1), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pages" }] : /* istanbul ignore next */ []));
+    pagedItems = computed(() => {
+        const start = (this.page() - 1) * PAGE_SIZE;
+        return this.sortedItems().slice(start, start + PAGE_SIZE);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pagedItems" }] : /* istanbul ignore next */ []));
+    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() {
+        afterNextRender(() => {
+            const el = this.previewScrollEl()?.nativeElement;
+            if (!el) {
+                return;
+            }
+            const update = () => this.updateFadeState(el);
+            update();
+            el.addEventListener('scroll', update, { passive: true });
+            const observer = new ResizeObserver(update);
+            observer.observe(el);
+            this.destroyRef.onDestroy(() => {
+                el.removeEventListener('scroll', update);
+                observer.disconnect();
+            });
+        });
+    }
+    updateFadeState(el) {
+        // 1px de margen por el mismo motivo que en DataTable: subpíxeles de
+        // scroll dejarían el fade "prendido" en un preview que ya llegó al final.
+        this.canFadeBottom.set(el.scrollHeight - el.clientHeight - el.scrollTop > 1);
+    }
+    cellText(item, column) {
+        const value = item[column.key];
+        return value === null || value === undefined ? '' : String(value);
+    }
+    toggleExpandedPanel() {
+        this.expanded.set(!this.expanded());
+    }
+    onSearchInput(event) {
+        this.searchQuery.set(event.target.value);
+        this.page.set(1);
+    }
+    selectChip(value) {
+        this.activeChip.set(this.activeChip() === value ? null : value);
+        this.page.set(1);
+    }
+    select(item) {
+        const id = this.idKey()(item);
+        // El panel se cierra siempre al elegir (haya cambiado el id o no) —
+        // mismo comportamiento esperado de cualquier selector, ej. `kf-select`
+        // cierra su panel al elegir opción; dejarle esa responsabilidad al
+        // consumidor sería una carga que ningún otro componente de la
+        // librería le pide.
+        this.expanded.set(false);
+        if (id === this.selectedId()) {
+            return;
+        }
+        this.selectedIdChange.emit(id);
+    }
+    onItemKeydown(event, item) {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            this.select(item);
+        }
+    }
+    onSeeAll() {
+        this.expandToModal.emit();
+    }
+    onTableRowClick(event) {
+        this.select(event.row);
+    }
+    toggleSort() {
+        this.sortOpen.update((open) => !open);
+    }
+    setSort(value) {
+        this.sort.set(this.sort() === value ? null : value);
+        this.sortOpen.set(false);
+    }
+    trackItem(item, index) {
+        const idKeyFn = this.idKey();
+        return idKeyFn ? idKeyFn(item) : index;
+    }
+    /** Arrow function como campo (no un método) para que `[rowKey]` reciba
+     * una referencia ESTABLE entre change detections — `trackItem.bind(this)`
+     * en el template recrearía una función nueva en cada ciclo, invalidando
+     * cualquier optimización de `kf-data-table` que dependa de identidad. */
+    rowKeyFn = (item, index) => this.trackItem(item, index);
+    cellValue(item, column) {
+        return this.cellText(item, column);
+    }
+    mediaColumn = computed(() => this.columns().find((c) => c.cardRole === 'media'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mediaColumn" }] : /* istanbul ignore next */ []));
+    titleColumn = computed(() => this.columns().find((c) => c.cardRole === 'title'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "titleColumn" }] : /* istanbul ignore next */ []));
+    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"] }] });
+}
+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 }] }] } });
+
+/**
+ * Estado vacío de reservas en taller con llamada a agendar (página 36):
+ * barra de estado vacío arriba ("No tienes reservas de taller"), panel de
+ * invitación al medio (ícono en círculo azul, título, descripción, link) y
+ * una fila de dos acciones al pie — un slot `[actions]` proyectado, para no
+ * acoplar el componente a botones fijos.
+ *
+ * Distinto de `kf-empty-state` genérico: este combina la barra + la
+ * invitación + las acciones como un bloque compuesto propio del dominio
+ * "taller", no un placeholder de una sola pieza.
+ *
+ * `grow` estira el panel de invitación para llenar el espacio vertical
+ * disponible — solo cuando el consumidor comparte fila con una tarjeta más
+ * alta (ej. junto a "Total de vehículos"); en un lugar sin esa presión
+ * (home, debajo del carousel) se deja en su alto natural.
+ *
+ *   <kf-reserve-block emptyLabel="No tienes reservas de taller" grow
+ *     title="¿Necesitas mantención?" description="Tenemos la mejor red de talleres."
+ *     actionLabel="Agenda tu reserva aquí" actionHref="/taller/agendar">
+ *     <kf-button actions icon="calendar">Reservar hora</kf-button>
+ *     <kf-button actions variant="outline" icon="list">Ver agenda</kf-button>
+ *   </kf-reserve-block>
+ */
+class ReserveBlock {
+    emptyLabel = input('No tienes reservas de taller', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyLabel" }] : /* istanbul ignore next */ []));
+    title = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    description = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "description" }] : /* istanbul ignore next */ []));
+    actionLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "actionLabel" }] : /* istanbul ignore next */ []));
+    actionHref = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "actionHref" }] : /* istanbul ignore next */ []));
+    /** La invitación se estira para llenar la tarjeta (ej. junto a "Total de vehículos"). */
+    grow = input(false, { ...(ngDevMode ? { debugName: "grow" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ReserveBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: ReserveBlock, isStandalone: true, selector: "kf-reserve-block", inputs: { emptyLabel: { classPropertyName: "emptyLabel", publicName: "emptyLabel", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null }, actionHref: { classPropertyName: "actionHref", publicName: "actionHref", isSignal: true, isRequired: false, transformFunction: null }, grow: { classPropertyName: "grow", publicName: "grow", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kf-reserve-block__empty\">\n  <kf-icon name=\"calendar\" size=\"sm\" />\n  <span>{{ emptyLabel() }}</span>\n</div>\n<div class=\"kf-reserve-block__invite\" [class.kf-reserve-block__invite--grow]=\"grow()\">\n  <span class=\"kf-reserve-block__invite-icon\">\n    <kf-icon name=\"tool\" size=\"md\" />\n  </span>\n  <div class=\"kf-reserve-block__invite-text\">\n    <span class=\"kf-reserve-block__invite-title\">{{ title() }}</span>\n    @if (description()) {\n      <span class=\"kf-reserve-block__invite-description\">{{ description() }}</span>\n    }\n    @if (actionLabel()) {\n      <kf-link class=\"kf-reserve-block__invite-action\" [href]=\"actionHref() || '#'\" showArrow>\n        {{ actionLabel() }}\n      </kf-link>\n    }\n  </div>\n</div>\n<div class=\"kf-reserve-block__actions\">\n  <ng-content select=\"[actions]\" />\n</div>\n", styles: [":host{display:flex;flex-direction:column;gap:var(--kf-space-sm);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-reserve-block__empty{display:flex;align-items:center;gap:var(--kf-space-xs);padding-bottom:var(--kf-space-sm);border-bottom:1px solid var(--kf-color-border);color:var(--kf-color-text-muted);font-size:.875rem}.kf-reserve-block__invite{display:flex;align-items:center;gap:var(--kf-space-sm);padding:var(--kf-space-sm);border-radius:var(--kf-radius-sm);background:var(--kf-color-primary-soft)}.kf-reserve-block__invite--grow{flex:1}.kf-reserve-block__invite-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:2.25rem;height:2.25rem;border-radius:var(--kf-radius-pill);background:var(--kf-color-primary);color:var(--kf-color-white)}.kf-reserve-block__invite-text{display:flex;flex-direction:column;gap:2px;min-width:0}.kf-reserve-block__invite-title{font-family:var(--kf-font-title);font-weight:700;color:var(--kf-color-ink)}.kf-reserve-block__invite-description{font-size:.8125rem;color:var(--kf-color-text-muted)}.kf-reserve-block__invite-action{margin-top:var(--kf-space-xs);font-size:.8125rem;font-weight:600}.kf-reserve-block__actions{display:flex;flex-wrap:wrap;gap:var(--kf-space-sm)}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }, { kind: "component", type: Link, selector: "kf-link", inputs: ["variant", "disabled", "href", "showArrow"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ReserveBlock, decorators: [{
+            type: Component,
+            args: [{ selector: 'kf-reserve-block', imports: [Icon, Link], template: "<div class=\"kf-reserve-block__empty\">\n  <kf-icon name=\"calendar\" size=\"sm\" />\n  <span>{{ emptyLabel() }}</span>\n</div>\n<div class=\"kf-reserve-block__invite\" [class.kf-reserve-block__invite--grow]=\"grow()\">\n  <span class=\"kf-reserve-block__invite-icon\">\n    <kf-icon name=\"tool\" size=\"md\" />\n  </span>\n  <div class=\"kf-reserve-block__invite-text\">\n    <span class=\"kf-reserve-block__invite-title\">{{ title() }}</span>\n    @if (description()) {\n      <span class=\"kf-reserve-block__invite-description\">{{ description() }}</span>\n    }\n    @if (actionLabel()) {\n      <kf-link class=\"kf-reserve-block__invite-action\" [href]=\"actionHref() || '#'\" showArrow>\n        {{ actionLabel() }}\n      </kf-link>\n    }\n  </div>\n</div>\n<div class=\"kf-reserve-block__actions\">\n  <ng-content select=\"[actions]\" />\n</div>\n", styles: [":host{display:flex;flex-direction:column;gap:var(--kf-space-sm);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-reserve-block__empty{display:flex;align-items:center;gap:var(--kf-space-xs);padding-bottom:var(--kf-space-sm);border-bottom:1px solid var(--kf-color-border);color:var(--kf-color-text-muted);font-size:.875rem}.kf-reserve-block__invite{display:flex;align-items:center;gap:var(--kf-space-sm);padding:var(--kf-space-sm);border-radius:var(--kf-radius-sm);background:var(--kf-color-primary-soft)}.kf-reserve-block__invite--grow{flex:1}.kf-reserve-block__invite-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:2.25rem;height:2.25rem;border-radius:var(--kf-radius-pill);background:var(--kf-color-primary);color:var(--kf-color-white)}.kf-reserve-block__invite-text{display:flex;flex-direction:column;gap:2px;min-width:0}.kf-reserve-block__invite-title{font-family:var(--kf-font-title);font-weight:700;color:var(--kf-color-ink)}.kf-reserve-block__invite-description{font-size:.8125rem;color:var(--kf-color-text-muted)}.kf-reserve-block__invite-action{margin-top:var(--kf-space-xs);font-size:.8125rem;font-weight:600}.kf-reserve-block__actions{display:flex;flex-wrap:wrap;gap:var(--kf-space-sm)}\n"] }]
+        }], propDecorators: { emptyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyLabel", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], actionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionLabel", required: false }] }], actionHref: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionHref", required: false }] }], grow: [{ type: i0.Input, args: [{ isSignal: true, alias: "grow", required: false }] }] } });
+
+/**
+ * Header de identidad de un vehículo de flota: unidad (patente/id), modelo
+ * (como badge, no texto plano — página 24: "ABC-123" junto a un badge
+ * "TITAN 4X2"), VIN en fuente mono y un estado opcional. Un área de acciones
+ * opcional se proyecta vía `<ng-content select="[actions]">` para no acoplar
+ * el componente a un set fijo de botones — el patrón real de la spec es
+ * `kf-button variant="outline"` (ej. "Llamar", con ícono) + un `primary`
+ * (ej. "Crear Ticket", con ícono "+"):
+ *
+ *   <kf-vehicle-header unit="AB123CD" model="Sprinter 415" vin="9BW..."
+ *     [status]="{ label: 'En ruta', tone: 'ok' }">
+ *     <kf-button actions variant="outline" icon="phone">Llamar</kf-button>
+ *     <kf-button actions icon="plus">Crear Ticket</kf-button>
+ *   </kf-vehicle-header>
+ */
+class VehicleHeader {
+    unit = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "unit" }] : /* istanbul ignore next */ []));
+    model = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "model" }] : /* istanbul ignore next */ []));
+    vin = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "vin" }] : /* istanbul ignore next */ []));
+    status = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "status" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: VehicleHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: VehicleHeader, isStandalone: true, selector: "kf-vehicle-header", inputs: { unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: true, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, vin: { classPropertyName: "vin", publicName: "vin", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kf-vehicle-header__identity\">\n  <span class=\"kf-vehicle-header__unit\">{{ unit() }}</span>\n  @if (model()) {\n    <span class=\"kf-vehicle-header__model\">\n      <kf-text as=\"span\" variant=\"overline-strong\">{{ model() }}</kf-text>\n    </span>\n  }\n  @if (vin()) {\n    <span class=\"kf-vehicle-header__vin\">VIN: {{ vin() }}</span>\n  }\n</div>\n\n@if (status(); as currentStatus) {\n  <span\n    class=\"kf-vehicle-header__status\"\n    [class]=\"'kf-vehicle-header__status--' + (currentStatus.tone ?? 'ok')\"\n  >\n    @if (currentStatus.icon; as iconName) {\n      <kf-icon [name]=\"iconName\" size=\"sm\" />\n    }\n    {{ currentStatus.label }}\n  </span>\n}\n\n<div class=\"kf-vehicle-header__actions\">\n  <ng-content select=\"[actions]\" />\n</div>\n", styles: [":host{display:flex;align-items:center;gap:var(--kf-space-md);padding:var(--kf-space-md);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-md);background:var(--kf-color-surface);font-family:var(--kf-font-body)}.kf-vehicle-header__identity{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--kf-space-sm);flex:1 1 auto;min-width:0}.kf-vehicle-header__unit{font-family:var(--kf-font-title);font-size:1.125rem;font-weight:700;color:var(--kf-color-ink)}.kf-vehicle-header__model{padding:2px var(--kf-space-sm);border-radius:var(--kf-radius-xs);background:var(--kf-color-border)}.kf-vehicle-header__vin{font-family:var(--kf-font-mono);font-size:.8125rem;color:var(--kf-color-text-muted)}.kf-vehicle-header__status{flex:none;display:inline-flex;align-items:center;gap:var(--kf-space-xs);padding:var(--kf-space-xs) var(--kf-space-sm);border-radius:var(--kf-radius-pill);font-size:.75rem;font-weight:600;line-height:1;white-space:nowrap}.kf-vehicle-header__status--ok{background:var(--kf-color-success-soft);color:var(--kf-color-success)}.kf-vehicle-header__status--warn{background:var(--kf-color-warning-soft);color:var(--kf-color-warning)}.kf-vehicle-header__status--crit{background:var(--kf-color-error-soft);color:var(--kf-color-error)}.kf-vehicle-header__actions{flex:none;display:flex;align-items:center;gap:var(--kf-space-sm)}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }, { kind: "component", type: Text, selector: "kf-text", inputs: ["as", "variant", "tone"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: VehicleHeader, decorators: [{
+            type: Component,
+            args: [{ selector: 'kf-vehicle-header', imports: [Icon, Text], template: "<div class=\"kf-vehicle-header__identity\">\n  <span class=\"kf-vehicle-header__unit\">{{ unit() }}</span>\n  @if (model()) {\n    <span class=\"kf-vehicle-header__model\">\n      <kf-text as=\"span\" variant=\"overline-strong\">{{ model() }}</kf-text>\n    </span>\n  }\n  @if (vin()) {\n    <span class=\"kf-vehicle-header__vin\">VIN: {{ vin() }}</span>\n  }\n</div>\n\n@if (status(); as currentStatus) {\n  <span\n    class=\"kf-vehicle-header__status\"\n    [class]=\"'kf-vehicle-header__status--' + (currentStatus.tone ?? 'ok')\"\n  >\n    @if (currentStatus.icon; as iconName) {\n      <kf-icon [name]=\"iconName\" size=\"sm\" />\n    }\n    {{ currentStatus.label }}\n  </span>\n}\n\n<div class=\"kf-vehicle-header__actions\">\n  <ng-content select=\"[actions]\" />\n</div>\n", styles: [":host{display:flex;align-items:center;gap:var(--kf-space-md);padding:var(--kf-space-md);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-md);background:var(--kf-color-surface);font-family:var(--kf-font-body)}.kf-vehicle-header__identity{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--kf-space-sm);flex:1 1 auto;min-width:0}.kf-vehicle-header__unit{font-family:var(--kf-font-title);font-size:1.125rem;font-weight:700;color:var(--kf-color-ink)}.kf-vehicle-header__model{padding:2px var(--kf-space-sm);border-radius:var(--kf-radius-xs);background:var(--kf-color-border)}.kf-vehicle-header__vin{font-family:var(--kf-font-mono);font-size:.8125rem;color:var(--kf-color-text-muted)}.kf-vehicle-header__status{flex:none;display:inline-flex;align-items:center;gap:var(--kf-space-xs);padding:var(--kf-space-xs) var(--kf-space-sm);border-radius:var(--kf-radius-pill);font-size:.75rem;font-weight:600;line-height:1;white-space:nowrap}.kf-vehicle-header__status--ok{background:var(--kf-color-success-soft);color:var(--kf-color-success)}.kf-vehicle-header__status--warn{background:var(--kf-color-warning-soft);color:var(--kf-color-warning)}.kf-vehicle-header__status--crit{background:var(--kf-color-error-soft);color:var(--kf-color-error)}.kf-vehicle-header__actions{flex:none;display:flex;align-items:center;gap:var(--kf-space-sm)}\n"] }]
+        }], propDecorators: { unit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unit", required: true }] }], model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }], vin: [{ type: i0.Input, args: [{ isSignal: true, alias: "vin", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }] } });
+
+/*
+ * Public API Surface of ui/business — entry point secundario, `@kaufmann-lab/ui/business`.
+ *
+ * Componentes que modelan un concepto de negocio real de Kaufmann (una
+ * cotización, una reserva de taller, un vehículo de flota, la empresa activa
+ * de una sesión), no una preocupación de UI transversal — ver
+ * `ENTRY-POINTS.md` en la raíz del repo para el criterio.
+ *
+ * Consume sus piezas base (`Icon`, `Text`, `Select`, `DataTable`, etc.) desde
+ * `'@kaufmann-lab/ui/core'` y los helpers desde `'@kaufmann-lab/ui/shared'`,
+ * nunca desde la raíz `'@kaufmann-lab/ui'` (agregador que depende de todos
+ * los entry points — importarla desde acá cerraría un ciclo) ni por ruta
+ * relativa cruzando la frontera entre entry points (ng-packagr calcula un
+ * `rootDir` propio por entry point y rechaza archivos fuente fuera de él).
+ *
+ * La raíz `'@kaufmann-lab/ui'` los reexporta, así que
+ * `import { QuotePicker } from '@kaufmann-lab/ui'` sigue funcionando igual.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CompanySelector, QuotePicker, ReserveBlock, VehicleHeader };
+//# sourceMappingURL=kaufmann-lab-ui-business.mjs.map