@mozaic-ds/angular 2.0.41 → 2.0.43

package/fesm2022/mozaic-ds-angular.mjs

@@ -4,7 +4,7 @@ import { RouterLink, RouterLinkActive, RouterLinkWithHref } from '@angular/route
 import { NgTemplateOutlet, NgClass, NgComponentOutlet, JsonPipe, DOCUMENT } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { WarningCircle32, Uploading32, CheckCircle32, CrossCircleFilled20, Refresh32, Refresh20, Eye20, Upload24, Cross24, ChevronLeft24, ChevronRight24, ChevronLeft20, ChevronRight20, CrossCircleFilled24, More24, Less24, InfoCircle32, CrossCircle32, Cross20, CrossCircle24, ImageAlt32, ChevronDown24, CheckCircleFilled32, WarningCircleFilled32, CrossCircleFilled32, InfoCircleFilled32, SidebarExpand24, ChevronDown20, InfoCircleFilled24, WarningCircleFilled24, CheckCircleFilled24, ArrowBottomRight24, ArrowTopRight24, StarHalf32, StarFilled32, Star32, StarHalf24, StarFilled24, Star24, StarHalf20, StarFilled20, Star20, Check20, Check24, ArrowBack24, ArrowNext24, HelpCircle24, Menu24, Notification24, Search24, PauseCircle24, PlayCircle24, ChevronUp20, Settings20, ErrorFilled24, Drag20, ListAdd20, ViewGridX420, Filter20, FullscreenEnter20, FullscreenExit20, Download20, CheckCircle24 } from '@mozaic-ds/icons-angular';
+import { WarningCircle32, Uploading32, CheckCircle32, CrossCircleFilled20, Refresh32, Refresh20, Eye20, Upload24, Cross24, ChevronLeft24, ChevronRight24, ChevronLeft20, ChevronRight20, CrossCircleFilled24, More24, Less24, InfoCircle32, CrossCircle32, Cross20, CrossCircle24, ImageAlt32, ChevronDown24, CheckCircleFilled32, WarningCircleFilled32, CrossCircleFilled32, InfoCircleFilled32, SidebarExpand24, ChevronDown20, InfoCircleFilled24, WarningCircleFilled24, CheckCircleFilled24, ArrowBottomRight24, ArrowTopRight24, StarHalf32, StarFilled32, Star32, StarHalf24, StarFilled24, Star24, StarHalf20, StarFilled20, Star20, Check20, Check24, ArrowBack24, ArrowNext24, HelpCircle24, Menu24, Notification24, Search24, PauseCircle24, PlayCircle24, ChevronUp20, Settings20, ErrorFilled24, Drag20, ListAdd20, ViewGridX420, Filter20, FullscreenEnter20, FullscreenExit20, Download20, Keyboard20, CheckCircle24 } from '@mozaic-ds/icons-angular';
 import { Overlay, OverlayConfig, OverlayPositionBuilder, CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
 import { CdkPortalOutlet, ComponentPortal } from '@angular/cdk/portal';
 import { Subject, take, tap, of, firstValueFrom } from 'rxjs';
@@ -4897,6 +4897,7 @@ class GridStateManager {
     scrollLeft = signal(0, ...(ngDevMode ? [{ debugName: "scrollLeft" }] : /* istanbul ignore next */ []));
     scrollTop = signal(0, ...(ngDevMode ? [{ debugName: "scrollTop" }] : /* istanbul ignore next */ []));
     scrollViewportWidth = signal(0, ...(ngDevMode ? [{ debugName: "scrollViewportWidth" }] : /* istanbul ignore next */ []));
+    scrollViewportHeight = signal(0, ...(ngDevMode ? [{ debugName: "scrollViewportHeight" }] : /* istanbul ignore next */ []));
     scrollContentTotalWidth = signal(0, ...(ngDevMode ? [{ debugName: "scrollContentTotalWidth" }] : /* istanbul ignore next */ []));
     // --- Horizontal virtual scroll ---
     horizontalVirtualScrollEnabled = signal(false, ...(ngDevMode ? [{ debugName: "horizontalVirtualScrollEnabled" }] : /* istanbul ignore next */ []));
@@ -4919,6 +4920,8 @@ class GridStateManager {
     isFilling = signal(false, ...(ngDevMode ? [{ debugName: "isFilling" }] : /* istanbul ignore next */ []));
     fillAnchor = signal(null, ...(ngDevMode ? [{ debugName: "fillAnchor" }] : /* istanbul ignore next */ []));
     fillTarget = signal(null, ...(ngDevMode ? [{ debugName: "fillTarget" }] : /* istanbul ignore next */ []));
+    // --- Cut (Ctrl+X) source — drives the marching-ants outline in view ---
+    cutSource = signal(null, ...(ngDevMode ? [{ debugName: "cutSource" }] : /* istanbul ignore next */ []));
     // --- Expandable Rows ---
     expandedRowIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedRowIds" }] : /* istanbul ignore next */ []));
     rowIdField = signal('id', ...(ngDevMode ? [{ debugName: "rowIdField" }] : /* istanbul ignore next */ []));
@@ -5524,8 +5527,485 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             type: Injectable
         }] });
 
+const PASTE_SKIP$1 = Symbol('PASTE_SKIP');
+/**
+ * Applies a set of cell-level mutations to sourceData and returns the list of
+ * actual changes that occurred, so the caller (usually the history engine) can
+ * record them. `PASTE_SKIP` return values are filtered out transparently.
+ */
+class ClipboardEngine {
+    state = inject(GridStateManager);
+    /** Derived by components (marching-ants outline). */
+    cutRange = computed(() => this.state.cutSource(), ...(ngDevMode ? [{ debugName: "cutRange" }] : /* istanbul ignore next */ []));
+    markCut(range) {
+        this.state.cutSource.set(range);
+    }
+    clearCut() {
+        this.state.cutSource.set(null);
+    }
+    /** Vertical fill: row 0 of the range is the source, subsequent rows are targets. */
+    fillDown(range) {
+        if (range.start.row === range.end.row)
+            return [];
+        const cols = this.state.visibleColumns();
+        const defMap = this.state.columnDefMap();
+        const changes = [];
+        this.state.sourceData.update((data) => {
+            const updated = [...data];
+            const sourceRow = updated[range.start.row];
+            if (!sourceRow)
+                return updated;
+            for (let r = range.start.row + 1; r <= range.end.row; r++) {
+                if (!updated[r])
+                    continue;
+                const rowCopy = { ...updated[r] };
+                let changed = false;
+                for (let c = range.start.col; c <= range.end.col; c++) {
+                    const field = cols[c]?.field;
+                    if (!field)
+                        continue;
+                    const def = defMap.get(field);
+                    if (!def?.editable)
+                        continue;
+                    const sourceValue = def.valueGetter
+                        ? def.valueGetter(sourceRow)
+                        : sourceRow[field];
+                    const coerced = this.coerceAndValidate(field, sourceValue, updated[r]);
+                    if (coerced === PASTE_SKIP$1)
+                        continue;
+                    const before = updated[r][field];
+                    if (before === coerced)
+                        continue;
+                    rowCopy[field] = coerced;
+                    changes.push({ rowIndex: r, field, before, after: coerced });
+                    changed = true;
+                }
+                if (changed)
+                    updated[r] = rowCopy;
+            }
+            return updated;
+        });
+        return changes;
+    }
+    /** Horizontal fill: col 0 of the range is the source, subsequent cols are targets. */
+    fillRight(range) {
+        if (range.start.col === range.end.col)
+            return [];
+        const cols = this.state.visibleColumns();
+        const defMap = this.state.columnDefMap();
+        const sourceField = cols[range.start.col]?.field;
+        if (!sourceField)
+            return [];
+        const sourceDef = defMap.get(sourceField);
+        if (!sourceDef)
+            return [];
+        const changes = [];
+        this.state.sourceData.update((data) => {
+            const updated = [...data];
+            for (let r = range.start.row; r <= range.end.row; r++) {
+                const row = updated[r];
+                if (!row)
+                    continue;
+                const sourceValue = sourceDef.valueGetter
+                    ? sourceDef.valueGetter(row)
+                    : row[sourceField];
+                const rowCopy = { ...row };
+                let changed = false;
+                for (let c = range.start.col + 1; c <= range.end.col; c++) {
+                    const field = cols[c]?.field;
+                    if (!field)
+                        continue;
+                    const def = defMap.get(field);
+                    if (!def?.editable)
+                        continue;
+                    const coerced = this.coerceAndValidate(field, sourceValue, row);
+                    if (coerced === PASTE_SKIP$1)
+                        continue;
+                    const before = row[field];
+                    if (before === coerced)
+                        continue;
+                    rowCopy[field] = coerced;
+                    changes.push({ rowIndex: r, field, before, after: coerced });
+                    changed = true;
+                }
+                if (changed)
+                    updated[r] = rowCopy;
+            }
+            return updated;
+        });
+        return changes;
+    }
+    /** Ctrl+Enter: write `value` into every editable cell of `range`. */
+    fillSelection(range, value) {
+        const cols = this.state.visibleColumns();
+        const defMap = this.state.columnDefMap();
+        const changes = [];
+        this.state.sourceData.update((data) => {
+            const updated = [...data];
+            for (let r = range.start.row; r <= range.end.row; r++) {
+                const row = updated[r];
+                if (!row)
+                    continue;
+                const rowCopy = { ...row };
+                let changed = false;
+                for (let c = range.start.col; c <= range.end.col; c++) {
+                    const field = cols[c]?.field;
+                    if (!field)
+                        continue;
+                    const def = defMap.get(field);
+                    if (!def?.editable)
+                        continue;
+                    const coerced = this.coerceAndValidate(field, value, row);
+                    if (coerced === PASTE_SKIP$1)
+                        continue;
+                    const before = row[field];
+                    if (before === coerced)
+                        continue;
+                    rowCopy[field] = coerced;
+                    changes.push({ rowIndex: r, field, before, after: coerced });
+                    changed = true;
+                }
+                if (changed)
+                    updated[r] = rowCopy;
+            }
+            return updated;
+        });
+        return changes;
+    }
+    /** Clears every editable cell in `range` and returns the undo payload. */
+    clearRange(range) {
+        const cols = this.state.visibleColumns();
+        const defMap = this.state.columnDefMap();
+        const changes = [];
+        this.state.sourceData.update((data) => {
+            const updated = [...data];
+            for (let r = range.start.row; r <= range.end.row; r++) {
+                const row = updated[r];
+                if (!row)
+                    continue;
+                const rowCopy = { ...row };
+                let changed = false;
+                for (let c = range.start.col; c <= range.end.col; c++) {
+                    const field = cols[c]?.field;
+                    if (!field)
+                        continue;
+                    const def = defMap.get(field);
+                    if (!def?.editable)
+                        continue;
+                    const coerced = this.coerceAndValidate(field, null, row);
+                    if (coerced === PASTE_SKIP$1)
+                        continue;
+                    const before = row[field];
+                    if (before === coerced)
+                        continue;
+                    rowCopy[field] = coerced;
+                    changes.push({ rowIndex: r, field, before, after: coerced });
+                    changed = true;
+                }
+                if (changed)
+                    updated[r] = rowCopy;
+            }
+            return updated;
+        });
+        return changes;
+    }
+    /** Applies TSV `pasteRows` starting at `range.start`, returning actual changes. */
+    applyPaste(range, pasteRows) {
+        const cols = this.state.visibleColumns();
+        const changes = [];
+        this.state.sourceData.update((data) => {
+            const updated = [...data];
+            for (let ri = 0; ri < pasteRows.length; ri++) {
+                const targetRow = range.start.row + ri;
+                if (targetRow >= updated.length)
+                    break;
+                const row = updated[targetRow];
+                if (!row)
+                    continue;
+                const rowCopy = { ...row };
+                let changed = false;
+                for (let ci = 0; ci < pasteRows[ri].length; ci++) {
+                    const targetCol = range.start.col + ci;
+                    if (targetCol >= cols.length)
+                        break;
+                    const field = cols[targetCol]?.field;
+                    if (!field)
+                        continue;
+                    const coerced = this.coerceAndValidate(field, pasteRows[ri][ci], row);
+                    if (coerced === PASTE_SKIP$1)
+                        continue;
+                    const before = row[field];
+                    if (before === coerced)
+                        continue;
+                    rowCopy[field] = coerced;
+                    changes.push({ rowIndex: targetRow, field, before, after: coerced });
+                    changed = true;
+                }
+                if (changed)
+                    updated[targetRow] = rowCopy;
+            }
+            return updated;
+        });
+        return changes;
+    }
+    /**
+     * Reverses a previously-recorded list of changes by writing `before` back into
+     * the cells. Used by the history engine for both undo and redo.
+     */
+    applyChanges(changes, direction) {
+        if (changes.length === 0)
+            return;
+        this.state.sourceData.update((data) => {
+            const updated = [...data];
+            // Group changes by rowIndex so each row is cloned once.
+            const byRow = new Map();
+            for (const change of changes) {
+                const list = byRow.get(change.rowIndex) ?? [];
+                list.push(change);
+                byRow.set(change.rowIndex, list);
+            }
+            for (const [rowIndex, rowChanges] of byRow) {
+                const row = updated[rowIndex];
+                if (!row)
+                    continue;
+                const rowCopy = { ...row };
+                for (const change of rowChanges) {
+                    rowCopy[change.field] = direction === 'before' ? change.before : change.after;
+                }
+                updated[rowIndex] = rowCopy;
+            }
+            return updated;
+        });
+    }
+    /**
+     * Coerces a raw value (string from TSV, unknown from fill, null for clears)
+     * into the editor's expected type, running the field's validator when present.
+     * Returns PASTE_SKIP when the column isn't editable or the value is rejected.
+     */
+    coerceAndValidate(field, rawValue, row) {
+        const def = this.state.columnDefMap().get(field);
+        if (!def?.editable)
+            return PASTE_SKIP$1;
+        const editorType = def.cellEditor;
+        if (rawValue === null) {
+            let clearValue;
+            switch (editorType) {
+                case 'number':
+                    clearValue = null;
+                    break;
+                case 'checkbox':
+                    clearValue = false;
+                    break;
+                default:
+                    clearValue = '';
+            }
+            if (def.cellEditorValidator) {
+                const result = def.cellEditorValidator(clearValue, row);
+                if (result === false || typeof result === 'string')
+                    return PASTE_SKIP$1;
+            }
+            return clearValue;
+        }
+        let value = rawValue;
+        if (editorType === 'number') {
+            const num = Number(rawValue);
+            if (isNaN(num))
+                return PASTE_SKIP$1;
+            value = num;
+        }
+        else if (editorType === 'checkbox') {
+            if (rawValue === 'true' || rawValue === true) {
+                value = true;
+            }
+            else if (rawValue === 'false' || rawValue === false) {
+                value = false;
+            }
+            else {
+                return PASTE_SKIP$1;
+            }
+        }
+        else if (editorType === 'select' && def.cellEditorOptions?.length) {
+            const allowed = def.cellEditorOptions.map((o) => String(o.value));
+            if (!allowed.includes(String(rawValue)))
+                return PASTE_SKIP$1;
+            value = rawValue;
+        }
+        if (def.cellEditorValidator) {
+            const result = def.cellEditorValidator(value, row);
+            if (result === false || typeof result === 'string')
+                return PASTE_SKIP$1;
+        }
+        return value;
+    }
+    /** TSV string for a range — used by copy / cut. */
+    extractTsv(range) {
+        const cols = this.state.visibleColumns();
+        const data = this.state.sourceData();
+        const defMap = this.state.columnDefMap();
+        const values = [];
+        for (let r = range.start.row; r <= range.end.row; r++) {
+            const row = data[r];
+            if (!row)
+                continue;
+            const rowValues = [];
+            for (let c = range.start.col; c <= range.end.col; c++) {
+                const field = cols[c]?.field;
+                if (!field) {
+                    rowValues.push('');
+                    continue;
+                }
+                const def = defMap.get(field);
+                const val = def?.valueGetter
+                    ? def.valueGetter(row)
+                    : row[field];
+                rowValues.push(val != null ? String(val) : '');
+            }
+            values.push(rowValues);
+        }
+        return values;
+    }
+    /**
+     * Checks whether a cell sits on any edge of the current cut outline. Four
+     * booleans rather than a single "isCut" so the view can paint only the edges
+     * that face outward — which is what produces the Excel-like marching ants.
+     */
+    cutEdges(row, col) {
+        const cut = this.state.cutSource();
+        if (!cut)
+            return { top: false, right: false, bottom: false, left: false, any: false };
+        const minRow = Math.min(cut.start.row, cut.end.row);
+        const maxRow = Math.max(cut.start.row, cut.end.row);
+        const minCol = Math.min(cut.start.col, cut.end.col);
+        const maxCol = Math.max(cut.start.col, cut.end.col);
+        if (row < minRow || row > maxRow || col < minCol || col > maxCol) {
+            return { top: false, right: false, bottom: false, left: false, any: false };
+        }
+        return {
+            top: row === minRow,
+            right: col === maxCol,
+            bottom: row === maxRow,
+            left: col === minCol,
+            any: true,
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ClipboardEngine, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ClipboardEngine });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ClipboardEngine, decorators: [{
+            type: Injectable
+        }] });
+
+const MAX_HISTORY = 50;
+const STORAGE_PREFIX = 'moz-grid-history:';
+class HistoryEngine {
+    clipboard = inject(ClipboardEngine);
+    past = signal([], ...(ngDevMode ? [{ debugName: "past" }] : /* istanbul ignore next */ []));
+    future = signal([], ...(ngDevMode ? [{ debugName: "future" }] : /* istanbul ignore next */ []));
+    storageKey = null;
+    canUndo = computed(() => this.past().length > 0, ...(ngDevMode ? [{ debugName: "canUndo" }] : /* istanbul ignore next */ []));
+    canRedo = computed(() => this.future().length > 0, ...(ngDevMode ? [{ debugName: "canRedo" }] : /* istanbul ignore next */ []));
+    /**
+     * Binds a persistence key: all record/undo/redo calls will mirror the stacks
+     * to localStorage, and past state is restored on bind. Pass null to detach.
+     */
+    attach(gridId) {
+        this.storageKey = gridId ? `${STORAGE_PREFIX}${gridId}` : null;
+        if (!this.storageKey) {
+            this.past.set([]);
+            this.future.set([]);
+            return;
+        }
+        this.restore();
+    }
+    /** Records a new mutation. Clears the redo stack (standard undo semantics). */
+    record(type, changes) {
+        if (changes.length === 0)
+            return;
+        const op = { type, changes, timestamp: Date.now() };
+        this.past.update((stack) => {
+            const next = [...stack, op];
+            return next.length > MAX_HISTORY ? next.slice(next.length - MAX_HISTORY) : next;
+        });
+        this.future.set([]);
+        this.persist();
+    }
+    undo() {
+        const stack = this.past();
+        if (stack.length === 0)
+            return null;
+        const op = stack[stack.length - 1];
+        this.clipboard.applyChanges(op.changes, 'before');
+        this.past.set(stack.slice(0, -1));
+        this.future.update((f) => [...f, op]);
+        this.persist();
+        return op;
+    }
+    redo() {
+        const stack = this.future();
+        if (stack.length === 0)
+            return null;
+        const op = stack[stack.length - 1];
+        this.clipboard.applyChanges(op.changes, 'after');
+        this.future.set(stack.slice(0, -1));
+        this.past.update((p) => [...p, op]);
+        this.persist();
+        return op;
+    }
+    clear() {
+        this.past.set([]);
+        this.future.set([]);
+        if (this.storageKey) {
+            try {
+                localStorage.removeItem(this.storageKey);
+            }
+            catch {
+                // Storage unavailable (private mode, quota) — non-fatal.
+            }
+        }
+    }
+    persist() {
+        if (!this.storageKey)
+            return;
+        try {
+            const payload = JSON.stringify({
+                past: this.past(),
+                future: this.future(),
+            });
+            localStorage.setItem(this.storageKey, payload);
+        }
+        catch {
+            // Quota exceeded or storage disabled — we silently drop persistence.
+        }
+    }
+    restore() {
+        if (!this.storageKey)
+            return;
+        try {
+            const raw = localStorage.getItem(this.storageKey);
+            if (!raw) {
+                this.past.set([]);
+                this.future.set([]);
+                return;
+            }
+            const parsed = JSON.parse(raw);
+            this.past.set(Array.isArray(parsed.past) ? parsed.past : []);
+            this.future.set(Array.isArray(parsed.future) ? parsed.future : []);
+        }
+        catch {
+            this.past.set([]);
+            this.future.set([]);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: HistoryEngine, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: HistoryEngine });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: HistoryEngine, decorators: [{
+            type: Injectable
+        }] });
+
 class InlineEditEngine {
     state = inject(GridStateManager);
+    history = inject(HistoryEngine);
     startEdit(rowIndex, field) {
         const defMap = this.state.columnDefMap();
         const def = defMap.get(field);
@@ -5545,6 +6025,54 @@ class InlineEditEngine {
             validationError: null,
         });
     }
+    /**
+     * Excel-style "typing-to-edit": starts the editor with the cell value replaced
+     * by the character the user just typed. For non-text editors (select / date /
+     * checkbox / number) we coerce: the character is kept if it's compatible with
+     * the editor, otherwise the editor opens on a cleared value.
+     */
+    startEditWithChar(rowIndex, field, char) {
+        const defMap = this.state.columnDefMap();
+        const def = defMap.get(field);
+        if (!def?.editable)
+            return;
+        const colIndex = this.state.visibleColumns().findIndex((c) => c.field === field);
+        if (colIndex < 0)
+            return;
+        const row = this.state.sourceData()[rowIndex];
+        if (!row)
+            return;
+        const currentValue = def.valueGetter
+            ? def.valueGetter(row)
+            : row[field];
+        const editorType = def.cellEditor ?? this.resolveEditorType(field, currentValue);
+        let draftValue = char;
+        switch (editorType) {
+            case 'number': {
+                const n = Number(char);
+                draftValue = Number.isNaN(n) ? '' : n;
+                break;
+            }
+            case 'checkbox':
+                // A character press toggles the checkbox to true — closest Excel-equivalent
+                // (Excel doesn't have checkbox cells but booleans flip on typing).
+                draftValue = true;
+                break;
+            case 'select':
+            case 'date':
+                // These editors have picker UIs; typing just opens them with an empty draft.
+                draftValue = '';
+                break;
+            default:
+                draftValue = char;
+        }
+        this.state.cellEditState.set({
+            editingCell: { row: rowIndex, col: colIndex },
+            originalValue: currentValue,
+            draftValue,
+            validationError: null,
+        });
+    }
     updateDraft(value) {
         this.state.cellEditState.update((s) => ({ ...s, draftValue: value }));
     }
