@caribeng/ui 22.2.0 → 22.5.0

package/fesm2022/caribeng-ui-import-wizard.mjs

@@ -0,0 +1,746 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, output, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { injectCbTranslation, cbFormat } from '@caribeng/ui';
+import { CbButton } from '@caribeng/ui/button';
+import { CbCheckbox } from '@caribeng/ui/checkbox';
+import { CbDataGrid } from '@caribeng/ui/datagrid';
+import { CbIcon } from '@caribeng/ui/icon';
+import { CbSelect } from '@caribeng/ui/select';
+import { cbReadXlsx } from '@caribeng/ui/xlsx';
+
+function fold(text) {
+    return text.normalize('NFD').replace(/[̀-ͯ]/g, '').toLowerCase().replace(/[^a-z0-9]/g, '');
+}
+/** Separador más probable de un texto delimitado (tabulador, punto y coma o coma). */
+function detectDelimiter(text) {
+    const line = text.split(/\r?\n/).find((l) => l.trim()) ?? '';
+    const count = (sep) => {
+        let n = 0;
+        let quoted = false;
+        for (const ch of line) {
+            if (ch === '"')
+                quoted = !quoted;
+            else if (ch === sep && !quoted)
+                n++;
+        }
+        return n;
+    };
+    return ['\t', ';', ','].reduce((best, sep) => (count(sep) > count(best) ? sep : best), '\t');
+}
+/** CSV / TSV a filas (comillas dobles, saltos de línea dentro de comillas, BOM). */
+function parseDelimited(text, delimiter = detectDelimiter(text)) {
+    const src = text.replace(/^/, '').replace(/\r\n?/g, '\n');
+    const out = [];
+    let row = [];
+    let cell = '';
+    let quoted = false;
+    for (let i = 0; i < src.length; i++) {
+        const ch = src[i];
+        if (quoted) {
+            if (ch === '"' && src[i + 1] === '"') {
+                cell += '"';
+                i++;
+            }
+            else if (ch === '"')
+                quoted = false;
+            else
+                cell += ch;
+        }
+        else if (ch === '"' && cell === '')
+            quoted = true;
+        else if (ch === delimiter) {
+            row.push(cell);
+            cell = '';
+        }
+        else if (ch === '\n') {
+            row.push(cell);
+            out.push(row);
+            row = [];
+            cell = '';
+        }
+        else
+            cell += ch;
+    }
+    if (cell !== '' || row.length) {
+        row.push(cell);
+        out.push(row);
+    }
+    // Sin filas totalmente vacías al final.
+    while (out.length && out[out.length - 1].every((c) => !c.trim()))
+        out.pop();
+    return out;
+}
+/**
+ * Importe a partir de texto: `$ 1.234,56`, `1,234.56`, `(1.234)` (negativo),
+ * `-1234`, `1.234.567`. Con un solo separador repetido, o seguido de 3 cifras,
+ * se toma como de miles.
+ */
+function parseAmount(value) {
+    if (typeof value === 'number')
+        return Number.isFinite(value) ? value : undefined;
+    if (value === null || value === '' || typeof value === 'boolean')
+        return value === null || value === '' ? null : undefined;
+    let s = value.trim();
+    if (!s)
+        return null;
+    let negative = false;
+    if (/^\(.*\)$/.test(s)) {
+        negative = true;
+        s = s.slice(1, -1);
+    }
+    s = s.replace(/[\s$€£¥]|COP|USD|EUR/gi, '');
+    if (s.startsWith('-')) {
+        negative = !negative;
+        s = s.slice(1);
+    }
+    if (!/^[\d.,]+$/.test(s))
+        return undefined;
+    const comma = s.lastIndexOf(',');
+    const dot = s.lastIndexOf('.');
+    if (comma >= 0 && dot >= 0)
+        s = comma > dot ? s.replace(/\./g, '').replace(',', '.') : s.replace(/,/g, '');
+    else {
+        const sep = comma >= 0 ? ',' : dot >= 0 ? '.' : '';
+        if (sep) {
+            const parts = s.split(sep);
+            const thousands = parts.length > 2 || (parts.length === 2 && parts[1].length === 3 && parts[0].length <= 3 && parts[0] !== '0');
+            s = thousands ? parts.join('') : parts.join('.');
+        }
+    }
+    const n = Number(s);
+    return Number.isFinite(n) ? (negative ? -n : n) : undefined;
+}
+/** Fecha a partir de texto (`AAAA-MM-DD`, `DD/MM/AAAA`, `DD-MM-AAAA`) o de un número de serie de Excel. */
+function parseDate(value) {
+    if (value === null || value === '')
+        return null;
+    if (typeof value === 'number') {
+        if (value < 1 || value > 2958465)
+            return undefined;
+        const utc = new Date(Math.round((value - 25569) * 86400000));
+        return new Date(utc.getUTCFullYear(), utc.getUTCMonth(), utc.getUTCDate());
+    }
+    if (typeof value !== 'string')
+        return undefined;
+    const s = value.trim();
+    let m = /^(\d{4})[-/.](\d{1,2})[-/.](\d{1,2})/.exec(s);
+    let y, mo, d;
+    if (m)
+        [y, mo, d] = [+m[1], +m[2], +m[3]];
+    else if ((m = /^(\d{1,2})[-/.](\d{1,2})[-/.](\d{2,4})$/.exec(s)))
+        [d, mo, y] = [+m[1], +m[2], +m[3] < 100 ? 2000 + +m[3] : +m[3]];
+    else
+        return undefined;
+    const date = new Date(y, mo - 1, d);
+    return date.getMonth() === mo - 1 && date.getDate() === d ? date : undefined;
+}
+const TRUE = new Set(['si', 'sí', 'yes', 'y', 's', 'true', 'verdadero', '1', 'x']);
+const FALSE = new Set(['no', 'n', 'false', 'falso', '0']);
+function parseBoolean(value) {
+    if (typeof value === 'boolean')
+        return value;
+    if (value === null || value === '')
+        return null;
+    const s = String(value).trim().toLowerCase();
+    return TRUE.has(s) ? true : FALSE.has(s) ? false : undefined;
+}
+/** Asigna cada campo a la columna cuyo encabezado coincide con su clave, etiqueta o alias. */
+function autoMap(headers, fields) {
+    const folded = headers.map((h) => fold(String(h ?? '')));
+    const used = new Set();
+    const out = {};
+    for (const f of fields) {
+        const names = [f.key, f.label, ...(f.aliases ?? [])].map(fold);
+        const i = folded.findIndex((h, idx) => !used.has(idx) && h && names.includes(h));
+        out[f.key] = i >= 0 ? i : null;
+        if (i >= 0)
+            used.add(i);
+    }
+    return out;
+}
+/** Convierte las filas con la asignación de columnas: valores con tipo y errores por celda. */
+function convertRows(rows, mapping, fields, texts) {
+    const out = [];
+    const errors = [];
+    rows.forEach((source, i) => {
+        const record = {};
+        const rowErrors = [];
+        for (const f of fields) {
+            const col = mapping[f.key];
+            const raw = col === null || col === undefined ? null : (source[col] ?? null);
+            const type = f.type ?? 'text';
+            let value;
+            let error = null;
+            if (type === 'number') {
+                value = parseAmount(raw);
+                if (value === undefined)
+                    error = texts.number;
+            }
+            else if (type === 'date') {
+                value = parseDate(raw);
+                if (value === undefined)
+                    error = texts.date;
+            }
+            else if (type === 'boolean') {
+                value = parseBoolean(raw);
+                if (value === undefined)
+                    error = texts.boolean;
+            }
+            else
+                value = raw === null ? null : String(raw).trim();
+            if (error)
+                value = raw;
+            else if (f.required && (value === null || value === ''))
+                error = texts.required;
+            record[f.key] = value;
+            if (error)
+                rowErrors.push({ row: i + 1, field: f.key, message: error });
+        }
+        for (const f of fields) {
+            if (rowErrors.some((e) => e.field === f.key) || !f.validate)
+                continue;
+            const message = f.validate(record[f.key], record);
+            if (message)
+                rowErrors.push({ row: i + 1, field: f.key, message });
+        }
+        out.push(record);
+        errors.push(...rowErrors);
+    });
+    return { rows: out, errors };
+}
+
+let nextUid = 0;
+/**
+ * Asistente de importación de CaribeNG: archivo (CSV, TSV, Excel o datos pegados),
+ * asignación de columnas y revisión con validación fila a fila antes de importar.
+ *
+ * - Lee .xlsx en el navegador (varias hojas), CSV con `,` o `;` y lo copiado de una hoja de cálculo.
+ * - Asigna sola cada columna cuyo encabezado coincide con el campo (o sus `aliases`).
+ * - Interpreta importes (`$ 1.234,56`, `(1.234)`), fechas (`DD/MM/AAAA`, serie de Excel)
+ *   y casillas (Sí / No); marca cada celda con error y deja importar solo las filas válidas.
+ *
+ * @example
+ * ```html
+ * <cb-import-wizard [fields]="campos" (import)="guardar($event.rows)" />
+ * ```
+ */
+class CbImportWizard {
+    constructor() {
+        this.t = injectCbTranslation();
+        this.fmt = cbFormat;
+        this.uid = `cb-import-wizard-${++nextUid}`;
+        this.steps = ['file', 'map', 'review'];
+        this.accept = '.csv,.tsv,.txt,.xlsx,text/csv,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
+        /** Campos de destino (clave, etiqueta, tipo, obligatorio, alias y validación). */
+        this.fields = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fields" }] : /* istanbul ignore next */ []));
+        /** Importa también las filas con errores (marcadas en `errors`). */
+        this.allowInvalid = input(false, { ...(ngDevMode ? { debugName: "allowInvalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Filas importadas (con tipo) y errores encontrados. */
+        this.import = output();
+        this.step = signal('file', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+        this.stepIndex = computed(() => this.steps.indexOf(this.step()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "stepIndex" }] : /* istanbul ignore next */ []));
+        this.dragging = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
+        this.pasteOpen = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pasteOpen" }] : /* istanbul ignore next */ []));
+        this.fileName = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fileName" }] : /* istanbul ignore next */ []));
+        this.error = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+        this.sheets = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sheets" }] : /* istanbul ignore next */ []));
+        this.sheetIndex = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sheetIndex" }] : /* istanbul ignore next */ []));
+        this.text = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+        this.hasHeader = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasHeader" }] : /* istanbul ignore next */ []));
+        this.mapping = signal({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mapping" }] : /* istanbul ignore next */ []));
+        this.onlyValid = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "onlyValid" }] : /* istanbul ignore next */ []));
+        /** Filas leídas (de la hoja elegida o del texto). */
+        this.raw = computed(() => {
+            const sheets = this.sheets();
+            const rows = sheets.length ? (sheets[this.sheetIndex()]?.rows ?? []) : this.text();
+            return rows.filter((r) => r.some((c) => c !== null && c !== ''));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "raw" }] : /* istanbul ignore next */ []));
+        this.headers = computed(() => {
+            const raw = this.raw();
+            const width = Math.max(0, ...raw.map((r) => r.length));
+            const first = raw[0] ?? [];
+            return Array.from({ length: width }, (_, i) => (this.hasHeader() ? String(first[i] ?? '').trim() || this.columnName(i) : this.columnName(i)));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "headers" }] : /* istanbul ignore next */ []));
+        this.dataRows = computed(() => (this.hasHeader() ? this.raw().slice(1) : this.raw()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dataRows" }] : /* istanbul ignore next */ []));
+        this.sheetOptions = computed(() => this.sheets().map((s, i) => ({ label: s.name, value: i })), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sheetOptions" }] : /* istanbul ignore next */ []));
+        this.columnOptions = computed(() => [{ label: this.t().importUnmapped, value: -1 }, ...this.headers().map((h, i) => ({ label: h, value: i }))], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "columnOptions" }] : /* istanbul ignore next */ []));
+        this.missing = computed(() => this.fields().filter((f) => f.required && this.mapping()[f.key] == null).map((f) => f.label), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "missing" }] : /* istanbul ignore next */ []));
+        this.texts = computed(() => {
+            const t = this.t();
+            return { required: t.importErrRequired, number: t.importErrNumber, date: t.importErrDate, boolean: t.importErrBoolean };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "texts" }] : /* istanbul ignore next */ []));
+        this.converted = computed(() => convertRows(this.dataRows(), this.mapping(), this.fields(), this.texts()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "converted" }] : /* istanbul ignore next */ []));
+        this.invalidRows = computed(() => new Set(this.converted().errors.map((e) => e.row)), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "invalidRows" }] : /* istanbul ignore next */ []));
+        this.validCount = computed(() => this.converted().rows.length - this.invalidRows().size, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "validCount" }] : /* istanbul ignore next */ []));
+        this.errorIndex = computed(() => {
+            const map = new Map();
+            for (const e of this.converted().errors)
+                map.set(`${e.row}|${e.field}`, e.message);
+            return map;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "errorIndex" }] : /* istanbul ignore next */ []));
+        this.previewRows = computed(() => this.converted().rows.map((r, i) => {
+            const out = { __row: i + 1 };
+            for (const f of this.fields()) {
+                const v = r[f.key];
+                out[f.key] = v instanceof Date ? `${v.getFullYear()}-${String(v.getMonth() + 1).padStart(2, '0')}-${String(v.getDate()).padStart(2, '0')}` : v;
+            }
+            return out;
+        }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "previewRows" }] : /* istanbul ignore next */ []));
+        this.previewColumns = computed(() => this.fields().map((f) => ({
+            field: f.key,
+            header: f.label,
+            type: f.type === 'number' ? 'number' : f.type === 'date' ? 'date' : f.type === 'boolean' ? 'checkbox' : 'text',
+            decimals: f.type === 'number' ? 2 : undefined,
+            sortable: false,
+            // Los errores vienen de la conversión (el valor original se muestra tal cual).
+            format: (value, row) => (this.errorIndex().has(`${row['__row']}|${f.key}`) ? String(value ?? '') : this.plain(value, f)),
+            validate: (_, row) => this.errorIndex().get(`${row['__row']}|${f.key}`) ?? null,
+        })), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "previewColumns" }] : /* istanbul ignore next */ []));
+        this.importable = computed(() => (this.onlyValid() && !this.allowInvalid() ? this.validCount() : this.converted().rows.length), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "importable" }] : /* istanbul ignore next */ []));
+    }
+    stepLabel(step) {
+        const t = this.t();
+        return step === 'file' ? t.importStepFile : step === 'map' ? t.importStepMap : t.importStepReview;
+    }
+    columnName(i) {
+        let n = i + 1;
+        let s = '';
+        while (n > 0) {
+            s = String.fromCharCode(65 + ((n - 1) % 26)) + s;
+            n = Math.floor((n - 1) / 26);
+        }
+        return cbFormat(this.t().importColumnN, s);
+    }
+    example(key) {
+        const col = this.mapping()[key];
+        if (col == null)
+            return '';
+        const v = this.dataRows().find((r) => r[col] !== null && r[col] !== '')?.[col];
+        if (v == null)
+            return '';
+        // El ejemplo se muestra ya interpretado (una fecha de Excel llega como número de serie).
+        const field = this.fields().find((f) => f.key === key);
+        if (field?.type === 'date') {
+            const d = parseDate(v);
+            if (d)
+                return new Intl.DateTimeFormat(this.t().intlLocale, { dateStyle: 'medium' }).format(d);
+        }
+        return String(v);
+    }
+    plain(value, f) {
+        if (value === null || value === undefined)
+            return '';
+        if (f.type === 'number' && typeof value === 'number')
+            return new Intl.NumberFormat(this.t().intlLocale, { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(value);
+        if (f.type === 'date' && typeof value === 'string') {
+            const [y, m, d] = value.split('-').map(Number);
+            return new Intl.DateTimeFormat(this.t().intlLocale, { dateStyle: 'medium' }).format(new Date(y, m - 1, d));
+        }
+        if (f.type === 'boolean')
+            return value ? this.t().yes : this.t().no;
+        return String(value);
+    }
+    // --- Archivo -----------------------------------------------------------------------------
+    onDrop(event) {
+        event.preventDefault();
+        this.dragging.set(false);
+        const file = event.dataTransfer?.files?.[0];
+        if (file)
+            void this.load(file);
+    }
+    onFile(event) {
+        const file = event.target.files?.[0];
+        if (file)
+            void this.load(file);
+    }
+    onPaste(event) {
+        const text = event.target.value;
+        this.fileName.set('');
+        this.sheets.set([]);
+        this.loadText(text);
+    }
+    /** Carga un archivo (.xlsx, .csv, .tsv, .txt). */
+    async load(file) {
+        this.error.set('');
+        this.fileName.set(file.name);
+        try {
+            if (/\.xlsx$/i.test(file.name) || file.type.includes('spreadsheetml')) {
+                const sheets = await cbReadXlsx(file);
+                if (!sheets.length)
+                    throw new Error();
+                this.sheets.set(sheets);
+                this.sheetIndex.set(0);
+                this.text.set([]);
+            }
+            else {
+                this.sheets.set([]);
+                this.loadText(await file.text());
+            }
+            this.remap();
+        }
+        catch {
+            this.error.set(this.t().importErrFile);
+        }
+    }
+    /** Carga texto delimitado (CSV, TSV o lo pegado de una hoja de cálculo). */
+    loadText(text) {
+        this.text.set(parseDelimited(text));
+        this.remap();
+    }
+    setHeader(value) {
+        this.hasHeader.set(value);
+        this.remap();
+    }
+    setMapping(key, column) {
+        this.mapping.update((m) => ({ ...m, [key]: column < 0 ? null : column }));
+    }
+    remap() {
+        this.mapping.set(this.hasHeader() ? autoMap(this.headers(), this.fields()) : Object.fromEntries(this.fields().map((f) => [f.key, null])));
+    }
+    // --- Pasos -------------------------------------------------------------------------------
+    canNext() {
+        return this.step() === 'file' ? this.dataRows().length > 0 : this.missing().length === 0;
+    }
+    next() {
+        if (!this.canNext())
+            return;
+        this.step.set(this.step() === 'file' ? 'map' : 'review');
+        this.focusHeading();
+    }
+    back() {
+        this.step.set(this.step() === 'review' ? 'map' : 'file');
+        this.focusHeading();
+    }
+    finish() {
+        const only = this.onlyValid() && !this.allowInvalid();
+        const { rows, errors } = this.converted();
+        const invalid = this.invalidRows();
+        const kept = only ? rows.filter((_, i) => !invalid.has(i + 1)) : rows;
+        this.import.emit({ rows: kept, errors, skipped: rows.length - kept.length });
+    }
+    /** Vuelve al primer paso sin datos. */
+    reset() {
+        this.step.set('file');
+        this.text.set([]);
+        this.sheets.set([]);
+        this.fileName.set('');
+        this.error.set('');
+        this.mapping.set({});
+    }
+    focusHeading() {
+        queueMicrotask(() => document.getElementById(`${this.uid}-heading`)?.focus());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbImportWizard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbImportWizard, isStandalone: true, selector: "cb-import-wizard", inputs: { fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: false, transformFunction: null }, allowInvalid: { classPropertyName: "allowInvalid", publicName: "allowInvalid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { import: "import" }, host: { classAttribute: "cb-import-wizard" }, ngImport: i0, template: `
+    <ol class="cb-iw__steps">
+      @for (s of steps; track s; let i = $index) {
+        <li class="cb-iw__step" [class.cb-is-done]="stepIndex() > i" [attr.aria-current]="step() === s ? 'step' : null">
+          <span class="cb-iw__step-num" aria-hidden="true">
+            @if (stepIndex() > i) {
+              <cb-icon name="check" [size]="13" />
+            } @else {
+              {{ i + 1 }}
+            }
+          </span>
+          {{ stepLabel(s) }}
+        </li>
+      }
+    </ol>
+
+    <section class="cb-iw__panel" [attr.aria-labelledby]="uid + '-heading'">
+      <h3 class="cb-iw__heading" [id]="uid + '-heading'" tabindex="-1">{{ stepLabel(step()) }}</h3>
+
+      @switch (step()) {
+        @case ('file') {
+          <div
+            class="cb-iw__drop"
+            [class.cb-is-over]="dragging()"
+            (dragover)="$event.preventDefault(); dragging.set(true)"
+            (dragleave)="dragging.set(false)"
+            (drop)="onDrop($event)"
+          >
+            <cb-icon name="upload" [size]="28" aria-hidden="true" />
+            <p>{{ t().importDrop }}</p>
+            <label class="cb-iw__file">
+              <input type="file" [attr.accept]="accept" (change)="onFile($event)" />
+              <span>{{ t().importChoose }}</span>
+            </label>
+            @if (fileName()) {
+              <p class="cb-iw__file-name">{{ fileName() }}</p>
+            }
+          </div>
+          <details class="cb-iw__paste" [open]="pasteOpen()">
+            <summary (click)="$event.preventDefault(); pasteOpen.set(!pasteOpen())">{{ t().importPaste }}</summary>
+            <textarea class="cb-iw__textarea" rows="5" [attr.aria-label]="t().importPaste" [placeholder]="t().importPasteHint" (input)="onPaste($event)"></textarea>
+          </details>
+          @if (sheets().length > 1) {
+            <div class="cb-iw__row">
+              <span class="cb-iw__label" [id]="uid + '-sheet'">{{ t().importSheet }}</span>
+              <cb-select [ariaLabelledBy]="uid + '-sheet'" [options]="sheetOptions()" optionValue="value" [value]="sheetIndex()" (valueChange)="sheetIndex.set($any($event))" />
+            </div>
+          }
+          @if (error()) {
+            <p class="cb-iw__error" role="alert">{{ error() }}</p>
+          }
+          @if (raw().length) {
+            <cb-checkbox [label]="t().importHeader" [ngModel]="hasHeader()" (ngModelChange)="setHeader($event)" />
+            <p class="cb-iw__info">{{ fmt(t().importRowsRead, dataRows().length, headers().length) }}</p>
+            <div class="cb-iw__sample-wrap">
+              <table class="cb-iw__sample" [attr.aria-label]="t().importSample">
+                <thead>
+                  <tr>
+                    @for (h of headers(); track $index) {
+                      <th scope="col">{{ h }}</th>
+                    }
+                  </tr>
+                </thead>
+                <tbody>
+                  @for (r of dataRows().slice(0, 5); track $index) {
+                    <tr>
+                      @for (h of headers(); track $index; let c = $index) {
+                        <td>{{ r[c] }}</td>
+                      }
+                    </tr>
+                  }
+                </tbody>
+              </table>
+            </div>
+          }
+        }
+        @case ('map') {
+          <p class="cb-iw__info">{{ t().importMapHint }}</p>
+          <table class="cb-iw__map">
+            <thead>
+              <tr>
+                <th scope="col">{{ t().importField }}</th>
+                <th scope="col">{{ t().importColumn }}</th>
+                <th scope="col">{{ t().importExample }}</th>
+              </tr>
+            </thead>
+            <tbody>
+              @for (f of fields(); track f.key) {
+                <tr>
+                  <th scope="row" [id]="uid + '-f-' + f.key">
+                    {{ f.label }}
+                    @if (f.required) {
+                      <span class="cb-iw__req" aria-hidden="true">*</span>
+                      <span class="cb-iw__sr">({{ t().required }})</span>
+                    }
+                  </th>
+                  <td>
+                    <cb-select [ariaLabelledBy]="uid + '-f-' + f.key" [options]="columnOptions()" optionValue="value" [value]="mapping()[f.key] ?? -1" (valueChange)="setMapping(f.key, $any($event))" [invalid]="!!f.required && mapping()[f.key] == null" />
+                  </td>
+                  <td class="cb-iw__example">{{ example(f.key) }}</td>
+                </tr>
+              }
+            </tbody>
+          </table>
+          @if (missing().length) {
+            <p class="cb-iw__error" role="alert">{{ fmt(t().importMissing, missing().join(', ')) }}</p>
+          }
+        }
+        @case ('review') {
+          <div class="cb-iw__summary" role="status">
+            <span class="cb-iw__badge cb-iw__badge--ok"><cb-icon name="check" [size]="14" aria-hidden="true" /> {{ fmt(t().importValid, validCount()) }}</span>
+            @if (invalidRows().size) {
+              <span class="cb-iw__badge cb-iw__badge--bad"><cb-icon name="circle-alert" [size]="14" aria-hidden="true" /> {{ fmt(t().importInvalid, invalidRows().size) }}</span>
+            }
+          </div>
+          @if (invalidRows().size) {
+            <cb-checkbox [label]="t().importOnlyValid" [ngModel]="onlyValid()" (ngModelChange)="onlyValid.set($event)" />
+          }
+          <cb-data-grid [rows]="previewRows()" [columns]="previewColumns()" dataKey="__row" [editable]="false" [toolbar]="false" scrollHeight="20rem" [ariaLabel]="t().importPreview" />
+        }
+      }
+    </section>
+
+    <div class="cb-iw__actions">
+      @if (step() !== 'file') {
+        <cb-button variant="text" severity="secondary" (click)="back()">{{ t().importBack }}</cb-button>
+      }
+      <span class="cb-iw__spacer"></span>
+      @if (step() !== 'review') {
+        <cb-button [disabled]="!canNext()" (click)="next()">{{ t().importNext }}</cb-button>
+      } @else {
+        <cb-button [disabled]="!importable()" (click)="finish()">{{ fmt(t().importDo, importable()) }}</cb-button>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:grid;gap:var(--cb-space-4, 1rem);width:100%;min-width:0;color:var(--cb-color-text);font-family:var(--cb-font-sans);font-size:var(--cb-text-sm, .875rem)}.cb-iw__steps{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin:0;padding:0;list-style:none}.cb-iw__step{display:inline-flex;align-items:center;gap:.5rem;color:var(--cb-color-text-muted)}.cb-iw__step-num{display:inline-flex;align-items:center;justify-content:center;width:1.6rem;height:1.6rem;border:1.5px solid var(--cb-color-border-strong);border-radius:999px;font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-semibold, 600)}.cb-iw__step[aria-current=step]{color:var(--cb-color-text);font-weight:var(--cb-font-weight-semibold, 600)}.cb-iw__step[aria-current=step] .cb-iw__step-num{border-color:var(--cb-color-primary-500);background:var(--cb-color-primary-500);color:var(--cb-color-primary-contrast, #fff)}.cb-iw__step.cb-is-done .cb-iw__step-num{border-color:var(--cb-color-success-500, #10b981);color:var(--cb-color-success-text, #059669)}.cb-iw__panel{display:grid;gap:var(--cb-space-3, .75rem);min-width:0}.cb-iw__heading{margin:0;font-size:var(--cb-text-base, 1rem);font-weight:var(--cb-font-weight-semibold, 600);outline:none}.cb-iw__drop{display:grid;justify-items:center;gap:.4rem;padding:1.5rem 1rem;border:2px dashed var(--cb-color-border-strong);border-radius:var(--cb-radius-lg, .75rem);background:var(--cb-color-surface-subtle);color:var(--cb-color-text-muted);text-align:center}.cb-iw__drop.cb-is-over{border-color:var(--cb-color-primary-500);background:color-mix(in srgb,var(--cb-color-primary-500) 8%,transparent)}.cb-iw__drop p{margin:0}.cb-iw__file input{position:absolute;width:1px;height:1px;opacity:0}.cb-iw__file span{display:inline-flex;align-items:center;height:2rem;padding:0 .85rem;border:1px solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);background:var(--cb-color-bg);color:var(--cb-color-text);cursor:pointer}.cb-iw__file:focus-within span{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-iw__file-name{color:var(--cb-color-text);font-weight:var(--cb-font-weight-medium, 500)}.cb-iw__paste summary{cursor:pointer;color:var(--cb-color-primary-text, var(--cb-color-primary-700))}.cb-iw__textarea{box-sizing:border-box;width:100%;margin-top:.5rem;padding:.5rem .65rem;border:1px solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);background:var(--cb-color-bg);color:var(--cb-color-text);font-family:var(--cb-font-mono, monospace);font-size:var(--cb-text-xs, .75rem)}.cb-iw__row{display:grid;gap:.25rem;max-width:20rem}.cb-iw__label{font-weight:var(--cb-font-weight-medium, 500)}.cb-iw__info{margin:0;color:var(--cb-color-text-muted)}.cb-iw__error{margin:0;color:var(--cb-color-danger-text, #dc2626)}.cb-iw__sample-wrap{overflow-x:auto;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md)}.cb-iw__sample,.cb-iw__map{width:100%;border-collapse:collapse}.cb-iw__sample th,.cb-iw__sample td,.cb-iw__map th,.cb-iw__map td{padding:.4rem .6rem;border-bottom:1px solid var(--cb-color-border);text-align:start;white-space:nowrap}.cb-iw__sample thead th,.cb-iw__map thead th{background:var(--cb-color-surface-subtle);color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-semibold, 600)}.cb-iw__map tbody th{font-weight:var(--cb-font-weight-medium, 500)}.cb-iw__map td:nth-child(2){width:16rem}.cb-iw__example{max-width:14rem;overflow:hidden;color:var(--cb-color-text-muted);text-overflow:ellipsis}.cb-iw__req{margin-left:.15rem;color:var(--cb-color-danger-500, #ef4444)}.cb-iw__summary{display:flex;flex-wrap:wrap;gap:.5rem}.cb-iw__badge{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .7rem;border-radius:999px;font-weight:var(--cb-font-weight-medium, 500)}.cb-iw__badge--ok{background:color-mix(in srgb,var(--cb-color-success-500, #10b981) 12%,transparent);color:var(--cb-color-success-text, #047857)}.cb-iw__badge--bad{background:color-mix(in srgb,var(--cb-color-danger-500, #ef4444) 10%,transparent);color:var(--cb-color-danger-text, #b91c1c)}.cb-iw__actions{display:flex;align-items:center;gap:.5rem}.cb-iw__spacer{flex:1}.cb-iw__sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}\n"], dependencies: [{ 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: CbButton, selector: "cb-button", inputs: ["severity", "variant", "size", "disabled", "loading", "fullWidth", "type", "ariaLabel", "ariaHaspopup", "ariaExpanded", "ariaControls"] }, { kind: "component", type: CbCheckbox, selector: "cb-checkbox", inputs: ["label", "ariaLabel", "size", "value", "indeterminate", "invalid", "required", "requiredIndicator", "disabled", "inputId"], outputs: ["changed"] }, { kind: "component", type: CbDataGrid, selector: "cb-data-grid", inputs: ["rows", "columns", "dataKey", "editable", "rowNumbers", "toolbar", "scrollHeight", "newRow", "emptyMessage", "ariaLabel", "currency", "negativeStyle"], outputs: ["rowsChange", "cellChange", "rowAdd", "rowsDelete"] }, { kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }, { kind: "component", type: CbSelect, selector: "cb-select", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "group", "optionGroupLabel", "optionGroupChildren", "placeholder", "size", "filter", "filterPlaceholder", "emptyMessage", "showClear", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "invalid", "disabled", "inputId", "ariaLabel", "ariaLabelledBy", "value"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbImportWizard, decorators: [{
+            type: Component,
+            args: [{ selector: 'cb-import-wizard', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [FormsModule, CbButton, CbCheckbox, CbDataGrid, CbIcon, CbSelect], host: { class: 'cb-import-wizard' }, template: `
+    <ol class="cb-iw__steps">
+      @for (s of steps; track s; let i = $index) {
+        <li class="cb-iw__step" [class.cb-is-done]="stepIndex() > i" [attr.aria-current]="step() === s ? 'step' : null">
+          <span class="cb-iw__step-num" aria-hidden="true">
+            @if (stepIndex() > i) {
+              <cb-icon name="check" [size]="13" />
+            } @else {
+              {{ i + 1 }}
+            }
+          </span>
+          {{ stepLabel(s) }}
+        </li>
+      }
+    </ol>
+
+    <section class="cb-iw__panel" [attr.aria-labelledby]="uid + '-heading'">
+      <h3 class="cb-iw__heading" [id]="uid + '-heading'" tabindex="-1">{{ stepLabel(step()) }}</h3>
+
+      @switch (step()) {
+        @case ('file') {
+          <div
+            class="cb-iw__drop"
+            [class.cb-is-over]="dragging()"
+            (dragover)="$event.preventDefault(); dragging.set(true)"
+            (dragleave)="dragging.set(false)"
+            (drop)="onDrop($event)"
+          >
+            <cb-icon name="upload" [size]="28" aria-hidden="true" />
+            <p>{{ t().importDrop }}</p>
+            <label class="cb-iw__file">
+              <input type="file" [attr.accept]="accept" (change)="onFile($event)" />
+              <span>{{ t().importChoose }}</span>
+            </label>
+            @if (fileName()) {
+              <p class="cb-iw__file-name">{{ fileName() }}</p>
+            }
+          </div>
+          <details class="cb-iw__paste" [open]="pasteOpen()">
+            <summary (click)="$event.preventDefault(); pasteOpen.set(!pasteOpen())">{{ t().importPaste }}</summary>
+            <textarea class="cb-iw__textarea" rows="5" [attr.aria-label]="t().importPaste" [placeholder]="t().importPasteHint" (input)="onPaste($event)"></textarea>
+          </details>
+          @if (sheets().length > 1) {
+            <div class="cb-iw__row">
+              <span class="cb-iw__label" [id]="uid + '-sheet'">{{ t().importSheet }}</span>
+              <cb-select [ariaLabelledBy]="uid + '-sheet'" [options]="sheetOptions()" optionValue="value" [value]="sheetIndex()" (valueChange)="sheetIndex.set($any($event))" />
+            </div>
+          }
+          @if (error()) {
+            <p class="cb-iw__error" role="alert">{{ error() }}</p>
+          }
+          @if (raw().length) {
+            <cb-checkbox [label]="t().importHeader" [ngModel]="hasHeader()" (ngModelChange)="setHeader($event)" />
+            <p class="cb-iw__info">{{ fmt(t().importRowsRead, dataRows().length, headers().length) }}</p>
+            <div class="cb-iw__sample-wrap">
+              <table class="cb-iw__sample" [attr.aria-label]="t().importSample">
+                <thead>
+                  <tr>
+                    @for (h of headers(); track $index) {
+                      <th scope="col">{{ h }}</th>
+                    }
+                  </tr>
+                </thead>
+                <tbody>
+                  @for (r of dataRows().slice(0, 5); track $index) {
+                    <tr>
+                      @for (h of headers(); track $index; let c = $index) {
+                        <td>{{ r[c] }}</td>
+                      }
+                    </tr>
+                  }
+                </tbody>
+              </table>
+            </div>
+          }
+        }
+        @case ('map') {
+          <p class="cb-iw__info">{{ t().importMapHint }}</p>
+          <table class="cb-iw__map">
+            <thead>
+              <tr>
+                <th scope="col">{{ t().importField }}</th>
+                <th scope="col">{{ t().importColumn }}</th>
+                <th scope="col">{{ t().importExample }}</th>
+              </tr>
+            </thead>
+            <tbody>
+              @for (f of fields(); track f.key) {
+                <tr>
+                  <th scope="row" [id]="uid + '-f-' + f.key">
+                    {{ f.label }}
+                    @if (f.required) {
+                      <span class="cb-iw__req" aria-hidden="true">*</span>
+                      <span class="cb-iw__sr">({{ t().required }})</span>
+                    }
+                  </th>
+                  <td>
+                    <cb-select [ariaLabelledBy]="uid + '-f-' + f.key" [options]="columnOptions()" optionValue="value" [value]="mapping()[f.key] ?? -1" (valueChange)="setMapping(f.key, $any($event))" [invalid]="!!f.required && mapping()[f.key] == null" />
+                  </td>
+                  <td class="cb-iw__example">{{ example(f.key) }}</td>
+                </tr>
+              }
+            </tbody>
+          </table>
+          @if (missing().length) {
+            <p class="cb-iw__error" role="alert">{{ fmt(t().importMissing, missing().join(', ')) }}</p>
+          }
+        }
+        @case ('review') {
+          <div class="cb-iw__summary" role="status">
+            <span class="cb-iw__badge cb-iw__badge--ok"><cb-icon name="check" [size]="14" aria-hidden="true" /> {{ fmt(t().importValid, validCount()) }}</span>
+            @if (invalidRows().size) {
+              <span class="cb-iw__badge cb-iw__badge--bad"><cb-icon name="circle-alert" [size]="14" aria-hidden="true" /> {{ fmt(t().importInvalid, invalidRows().size) }}</span>
+            }
+          </div>
+          @if (invalidRows().size) {
+            <cb-checkbox [label]="t().importOnlyValid" [ngModel]="onlyValid()" (ngModelChange)="onlyValid.set($event)" />
+          }
+          <cb-data-grid [rows]="previewRows()" [columns]="previewColumns()" dataKey="__row" [editable]="false" [toolbar]="false" scrollHeight="20rem" [ariaLabel]="t().importPreview" />
+        }
+      }
+    </section>
+
+    <div class="cb-iw__actions">
+      @if (step() !== 'file') {
+        <cb-button variant="text" severity="secondary" (click)="back()">{{ t().importBack }}</cb-button>
+      }
+      <span class="cb-iw__spacer"></span>
+      @if (step() !== 'review') {
+        <cb-button [disabled]="!canNext()" (click)="next()">{{ t().importNext }}</cb-button>
+      } @else {
+        <cb-button [disabled]="!importable()" (click)="finish()">{{ fmt(t().importDo, importable()) }}</cb-button>
+      }
+    </div>
+  `, styles: [":host{display:grid;gap:var(--cb-space-4, 1rem);width:100%;min-width:0;color:var(--cb-color-text);font-family:var(--cb-font-sans);font-size:var(--cb-text-sm, .875rem)}.cb-iw__steps{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin:0;padding:0;list-style:none}.cb-iw__step{display:inline-flex;align-items:center;gap:.5rem;color:var(--cb-color-text-muted)}.cb-iw__step-num{display:inline-flex;align-items:center;justify-content:center;width:1.6rem;height:1.6rem;border:1.5px solid var(--cb-color-border-strong);border-radius:999px;font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-semibold, 600)}.cb-iw__step[aria-current=step]{color:var(--cb-color-text);font-weight:var(--cb-font-weight-semibold, 600)}.cb-iw__step[aria-current=step] .cb-iw__step-num{border-color:var(--cb-color-primary-500);background:var(--cb-color-primary-500);color:var(--cb-color-primary-contrast, #fff)}.cb-iw__step.cb-is-done .cb-iw__step-num{border-color:var(--cb-color-success-500, #10b981);color:var(--cb-color-success-text, #059669)}.cb-iw__panel{display:grid;gap:var(--cb-space-3, .75rem);min-width:0}.cb-iw__heading{margin:0;font-size:var(--cb-text-base, 1rem);font-weight:var(--cb-font-weight-semibold, 600);outline:none}.cb-iw__drop{display:grid;justify-items:center;gap:.4rem;padding:1.5rem 1rem;border:2px dashed var(--cb-color-border-strong);border-radius:var(--cb-radius-lg, .75rem);background:var(--cb-color-surface-subtle);color:var(--cb-color-text-muted);text-align:center}.cb-iw__drop.cb-is-over{border-color:var(--cb-color-primary-500);background:color-mix(in srgb,var(--cb-color-primary-500) 8%,transparent)}.cb-iw__drop p{margin:0}.cb-iw__file input{position:absolute;width:1px;height:1px;opacity:0}.cb-iw__file span{display:inline-flex;align-items:center;height:2rem;padding:0 .85rem;border:1px solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);background:var(--cb-color-bg);color:var(--cb-color-text);cursor:pointer}.cb-iw__file:focus-within span{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-iw__file-name{color:var(--cb-color-text);font-weight:var(--cb-font-weight-medium, 500)}.cb-iw__paste summary{cursor:pointer;color:var(--cb-color-primary-text, var(--cb-color-primary-700))}.cb-iw__textarea{box-sizing:border-box;width:100%;margin-top:.5rem;padding:.5rem .65rem;border:1px solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);background:var(--cb-color-bg);color:var(--cb-color-text);font-family:var(--cb-font-mono, monospace);font-size:var(--cb-text-xs, .75rem)}.cb-iw__row{display:grid;gap:.25rem;max-width:20rem}.cb-iw__label{font-weight:var(--cb-font-weight-medium, 500)}.cb-iw__info{margin:0;color:var(--cb-color-text-muted)}.cb-iw__error{margin:0;color:var(--cb-color-danger-text, #dc2626)}.cb-iw__sample-wrap{overflow-x:auto;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md)}.cb-iw__sample,.cb-iw__map{width:100%;border-collapse:collapse}.cb-iw__sample th,.cb-iw__sample td,.cb-iw__map th,.cb-iw__map td{padding:.4rem .6rem;border-bottom:1px solid var(--cb-color-border);text-align:start;white-space:nowrap}.cb-iw__sample thead th,.cb-iw__map thead th{background:var(--cb-color-surface-subtle);color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-semibold, 600)}.cb-iw__map tbody th{font-weight:var(--cb-font-weight-medium, 500)}.cb-iw__map td:nth-child(2){width:16rem}.cb-iw__example{max-width:14rem;overflow:hidden;color:var(--cb-color-text-muted);text-overflow:ellipsis}.cb-iw__req{margin-left:.15rem;color:var(--cb-color-danger-500, #ef4444)}.cb-iw__summary{display:flex;flex-wrap:wrap;gap:.5rem}.cb-iw__badge{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .7rem;border-radius:999px;font-weight:var(--cb-font-weight-medium, 500)}.cb-iw__badge--ok{background:color-mix(in srgb,var(--cb-color-success-500, #10b981) 12%,transparent);color:var(--cb-color-success-text, #047857)}.cb-iw__badge--bad{background:color-mix(in srgb,var(--cb-color-danger-500, #ef4444) 10%,transparent);color:var(--cb-color-danger-text, #b91c1c)}.cb-iw__actions{display:flex;align-items:center;gap:.5rem}.cb-iw__spacer{flex:1}.cb-iw__sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}\n"] }]
+        }], propDecorators: { fields: [{ type: i0.Input, args: [{ isSignal: true, alias: "fields", required: false }] }], allowInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowInvalid", required: false }] }], import: [{ type: i0.Output, args: ["import"] }] } });
+
+/*
+ * Public API Surface de @caribeng/ui/import-wizard
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CbImportWizard, autoMap, convertRows, detectDelimiter, parseAmount, parseBoolean, parseDate, parseDelimited };