@libs-ui/components-spreadsheet 0.2.356-43

package/fesm2022/libs-ui-components-spreadsheet.mjs

@@ -0,0 +1,1350 @@
+import * as i0 from '@angular/core';
+import { signal, input, output, viewChild, inject, NgZone, effect, untracked, Component, ChangeDetectionStrategy } from '@angular/core';
+import { Tools, BooleanNumber, LocaleType, Univer, UniverInstanceType } from '@univerjs/core';
+import { defaultTheme } from '@univerjs/design';
+import { UniverDocsPlugin } from '@univerjs/docs';
+import { UniverDocsUIPlugin } from '@univerjs/docs-ui';
+import { UniverFormulaEnginePlugin } from '@univerjs/engine-formula';
+import { UniverRenderEnginePlugin } from '@univerjs/engine-render';
+import { FUniver } from '@univerjs/facade';
+import { InsertColMutation, RemoveColMutation, MoveColsMutation, UniverSheetsPlugin } from '@univerjs/sheets';
+import { UniverSheetsFormulaPlugin } from '@univerjs/sheets-formula';
+import { UniverSheetsFormulaUIPlugin } from '@univerjs/sheets-formula-ui';
+import { getPatternPreview, UniverSheetsNumfmtPlugin } from '@univerjs/sheets-numfmt';
+import { UniverSheetsUIPlugin } from '@univerjs/sheets-ui';
+import { UniverUIPlugin } from '@univerjs/ui';
+import DesignEnUS from '@univerjs/design/lib/locale/en-US.json';
+import DesignViVN from '@univerjs/design/lib/locale/vi-VN.json';
+import DocsUIEnUS from '@univerjs/docs-ui/lib/locale/en-US.json';
+import DocsUIViVN from '@univerjs/docs-ui/lib/locale/vi-VN.json';
+import SheetsEnUS from '@univerjs/sheets/lib/locale/en-US.json';
+import SheetsViVN from '@univerjs/sheets/lib/locale/vi-VN.json';
+import SheetsFormulaUIEnUS from '@univerjs/sheets-formula-ui/lib/locale/en-US.json';
+import SheetsFormulaUIViVN from '@univerjs/sheets-formula-ui/lib/locale/vi-VN.json';
+import SheetsUIEnUS from '@univerjs/sheets-ui/lib/locale/en-US.json';
+import SheetsUIViVN from '@univerjs/sheets-ui/lib/locale/vi-VN.json';
+import UIEnUS from '@univerjs/ui/lib/locale/en-US.json';
+import UIViVN from '@univerjs/ui/lib/locale/vi-VN.json';
+import { fromEvent } from 'rxjs';
+
+// Numfmt locale embedded directly — avoids TS module resolution issues with JSON in package exports
+const sheetsNumfmtLocaleEn = {
+    sheet: {
+        numfmt: {
+            percent: 'Percentage', title: 'Number format', numfmtType: 'Format types',
+            cancel: 'Cancel', confirm: 'Confirm', general: 'General',
+            accounting: 'Accounting', text: 'Text', number: 'Number',
+            currency: 'Currency', date: 'Date', time: 'Time',
+            thousandthPercentile: 'Thousands separator', preview: 'Preview',
+            dateTime: 'Date and time', decimalLength: 'Decimal places',
+            currencyType: 'Currency Symbol', moreFmt: 'Formats',
+            financialValue: 'Financial value', roundingCurrency: 'Rounding up the currency',
+            timeDuration: 'Duration Time', addDecimal: 'Increase decimal places',
+            subtractDecimal: 'Decreasing decimal places', customFormat: 'Custom Format',
+            // Additional keys from en-US.json
+            negType: 'A negative number type',
+            currencyDes: 'The currency format is used to represent general currency values. The accounting format aligns a column of values with decimal points.',
+            accountingDes: 'The accounting number format aligns a column of values with currency symbols and decimal points.',
+            dateType: 'Date Type',
+            dateDes: 'The date format presents date and time series values as date values.',
+            generalDes: 'The regular format does not contain any specific number format.',
+            thousandthPercentileDes: 'The percentile format is used for the representation of ordinary numbers.',
+            customFormatDes: 'Generate custom number formats based on existing formats.',
+        },
+    },
+};
+// Numfmt locale tiếng Việt — nhúng trực tiếp cùng lý do như bản en ở trên
+const sheetsNumfmtLocaleVi = {
+    sheet: {
+        numfmt: {
+            percent: 'Phần trăm', title: 'Định dạng số', numfmtType: 'Loại định dạng',
+            cancel: 'Hủy bỏ', confirm: 'Xác nhận', general: 'Chung',
+            accounting: 'Kế toán', text: 'Văn bản', number: 'Số',
+            currency: 'Tiền tệ', date: 'Ngày', time: 'Thời gian',
+            thousandthPercentile: 'Phân vị phần nghìn', preview: 'Xem trước',
+            dateTime: 'Ngày giờ', decimalLength: 'Số chữ số thập phân',
+            currencyType: 'Loại tiền tệ', moreFmt: 'Nhiều định dạng hơn',
+            financialValue: 'Giá trị tài chính', roundingCurrency: 'Tiền tệ làm tròn',
+            timeDuration: 'Thời lượng', addDecimal: 'Thêm chữ số thập phân',
+            subtractDecimal: 'Giảm chữ số thập phân', customFormat: 'Định dạng tùy chỉnh',
+            negType: 'Loại số âm',
+            currencyDes: 'Định dạng tiền tệ được sử dụng để biểu thị các giá trị tiền tệ thông thường. Định dạng kế toán có thể căn chỉnh các giá trị trong một cột với dấu thập phân.',
+            accountingDes: 'Định dạng số kế toán có thể căn chỉnh các ký hiệu tiền tệ và dấu thập phân trong một cột các giá trị.',
+            dateType: 'Loại ngày',
+            dateDes: 'Định dạng ngày biểu thị các giá trị chuỗi ngày và thời gian dưới dạng giá trị ngày.',
+            generalDes: 'Định dạng chung không chứa bất kỳ định dạng số cụ thể nào.',
+            thousandthPercentileDes: 'Định dạng phân vị phần nghìn được sử dụng để biểu thị các số thông thường.',
+            customFormatDes: 'Tạo định dạng số tùy chỉnh dựa trên các định dạng hiện có.',
+        },
+    },
+};
+const univerLocaleEn = Tools.deepMerge(SheetsEnUS, DocsUIEnUS, SheetsUIEnUS, SheetsFormulaUIEnUS, sheetsNumfmtLocaleEn, UIEnUS, DesignEnUS);
+const univerLocaleVi = Tools.deepMerge(SheetsViVN, DocsUIViVN, SheetsUIViVN, SheetsFormulaUIViVN, sheetsNumfmtLocaleVi, UIViVN, DesignViVN);
+
+/**
+ * Giá trị mẫu MẶC ĐỊNH để sinh preview = 2021-03-14 13:45:30 (Excel serial).
+ * Chọn ngày 14 (>12) để phân biệt dd↔mm, giờ 13 để phân biệt 24h↔AM/PM, có cả giây.
+ * CHỈ dùng khi ô đang chọn không có giá trị ngày hợp lệ — nếu có, ưu tiên giá trị THỰC của ô
+ * để label option khớp đúng dữ liệu hiển thị trong cột (giống Excel).
+ */
+const SAMPLE_SERIAL = 44269 + 49530 / 86400;
+/**
+ * Danh sách định dạng ngày/giờ kiểu Excel (ordered: Ngày → Ngày+Giờ → Giờ).
+ * Label hiển thị cho người dùng là PREVIEW của SAMPLE (vd 'dd/mm/yyyy' → "14/03/2021"),
+ * trực quan giống hộp "Type" của Excel; pattern thực được lưu ở data-pattern để áp.
+ */
+const CUSTOM_DATE_PATTERNS = [
+    // ── Ngày ──
+    'dd/mm/yyyy',
+    'd/m/yyyy',
+    'dd/mm/yy',
+    'mm/dd/yyyy',
+    'yyyy-mm-dd',
+    'dd-mmm-yyyy',
+    'dd-mmm-yy',
+    'd mmmm yyyy',
+    'mmm yyyy',
+    'mmmm yyyy',
+    'dddd, d mmmm yyyy',
+    // ── Ngày + giờ ──
+    'dd/mm/yyyy hh:mm',
+    'dd/mm/yyyy h:mm AM/PM',
+    'dd/mm/yyyy hh:mm:ss',
+    'yyyy-mm-dd hh:mm:ss',
+    // ── Giờ ──
+    'hh:mm',
+    'hh:mm:ss',
+    'h:mm AM/PM',
+    'h:mm:ss AM/PM',
+    'mm:ss',
+    '[h]:mm:ss',
+];
+/** Sinh chuỗi preview (giá trị mẫu đã format) cho 1 pattern; fallback về pattern nếu lỗi. */
+const previewOf = (pattern, sample) => {
+    try {
+        return getPatternPreview(pattern, sample).result || pattern;
+    }
+    catch {
+        return pattern;
+    }
+};
+/**
+ * Re-assert highlight cho option đang chọn sau khi Univer re-render panel (React có thể xoá class).
+ * Dựa trên cờ data-numfmt-selected (do setActive đặt) — không suy diễn từ DOM label.
+ */
+const syncActiveNumfmtHighlight = () => {
+    const panel = document.querySelector('.numfmt-panel');
+    if (!panel)
+        return;
+    panel.querySelectorAll('.univer-numfmt-custom-item').forEach((item) => {
+        item.classList.toggle('univer-numfmt-active', item.hasAttribute('data-numfmt-selected'));
+    });
+};
+/**
+ * Thay danh sách định dạng ngày mặc định của Univer bằng các option custom (CUSTOM_DATE_PATTERNS),
+ * hiển thị dưới dạng PREVIEW trực quan. Univer render panel numfmt bằng React và không expose API
+ * nên phải thao tác DOM trực tiếp.
+ *
+ * @param getSnapshot         Lấy vùng chọn hiện tại (để áp numfmt).
+ * @param executeCmd          Chạy Univer command.
+ * @param onPatternSelected   Báo component pattern vừa chọn (Confirm) hoặc null (Cancel) để đồng bộ.
+ * @param getActiveCellFormat Đọc pattern hiện tại của cell — dùng highlight option khớp khi mở.
+ * @param clearPreview        Xoá live-preview overlay của Univer để canvas vẽ đúng model ngay.
+ * @param getSampleValue      Lấy giá trị THỰC (serial) của ô đại diện để label preview khớp dữ liệu cột;
+ *                            null → dùng SAMPLE_SERIAL mặc định.
+ * @returns hàm cleanup (gỡ mọi listener) — gọi khi teardown hoặc trước lần inject mới.
+ */
+const injectCustomDateFormats = (getSnapshot, executeCmd, onPatternSelected, getActiveCellFormat, clearPreview, getSampleValue, onConfirm) => {
+    const panel = document.querySelector('.numfmt-panel');
+    if (!panel)
+        return;
+    // Guard: chỉ inject 1 lần / phiên (component xoá data-custom-dates khi đóng panel để reopen re-inject).
+    const listContainer = panel.querySelector('ul.univer-select-list');
+    if (!listContainer || listContainer.hasAttribute('data-custom-dates'))
+        return;
+    // Nhận diện panel Date theo 2 trường hợp:
+    //   1. Univer vừa render list ngày GỐC (li dạng yyyy-mm-dd) — lần đầu chọn Type=Date.
+    //   2. Univer TÁI DÙNG DOM panel cũ (reopen) → list đang chứa sẵn custom item của ta từ phiên trước.
+    const hasUniverDateItems = Array.from(listContainer.querySelectorAll('li')).some((el) => /^\d{4}[-/]\d{2}[-/]\d{2}$/.test(el.textContent?.trim() ?? ''));
+    const hasOurItems = !!listContainer.querySelector('.univer-numfmt-custom-item');
+    if (!hasUniverDateItems && !hasOurItems)
+        return;
+    listContainer.setAttribute('data-custom-dates', 'true');
+    const itemTemplate = listContainer.querySelector('li');
+    const defaultItems = Array.from(listContainer.children);
+    const applyFormat = (pattern) => {
+        const snap = getSnapshot();
+        if (!snap)
+            return;
+        const values = [];
+        const maxRow = Math.min(snap.endRow, snap.startRow + 499);
+        for (let r = snap.startRow; r <= maxRow; r++) {
+            for (let c = snap.startColumn; c <= snap.endColumn; c++) {
+                values.push({ pattern, row: r, col: c });
+            }
+        }
+        if (!values.length)
+            return;
+        executeCmd('sheet.command.numfmt.set.numfmt', { unitId: snap.unitId, subUnitId: snap.subUnitId, values });
+        // Univer giữ live-preview overlay (NumfmtController._previewPattern) che hiển thị model của
+        // vùng chọn khi panel mở. Ta đã ghi model trực tiếp nên phải xoá preview để canvas vẽ đúng ngay.
+        clearPreview?.();
+    };
+    let pendingPattern = null;
+    let activeItem = null;
+    const setActive = (item) => {
+        if (activeItem) {
+            activeItem.classList.remove('univer-numfmt-active');
+            activeItem.removeAttribute('data-numfmt-selected');
+        }
+        item.classList.add('univer-numfmt-active');
+        item.setAttribute('data-numfmt-selected', 'true');
+        activeItem = item;
+    };
+    const subs = [];
+    const cleanup = () => {
+        subs.forEach((s) => s.unsubscribe());
+        subs.length = 0;
+    };
+    // Nhận diện nút theo CLASS (không phụ thuộc ngôn ngữ): Univer render Confirm = button-primary,
+    // Cancel = button-default. KHÔNG match theo text ('Confirm'/'Cancel') vì sẽ vỡ khi locale là tiếng Việt.
+    const panelButtons = Array.from(panel.querySelectorAll('button'));
+    const confirmBtn = panelButtons.find((b) => b.classList.contains('univer-button-primary'));
+    const cancelBtn = panelButtons.find((b) => b.classList.contains('univer-button-default'));
+    // Capture phase: chạy trước Univer handler. KHÔNG cleanup() trong handler vì Univer tái dùng DOM panel —
+    // gỡ listener sẽ làm option không click được khi mở lại. cleanup chỉ chạy khi teardown thật.
+    if (confirmBtn) {
+        subs.push(fromEvent(confirmBtn, 'click', { capture: true }).subscribe(() => {
+            // Đánh dấu Confirm → component GIỮ format. Cancel/X/click-ngoài KHÔNG gọi → mặc định revert.
+            onConfirm?.();
+            if (!pendingPattern)
+                return;
+            applyFormat(pendingPattern);
+            onPatternSelected?.(pendingPattern);
+        }));
+    }
+    if (cancelBtn) {
+        subs.push(fromEvent(cancelBtn, 'click', { capture: true }).subscribe(() => {
+            if (activeItem) {
+                activeItem.classList.remove('univer-numfmt-active');
+                activeItem.removeAttribute('data-numfmt-selected');
+                activeItem = null;
+            }
+            // pendingPattern = null → component khôi phục numfmt gốc từng ô (xem close.numfmt.panel handler).
+            pendingPattern = null;
+            onPatternSelected?.(null);
+        }));
+    }
+    for (const pattern of CUSTOM_DATE_PATTERNS) {
+        const item = (itemTemplate ?? document.createElement('div')).cloneNode(false);
+        // Khi reopen, itemTemplate là custom item cũ → xoá cờ highlight/selected sao chép theo để tránh stale.
+        item.removeAttribute('data-numfmt-selected');
+        item.classList.remove('univer-numfmt-active');
+        item.textContent = previewOf(pattern, getSampleValue?.() ?? SAMPLE_SERIAL);
+        item.dataset['pattern'] = pattern;
+        item.style.cursor = 'pointer';
+        item.classList.add('univer-numfmt-custom-item');
+        subs.push(fromEvent(item, 'mousedown').subscribe((e) => e.preventDefault()));
+        subs.push(fromEvent(item, 'click').subscribe((e) => {
+            e.stopPropagation();
+            setActive(item);
+            pendingPattern = pattern;
+            applyFormat(pattern);
+            onPatternSelected?.(pattern);
+        }));
+        listContainer.appendChild(item);
+    }
+    defaultItems.forEach((el) => el.remove());
+    /**
+     * Đồng bộ panel theo vùng chọn HIỆN TẠI (getSnapshot/getActiveCellFormat/getSampleValue đọc fresh):
+     *   1. Sinh lại label preview theo giá trị THỰC của ô đại diện cột mới (khớp dữ liệu, giống Excel).
+     *   2. Highlight option khớp format hiện có; nếu cột chưa có format → chọn option ĐẦU TIÊN.
+     *   3. ÁP LUÔN pattern đó lên cả vùng → dữ liệu đổi hiển thị ngay; set pending để Confirm giữ.
+     * Gọi khi mở panel VÀ mỗi khi user đổi cột/cell trên grid lúc panel đang mở.
+     * Cancel / X → component khôi phục giá trị gốc (originalCellFormats đã chụp/tích luỹ khi mở/đổi vùng).
+     */
+    const resync = () => {
+        const sample = getSampleValue?.() ?? SAMPLE_SERIAL;
+        const items = Array.from(listContainer.querySelectorAll('.univer-numfmt-custom-item'));
+        items.forEach((el) => { el.textContent = previewOf(el.dataset['pattern'] ?? '', sample); });
+        const activeFmt = (getActiveCellFormat?.() ?? '').toLowerCase();
+        const matched = activeFmt && activeFmt !== 'general'
+            ? items.find((el) => (el.dataset['pattern'] ?? '').toLowerCase() === activeFmt)
+            : undefined;
+        const initial = matched ?? items[0];
+        if (!initial)
+            return;
+        setActive(initial);
+        pendingPattern = initial.dataset['pattern'] ?? null;
+        if (!pendingPattern)
+            return;
+        applyFormat(pendingPattern);
+        onPatternSelected?.(pendingPattern);
+    };
+    resync();
+    // Net chống race: nếu Univer set lại preview overlay NGAY SAU khi panel render (sau applyFormat ở trên),
+    // xoá lần nữa sau 1 nhịp để canvas hiển thị numfmt THẬT của model. (applyFormat đã clearPreview đồng bộ.)
+    setTimeout(() => clearPreview?.(), 60);
+    return { cleanup, resync };
+};
+
+/** Style mặc định cho cột đã map: nền xanh, chữ trắng, bold, canh giữa. */
+const DEFAULT_MAPPED_STYLE = {
+    bg: { rgb: '#389E0D' },
+    cl: { rgb: '#FFFFFF' },
+    bl: BooleanNumber.TRUE,
+    ht: 2,
+    vt: 2,
+    fs: 11,
+};
+/**
+ * Config mặc định của lib — consumer có thể dùng trực tiếp hoặc spread-override:
+ * `{ ...defaultMappingIndicatorConfig(), prefix: '★ ' }`.
+ */
+const defaultMappingIndicatorConfig = () => ({
+    mappedStyleId: 'm',
+    mappedStyle: { ...DEFAULT_MAPPED_STYLE },
+    defaultHeaderStyleId: 'h',
+    prefix: '● ',
+    headerRowIndex: 0,
+    autoResize: true,
+    charWidth: 7.5,
+    padding: 16,
+});
+const DEFAULT_PREFIX = '● ';
+const DEFAULT_CHAR_W = 7.5;
+const DEFAULT_PADDING = 16;
+const DEFAULT_COL_W = 80;
+const DEFAULT_MAPPED_STYLE_ID = 'm';
+const DEFAULT_HEADER_STYLE_ID = 'h';
+/** Workbook snapshot là plain JSON — clone an toàn nhất bằng JSON. */
+const cloneSnapshot = (snapshot) => JSON.parse(JSON.stringify(snapshot));
+const resolveOpts = (config) => ({
+    mappedStyleId: config.mappedStyleId ?? DEFAULT_MAPPED_STYLE_ID,
+    mappedStyle: config.mappedStyle ?? DEFAULT_MAPPED_STYLE,
+    defaultHeaderStyleId: config.defaultHeaderStyleId ?? DEFAULT_HEADER_STYLE_ID,
+    prefix: config.prefix ?? DEFAULT_PREFIX,
+    headerRowKey: String(config.headerRowIndex ?? 0),
+    autoResize: config.autoResize ?? true,
+    charWidth: config.charWidth ?? DEFAULT_CHAR_W,
+    padding: config.padding ?? DEFAULT_PADDING,
+});
+const estimateWidth = (text, opts) => Math.ceil(text.length * opts.charWidth + opts.padding);
+/** Mở rộng width cột cho vừa text (không thu nhỏ hơn width hiện tại). */
+const expandColWidth = (sheet, colKey, text, opts) => {
+    const colData = sheet.columnData;
+    if (!colData)
+        return;
+    const current = colData[colKey]?.w ?? DEFAULT_COL_W;
+    colData[colKey] = { ...(colData[colKey] ?? {}), w: Math.max(current, estimateWidth(text, opts)) };
+};
+/**
+ * Dọn header row của 1 sheet: revert style về mặc định, xóa prefix, khôi phục width.
+ * @param onlyMapped true → chỉ revert ô đang là `mappedStyleId`; false → revert mọi ô có style.
+ */
+const resetHeaderRow = (sheet, opts, onlyMapped) => {
+    const headerRow = sheet?.cellData?.[opts.headerRowKey];
+    if (!headerRow || !sheet)
+        return;
+    for (const colKey of Object.keys(headerRow)) {
+        const cell = headerRow[colKey];
+        if (!cell)
+            continue;
+        if (onlyMapped) {
+            if (cell.s === opts.mappedStyleId)
+                cell.s = opts.defaultHeaderStyleId;
+        }
+        else if (cell.s) {
+            cell.s = opts.defaultHeaderStyleId;
+        }
+        if (typeof cell.v === 'string' && cell.v.startsWith(opts.prefix)) {
+            const original = cell.v.slice(opts.prefix.length);
+            cell.v = original;
+            if (opts.autoResize && sheet.columnData?.[colKey]) {
+                sheet.columnData[colKey].w = estimateWidth(original, opts);
+            }
+        }
+    }
+};
+// ─────────────────────────────────────────────────────────────────────────────
+// Public API
+// ─────────────────────────────────────────────────────────────────────────────
+/**
+ * Đánh dấu header các cột đã map: gắn style `mappedStyleId`, thêm prefix icon và
+ * (tùy chọn) tự nới width. Tự reset các sheet trong scope trước để mapping cũ không sót lại.
+ *
+ * @param snapshot Workbook snapshot (plain JSON). Không bị mutate — trả về bản clone.
+ * @param targets  Danh sách cột cần đánh dấu (`{ sheetId, colIndex }`).
+ * @param config   Cấu hình style / prefix / scope. Bỏ trống = dùng default của lib.
+ */
+const applyMappingIndicators = (snapshot, targets, config = {}) => {
+    const data = cloneSnapshot(snapshot);
+    const opts = resolveOpts(config);
+    const styles = data['styles'];
+    if (styles && !styles[opts.mappedStyleId]) {
+        styles[opts.mappedStyleId] = { ...opts.mappedStyle };
+    }
+    const sheets = data['sheets'];
+    if (!sheets)
+        return data;
+    const scope = config.scopeSheetIds ?? Object.keys(sheets);
+    for (const sheetId of scope) {
+        resetHeaderRow(sheets[sheetId], opts, false);
+    }
+    for (const target of targets) {
+        const sheet = sheets[target.sheetId];
+        const cell = sheet?.cellData?.[opts.headerRowKey]?.[String(target.colIndex)];
+        if (!cell || !sheet)
+            continue;
+        cell.s = opts.mappedStyleId;
+        if (typeof cell.v === 'string' && !cell.v.startsWith(opts.prefix)) {
+            const withIcon = `${opts.prefix}${cell.v}`;
+            cell.v = withIcon;
+            if (opts.autoResize)
+                expandColWidth(sheet, String(target.colIndex), withIcon, opts);
+        }
+    }
+    return data;
+};
+/**
+ * Gỡ toàn bộ indicator ('m' → default style, xóa prefix, khôi phục width) khỏi snapshot
+ * — dùng trước khi gửi workbook lên server để data sạch, không chứa style UI nội bộ.
+ *
+ * @param snapshot Workbook snapshot (plain JSON). Không bị mutate — trả về bản clone.
+ * @param config   Dùng chung config với `applyMappingIndicators` để gỡ đúng style/prefix.
+ *                 Bỏ trống = dùng default của lib.
+ */
+const stripMappingIndicators = (snapshot, config = {}) => {
+    const data = cloneSnapshot(snapshot);
+    const opts = resolveOpts(config);
+    const sheets = data['sheets'];
+    if (!sheets)
+        return data;
+    const scope = config.scopeSheetIds ?? Object.keys(sheets);
+    for (const sheetId of scope) {
+        resetHeaderRow(sheets[sheetId], opts, true);
+    }
+    return data;
+};
+/** Chuyển colIndex (0-based) → chữ cái cột kiểu Excel: 0→'A', 25→'Z', 26→'AA'… */
+const toColumnLetter = (index) => {
+    let letter = '';
+    let n = index;
+    do {
+        letter = String.fromCharCode(65 + (n % 26)) + letter;
+        n = Math.floor(n / 26) - 1;
+    } while (n >= 0);
+    return letter;
+};
+/** Tính index mới của 1 cột sau thao tác; trả null nếu cột đó bị xóa. */
+const shiftColumnIndex = (col, change) => {
+    const { type, startColumn: start, count } = change;
+    if (type === 'insert')
+        return col >= start ? col + count : col;
+    if (type === 'remove') {
+        if (col >= start && col < start + count)
+            return null; // cột nằm trong vùng bị xóa
+        return col >= start + count ? col - count : col;
+    }
+    // move: khối [start, start+count) chèn TRƯỚC toColumn (toạ độ gốc) = rút khối rồi chèn lại.
+    const end = start + count;
+    const dest = change.toColumn ?? start;
+    const newStart = dest <= start ? dest : dest - count;
+    if (col >= start && col < end)
+        return newStart + (col - start); // cột thuộc khối di chuyển
+    let shifted = col >= end ? col - count : col; // bước rút khối
+    if (shifted >= newStart)
+        shifted += count; // bước chèn lại
+    return shifted;
+};
+/**
+ * Remap colIndex của danh sách mapping theo 1 `T_columnStructureChange`.
+ * - Item khác `sheetId` giữ nguyên.
+ * - Item nằm trong vùng cột bị XÓA → loại khỏi kết quả.
+ * - Các item còn lại được dịch index cho khớp vị trí mới.
+ *
+ * Tự cập nhật cả `colLetter` (nếu item có field này) cho khớp `colIndex` mới — consumer
+ * không cần map lại thủ công.
+ *
+ * @example
+ * this.mappings.update((list) => remapColumnIndexes(list, change));
+ */
+const remapColumnIndexes = (items, change) => {
+    const result = [];
+    for (const item of items) {
+        if (item.sheetId !== change.sheetId) {
+            result.push(item);
+            continue;
+        }
+        const next = shiftColumnIndex(item.colIndex, change);
+        if (next === null)
+            continue;
+        if (next === item.colIndex) {
+            result.push(item);
+            continue;
+        }
+        const updated = { ...item, colIndex: next };
+        if (typeof item.colLetter === 'string')
+            updated.colLetter = toColumnLetter(next);
+        result.push(updated);
+    }
+    return result;
+};
+
+// Bộ đếm tạo class scope duy nhất cho mỗi instance spreadsheet (dùng cho <style> chỉnh width toolbar).
+let spreadsheetInstanceCount = 0;
+class LibsUiComponentsSpreadsheetComponent {
+    univer = null;
+    univerAPI = null;
+    columnClickDisposable = null;
+    formatDisposable = null;
+    columnOpDisposable = null;
+    numfmtObserver = null;
+    toolbarResizeObserver = null;
+    // <style> riêng cho instance: pin width container đo qua CSS rule (React re-render KHÔNG strip được →
+    // tránh vòng lặp oscillation giữa set-inline-width và React strip gây kẹt ⋮). Xem registerToolbarWidthSync.
+    toolbarStyleEl = null;
+    toolbarScopeClass = `libs-ui-spreadsheet-tb-${(spreadsheetInstanceCount += 1)}`;
+    numfmtClickDisposable = null;
+    lastRangeSnapshot = null;
+    pendingNumfmtPattern = null;
+    // true CHỈ khi user bấm nút Confirm trong panel numfmt → giữ format; Cancel/X/click-ngoài = false → revert.
+    numfmtConfirmed = false;
+    // Snapshot numfmt từng ô của vùng chọn tại thời điểm mở panel — dùng khôi phục chính xác khi Cancel.
+    originalCellFormats = null;
+    numfmtPanelOpen = false;
+    // true khi luồng Date custom đang hoạt động (đã inject option ngày). CHỈ khi đó component mới
+    // can thiệp confirm/revert; các Type khác (Số, Tiền tệ, %, Text…) do Univer tự xử lý → không đụng vào.
+    numfmtDateActive = false;
+    // Đồng bộ lại panel Date (label + highlight + auto-apply) theo vùng chọn mới khi user đổi cột lúc panel mở.
+    numfmtResync = null;
+    listenEnabled = false;
+    listenEnableTimer = null;
+    // Defer initial empty-workbook init to allow parent's ngAfterViewInit to call loadData
+    // first (cancelling the empty init), avoiding a race with Univer's async React renders.
+    pendingInitTimer = null;
+    numfmtCleanup = null;
+    pendingReadyCb = null;
+    // Snapshot đã-decorate gần nhất — làm baseline để diff (style id ổn định 'h'/'m', không bị
+    // ảnh hưởng bởi style id tự sinh sau mỗi facade setValue). Dùng cho re-apply incremental.
+    lastDecorated = null;
+    readyObserver = null;
+    // Cache controller numfmt nội bộ của Univer (giữ _previewPattern). Tìm 1 lần qua injector.
+    // CONVENTION-EXCEPT: any — NumfmtController không export khỏi @univerjs/sheets-numfmt
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    numfmtController = null;
+    activeCellFormat = signal('General');
+    activeCellRef = signal('');
+    showToolbar = signal(true);
+    showSheetTabs = signal(true);
+    // Ngôn ngữ đang hiển thị thực tế. Khởi tạo từ input `locale` trong ngAfterViewInit,
+    // sau đó đổi runtime qua setLocale() (kéo theo reinit để Univer render lại UI).
+    activeLocale = signal('vi');
+    /** Ngôn ngữ khởi tạo của spreadsheet. Đổi runtime dùng FunctionControl.setLocale(). */
+    locale = input('vi');
+    /** Cấu hình ẩn / vô hiệu hoá toolbar items. Thay đổi sẽ reinit toàn bộ Univer. */
+    toolbarMenuConfig = input({
+        // 'sheet.command.numfmt.set.currency': { hidden: true },
+        // 'sheet.command.numfmt.add.decimal.command': { hidden: true },
+        // 'sheet.command.numfmt.subtract.decimal.command': { hidden: true },
+        // 'sheet.command.numfmt.set.percent': { hidden: true },
+        'sheet.command.set-once-format-painter': { hidden: true },
+        'sheet.command.set-text-rotation': { hidden: true },
+        'sheet.command.set-range-font-family': { hidden: true },
+        'sheet.command.set-border-basic': { hidden: true },
+        'sheet.command.add-worksheet-merge': { hidden: true },
+        'sheet.command.add-worksheet-merge-all': { hidden: true },
+        'sheet.command.add-worksheet-merge-vertical': { hidden: true },
+        'sheet.command.add-worksheet-merge-horizontal': { hidden: true },
+        'sheet.command.remove-worksheet-merge': { hidden: true },
+    });
+    /**
+     * Cấu hình highlight cột đã map (style / prefix / scope sheet).
+     * Truyền config này = "bật" luồng auto: component sẽ TỰ áp indicator khi load/reset,
+     * TỰ gỡ khi save, và TỰ vẽ lại mỗi khi `mappingTargets` đổi. Bỏ trống = spreadsheet thường.
+     */
+    mappingIndicatorConfig = input();
+    /** Danh sách cột cần highlight (`{ sheetId, colIndex }`). Đổi runtime → tự vẽ lại header. */
+    mappingTargets = input([]);
+    outColumnDblClick = output();
+    /**
+     * Phát khi user insert / remove / move cột (kể cả chọn nhiều cột, và cả undo/redo).
+     * Consumer dùng `remapColumnIndexes(mappings, $event)` để dịch lại mảng mapping bên ngoài
+     * cho khớp vị trí mới — tránh lệch khi chèn/xóa cột ở giữa.
+     */
+    outColumnStructureChange = output();
+    containerRef = viewChild('containerRef');
+    ngZone = inject(NgZone);
+    constructor() {
+        // Auto re-apply: chỉ chạy khi đã bật config + Univer đã khởi tạo. Lần đầu (chưa init) tự bỏ qua.
+        effect(() => {
+            this.mappingTargets();
+            this.mappingIndicatorConfig();
+            untracked(() => this.reapplyIndicators());
+        });
+    }
+    ngAfterViewInit() {
+        this.activeLocale.set(this.locale());
+        this.pendingInitTimer = setTimeout(() => {
+            this.pendingInitTimer = null;
+            this.initUniver(this.buildEmptyWorkbook());
+        });
+    }
+    get FunctionControl() {
+        return {
+            loadData: (data) => this.loadData(data),
+            saveData: () => this.saveData(),
+            getActiveSheetInfo: () => this.getActiveSheetInfo(),
+            getColumnNumfmt: (sheetId, colIndex) => this.getColumnNumfmt(sheetId, colIndex),
+            extractAllColumnFormats: (snapshot) => this.extractAllColumnFormats(snapshot),
+            toggleToolbar: () => this.toggleToolbar(),
+            toggleSheetTabs: () => this.toggleSheetTabs(),
+            reset: (data) => this.reset(data),
+            executeCommand: (commandId, params) => this.executeCommand(commandId, params),
+            applyNumfmt: (row, col, numRows, numCols, pattern) => this.applyNumfmt(row, col, numRows, numCols, pattern),
+            scheduleOnReady: (cb) => {
+                this.pendingReadyCb = cb;
+            },
+            setLocale: (locale) => this.setLocale(locale),
+            activeCellRef: this.activeCellRef,
+            activeCellFormat: this.activeCellFormat,
+            showToolbar: this.showToolbar,
+            showSheetTabs: this.showSheetTabs,
+            locale: this.activeLocale.asReadonly(),
+        };
+    }
+    setLocale(locale) {
+        if (locale === this.activeLocale())
+            return;
+        this.activeLocale.set(locale);
+        this.reinitUniver();
+    }
+    loadData(data) {
+        const decorated = this.decorateSnapshot(data);
+        if (this.pendingInitTimer !== null) {
+            clearTimeout(this.pendingInitTimer);
+            this.pendingInitTimer = null;
+            this.initUniver(decorated);
+            return;
+        }
+        this.destroyUniver();
+        setTimeout(() => this.initUniver(decorated));
+    }
+    /** Snapshot thô từ Univer (CÓ thể còn indicator). Dùng nội bộ cho re-apply. */
+    saveRaw() {
+        return (this.univerAPI?.getActiveWorkbook()?.save() ?? {});
+    }
+    /** Snapshot trả cho consumer — tự gỡ indicator nếu luồng auto đang bật. */
+    saveData() {
+        const config = this.mappingIndicatorConfig();
+        if (!config)
+            return this.saveRaw();
+        return stripMappingIndicators(this.saveRaw(), config);
+    }
+    /** Áp indicator vào snapshot trước khi load — chỉ khi luồng auto đang bật. Lưu baseline để diff. */
+    decorateSnapshot(data) {
+        const config = this.mappingIndicatorConfig();
+        if (!config)
+            return data;
+        const decorated = applyMappingIndicators(data, this.mappingTargets(), config);
+        this.lastDecorated = decorated;
+        return decorated;
+    }
+    /**
+     * Vẽ lại indicator KHÔNG reinit Univer: tính snapshot đích rồi CHỈ ghi đè đúng các ô header
+     * khác so với baseline trước đó (style + prefix + width) lên instance live qua facade.
+     * Diff theo baseline (style id ổn định 'h'/'m') → chỉ các cột vừa map/bỏ map mới được vẽ lại.
+     */
+    reapplyIndicators() {
+        const config = this.mappingIndicatorConfig();
+        const wb = this.univerAPI?.getActiveWorkbook();
+        const prev = this.lastDecorated;
+        if (!config || !wb || !prev)
+            return;
+        const next = applyMappingIndicators(this.saveRaw(), this.mappingTargets(), config);
+        this.lastDecorated = next;
+        const headerKey = String(config.headerRowIndex ?? 0);
+        const headerRow = Number(headerKey);
+        const stylesNext = (next['styles'] ?? {});
+        const sheetsNext = (next['sheets'] ?? {});
+        const sheetsPrev = (prev['sheets'] ?? {});
+        for (const sheetId of Object.keys(sheetsNext)) {
+            const ws = wb.getSheetBySheetId(sheetId);
+            if (!ws)
+                continue;
+            const nextRow = sheetsNext[sheetId]?.cellData?.[headerKey] ?? {};
+            const prevRow = sheetsPrev[sheetId]?.cellData?.[headerKey] ?? {};
+            const colData = sheetsNext[sheetId]?.columnData ?? {};
+            for (const colKey of Object.keys(nextRow)) {
+                const cellNext = nextRow[colKey];
+                const cellPrev = prevRow[colKey];
+                // Ô không đổi cả value lẫn style → bỏ qua (mấu chốt: chỉ vẽ lại cột vừa map/bỏ map).
+                if (!cellNext || (cellNext.v === cellPrev?.v && cellNext.s === cellPrev?.s))
+                    continue;
+                const style = (typeof cellNext.s === 'string' ? stylesNext[cellNext.s] : cellNext.s);
+                const cell = { v: cellNext.v, s: style };
+                void ws.getRange(headerRow, Number(colKey)).setValue(cell);
+                const width = colData[colKey]?.w;
+                if (typeof width === 'number')
+                    void ws.setColumnWidth(Number(colKey), width);
+            }
+        }
+    }
+    toggleToolbar() {
+        this.showToolbar.update((v) => !v);
+        this.reinitUniver();
+    }
+    toggleSheetTabs() {
+        this.showSheetTabs.update((v) => !v);
+        this.reinitUniver();
+    }
+    reset(data) {
+        this.destroyUniver();
+        this.initUniver(this.decorateSnapshot(data ?? this.buildEmptyWorkbook()));
+    }
+    executeCommand(commandId, params) {
+        // CONVENTION-EXCEPT: any — FUniver.executeCommand không expose typing
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        void this.univerAPI?.executeCommand?.(commandId, params);
+    }
+    applyNumfmt(row, col, numRows, numCols, pattern) {
+        // CONVENTION-EXCEPT: any — FWorkbook.getId / FWorksheet.getSheetId not exposed in public types
+        // Note: FRange.setNumberFormat() has a Univer facade bug — it builds `values` but never passes
+        // them to executeCommand. We call the command directly with the correct params instead.
+        // FWorkbook uses getId() (not getUnitId()) and FWorksheet uses getSheetId() for subUnitId.
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const wb = this.univerAPI?.getActiveWorkbook();
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const ws = wb?.getActiveSheet?.();
+        if (!wb || !ws)
+            return;
+        const unitId = (wb.getId?.() ?? '');
+        const subUnitId = (ws.getSheetId?.() ?? '');
+        const values = [];
+        for (let r = row; r < row + numRows; r++) {
+            for (let c = col; c < col + numCols; c++) {
+                values.push({ pattern, row: r, col: c });
+            }
+        }
+        this.executeCommand('sheet.command.numfmt.set.numfmt', { unitId, subUnitId, values });
+    }
+    getActiveSheetInfo() {
+        // CONVENTION-EXCEPT: any — FWorksheet public types chưa expose getSheetId/getName
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const sheet = this.univerAPI?.getActiveWorkbook()?.getActiveSheet();
+        if (!sheet)
+            return null;
+        return {
+            sheetId: (sheet.getSheetId?.() ?? ''),
+            sheetName: (sheet.getSheetName?.() ?? sheet.getName?.() ?? ''),
+        };
+    }
+    /** Đọc numfmt pattern của một cell từ workbook snapshot. */
+    readCellNumfmt(sheetId, row, col) {
+        try {
+            // CONVENTION-EXCEPT: any — FWorkbook.save() không expose typing
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const ss = this.univerAPI?.getActiveWorkbook()?.save();
+            const styles = ss?.styles;
+            const cells = ss?.sheets?.[sheetId]?.cellData;
+            const styleId = cells?.[String(row)]?.[String(col)]?.s;
+            if (!styleId || !styles)
+                return 'General';
+            return styles[styleId]?.n?.pattern ?? styles[styleId]?.nf?.pattern ?? 'General';
+        }
+        catch {
+            return 'General';
+        }
+    }
+    /** Đọc giá trị số (Excel serial) của một ô; null nếu ô rỗng/không phải số. */
+    readCellValue(sheetId, row, col) {
+        try {
+            // CONVENTION-EXCEPT: any — FWorkbook.save() không expose typing
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const ss = this.univerAPI?.getActiveWorkbook()?.save();
+            const cells = ss?.sheets?.[sheetId]?.cellData;
+            const value = cells?.[String(row)]?.[String(col)]?.v;
+            return typeof value === 'number' && isFinite(value) ? value : null;
+        }
+        catch {
+            return null;
+        }
+    }
+    getColumnNumfmt(sheetId, colIndex) {
+        for (const row of [1, 2, 3]) {
+            const pattern = this.readCellNumfmt(sheetId, row, colIndex);
+            if (pattern !== 'General')
+                return pattern;
+        }
+        return 'General';
+    }
+    /** Chụp numfmt gốc từng ô của vùng chọn (giới hạn 500 dòng như applyFormat) để Cancel khôi phục đúng. */
+    captureRangeNumfmt(snap) {
+        if (!snap)
+            return null;
+        const values = [];
+        const maxRow = Math.min(snap.endRow, snap.startRow + 499);
+        for (let r = snap.startRow; r <= maxRow; r++) {
+            for (let c = snap.startColumn; c <= snap.endColumn; c++) {
+                values.push({ pattern: this.readCellNumfmt(snap.subUnitId, r, c), row: r, col: c });
+            }
+        }
+        return values.length ? values : null;
+    }
+    extractAllColumnFormats(snapshot) {
+        const styles = snapshot['styles'];
+        const sheets = snapshot['sheets'];
+        const order = snapshot['sheetOrder'];
+        if (!styles || !sheets)
+            return [];
+        const results = [];
+        const seen = new Set();
+        for (const sheetId of order ?? Object.keys(sheets)) {
+            const sheetData = sheets[sheetId];
+            if (!sheetData?.cellData)
+                continue;
+            const sheetName = sheetData.name ?? sheetId;
+            const headerRow = sheetData.cellData['0'] ?? {};
+            for (const rowKey of ['1', '2', '3']) {
+                const row = sheetData.cellData[rowKey];
+                if (!row)
+                    continue;
+                for (const colKey of Object.keys(row)) {
+                    const key = `${sheetId}:${colKey}`;
+                    if (seen.has(key))
+                        continue;
+                    const styleId = row[colKey]?.s;
+                    if (!styleId)
+                        continue;
+                    const pattern = styles[styleId]?.n?.pattern ?? styles[styleId]?.nf?.pattern;
+                    if (!pattern)
+                        continue;
+                    seen.add(key);
+                    const colIndex = parseInt(colKey, 10);
+                    const colLetter = this.toColLetter(colIndex);
+                    const headerV = headerRow[colKey]?.v;
+                    results.push({
+                        sheet: sheetName,
+                        col: colLetter,
+                        colIndex,
+                        header: headerV ? String(headerV) : colLetter,
+                        numfmt: pattern,
+                    });
+                }
+            }
+        }
+        return results;
+    }
+    toColLetter(index) {
+        let result = '';
+        let n = index;
+        do {
+            result = String.fromCharCode(65 + (n % 26)) + result;
+            n = Math.floor(n / 26) - 1;
+        } while (n >= 0);
+        return result;
+    }
+    buildEmptyWorkbook() {
+        return {
+            id: 'workbook-default',
+            locale: this.resolveLocaleType(),
+            name: 'Sheet',
+            sheetOrder: ['sheet1'],
+            appVersion: '3.0.0-alpha',
+            sheets: {
+                sheet1: { id: 'sheet1', name: 'Sheet1', rowCount: 30, columnCount: 26, cellData: {} },
+            },
+        };
+    }
+    resolveLocaleType() {
+        return this.activeLocale() === 'vi' ? LocaleType.VI_VN : LocaleType.EN_US;
+    }
+    registerColumnClickListener() {
+        const wrapper = this.containerRef()?.nativeElement;
+        if (!wrapper)
+            return;
+        this.listenEnableTimer = setTimeout(() => {
+            this.listenEnabled = true;
+        }, 600);
+        const handleDblClick = (event) => {
+            if (!this.listenEnabled)
+                return;
+            if (event.target.tagName !== 'CANVAS')
+                return;
+            setTimeout(() => {
+                this.ngZone.run(() => {
+                    const range = this.univerAPI?.getActiveWorkbook()?.getActiveSheet()?.getActiveRange();
+                    if (!range)
+                        return;
+                    const { startRow, endRow, startColumn, rangeType } = range.getRange();
+                    const isColHeader = rangeType === 2 || (startRow === 0 && endRow >= 29);
+                    const isFirstRow = startRow === 0 && endRow === 0;
+                    if (!isColHeader && !isFirstRow)
+                        return;
+                    this.outColumnDblClick.emit(startColumn);
+                });
+            }, 50);
+        };
+        wrapper.addEventListener('dblclick', handleDblClick);
+        this.columnClickDisposable = { dispose: () => wrapper.removeEventListener('dblclick', handleDblClick) };
+    }
+    /**
+     * Lắng nghe MUTATION cột (insert/remove/move) — mức mutation để bắt cả undo/redo, một lần/thao tác.
+     * Chuẩn hoá thành `T_columnStructureChange` rồi phát ra ngoài cho consumer remap mapping.
+     */
+    registerColumnOpListener() {
+        // CONVENTION-EXCEPT: any — FUniver.onCommandExecuted / commandInfo không expose trong public types
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const api = this.univerAPI;
+        if (typeof api?.onCommandExecuted !== 'function')
+            return;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.columnOpDisposable = api.onCommandExecuted((commandInfo) => {
+            const change = this.toColumnStructureChange(commandInfo?.id, commandInfo?.params);
+            if (change)
+                this.ngZone.run(() => this.outColumnStructureChange.emit(change));
+        });
+    }
+    toColumnStructureChange(id, params) {
+        const p = params;
+        const sheetId = p?.subUnitId ?? '';
+        if (id === InsertColMutation.id || id === RemoveColMutation.id) {
+            if (!p?.range)
+                return null;
+            const type = id === InsertColMutation.id ? 'insert' : 'remove';
+            return { sheetId, type, startColumn: p.range.startColumn, count: p.range.endColumn - p.range.startColumn + 1 };
+        }
+        if (id === MoveColsMutation.id) {
+            if (!p?.sourceRange || !p?.targetRange)
+                return null;
+            return {
+                sheetId,
+                type: 'move',
+                startColumn: p.sourceRange.startColumn,
+                count: p.sourceRange.endColumn - p.sourceRange.startColumn + 1,
+                toColumn: p.targetRange.startColumn,
+            };
+        }
+        return null;
+    }
+    registerFormatListener() {
+        // CONVENTION-EXCEPT: any — FUniver.onCommandExecuted / commandInfo không expose trong public types
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const api = this.univerAPI;
+        if (typeof api?.onCommandExecuted !== 'function')
+            return;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.formatDisposable = api.onCommandExecuted((commandInfo) => {
+            this.ngZone.run(() => {
+                if (commandInfo?.id === 'sheet.operation.open.numfmt.panel') {
+                    this.numfmtPanelOpen = true;
+                    this.numfmtConfirmed = false; // reset cờ — phiên mới mặc định chưa Confirm
+                    this.numfmtDateActive = false; // chưa chọn Type=Date → chưa kích hoạt luồng custom
+                    // Lưu numfmt gốc từng ô để Cancel khôi phục đúng (vùng chọn có thể nhiều format khác nhau)
+                    this.originalCellFormats = this.captureRangeNumfmt(this.lastRangeSnapshot);
+                    // Chỉ bật observer khi panel mở (tránh chạy liên tục theo mọi mutation toàn trang)
+                    this.numfmtObserver?.observe(document.body, { childList: true, subtree: true });
+                    // Reopen: Univer hiện lại panel cũ bằng CSS (không mutation) → observer không fire. Chủ động
+                    // thử inject sau 1 nhịp để bắt trường hợp list ngày đã sẵn trong DOM tái dùng.
+                    setTimeout(() => {
+                        if (this.numfmtPanelOpen)
+                            this.processNumfmtPanel();
+                    }, 60);
+                    return;
+                }
+                if (commandInfo?.id === 'sheet.operation.close.numfmt.panel') {
+                    this.numfmtPanelOpen = false;
+                    // Tắt observer khi đóng (perf). KHÔNG gỡ listener: Univer tái dùng DOM panel, gỡ sẽ làm
+                    // option chết khi mở lại. cleanup chạy trước lần inject mới (DOM mới) hoặc khi destroy.
+                    this.numfmtObserver?.disconnect();
+                    // Univer TÁI DÙNG DOM panel khi reopen (nhớ cả Type=Date) → guard data-custom-dates còn sót sẽ
+                    // chặn re-inject ở lần mở sau, khiến highlight stale + dateActive=false (mất revert). Xoá guard
+                    // để lần mở kế tiếp inject lại + resync highlight/auto-apply theo cột hiện tại.
+                    document.querySelector('.numfmt-panel ul.univer-select-list')?.removeAttribute('data-custom-dates');
+                    // Chỉ khi bấm CONFIRM (numfmtConfirmed=true) mới GIỮ pattern đã chọn cho cả vùng.
+                    // Cancel / X / click-ngoài đều KHÔNG set cờ → KHÔI PHỤC numfmt GỐC TỪNG Ô (đã chụp khi mở panel).
+                    const dateActive = this.numfmtDateActive;
+                    const confirmed = this.numfmtConfirmed;
+                    const pending = this.pendingNumfmtPattern;
+                    const originalCells = this.originalCellFormats;
+                    this.numfmtConfirmed = false;
+                    this.pendingNumfmtPattern = null;
+                    this.originalCellFormats = null;
+                    this.numfmtDateActive = false;
+                    // Type khác Date (Số/Tiền tệ/%/Text…) do Univer tự apply/cancel → KHÔNG can thiệp,
+                    // nếu không sẽ revert nhầm format mà user vừa áp qua luồng native của Univer.
+                    if (!dateActive) {
+                        this.clearNumfmtPreview();
+                        return;
+                    }
+                    const snap = this.lastRangeSnapshot;
+                    if (!snap)
+                        return;
+                    let values;
+                    if (confirmed && pending) {
+                        values = [];
+                        for (let r = snap.startRow; r <= Math.min(snap.endRow, snap.startRow + 499); r++) {
+                            for (let c = snap.startColumn; c <= snap.endColumn; c++) {
+                                values.push({ pattern: pending, row: r, col: c });
+                            }
+                        }
+                    }
+                    else if (!confirmed && originalCells) {
+                        values = originalCells;
+                    }
+                    else {
+                        return;
+                    }
+                    if (!values.length)
+                        return;
+                    // CONVENTION-EXCEPT: any — FUniver.executeCommand không expose typing
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    void this.univerAPI?.executeCommand?.('sheet.command.numfmt.set.numfmt', {
+                        unitId: snap.unitId,
+                        subUnitId: snap.subUnitId,
+                        values,
+                    });
+                    this.clearNumfmtPreview();
+                    return;
+                }
+                // Khi panel đang mở: CHỈ user đổi vùng chọn trên grid (set-selections) mới được cập nhật snapshot
+                // để re-target panel sang cột/cell mới. Command nội bộ panel (numfmt.set, mutation…) KHÔNG đụng snapshot.
+                const isUserSelection = commandInfo?.id === 'sheet.operation.set-selections';
+                if (this.numfmtPanelOpen && !isUserSelection)
+                    return;
+                const wb = this.univerAPI?.getActiveWorkbook();
+                const ws = wb?.getActiveSheet();
+                const range = ws?.getActiveRange();
+                if (!range || !wb || !ws)
+                    return;
+                const rangeData = range.getRange();
+                this.activeCellRef.set(`${this.toColLetter(rangeData.startColumn)}${rangeData.startRow + 1}`);
+                // CONVENTION-EXCEPT: any — FWorkbook.getId / FWorksheet.getSheetId chưa expose trong types
+                /* eslint-disable @typescript-eslint/no-explicit-any */
+                const wbAny = wb;
+                const wsAny = ws;
+                /* eslint-enable @typescript-eslint/no-explicit-any */
+                this.lastRangeSnapshot = {
+                    unitId: (wbAny.getId?.() ?? wbAny.getUnitId?.() ?? ''),
+                    subUnitId: (wsAny.getSheetId?.() ?? wsAny.getUnitId?.() ?? ''),
+                    startRow: rangeData.startRow,
+                    endRow: rangeData.endRow,
+                    startColumn: rangeData.startColumn,
+                    endColumn: rangeData.endColumn,
+                };
+                // CONVENTION-EXCEPT: any — FRange.getCellStyleData chưa expose trong types
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const rangeAny = range;
+                const style = rangeAny.getCellStyleData?.();
+                const numFmt = style?.n?.pattern ?? style?.nf?.pattern;
+                this.activeCellFormat.set(numFmt && numFmt !== '0' ? numFmt : 'General');
+                // User đổi vùng chọn LÚC panel Date đang mở → tích luỹ numfmt gốc của vùng mới (để Cancel
+                // revert đúng mọi ô đã chạm) rồi đồng bộ lại panel (label + highlight + auto-apply) theo cột mới.
+                if (this.numfmtPanelOpen && this.numfmtDateActive) {
+                    this.mergeOriginalCellFormats(this.captureRangeNumfmt(this.lastRangeSnapshot));
+                    this.numfmtResync?.();
+                }
+            });
+        });
+    }
+    /** Gộp numfmt gốc của vùng vừa chọn vào snapshot revert, giữ giá trị GỐC ĐẦU TIÊN cho mỗi ô. */
+    mergeOriginalCellFormats(extra) {
+        if (!extra)
+            return;
+        if (!this.originalCellFormats) {
+            this.originalCellFormats = extra;
+            return;
+        }
+        const seen = new Set(this.originalCellFormats.map((v) => `${v.row}:${v.col}`));
+        for (const cell of extra) {
+            if (seen.has(`${cell.row}:${cell.col}`))
+                continue;
+            this.originalCellFormats.push(cell);
+        }
+    }
+    /**
+     * Xoá live-preview overlay của Univer numfmt panel.
+     *
+     * Khi panel numfmt mở, `NumfmtController._previewPattern` được Univer dùng để vẽ đè
+     * (preview) lên hiển thị thật của vùng chọn. Vì các option date custom ghi numfmt
+     * trực tiếp vào model (không đi qua panel gốc của Univer), preview này không bao giờ
+     * khớp model → cột không đổi hiển thị ngay. Set `_previewPattern = null` + force re-render
+     * (`_forceUpdate`) để canvas vẽ đúng giá trị model tức thì.
+     *
+     * NumfmtController không export khỏi `@univerjs/sheets-numfmt` nên phải tìm instance
+     * qua injector của Univer (cache lại sau lần đầu).
+     */
+    clearNumfmtPreview() {
+        const controller = this.resolveNumfmtController();
+        if (!controller)
+            return;
+        if (controller._previewPattern != null)
+            controller._previewPattern = null;
+        // LUÔN force re-render: numfmt vừa áp vào model cần vẽ lại canvas ngay (kể cả khi không có preview).
+        controller._forceUpdate?.();
+    }
+    // CONVENTION-EXCEPT: any — truy cập injector + NumfmtController nội bộ của Univer (không có public API)
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    resolveNumfmtController() {
+        if (this.numfmtController)
+            return this.numfmtController;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const injector = this.univer?.__getInjector?.();
+        if (!injector)
+            return null;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const scanMap = (map) => {
+            if (!(map instanceof Map))
+                return null;
+            for (const value of map.values()) {
+                const candidates = Array.isArray(value) ? value : [value];
+                for (const candidate of candidates) {
+                    const instance = candidate?.instance !== undefined ? candidate.instance : candidate;
+                    if (instance && typeof instance === 'object' && '_previewPattern' in instance)
+                        return instance;
+                }
+            }
+            return null;
+        };
+        // Các instance của redi nằm trong Map lồng 1 cấp (vd injector.resolvedDependencyCollection.resolvedDependencies)
+        for (const key of Object.keys(injector)) {
+            const value = injector[key];
+            let found = scanMap(value);
+            if (!found && value && typeof value === 'object') {
+                for (const nestedKey of Object.keys(value)) {
+                    found = scanMap(value[nestedKey]);
+                    if (found)
+                        break;
+                }
+            }
+            if (found) {
+                this.numfmtController = found;
+                return found;
+            }
+        }
+        return null;
+    }
+    /**
+     * Tạo observer để inject option ngày custom + highlight khi panel numfmt render.
+     * Observer CHỈ được bật/tắt theo vòng đời panel (xem open/close.numfmt.panel handler) để
+     * không chạy liên tục theo mọi mutation DOM toàn trang.
+     */
+    registerNumfmtDropdownObserver() {
+        this.numfmtObserver = new MutationObserver(() => this.processNumfmtPanel());
+    }
+    /**
+     * Thử inject option ngày custom + highlight cho panel numfmt hiện tại.
+     * Gọi từ 2 nguồn: (1) MutationObserver khi Univer render list ngày; (2) trực tiếp lúc mở panel —
+     * vì Univer TÁI DÙNG DOM panel khi reopen (hiện lại bằng CSS, không phát sinh mutation) nên observer
+     * không kích hoạt, phải chủ động gọi để re-inject + resync theo cột hiện tại.
+     */
+    processNumfmtPanel() {
+        syncActiveNumfmtHighlight();
+        const result = injectCustomDateFormats(() => this.lastRangeSnapshot, 
+        // CONVENTION-EXCEPT: any — FUniver.executeCommand không expose typing
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (cmdId, params) => void this.univerAPI.executeCommand?.(cmdId, params), (pattern) => {
+            this.pendingNumfmtPattern = pattern;
+        }, () => {
+            const snap = this.lastRangeSnapshot;
+            if (!snap)
+                return this.activeCellFormat();
+            // Quét vài dòng đầu của vùng chọn, bỏ qua header/General để lấy format ĐẠI DIỆN của dữ liệu.
+            // Khi chọn cả cột, startRow = 0 là header (thường General) → nếu chỉ đọc dòng đó sẽ highlight sai option.
+            const maxScan = Math.min(snap.endRow, snap.startRow + 4);
+            for (let r = snap.startRow; r <= maxScan; r++) {
+                const fmt = this.readCellNumfmt(snap.subUnitId, r, snap.startColumn);
+                if (fmt !== 'General')
+                    return fmt;
+            }
+            return this.activeCellFormat();
+        }, () => this.clearNumfmtPreview(), () => {
+            // Giá trị thực của ô đại diện (dòng dữ liệu đầu có số) → label option khớp dữ liệu cột.
+            const snap = this.lastRangeSnapshot;
+            if (!snap)
+                return null;
+            const maxScan = Math.min(snap.endRow, snap.startRow + 4);
+            for (let r = snap.startRow; r <= maxScan; r++) {
+                const value = this.readCellValue(snap.subUnitId, r, snap.startColumn);
+                if (value !== null)
+                    return value;
+            }
+            return null;
+        }, () => {
+            this.numfmtConfirmed = true;
+        });
+        // result chỉ truthy khi THỰC SỰ inject trên 1 listContainer Date mới (guard data-custom-dates chặn
+        // các lần gọi thừa). Gỡ listener của lần inject trước trước khi giữ cleanup mới → tránh tích tụ.
+        // Đồng thời lưu resync để re-target panel khi user đổi cột, và đánh dấu luồng Date đang hoạt động.
+        if (result) {
+            this.numfmtCleanup?.();
+            this.numfmtCleanup = result.cleanup;
+            this.numfmtResync = result.resync;
+            this.numfmtDateActive = true;
+        }
+    }
+    initUniver(data) {
+        const wrapper = this.containerRef()?.nativeElement;
+        if (!wrapper)
+            return;
+        wrapper.replaceChildren();
+        const container = document.createElement('div');
+        container.style.cssText = 'width:100%;height:100%';
+        wrapper.appendChild(container);
+        const univer = new Univer({
+            locale: this.resolveLocaleType(),
+            locales: {
+                [LocaleType.EN_US]: univerLocaleEn,
+                [LocaleType.VI_VN]: univerLocaleVi,
+            },
+            theme: defaultTheme,
+        });
+        this.univer = univer;
+        univer.registerPlugin(UniverRenderEnginePlugin);
+        univer.registerPlugin(UniverFormulaEnginePlugin);
+        univer.registerPlugin(UniverUIPlugin, { container, header: this.showToolbar(), footer: this.showSheetTabs() });
+        univer.registerPlugin(UniverDocsPlugin, { hasScroll: false });
+        univer.registerPlugin(UniverDocsUIPlugin);
+        univer.registerPlugin(UniverSheetsPlugin);
+        univer.registerPlugin(UniverSheetsUIPlugin, { menu: this.toolbarMenuConfig() });
+        univer.registerPlugin(UniverSheetsNumfmtPlugin);
+        univer.registerPlugin(UniverSheetsFormulaPlugin);
+        univer.registerPlugin(UniverSheetsFormulaUIPlugin);
+        univer.createUnit(UniverInstanceType.UNIVER_SHEET, data);
+        this.univerAPI = FUniver.newAPI(univer);
+        if (this.pendingReadyCb) {
+            // Wait for .more-numfmt-type to appear in DOM — this signals that UniverSheetsUIPlugin
+            // has fully rendered the toolbar and UniverSheetsNumfmtPlugin's INumfmtModel is ready.
+            const wrapper = this.containerRef()?.nativeElement;
+            if (wrapper) {
+                this.readyObserver = new MutationObserver(() => {
+                    if (!wrapper.querySelector('.more-numfmt-type'))
+                        return;
+                    this.readyObserver?.disconnect();
+                    this.readyObserver = null;
+                    const cb = this.pendingReadyCb;
+                    this.pendingReadyCb = null;
+                    cb?.();
+                });
+                this.readyObserver.observe(wrapper, { childList: true, subtree: true });
+            }
+        }
+        this.registerColumnClickListener();
+        this.registerColumnOpListener();
+        this.registerFormatListener();
+        this.registerNumfmtDropdownObserver();
+        this.registerToolbarWidthSync();
+        this.registerNumfmtClickInterceptor();
+    }
+    /**
+     * Khắc phục lỗi toolbar collapse sai (gom item vào menu ⋮ dù còn khoảng trắng).
+     *
+     * Univer (component Ribbon) quyết định overflow bằng 1 container ĐO off-screen (con trực tiếp của
+     * header, position:absolute). Thuật toán: `total = 90; cho mỗi ITEM total += item.clientWidth + 8;
+     * nếu total > measuringContainer.clientWidth → collapse item`. Công thức này OVER-COUNT 2 chỗ:
+     *   • +90px reserve cho nút ⋮ (cộng kể cả khi không cần collapse).
+     *   • +8px MỖI item, trong khi khoảng cách (gap) thực tế chỉ nằm giữa các GROUP.
+     * Nếu set bề rộng container đo = đúng headerW thì `total` (vd 961) > headerW (vd 900) → Univer tưởng
+     * tràn và gom item vào ⋮ dù content thật chỉ ~829px (còn ~70px trống).
+     *
+     * Fix (triệt để, không phụ thuộc timing): pin bề rộng container ĐO = HẰNG SỐ rất lớn qua CSS RULE trong
+     * 1 <style> riêng. Khi đó `total` của Univer KHÔNG BAO GIỜ vượt → KHÔNG gom item vào ⋮ → luôn hiển thị
+     * ĐỦ option (đúng yêu cầu). Vì sao chọn cách này thay vì khớp width = headerW:
+     *   • Thuật toán Univer over-count (90 reserve ⋮ + 8px/item) → khớp sát headerW vẫn collapse sai khi còn chỗ.
+     *   • ResizeObserver của Univer hay KẸT STALE: 1 transient lúc load (icon/font làm item rộng nhất thời) đặt
+     *     collapsedIds rồi KHÔNG re-fire → kẹt ⋮ vĩnh viễn dù sau đó còn chỗ (đúng triệu chứng reload luôn ⋮).
+     *   • Set inline lại bị React re-render strip → oscillation. CSS rule !important React không strip được.
+     * Container đo vốn off-screen (position:absolute, opacity:0) nên width khổng lồ hoàn toàn vô hình. Khi
+     * vùng chứa quá hẹp (hiếm với spreadsheet) toolbar cuộn ngang — xem SCSS `.univer-toolbar` overflow-x.
+     */
+    registerToolbarWidthSync() {
+        const wrapper = this.containerRef()?.nativeElement;
+        if (!wrapper)
+            return;
+        wrapper.classList.add(this.toolbarScopeClass);
+        const styleEl = document.createElement('style');
+        this.toolbarStyleEl = styleEl;
+        styleEl.textContent = `.${this.toolbarScopeClass} .univer-workbench-container-header > .univer-toolbar-container{width:100000px !important;max-width:none !important;}`;
+        document.head.appendChild(styleEl);
+    }
+    registerNumfmtClickInterceptor() {
+        const clickHandler = (e) => {
+            const target = e.target;
+            if (target.closest('.numfmt-panel') ?? target.closest('.more-numfmt-type-options'))
+                return;
+            const numfmtText = target.closest('.more-numfmt-type');
+            const numfmtSelect = target.closest('.univer-toolbar-item-select');
+            const isNumfmtBtn = numfmtText ?? (numfmtSelect?.querySelector('.more-numfmt-type') ? numfmtSelect : null);
+            if (!isNumfmtBtn)
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            this.executeCommand('sheet.operation.open.numfmt.panel', undefined);
+        };
+        document.body.addEventListener('click', clickHandler, true);
+        this.numfmtClickDisposable = { dispose: () => document.body.removeEventListener('click', clickHandler, true) };
+    }
+    destroyUniver() {
+        if (this.pendingInitTimer !== null) {
+            clearTimeout(this.pendingInitTimer);
+            this.pendingInitTimer = null;
+        }
+        this.columnClickDisposable?.dispose();
+        this.columnClickDisposable = null;
+        this.columnOpDisposable?.dispose();
+        this.columnOpDisposable = null;
+        this.formatDisposable?.dispose();
+        this.formatDisposable = null;
+        this.numfmtObserver?.disconnect();
+        this.numfmtObserver = null;
+        this.toolbarResizeObserver?.disconnect();
+        this.toolbarResizeObserver = null;
+        this.toolbarStyleEl?.remove();
+        this.toolbarStyleEl = null;
+        this.numfmtClickDisposable?.dispose();
+        this.numfmtClickDisposable = null;
+        this.numfmtCleanup?.();
+        this.numfmtCleanup = null;
+        this.numfmtResync = null;
+        this.numfmtDateActive = false;
+        this.readyObserver?.disconnect();
+        this.readyObserver = null;
+        this.activeCellFormat.set('General');
+        this.activeCellRef.set('');
+        this.lastRangeSnapshot = null;
+        this.pendingNumfmtPattern = null;
+        this.numfmtConfirmed = false;
+        this.originalCellFormats = null;
+        this.numfmtPanelOpen = false;
+        this.listenEnabled = false;
+        if (this.listenEnableTimer !== null) {
+            clearTimeout(this.listenEnableTimer);
+            this.listenEnableTimer = null;
+        }
+        this.numfmtController = null;
+        this.univer?.dispose();
+        this.univer = null;
+        this.univerAPI = null;
+    }
+    reinitUniver() {
+        const currentData = this.univerAPI?.getActiveWorkbook()?.save();
+        this.destroyUniver();
+        setTimeout(() => this.initUniver(currentData ?? this.buildEmptyWorkbook()));
+    }
+    ngOnDestroy() {
+        this.destroyUniver();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsSpreadsheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.14", type: LibsUiComponentsSpreadsheetComponent, isStandalone: true, selector: "libs_ui-components-spreadsheet", inputs: { locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, toolbarMenuConfig: { classPropertyName: "toolbarMenuConfig", publicName: "toolbarMenuConfig", isSignal: true, isRequired: false, transformFunction: null }, mappingIndicatorConfig: { classPropertyName: "mappingIndicatorConfig", publicName: "mappingIndicatorConfig", isSignal: true, isRequired: false, transformFunction: null }, mappingTargets: { classPropertyName: "mappingTargets", publicName: "mappingTargets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outColumnDblClick: "outColumnDblClick", outColumnStructureChange: "outColumnStructureChange" }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #containerRef class=\"libs-ui-components-spreadsheet-container\"></div>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;height:100%}.libs-ui-components-spreadsheet-container{width:100%;height:100%}::ng-deep .univer-toolbar-container{flex-grow:1!important;margin:0!important}::ng-deep .univer-toolbar{overflow-x:auto}::ng-deep .univer-toolbar>.univer-toolbar-container{justify-content:flex-start!important;flex-shrink:0!important}::ng-deep .univer-toolbar-more-container{display:flex!important;flex-wrap:wrap!important;gap:8px!important;width:max-content!important;max-width:320px!important;padding:8px!important}::ng-deep .univer-toolbar-more-container .univer-toolbar-group{flex-shrink:0!important}::ng-deep .univer-select-dropdown .univer-select-item[title=\"Custom Format\"]{display:none!important}::ng-deep .numfmt-panel{padding:0 4px}::ng-deep .univer-custom-format-title{margin-top:12px!important;font-size:11px!important;font-weight:700!important;color:#8c8c8c!important;text-transform:uppercase!important;letter-spacing:.5px!important}::ng-deep .univer-custom-format-input{margin-top:6px!important}::ng-deep .univer-custom-format-input input,::ng-deep .univer-custom-format-input textarea{font-family:SFMono-Regular,Consolas,monospace!important;font-size:12px!important;border-radius:6px!important}::ng-deep .univer-custom-format-history-list{margin-top:6px!important;padding:4px!important;border:1.5px solid #f0f0f0!important;border-radius:8px!important;max-height:260px!important;overflow-y:auto!important;background:#fafafa!important;scrollbar-width:thin;scrollbar-color:#d9d9d9 transparent}::ng-deep .univer-custom-format-history-list::-webkit-scrollbar{width:4px}::ng-deep .univer-custom-format-history-list::-webkit-scrollbar-thumb{background:#d9d9d9;border-radius:4px}::ng-deep .univer-custom-format-history-list-item{padding:5px 8px!important;border-radius:6px!important;gap:8px!important;transition:all .12s;border-bottom:1px solid transparent!important}::ng-deep .univer-custom-format-history-list-item:hover{background:#e6f4ff!important}::ng-deep .univer-custom-format-history-list-item:hover>span:last-child,::ng-deep .univer-custom-format-history-list-item:hover>div:last-child{color:#1677ff!important}::ng-deep .univer-custom-format-history-list-item>span:not(.univer-custom-format-history-list-item-icon-wrap),::ng-deep .univer-custom-format-history-list-item>div:not(.univer-custom-format-history-list-item-icon-wrap){font-family:SFMono-Regular,Consolas,monospace!important;font-size:11px!important;color:#434343!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;max-width:240px!important}::ng-deep .univer-custom-format-history-list-item-icon-wrap{flex-shrink:0!important;opacity:.6}::ng-deep .univer-custom-format-des{margin-top:6px!important;font-size:11px!important;line-height:1.5!important;color:#8c8c8c!important;padding:6px 8px!important;background:#f5f5f5!important;border-radius:6px!important;border-left:3px solid #d9d9d9!important}::ng-deep .univer-numfmt-custom-item{position:relative!important;padding:5px 8px!important;border-radius:6px!important;font-family:SFMono-Regular,Consolas,monospace!important;font-size:12px!important;color:#434343!important;cursor:pointer!important;transition:background .12s,color .12s;display:block!important;border-left:3px solid transparent}::ng-deep .univer-numfmt-custom-item:hover{background:#f0f5ff!important;color:#1677ff!important;border-left-color:#1677ff!important}::ng-deep .univer-numfmt-custom-item.univer-numfmt-active{background:#e6f4ff!important;color:#1677ff!important;font-weight:600!important;padding-left:24px!important;border-left:3px solid #1677ff!important}::ng-deep .univer-numfmt-custom-item.univer-numfmt-active:before{content:\"\\2713\";position:absolute;left:7px;top:50%;transform:translateY(-50%);font-size:10px;font-weight:700;color:#1677ff;line-height:1}::ng-deep .numfmt-panel li.univer-select-list-item.univer-select-list-item-select:not(.univer-numfmt-custom-item){background:#e6f4ff!important;border-left:3px solid #1677ff!important;border-radius:6px!important}::ng-deep .numfmt-panel li.univer-select-list-item.univer-select-list-item-select:not(.univer-numfmt-custom-item) a{color:#1677ff!important}::ng-deep .numfmt-panel li.univer-select-list-item.univer-select-list-item-select:not(.univer-numfmt-custom-item) .univer-select-list-item-icon{color:#1677ff!important}::ng-deep .more-numfmt-type{cursor:pointer;font-size:0!important;display:inline-flex;align-items:center;line-height:1}::ng-deep .more-numfmt-type:before{content:\"\";display:inline-block;width:31px;height:18px;background-color:currentColor;mask:url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2034%2020'%3E%3Ctext%20x='0'%20y='15'%20font-size='13'%20font-weight='700'%20fill='black'%20font-family='Arial,sans-serif'%3E123%3C/text%3E%3Ctext%20x='20'%20y='8'%20font-size='7'%20font-weight='700'%20fill='black'%20font-family='Arial,sans-serif'%3E%25%3C/text%3E%3Ctext%20x='27'%20y='8'%20font-size='7'%20font-weight='700'%20fill='black'%20font-family='Arial,sans-serif'%3E$%3C/text%3E%3Ccircle%20cx='26.5'%20cy='15'%20r='3.4'%20fill='none'%20stroke='black'%20stroke-width='1.1'/%3E%3Cpath%20d='M26.5%2013.2v1.8l1.2.9'%20fill='none'%20stroke='black'%20stroke-width='1.1'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E\") no-repeat center/contain;-webkit-mask:url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2034%2020'%3E%3Ctext%20x='0'%20y='15'%20font-size='13'%20font-weight='700'%20fill='black'%20font-family='Arial,sans-serif'%3E123%3C/text%3E%3Ctext%20x='20'%20y='8'%20font-size='7'%20font-weight='700'%20fill='black'%20font-family='Arial,sans-serif'%3E%25%3C/text%3E%3Ctext%20x='27'%20y='8'%20font-size='7'%20font-weight='700'%20fill='black'%20font-family='Arial,sans-serif'%3E$%3C/text%3E%3Ccircle%20cx='26.5'%20cy='15'%20r='3.4'%20fill='none'%20stroke='black'%20stroke-width='1.1'/%3E%3Cpath%20d='M26.5%2013.2v1.8l1.2.9'%20fill='none'%20stroke='black'%20stroke-width='1.1'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E\") no-repeat center/contain}::ng-deep .univer-toolbar-item-select:has(.more-numfmt-type):hover{background-color:rgb(var(--grey-100));border-radius:var(--border-radius-base)}::ng-deep .univer-toolbar-item-select:has(.more-numfmt-type) .more-numfmt-type,::ng-deep .univer-toolbar-item-select:has(.more-numfmt-type) .univer-toolbar-item-select-arrow{background-color:transparent!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsSpreadsheetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'libs_ui-components-spreadsheet', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #containerRef class=\"libs-ui-components-spreadsheet-container\"></div>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;height:100%}.libs-ui-components-spreadsheet-container{width:100%;height:100%}::ng-deep .univer-toolbar-container{flex-grow:1!important;margin:0!important}::ng-deep .univer-toolbar{overflow-x:auto}::ng-deep .univer-toolbar>.univer-toolbar-container{justify-content:flex-start!important;flex-shrink:0!important}::ng-deep .univer-toolbar-more-container{display:flex!important;flex-wrap:wrap!important;gap:8px!important;width:max-content!important;max-width:320px!important;padding:8px!important}::ng-deep .univer-toolbar-more-container .univer-toolbar-group{flex-shrink:0!important}::ng-deep .univer-select-dropdown .univer-select-item[title=\"Custom Format\"]{display:none!important}::ng-deep .numfmt-panel{padding:0 4px}::ng-deep .univer-custom-format-title{margin-top:12px!important;font-size:11px!important;font-weight:700!important;color:#8c8c8c!important;text-transform:uppercase!important;letter-spacing:.5px!important}::ng-deep .univer-custom-format-input{margin-top:6px!important}::ng-deep .univer-custom-format-input input,::ng-deep .univer-custom-format-input textarea{font-family:SFMono-Regular,Consolas,monospace!important;font-size:12px!important;border-radius:6px!important}::ng-deep .univer-custom-format-history-list{margin-top:6px!important;padding:4px!important;border:1.5px solid #f0f0f0!important;border-radius:8px!important;max-height:260px!important;overflow-y:auto!important;background:#fafafa!important;scrollbar-width:thin;scrollbar-color:#d9d9d9 transparent}::ng-deep .univer-custom-format-history-list::-webkit-scrollbar{width:4px}::ng-deep .univer-custom-format-history-list::-webkit-scrollbar-thumb{background:#d9d9d9;border-radius:4px}::ng-deep .univer-custom-format-history-list-item{padding:5px 8px!important;border-radius:6px!important;gap:8px!important;transition:all .12s;border-bottom:1px solid transparent!important}::ng-deep .univer-custom-format-history-list-item:hover{background:#e6f4ff!important}::ng-deep .univer-custom-format-history-list-item:hover>span:last-child,::ng-deep .univer-custom-format-history-list-item:hover>div:last-child{color:#1677ff!important}::ng-deep .univer-custom-format-history-list-item>span:not(.univer-custom-format-history-list-item-icon-wrap),::ng-deep .univer-custom-format-history-list-item>div:not(.univer-custom-format-history-list-item-icon-wrap){font-family:SFMono-Regular,Consolas,monospace!important;font-size:11px!important;color:#434343!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;max-width:240px!important}::ng-deep .univer-custom-format-history-list-item-icon-wrap{flex-shrink:0!important;opacity:.6}::ng-deep .univer-custom-format-des{margin-top:6px!important;font-size:11px!important;line-height:1.5!important;color:#8c8c8c!important;padding:6px 8px!important;background:#f5f5f5!important;border-radius:6px!important;border-left:3px solid #d9d9d9!important}::ng-deep .univer-numfmt-custom-item{position:relative!important;padding:5px 8px!important;border-radius:6px!important;font-family:SFMono-Regular,Consolas,monospace!important;font-size:12px!important;color:#434343!important;cursor:pointer!important;transition:background .12s,color .12s;display:block!important;border-left:3px solid transparent}::ng-deep .univer-numfmt-custom-item:hover{background:#f0f5ff!important;color:#1677ff!important;border-left-color:#1677ff!important}::ng-deep .univer-numfmt-custom-item.univer-numfmt-active{background:#e6f4ff!important;color:#1677ff!important;font-weight:600!important;padding-left:24px!important;border-left:3px solid #1677ff!important}::ng-deep .univer-numfmt-custom-item.univer-numfmt-active:before{content:\"\\2713\";position:absolute;left:7px;top:50%;transform:translateY(-50%);font-size:10px;font-weight:700;color:#1677ff;line-height:1}::ng-deep .numfmt-panel li.univer-select-list-item.univer-select-list-item-select:not(.univer-numfmt-custom-item){background:#e6f4ff!important;border-left:3px solid #1677ff!important;border-radius:6px!important}::ng-deep .numfmt-panel li.univer-select-list-item.univer-select-list-item-select:not(.univer-numfmt-custom-item) a{color:#1677ff!important}::ng-deep .numfmt-panel li.univer-select-list-item.univer-select-list-item-select:not(.univer-numfmt-custom-item) .univer-select-list-item-icon{color:#1677ff!important}::ng-deep .more-numfmt-type{cursor:pointer;font-size:0!important;display:inline-flex;align-items:center;line-height:1}::ng-deep .more-numfmt-type:before{content:\"\";display:inline-block;width:31px;height:18px;background-color:currentColor;mask:url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2034%2020'%3E%3Ctext%20x='0'%20y='15'%20font-size='13'%20font-weight='700'%20fill='black'%20font-family='Arial,sans-serif'%3E123%3C/text%3E%3Ctext%20x='20'%20y='8'%20font-size='7'%20font-weight='700'%20fill='black'%20font-family='Arial,sans-serif'%3E%25%3C/text%3E%3Ctext%20x='27'%20y='8'%20font-size='7'%20font-weight='700'%20fill='black'%20font-family='Arial,sans-serif'%3E$%3C/text%3E%3Ccircle%20cx='26.5'%20cy='15'%20r='3.4'%20fill='none'%20stroke='black'%20stroke-width='1.1'/%3E%3Cpath%20d='M26.5%2013.2v1.8l1.2.9'%20fill='none'%20stroke='black'%20stroke-width='1.1'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E\") no-repeat center/contain;-webkit-mask:url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2034%2020'%3E%3Ctext%20x='0'%20y='15'%20font-size='13'%20font-weight='700'%20fill='black'%20font-family='Arial,sans-serif'%3E123%3C/text%3E%3Ctext%20x='20'%20y='8'%20font-size='7'%20font-weight='700'%20fill='black'%20font-family='Arial,sans-serif'%3E%25%3C/text%3E%3Ctext%20x='27'%20y='8'%20font-size='7'%20font-weight='700'%20fill='black'%20font-family='Arial,sans-serif'%3E$%3C/text%3E%3Ccircle%20cx='26.5'%20cy='15'%20r='3.4'%20fill='none'%20stroke='black'%20stroke-width='1.1'/%3E%3Cpath%20d='M26.5%2013.2v1.8l1.2.9'%20fill='none'%20stroke='black'%20stroke-width='1.1'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E\") no-repeat center/contain}::ng-deep .univer-toolbar-item-select:has(.more-numfmt-type):hover{background-color:rgb(var(--grey-100));border-radius:var(--border-radius-base)}::ng-deep .univer-toolbar-item-select:has(.more-numfmt-type) .more-numfmt-type,::ng-deep .univer-toolbar-item-select:has(.more-numfmt-type) .univer-toolbar-item-select-arrow{background-color:transparent!important}\n"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LibsUiComponentsSpreadsheetComponent, applyMappingIndicators, defaultMappingIndicatorConfig, remapColumnIndexes, stripMappingIndicators, toColumnLetter };
+//# sourceMappingURL=libs-ui-components-spreadsheet.mjs.map