@@ -5596,6 +6124,11 @@ class InlineEditEngine {
             oldValue: editState.originalValue,
             newValue: editState.draftValue,
         };
+        if (this.state.mode() === 'client' && event.oldValue !== event.newValue) {
+            this.history.record('edit', [
+                { rowIndex, field, before: event.oldValue, after: event.newValue },
+            ]);
+        }
         this.state.cellEditState.set({
             editingCell: null,
             originalValue: undefined,
@@ -5899,6 +6432,272 @@ class CellSelectionEngine {
     moveRight() {
         this.moveBy(0, 1);
     }
+    // --- Home / End / Grid bounds -------------------------------------------------
+    moveToRowStart() {
+        const focused = this.state.focusedCell();
+        if (!focused)
+            return;
+        this.focusCell(focused.row, 0, 'keyboard');
+    }
+    moveToRowEnd() {
+        const focused = this.state.focusedCell();
+        if (!focused)
+            return;
+        const maxCol = this.state.visibleColumns().length - 1;
+        if (maxCol < 0)
+            return;
+        this.focusCell(focused.row, this.findLastNonEmptyCol(focused.row, maxCol), 'keyboard');
+    }
+    moveToGridStart() {
+        const pageStart = this.state.pageIndex() * this.state.pageSize();
+        this.focusCell(pageStart, 0, 'keyboard');
+    }
+    moveToGridEnd() {
+        const pageStart = this.state.pageIndex() * this.state.pageSize();
+        const pageEnd = pageStart + Math.max(0, this.state.visibleRowCount() - 1);
+        const maxCol = this.state.visibleColumns().length - 1;
+        if (maxCol < 0)
+            return;
+        this.focusCell(pageEnd, this.findLastNonEmptyCol(pageEnd, maxCol), 'keyboard');
+    }
+    /**
+     * Excel-style Ctrl+Arrow: jump to the edge of the current data block.
+     * If on an empty cell, jumps to the next non-empty cell. If on a filled
+     * cell, jumps to the last filled cell before the next empty transition
+     * (or to the grid edge if no empty cell is encountered).
+     */
+    jumpToEdge(direction) {
+        const focused = this.state.focusedCell();
+        if (!focused)
+            return;
+        const { dRow, dCol } = this.directionVector(direction);
+        const bounds = this.pageBounds();
+        const maxCol = this.state.visibleColumns().length - 1;
+        if (maxCol < 0)
+            return;
+        const startFilled = this.isCellFilled(focused.row, focused.col);
+        let row = focused.row;
+        let col = focused.col;
+        // Step once to start looking at the neighbour
+        let nextRow = row + dRow;
+        let nextCol = col + dCol;
+        while (this.inBounds(nextRow, nextCol, bounds, maxCol)) {
+            const filled = this.isCellFilled(nextRow, nextCol);
+            if (startFilled) {
+                // Moving through filled cells — stop right before the next empty gap.
+                if (!filled)
+                    break;
+                row = nextRow;
+                col = nextCol;
+            }
+            else {
+                // Moving through empty cells — stop on the first filled cell we meet.
+                if (filled) {
+                    row = nextRow;
+                    col = nextCol;
+                    break;
+                }
+                row = nextRow;
+                col = nextCol;
+            }
+            nextRow += dRow;
+            nextCol += dCol;
+        }
+        this.focusCell(row, col, 'keyboard');
+    }
+    movePage(direction) {
+        const focused = this.state.focusedCell();
+        if (!focused)
+            return;
+        const step = this.pageRowStep() * (direction === 'down' ? 1 : -1);
+        this.moveBy(step, 0);
+    }
+    // --- Shift + navigation : extend current range --------------------------------
+    extendRangeBy(dRow, dCol) {
+        const focused = this.state.focusedCell();
+        if (!focused)
+            return;
+        const range = this.state.cellRange();
+        const bounds = this.pageBounds();
+        const maxCol = this.state.visibleColumns().length - 1;
+        if (maxCol < 0)
+            return;
+        const currentEnd = range ? range.end : focused;
+        const newEnd = {
+            row: Math.max(bounds.start, Math.min(bounds.end, currentEnd.row + dRow)),
+            col: Math.max(0, Math.min(maxCol, currentEnd.col + dCol)),
+        };
+        const start = range ? range.start : focused;
+        this.state.cellRange.set({ start, end: newEnd });
+    }
+    extendRangeToRowStart() {
+        const focused = this.state.focusedCell();
+        if (!focused)
+            return;
+        const range = this.state.cellRange();
+        const start = range?.start ?? focused;
+        this.state.cellRange.set({ start, end: { row: (range?.end ?? focused).row, col: 0 } });
+    }
+    extendRangeToRowEnd() {
+        const focused = this.state.focusedCell();
+        if (!focused)
+            return;
+        const maxCol = this.state.visibleColumns().length - 1;
+        if (maxCol < 0)
+            return;
+        const range = this.state.cellRange();
+        const start = range?.start ?? focused;
+        this.state.cellRange.set({ start, end: { row: (range?.end ?? focused).row, col: maxCol } });
+    }
+    extendRangeToGridStart() {
+        const focused = this.state.focusedCell();
+        if (!focused)
+            return;
+        const bounds = this.pageBounds();
+        const range = this.state.cellRange();
+        const start = range?.start ?? focused;
+        this.state.cellRange.set({ start, end: { row: bounds.start, col: 0 } });
+    }
+    extendRangeToGridEnd() {
+        const focused = this.state.focusedCell();
+        if (!focused)
+            return;
+        const bounds = this.pageBounds();
+        const maxCol = this.state.visibleColumns().length - 1;
+        if (maxCol < 0)
+            return;
+        const range = this.state.cellRange();
+        const start = range?.start ?? focused;
+        this.state.cellRange.set({ start, end: { row: bounds.end, col: maxCol } });
+    }
+    extendRangeJumpToEdge(direction) {
+        const focused = this.state.focusedCell();
+        if (!focused)
+            return;
+        const range = this.state.cellRange();
+        const anchor = range?.start ?? focused;
+        const end = range?.end ?? focused;
+        const target = this.edgeFromCell(end, direction);
+        this.state.cellRange.set({ start: anchor, end: target });
+    }
+    extendRangeByPage(direction) {
+        const step = this.pageRowStep() * (direction === 'down' ? 1 : -1);
+        this.extendRangeBy(step, 0);
+    }
+    // --- Whole row / column / grid selection --------------------------------------
+    selectRow(row) {
+        const maxCol = this.state.visibleColumns().length - 1;
+        if (maxCol < 0)
+            return;
+        this.state.focusedCell.set({ row, col: 0 });
+        this.state.focusSource.set('keyboard');
+        this.state.cellRange.set({
+            start: { row, col: 0 },
+            end: { row, col: maxCol },
+        });
+    }
+    selectColumn(col) {
+        const bounds = this.pageBounds();
+        this.state.focusedCell.set({ row: bounds.start, col });
+        this.state.focusSource.set('keyboard');
+        this.state.cellRange.set({
+            start: { row: bounds.start, col },
+            end: { row: bounds.end, col },
+        });
+    }
+    selectAll() {
+        const bounds = this.pageBounds();
+        const maxCol = this.state.visibleColumns().length - 1;
+        if (maxCol < 0)
+            return;
+        this.state.focusedCell.set({ row: bounds.start, col: 0 });
+        this.state.focusSource.set('keyboard');
+        this.state.cellRange.set({
+            start: { row: bounds.start, col: 0 },
+            end: { row: bounds.end, col: maxCol },
+        });
+    }
+    // --- Private helpers ----------------------------------------------------------
+    pageBounds() {
+        const start = this.state.pageIndex() * this.state.pageSize();
+        const end = start + Math.max(0, this.state.visibleRowCount() - 1);
+        return { start, end };
+    }
+    pageRowStep() {
+        const rowHeight = this.state.rowHeight() || 48;
+        const viewportHeight = this.state.scrollViewportHeight();
+        if (viewportHeight > 0) {
+            return Math.max(1, Math.floor(viewportHeight / rowHeight));
+        }
+        // Fallback: a sensible default when the viewport hasn't been measured yet.
+        return Math.max(1, Math.floor(this.state.visibleRowCount() / 2) || 10);
+    }
+    directionVector(dir) {
+        switch (dir) {
+            case 'up':
+                return { dRow: -1, dCol: 0 };
+            case 'down':
+                return { dRow: 1, dCol: 0 };
+            case 'left':
+                return { dRow: 0, dCol: -1 };
+            case 'right':
+                return { dRow: 0, dCol: 1 };
+        }
+    }
+    inBounds(row, col, bounds, maxCol) {
+        return row >= bounds.start && row <= bounds.end && col >= 0 && col <= maxCol;
+    }
+    isCellFilled(row, col) {
+        const cols = this.state.visibleColumns();
+        const field = cols[col]?.field;
+        if (!field)
+            return false;
+        const data = this.state.sourceData();
+        const rowData = data[row];
+        if (!rowData)
+            return false;
+        const def = this.state.columnDefMap().get(field);
+        const value = def?.valueGetter
+            ? def.valueGetter(rowData)
+            : rowData[field];
+        return value !== null && value !== undefined && value !== '';
+    }
+    findLastNonEmptyCol(row, maxCol) {
+        for (let c = maxCol; c >= 0; c--) {
+            if (this.isCellFilled(row, c))
+                return c;
+        }
+        return maxCol;
+    }
+    edgeFromCell(from, direction) {
+        const { dRow, dCol } = this.directionVector(direction);
+        const bounds = this.pageBounds();
+        const maxCol = this.state.visibleColumns().length - 1;
+        if (maxCol < 0)
+            return from;
+        const startFilled = this.isCellFilled(from.row, from.col);
+        let row = from.row;
+        let col = from.col;
+        let nextRow = row + dRow;
+        let nextCol = col + dCol;
+        while (this.inBounds(nextRow, nextCol, bounds, maxCol)) {
+            const filled = this.isCellFilled(nextRow, nextCol);
+            if (startFilled) {
+                if (!filled)
+                    break;
+            }
+            else if (filled) {
+                row = nextRow;
+                col = nextCol;
+                break;
+            }
+            row = nextRow;
+            col = nextCol;
+            nextRow += dRow;
+            nextCol += dCol;
+        }
+        return { row, col };
+    }
     moveToNextEditableCell() {
         const focused = this.state.focusedCell();
         if (!focused)
@@ -6162,113 +6961,203 @@ class KeyboardEngine {
     cellSelection = inject(CellSelectionEngine);
     inlineEdit = inject(InlineEditEngine);
     state = inject(GridStateManager);
+    actions = null;
+    registerActions(actions) {
+        this.actions = actions;
+    }
     handleKeydown(event) {
-        // Edit mode keys are handled by MozGridComponent.handleEditModeKeydown
-        const editState = this.state.cellEditState();
-        if (editState.editingCell !== null)
+        // Edit-mode keys are handled by MozGridComponent.handleEditModeKeydown;
+        // this engine only owns navigation + shortcuts in non-editing state.
+        if (this.state.cellEditState().editingCell !== null)
             return;
-        this.handleNavigationKey(event);
-    }
-    handleNavigationKey(event) {
         const focused = this.state.focusedCell();
         if (!focused)
             return;
-        switch (event.key) {
-            case 'ArrowUp':
-                event.preventDefault();
-                if (event.shiftKey) {
-                    this.extendRangeBy(-1, 0);
-                }
-                else {
-                    this.cellSelection.moveUp();
-                }
-                break;
-            case 'ArrowDown':
-                event.preventDefault();
-                if (event.shiftKey) {
-                    this.extendRangeBy(1, 0);
-                }
-                else {
-                    this.cellSelection.moveDown();
-                }
-                break;
-            case 'ArrowLeft':
-                event.preventDefault();
-                if (event.shiftKey) {
-                    this.extendRangeBy(0, -1);
-                }
-                else {
-                    this.cellSelection.moveLeft();
-                }
-                break;
-            case 'ArrowRight':
-                event.preventDefault();
-                if (event.shiftKey) {
-                    this.extendRangeBy(0, 1);
-                }
-                else {
-                    this.cellSelection.moveRight();
-                }
-                break;
-            case 'Tab':
-                event.preventDefault();
-                if (event.shiftKey) {
-                    this.cellSelection.moveLeft();
-                }
-                else {
-                    this.cellSelection.moveRight();
-                }
-                break;
-            case 'Enter': {
-                event.preventDefault();
-                const col = this.state.visibleColumns()[focused.col];
-                if (col) {
-                    const def = this.state.columnDefMap().get(col.field);
-                    if (def?.editable) {
-                        this.inlineEdit.startEdit(focused.row, col.field);
-                    }
-                }
-                break;
+        if (this.dispatch(event, focused)) {
+            event.preventDefault();
+        }
+    }
+    /** Returns true when the event was handled (so the caller should preventDefault). */
+    dispatch(event, focused) {
+        const mod = event.ctrlKey || event.metaKey;
+        const shift = event.shiftKey;
+        const alt = event.altKey;
+        const key = event.key;
+        // ---- Clipboard / history shortcuts --------------------------------------
+        if (mod && !shift && !alt) {
+            switch (key.toLowerCase()) {
+                case 'c':
+                    this.actions?.copy();
+                    return true;
+                case 'v':
+                    this.actions?.paste();
+                    return true;
+                case 'x':
+                    this.actions?.cut();
+                    return true;
+                case 'z':
+                    this.actions?.undo();
+                    return true;
+                case 'y':
+                    this.actions?.redo();
+                    return true;
+                case 'a':
+                    this.cellSelection.selectAll();
+                    return true;
+                case 'd':
+                    this.actions?.fillDown();
+                    return true;
+                case 'r':
+                    this.actions?.fillRight();
+                    return true;
+            }
+        }
+        if (mod && shift && !alt && key.toLowerCase() === 'z') {
+            this.actions?.redo();
+            return true;
+        }
+        // ---- Whole row / column selection ---------------------------------------
+        if (key === ' ') {
+            if (mod && shift) {
+                this.cellSelection.selectAll();
+                return true;
             }
-            case 'F2': {
-                event.preventDefault();
-                const col2 = this.state.visibleColumns()[focused.col];
-                if (col2) {
-                    const def2 = this.state.columnDefMap().get(col2.field);
-                    if (def2?.editable) {
-                        this.inlineEdit.startEdit(focused.row, col2.field);
-                    }
-                }
+            if (mod) {
+                this.cellSelection.selectColumn(focused.col);
+                return true;
+            }
+            if (shift) {
+                this.cellSelection.selectRow(focused.row);
+                return true;
+            }
+        }
+        // ---- Delete / Backspace: clear cells ------------------------------------
+        if (key === 'Delete' || key === 'Backspace') {
+            this.actions?.deleteRange();
+            return true;
+        }
+        // ---- Arrow keys ---------------------------------------------------------
+        if (key === 'ArrowUp' || key === 'ArrowDown' || key === 'ArrowLeft' || key === 'ArrowRight') {
+            return this.handleArrow(key, { mod, shift });
+        }
+        // ---- Home / End / PageUp / PageDown -------------------------------------
+        if (key === 'Home') {
+            if (mod && shift)
+                this.cellSelection.extendRangeToGridStart();
+            else if (mod)
+                this.cellSelection.moveToGridStart();
+            else if (shift)
+                this.cellSelection.extendRangeToRowStart();
+            else
+                this.cellSelection.moveToRowStart();
+            return true;
+        }
+        if (key === 'End') {
+            if (mod && shift)
+                this.cellSelection.extendRangeToGridEnd();
+            else if (mod)
+                this.cellSelection.moveToGridEnd();
+            else if (shift)
+                this.cellSelection.extendRangeToRowEnd();
+            else
+                this.cellSelection.moveToRowEnd();
+            return true;
+        }
+        if (key === 'PageUp') {
+            if (shift)
+                this.cellSelection.extendRangeByPage('up');
+            else
+                this.cellSelection.movePage('up');
+            return true;
+        }
+        if (key === 'PageDown') {
+            if (shift)
+                this.cellSelection.extendRangeByPage('down');
+            else
+                this.cellSelection.movePage('down');
+            return true;
+        }
+        // ---- Tab / Enter / F2 / Escape ------------------------------------------
+        if (key === 'Tab') {
+            if (shift)
+                this.cellSelection.moveLeft();
+            else
+                this.cellSelection.moveRight();
+            return true;
+        }
+        if (key === 'Enter') {
+            const col = this.state.visibleColumns()[focused.col];
+            const def = col ? this.state.columnDefMap().get(col.field) : undefined;
+            if (def?.editable) {
+                this.actions?.startEdit(focused.row, focused.col);
+                return true;
+            }
+            if (shift)
+                this.cellSelection.moveUp();
+            else
+                this.cellSelection.moveDown();
+            return true;
+        }
+        if (key === 'F2') {
+            this.actions?.startEdit(focused.row, focused.col);
+            return true;
+        }
+        if (key === 'Escape') {
+            this.cellSelection.clearFocus();
+            return true;
+        }
+        // ---- Typing-to-edit -----------------------------------------------------
+        if (!mod && !alt && this.isPrintableKey(event)) {
+            this.actions?.startEdit(focused.row, focused.col, key);
+            return true;
+        }
+        return false;
+    }
+    handleArrow(key, mods) {
+        const dir = key === 'ArrowUp' ? 'up' : key === 'ArrowDown' ? 'down' : key === 'ArrowLeft' ? 'left' : 'right';
+        if (mods.mod && mods.shift) {
+            this.cellSelection.extendRangeJumpToEdge(dir);
+            return true;
+        }
+        if (mods.mod) {
+            this.cellSelection.jumpToEdge(dir);
+            return true;
+        }
+        if (mods.shift) {
+            const dRow = dir === 'up' ? -1 : dir === 'down' ? 1 : 0;
+            const dCol = dir === 'left' ? -1 : dir === 'right' ? 1 : 0;
+            this.cellSelection.extendRangeBy(dRow, dCol);
+            return true;
+        }
+        switch (dir) {
+            case 'up':
+                this.cellSelection.moveUp();
                 break;
-            }
-            case 'Escape':
-                event.preventDefault();
-                this.cellSelection.clearFocus();
+            case 'down':
+                this.cellSelection.moveDown();
+                break;
+            case 'left':
+                this.cellSelection.moveLeft();
+                break;
+            case 'right':
+                this.cellSelection.moveRight();
                 break;
         }
+        return true;
     }
-    extendRangeBy(dRow, dCol) {
-        const range = this.state.cellRange();
-        const focused = this.state.focusedCell();
-        if (!focused)
-            return;
-        const pageStart = this.state.pageIndex() * this.state.pageSize();
-        const pageEnd = pageStart + Math.max(0, this.state.visibleRowCount() - 1);
-        const maxCol = this.state.visibleColumns().length - 1;
-        if (range) {
-            const newEnd = {
-                row: Math.max(pageStart, Math.min(pageEnd, range.end.row + dRow)),
-                col: Math.max(0, Math.min(maxCol, range.end.col + dCol)),
-            };
-            this.state.cellRange.set({ start: range.start, end: newEnd });
-        }
-        else {
-            const end = {
-                row: Math.max(pageStart, Math.min(pageEnd, focused.row + dRow)),
-                col: Math.max(0, Math.min(maxCol, focused.col + dCol)),
-            };
-            this.state.cellRange.set({ start: focused, end });
-        }
+    /**
+     * A key press is "printable" when it represents exactly one character that
+     * the user intends as input — excluding named keys like F1, Home, Arrow*,
+     * etc. Also excludes IME composition events (event.isComposing).
+     */
+    isPrintableKey(event) {
+        if (event.isComposing)
+            return false;
+        if (event.key.length !== 1)
+            return false;
+        // Guard against NUL / control characters slipping through on some layouts.
+        const code = event.key.charCodeAt(0);
+        return code >= 32 && code !== 127;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: KeyboardEngine, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: KeyboardEngine });
@@ -7363,11 +8252,11 @@ class MozGridHeaderComponent {
         this.dragEngine.startDrag(event, colIndex, center.nativeElement);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MozGridHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MozGridHeaderComponent, isStandalone: true, selector: "moz-grid-header", inputs: { showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: true, isRequired: false, transformFunction: null }, showExpand: { classPropertyName: "showExpand", publicName: "showExpand", isSignal: true, isRequired: false, transformFunction: null }, reorderable: { classPropertyName: "reorderable", publicName: "reorderable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortClick: "sortClick", menuAction: "menuAction", resizeStart: "resizeStart", selectAllToggle: "selectAllToggle", columnReorder: "columnReorder" }, viewQueries: [{ propertyName: "headerCenter", first: true, predicate: ["headerCenter"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"grid-header\" [class.grid-header--no-bottom-border]=\"hasFilterRow()\" role=\"row\">\n  <!-- Left pinned -->\n  @if (hasLeftSection()) {\n  <div class=\"grid-header__left\" [style.width.px]=\"leftSectionWidth()\">\n    @if (showExpand()) {\n    <div class=\"grid-header__expand-spacer\"></div>\n    } @if (showCheckbox()) {\n    <div class=\"grid-header__checkbox\">\n      <moz-checkbox\n        id=\"grid-select-all\"\n        label=\"Select all rows\"\n        [indeterminate]=\"rowSelection.isIndeterminate()\"\n        [ngModel]=\"rowSelection.isAllSelected()\"\n        (change)=\"onSelectAllClick($event)\"\n      />\n    </div>\n    } @for (col of state.pinnedLeftColumns(); track trackByField($index, col)) {\n    <moz-grid-header-cell\n      [columnState]=\"col\"\n      [def]=\"state.columnDefMap().get(col.field)!\"\n      [isLast]=\"false\"\n      (sortClick)=\"sortClick.emit($event)\"\n      (menuAction)=\"menuAction.emit($event)\"\n      (resizeStart)=\"resizeStart.emit({ field: col.field, event: $event })\"\n    />\n    }\n  </div>\n  }\n\n  <!-- Center (scrolls natively inside viewport) -->\n  <div class=\"grid-header__center\" #headerCenter [style.min-width.px]=\"state.unpinnedWidth()\">\n    @for (col of state.unpinnedColumns(); track trackByField($index, col)) {\n    <div class=\"grid-header__cell-wrapper\" [class.grid-header__cell-wrapper--last]=\"$last\">\n      <moz-grid-header-cell\n        [columnState]=\"col\"\n        [def]=\"state.columnDefMap().get(col.field)!\"\n        [isLast]=\"$last\"\n        [reorderable]=\"reorderable()\"\n        (sortClick)=\"sortClick.emit($event)\"\n        (menuAction)=\"menuAction.emit($event)\"\n        (resizeStart)=\"resizeStart.emit({ field: col.field, event: $event })\"\n        (mousedown)=\"onDragStart($event, $index)\"\n      />\n    </div>\n    }\n  </div>\n\n  <!-- Right pinned -->\n  @if (state.pinnedRightColumns().length > 0) {\n  <div class=\"grid-header__right\" [style.width.px]=\"state.pinnedRightWidth()\">\n    @for (col of state.pinnedRightColumns(); track trackByField($index, col)) {\n    <moz-grid-header-cell\n      [columnState]=\"col\"\n      [def]=\"state.columnDefMap().get(col.field)!\"\n      [pinnedEnd]=\"true\"\n      [isLast]=\"$last\"\n      (sortClick)=\"sortClick.emit($event)\"\n      (menuAction)=\"menuAction.emit($event)\"\n      (resizeStart)=\"resizeStart.emit({ field: col.field, event: $event })\"\n    />\n    }\n  </div>\n  }\n</div>\n\n@if (hasFilterRow()) {\n<div class=\"grid-header__filter-row\">\n  @if (hasLeftSection()) {\n  <div class=\"grid-header__filter-left\" [style.width.px]=\"leftSectionWidth()\">\n    @if (showExpand()) {\n    <div\n      class=\"grid-header__filter-cell grid-header__filter-cell--spacer\"\n      style=\"width: 36px; min-width: 36px;\"\n    ></div>\n    } @if (showCheckbox()) {\n    <div\n      class=\"grid-header__filter-cell grid-header__filter-cell--spacer\"\n      style=\"width: 48px; min-width: 48px;\"\n    ></div>\n    } @for (col of state.pinnedLeftColumns(); track trackByField($index, col)) {\n    <div class=\"grid-header__filter-cell\" [style.width.px]=\"col.currentWidth\">\n      @if (getFilterTemplate(col.field); as tmpl) {\n      <ng-container\n        [ngTemplateOutlet]=\"tmpl\"\n        [ngTemplateOutletContext]=\"{ $implicit: col.field }\"\n      />\n      }\n    </div>\n    }\n  </div>\n  }\n  <div class=\"grid-header__filter-center\" [style.min-width.px]=\"state.unpinnedWidth()\">\n    @for (col of state.unpinnedColumns(); track trackByField($index, col)) {\n    <div class=\"grid-header__filter-cell\" [class.grid-header__filter-cell--last]=\"$last\" [style.width.px]=\"col.currentWidth\">\n      @if (getFilterTemplate(col.field); as tmpl) {\n      <ng-container\n        [ngTemplateOutlet]=\"tmpl\"\n        [ngTemplateOutletContext]=\"{ $implicit: col.field }\"\n      />\n      }\n    </div>\n    }\n    <div class=\"grid-header__filler\"></div>\n  </div>\n  @if (state.pinnedRightColumns().length > 0) {\n  <div class=\"grid-header__filter-right\" [style.width.px]=\"state.pinnedRightWidth()\">\n    @for (col of state.pinnedRightColumns(); track trackByField($index, col)) {\n    <div class=\"grid-header__filter-cell grid-header__filter-cell--pinned-end\" [style.width.px]=\"col.currentWidth\">\n      @if (getFilterTemplate(col.field); as tmpl) {\n      <ng-container\n        [ngTemplateOutlet]=\"tmpl\"\n        [ngTemplateOutletContext]=\"{ $implicit: col.field }\"\n      />\n      }\n    </div>\n    }\n  </div>\n  }\n</div>\n}\n", styles: [":host{display:block;flex-shrink:0;z-index:3;overflow:hidden}.grid-header{display:flex;height:48px;width:100%;min-width:fit-content;border-bottom:1px solid var(--color-border-primary);background:var(--color-background-primary, #fff)}.grid-header--no-bottom-border{border-bottom:none}.grid-header__left{display:flex;flex:0 0 auto;position:sticky;left:0;z-index:3;background:var(--color-background-primary, #fff);box-shadow:4px 0 8px -2px #0000001a;box-sizing:border-box}.grid-header__center{display:flex;flex:1 0 auto;height:100%}.grid-header__right{display:flex;flex:0 0 auto;position:sticky;right:0;z-index:3;background:var(--color-background-primary, #fff);box-shadow:-4px 0 8px -2px #0000001a;box-sizing:border-box}.grid-header__checkbox{display:flex;align-items:center;justify-content:center;width:48px;min-width:48px;box-sizing:border-box;cursor:pointer;background:inherit}.grid-header__checkbox ::ng-deep .checkbox{margin:0}.grid-header__checkbox ::ng-deep .checkbox__label{display:none}.grid-header__cell-wrapper{display:flex;position:relative;flex:0 0 auto}.grid-header__cell-wrapper--last{flex:1 0 auto}.grid-header__expand-spacer{width:36px;min-width:36px;box-sizing:border-box;background:inherit}.grid-header__filter-row{display:flex;min-width:fit-content;height:40px;background:var(--color-background-primary);border-bottom:1px solid var(--color-border-primary)}.grid-header__filter-left{display:flex;flex:0 0 auto;position:sticky;left:0;z-index:3;background:var(--color-background-primary);box-shadow:4px 0 8px -2px #0000001a;box-sizing:border-box}.grid-header__filter-center{display:flex;flex:1 0 auto;height:100%}.grid-header__filter-right{display:flex;flex:0 0 auto;position:sticky;right:0;z-index:3;background:var(--color-background-primary);box-shadow:-4px 0 8px -2px #0000001a;box-sizing:border-box}.grid-header__filter-cell{display:flex;align-items:center;padding:0 var(--spacing-xs, 4px);box-sizing:border-box;overflow:hidden;height:100%;border-right:1px solid var(--color-border-primary)}.grid-header__filter-cell--spacer{flex-shrink:0;border-right:none}.grid-header__left moz-grid-header-cell:last-child ::ng-deep .grid-header-cell{border-right:none}.grid-header__right moz-grid-header-cell:first-child ::ng-deep .grid-header-cell{border-left:none}.grid-header__filter-cell--last{border-right:none}.grid-header__filter-left .grid-header__filter-cell:last-child{border-right:none}.grid-header__filter-cell--pinned-end{border-right:none;border-left:1px solid var(--color-border-primary)}.grid-header__filter-right .grid-header__filter-cell--pinned-end:first-child{border-left:none}\n"], dependencies: [{ kind: "component", type: MozGridHeaderCellComponent, selector: "moz-grid-header-cell", inputs: ["columnState", "def", "isLast", "pinnedEnd", "reorderable"], outputs: ["sortClick", "menuAction", "resizeStart"] }, { kind: "component", type: MozCheckboxComponent, selector: "moz-checkbox", inputs: ["id", "name", "label", "indeterminate", "isInvalid", "disabled", "indented"] }, { 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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MozGridHeaderComponent, isStandalone: true, selector: "moz-grid-header", inputs: { showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: true, isRequired: false, transformFunction: null }, showExpand: { classPropertyName: "showExpand", publicName: "showExpand", isSignal: true, isRequired: false, transformFunction: null }, reorderable: { classPropertyName: "reorderable", publicName: "reorderable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortClick: "sortClick", menuAction: "menuAction", resizeStart: "resizeStart", selectAllToggle: "selectAllToggle", columnReorder: "columnReorder" }, viewQueries: [{ propertyName: "headerCenter", first: true, predicate: ["headerCenter"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"grid-header\" [class.grid-header--no-bottom-border]=\"hasFilterRow()\" role=\"row\">\n  <!-- Left pinned -->\n  @if (hasLeftSection()) {\n  <div class=\"grid-header__left\" [style.width.px]=\"leftSectionWidth()\">\n    @if (showExpand()) {\n    <div class=\"grid-header__expand-spacer\"></div>\n    } @if (showCheckbox()) {\n    <div class=\"grid-header__checkbox\">\n      <moz-checkbox\n        id=\"grid-select-all\"\n        label=\"Select all rows\"\n        [indeterminate]=\"rowSelection.isIndeterminate()\"\n        [ngModel]=\"rowSelection.isAllSelected()\"\n        (change)=\"onSelectAllClick($event)\"\n      />\n    </div>\n    } @for (col of state.pinnedLeftColumns(); track trackByField($index, col)) {\n    <moz-grid-header-cell\n      [columnState]=\"col\"\n      [def]=\"state.columnDefMap().get(col.field)!\"\n      [isLast]=\"false\"\n      (sortClick)=\"sortClick.emit($event)\"\n      (menuAction)=\"menuAction.emit($event)\"\n      (resizeStart)=\"resizeStart.emit({ field: col.field, event: $event })\"\n    />\n    }\n  </div>\n  }\n\n  <!-- Center (scrolls natively inside viewport) -->\n  <div class=\"grid-header__center\" #headerCenter [style.min-width.px]=\"state.unpinnedWidth()\">\n    @for (col of state.unpinnedColumns(); track trackByField($index, col)) {\n    <div class=\"grid-header__cell-wrapper\" [class.grid-header__cell-wrapper--last]=\"$last\">\n      <moz-grid-header-cell\n        [columnState]=\"col\"\n        [def]=\"state.columnDefMap().get(col.field)!\"\n        [isLast]=\"$last\"\n        [reorderable]=\"reorderable()\"\n        (sortClick)=\"sortClick.emit($event)\"\n        (menuAction)=\"menuAction.emit($event)\"\n        (resizeStart)=\"resizeStart.emit({ field: col.field, event: $event })\"\n        (mousedown)=\"onDragStart($event, $index)\"\n      />\n    </div>\n    }\n  </div>\n\n  <!-- Right pinned -->\n  @if (state.pinnedRightColumns().length > 0) {\n  <div class=\"grid-header__right\" [style.width.px]=\"state.pinnedRightWidth()\">\n    @for (col of state.pinnedRightColumns(); track trackByField($index, col)) {\n    <moz-grid-header-cell\n      [columnState]=\"col\"\n      [def]=\"state.columnDefMap().get(col.field)!\"\n      [pinnedEnd]=\"true\"\n      [isLast]=\"$last\"\n      (sortClick)=\"sortClick.emit($event)\"\n      (menuAction)=\"menuAction.emit($event)\"\n      (resizeStart)=\"resizeStart.emit({ field: col.field, event: $event })\"\n    />\n    }\n  </div>\n  }\n</div>\n\n@if (hasFilterRow()) {\n<div class=\"grid-header__filter-row\">\n  @if (hasLeftSection()) {\n  <div class=\"grid-header__filter-left\" [style.width.px]=\"leftSectionWidth()\">\n    @if (showExpand()) {\n    <div\n      class=\"grid-header__filter-cell grid-header__filter-cell--spacer\"\n      style=\"width: 36px; min-width: 36px\"\n    ></div>\n    } @if (showCheckbox()) {\n    <div\n      class=\"grid-header__filter-cell grid-header__filter-cell--spacer\"\n      style=\"width: 48px; min-width: 48px\"\n    ></div>\n    } @for (col of state.pinnedLeftColumns(); track trackByField($index, col)) {\n    <div class=\"grid-header__filter-cell\" [style.width.px]=\"col.currentWidth\">\n      @if (getFilterTemplate(col.field); as tmpl) {\n      <ng-container\n        [ngTemplateOutlet]=\"tmpl\"\n        [ngTemplateOutletContext]=\"{ $implicit: col.field }\"\n      />\n      }\n    </div>\n    }\n  </div>\n  }\n  <div class=\"grid-header__filter-center\" [style.min-width.px]=\"state.unpinnedWidth()\">\n    @for (col of state.unpinnedColumns(); track trackByField($index, col)) {\n    <div\n      class=\"grid-header__filter-cell\"\n      [class.grid-header__filter-cell--last]=\"$last\"\n      [style.width.px]=\"col.currentWidth\"\n    >\n      @if (getFilterTemplate(col.field); as tmpl) {\n      <ng-container\n        [ngTemplateOutlet]=\"tmpl\"\n        [ngTemplateOutletContext]=\"{ $implicit: col.field }\"\n      />\n      }\n    </div>\n    }\n    <div class=\"grid-header__filler\"></div>\n  </div>\n  @if (state.pinnedRightColumns().length > 0) {\n  <div class=\"grid-header__filter-right\" [style.width.px]=\"state.pinnedRightWidth()\">\n    @for (col of state.pinnedRightColumns(); track trackByField($index, col)) {\n    <div\n      class=\"grid-header__filter-cell grid-header__filter-cell--pinned-end\"\n      [style.width.px]=\"col.currentWidth\"\n    >\n      @if (getFilterTemplate(col.field); as tmpl) {\n      <ng-container\n        [ngTemplateOutlet]=\"tmpl\"\n        [ngTemplateOutletContext]=\"{ $implicit: col.field }\"\n      />\n      }\n    </div>\n    }\n  </div>\n  }\n</div>\n}\n", styles: [":host{display:block;flex-shrink:0;z-index:3;overflow:hidden}.grid-header{display:flex;height:48px;width:100%;min-width:fit-content;border-bottom:1px solid var(--color-border-primary);background:var(--color-background-primary, #fff)}.grid-header--no-bottom-border{border-bottom:none}.grid-header__left{display:flex;flex:0 0 auto;position:sticky;left:0;z-index:3;background:var(--color-background-primary, #fff);box-shadow:4px 0 8px -2px #0000001a;box-sizing:border-box}.grid-header__center{display:flex;flex:1 0 auto;height:100%}.grid-header__right{display:flex;flex:0 0 auto;position:sticky;right:0;z-index:3;background:var(--color-background-primary, #fff);box-shadow:-4px 0 8px -2px #0000001a;box-sizing:border-box}.grid-header__checkbox{display:flex;align-items:center;justify-content:center;width:48px;min-width:48px;box-sizing:border-box;cursor:pointer;background:inherit}.grid-header__checkbox ::ng-deep .checkbox{margin:0}.grid-header__checkbox ::ng-deep .checkbox__label{display:none}.grid-header__cell-wrapper{display:flex;position:relative;flex:0 0 auto}.grid-header__cell-wrapper--last{flex:1 0 auto}.grid-header__filler{flex:1 1 auto;min-width:0;height:100%;background:inherit}.grid-header__expand-spacer{width:36px;min-width:36px;box-sizing:border-box;background:inherit}.grid-header__filter-row{display:flex;min-width:fit-content;height:40px;background:var(--color-background-primary);border-bottom:1px solid var(--color-border-primary)}.grid-header__filter-left{display:flex;flex:0 0 auto;position:sticky;left:0;z-index:3;background:var(--color-background-primary);box-shadow:4px 0 8px -2px #0000001a;box-sizing:border-box}.grid-header__filter-center{display:flex;flex:1 0 auto;height:100%}.grid-header__filter-right{display:flex;flex:0 0 auto;position:sticky;right:0;z-index:3;background:var(--color-background-primary);box-shadow:-4px 0 8px -2px #0000001a;box-sizing:border-box}.grid-header__filter-cell{display:flex;align-items:center;padding:0 var(--spacing-xs, 4px);box-sizing:border-box;overflow:hidden;height:100%;border-right:1px solid var(--color-border-primary)}.grid-header__filter-cell--spacer{flex-shrink:0;border-right:none}.grid-header__left moz-grid-header-cell:last-child ::ng-deep .grid-header-cell{border-right:none}.grid-header__right moz-grid-header-cell:first-child ::ng-deep .grid-header-cell{border-left:none}.grid-header__filter-cell--last{border-right:none}.grid-header__filter-left .grid-header__filter-cell:last-child{border-right:none}.grid-header__filter-cell--pinned-end{border-right:none;border-left:1px solid var(--color-border-primary)}.grid-header__filter-right .grid-header__filter-cell--pinned-end:first-child{border-left:none}\n"], dependencies: [{ kind: "component", type: MozGridHeaderCellComponent, selector: "moz-grid-header-cell", inputs: ["columnState", "def", "isLast", "pinnedEnd", "reorderable"], outputs: ["sortClick", "menuAction", "resizeStart"] }, { kind: "component", type: MozCheckboxComponent, selector: "moz-checkbox", inputs: ["id", "name", "label", "indeterminate", "isInvalid", "disabled", "indented"] }, { 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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MozGridHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'moz-grid-header', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MozGridHeaderCellComponent, MozCheckboxComponent, FormsModule, NgTemplateOutlet], template: "<div class=\"grid-header\" [class.grid-header--no-bottom-border]=\"hasFilterRow()\" role=\"row\">\n  <!-- Left pinned -->\n  @if (hasLeftSection()) {\n  <div class=\"grid-header__left\" [style.width.px]=\"leftSectionWidth()\">\n    @if (showExpand()) {\n    <div class=\"grid-header__expand-spacer\"></div>\n    } @if (showCheckbox()) {\n    <div class=\"grid-header__checkbox\">\n      <moz-checkbox\n        id=\"grid-select-all\"\n        label=\"Select all rows\"\n        [indeterminate]=\"rowSelection.isIndeterminate()\"\n        [ngModel]=\"rowSelection.isAllSelected()\"\n        (change)=\"onSelectAllClick($event)\"\n      />\n    </div>\n    } @for (col of state.pinnedLeftColumns(); track trackByField($index, col)) {\n    <moz-grid-header-cell\n      [columnState]=\"col\"\n      [def]=\"state.columnDefMap().get(col.field)!\"\n      [isLast]=\"false\"\n      (sortClick)=\"sortClick.emit($event)\"\n      (menuAction)=\"menuAction.emit($event)\"\n      (resizeStart)=\"resizeStart.emit({ field: col.field, event: $event })\"\n    />\n    }\n  </div>\n  }\n\n  <!-- Center (scrolls natively inside viewport) -->\n  <div class=\"grid-header__center\" #headerCenter [style.min-width.px]=\"state.unpinnedWidth()\">\n    @for (col of state.unpinnedColumns(); track trackByField($index, col)) {\n    <div class=\"grid-header__cell-wrapper\" [class.grid-header__cell-wrapper--last]=\"$last\">\n      <moz-grid-header-cell\n        [columnState]=\"col\"\n        [def]=\"state.columnDefMap().get(col.field)!\"\n        [isLast]=\"$last\"\n        [reorderable]=\"reorderable()\"\n        (sortClick)=\"sortClick.emit($event)\"\n        (menuAction)=\"menuAction.emit($event)\"\n        (resizeStart)=\"resizeStart.emit({ field: col.field, event: $event })\"\n        (mousedown)=\"onDragStart($event, $index)\"\n      />\n    </div>\n    }\n  </div>\n\n  <!-- Right pinned -->\n  @if (state.pinnedRightColumns().length > 0) {\n  <div class=\"grid-header__right\" [style.width.px]=\"state.pinnedRightWidth()\">\n    @for (col of state.pinnedRightColumns(); track trackByField($index, col)) {\n    <moz-grid-header-cell\n      [columnState]=\"col\"\n      [def]=\"state.columnDefMap().get(col.field)!\"\n      [pinnedEnd]=\"true\"\n      [isLast]=\"$last\"\n      (sortClick)=\"sortClick.emit($event)\"\n      (menuAction)=\"menuAction.emit($event)\"\n      (resizeStart)=\"resizeStart.emit({ field: col.field, event: $event })\"\n    />\n    }\n  </div>\n  }\n</div>\n\n@if (hasFilterRow()) {\n<div class=\"grid-header__filter-row\">\n  @if (hasLeftSection()) {\n  <div class=\"grid-header__filter-left\" [style.width.px]=\"leftSectionWidth()\">\n    @if (showExpand()) {\n    <div\n      class=\"grid-header__filter-cell grid-header__filter-cell--spacer\"\n      style=\"width: 36px; min-width: 36px;\"\n    ></div>\n    } @if (showCheckbox()) {\n    <div\n      class=\"grid-header__filter-cell grid-header__filter-cell--spacer\"\n      style=\"width: 48px; min-width: 48px;\"\n    ></div>\n    } @for (col of state.pinnedLeftColumns(); track trackByField($index, col)) {\n    <div class=\"grid-header__filter-cell\" [style.width.px]=\"col.currentWidth\">\n      @if (getFilterTemplate(col.field); as tmpl) {\n      <ng-container\n        [ngTemplateOutlet]=\"tmpl\"\n        [ngTemplateOutletContext]=\"{ $implicit: col.field }\"\n      />\n      }\n    </div>\n    }\n  </div>\n  }\n  <div class=\"grid-header__filter-center\" [style.min-width.px]=\"state.unpinnedWidth()\">\n    @for (col of state.unpinnedColumns(); track trackByField($index, col)) {\n    <div class=\"grid-header__filter-cell\" [class.grid-header__filter-cell--last]=\"$last\" [style.width.px]=\"col.currentWidth\">\n      @if (getFilterTemplate(col.field); as tmpl) {\n      <ng-container\n        [ngTemplateOutlet]=\"tmpl\"\n        [ngTemplateOutletContext]=\"{ $implicit: col.field }\"\n      />\n      }\n    </div>\n    }\n    <div class=\"grid-header__filler\"></div>\n  </div>\n  @if (state.pinnedRightColumns().length > 0) {\n  <div class=\"grid-header__filter-right\" [style.width.px]=\"state.pinnedRightWidth()\">\n    @for (col of state.pinnedRightColumns(); track trackByField($index, col)) {\n    <div class=\"grid-header__filter-cell grid-header__filter-cell--pinned-end\" [style.width.px]=\"col.currentWidth\">\n      @if (getFilterTemplate(col.field); as tmpl) {\n      <ng-container\n        [ngTemplateOutlet]=\"tmpl\"\n        [ngTemplateOutletContext]=\"{ $implicit: col.field }\"\n      />\n      }\n    </div>\n    }\n  </div>\n  }\n</div>\n}\n", styles: [":host{display:block;flex-shrink:0;z-index:3;overflow:hidden}.grid-header{display:flex;height:48px;width:100%;min-width:fit-content;border-bottom:1px solid var(--color-border-primary);background:var(--color-background-primary, #fff)}.grid-header--no-bottom-border{border-bottom:none}.grid-header__left{display:flex;flex:0 0 auto;position:sticky;left:0;z-index:3;background:var(--color-background-primary, #fff);box-shadow:4px 0 8px -2px #0000001a;box-sizing:border-box}.grid-header__center{display:flex;flex:1 0 auto;height:100%}.grid-header__right{display:flex;flex:0 0 auto;position:sticky;right:0;z-index:3;background:var(--color-background-primary, #fff);box-shadow:-4px 0 8px -2px #0000001a;box-sizing:border-box}.grid-header__checkbox{display:flex;align-items:center;justify-content:center;width:48px;min-width:48px;box-sizing:border-box;cursor:pointer;background:inherit}.grid-header__checkbox ::ng-deep .checkbox{margin:0}.grid-header__checkbox ::ng-deep .checkbox__label{display:none}.grid-header__cell-wrapper{display:flex;position:relative;flex:0 0 auto}.grid-header__cell-wrapper--last{flex:1 0 auto}.grid-header__expand-spacer{width:36px;min-width:36px;box-sizing:border-box;background:inherit}.grid-header__filter-row{display:flex;min-width:fit-content;height:40px;background:var(--color-background-primary);border-bottom:1px solid var(--color-border-primary)}.grid-header__filter-left{display:flex;flex:0 0 auto;position:sticky;left:0;z-index:3;background:var(--color-background-primary);box-shadow:4px 0 8px -2px #0000001a;box-sizing:border-box}.grid-header__filter-center{display:flex;flex:1 0 auto;height:100%}.grid-header__filter-right{display:flex;flex:0 0 auto;position:sticky;right:0;z-index:3;background:var(--color-background-primary);box-shadow:-4px 0 8px -2px #0000001a;box-sizing:border-box}.grid-header__filter-cell{display:flex;align-items:center;padding:0 var(--spacing-xs, 4px);box-sizing:border-box;overflow:hidden;height:100%;border-right:1px solid var(--color-border-primary)}.grid-header__filter-cell--spacer{flex-shrink:0;border-right:none}.grid-header__left moz-grid-header-cell:last-child ::ng-deep .grid-header-cell{border-right:none}.grid-header__right moz-grid-header-cell:first-child ::ng-deep .grid-header-cell{border-left:none}.grid-header__filter-cell--last{border-right:none}.grid-header__filter-left .grid-header__filter-cell:last-child{border-right:none}.grid-header__filter-cell--pinned-end{border-right:none;border-left:1px solid var(--color-border-primary)}.grid-header__filter-right .grid-header__filter-cell--pinned-end:first-child{border-left:none}\n"] }]
+            args: [{ selector: 'moz-grid-header', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MozGridHeaderCellComponent, MozCheckboxComponent, FormsModule, NgTemplateOutlet], template: "<div class=\"grid-header\" [class.grid-header--no-bottom-border]=\"hasFilterRow()\" role=\"row\">\n  <!-- Left pinned -->\n  @if (hasLeftSection()) {\n  <div class=\"grid-header__left\" [style.width.px]=\"leftSectionWidth()\">\n    @if (showExpand()) {\n    <div class=\"grid-header__expand-spacer\"></div>\n    } @if (showCheckbox()) {\n    <div class=\"grid-header__checkbox\">\n      <moz-checkbox\n        id=\"grid-select-all\"\n        label=\"Select all rows\"\n        [indeterminate]=\"rowSelection.isIndeterminate()\"\n        [ngModel]=\"rowSelection.isAllSelected()\"\n        (change)=\"onSelectAllClick($event)\"\n      />\n    </div>\n    } @for (col of state.pinnedLeftColumns(); track trackByField($index, col)) {\n    <moz-grid-header-cell\n      [columnState]=\"col\"\n      [def]=\"state.columnDefMap().get(col.field)!\"\n      [isLast]=\"false\"\n      (sortClick)=\"sortClick.emit($event)\"\n      (menuAction)=\"menuAction.emit($event)\"\n      (resizeStart)=\"resizeStart.emit({ field: col.field, event: $event })\"\n    />\n    }\n  </div>\n  }\n\n  <!-- Center (scrolls natively inside viewport) -->\n  <div class=\"grid-header__center\" #headerCenter [style.min-width.px]=\"state.unpinnedWidth()\">\n    @for (col of state.unpinnedColumns(); track trackByField($index, col)) {\n    <div class=\"grid-header__cell-wrapper\" [class.grid-header__cell-wrapper--last]=\"$last\">\n      <moz-grid-header-cell\n        [columnState]=\"col\"\n        [def]=\"state.columnDefMap().get(col.field)!\"\n        [isLast]=\"$last\"\n        [reorderable]=\"reorderable()\"\n        (sortClick)=\"sortClick.emit($event)\"\n        (menuAction)=\"menuAction.emit($event)\"\n        (resizeStart)=\"resizeStart.emit({ field: col.field, event: $event })\"\n        (mousedown)=\"onDragStart($event, $index)\"\n      />\n    </div>\n    }\n  </div>\n\n  <!-- Right pinned -->\n  @if (state.pinnedRightColumns().length > 0) {\n  <div class=\"grid-header__right\" [style.width.px]=\"state.pinnedRightWidth()\">\n    @for (col of state.pinnedRightColumns(); track trackByField($index, col)) {\n    <moz-grid-header-cell\n      [columnState]=\"col\"\n      [def]=\"state.columnDefMap().get(col.field)!\"\n      [pinnedEnd]=\"true\"\n      [isLast]=\"$last\"\n      (sortClick)=\"sortClick.emit($event)\"\n      (menuAction)=\"menuAction.emit($event)\"\n      (resizeStart)=\"resizeStart.emit({ field: col.field, event: $event })\"\n    />\n    }\n  </div>\n  }\n</div>\n\n@if (hasFilterRow()) {\n<div class=\"grid-header__filter-row\">\n  @if (hasLeftSection()) {\n  <div class=\"grid-header__filter-left\" [style.width.px]=\"leftSectionWidth()\">\n    @if (showExpand()) {\n    <div\n      class=\"grid-header__filter-cell grid-header__filter-cell--spacer\"\n      style=\"width: 36px; min-width: 36px\"\n    ></div>\n    } @if (showCheckbox()) {\n    <div\n      class=\"grid-header__filter-cell grid-header__filter-cell--spacer\"\n      style=\"width: 48px; min-width: 48px\"\n    ></div>\n    } @for (col of state.pinnedLeftColumns(); track trackByField($index, col)) {\n    <div class=\"grid-header__filter-cell\" [style.width.px]=\"col.currentWidth\">\n      @if (getFilterTemplate(col.field); as tmpl) {\n      <ng-container\n        [ngTemplateOutlet]=\"tmpl\"\n        [ngTemplateOutletContext]=\"{ $implicit: col.field }\"\n      />\n      }\n    </div>\n    }\n  </div>\n  }\n  <div class=\"grid-header__filter-center\" [style.min-width.px]=\"state.unpinnedWidth()\">\n    @for (col of state.unpinnedColumns(); track trackByField($index, col)) {\n    <div\n      class=\"grid-header__filter-cell\"\n      [class.grid-header__filter-cell--last]=\"$last\"\n      [style.width.px]=\"col.currentWidth\"\n    >\n      @if (getFilterTemplate(col.field); as tmpl) {\n      <ng-container\n        [ngTemplateOutlet]=\"tmpl\"\n        [ngTemplateOutletContext]=\"{ $implicit: col.field }\"\n      />\n      }\n    </div>\n    }\n    <div class=\"grid-header__filler\"></div>\n  </div>\n  @if (state.pinnedRightColumns().length > 0) {\n  <div class=\"grid-header__filter-right\" [style.width.px]=\"state.pinnedRightWidth()\">\n    @for (col of state.pinnedRightColumns(); track trackByField($index, col)) {\n    <div\n      class=\"grid-header__filter-cell grid-header__filter-cell--pinned-end\"\n      [style.width.px]=\"col.currentWidth\"\n    >\n      @if (getFilterTemplate(col.field); as tmpl) {\n      <ng-container\n        [ngTemplateOutlet]=\"tmpl\"\n        [ngTemplateOutletContext]=\"{ $implicit: col.field }\"\n      />\n      }\n    </div>\n    }\n  </div>\n  }\n</div>\n}\n", styles: [":host{display:block;flex-shrink:0;z-index:3;overflow:hidden}.grid-header{display:flex;height:48px;width:100%;min-width:fit-content;border-bottom:1px solid var(--color-border-primary);background:var(--color-background-primary, #fff)}.grid-header--no-bottom-border{border-bottom:none}.grid-header__left{display:flex;flex:0 0 auto;position:sticky;left:0;z-index:3;background:var(--color-background-primary, #fff);box-shadow:4px 0 8px -2px #0000001a;box-sizing:border-box}.grid-header__center{display:flex;flex:1 0 auto;height:100%}.grid-header__right{display:flex;flex:0 0 auto;position:sticky;right:0;z-index:3;background:var(--color-background-primary, #fff);box-shadow:-4px 0 8px -2px #0000001a;box-sizing:border-box}.grid-header__checkbox{display:flex;align-items:center;justify-content:center;width:48px;min-width:48px;box-sizing:border-box;cursor:pointer;background:inherit}.grid-header__checkbox ::ng-deep .checkbox{margin:0}.grid-header__checkbox ::ng-deep .checkbox__label{display:none}.grid-header__cell-wrapper{display:flex;position:relative;flex:0 0 auto}.grid-header__cell-wrapper--last{flex:1 0 auto}.grid-header__filler{flex:1 1 auto;min-width:0;height:100%;background:inherit}.grid-header__expand-spacer{width:36px;min-width:36px;box-sizing:border-box;background:inherit}.grid-header__filter-row{display:flex;min-width:fit-content;height:40px;background:var(--color-background-primary);border-bottom:1px solid var(--color-border-primary)}.grid-header__filter-left{display:flex;flex:0 0 auto;position:sticky;left:0;z-index:3;background:var(--color-background-primary);box-shadow:4px 0 8px -2px #0000001a;box-sizing:border-box}.grid-header__filter-center{display:flex;flex:1 0 auto;height:100%}.grid-header__filter-right{display:flex;flex:0 0 auto;position:sticky;right:0;z-index:3;background:var(--color-background-primary);box-shadow:-4px 0 8px -2px #0000001a;box-sizing:border-box}.grid-header__filter-cell{display:flex;align-items:center;padding:0 var(--spacing-xs, 4px);box-sizing:border-box;overflow:hidden;height:100%;border-right:1px solid var(--color-border-primary)}.grid-header__filter-cell--spacer{flex-shrink:0;border-right:none}.grid-header__left moz-grid-header-cell:last-child ::ng-deep .grid-header-cell{border-right:none}.grid-header__right moz-grid-header-cell:first-child ::ng-deep .grid-header-cell{border-left:none}.grid-header__filter-cell--last{border-right:none}.grid-header__filter-left .grid-header__filter-cell:last-child{border-right:none}.grid-header__filter-cell--pinned-end{border-right:none;border-left:1px solid var(--color-border-primary)}.grid-header__filter-right .grid-header__filter-cell--pinned-end:first-child{border-left:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { headerCenter: [{ type: i0.ViewChild, args: ['headerCenter', { isSignal: true }] }], showCheckbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCheckbox", required: false }] }], showExpand: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExpand", required: false }] }], reorderable: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderable", required: false }] }], sortClick: [{ type: i0.Output, args: ["sortClick"] }], menuAction: [{ type: i0.Output, args: ["menuAction"] }], resizeStart: [{ type: i0.Output, args: ["resizeStart"] }], selectAllToggle: [{ type: i0.Output, args: ["selectAllToggle"] }], columnReorder: [{ type: i0.Output, args: ["columnReorder"] }] } });
 
 /**
@@ -7779,6 +8668,7 @@ class MozGridCellComponent {
     inlineEdit = inject(InlineEditEngine);
     cellSelectionEngine = inject(CellSelectionEngine);
     validationEngine = inject(CellValidationEngine);
+    clipboard = inject(ClipboardEngine);
     elRef = inject((ElementRef));
     preEditWidth = null;
     constructor() {
@@ -7893,6 +8783,7 @@ class MozGridCellComponent {
     isInFillRejectRange = computed(() => {
         return this.cellSelectionEngine.isCellInFillRejectRange(this.rowIndex(), this.colIndex());
     }, ...(ngDevMode ? [{ debugName: "isInFillRejectRange" }] : /* istanbul ignore next */ []));
+    cutEdges = computed(() => this.clipboard.cutEdges(this.rowIndex(), this.colIndex()), ...(ngDevMode ? [{ debugName: "cutEdges" }] : /* istanbul ignore next */ []));
     cellError = computed(() => this.validationEngine.getCellError(this.rowIndex(), this.def().field), ...(ngDevMode ? [{ debugName: "cellError" }] : /* istanbul ignore next */ []));
     onCellClick(event) {
         // Shift+click: extend range from current focused cell to this cell
@@ -7997,7 +8888,7 @@ class MozGridCellComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MozGridCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MozGridCellComponent, isStandalone: true, selector: "moz-grid-cell", inputs: { row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: true, transformFunction: null }, colIndex: { classPropertyName: "colIndex", publicName: "colIndex", isSignal: true, isRequired: true, transformFunction: null }, colState: { classPropertyName: "colState", publicName: "colState", isSignal: true, isRequired: true, transformFunction: null }, def: { classPropertyName: "def", publicName: "def", isSignal: true, isRequired: true, transformFunction: null }, isLast: { classPropertyName: "isLast", publicName: "isLast", isSignal: true, isRequired: false, transformFunction: null }, pinnedEnd: { classPropertyName: "pinnedEnd", publicName: "pinnedEnd", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { commitEdit: "commitEdit", cancelEdit: "cancelEdit" }, host: { properties: { "style.flex": "isLast() ? \"1 0 auto\" : \"0 0 auto\"", "style.width.px": "isLast() ? undefined : colState().currentWidth", "style.min-width.px": "isLast() ? colState().currentWidth : resolvedMinWidth()", "style.overflow": "isFocused() && !isEditing() ? \"visible\" : \"hidden\"" } }, ngImport: i0, template: "<div\n  class=\"grid-cell\"\n  [class.grid-cell--focused]=\"isFocused()\"\n  [class.grid-cell--in-range]=\"isInRange()\"\n  [class.grid-cell--in-fill-range]=\"isInFillRange()\"\n  [class.grid-cell--in-fill-reject-range]=\"isInFillRejectRange()\"\n  [class.grid-cell--last]=\"isLast()\"\n  [class.grid-cell--pinned-end]=\"pinnedEnd()\"\n  [class.grid-cell--readonly]=\"!def().editable\"\n  [class.grid-cell--error]=\"cellError()\"\n  [attr.aria-invalid]=\"cellError() ? 'true' : null\"\n  (click)=\"onCellClick($event)\"\n  (dblclick)=\"onDoubleClick()\"\n  (mousedown)=\"onMouseDown($event)\"\n  (mouseenter)=\"onMouseEnter()\"\n>\n  @if (isEditing()) {\n  <div class=\"grid-cell__editor\" (focusout)=\"onEditorBlur($event)\">\n    @if (editTemplate()) {\n    <div class=\"grid-cell__editor-custom\">\n      <ng-container\n        [ngTemplateOutlet]=\"editTemplate()!\"\n        [ngTemplateOutletContext]=\"{\n          $implicit: value(),\n          row: row(),\n          field: def().field,\n          draft: editState().draftValue,\n          updateDraft: updateDraftFn,\n          commitEdit: commitEditFn\n        }\"\n      />\n    </div>\n    } @else { @switch (editorType()) { @case ('text') {\n    <input\n      class=\"grid-cell__input grid-cell__input--plain\"\n      type=\"text\"\n      [value]=\"editState().draftValue\"\n      (input)=\"onEditorInput($event)\"\n    />\n    } @case ('number') {\n    <input\n      class=\"grid-cell__input grid-cell__input--plain\"\n      type=\"number\"\n      [value]=\"editState().draftValue\"\n      (input)=\"onEditorInput($event)\"\n    />\n    } @case ('select') {\n    <moz-select\n      name=\"cell-editor\"\n      [options]=\"def().cellEditorOptions ?? []\"\n      [ngModel]=\"editState().draftValue\"\n      (change)=\"onSelectChange($event)\"\n      [size]=\"'s'\"\n    />\n    } @case ('checkbox') {\n    <moz-checkbox\n      [id]=\"'grid-cell-editor-' + rowIndex() + '-' + colIndex()\"\n      [ngModel]=\"!!editState().draftValue\"\n      (change)=\"onCheckboxChange($event)\"\n    />\n    } @case ('date') {\n    <moz-datepicker\n      [id]=\"'grid-cell-editor-' + rowIndex() + '-' + colIndex()\"\n      size=\"s\"\n      [ngModel]=\"editState().draftValue\"\n      (ngModelChange)=\"onDateChange($event)\"\n    />\n    } @default {\n    <input\n      class=\"grid-cell__input grid-cell__input--plain\"\n      type=\"text\"\n      [value]=\"editState().draftValue\"\n      (input)=\"onEditorInput($event)\"\n    />\n    } } }\n  </div>\n  } @else { @if (cellTemplate()) {\n  <div class=\"grid-cell__custom\">\n    <ng-container\n      [ngTemplateOutlet]=\"cellTemplate()!\"\n      [ngTemplateOutletContext]=\"{ $implicit: value(), row: row(), field: def().field }\"\n    />\n  </div>\n  } @else {\n  <span class=\"grid-cell__value\">{{ displayValue() }}</span>\n  } } @if (isFocused() && !isEditing() && def().editable) {\n  <div class=\"grid-cell__fill-handle\" (mousedown)=\"onFillHandleMouseDown($event)\"></div>\n  } @if (cellError(); as error) {\n  <div\n    class=\"grid-cell__error-icon\"\n    [mozTooltip]=\"error.message\"\n    tooltipPosition=\"top\"\n    aria-label=\"Erreur de validation\"\n  >\n    <ErrorFilled24 />\n  </div>\n  }\n</div>\n", styles: [":host{display:block;height:100%;min-width:0}.grid-cell{display:flex;align-items:center;position:relative;padding:0 var(--spacing-s, 8px);height:100%;border-right:1px solid var(--color-border-primary);overflow:hidden;box-sizing:border-box;min-width:0;background:inherit;cursor:pointer}.grid-cell--last{border-right:none}.grid-cell--pinned-end{border-right:none;border-left:1px solid var(--color-border-primary)}:host(:first-child) .grid-cell--pinned-end{border-left:none}.grid-cell__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--font-size-s, 14px);color:var(--color-text-primary);position:relative;z-index:1}.grid-cell__editor{width:100%;min-width:0;max-width:100%;height:100%;display:flex;align-items:center;overflow:hidden;box-sizing:border-box;position:relative;z-index:1}.grid-cell__editor-custom{width:100%;min-width:0;max-width:100%;overflow:hidden;box-sizing:border-box;display:flex;align-items:center;flex-wrap:wrap;gap:4px}.grid-cell__editor input,.grid-cell__editor moz-select{width:100%;min-width:0;box-sizing:border-box}.grid-cell__input--plain{border:none;outline:none;background:transparent;font-family:inherit;font-size:var(--font-size-s, 14px);color:var(--color-text-primary);padding:0;height:100%;width:100%;min-width:0;box-sizing:border-box}.grid-cell__input--plain:focus{outline:none}.grid-cell__input--plain[type=number]::-webkit-inner-spin-button,.grid-cell__input--plain[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.grid-cell__input--plain[type=number]{-moz-appearance:textfield}.grid-cell__editor ::ng-deep .text-input{width:100%;min-width:0;box-sizing:border-box}.grid-cell__editor ::ng-deep .select,.grid-cell__editor ::ng-deep .select__trigger{min-width:0;width:100%}.grid-cell__editor ::ng-deep *{max-width:100%}.grid-cell__editor moz-datepicker{width:100%;min-width:0;box-sizing:border-box}.grid-cell__editor ::ng-deep .mc-datepicker,.grid-cell__editor ::ng-deep .mc-text-input{width:100%;min-width:0;box-sizing:border-box;height:28px;font-size:var(--font-size-xs, 12px)}.grid-cell__editor ::ng-deep moz-datepicker label{display:none}.grid-cell>*:not(.grid-cell__fill-handle){position:relative;z-index:1}.grid-cell:before{content:\"\";position:absolute;inset:3px;border-radius:4px;pointer-events:none;z-index:0}.grid-cell:hover:before{background:#f1f3f4}.grid-cell--focused:hover:before,.grid-cell--in-range:hover:before,.grid-cell--in-fill-range:hover:before,.grid-cell--in-fill-reject-range:hover:before{background:transparent}.grid-cell--focused{z-index:2;overflow:visible}.grid-cell--focused:after{content:\"\";position:absolute;inset:0;border:2px solid var(--color-background-accent-inverse);border-radius:4px;pointer-events:none}.grid-cell--in-range{background:var(--color-background-accent)}.grid-cell--readonly .grid-cell__value{color:var(--color-text-secondary, #666)}.grid-cell--in-fill-range{background:#34a85314}.grid-cell--in-fill-range:after{content:\"\";position:absolute;inset:0;border:1px dashed var(--color-success, #34a853);border-radius:4px;pointer-events:none}.grid-cell--in-fill-reject-range{background:#ea302d1f;cursor:not-allowed;z-index:2}.grid-cell--in-fill-reject-range:after{content:\"\";position:absolute;inset:0;border:2px dashed var(--Status-Standalone-element-Error, #ea302d);border-radius:4px;pointer-events:none;z-index:3}.grid-cell__fill-handle{position:absolute;right:-4px;bottom:-4px;width:8px;height:8px;background:var(--color-background-primary, #fff);border:1px solid var(--color-background-accent-inverse);border-radius:2px;cursor:crosshair;z-index:4}.grid-cell--error{background:var(--Background-Primary, #FFF);outline:2px solid var(--Status-Border-Error, #EF5F5C);outline-offset:-2px;z-index:1}.grid-cell--error:hover:before{background:transparent}.grid-cell__error-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:auto;cursor:help;position:relative;z-index:2}.grid-cell__error-icon ::ng-deep svg{fill:var(--Status-Standalone-element-Error, #EA302D)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MozSelectComponent, selector: "moz-select", inputs: ["id", "name", "options", "placeholder", "isInvalid", "disabled", "readonly", "size"] }, { kind: "component", type: MozCheckboxComponent, selector: "moz-checkbox", inputs: ["id", "name", "label", "indeterminate", "isInvalid", "disabled", "indented"] }, { kind: "component", type: MozDatepickerComponent, selector: "moz-datepicker", inputs: ["id", "disabled", "readonly", "invalid", "error", "clearable", "size", "label"] }, { kind: "directive", type: MozTooltipDirective, selector: "[mozTooltip]", inputs: ["mozTooltip", "tooltipPosition", "tooltipNoPointer"] }, { kind: "component", type: ErrorFilled24, selector: "ErrorFilled24", inputs: ["hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MozGridCellComponent, isStandalone: true, selector: "moz-grid-cell", inputs: { row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: true, transformFunction: null }, colIndex: { classPropertyName: "colIndex", publicName: "colIndex", isSignal: true, isRequired: true, transformFunction: null }, colState: { classPropertyName: "colState", publicName: "colState", isSignal: true, isRequired: true, transformFunction: null }, def: { classPropertyName: "def", publicName: "def", isSignal: true, isRequired: true, transformFunction: null }, isLast: { classPropertyName: "isLast", publicName: "isLast", isSignal: true, isRequired: false, transformFunction: null }, pinnedEnd: { classPropertyName: "pinnedEnd", publicName: "pinnedEnd", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { commitEdit: "commitEdit", cancelEdit: "cancelEdit" }, host: { properties: { "style.flex": "isLast() ? \"1 0 auto\" : \"0 0 auto\"", "style.width.px": "isLast() ? undefined : colState().currentWidth", "style.min-width.px": "isLast() ? colState().currentWidth : resolvedMinWidth()" } }, ngImport: i0, template: "<div\n  class=\"grid-cell\"\n  [class.grid-cell--focused]=\"isFocused()\"\n  [class.grid-cell--in-range]=\"isInRange()\"\n  [class.grid-cell--in-fill-range]=\"isInFillRange()\"\n  [class.grid-cell--in-fill-reject-range]=\"isInFillRejectRange()\"\n  [class.grid-cell--cut]=\"cutEdges().any\"\n  [class.grid-cell--last]=\"isLast()\"\n  [class.grid-cell--pinned-end]=\"pinnedEnd()\"\n  [class.grid-cell--readonly]=\"!def().editable\"\n  [class.grid-cell--error]=\"cellError()\"\n  [attr.aria-invalid]=\"cellError() ? 'true' : null\"\n  (click)=\"onCellClick($event)\"\n  (dblclick)=\"onDoubleClick()\"\n  (mousedown)=\"onMouseDown($event)\"\n  (mouseenter)=\"onMouseEnter()\"\n>\n  @if (isEditing()) {\n  <div class=\"grid-cell__editor\" (focusout)=\"onEditorBlur($event)\">\n    @if (editTemplate()) {\n    <div class=\"grid-cell__editor-custom\">\n      <ng-container\n        [ngTemplateOutlet]=\"editTemplate()!\"\n        [ngTemplateOutletContext]=\"{\n          $implicit: value(),\n          row: row(),\n          field: def().field,\n          draft: editState().draftValue,\n          updateDraft: updateDraftFn,\n          commitEdit: commitEditFn\n        }\"\n      />\n    </div>\n    } @else { @switch (editorType()) { @case ('text') {\n    <input\n      class=\"grid-cell__input grid-cell__input--plain\"\n      type=\"text\"\n      [value]=\"editState().draftValue\"\n      (input)=\"onEditorInput($event)\"\n    />\n    } @case ('number') {\n    <input\n      class=\"grid-cell__input grid-cell__input--plain\"\n      type=\"number\"\n      [value]=\"editState().draftValue\"\n      (input)=\"onEditorInput($event)\"\n    />\n    } @case ('select') {\n    <moz-select\n      name=\"cell-editor\"\n      [options]=\"def().cellEditorOptions ?? []\"\n      [ngModel]=\"editState().draftValue\"\n      (change)=\"onSelectChange($event)\"\n      [size]=\"'s'\"\n    />\n    } @case ('checkbox') {\n    <moz-checkbox\n      [id]=\"'grid-cell-editor-' + rowIndex() + '-' + colIndex()\"\n      [ngModel]=\"!!editState().draftValue\"\n      (change)=\"onCheckboxChange($event)\"\n    />\n    } @case ('date') {\n    <moz-datepicker\n      [id]=\"'grid-cell-editor-' + rowIndex() + '-' + colIndex()\"\n      size=\"s\"\n      [ngModel]=\"editState().draftValue\"\n      (ngModelChange)=\"onDateChange($event)\"\n    />\n    } @default {\n    <input\n      class=\"grid-cell__input grid-cell__input--plain\"\n      type=\"text\"\n      [value]=\"editState().draftValue\"\n      (input)=\"onEditorInput($event)\"\n    />\n    } } }\n  </div>\n  } @else { @if (cellTemplate()) {\n  <div class=\"grid-cell__custom\">\n    <ng-container\n      [ngTemplateOutlet]=\"cellTemplate()!\"\n      [ngTemplateOutletContext]=\"{ $implicit: value(), row: row(), field: def().field }\"\n    />\n  </div>\n  } @else {\n  <span class=\"grid-cell__value\">{{ displayValue() }}</span>\n  } } @if (cutEdges(); as edges) { @if (edges.top) {\n  <div class=\"grid-cell__cut-mark grid-cell__cut-mark--top\"></div>\n  } @if (edges.bottom) {\n  <div class=\"grid-cell__cut-mark grid-cell__cut-mark--bottom\"></div>\n  } @if (edges.left) {\n  <div class=\"grid-cell__cut-mark grid-cell__cut-mark--left\"></div>\n  } @if (edges.right) {\n  <div class=\"grid-cell__cut-mark grid-cell__cut-mark--right\"></div>\n  } } @if (isFocused() && !isEditing() && def().editable) {\n  <div class=\"grid-cell__fill-handle\" (mousedown)=\"onFillHandleMouseDown($event)\"></div>\n  } @if (cellError(); as error) {\n  <div\n    class=\"grid-cell__error-icon\"\n    [mozTooltip]=\"error.message\"\n    tooltipPosition=\"top\"\n    aria-label=\"Erreur de validation\"\n  >\n    <ErrorFilled24 />\n  </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;height:100%;min-width:0}.grid-cell{display:flex;align-items:center;position:relative;padding:0 var(--spacing-s, 8px);height:100%;border-right:1px solid var(--color-border-primary);overflow:hidden;box-sizing:border-box;min-width:0;background:inherit;cursor:pointer}.grid-cell--last{border-right:none}.grid-cell--pinned-end{border-right:none;border-left:1px solid var(--color-border-primary)}:host(:first-child) .grid-cell--pinned-end{border-left:none}.grid-cell__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--font-size-s, 14px);color:var(--color-text-primary);position:relative;z-index:1}.grid-cell__editor{width:100%;min-width:0;max-width:100%;height:100%;display:flex;align-items:center;overflow:hidden;box-sizing:border-box;position:relative;z-index:1}.grid-cell__editor-custom{width:100%;min-width:0;max-width:100%;overflow:hidden;box-sizing:border-box;display:flex;align-items:center;flex-wrap:wrap;gap:4px}.grid-cell__editor input,.grid-cell__editor moz-select{width:100%;min-width:0;box-sizing:border-box}.grid-cell__input--plain{border:none;outline:none;background:transparent;font-family:inherit;font-size:var(--font-size-s, 14px);color:var(--color-text-primary);padding:0;height:100%;width:100%;min-width:0;box-sizing:border-box}.grid-cell__input--plain:focus{outline:none}.grid-cell__input--plain[type=number]::-webkit-inner-spin-button,.grid-cell__input--plain[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.grid-cell__input--plain[type=number]{-moz-appearance:textfield}.grid-cell__editor ::ng-deep .text-input{width:100%;min-width:0;box-sizing:border-box}.grid-cell__editor ::ng-deep .select,.grid-cell__editor ::ng-deep .select__trigger{min-width:0;width:100%}.grid-cell__editor ::ng-deep *{max-width:100%}.grid-cell__editor moz-datepicker{width:100%;min-width:0;box-sizing:border-box}.grid-cell__editor ::ng-deep .mc-datepicker,.grid-cell__editor ::ng-deep .mc-text-input{width:100%;min-width:0;box-sizing:border-box;height:28px;font-size:var(--font-size-xs, 12px)}.grid-cell__editor ::ng-deep moz-datepicker label{display:none}.grid-cell>*:not(.grid-cell__fill-handle){position:relative;z-index:1}.grid-cell:before{content:\"\";position:absolute;inset:3px;border-radius:4px;pointer-events:none;z-index:0}.grid-cell:hover:before{background:#f1f3f4}.grid-cell--focused:hover:before,.grid-cell--in-range:hover:before,.grid-cell--in-fill-range:hover:before,.grid-cell--in-fill-reject-range:hover:before{background:transparent}.grid-cell--focused{z-index:2}.grid-cell--focused:after{content:\"\";position:absolute;inset:0;border:2px solid var(--color-background-accent-inverse);border-radius:4px;pointer-events:none}.grid-cell--in-range{background:var(--color-background-accent)}.grid-cell--readonly .grid-cell__value{color:var(--color-text-secondary, #666)}.grid-cell--in-fill-range{background:#34a85314}.grid-cell--in-fill-range:after{content:\"\";position:absolute;inset:0;border:1px dashed var(--color-success, #34a853);border-radius:4px;pointer-events:none}.grid-cell--in-fill-reject-range{background:#ea302d1f;cursor:not-allowed;z-index:2}.grid-cell--in-fill-reject-range:after{content:\"\";position:absolute;inset:0;border:2px dashed var(--Status-Standalone-element-Error, #ea302d);border-radius:4px;pointer-events:none;z-index:3}.grid-cell--cut{background:#1a73e80f}.grid-cell__cut-mark{position:absolute;pointer-events:none;z-index:5;--cut-color: var(--color-background-accent-inverse, #1a73e8)}.grid-cell__cut-mark--top,.grid-cell__cut-mark--bottom{left:0;right:0;height:2px;background-image:linear-gradient(90deg,var(--cut-color) 50%,transparent 50%);background-size:8px 2px;background-repeat:repeat-x;animation:moz-grid-marching-ants-x .5s linear infinite}.grid-cell__cut-mark--top{top:0}.grid-cell__cut-mark--bottom{bottom:0}.grid-cell__cut-mark--left,.grid-cell__cut-mark--right{top:0;bottom:0;width:2px;background-image:linear-gradient(180deg,var(--cut-color) 50%,transparent 50%);background-size:2px 8px;background-repeat:repeat-y;animation:moz-grid-marching-ants-y .5s linear infinite}.grid-cell__cut-mark--left{left:0}.grid-cell__cut-mark--right{right:0}@keyframes moz-grid-marching-ants-x{0%{background-position-x:0}to{background-position-x:8px}}@keyframes moz-grid-marching-ants-y{0%{background-position-y:0}to{background-position-y:8px}}.grid-cell__fill-handle{position:absolute;right:0;bottom:0;width:8px;height:8px;background:var(--color-background-accent-inverse);cursor:crosshair;z-index:4}.grid-cell--error{background:var(--Background-Primary, #fff);outline:2px solid var(--Status-Border-Error, #ef5f5c);outline-offset:-2px;z-index:1}.grid-cell--error:hover:before{background:transparent}.grid-cell__error-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:auto;cursor:help;position:relative;z-index:2}.grid-cell__error-icon ::ng-deep svg{fill:var(--Status-Standalone-element-Error, #ea302d)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MozSelectComponent, selector: "moz-select", inputs: ["id", "name", "options", "placeholder", "isInvalid", "disabled", "readonly", "size"] }, { kind: "component", type: MozCheckboxComponent, selector: "moz-checkbox", inputs: ["id", "name", "label", "indeterminate", "isInvalid", "disabled", "indented"] }, { kind: "component", type: MozDatepickerComponent, selector: "moz-datepicker", inputs: ["id", "disabled", "readonly", "invalid", "error", "clearable", "size", "label"] }, { kind: "directive", type: MozTooltipDirective, selector: "[mozTooltip]", inputs: ["mozTooltip", "tooltipPosition", "tooltipNoPointer"] }, { kind: "component", type: ErrorFilled24, selector: "ErrorFilled24", inputs: ["hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MozGridCellComponent, decorators: [{
             type: Component,
@@ -8013,8 +8904,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         '[style.flex]': 'isLast() ? "1 0 auto" : "0 0 auto"',
                         '[style.width.px]': 'isLast() ? undefined : colState().currentWidth',
                         '[style.min-width.px]': 'isLast() ? colState().currentWidth : resolvedMinWidth()',
-                        '[style.overflow]': 'isFocused() && !isEditing() ? "visible" : "hidden"',
-                    }, template: "<div\n  class=\"grid-cell\"\n  [class.grid-cell--focused]=\"isFocused()\"\n  [class.grid-cell--in-range]=\"isInRange()\"\n  [class.grid-cell--in-fill-range]=\"isInFillRange()\"\n  [class.grid-cell--in-fill-reject-range]=\"isInFillRejectRange()\"\n  [class.grid-cell--last]=\"isLast()\"\n  [class.grid-cell--pinned-end]=\"pinnedEnd()\"\n  [class.grid-cell--readonly]=\"!def().editable\"\n  [class.grid-cell--error]=\"cellError()\"\n  [attr.aria-invalid]=\"cellError() ? 'true' : null\"\n  (click)=\"onCellClick($event)\"\n  (dblclick)=\"onDoubleClick()\"\n  (mousedown)=\"onMouseDown($event)\"\n  (mouseenter)=\"onMouseEnter()\"\n>\n  @if (isEditing()) {\n  <div class=\"grid-cell__editor\" (focusout)=\"onEditorBlur($event)\">\n    @if (editTemplate()) {\n    <div class=\"grid-cell__editor-custom\">\n      <ng-container\n        [ngTemplateOutlet]=\"editTemplate()!\"\n        [ngTemplateOutletContext]=\"{\n          $implicit: value(),\n          row: row(),\n          field: def().field,\n          draft: editState().draftValue,\n          updateDraft: updateDraftFn,\n          commitEdit: commitEditFn\n        }\"\n      />\n    </div>\n    } @else { @switch (editorType()) { @case ('text') {\n    <input\n      class=\"grid-cell__input grid-cell__input--plain\"\n      type=\"text\"\n      [value]=\"editState().draftValue\"\n      (input)=\"onEditorInput($event)\"\n    />\n    } @case ('number') {\n    <input\n      class=\"grid-cell__input grid-cell__input--plain\"\n      type=\"number\"\n      [value]=\"editState().draftValue\"\n      (input)=\"onEditorInput($event)\"\n    />\n    } @case ('select') {\n    <moz-select\n      name=\"cell-editor\"\n      [options]=\"def().cellEditorOptions ?? []\"\n      [ngModel]=\"editState().draftValue\"\n      (change)=\"onSelectChange($event)\"\n      [size]=\"'s'\"\n    />\n    } @case ('checkbox') {\n    <moz-checkbox\n      [id]=\"'grid-cell-editor-' + rowIndex() + '-' + colIndex()\"\n      [ngModel]=\"!!editState().draftValue\"\n      (change)=\"onCheckboxChange($event)\"\n    />\n    } @case ('date') {\n    <moz-datepicker\n      [id]=\"'grid-cell-editor-' + rowIndex() + '-' + colIndex()\"\n      size=\"s\"\n      [ngModel]=\"editState().draftValue\"\n      (ngModelChange)=\"onDateChange($event)\"\n    />\n    } @default {\n    <input\n      class=\"grid-cell__input grid-cell__input--plain\"\n      type=\"text\"\n      [value]=\"editState().draftValue\"\n      (input)=\"onEditorInput($event)\"\n    />\n    } } }\n  </div>\n  } @else { @if (cellTemplate()) {\n  <div class=\"grid-cell__custom\">\n    <ng-container\n      [ngTemplateOutlet]=\"cellTemplate()!\"\n      [ngTemplateOutletContext]=\"{ $implicit: value(), row: row(), field: def().field }\"\n    />\n  </div>\n  } @else {\n  <span class=\"grid-cell__value\">{{ displayValue() }}</span>\n  } } @if (isFocused() && !isEditing() && def().editable) {\n  <div class=\"grid-cell__fill-handle\" (mousedown)=\"onFillHandleMouseDown($event)\"></div>\n  } @if (cellError(); as error) {\n  <div\n    class=\"grid-cell__error-icon\"\n    [mozTooltip]=\"error.message\"\n    tooltipPosition=\"top\"\n    aria-label=\"Erreur de validation\"\n  >\n    <ErrorFilled24 />\n  </div>\n  }\n</div>\n", styles: [":host{display:block;height:100%;min-width:0}.grid-cell{display:flex;align-items:center;position:relative;padding:0 var(--spacing-s, 8px);height:100%;border-right:1px solid var(--color-border-primary);overflow:hidden;box-sizing:border-box;min-width:0;background:inherit;cursor:pointer}.grid-cell--last{border-right:none}.grid-cell--pinned-end{border-right:none;border-left:1px solid var(--color-border-primary)}:host(:first-child) .grid-cell--pinned-end{border-left:none}.grid-cell__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--font-size-s, 14px);color:var(--color-text-primary);position:relative;z-index:1}.grid-cell__editor{width:100%;min-width:0;max-width:100%;height:100%;display:flex;align-items:center;overflow:hidden;box-sizing:border-box;position:relative;z-index:1}.grid-cell__editor-custom{width:100%;min-width:0;max-width:100%;overflow:hidden;box-sizing:border-box;display:flex;align-items:center;flex-wrap:wrap;gap:4px}.grid-cell__editor input,.grid-cell__editor moz-select{width:100%;min-width:0;box-sizing:border-box}.grid-cell__input--plain{border:none;outline:none;background:transparent;font-family:inherit;font-size:var(--font-size-s, 14px);color:var(--color-text-primary);padding:0;height:100%;width:100%;min-width:0;box-sizing:border-box}.grid-cell__input--plain:focus{outline:none}.grid-cell__input--plain[type=number]::-webkit-inner-spin-button,.grid-cell__input--plain[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.grid-cell__input--plain[type=number]{-moz-appearance:textfield}.grid-cell__editor ::ng-deep .text-input{width:100%;min-width:0;box-sizing:border-box}.grid-cell__editor ::ng-deep .select,.grid-cell__editor ::ng-deep .select__trigger{min-width:0;width:100%}.grid-cell__editor ::ng-deep *{max-width:100%}.grid-cell__editor moz-datepicker{width:100%;min-width:0;box-sizing:border-box}.grid-cell__editor ::ng-deep .mc-datepicker,.grid-cell__editor ::ng-deep .mc-text-input{width:100%;min-width:0;box-sizing:border-box;height:28px;font-size:var(--font-size-xs, 12px)}.grid-cell__editor ::ng-deep moz-datepicker label{display:none}.grid-cell>*:not(.grid-cell__fill-handle){position:relative;z-index:1}.grid-cell:before{content:\"\";position:absolute;inset:3px;border-radius:4px;pointer-events:none;z-index:0}.grid-cell:hover:before{background:#f1f3f4}.grid-cell--focused:hover:before,.grid-cell--in-range:hover:before,.grid-cell--in-fill-range:hover:before,.grid-cell--in-fill-reject-range:hover:before{background:transparent}.grid-cell--focused{z-index:2;overflow:visible}.grid-cell--focused:after{content:\"\";position:absolute;inset:0;border:2px solid var(--color-background-accent-inverse);border-radius:4px;pointer-events:none}.grid-cell--in-range{background:var(--color-background-accent)}.grid-cell--readonly .grid-cell__value{color:var(--color-text-secondary, #666)}.grid-cell--in-fill-range{background:#34a85314}.grid-cell--in-fill-range:after{content:\"\";position:absolute;inset:0;border:1px dashed var(--color-success, #34a853);border-radius:4px;pointer-events:none}.grid-cell--in-fill-reject-range{background:#ea302d1f;cursor:not-allowed;z-index:2}.grid-cell--in-fill-reject-range:after{content:\"\";position:absolute;inset:0;border:2px dashed var(--Status-Standalone-element-Error, #ea302d);border-radius:4px;pointer-events:none;z-index:3}.grid-cell__fill-handle{position:absolute;right:-4px;bottom:-4px;width:8px;height:8px;background:var(--color-background-primary, #fff);border:1px solid var(--color-background-accent-inverse);border-radius:2px;cursor:crosshair;z-index:4}.grid-cell--error{background:var(--Background-Primary, #FFF);outline:2px solid var(--Status-Border-Error, #EF5F5C);outline-offset:-2px;z-index:1}.grid-cell--error:hover:before{background:transparent}.grid-cell__error-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:auto;cursor:help;position:relative;z-index:2}.grid-cell__error-icon ::ng-deep svg{fill:var(--Status-Standalone-element-Error, #EA302D)}\n"] }]
+                    }, template: "<div\n  class=\"grid-cell\"\n  [class.grid-cell--focused]=\"isFocused()\"\n  [class.grid-cell--in-range]=\"isInRange()\"\n  [class.grid-cell--in-fill-range]=\"isInFillRange()\"\n  [class.grid-cell--in-fill-reject-range]=\"isInFillRejectRange()\"\n  [class.grid-cell--cut]=\"cutEdges().any\"\n  [class.grid-cell--last]=\"isLast()\"\n  [class.grid-cell--pinned-end]=\"pinnedEnd()\"\n  [class.grid-cell--readonly]=\"!def().editable\"\n  [class.grid-cell--error]=\"cellError()\"\n  [attr.aria-invalid]=\"cellError() ? 'true' : null\"\n  (click)=\"onCellClick($event)\"\n  (dblclick)=\"onDoubleClick()\"\n  (mousedown)=\"onMouseDown($event)\"\n  (mouseenter)=\"onMouseEnter()\"\n>\n  @if (isEditing()) {\n  <div class=\"grid-cell__editor\" (focusout)=\"onEditorBlur($event)\">\n    @if (editTemplate()) {\n    <div class=\"grid-cell__editor-custom\">\n      <ng-container\n        [ngTemplateOutlet]=\"editTemplate()!\"\n        [ngTemplateOutletContext]=\"{\n          $implicit: value(),\n          row: row(),\n          field: def().field,\n          draft: editState().draftValue,\n          updateDraft: updateDraftFn,\n          commitEdit: commitEditFn\n        }\"\n      />\n    </div>\n    } @else { @switch (editorType()) { @case ('text') {\n    <input\n      class=\"grid-cell__input grid-cell__input--plain\"\n      type=\"text\"\n      [value]=\"editState().draftValue\"\n      (input)=\"onEditorInput($event)\"\n    />\n    } @case ('number') {\n    <input\n      class=\"grid-cell__input grid-cell__input--plain\"\n      type=\"number\"\n      [value]=\"editState().draftValue\"\n      (input)=\"onEditorInput($event)\"\n    />\n    } @case ('select') {\n    <moz-select\n      name=\"cell-editor\"\n      [options]=\"def().cellEditorOptions ?? []\"\n      [ngModel]=\"editState().draftValue\"\n      (change)=\"onSelectChange($event)\"\n      [size]=\"'s'\"\n    />\n    } @case ('checkbox') {\n    <moz-checkbox\n      [id]=\"'grid-cell-editor-' + rowIndex() + '-' + colIndex()\"\n      [ngModel]=\"!!editState().draftValue\"\n      (change)=\"onCheckboxChange($event)\"\n    />\n    } @case ('date') {\n    <moz-datepicker\n      [id]=\"'grid-cell-editor-' + rowIndex() + '-' + colIndex()\"\n      size=\"s\"\n      [ngModel]=\"editState().draftValue\"\n      (ngModelChange)=\"onDateChange($event)\"\n    />\n    } @default {\n    <input\n      class=\"grid-cell__input grid-cell__input--plain\"\n      type=\"text\"\n      [value]=\"editState().draftValue\"\n      (input)=\"onEditorInput($event)\"\n    />\n    } } }\n  </div>\n  } @else { @if (cellTemplate()) {\n  <div class=\"grid-cell__custom\">\n    <ng-container\n      [ngTemplateOutlet]=\"cellTemplate()!\"\n      [ngTemplateOutletContext]=\"{ $implicit: value(), row: row(), field: def().field }\"\n    />\n  </div>\n  } @else {\n  <span class=\"grid-cell__value\">{{ displayValue() }}</span>\n  } } @if (cutEdges(); as edges) { @if (edges.top) {\n  <div class=\"grid-cell__cut-mark grid-cell__cut-mark--top\"></div>\n  } @if (edges.bottom) {\n  <div class=\"grid-cell__cut-mark grid-cell__cut-mark--bottom\"></div>\n  } @if (edges.left) {\n  <div class=\"grid-cell__cut-mark grid-cell__cut-mark--left\"></div>\n  } @if (edges.right) {\n  <div class=\"grid-cell__cut-mark grid-cell__cut-mark--right\"></div>\n  } } @if (isFocused() && !isEditing() && def().editable) {\n  <div class=\"grid-cell__fill-handle\" (mousedown)=\"onFillHandleMouseDown($event)\"></div>\n  } @if (cellError(); as error) {\n  <div\n    class=\"grid-cell__error-icon\"\n    [mozTooltip]=\"error.message\"\n    tooltipPosition=\"top\"\n    aria-label=\"Erreur de validation\"\n  >\n    <ErrorFilled24 />\n  </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;height:100%;min-width:0}.grid-cell{display:flex;align-items:center;position:relative;padding:0 var(--spacing-s, 8px);height:100%;border-right:1px solid var(--color-border-primary);overflow:hidden;box-sizing:border-box;min-width:0;background:inherit;cursor:pointer}.grid-cell--last{border-right:none}.grid-cell--pinned-end{border-right:none;border-left:1px solid var(--color-border-primary)}:host(:first-child) .grid-cell--pinned-end{border-left:none}.grid-cell__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--font-size-s, 14px);color:var(--color-text-primary);position:relative;z-index:1}.grid-cell__editor{width:100%;min-width:0;max-width:100%;height:100%;display:flex;align-items:center;overflow:hidden;box-sizing:border-box;position:relative;z-index:1}.grid-cell__editor-custom{width:100%;min-width:0;max-width:100%;overflow:hidden;box-sizing:border-box;display:flex;align-items:center;flex-wrap:wrap;gap:4px}.grid-cell__editor input,.grid-cell__editor moz-select{width:100%;min-width:0;box-sizing:border-box}.grid-cell__input--plain{border:none;outline:none;background:transparent;font-family:inherit;font-size:var(--font-size-s, 14px);color:var(--color-text-primary);padding:0;height:100%;width:100%;min-width:0;box-sizing:border-box}.grid-cell__input--plain:focus{outline:none}.grid-cell__input--plain[type=number]::-webkit-inner-spin-button,.grid-cell__input--plain[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.grid-cell__input--plain[type=number]{-moz-appearance:textfield}.grid-cell__editor ::ng-deep .text-input{width:100%;min-width:0;box-sizing:border-box}.grid-cell__editor ::ng-deep .select,.grid-cell__editor ::ng-deep .select__trigger{min-width:0;width:100%}.grid-cell__editor ::ng-deep *{max-width:100%}.grid-cell__editor moz-datepicker{width:100%;min-width:0;box-sizing:border-box}.grid-cell__editor ::ng-deep .mc-datepicker,.grid-cell__editor ::ng-deep .mc-text-input{width:100%;min-width:0;box-sizing:border-box;height:28px;font-size:var(--font-size-xs, 12px)}.grid-cell__editor ::ng-deep moz-datepicker label{display:none}.grid-cell>*:not(.grid-cell__fill-handle){position:relative;z-index:1}.grid-cell:before{content:\"\";position:absolute;inset:3px;border-radius:4px;pointer-events:none;z-index:0}.grid-cell:hover:before{background:#f1f3f4}.grid-cell--focused:hover:before,.grid-cell--in-range:hover:before,.grid-cell--in-fill-range:hover:before,.grid-cell--in-fill-reject-range:hover:before{background:transparent}.grid-cell--focused{z-index:2}.grid-cell--focused:after{content:\"\";position:absolute;inset:0;border:2px solid var(--color-background-accent-inverse);border-radius:4px;pointer-events:none}.grid-cell--in-range{background:var(--color-background-accent)}.grid-cell--readonly .grid-cell__value{color:var(--color-text-secondary, #666)}.grid-cell--in-fill-range{background:#34a85314}.grid-cell--in-fill-range:after{content:\"\";position:absolute;inset:0;border:1px dashed var(--color-success, #34a853);border-radius:4px;pointer-events:none}.grid-cell--in-fill-reject-range{background:#ea302d1f;cursor:not-allowed;z-index:2}.grid-cell--in-fill-reject-range:after{content:\"\";position:absolute;inset:0;border:2px dashed var(--Status-Standalone-element-Error, #ea302d);border-radius:4px;pointer-events:none;z-index:3}.grid-cell--cut{background:#1a73e80f}.grid-cell__cut-mark{position:absolute;pointer-events:none;z-index:5;--cut-color: var(--color-background-accent-inverse, #1a73e8)}.grid-cell__cut-mark--top,.grid-cell__cut-mark--bottom{left:0;right:0;height:2px;background-image:linear-gradient(90deg,var(--cut-color) 50%,transparent 50%);background-size:8px 2px;background-repeat:repeat-x;animation:moz-grid-marching-ants-x .5s linear infinite}.grid-cell__cut-mark--top{top:0}.grid-cell__cut-mark--bottom{bottom:0}.grid-cell__cut-mark--left,.grid-cell__cut-mark--right{top:0;bottom:0;width:2px;background-image:linear-gradient(180deg,var(--cut-color) 50%,transparent 50%);background-size:2px 8px;background-repeat:repeat-y;animation:moz-grid-marching-ants-y .5s linear infinite}.grid-cell__cut-mark--left{left:0}.grid-cell__cut-mark--right{right:0}@keyframes moz-grid-marching-ants-x{0%{background-position-x:0}to{background-position-x:8px}}@keyframes moz-grid-marching-ants-y{0%{background-position-y:0}to{background-position-y:8px}}.grid-cell__fill-handle{position:absolute;right:0;bottom:0;width:8px;height:8px;background:var(--color-background-accent-inverse);cursor:crosshair;z-index:4}.grid-cell--error{background:var(--Background-Primary, #fff);outline:2px solid var(--Status-Border-Error, #ef5f5c);outline-offset:-2px;z-index:1}.grid-cell--error:hover:before{background:transparent}.grid-cell__error-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:auto;cursor:help;position:relative;z-index:2}.grid-cell__error-icon ::ng-deep svg{fill:var(--Status-Standalone-element-Error, #ea302d)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: true }] }], rowIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowIndex", required: true }] }], colIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "colIndex", required: true }] }], colState: [{ type: i0.Input, args: [{ isSignal: true, alias: "colState", required: true }] }], def: [{ type: i0.Input, args: [{ isSignal: true, alias: "def", required: true }] }], isLast: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLast", required: false }] }], pinnedEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnedEnd", required: false }] }], commitEdit: [{ type: i0.Output, args: ["commitEdit"] }], cancelEdit: [{ type: i0.Output, args: ["cancelEdit"] }] } });
 
 class MozGridRowComponent {
@@ -8510,6 +9400,85 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     ], template: "<div class=\"group-drawer__list\" cdkDropList (cdkDropListDropped)=\"onDrop($event)\">\n  @for (item of draftGrouped(); track item.field; let idx = $index) {\n  <div class=\"group-drawer__item\" cdkDrag>\n    <span class=\"group-drawer__drag-handle\" cdkDragHandle>\n      <Drag20 />\n    </span>\n    <span class=\"group-drawer__item-label\">{{ item.headerName }}</span>\n    <select\n      class=\"group-drawer__sort-select\"\n      [value]=\"item.sortDirection\"\n      [attr.aria-label]=\"'Sort direction for ' + item.headerName\"\n      (change)=\"onSortDirectionChange(idx, $event)\"\n    >\n      <option value=\"asc\">A \u2192 Z</option>\n      <option value=\"desc\">Z \u2192 A</option>\n    </select>\n    <button\n      type=\"button\"\n      moz-button\n      [attr.aria-label]=\"'Remove ' + item.headerName\"\n      (click)=\"removeGroup(item.field)\"\n      [iconPosition]=\"'only'\"\n      [size]=\"'s'\"\n      [ghost]=\"true\"\n    >\n      <Cross20 icon />\n    </button>\n  </div>\n  }\n</div>\n\n@if (available().length > 0) {\n<div class=\"group-drawer__available\">\n  <h4 class=\"group-drawer__section-title\">Available columns</h4>\n  @for (col of available(); track col.field) {\n  <div class=\"group-drawer__available-item\">\n    <span class=\"group-drawer__available-label\">{{ col.headerName }}</span>\n    <button\n      type=\"button\"\n      class=\"group-drawer__add-btn\"\n      [attr.aria-label]=\"'Add ' + col.headerName + ' as group'\"\n      (click)=\"addGroup(col.field)\"\n    >\n      <ListAdd20 />\n    </button>\n  </div>\n  }\n</div>\n} @if (draftGrouped().length === 0 && available().length === 0) {\n<p class=\"group-drawer__empty\">No groupable columns available.</p>\n}\n\n<ng-template mozDrawerFooter>\n  <button moz-button (click)=\"apply()\">Apply</button>\n  <button moz-button [outlined]=\"true\" (click)=\"reset()\">Reset</button>\n</ng-template>\n", styles: [".group-drawer__list{display:flex;flex-direction:column}.group-drawer__item{display:flex;align-items:center;gap:8px;padding:12px 0;border-bottom:1px solid var(--color-border-primary);background:var(--color-background-primary, #fff)}.group-drawer__item:last-child{border-bottom:none}.group-drawer__drag-handle{display:flex;align-items:center;cursor:grab;color:var(--color-text-secondary);flex-shrink:0}.group-drawer__drag-handle:active{cursor:grabbing}.group-drawer__item-label{flex:1;font-size:var(--font-size-m, 16px);color:var(--color-text-primary);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.group-drawer__sort-select{flex-shrink:0;padding:4px 8px;border:1px solid var(--color-border-primary);border-radius:var(--border-radius-s, 4px);background:var(--color-background-primary, #fff);font-size:var(--font-size-s, 14px);color:var(--color-text-primary);cursor:pointer}.group-drawer__sort-select:focus{outline:2px solid var(--color-background-accent-inverse);outline-offset:-1px}.group-drawer__available{margin-top:16px;margin-bottom:32px}.group-drawer__section-title{font-size:var(--font-size-s, 14px);font-weight:600;color:var(--color-text-secondary);margin:0 0 8px;text-transform:uppercase;letter-spacing:.5px}.group-drawer__available-item{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--color-border-primary)}.group-drawer__available-item:last-child{border-bottom:none}.group-drawer__available-label{font-size:var(--font-size-m, 16px);color:var(--color-text-primary)}.group-drawer__add-btn{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:28px;height:28px;padding:0;border:none;border-radius:var(--border-radius-s, 4px);background:transparent;cursor:pointer;color:var(--color-background-accent-inverse)}.group-drawer__add-btn:hover{background:#1a73e814;color:var(--color-primary-dark, #1557b0)}.group-drawer__empty{font-size:var(--font-size-s, 14px);color:var(--color-text-secondary);text-align:center;padding:24px 0}.cdk-drag-preview{display:flex;align-items:center;gap:8px;padding:12px 8px;background:var(--color-background-primary, #fff);border:1px solid var(--color-border-primary);border-radius:4px;box-shadow:0 4px 12px #00000026;font-size:var(--font-size-m, 16px)}.cdk-drag-placeholder{opacity:.3}.cdk-drag-animating{transition:transform .2s ease}\n"] }]
         }] });
 
+const EXCEL_SHORTCUTS = [
+    {
+        title: 'Navigation',
+        items: [
+            { keys: '← ↑ → ↓', label: 'Déplacer la cellule active' },
+            { keys: 'Ctrl + Flèche', label: 'Sauter au bord du bloc de données' },
+            { keys: 'Home / End', label: 'Début / fin de la ligne' },
+            { keys: 'Ctrl + Home / End', label: 'Première / dernière cellule' },
+            { keys: 'PageUp / PageDown', label: 'Page précédente / suivante' },
+            { keys: 'Tab / Shift+Tab', label: 'Cellule suivante / précédente' },
+            { keys: 'Enter / Shift+Enter', label: 'Descendre / remonter' },
+        ],
+    },
+    {
+        title: 'Sélection',
+        items: [
+            { keys: 'Shift + Flèche', label: 'Étendre la plage' },
+            { keys: 'Shift + Ctrl + Flèche', label: "Étendre jusqu'au bord du bloc" },
+            { keys: 'Shift + Home / End', label: 'Étendre au début / fin de la ligne' },
+            { keys: 'Shift + Ctrl + Home / End', label: 'Étendre au début / fin du tableau' },
+            { keys: 'Shift + PageUp / Down', label: "Étendre d'une page" },
+            { keys: 'Ctrl + A', label: 'Sélectionner tout' },
+            { keys: 'Shift + Espace', label: 'Sélectionner la ligne' },
+            { keys: 'Ctrl + Espace', label: 'Sélectionner la colonne' },
+        ],
+    },
+    {
+        title: 'Édition',
+        items: [
+            { keys: 'Enter / F2', label: 'Entrer en édition' },
+            { keys: 'Touche imprimable', label: 'Typing-to-edit (remplace la valeur)' },
+            { keys: 'Escape', label: "Annuler l'édition" },
+            { keys: 'Enter', label: 'Valider + descendre' },
+            { keys: 'Tab / Shift+Tab', label: 'Valider + droite / gauche' },
+            { keys: 'Alt + Enter', label: 'Retour à la ligne (texte)' },
+            { keys: 'Ctrl + Enter', label: 'Valider + remplir la sélection' },
+            { keys: 'Backspace / Delete', label: 'Effacer les cellules sélectionnées' },
+        ],
+    },
+    {
+        title: 'Presse-papier',
+        items: [
+            { keys: 'Ctrl + C', label: 'Copier (TSV)' },
+            { keys: 'Ctrl + X', label: 'Couper (marching ants)' },
+            { keys: 'Ctrl + V', label: 'Coller (déplace après Ctrl+X)' },
+            { keys: 'Ctrl + D', label: 'Remplir vers le bas (fill down)' },
+            { keys: 'Ctrl + R', label: 'Remplir vers la droite (fill right)' },
+        ],
+    },
+    {
+        title: 'Historique',
+        items: [
+            { keys: 'Ctrl + Z', label: 'Annuler (undo)' },
+            { keys: 'Ctrl + Y', label: 'Rétablir (redo)' },
+            { keys: 'Ctrl + Shift + Z', label: 'Rétablir (redo, alt.)' },
+        ],
+    },
+];
+class GridKeyboardShortcutsDrawerComponent {
+    drawerRef = inject(MozDrawerRef);
+    groups = EXCEL_SHORTCUTS.map((group) => ({
+        title: group.title,
+        items: group.items.map((item) => ({
+            keys: item.keys,
+            label: item.label,
+            parts: item.keys.split(' '),
+        })),
+    }));
+    close() {
+        this.drawerRef.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: GridKeyboardShortcutsDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: GridKeyboardShortcutsDrawerComponent, isStandalone: true, selector: "moz-grid-keyboard-shortcuts-drawer", ngImport: i0, template: "<div class=\"shortcuts\">\n  @for (group of groups; track group.title) {\n  <section class=\"shortcuts__group\">\n    <h4 class=\"shortcuts__group-title\">{{ group.title }}</h4>\n    <dl class=\"shortcuts__list\">\n      @for (item of group.items; track item.keys) {\n      <div class=\"shortcuts__item\">\n        <dt class=\"shortcuts__keys\">\n          @for (part of item.parts; track $index) { @if (part === '+' || part === '/') {\n          <span class=\"shortcuts__separator\">{{ part }}</span>\n          } @else {\n          <kbd class=\"shortcuts__key\">{{ part }}</kbd>\n          } }\n        </dt>\n        <dd class=\"shortcuts__label\">{{ item.label }}</dd>\n      </div>\n      }\n    </dl>\n  </section>\n  }\n</div>\n\n<ng-template mozDrawerFooter>\n  <button moz-button (click)=\"close()\">Close</button>\n</ng-template>\n", styles: [".shortcuts{padding-bottom:24px}.shortcuts__group{margin-bottom:24px}.shortcuts__group:last-child{margin-bottom:0}.shortcuts__group-title{margin:0 0 8px;font-size:var(--font-size-s, 14px);font-weight:700;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px}.shortcuts__list{display:flex;flex-direction:column;margin:0;padding:0}.shortcuts__item{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--color-border-primary)}.shortcuts__item:last-child{border-bottom:none}.shortcuts__label{margin:0;flex:1;font-size:var(--font-size-s, 14px);color:var(--color-text-primary)}.shortcuts__keys{display:flex;align-items:center;flex-wrap:wrap;gap:4px;flex-shrink:0;margin:0}.shortcuts__key{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 6px;background:var(--color-background-secondary, #f5f5f5);border:1px solid var(--color-border-primary);border-radius:var(--border-radius-s, 4px);font-family:var(--font-family-monospace, \"SFMono-Regular\", Consolas, monospace);font-size:var(--font-size-50, 12px);font-weight:600;color:var(--color-text-primary);box-shadow:inset 0 -1px #00000014}.shortcuts__separator{font-size:var(--font-size-s, 14px);color:var(--color-text-secondary);padding:0 2px}\n"], dependencies: [{ kind: "component", type: MozButtonComponent, selector: "button[moz-button]", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "iconPosition", "type", "isLoading"] }, { kind: "directive", type: MozDrawerFooterDirective, selector: "[mozDrawerFooter]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: GridKeyboardShortcutsDrawerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'moz-grid-keyboard-shortcuts-drawer', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MozButtonComponent, MozDrawerFooterDirective], template: "<div class=\"shortcuts\">\n  @for (group of groups; track group.title) {\n  <section class=\"shortcuts__group\">\n    <h4 class=\"shortcuts__group-title\">{{ group.title }}</h4>\n    <dl class=\"shortcuts__list\">\n      @for (item of group.items; track item.keys) {\n      <div class=\"shortcuts__item\">\n        <dt class=\"shortcuts__keys\">\n          @for (part of item.parts; track $index) { @if (part === '+' || part === '/') {\n          <span class=\"shortcuts__separator\">{{ part }}</span>\n          } @else {\n          <kbd class=\"shortcuts__key\">{{ part }}</kbd>\n          } }\n        </dt>\n        <dd class=\"shortcuts__label\">{{ item.label }}</dd>\n      </div>\n      }\n    </dl>\n  </section>\n  }\n</div>\n\n<ng-template mozDrawerFooter>\n  <button moz-button (click)=\"close()\">Close</button>\n</ng-template>\n", styles: [".shortcuts{padding-bottom:24px}.shortcuts__group{margin-bottom:24px}.shortcuts__group:last-child{margin-bottom:0}.shortcuts__group-title{margin:0 0 8px;font-size:var(--font-size-s, 14px);font-weight:700;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px}.shortcuts__list{display:flex;flex-direction:column;margin:0;padding:0}.shortcuts__item{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--color-border-primary)}.shortcuts__item:last-child{border-bottom:none}.shortcuts__label{margin:0;flex:1;font-size:var(--font-size-s, 14px);color:var(--color-text-primary)}.shortcuts__keys{display:flex;align-items:center;flex-wrap:wrap;gap:4px;flex-shrink:0;margin:0}.shortcuts__key{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 6px;background:var(--color-background-secondary, #f5f5f5);border:1px solid var(--color-border-primary);border-radius:var(--border-radius-s, 4px);font-family:var(--font-family-monospace, \"SFMono-Regular\", Consolas, monospace);font-size:var(--font-size-50, 12px);font-weight:600;color:var(--color-text-primary);box-shadow:inset 0 -1px #00000014}.shortcuts__separator{font-size:var(--font-size-s, 14px);color:var(--color-text-secondary);padding:0 2px}\n"] }]
+        }] });
+
 class MozGridComponent {
     state = inject(GridStateManager);
     gridEngine = inject(GridEngine);
@@ -8519,6 +9488,8 @@ class MozGridComponent {
     rowSelectionEngine = inject(RowSelectionEngine);
     cellSelectionEngine = inject(CellSelectionEngine);
     keyboardEngine = inject(KeyboardEngine);
+    clipboardEngine = inject(ClipboardEngine);
+    historyEngine = inject(HistoryEngine);
     groupEngine = inject(GroupEngine);
     filterEngine = inject(FilterEngine);
     persistenceEngine = inject(StatePersistenceEngine);
@@ -8596,6 +9567,24 @@ class MozGridComponent {
     stateRestored = false;
     documentMouseUpHandler = null;
     constructor() {
+        this.keyboardEngine.registerActions({
+            copy: () => this.onBulkCopy(),
+            paste: () => {
+                void this.onBulkPaste();
+            },
+            cut: () => this.onCutShortcut(),
+            deleteRange: () => this.onBulkDelete(),
+            undo: () => this.onUndo(),
+            redo: () => this.onRedo(),
+            fillDown: () => this.onFillDownShortcut(),
+            fillRight: () => this.onFillRightShortcut(),
+            startEdit: (row, col, char) => this.onStartEditShortcut(row, col, char),
+        });
+        // Bind history persistence to the grid's stateKey (same key we use for
+        // column/sort persistence — one localStorage namespace per grid).
+        effect(() => {
+            this.historyEngine.attach(this.stateKey());
+        });
         // Global mouseup listener for fill handle — if the user drags the fill
         // handle outside the grid and releases, we still need to end the fill.
         afterNextRender(() => {
@@ -8631,6 +9620,7 @@ class MozGridComponent {
                 const pushScroll = () => {
                     this.ngZone.run(() => {
                         this.horizontalVirtualScrollEngine.onScroll(scrollEl.scrollLeft, scrollEl.clientWidth);
+                        this.state.scrollViewportHeight.set(scrollEl.clientHeight);
                     });
                 };
                 // Prime the engine with the initial viewport width so the range is
@@ -8907,64 +9897,154 @@ class MozGridComponent {
         if (tag === 'input' || tag === 'select' || tag === 'textarea') {
             return;
         }
-        // Bulk action shortcuts work for both cell and row selection modes
+        // Row-selection mode forwards a small set of shortcuts without touching
+        // cell focus. Cell-mode (and anywhere else) goes through the keyboard engine.
         const selMode = this.state.activeSelectionMode();
-        if (selMode === 'rows' || selMode === 'cells') {
-            if ((event.ctrlKey || event.metaKey) && event.key === 'c') {
+        if (selMode === 'rows') {
+            if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'c') {
                 event.preventDefault();
                 this.onBulkCopy();
                 return;
             }
-            if ((event.ctrlKey || event.metaKey) && event.key === 'v') {
+            if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'v') {
                 event.preventDefault();
-                this.onBulkPaste();
+                void this.onBulkPaste();
                 return;
             }
             if (event.key === 'Delete' || event.key === 'Backspace') {
-                if (selMode === 'rows' || this.state.cellRange() || this.state.focusedCell()) {
-                    event.preventDefault();
-                    this.onBulkDelete();
-                    return;
-                }
+                event.preventDefault();
+                this.onBulkDelete();
+                return;
             }
         }
         this.keyboardEngine.handleKeydown(event);
     }
     handleEditModeKeydown(event) {
-        switch (event.key) {
-            case 'Escape': {
-                event.preventDefault();
-                const cancelEvt = this.inlineEditEngine.cancelEdit();
-                if (cancelEvt) {
-                    this.cellEditCancel.emit(cancelEvt);
-                }
-                break;
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            const cancelEvt = this.inlineEditEngine.cancelEdit();
+            if (cancelEvt) {
+                this.cellEditCancel.emit(cancelEvt);
             }
-            case 'Enter': {
-                event.preventDefault();
-                const commitEvt = this.inlineEditEngine.commitEdit();
-                if (commitEvt) {
-                    this.cellEdit.emit(commitEvt);
+            return;
+        }
+        if (event.key === 'Enter') {
+            // Alt+Enter: insert a newline in the draft for text editors (Excel-style).
+            if (event.altKey) {
+                const editState = this.state.cellEditState();
+                const def = this.state
+                    .columnDefMap()
+                    .get(this.state.visibleColumns()[editState.editingCell?.col ?? -1]?.field ?? '');
+                const editorType = def?.cellEditor ?? 'text';
+                if (editorType === 'text') {
+                    event.preventDefault();
+                    const draft = editState.draftValue;
+                    const next = (typeof draft === 'string' ? draft : String(draft ?? '')) + '\n';
+                    this.inlineEditEngine.updateDraft(next);
                 }
-                this.cellSelectionEngine.moveRight();
-                this.refocusGrid();
-                break;
+                return;
             }
-            case 'Tab': {
+            // Ctrl+Enter: commit current draft and broadcast it to the active range.
+            if (event.ctrlKey || event.metaKey) {
                 event.preventDefault();
-                const tabEvt = this.inlineEditEngine.commitEdit();
-                if (tabEvt) {
-                    this.cellEdit.emit(tabEvt);
-                }
-                if (event.shiftKey) {
-                    this.cellSelectionEngine.moveLeft();
-                }
-                else {
-                    this.cellSelectionEngine.moveRight();
+                const editState = this.state.cellEditState();
+                const value = editState.draftValue;
+                const cancel = this.inlineEditEngine.cancelEdit();
+                if (cancel)
+                    this.cellEditCancel.emit(cancel);
+                const range = this.cellSelectionEngine.getNormalizedRange();
+                if (range) {
+                    const changes = this.clipboardEngine.fillSelection(range, value);
+                    this.historyEngine.record('fill-selection', changes);
                 }
                 this.refocusGrid();
-                break;
+                return;
             }
+            event.preventDefault();
+            this.commitFromEditMode();
+            if (event.shiftKey)
+                this.cellSelectionEngine.moveUp();
+            else
+                this.cellSelectionEngine.moveDown();
+            this.refocusGrid();
+            return;
+        }
+        if (event.key === 'Tab') {
+            event.preventDefault();
+            this.commitFromEditMode();
+            if (event.shiftKey)
+                this.cellSelectionEngine.moveLeft();
+            else
+                this.cellSelectionEngine.moveRight();
+            this.refocusGrid();
+        }
+    }
+    commitFromEditMode() {
+        const evt = this.inlineEditEngine.commitEdit();
+        if (!evt)
+            return;
+        this.cellEdit.emit(evt);
+        this.clipboardEngine.clearCut();
+    }
+    onCutShortcut() {
+        const range = this.cellSelectionEngine.getNormalizedRange();
+        if (!range)
+            return;
+        const values = this.clipboardEngine.extractTsv(range);
+        const tsv = values.map((row) => row.join('\t')).join('\n');
+        navigator.clipboard.writeText(tsv);
+        this.clipboardEngine.markCut(range);
+        this.bulkCopy.emit({
+            range,
+            data: values,
+            rowIds: this.getRangeRowIds(range),
+            fields: this.getRangeFields(range),
+        });
+    }
+    onUndo() {
+        this.historyEngine.undo();
+        this.clipboardEngine.clearCut();
+    }
+    onRedo() {
+        this.historyEngine.redo();
+        this.clipboardEngine.clearCut();
+    }
+    onFillDownShortcut() {
+        const range = this.cellSelectionEngine.getNormalizedRange();
+        if (!range)
+            return;
+        if (this.state.mode() !== 'client')
+            return;
+        const changes = this.clipboardEngine.fillDown(range);
+        if (changes.length === 0)
+            return;
+        this.historyEngine.record('fill-down', changes);
+        this.clipboardEngine.clearCut();
+    }
+    onFillRightShortcut() {
+        const range = this.cellSelectionEngine.getNormalizedRange();
+        if (!range)
+            return;
+        if (this.state.mode() !== 'client')
+            return;
+        const changes = this.clipboardEngine.fillRight(range);
+        if (changes.length === 0)
+            return;
+        this.historyEngine.record('fill-right', changes);
+        this.clipboardEngine.clearCut();
+    }
+    onStartEditShortcut(row, col, initialChar) {
+        const colDef = this.state.visibleColumns()[col];
+        if (!colDef)
+            return;
+        const def = this.state.columnDefMap().get(colDef.field);
+        if (!def?.editable)
+            return;
+        if (initialChar !== undefined) {
+            this.inlineEditEngine.startEditWithChar(row, colDef.field, initialChar);
+        }
+        else {
+            this.inlineEditEngine.startEdit(row, colDef.field);
         }
     }
     resetInfiniteScrollIfActive() {
@@ -9051,17 +10131,26 @@ class MozGridComponent {
                 if (srcIdx >= 0)
                     indexMap.set(r, srcIdx);
             }
+            const changes = [];
             this.state.sourceData.update((d) => {
                 const updated = [...d];
                 for (const [, srcIdx] of indexMap) {
                     if (!updated[srcIdx])
                         continue;
+                    const before = updated[srcIdx][field];
+                    if (before === sourceValue)
+                        continue;
                     const rowCopy = { ...updated[srcIdx] };
                     rowCopy[field] = sourceValue;
                     updated[srcIdx] = rowCopy;
+                    changes.push({ rowIndex: srcIdx, field, before, after: sourceValue });
                 }
                 return updated;
             });
+            if (changes.length > 0) {
+                this.historyEngine.record('fill', changes);
+            }
+            this.clipboardEngine.clearCut();
         }
         this.fillDown.emit({
             sourceCell: anchor,
@@ -9102,6 +10191,7 @@ class MozGridComponent {
         if (targetFields.length === 0)
             return;
         if (this.state.mode() === 'client') {
+            const changes = [];
             this.state.sourceData.update((d) => {
                 const updated = [...d];
                 const src = updated[anchorSourceIdx];
@@ -9109,11 +10199,19 @@ class MozGridComponent {
                     return updated;
                 const rowCopy = { ...src };
                 for (const f of targetFields) {
+                    const before = src[f];
+                    if (before === sourceValue)
+                        continue;
                     rowCopy[f] = sourceValue;
+                    changes.push({ rowIndex: anchorSourceIdx, field: f, before, after: sourceValue });
                 }
                 updated[anchorSourceIdx] = rowCopy;
                 return updated;
             });
+            if (changes.length > 0) {
+                this.historyEngine.record('fill', changes);
+            }
+            this.clipboardEngine.clearCut();
         }
         this.fillDown.emit({
             sourceCell: anchor,
@@ -9216,6 +10314,10 @@ class MozGridComponent {
             groups: [...result.groups],
         });
     }
+    // --- Keyboard shortcuts drawer ---
+    onKeyboardShortcutsClick() {
+        this.drawerService.open(GridKeyboardShortcutsDrawerComponent, { title: 'Keyboard shortcuts' });
+    }
     // --- Settings drawer ---
     static DENSITY_ROW_HEIGHT = {
         small: 32,
@@ -9320,6 +10422,8 @@ class MozGridComponent {
         });
     }
     onBulkCopy() {
+        // A fresh copy always cancels any pending cut (Excel parity).
+        this.clipboardEngine.clearCut();
         if (this.state.activeSelectionMode() === 'rows') {
             const event = this.rowSelectionEngine.getSelectionEvent();
             const rowData = this.extractRowSelectionData(event.selectedRows);
@@ -9387,7 +10491,16 @@ class MozGridComponent {
                 },
             };
             if (this.state.mode() === 'client') {
-                this.applyPasteData(pasteRange, rows);
+                // If a cut is pending, first wipe the source cells so cut+paste == move,
+                // and fold both halves into a single undoable history op.
+                const cutSource = this.state.cutSource();
+                const clearChanges = cutSource ? this.clipboardEngine.clearRange(cutSource) : [];
+                const pasteChanges = this.clipboardEngine.applyPaste(pasteRange, rows);
+                const allChanges = [...clearChanges, ...pasteChanges];
+                if (allChanges.length > 0) {
+                    this.historyEngine.record(cutSource ? 'cut' : 'paste', allChanges);
+                }
+                this.clipboardEngine.clearCut();
             }
             this.bulkPaste.emit({
                 range: pasteRange,
@@ -9449,33 +10562,14 @@ class MozGridComponent {
         const pageEnd = pageStart + this.gridEngine.paginatedData().length - 1;
         if (range.start.row < pageStart || range.end.row > pageEnd)
             return;
-        const cols = this.state.visibleColumns();
         const rows = range.end.row - range.start.row + 1;
         const colCount = range.end.col - range.start.col + 1;
         if (this.state.mode() === 'client') {
-            this.state.sourceData.update((data) => {
-                const updated = [...data];
-                for (let r = range.start.row; r <= range.end.row; r++) {
-                    if (!updated[r])
-                        continue;
-                    const rowCopy = { ...updated[r] };
-                    let changed = false;
-                    for (let c = range.start.col; c <= range.end.col; c++) {
-                        const field = cols[c]?.field;
-                        if (!field)
-                            continue;
-                        const coerced = this.coerceAndValidate(field, null, updated[r]);
-                        if (coerced !== PASTE_SKIP) {
-                            rowCopy[field] = coerced;
-                            changed = true;
-                        }
-                    }
-                    if (changed) {
-                        updated[r] = rowCopy;
-                    }
-                }
-                return updated;
-            });
+            const changes = this.clipboardEngine.clearRange(range);
+            if (changes.length > 0) {
+                this.historyEngine.record('delete', changes);
+            }
+            this.clipboardEngine.clearCut();
         }
         this.bulkDelete.emit({
             range,
@@ -9513,36 +10607,6 @@ class MozGridComponent {
         }
         return { range, values };
     }
-    applyPasteData(range, pasteRows) {
-        const cols = this.state.visibleColumns();
-        this.state.sourceData.update((data) => {
-            const updated = [...data];
-            for (let ri = 0; ri < pasteRows.length; ri++) {
-                const targetRow = range.start.row + ri;
-                if (targetRow >= updated.length)
-                    break;
-                const rowCopy = { ...updated[targetRow] };
-                let changed = false;
-                for (let ci = 0; ci < pasteRows[ri].length; ci++) {
-                    const targetCol = range.start.col + ci;
-                    if (targetCol >= cols.length)
-                        break;
-                    const field = cols[targetCol]?.field;
-                    if (!field)
-                        continue;
-                    const coerced = this.coerceAndValidate(field, pasteRows[ri][ci], updated[targetRow]);
-                    if (coerced !== PASTE_SKIP) {
-                        rowCopy[field] = coerced;
-                        changed = true;
-                    }
-                }
-                if (changed) {
-                    updated[targetRow] = rowCopy;
-                }
-            }
-            return updated;
-        });
-    }
     extractRowSelectionData(selectedRows) {
         const cols = this.state.visibleColumns();
         const defMap = this.state.columnDefMap();
@@ -9679,6 +10743,8 @@ class MozGridComponent {
             RowSelectionEngine,
             CellSelectionEngine,
             KeyboardEngine,
+            ClipboardEngine,
+            HistoryEngine,
             GroupEngine,
             FilterEngine,
             ColumnReorderEngine,
@@ -9698,30 +10764,29 @@ class MozGridComponent {
       <div class="moz-grid__toolbar">
         <div class="moz-grid__toolbar-left">
           @if (fullscreen()) {
-            <moz-icon-button
-              id="grid-fullscreen"
-              [ghost]="true"
-              size="s"
-              [ariaLabel]="isFullscreen() ? 'Exit fullscreen' : 'Fullscreen'"
-              (activated)="toggleFullscreen()"
-            >
-              @if (isFullscreen()) {
-                <FullscreenExit20 icon />
-              } @else {
-                <FullscreenEnter20 icon />
-              }
-            </moz-icon-button>
-          }
-          @if (exportable()) {
-            <moz-icon-button
-              id="grid-export"
-              [ghost]="true"
-              size="s"
-              ariaLabel="Export CSV"
-              (activated)="onExportCsv()"
-            >
-              <Download20 icon />
-            </moz-icon-button>
+          <moz-icon-button
+            id="grid-fullscreen"
+            [ghost]="true"
+            size="s"
+            [ariaLabel]="isFullscreen() ? 'Exit fullscreen' : 'Fullscreen'"
+            (activated)="toggleFullscreen()"
+          >
+            @if (isFullscreen()) {
+            <FullscreenExit20 icon />
+            } @else {
+            <FullscreenEnter20 icon />
+            }
+          </moz-icon-button>
+          } @if (exportable()) {
+          <moz-icon-button
+            id="grid-export"
+            [ghost]="true"
+            size="s"
+            ariaLabel="Export CSV"
+            (activated)="onExportCsv()"
+          >
+            <Download20 icon />
+          </moz-icon-button>
           }
           <moz-icon-button
             id="grid-filter"
@@ -9750,113 +10815,113 @@ class MozGridComponent {
           >
             <ViewGridX420 icon />
           </moz-icon-button>
+          <moz-icon-button
+            id="grid-keyboard-shortcuts"
+            size="s"
+            [ghost]="true"
+            ariaLabel="Keyboard shortcuts"
+            (activated)="onKeyboardShortcutsClick()"
+          >
+            <Keyboard20 icon />
+          </moz-icon-button>
           @for (def of toolbarStartDefs(); track def) {
-            <ng-container [ngTemplateOutlet]="def.template" />
+          <ng-container [ngTemplateOutlet]="def.template" />
           }
         </div>
 
         <!-- Selection banner -->
         @if (selectionBannerVisible()) {
-          <div class="moz-grid__selection-banner">
-            <span class="moz-grid__selection-text">
-              {{ rowSelectionEngine.count() }} row(s) selected
-            </span>
-            @if (rowSelectionEngine.count() < selectionTotalCount()) {
-              <button
-                moz-button
-                type="button"
-                [size]="'s'"
-                [ghost]="true"
-                [appearance]="'accent'"
-                (click)="onSelectAllRows()"
-              >
-                Select all {{ selectionTotalCount() }} rows
-              </button>
-            }
-            <button
-              moz-button
-              type="button"
-              [size]="'s'"
-              [ghost]="true"
-              (click)="onClearSelection()"
-            >
-              Clear
-            </button>
-          </div>
+        <div class="moz-grid__selection-banner">
+          <span class="moz-grid__selection-text">
+            {{ rowSelectionEngine.count() }} row(s) selected
+          </span>
+          @if (rowSelectionEngine.count() < selectionTotalCount()) {
+          <button
+            moz-button
+            type="button"
+            [size]="'s'"
+            [ghost]="true"
+            [appearance]="'accent'"
+            (click)="onSelectAllRows()"
+          >
+            Select all {{ selectionTotalCount() }} rows
+          </button>
+          }
+          <button moz-button type="button" [size]="'s'" [ghost]="true" (click)="onClearSelection()">
+            Clear
+          </button>
+        </div>
         }
 
         <div class="moz-grid__toolbar-right">
           @for (def of toolbarEndDefs(); track def) {
-            <ng-container [ngTemplateOutlet]="def.template" />
+          <ng-container [ngTemplateOutlet]="def.template" />
           }
         </div>
       </div>
 
       <!-- Tag bars (outside .moz-grid) -->
       @if (state.groupColumns().length > 0) {
-        <div class="moz-grid__tag-bar">
-          <span class="moz-grid__tag-bar-label">GROUPED BY</span>
-          @for (entry of state.groupColumns(); track entry.field) {
-            <div>
-              <moz-tag
-                type="removable"
-                size="s"
-                [id]="'group-' + entry.field"
-                (removeTag)="onRemoveGroup(entry.field)"
-              >
-                <button
-                  type="button"
-                  class="moz-grid__group-tag-btn"
-                  (click)="onToggleGroupSort(entry.field)"
-                >
-                  {{ getColumnLabel(entry.field) }}
-                  @if (entry.sortDirection === 'asc') {
-                    <ChevronUp20 />
-                  } @else {
-                    <ChevronDown20 />
-                  }
-                </button>
-              </moz-tag>
-            </div>
-          }
-        </div>
-      }
-      @if (hasHiddenColumns()) {
-        <div class="moz-grid__tag-bar">
-          <span class="moz-grid__tag-bar-label">HIDDEN COLUMNS</span>
-          @for (col of hiddenColumnsList(); track col.field) {
-            <moz-tag
-              type="removable"
-              size="s"
-              [id]="'hidden-' + col.field"
-              removableLabel="Restore"
-              (removeTag)="onRestoreColumn(col.field)"
-              >{{ col.label }}</moz-tag
+      <div class="moz-grid__tag-bar">
+        <span class="moz-grid__tag-bar-label">GROUPED BY</span>
+        @for (entry of state.groupColumns(); track entry.field) {
+        <div>
+          <moz-tag
+            type="removable"
+            size="s"
+            [id]="'group-' + entry.field"
+            (removeTag)="onRemoveGroup(entry.field)"
+          >
+            <button
+              type="button"
+              class="moz-grid__group-tag-btn"
+              (click)="onToggleGroupSort(entry.field)"
             >
-          }
-          @if (hiddenColumnsList().length > 1) {
-            <button type="button" class="moz-grid__tag-action-btn" (click)="onRestoreAllColumns()">
-              Restore all
+              {{ getColumnLabel(entry.field) }}
+              @if (entry.sortDirection === 'asc') {
+              <ChevronUp20 />
+              } @else {
+              <ChevronDown20 />
+              }
             </button>
-          }
-        </div>
-      }
-      @if (state.activeFilters().length > 0) {
-        <div class="moz-grid__tag-bar">
-          <span class="moz-grid__tag-bar-label">FILTERED BY</span>
-          @for (filter of state.activeFilters(); track filter.field) {
-            <moz-tag
-              [type]="filter.removable ? 'removable' : 'informative'"
-              size="s"
-              [id]="'filter-' + filter.field"
-              (removeTag)="onRemoveFilter(filter.field)"
-              >{{ filter.label }}</moz-tag
-            >
-          }
-          <button type="button" class="moz-grid__tag-action-btn" (click)="onRemoveAllFilters()">
-            Remove all
-          </button>
+          </moz-tag>
         </div>
+        }
+      </div>
+      } @if (hasHiddenColumns()) {
+      <div class="moz-grid__tag-bar">
+        <span class="moz-grid__tag-bar-label">HIDDEN COLUMNS</span>
+        @for (col of hiddenColumnsList(); track col.field) {
+        <moz-tag
+          type="removable"
+          size="s"
+          [id]="'hidden-' + col.field"
+          removableLabel="Restore"
+          (removeTag)="onRestoreColumn(col.field)"
+          >{{ col.label }}</moz-tag
+        >
+        } @if (hiddenColumnsList().length > 1) {
+        <button type="button" class="moz-grid__tag-action-btn" (click)="onRestoreAllColumns()">
+          Restore all
+        </button>
+        }
+      </div>
+      } @if (state.activeFilters().length > 0) {
+      <div class="moz-grid__tag-bar">
+        <span class="moz-grid__tag-bar-label">FILTERED BY</span>
+        @for (filter of state.activeFilters(); track filter.field) {
+        <moz-tag
+          [type]="filter.removable ? 'removable' : 'informative'"
+          size="s"
+          [id]="'filter-' + filter.field"
+          (removeTag)="onRemoveFilter(filter.field)"
+          >{{ filter.label }}</moz-tag
+        >
+        }
+        <button type="button" class="moz-grid__tag-action-btn" (click)="onRemoveAllFilters()">
+          Remove all
+        </button>
+      </div>
       }
       <ng-content select="[mozGridFilterTags]" />
 
@@ -9893,13 +10958,12 @@ class MozGridComponent {
 
         <!-- Footer: pagination or infinite scroll loading indicator -->
         @if (showPagination()) {
-          <moz-grid-footer
-            [pageSizeOptions]="pageSizeOptions()"
-            (pageChange)="pageChange.emit($event)"
-          />
-        }
-        @if (showInfiniteScrollLoader()) {
-          <moz-grid-loading-indicator />
+        <moz-grid-footer
+          [pageSizeOptions]="pageSizeOptions()"
+          (pageChange)="pageChange.emit($event)"
+        />
+        } @if (showInfiniteScrollLoader()) {
+        <moz-grid-loading-indicator />
         }
 
         <!-- Bulk selection action bar -->
@@ -9912,7 +10976,7 @@ class MozGridComponent {
         />
       </div>
     </div>
-  `, isInline: true, styles: [":host{display:block;height:100%}.moz-grid-wrapper{display:flex;flex-direction:column;font-family:var(--font-family-primary);height:100%;min-height:0;gap:16px}.moz-grid-wrapper--fullscreen{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999;background:var(--color-background-primary)}.moz-grid{display:flex;flex-direction:column;border-radius:var(--border-radius-l);overflow:hidden;background:var(--color-background-primary);flex:1;min-height:0;position:relative;box-shadow:0 0 6px #cdd4d8}.moz-grid:focus{outline:none}.moz-grid--loading{opacity:.6;pointer-events:none}.moz-grid__toolbar{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;min-height:48px;gap:var(--spacing-s, 8px)}.moz-grid__toolbar-left,.moz-grid__toolbar-right{display:flex;align-items:center;gap:var(--spacing-xs, 4px)}.moz-grid__selection-banner{display:flex;align-items:center;gap:var(--spacing-s, 8px);flex:1;justify-content:center;border-radius:var(--border-radius-s);border:1px solid var(--Border-Primary, #cdd4d8);background:var(--Neutral-Grey-000, #fff)}.moz-grid__selection-text{font-size:var(--font-size-s, 14px);color:var(--color-text-primary);white-space:nowrap}.moz-grid__selection-link{padding:0;border:none;background:transparent;color:var(--color-background-accent-inverse);font-size:var(--font-size-s, 14px);font-weight:600;cursor:pointer;white-space:nowrap;text-decoration:underline}.moz-grid__selection-link:hover{color:var(--color-primary-dark, #1557b0)}.moz-grid__tag-bar{display:flex;align-items:center;flex-wrap:wrap;gap:var(--spacing-xs, 4px);padding:var(--spacing-xxs, 2px) var(--spacing-s, 8px);flex-shrink:0}.moz-grid__tag-bar-label{width:100%;font-size:var(--font-size-xs, 12px);text-transform:uppercase;white-space:nowrap;color:var(--text-icon-tertiary);font-size:var(--Typography-Font-size-Body-XS, 12px);font-weight:400}.moz-grid__tag-action-btn{padding:2px 8px;border:none;background:transparent;color:var(--color-background-accent-inverse);font-size:var(--font-size-xs, 12px);font-weight:600;cursor:pointer}.moz-grid__tag-action-btn:hover{text-decoration:underline}.moz-grid__group-tag-btn{display:inline-flex;align-items:center;gap:2px;padding:0;border:none;background:transparent;cursor:pointer;font:inherit;color:inherit;line-height:1}.moz-grid__group-tag-btn ::ng-deep svg{fill:#fff!important;width:16px;height:16px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MozGridHeaderComponent, selector: "moz-grid-header", inputs: ["showCheckbox", "showExpand", "reorderable"], outputs: ["sortClick", "menuAction", "resizeStart", "selectAllToggle", "columnReorder"] }, { kind: "component", type: MozGridBodyComponent, selector: "moz-grid-body", inputs: ["showCheckbox", "showExpand", "detailTemplate"], outputs: ["cellEdit", "cellEditCancel", "rowSelectionToggle", "groupToggle"] }, { kind: "component", type: MozGridFooterComponent, selector: "moz-grid-footer", inputs: ["pageSizeOptions"], outputs: ["pageChange"] }, { kind: "component", type: MozGridLoadingIndicatorComponent, selector: "moz-grid-loading-indicator" }, { kind: "component", type: MozGridSelectionBarComponent, selector: "moz-grid-selection-bar", outputs: ["editClick", "copyClick", "pasteClick", "deleteClick", "exportClick"] }, { kind: "component", type: MozTagComponent, selector: "moz-tag", inputs: ["type", "size", "id", "name", "disabled", "contextualisedNumber", "removableLabel"], outputs: ["removeTag"] }, { kind: "component", type: MozIconButtonComponent, selector: "moz-icon-button", inputs: ["id", "appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"], outputs: ["activated"] }, { kind: "component", type: ViewGridX420, selector: "ViewGridX420", inputs: ["hostClass"] }, { kind: "component", type: Filter20, selector: "Filter20", inputs: ["hostClass"] }, { kind: "component", type: Settings20, selector: "Settings20", inputs: ["hostClass"] }, { kind: "component", type: FullscreenEnter20, selector: "FullscreenEnter20", inputs: ["hostClass"] }, { kind: "component", type: FullscreenExit20, selector: "FullscreenExit20", inputs: ["hostClass"] }, { kind: "component", type: Download20, selector: "Download20", inputs: ["hostClass"] }, { kind: "component", type: ChevronUp20, selector: "ChevronUp20", inputs: ["hostClass"] }, { kind: "component", type: ChevronDown20, selector: "ChevronDown20", inputs: ["hostClass"] }, { kind: "component", type: MozButtonComponent, selector: "button[moz-button]", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "iconPosition", "type", "isLoading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;height:100%}.moz-grid-wrapper{display:flex;flex-direction:column;font-family:var(--font-family-primary);height:100%;min-height:0;gap:16px}.moz-grid-wrapper--fullscreen{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999;background:var(--color-background-primary)}.moz-grid{display:flex;flex-direction:column;border-radius:var(--border-radius-l);overflow:hidden;background:var(--color-background-primary);flex:1;min-height:0;position:relative;box-shadow:0 0 6px #cdd4d8}.moz-grid:focus{outline:none}.moz-grid--loading{opacity:.6;pointer-events:none}.moz-grid__toolbar{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;min-height:48px;gap:var(--spacing-s, 8px)}.moz-grid__toolbar-left,.moz-grid__toolbar-right{display:flex;align-items:center;gap:var(--spacing-xs, 4px)}.moz-grid__selection-banner{display:flex;align-items:center;gap:var(--spacing-s, 8px);flex:1;justify-content:center;border-radius:var(--border-radius-s);border:1px solid var(--Border-Primary, #cdd4d8);background:var(--Neutral-Grey-000, #fff)}.moz-grid__selection-text{font-size:var(--font-size-s, 14px);color:var(--color-text-primary);white-space:nowrap}.moz-grid__selection-link{padding:0;border:none;background:transparent;color:var(--color-background-accent-inverse);font-size:var(--font-size-s, 14px);font-weight:600;cursor:pointer;white-space:nowrap;text-decoration:underline}.moz-grid__selection-link:hover{color:var(--color-primary-dark, #1557b0)}.moz-grid__tag-bar{display:flex;align-items:center;flex-wrap:wrap;gap:var(--spacing-xs, 4px);padding:var(--spacing-xxs, 2px) var(--spacing-s, 8px);flex-shrink:0}.moz-grid__tag-bar-label{width:100%;font-size:var(--font-size-xs, 12px);text-transform:uppercase;white-space:nowrap;color:var(--text-icon-tertiary);font-size:var(--Typography-Font-size-Body-XS, 12px);font-weight:400}.moz-grid__tag-action-btn{padding:2px 8px;border:none;background:transparent;color:var(--color-background-accent-inverse);font-size:var(--font-size-xs, 12px);font-weight:600;cursor:pointer}.moz-grid__tag-action-btn:hover{text-decoration:underline}.moz-grid__group-tag-btn{display:inline-flex;align-items:center;gap:2px;padding:0;border:none;background:transparent;cursor:pointer;font:inherit;color:inherit;line-height:1}.moz-grid__group-tag-btn ::ng-deep svg{fill:#fff!important;width:16px;height:16px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MozGridHeaderComponent, selector: "moz-grid-header", inputs: ["showCheckbox", "showExpand", "reorderable"], outputs: ["sortClick", "menuAction", "resizeStart", "selectAllToggle", "columnReorder"] }, { kind: "component", type: MozGridBodyComponent, selector: "moz-grid-body", inputs: ["showCheckbox", "showExpand", "detailTemplate"], outputs: ["cellEdit", "cellEditCancel", "rowSelectionToggle", "groupToggle"] }, { kind: "component", type: MozGridFooterComponent, selector: "moz-grid-footer", inputs: ["pageSizeOptions"], outputs: ["pageChange"] }, { kind: "component", type: MozGridLoadingIndicatorComponent, selector: "moz-grid-loading-indicator" }, { kind: "component", type: MozGridSelectionBarComponent, selector: "moz-grid-selection-bar", outputs: ["editClick", "copyClick", "pasteClick", "deleteClick", "exportClick"] }, { kind: "component", type: MozTagComponent, selector: "moz-tag", inputs: ["type", "size", "id", "name", "disabled", "contextualisedNumber", "removableLabel"], outputs: ["removeTag"] }, { kind: "component", type: MozIconButtonComponent, selector: "moz-icon-button", inputs: ["id", "appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"], outputs: ["activated"] }, { kind: "component", type: ViewGridX420, selector: "ViewGridX420", inputs: ["hostClass"] }, { kind: "component", type: Filter20, selector: "Filter20", inputs: ["hostClass"] }, { kind: "component", type: Settings20, selector: "Settings20", inputs: ["hostClass"] }, { kind: "component", type: FullscreenEnter20, selector: "FullscreenEnter20", inputs: ["hostClass"] }, { kind: "component", type: FullscreenExit20, selector: "FullscreenExit20", inputs: ["hostClass"] }, { kind: "component", type: Download20, selector: "Download20", inputs: ["hostClass"] }, { kind: "component", type: ChevronUp20, selector: "ChevronUp20", inputs: ["hostClass"] }, { kind: "component", type: ChevronDown20, selector: "ChevronDown20", inputs: ["hostClass"] }, { kind: "component", type: Keyboard20, selector: "Keyboard20", inputs: ["hostClass"] }, { kind: "component", type: MozButtonComponent, selector: "button[moz-button]", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "iconPosition", "type", "isLoading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MozGridComponent, decorators: [{
             type: Component,
@@ -9925,6 +10989,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         RowSelectionEngine,
                         CellSelectionEngine,
                         KeyboardEngine,
+                        ClipboardEngine,
+                        HistoryEngine,
                         GroupEngine,
                         FilterEngine,
                         ColumnReorderEngine,
@@ -9955,6 +11021,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         Download20,
                         ChevronUp20,
                         ChevronDown20,
+                        Keyboard20,
                         MozButtonComponent,
                     ], template: `
     <div class="moz-grid-wrapper" [class.moz-grid-wrapper--fullscreen]="isFullscreen()">
@@ -9962,30 +11029,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
       <div class="moz-grid__toolbar">
         <div class="moz-grid__toolbar-left">
           @if (fullscreen()) {
-            <moz-icon-button
-              id="grid-fullscreen"
-              [ghost]="true"
-              size="s"
-              [ariaLabel]="isFullscreen() ? 'Exit fullscreen' : 'Fullscreen'"
-              (activated)="toggleFullscreen()"
-            >
-              @if (isFullscreen()) {
-                <FullscreenExit20 icon />
-              } @else {
-                <FullscreenEnter20 icon />
-              }
-            </moz-icon-button>
-          }
-          @if (exportable()) {
-            <moz-icon-button
-              id="grid-export"
-              [ghost]="true"
-              size="s"
-              ariaLabel="Export CSV"
-              (activated)="onExportCsv()"
-            >
-              <Download20 icon />
-            </moz-icon-button>
+          <moz-icon-button
+            id="grid-fullscreen"
+            [ghost]="true"
+            size="s"
+            [ariaLabel]="isFullscreen() ? 'Exit fullscreen' : 'Fullscreen'"
+            (activated)="toggleFullscreen()"
+          >
+            @if (isFullscreen()) {
+            <FullscreenExit20 icon />
+            } @else {
+            <FullscreenEnter20 icon />
+            }
+          </moz-icon-button>
+          } @if (exportable()) {
+          <moz-icon-button
+            id="grid-export"
+            [ghost]="true"
+            size="s"
+            ariaLabel="Export CSV"
+            (activated)="onExportCsv()"
+          >
+            <Download20 icon />
+          </moz-icon-button>
           }
           <moz-icon-button
             id="grid-filter"
@@ -10014,113 +11080,113 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
           >
             <ViewGridX420 icon />
           </moz-icon-button>
+          <moz-icon-button
+            id="grid-keyboard-shortcuts"
+            size="s"
+            [ghost]="true"
+            ariaLabel="Keyboard shortcuts"
+            (activated)="onKeyboardShortcutsClick()"
+          >
+            <Keyboard20 icon />
+          </moz-icon-button>
           @for (def of toolbarStartDefs(); track def) {
-            <ng-container [ngTemplateOutlet]="def.template" />
+          <ng-container [ngTemplateOutlet]="def.template" />
           }
         </div>
 
         <!-- Selection banner -->
         @if (selectionBannerVisible()) {
-          <div class="moz-grid__selection-banner">
-            <span class="moz-grid__selection-text">
-              {{ rowSelectionEngine.count() }} row(s) selected
-            </span>
-            @if (rowSelectionEngine.count() < selectionTotalCount()) {
-              <button
-                moz-button
-                type="button"
-                [size]="'s'"
-                [ghost]="true"
-                [appearance]="'accent'"
-                (click)="onSelectAllRows()"
-              >
-                Select all {{ selectionTotalCount() }} rows
-              </button>
-            }
-            <button
-              moz-button
-              type="button"
-              [size]="'s'"
-              [ghost]="true"
-              (click)="onClearSelection()"
-            >
-              Clear
-            </button>
-          </div>
+        <div class="moz-grid__selection-banner">
+          <span class="moz-grid__selection-text">
+            {{ rowSelectionEngine.count() }} row(s) selected
+          </span>
+          @if (rowSelectionEngine.count() < selectionTotalCount()) {
+          <button
+            moz-button
+            type="button"
+            [size]="'s'"
+            [ghost]="true"
+            [appearance]="'accent'"
+            (click)="onSelectAllRows()"
+          >
+            Select all {{ selectionTotalCount() }} rows
+          </button>
+          }
+          <button moz-button type="button" [size]="'s'" [ghost]="true" (click)="onClearSelection()">
+            Clear
+          </button>
+        </div>
         }
 
         <div class="moz-grid__toolbar-right">
           @for (def of toolbarEndDefs(); track def) {
-            <ng-container [ngTemplateOutlet]="def.template" />
+          <ng-container [ngTemplateOutlet]="def.template" />
           }
         </div>
       </div>
 
       <!-- Tag bars (outside .moz-grid) -->
       @if (state.groupColumns().length > 0) {
-        <div class="moz-grid__tag-bar">
-          <span class="moz-grid__tag-bar-label">GROUPED BY</span>
-          @for (entry of state.groupColumns(); track entry.field) {
-            <div>
-              <moz-tag
-                type="removable"
-                size="s"
-                [id]="'group-' + entry.field"
-                (removeTag)="onRemoveGroup(entry.field)"
-              >
-                <button
-                  type="button"
-                  class="moz-grid__group-tag-btn"
-                  (click)="onToggleGroupSort(entry.field)"
-                >
-                  {{ getColumnLabel(entry.field) }}
-                  @if (entry.sortDirection === 'asc') {
-                    <ChevronUp20 />
-                  } @else {
-                    <ChevronDown20 />
-                  }
-                </button>
-              </moz-tag>
-            </div>
-          }
-        </div>
-      }
-      @if (hasHiddenColumns()) {
-        <div class="moz-grid__tag-bar">
-          <span class="moz-grid__tag-bar-label">HIDDEN COLUMNS</span>
-          @for (col of hiddenColumnsList(); track col.field) {
-            <moz-tag
-              type="removable"
-              size="s"
-              [id]="'hidden-' + col.field"
-              removableLabel="Restore"
-              (removeTag)="onRestoreColumn(col.field)"
-              >{{ col.label }}</moz-tag
+      <div class="moz-grid__tag-bar">
+        <span class="moz-grid__tag-bar-label">GROUPED BY</span>
+        @for (entry of state.groupColumns(); track entry.field) {
+        <div>
+          <moz-tag
+            type="removable"
+            size="s"
+            [id]="'group-' + entry.field"
+            (removeTag)="onRemoveGroup(entry.field)"
+          >
+            <button
+              type="button"
+              class="moz-grid__group-tag-btn"
+              (click)="onToggleGroupSort(entry.field)"
             >
-          }
-          @if (hiddenColumnsList().length > 1) {
-            <button type="button" class="moz-grid__tag-action-btn" (click)="onRestoreAllColumns()">
-              Restore all
+              {{ getColumnLabel(entry.field) }}
+              @if (entry.sortDirection === 'asc') {
+              <ChevronUp20 />
+              } @else {
+              <ChevronDown20 />
+              }
             </button>
-          }
-        </div>
-      }
-      @if (state.activeFilters().length > 0) {
-        <div class="moz-grid__tag-bar">
-          <span class="moz-grid__tag-bar-label">FILTERED BY</span>
-          @for (filter of state.activeFilters(); track filter.field) {
-            <moz-tag
-              [type]="filter.removable ? 'removable' : 'informative'"
-              size="s"
-              [id]="'filter-' + filter.field"
-              (removeTag)="onRemoveFilter(filter.field)"
-              >{{ filter.label }}</moz-tag
-            >
-          }
-          <button type="button" class="moz-grid__tag-action-btn" (click)="onRemoveAllFilters()">
-            Remove all
-          </button>
+          </moz-tag>
         </div>
+        }
+      </div>
+      } @if (hasHiddenColumns()) {
+      <div class="moz-grid__tag-bar">
+        <span class="moz-grid__tag-bar-label">HIDDEN COLUMNS</span>
+        @for (col of hiddenColumnsList(); track col.field) {
+        <moz-tag
+          type="removable"
+          size="s"
+          [id]="'hidden-' + col.field"
+          removableLabel="Restore"
+          (removeTag)="onRestoreColumn(col.field)"
+          >{{ col.label }}</moz-tag
+        >
+        } @if (hiddenColumnsList().length > 1) {
+        <button type="button" class="moz-grid__tag-action-btn" (click)="onRestoreAllColumns()">
+          Restore all
+        </button>
+        }
+      </div>
+      } @if (state.activeFilters().length > 0) {
+      <div class="moz-grid__tag-bar">
+        <span class="moz-grid__tag-bar-label">FILTERED BY</span>
+        @for (filter of state.activeFilters(); track filter.field) {
+        <moz-tag
+          [type]="filter.removable ? 'removable' : 'informative'"
+          size="s"
+          [id]="'filter-' + filter.field"
+          (removeTag)="onRemoveFilter(filter.field)"
+          >{{ filter.label }}</moz-tag
+        >
+        }
+        <button type="button" class="moz-grid__tag-action-btn" (click)="onRemoveAllFilters()">
+          Remove all
+        </button>
+      </div>
       }
       <ng-content select="[mozGridFilterTags]" />
 
@@ -10157,13 +11223,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 
         <!-- Footer: pagination or infinite scroll loading indicator -->
         @if (showPagination()) {
-          <moz-grid-footer
-            [pageSizeOptions]="pageSizeOptions()"
-            (pageChange)="pageChange.emit($event)"
-          />
-        }
-        @if (showInfiniteScrollLoader()) {
-          <moz-grid-loading-indicator />
+        <moz-grid-footer
+          [pageSizeOptions]="pageSizeOptions()"
+          (pageChange)="pageChange.emit($event)"
+        />
+        } @if (showInfiniteScrollLoader()) {
+        <moz-grid-loading-indicator />
         }
 
         <!-- Bulk selection action bar -->