@mozaic-ds/angular 2.0.42 → 2.0.44

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';
@@ -5458,6 +5458,19 @@ class GridEngine {
             return this.state.totalItems();
         return this.filteredData().length;
     }, ...(ngDevMode ? [{ debugName: "computedTotalItems" }] : /* istanbul ignore next */ []));
+    /**
+     * Resolves a display row index (as emitted via `DisplayRow.index`) to the
+     * actual index in `sourceData()`. When sort/filter/group is active these do
+     * not match, so we look up the display row's data object and search for it
+     * in sourceData. Returns -1 when the display index is unknown.
+     */
+    displayIndexToSourceIndex(displayIndex) {
+        const rows = this.displayRows();
+        const row = rows.find((r) => r.type === 'data' && r.index === displayIndex);
+        if (!row || row.type !== 'data')
+            return -1;
+        return this.state.sourceData().indexOf(row.data);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: GridEngine, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: GridEngine });
 }
@@ -5527,7 +5540,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             type: Injectable
         }] });
 
-const PASTE_SKIP$1 = Symbol('PASTE_SKIP');
+const PASTE_SKIP = 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
@@ -5535,8 +5548,23 @@ const PASTE_SKIP$1 = Symbol('PASTE_SKIP');
  */
 class ClipboardEngine {
     state = inject(GridStateManager);
+    gridEngine = inject(GridEngine);
     /** Derived by components (marching-ants outline). */
     cutRange = computed(() => this.state.cutSource(), ...(ngDevMode ? [{ debugName: "cutRange" }] : /* istanbul ignore next */ []));
+    /**
+     * Maps every display row index inside `range` to its actual sourceData
+     * index. Unknown indices (e.g. outside the current page) are skipped so
+     * callers can safely iterate only over rows that exist in sourceData.
+     */
+    resolveRangeSourceIndices(range) {
+        const out = [];
+        for (let r = range.start.row; r <= range.end.row; r++) {
+            const srcIdx = this.gridEngine.displayIndexToSourceIndex(r);
+            if (srcIdx >= 0)
+                out.push(srcIdx);
+        }
+        return out;
+    }
     markCut(range) {
         this.state.cutSource.set(range);
     }
@@ -5550,15 +5578,19 @@ class ClipboardEngine {
         const cols = this.state.visibleColumns();
         const defMap = this.state.columnDefMap();
         const changes = [];
+        const sourceIndices = this.resolveRangeSourceIndices(range);
+        if (sourceIndices.length < 2)
+            return [];
+        const [sourceIdx, ...targetIndices] = sourceIndices;
         this.state.sourceData.update((data) => {
             const updated = [...data];
-            const sourceRow = updated[range.start.row];
+            const sourceRow = updated[sourceIdx];
             if (!sourceRow)
                 return updated;
-            for (let r = range.start.row + 1; r <= range.end.row; r++) {
-                if (!updated[r])
+            for (const targetIdx of targetIndices) {
+                if (!updated[targetIdx])
                     continue;
-                const rowCopy = { ...updated[r] };
+                const rowCopy = { ...updated[targetIdx] };
                 let changed = false;
                 for (let c = range.start.col; c <= range.end.col; c++) {
                     const field = cols[c]?.field;
@@ -5570,18 +5602,18 @@ class ClipboardEngine {
                     const sourceValue = def.valueGetter
                         ? def.valueGetter(sourceRow)
                         : sourceRow[field];
-                    const coerced = this.coerceAndValidate(field, sourceValue, updated[r]);
-                    if (coerced === PASTE_SKIP$1)
+                    const coerced = this.coerceAndValidate(field, sourceValue, updated[targetIdx]);
+                    if (coerced === PASTE_SKIP)
                         continue;
-                    const before = updated[r][field];
+                    const before = updated[targetIdx][field];
                     if (before === coerced)
                         continue;
                     rowCopy[field] = coerced;
-                    changes.push({ rowIndex: r, field, before, after: coerced });
+                    changes.push({ rowIndex: targetIdx, field, before, after: coerced });
                     changed = true;
                 }
                 if (changed)
-                    updated[r] = rowCopy;
+                    updated[targetIdx] = rowCopy;
             }
             return updated;
         });
@@ -5600,10 +5632,11 @@ class ClipboardEngine {
         if (!sourceDef)
             return [];
         const changes = [];
+        const sourceIndices = this.resolveRangeSourceIndices(range);
         this.state.sourceData.update((data) => {
             const updated = [...data];
-            for (let r = range.start.row; r <= range.end.row; r++) {
-                const row = updated[r];
+            for (const sourceIdx of sourceIndices) {
+                const row = updated[sourceIdx];
                 if (!row)
                     continue;
                 const sourceValue = sourceDef.valueGetter
@@ -5619,17 +5652,17 @@ class ClipboardEngine {
                     if (!def?.editable)
                         continue;
                     const coerced = this.coerceAndValidate(field, sourceValue, row);
-                    if (coerced === PASTE_SKIP$1)
+                    if (coerced === PASTE_SKIP)
                         continue;
                     const before = row[field];
                     if (before === coerced)
                         continue;
                     rowCopy[field] = coerced;
-                    changes.push({ rowIndex: r, field, before, after: coerced });
+                    changes.push({ rowIndex: sourceIdx, field, before, after: coerced });
                     changed = true;
                 }
                 if (changed)
-                    updated[r] = rowCopy;
+                    updated[sourceIdx] = rowCopy;
             }
             return updated;
         });
@@ -5640,10 +5673,11 @@ class ClipboardEngine {
         const cols = this.state.visibleColumns();
         const defMap = this.state.columnDefMap();
         const changes = [];
+        const sourceIndices = this.resolveRangeSourceIndices(range);
         this.state.sourceData.update((data) => {
             const updated = [...data];
-            for (let r = range.start.row; r <= range.end.row; r++) {
-                const row = updated[r];
+            for (const sourceIdx of sourceIndices) {
+                const row = updated[sourceIdx];
                 if (!row)
                     continue;
                 const rowCopy = { ...row };
@@ -5656,17 +5690,17 @@ class ClipboardEngine {
                     if (!def?.editable)
                         continue;
                     const coerced = this.coerceAndValidate(field, value, row);
-                    if (coerced === PASTE_SKIP$1)
+                    if (coerced === PASTE_SKIP)
                         continue;
                     const before = row[field];
                     if (before === coerced)
                         continue;
                     rowCopy[field] = coerced;
-                    changes.push({ rowIndex: r, field, before, after: coerced });
+                    changes.push({ rowIndex: sourceIdx, field, before, after: coerced });
                     changed = true;
                 }
                 if (changed)
-                    updated[r] = rowCopy;
+                    updated[sourceIdx] = rowCopy;
             }
             return updated;
         });
@@ -5677,10 +5711,11 @@ class ClipboardEngine {
         const cols = this.state.visibleColumns();
         const defMap = this.state.columnDefMap();
         const changes = [];
+        const sourceIndices = this.resolveRangeSourceIndices(range);
         this.state.sourceData.update((data) => {
             const updated = [...data];
-            for (let r = range.start.row; r <= range.end.row; r++) {
-                const row = updated[r];
+            for (const sourceIdx of sourceIndices) {
+                const row = updated[sourceIdx];
                 if (!row)
                     continue;
                 const rowCopy = { ...row };
@@ -5693,17 +5728,17 @@ class ClipboardEngine {
                     if (!def?.editable)
                         continue;
                     const coerced = this.coerceAndValidate(field, null, row);
-                    if (coerced === PASTE_SKIP$1)
+                    if (coerced === PASTE_SKIP)
                         continue;
                     const before = row[field];
                     if (before === coerced)
                         continue;
                     rowCopy[field] = coerced;
-                    changes.push({ rowIndex: r, field, before, after: coerced });
+                    changes.push({ rowIndex: sourceIdx, field, before, after: coerced });
                     changed = true;
                 }
                 if (changed)
-                    updated[r] = rowCopy;
+                    updated[sourceIdx] = rowCopy;
             }
             return updated;
         });
@@ -5716,10 +5751,11 @@ class ClipboardEngine {
         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];
+                const targetDisplayRow = range.start.row + ri;
+                const sourceIdx = this.gridEngine.displayIndexToSourceIndex(targetDisplayRow);
+                if (sourceIdx < 0)
+                    continue;
+                const row = updated[sourceIdx];
                 if (!row)
                     continue;
                 const rowCopy = { ...row };
@@ -5732,17 +5768,17 @@ class ClipboardEngine {
                     if (!field)
                         continue;
                     const coerced = this.coerceAndValidate(field, pasteRows[ri][ci], row);
-                    if (coerced === PASTE_SKIP$1)
+                    if (coerced === PASTE_SKIP)
                         continue;
                     const before = row[field];
                     if (before === coerced)
                         continue;
                     rowCopy[field] = coerced;
-                    changes.push({ rowIndex: targetRow, field, before, after: coerced });
+                    changes.push({ rowIndex: sourceIdx, field, before, after: coerced });
                     changed = true;
                 }
                 if (changed)
-                    updated[targetRow] = rowCopy;
+                    updated[sourceIdx] = rowCopy;
             }
             return updated;
         });
@@ -5785,7 +5821,7 @@ class ClipboardEngine {
     coerceAndValidate(field, rawValue, row) {
         const def = this.state.columnDefMap().get(field);
         if (!def?.editable)
-            return PASTE_SKIP$1;
+            return PASTE_SKIP;
         const editorType = def.cellEditor;
         if (rawValue === null) {
             let clearValue;
@@ -5802,7 +5838,7 @@ class ClipboardEngine {
             if (def.cellEditorValidator) {
                 const result = def.cellEditorValidator(clearValue, row);
                 if (result === false || typeof result === 'string')
-                    return PASTE_SKIP$1;
+                    return PASTE_SKIP;
             }
             return clearValue;
         }
@@ -5810,7 +5846,7 @@ class ClipboardEngine {
         if (editorType === 'number') {
             const num = Number(rawValue);
             if (isNaN(num))
-                return PASTE_SKIP$1;
+                return PASTE_SKIP;
             value = num;
         }
         else if (editorType === 'checkbox') {
@@ -5821,19 +5857,19 @@ class ClipboardEngine {
                 value = false;
             }
             else {
-                return PASTE_SKIP$1;
+                return PASTE_SKIP;
             }
         }
         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;
+                return PASTE_SKIP;
             value = rawValue;
         }
         if (def.cellEditorValidator) {
             const result = def.cellEditorValidator(value, row);
             if (result === false || typeof result === 'string')
-                return PASTE_SKIP$1;
+                return PASTE_SKIP;
         }
         return value;
     }
@@ -6006,6 +6042,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 class InlineEditEngine {
     state = inject(GridStateManager);
     history = inject(HistoryEngine);
+    gridEngine = inject(GridEngine);
     startEdit(rowIndex, field) {
         const defMap = this.state.columnDefMap();
         const def = defMap.get(field);
@@ -6014,7 +6051,8 @@ class InlineEditEngine {
         const colIndex = this.state.visibleColumns().findIndex((c) => c.field === field);
         if (colIndex < 0)
             return;
-        const row = this.state.sourceData()[rowIndex];
+        const sourceIndex = this.gridEngine.displayIndexToSourceIndex(rowIndex);
+        const row = sourceIndex >= 0 ? this.state.sourceData()[sourceIndex] : undefined;
         if (!row)
             return;
         const value = def.valueGetter ? def.valueGetter(row) : row[field];
@@ -6039,7 +6077,8 @@ class InlineEditEngine {
         const colIndex = this.state.visibleColumns().findIndex((c) => c.field === field);
         if (colIndex < 0)
             return;
-        const row = this.state.sourceData()[rowIndex];
+        const sourceIndex = this.gridEngine.displayIndexToSourceIndex(rowIndex);
+        const row = sourceIndex >= 0 ? this.state.sourceData()[sourceIndex] : undefined;
         if (!row)
             return;
         const currentValue = def.valueGetter
@@ -6086,7 +6125,10 @@ class InlineEditEngine {
         if (!field)
             return null;
         const def = this.state.columnDefMap().get(field);
-        let row = this.state.sourceData()[rowIndex];
+        const sourceIndex = this.gridEngine.displayIndexToSourceIndex(rowIndex);
+        if (sourceIndex < 0)
+            return null;
+        let row = this.state.sourceData()[sourceIndex];
         if (!row)
             return null;
         // Validation
@@ -6107,26 +6149,25 @@ class InlineEditEngine {
                 return null;
             }
         }
-        // In client mode, update data immutably so signals detect the change
-        if (this.state.mode() === 'client') {
-            this.state.sourceData.update((data) => {
-                const updated = [...data];
-                updated[rowIndex] = { ...updated[rowIndex], [field]: editState.draftValue };
-                return updated;
-            });
-            // Re-read the updated row for the event
-            row = this.state.sourceData()[rowIndex];
-        }
+        // Always update data immutably so signals detect the change, regardless
+        // of client/server mode. Consumers can still re-fetch/override via output.
+        this.state.sourceData.update((data) => {
+            const updated = [...data];
+            updated[sourceIndex] = { ...updated[sourceIndex], [field]: editState.draftValue };
+            return updated;
+        });
+        // Re-read the updated row for the event
+        row = this.state.sourceData()[sourceIndex];
         const event = {
             row,
-            rowIndex,
+            rowIndex: sourceIndex,
             field,
             oldValue: editState.originalValue,
             newValue: editState.draftValue,
         };
-        if (this.state.mode() === 'client' && event.oldValue !== event.newValue) {
+        if (event.oldValue !== event.newValue) {
             this.history.record('edit', [
-                { rowIndex, field, before: event.oldValue, after: event.newValue },
+                { rowIndex: sourceIndex, field, before: event.oldValue, after: event.newValue },
             ]);
         }
         this.state.cellEditState.set({
@@ -6182,7 +6223,13 @@ class RowSelectionEngine {
     engine = inject(GridEngine);
     selectedIds = computed(() => this.state.selectedRowIds(), ...(ngDevMode ? [{ debugName: "selectedIds" }] : /* istanbul ignore next */ []));
     excludedIds = computed(() => this.state.excludedRowIds(), ...(ngDevMode ? [{ debugName: "excludedIds" }] : /* istanbul ignore next */ []));
-    lastToggledIndex = signal(-1, ...(ngDevMode ? [{ debugName: "lastToggledIndex" }] : /* istanbul ignore next */ []));
+    /**
+     * Anchor row for shift-click range selection. We track the row object
+     * (not its index) so the anchor stays valid across grouping, sorting and
+     * filtering — where display indices shift without the underlying row
+     * changing.
+     */
+    lastToggledRow = signal(null, ...(ngDevMode ? [{ debugName: "lastToggledRow" }] : /* istanbul ignore next */ []));
     count = computed(() => {
         const mode = this.state.selectAllMode();
         if (mode === 'all') {
@@ -6208,23 +6255,41 @@ class RowSelectionEngine {
         const pageSelected = pageData.filter((row) => this.isRowSelected(row)).length;
         return pageSelected > 0 && pageSelected < pageData.length;
     }, ...(ngDevMode ? [{ debugName: "isIndeterminate" }] : /* istanbul ignore next */ []));
-    selectRowRange(fromIndex, toIndex) {
+    /**
+     * Extends the selection from the last-toggled row (the anchor) to `endRow`,
+     * resolving positions by object identity against the currently paginated
+     * data. This is robust to grouping / sorting / filtering because we don't
+     * rely on numeric indices, and works across any visible page slice.
+     */
+    selectRowRangeToRow(endRow) {
+        const anchor = this.lastToggledRow();
+        if (!anchor) {
+            this.toggleRow(endRow);
+            this.lastToggledRow.set(endRow);
+            return;
+        }
         const pageData = this.engine.paginatedData();
-        const start = Math.min(fromIndex, toIndex);
-        const end = Math.max(fromIndex, toIndex);
+        const anchorIdx = pageData.indexOf(anchor);
+        const endIdx = pageData.indexOf(endRow);
+        if (anchorIdx < 0 || endIdx < 0) {
+            // Anchor left the visible page — fall back to a plain toggle
+            this.toggleRow(endRow);
+            this.lastToggledRow.set(endRow);
+            return;
+        }
+        const start = Math.min(anchorIdx, endIdx);
+        const end = Math.max(anchorIdx, endIdx);
         this.state.selectedRowIds.update((ids) => {
             const next = new Set(ids);
             for (let i = start; i <= end; i++) {
-                if (i >= 0 && i < pageData.length) {
-                    next.add(this.getRowId(pageData[i]));
-                }
+                next.add(this.getRowId(pageData[i]));
             }
             return next;
         });
         if (this.state.selectAllMode() === 'none') {
             this.state.selectAllMode.set('page');
         }
-        this.lastToggledIndex.set(toIndex);
+        this.lastToggledRow.set(endRow);
     }
     toggleRow(row) {
         const id = this.getRowId(row);
@@ -8110,13 +8175,6 @@ class MozGridHeaderCellComponent {
         if (def.sortable !== false) {
             items.push({ id: 'sort-asc', icon: ChevronUp20, label: 'Sort A → Z' }, { id: 'sort-desc', icon: ChevronDown20, label: 'Sort Z → A' });
         }
-        if (def.filterable) {
-            items.push({
-                id: 'filter-column',
-                label: 'Filter in this column',
-                divider: items.length > 0,
-            });
-        }
         if (def.groupable) {
             items.push({
                 id: 'group-column',
@@ -8151,11 +8209,6 @@ class MozGridHeaderCellComponent {
                 divider: items.length > 0,
             });
         }
-        items.push({
-            id: 'toggle-column-search',
-            label: colState.searchVisible ? 'Hide search by column' : 'Show search by column',
-            divider: def.hideable === false && items.length > 0,
-        });
         return items;
     }, ...(ngDevMode ? [{ debugName: "menuItems" }] : /* istanbul ignore next */ []));
     onHeaderClick(event) {
@@ -8252,11 +8305,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"] }] } });
 
 /**
@@ -8669,6 +8722,7 @@ class MozGridCellComponent {
     cellSelectionEngine = inject(CellSelectionEngine);
     validationEngine = inject(CellValidationEngine);
     clipboard = inject(ClipboardEngine);
+    gridEngine = inject(GridEngine);
     elRef = inject((ElementRef));
     preEditWidth = null;
     constructor() {
@@ -8784,7 +8838,15 @@ class MozGridCellComponent {
         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 */ []));
+    cellError = computed(() => {
+        // Validation errors are keyed by sourceData index, but `rowIndex()` is a
+        // display/paginated index. Resolve to the source index so errors show on
+        // the right cells when sort / filter / grouping is active.
+        const sourceIndex = this.gridEngine.displayIndexToSourceIndex(this.rowIndex());
+        if (sourceIndex < 0)
+            return null;
+        return this.validationEngine.getCellError(sourceIndex, this.def().field);
+    }, ...(ngDevMode ? [{ debugName: "cellError" }] : /* istanbul ignore next */ []));
     onCellClick(event) {
         // Shift+click: extend range from current focused cell to this cell
         if (event.shiftKey) {
@@ -8888,7 +8950,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--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;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--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:-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:1px solid var(--Status-Border-Error, #ef5f5c);outline-offset:-2px;z-index:1;border-radius:4px}.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,
@@ -8904,8 +8966,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--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;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--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:-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:1px solid var(--Status-Border-Error, #ef5f5c);outline-offset:-2px;z-index:1;border-radius:4px}.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 {
@@ -8945,12 +9006,12 @@ class MozGridRowComponent {
     }
     onCheckboxClick(event) {
         event.stopPropagation();
-        if (event.shiftKey && this.rowSelection.lastToggledIndex() >= 0) {
-            this.rowSelection.selectRowRange(this.rowSelection.lastToggledIndex(), this.rowIndex());
+        if (event.shiftKey && this.rowSelection.lastToggledRow() !== null) {
+            this.rowSelection.selectRowRangeToRow(this.row());
         }
         else {
             this.rowSelection.toggleRow(this.row());
-            this.rowSelection.lastToggledIndex.set(this.rowIndex());
+            this.rowSelection.lastToggledRow.set(this.row());
         }
         this.rowSelectionToggle.emit();
     }
@@ -8993,11 +9054,11 @@ class MozGridGroupRowComponent {
         return String(this.groupRow().value ?? '');
     }, ...(ngDevMode ? [{ debugName: "groupValue" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MozGridGroupRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: MozGridGroupRowComponent, isStandalone: true, selector: "moz-grid-group-row", inputs: { groupRow: { classPropertyName: "groupRow", publicName: "groupRow", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { toggleExpand: "toggleExpand" }, ngImport: i0, template: "<div\n  class=\"grid-group-row\"\n  role=\"row\"\n  [style.padding-left.px]=\"groupRow().depth * 24 + 16\"\n  (click)=\"toggleExpand.emit(groupRow().groupKey)\"\n>\n  <span\n    class=\"grid-group-row__toggle\"\n    [class.grid-group-row__toggle--expanded]=\"groupRow().expanded\"\n  >\n    <ChevronRight20 />\n  </span>\n  <div class=\"grid-group-row__info\">\n    <span class=\"grid-group-row__field\">{{ fieldLabel() }}</span>\n    <span class=\"grid-group-row__value\">{{ groupValue() }}</span>\n  </div>\n  <span class=\"grid-group-row__count\">{{ groupRow().count }}</span>\n</div>\n", styles: [":host{display:block;position:sticky;left:0;overflow:hidden;box-sizing:border-box}.grid-group-row{display:flex;align-items:center;gap:var(--spacing-s, 8px);height:73px;background:var(--color-background-secondary);border-bottom:1px solid var(--color-border-primary);cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box}.grid-group-row:hover{background:var(--color-background-tertiary, #f0f0f0)}.grid-group-row__toggle{display:flex;align-items:center;color:var(--color-text-secondary);flex-shrink:0;transition:transform .2s ease}.grid-group-row__toggle--expanded{transform:rotate(90deg)}.grid-group-row__info{display:flex;flex-direction:column;gap:2px;min-width:0}.grid-group-row__field{font-size:var(--font-size-xs, 12px);font-weight:500;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px}.grid-group-row__value{font-size:var(--font-size-l, 18px);font-weight:700;color:var(--color-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.grid-group-row__count{margin-left:auto;align-self:center;font-size:var(--font-size-s, 14px);color:var(--color-text-secondary);font-weight:400;padding-right:16px}\n"], dependencies: [{ kind: "component", type: ChevronRight20, selector: "ChevronRight20", inputs: ["hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: MozGridGroupRowComponent, isStandalone: true, selector: "moz-grid-group-row", inputs: { groupRow: { classPropertyName: "groupRow", publicName: "groupRow", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { toggleExpand: "toggleExpand" }, ngImport: i0, template: "<div\n  class=\"grid-group-row\"\n  role=\"row\"\n  [style.padding-left.px]=\"groupRow().depth * 24 + 16\"\n  (click)=\"toggleExpand.emit(groupRow().groupKey)\"\n>\n  <span\n    class=\"grid-group-row__toggle\"\n    [class.grid-group-row__toggle--expanded]=\"groupRow().expanded\"\n  >\n    <ChevronRight20 />\n  </span>\n  <div class=\"grid-group-row__info\">\n    <span class=\"grid-group-row__field\">{{ fieldLabel() }}</span>\n    <span class=\"grid-group-row__value\">{{ groupValue() }}</span>\n  </div>\n  <span class=\"grid-group-row__count\">{{ groupRow().count }}</span>\n</div>\n", styles: [":host{display:block;position:sticky;left:0;overflow:hidden;box-sizing:border-box}.grid-group-row{display:flex;align-items:center;gap:var(--spacing-s, 8px);height:73px;background:var(--color-background-secondary);border-bottom:1px solid var(--color-border-primary);cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box}.grid-group-row:hover{background:var(--color-background-tertiary, #f0f0f0)}.grid-group-row__toggle{display:flex;align-items:center;color:var(--color-text-secondary);flex-shrink:0;transition:transform .2s ease}.grid-group-row__toggle--expanded{transform:rotate(90deg)}.grid-group-row__info{display:flex;flex-direction:column;gap:2px;min-width:0}.grid-group-row__field{font-size:var(--font-size-xs, 12px);font-weight:500;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px}.grid-group-row__value{font-size:var(--font-size-l, 18px);font-weight:700;color:var(--color-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.grid-group-row__count{align-self:center;font-size:var(--font-size-s, 14px);color:var(--color-text-secondary);font-weight:400;padding-right:16px;padding-left:12px}\n"], dependencies: [{ kind: "component", type: ChevronRight20, selector: "ChevronRight20", inputs: ["hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MozGridGroupRowComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'moz-grid-group-row', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ChevronRight20], template: "<div\n  class=\"grid-group-row\"\n  role=\"row\"\n  [style.padding-left.px]=\"groupRow().depth * 24 + 16\"\n  (click)=\"toggleExpand.emit(groupRow().groupKey)\"\n>\n  <span\n    class=\"grid-group-row__toggle\"\n    [class.grid-group-row__toggle--expanded]=\"groupRow().expanded\"\n  >\n    <ChevronRight20 />\n  </span>\n  <div class=\"grid-group-row__info\">\n    <span class=\"grid-group-row__field\">{{ fieldLabel() }}</span>\n    <span class=\"grid-group-row__value\">{{ groupValue() }}</span>\n  </div>\n  <span class=\"grid-group-row__count\">{{ groupRow().count }}</span>\n</div>\n", styles: [":host{display:block;position:sticky;left:0;overflow:hidden;box-sizing:border-box}.grid-group-row{display:flex;align-items:center;gap:var(--spacing-s, 8px);height:73px;background:var(--color-background-secondary);border-bottom:1px solid var(--color-border-primary);cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box}.grid-group-row:hover{background:var(--color-background-tertiary, #f0f0f0)}.grid-group-row__toggle{display:flex;align-items:center;color:var(--color-text-secondary);flex-shrink:0;transition:transform .2s ease}.grid-group-row__toggle--expanded{transform:rotate(90deg)}.grid-group-row__info{display:flex;flex-direction:column;gap:2px;min-width:0}.grid-group-row__field{font-size:var(--font-size-xs, 12px);font-weight:500;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px}.grid-group-row__value{font-size:var(--font-size-l, 18px);font-weight:700;color:var(--color-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.grid-group-row__count{margin-left:auto;align-self:center;font-size:var(--font-size-s, 14px);color:var(--color-text-secondary);font-weight:400;padding-right:16px}\n"] }]
+            args: [{ selector: 'moz-grid-group-row', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ChevronRight20], template: "<div\n  class=\"grid-group-row\"\n  role=\"row\"\n  [style.padding-left.px]=\"groupRow().depth * 24 + 16\"\n  (click)=\"toggleExpand.emit(groupRow().groupKey)\"\n>\n  <span\n    class=\"grid-group-row__toggle\"\n    [class.grid-group-row__toggle--expanded]=\"groupRow().expanded\"\n  >\n    <ChevronRight20 />\n  </span>\n  <div class=\"grid-group-row__info\">\n    <span class=\"grid-group-row__field\">{{ fieldLabel() }}</span>\n    <span class=\"grid-group-row__value\">{{ groupValue() }}</span>\n  </div>\n  <span class=\"grid-group-row__count\">{{ groupRow().count }}</span>\n</div>\n", styles: [":host{display:block;position:sticky;left:0;overflow:hidden;box-sizing:border-box}.grid-group-row{display:flex;align-items:center;gap:var(--spacing-s, 8px);height:73px;background:var(--color-background-secondary);border-bottom:1px solid var(--color-border-primary);cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box}.grid-group-row:hover{background:var(--color-background-tertiary, #f0f0f0)}.grid-group-row__toggle{display:flex;align-items:center;color:var(--color-text-secondary);flex-shrink:0;transition:transform .2s ease}.grid-group-row__toggle--expanded{transform:rotate(90deg)}.grid-group-row__info{display:flex;flex-direction:column;gap:2px;min-width:0}.grid-group-row__field{font-size:var(--font-size-xs, 12px);font-weight:500;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px}.grid-group-row__value{font-size:var(--font-size-l, 18px);font-weight:700;color:var(--color-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.grid-group-row__count{align-self:center;font-size:var(--font-size-s, 14px);color:var(--color-text-secondary);font-weight:400;padding-right:16px;padding-left:12px}\n"] }]
         }], propDecorators: { groupRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupRow", required: true }] }], toggleExpand: [{ type: i0.Output, args: ["toggleExpand"] }] } });
 
 class MozGridDetailRowComponent {
@@ -9318,7 +9379,7 @@ class GridSettingsDrawerComponent {
         this.searchQuery.set('');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: GridSettingsDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: GridSettingsDrawerComponent, isStandalone: true, selector: "moz-grid-settings-drawer", ngImport: i0, template: "@switch (screen()) { @case ('main') {\n<div class=\"settings-list\">\n  <button type=\"button\" class=\"settings-list__item\" (click)=\"goTo('density')\">\n    <div class=\"settings-list__item-text\">\n      <span class=\"settings-list__item-title\">Data density</span>\n      <span class=\"settings-list__item-subtitle\">{{ densityLabel() }}</span>\n    </div>\n    <ChevronRight20 />\n  </button>\n  <button type=\"button\" class=\"settings-list__item\" (click)=\"goTo('columns')\">\n    <div class=\"settings-list__item-text\">\n      <span class=\"settings-list__item-title\">Display columns</span>\n      <span class=\"settings-list__item-subtitle\">{{ columnsLabel() }}</span>\n    </div>\n    <ChevronRight20 />\n  </button>\n</div>\n} @case ('density') {\n<div class=\"settings-density\">\n  <label class=\"settings-density__label\">Data density</label>\n  <moz-select\n    name=\"density\"\n    [options]=\"densityOptions\"\n    [ngModel]=\"draftDensity()\"\n    (ngModelChange)=\"draftDensity.set($event)\"\n  />\n</div>\n} @case ('columns') {\n<div class=\"settings-columns\">\n  <input\n    class=\"settings-columns__search\"\n    type=\"text\"\n    placeholder=\"Find a column\"\n    [value]=\"searchQuery()\"\n    (input)=\"onSearchInput($event)\"\n    aria-label=\"Search columns\"\n  />\n  <div class=\"settings-columns__list\" cdkDropList (cdkDropListDropped)=\"onColumnDrop($event)\">\n    @for (col of filteredColumns(); track col.field) {\n    <div class=\"settings-columns__item\" cdkDrag>\n      <div class=\"settings-columns__item-left\">\n        <span class=\"settings-columns__drag-handle\" cdkDragHandle>\n          <Drag20 />\n        </span>\n        <span class=\"settings-columns__item-label\">{{ col.headerName }}</span>\n      </div>\n      <moz-toggle\n        [id]=\"'col-toggle-' + col.field\"\n        [ngModel]=\"col.visible\"\n        (ngModelChange)=\"onColumnToggle(col.field, $event)\"\n      />\n    </div>\n    }\n  </div>\n  <div class=\"settings-columns__bulk-actions\">\n    <button type=\"button\" class=\"settings-columns__bulk-btn\" (click)=\"hideAll()\">\n      Hide all\n    </button>\n    <button type=\"button\" class=\"settings-columns__bulk-btn\" (click)=\"showAll()\">\n      Show all\n    </button>\n  </div>\n</div>\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: [".settings-list{display:flex;flex-direction:column;border:1px solid var(--color-border-primary);border-radius:var(--border-radius-m, 8px);overflow:hidden}.settings-list__item{display:flex;align-items:center;justify-content:space-between;padding:16px;background:var(--color-background-primary);border:none;border-bottom:1px solid var(--color-border-primary);cursor:pointer;text-align:left;width:100%}.settings-list__item:last-child{border-bottom:none}.settings-list__item:hover{background:var(--color-background-secondary)}.settings-list__item-text{display:flex;flex-direction:column;gap:2px}.settings-list__item-title{font-weight:600;font-size:var(--font-size-m, 16px);color:var(--color-text-primary)}.settings-list__item-subtitle{font-size:var(--font-size-s, 14px);color:var(--color-text-secondary)}.settings-density{display:flex;flex-direction:column;gap:8px}.settings-density__label{font-weight:600;font-size:var(--font-size-s, 14px);color:var(--color-text-primary)}.settings-columns{display:flex;flex-direction:column;gap:12px}.settings-columns__search{width:100%;padding:8px 12px;border:1px solid var(--color-border-primary);border-radius:var(--border-radius-s, 4px);font-size:var(--font-size-s, 14px);color:var(--color-text-primary);background:var(--color-background-primary, #fff);box-sizing:border-box}.settings-columns__search::placeholder{color:var(--color-text-secondary)}.settings-columns__search:focus{outline:2px solid var(--color-background-accent-inverse);outline-offset:-1px}.settings-columns__list{display:flex;flex-direction:column}.settings-columns__bulk-actions{display:flex;gap:8px;padding-top:8px;border-top:1px solid var(--color-border-primary)}.settings-columns__bulk-btn{flex:1;padding:8px 12px;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);font-weight:500;color:var(--color-text-primary);cursor:pointer}.settings-columns__bulk-btn:hover{background:var(--color-background-secondary, #f5f5f5)}.settings-columns__item{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--color-border-primary);background:var(--color-background-primary, #fff)}.settings-columns__item:last-child{border-bottom:none}.settings-columns__item-left{display:flex;align-items:center;gap:8px}.settings-columns__drag-handle{display:flex;align-items:center;cursor:grab;color:var(--color-text-secondary)}.settings-columns__drag-handle:active{cursor:grabbing}.settings-columns__item-label{font-size:var(--font-size-m, 16px);color:var(--color-text-primary)}.cdk-drag-preview{display:flex;align-items:center;justify-content:space-between;padding:16px 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"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: MozButtonComponent, selector: "button[moz-button]", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "iconPosition", "type", "isLoading"] }, { kind: "directive", type: MozDrawerFooterDirective, selector: "[mozDrawerFooter]" }, { kind: "component", type: MozSelectComponent, selector: "moz-select", inputs: ["id", "name", "options", "placeholder", "isInvalid", "disabled", "readonly", "size"] }, { kind: "component", type: MozToggleComponent, selector: "moz-toggle", inputs: ["id", "name", "size", "disabled"] }, { kind: "component", type: ChevronRight20, selector: "ChevronRight20", inputs: ["hostClass"] }, { kind: "component", type: Drag20, selector: "Drag20", inputs: ["hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: GridSettingsDrawerComponent, isStandalone: true, selector: "moz-grid-settings-drawer", ngImport: i0, template: "@switch (screen()) { @case ('main') {\n<div class=\"settings-list\">\n  <button type=\"button\" class=\"settings-list__item\" (click)=\"goTo('density')\">\n    <div class=\"settings-list__item-text\">\n      <span class=\"settings-list__item-title\">Data density</span>\n      <span class=\"settings-list__item-subtitle\">{{ densityLabel() }}</span>\n    </div>\n    <ChevronRight20 />\n  </button>\n  <button type=\"button\" class=\"settings-list__item\" (click)=\"goTo('columns')\">\n    <div class=\"settings-list__item-text\">\n      <span class=\"settings-list__item-title\">Display columns</span>\n      <span class=\"settings-list__item-subtitle\">{{ columnsLabel() }}</span>\n    </div>\n    <ChevronRight20 />\n  </button>\n</div>\n} @case ('density') {\n<div class=\"settings-density\">\n  <label class=\"settings-density__label\">Data density</label>\n  <moz-select\n    name=\"density\"\n    [options]=\"densityOptions\"\n    [ngModel]=\"draftDensity()\"\n    (ngModelChange)=\"draftDensity.set($event)\"\n  />\n</div>\n} @case ('columns') {\n<div class=\"settings-columns\">\n  <input\n    class=\"settings-columns__search\"\n    type=\"text\"\n    placeholder=\"Find a column\"\n    [value]=\"searchQuery()\"\n    (input)=\"onSearchInput($event)\"\n    aria-label=\"Search columns\"\n  />\n  <div class=\"settings-columns__list\" cdkDropList (cdkDropListDropped)=\"onColumnDrop($event)\">\n    @for (col of filteredColumns(); track col.field) {\n    <div class=\"settings-columns__item\" cdkDrag>\n      <div class=\"settings-columns__item-left\">\n        <span class=\"settings-columns__drag-handle\" cdkDragHandle>\n          <Drag20 />\n        </span>\n        <span class=\"settings-columns__item-label\">{{ col.headerName }}</span>\n      </div>\n      <moz-toggle\n        [id]=\"'col-toggle-' + col.field\"\n        [ngModel]=\"col.visible\"\n        (ngModelChange)=\"onColumnToggle(col.field, $event)\"\n      />\n    </div>\n    }\n  </div>\n  <div class=\"settings-columns__bulk-actions\">\n    <button type=\"button\" class=\"settings-columns__bulk-btn\" (click)=\"hideAll()\">Hide all</button>\n    <button type=\"button\" class=\"settings-columns__bulk-btn\" (click)=\"showAll()\">Show all</button>\n  </div>\n</div>\n} }\n\n<ng-template mozDrawerFooter>\n  <button moz-button (click)=\"apply()\" [appearance]=\"'accent'\">Apply</button>\n  <button moz-button [outlined]=\"true\" (click)=\"reset()\">Reset</button>\n</ng-template>\n", styles: [".settings-list{display:flex;flex-direction:column;border:1px solid var(--color-border-primary);border-radius:var(--border-radius-m, 8px);overflow:hidden}.settings-list__item{display:flex;align-items:center;justify-content:space-between;padding:16px;background:var(--color-background-primary);border:none;border-bottom:1px solid var(--color-border-primary);cursor:pointer;text-align:left;width:100%}.settings-list__item:last-child{border-bottom:none}.settings-list__item:hover{background:var(--color-background-secondary)}.settings-list__item-text{display:flex;flex-direction:column;gap:2px}.settings-list__item-title{font-weight:600;font-size:var(--font-size-m, 16px);color:var(--color-text-primary)}.settings-list__item-subtitle{font-size:var(--font-size-s, 14px);color:var(--color-text-secondary)}.settings-density{display:flex;flex-direction:column;gap:8px}.settings-density__label{font-weight:600;font-size:var(--font-size-s, 14px);color:var(--color-text-primary)}.settings-columns{display:flex;flex-direction:column;gap:12px}.settings-columns__search{width:100%;padding:8px 12px;border:1px solid var(--color-border-primary);border-radius:var(--border-radius-s, 4px);font-size:var(--font-size-s, 14px);color:var(--color-text-primary);background:var(--color-background-primary, #fff);box-sizing:border-box}.settings-columns__search::placeholder{color:var(--color-text-secondary)}.settings-columns__search:focus{outline:2px solid var(--color-background-accent-inverse);outline-offset:-1px}.settings-columns__list{display:flex;flex-direction:column}.settings-columns__bulk-actions{display:flex;gap:8px;padding-top:8px;border-top:1px solid var(--color-border-primary)}.settings-columns__bulk-btn{flex:1;padding:8px 12px;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);font-weight:500;color:var(--color-text-primary);cursor:pointer}.settings-columns__bulk-btn:hover{background:var(--color-background-secondary, #f5f5f5)}.settings-columns__item{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--color-border-primary);background:var(--color-background-primary, #fff)}.settings-columns__item:last-child{border-bottom:none}.settings-columns__item-left{display:flex;align-items:center;gap:8px}.settings-columns__drag-handle{display:flex;align-items:center;cursor:grab;color:var(--color-text-secondary)}.settings-columns__drag-handle:active{cursor:grabbing}.settings-columns__item-label{font-size:var(--font-size-m, 16px);color:var(--color-text-primary)}.cdk-drag-preview{display:flex;align-items:center;justify-content:space-between;padding:16px 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"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: MozButtonComponent, selector: "button[moz-button]", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "iconPosition", "type", "isLoading"] }, { kind: "directive", type: MozDrawerFooterDirective, selector: "[mozDrawerFooter]" }, { kind: "component", type: MozSelectComponent, selector: "moz-select", inputs: ["id", "name", "options", "placeholder", "isInvalid", "disabled", "readonly", "size"] }, { kind: "component", type: MozToggleComponent, selector: "moz-toggle", inputs: ["id", "name", "size", "disabled"] }, { kind: "component", type: ChevronRight20, selector: "ChevronRight20", inputs: ["hostClass"] }, { kind: "component", type: Drag20, selector: "Drag20", inputs: ["hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: GridSettingsDrawerComponent, decorators: [{
             type: Component,
@@ -9333,7 +9394,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         MozToggleComponent,
                         ChevronRight20,
                         Drag20,
-                    ], template: "@switch (screen()) { @case ('main') {\n<div class=\"settings-list\">\n  <button type=\"button\" class=\"settings-list__item\" (click)=\"goTo('density')\">\n    <div class=\"settings-list__item-text\">\n      <span class=\"settings-list__item-title\">Data density</span>\n      <span class=\"settings-list__item-subtitle\">{{ densityLabel() }}</span>\n    </div>\n    <ChevronRight20 />\n  </button>\n  <button type=\"button\" class=\"settings-list__item\" (click)=\"goTo('columns')\">\n    <div class=\"settings-list__item-text\">\n      <span class=\"settings-list__item-title\">Display columns</span>\n      <span class=\"settings-list__item-subtitle\">{{ columnsLabel() }}</span>\n    </div>\n    <ChevronRight20 />\n  </button>\n</div>\n} @case ('density') {\n<div class=\"settings-density\">\n  <label class=\"settings-density__label\">Data density</label>\n  <moz-select\n    name=\"density\"\n    [options]=\"densityOptions\"\n    [ngModel]=\"draftDensity()\"\n    (ngModelChange)=\"draftDensity.set($event)\"\n  />\n</div>\n} @case ('columns') {\n<div class=\"settings-columns\">\n  <input\n    class=\"settings-columns__search\"\n    type=\"text\"\n    placeholder=\"Find a column\"\n    [value]=\"searchQuery()\"\n    (input)=\"onSearchInput($event)\"\n    aria-label=\"Search columns\"\n  />\n  <div class=\"settings-columns__list\" cdkDropList (cdkDropListDropped)=\"onColumnDrop($event)\">\n    @for (col of filteredColumns(); track col.field) {\n    <div class=\"settings-columns__item\" cdkDrag>\n      <div class=\"settings-columns__item-left\">\n        <span class=\"settings-columns__drag-handle\" cdkDragHandle>\n          <Drag20 />\n        </span>\n        <span class=\"settings-columns__item-label\">{{ col.headerName }}</span>\n      </div>\n      <moz-toggle\n        [id]=\"'col-toggle-' + col.field\"\n        [ngModel]=\"col.visible\"\n        (ngModelChange)=\"onColumnToggle(col.field, $event)\"\n      />\n    </div>\n    }\n  </div>\n  <div class=\"settings-columns__bulk-actions\">\n    <button type=\"button\" class=\"settings-columns__bulk-btn\" (click)=\"hideAll()\">\n      Hide all\n    </button>\n    <button type=\"button\" class=\"settings-columns__bulk-btn\" (click)=\"showAll()\">\n      Show all\n    </button>\n  </div>\n</div>\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: [".settings-list{display:flex;flex-direction:column;border:1px solid var(--color-border-primary);border-radius:var(--border-radius-m, 8px);overflow:hidden}.settings-list__item{display:flex;align-items:center;justify-content:space-between;padding:16px;background:var(--color-background-primary);border:none;border-bottom:1px solid var(--color-border-primary);cursor:pointer;text-align:left;width:100%}.settings-list__item:last-child{border-bottom:none}.settings-list__item:hover{background:var(--color-background-secondary)}.settings-list__item-text{display:flex;flex-direction:column;gap:2px}.settings-list__item-title{font-weight:600;font-size:var(--font-size-m, 16px);color:var(--color-text-primary)}.settings-list__item-subtitle{font-size:var(--font-size-s, 14px);color:var(--color-text-secondary)}.settings-density{display:flex;flex-direction:column;gap:8px}.settings-density__label{font-weight:600;font-size:var(--font-size-s, 14px);color:var(--color-text-primary)}.settings-columns{display:flex;flex-direction:column;gap:12px}.settings-columns__search{width:100%;padding:8px 12px;border:1px solid var(--color-border-primary);border-radius:var(--border-radius-s, 4px);font-size:var(--font-size-s, 14px);color:var(--color-text-primary);background:var(--color-background-primary, #fff);box-sizing:border-box}.settings-columns__search::placeholder{color:var(--color-text-secondary)}.settings-columns__search:focus{outline:2px solid var(--color-background-accent-inverse);outline-offset:-1px}.settings-columns__list{display:flex;flex-direction:column}.settings-columns__bulk-actions{display:flex;gap:8px;padding-top:8px;border-top:1px solid var(--color-border-primary)}.settings-columns__bulk-btn{flex:1;padding:8px 12px;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);font-weight:500;color:var(--color-text-primary);cursor:pointer}.settings-columns__bulk-btn:hover{background:var(--color-background-secondary, #f5f5f5)}.settings-columns__item{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--color-border-primary);background:var(--color-background-primary, #fff)}.settings-columns__item:last-child{border-bottom:none}.settings-columns__item-left{display:flex;align-items:center;gap:8px}.settings-columns__drag-handle{display:flex;align-items:center;cursor:grab;color:var(--color-text-secondary)}.settings-columns__drag-handle:active{cursor:grabbing}.settings-columns__item-label{font-size:var(--font-size-m, 16px);color:var(--color-text-primary)}.cdk-drag-preview{display:flex;align-items:center;justify-content:space-between;padding:16px 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"] }]
+                    ], template: "@switch (screen()) { @case ('main') {\n<div class=\"settings-list\">\n  <button type=\"button\" class=\"settings-list__item\" (click)=\"goTo('density')\">\n    <div class=\"settings-list__item-text\">\n      <span class=\"settings-list__item-title\">Data density</span>\n      <span class=\"settings-list__item-subtitle\">{{ densityLabel() }}</span>\n    </div>\n    <ChevronRight20 />\n  </button>\n  <button type=\"button\" class=\"settings-list__item\" (click)=\"goTo('columns')\">\n    <div class=\"settings-list__item-text\">\n      <span class=\"settings-list__item-title\">Display columns</span>\n      <span class=\"settings-list__item-subtitle\">{{ columnsLabel() }}</span>\n    </div>\n    <ChevronRight20 />\n  </button>\n</div>\n} @case ('density') {\n<div class=\"settings-density\">\n  <label class=\"settings-density__label\">Data density</label>\n  <moz-select\n    name=\"density\"\n    [options]=\"densityOptions\"\n    [ngModel]=\"draftDensity()\"\n    (ngModelChange)=\"draftDensity.set($event)\"\n  />\n</div>\n} @case ('columns') {\n<div class=\"settings-columns\">\n  <input\n    class=\"settings-columns__search\"\n    type=\"text\"\n    placeholder=\"Find a column\"\n    [value]=\"searchQuery()\"\n    (input)=\"onSearchInput($event)\"\n    aria-label=\"Search columns\"\n  />\n  <div class=\"settings-columns__list\" cdkDropList (cdkDropListDropped)=\"onColumnDrop($event)\">\n    @for (col of filteredColumns(); track col.field) {\n    <div class=\"settings-columns__item\" cdkDrag>\n      <div class=\"settings-columns__item-left\">\n        <span class=\"settings-columns__drag-handle\" cdkDragHandle>\n          <Drag20 />\n        </span>\n        <span class=\"settings-columns__item-label\">{{ col.headerName }}</span>\n      </div>\n      <moz-toggle\n        [id]=\"'col-toggle-' + col.field\"\n        [ngModel]=\"col.visible\"\n        (ngModelChange)=\"onColumnToggle(col.field, $event)\"\n      />\n    </div>\n    }\n  </div>\n  <div class=\"settings-columns__bulk-actions\">\n    <button type=\"button\" class=\"settings-columns__bulk-btn\" (click)=\"hideAll()\">Hide all</button>\n    <button type=\"button\" class=\"settings-columns__bulk-btn\" (click)=\"showAll()\">Show all</button>\n  </div>\n</div>\n} }\n\n<ng-template mozDrawerFooter>\n  <button moz-button (click)=\"apply()\" [appearance]=\"'accent'\">Apply</button>\n  <button moz-button [outlined]=\"true\" (click)=\"reset()\">Reset</button>\n</ng-template>\n", styles: [".settings-list{display:flex;flex-direction:column;border:1px solid var(--color-border-primary);border-radius:var(--border-radius-m, 8px);overflow:hidden}.settings-list__item{display:flex;align-items:center;justify-content:space-between;padding:16px;background:var(--color-background-primary);border:none;border-bottom:1px solid var(--color-border-primary);cursor:pointer;text-align:left;width:100%}.settings-list__item:last-child{border-bottom:none}.settings-list__item:hover{background:var(--color-background-secondary)}.settings-list__item-text{display:flex;flex-direction:column;gap:2px}.settings-list__item-title{font-weight:600;font-size:var(--font-size-m, 16px);color:var(--color-text-primary)}.settings-list__item-subtitle{font-size:var(--font-size-s, 14px);color:var(--color-text-secondary)}.settings-density{display:flex;flex-direction:column;gap:8px}.settings-density__label{font-weight:600;font-size:var(--font-size-s, 14px);color:var(--color-text-primary)}.settings-columns{display:flex;flex-direction:column;gap:12px}.settings-columns__search{width:100%;padding:8px 12px;border:1px solid var(--color-border-primary);border-radius:var(--border-radius-s, 4px);font-size:var(--font-size-s, 14px);color:var(--color-text-primary);background:var(--color-background-primary, #fff);box-sizing:border-box}.settings-columns__search::placeholder{color:var(--color-text-secondary)}.settings-columns__search:focus{outline:2px solid var(--color-background-accent-inverse);outline-offset:-1px}.settings-columns__list{display:flex;flex-direction:column}.settings-columns__bulk-actions{display:flex;gap:8px;padding-top:8px;border-top:1px solid var(--color-border-primary)}.settings-columns__bulk-btn{flex:1;padding:8px 12px;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);font-weight:500;color:var(--color-text-primary);cursor:pointer}.settings-columns__bulk-btn:hover{background:var(--color-background-secondary, #f5f5f5)}.settings-columns__item{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--color-border-primary);background:var(--color-background-primary, #fff)}.settings-columns__item:last-child{border-bottom:none}.settings-columns__item-left{display:flex;align-items:center;gap:8px}.settings-columns__drag-handle{display:flex;align-items:center;cursor:grab;color:var(--color-text-secondary)}.settings-columns__drag-handle:active{cursor:grabbing}.settings-columns__item-label{font-size:var(--font-size-m, 16px);color:var(--color-text-primary)}.cdk-drag-preview{display:flex;align-items:center;justify-content:space-between;padding:16px 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"] }]
         }], ctorParameters: () => [] });
 
 class GridGroupDrawerComponent {
@@ -9385,7 +9446,7 @@ class GridGroupDrawerComponent {
         this.draftGrouped.set([]);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: GridGroupDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: GridGroupDrawerComponent, isStandalone: true, selector: "moz-grid-group-drawer", ngImport: i0, 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"], dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: MozButtonComponent, selector: "button[moz-button]", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "iconPosition", "type", "isLoading"] }, { kind: "directive", type: MozDrawerFooterDirective, selector: "[mozDrawerFooter]" }, { kind: "component", type: Drag20, selector: "Drag20", inputs: ["hostClass"] }, { kind: "component", type: Cross20, selector: "Cross20", inputs: ["hostClass"] }, { kind: "component", type: ListAdd20, selector: "ListAdd20", inputs: ["hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: GridGroupDrawerComponent, isStandalone: true, selector: "moz-grid-group-drawer", ngImport: i0, 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()\" [appearance]=\"'accent'\">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"], dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: MozButtonComponent, selector: "button[moz-button]", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "iconPosition", "type", "isLoading"] }, { kind: "directive", type: MozDrawerFooterDirective, selector: "[mozDrawerFooter]" }, { kind: "component", type: Drag20, selector: "Drag20", inputs: ["hostClass"] }, { kind: "component", type: Cross20, selector: "Cross20", inputs: ["hostClass"] }, { kind: "component", type: ListAdd20, selector: "ListAdd20", inputs: ["hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: GridGroupDrawerComponent, decorators: [{
             type: Component,
@@ -9398,7 +9459,86 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         Drag20,
                         Cross20,
                         ListAdd20,
-                    ], 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"] }]
+                    ], 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()\" [appearance]=\"'accent'\">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 {
@@ -9491,7 +9631,9 @@ class MozGridComponent {
     constructor() {
         this.keyboardEngine.registerActions({
             copy: () => this.onBulkCopy(),
-            paste: () => { void this.onBulkPaste(); },
+            paste: () => {
+                void this.onBulkPaste();
+            },
             cut: () => this.onCutShortcut(),
             deleteRange: () => this.onBulkDelete(),
             undo: () => this.onUndo(),
@@ -9852,7 +9994,9 @@ class MozGridComponent {
             // 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 def = this.state
+                    .columnDefMap()
+                    .get(this.state.visibleColumns()[editState.editingCell?.col ?? -1]?.field ?? '');
                 const editorType = def?.cellEditor ?? 'text';
                 if (editorType === 'text') {
                     event.preventDefault();
@@ -9931,8 +10075,6 @@ class MozGridComponent {
         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;
@@ -9943,8 +10085,6 @@ class MozGridComponent {
         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;
@@ -10039,37 +10179,35 @@ class MozGridComponent {
         const affected = maxRow - minRow;
         if (affected === 0)
             return;
-        if (this.state.mode() === 'client') {
-            // Build a map of display index → sourceData index for the fill range
-            const indexMap = new Map();
-            for (let r = minRow; r <= maxRow; r++) {
-                if (r === anchor.row)
+        // Build a map of display index → sourceData index for the fill range
+        const indexMap = new Map();
+        for (let r = minRow; r <= maxRow; r++) {
+            if (r === anchor.row)
+                continue;
+            const srcIdx = this.displayIndexToSourceIndex(r);
+            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 srcIdx = this.displayIndexToSourceIndex(r);
-                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);
+                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 });
             }
-            this.clipboardEngine.clearCut();
+            return updated;
+        });
+        if (changes.length > 0) {
+            this.historyEngine.record('fill', changes);
         }
+        this.clipboardEngine.clearCut();
         this.fillDown.emit({
             sourceCell: anchor,
             sourceValue,
@@ -10108,29 +10246,27 @@ 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];
-                if (!src)
-                    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;
+        const changes = [];
+        this.state.sourceData.update((d) => {
+            const updated = [...d];
+            const src = updated[anchorSourceIdx];
+            if (!src)
                 return updated;
-            });
-            if (changes.length > 0) {
-                this.historyEngine.record('fill', changes);
+            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 });
             }
-            this.clipboardEngine.clearCut();
+            updated[anchorSourceIdx] = rowCopy;
+            return updated;
+        });
+        if (changes.length > 0) {
+            this.historyEngine.record('fill', changes);
         }
+        this.clipboardEngine.clearCut();
         this.fillDown.emit({
             sourceCell: anchor,
             sourceValue,
@@ -10232,6 +10368,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,
@@ -10371,8 +10511,9 @@ class MozGridComponent {
             try {
                 const text = await navigator.clipboard.readText();
                 const pasteRows = text.split('\n').map((line) => line.split('\t'));
-                if (this.state.mode() === 'client') {
-                    this.applyPasteToSelectedRows(event.selectedRows, pasteRows);
+                const changes = this.applyPasteToSelectedRows(event.selectedRows, pasteRows);
+                if (changes.length > 0) {
+                    this.historyEngine.record('paste', changes);
                 }
                 this.bulkPaste.emit({
                     range: null,
@@ -10404,18 +10545,16 @@ class MozGridComponent {
                     col: Math.min(focused.col + (rows[0]?.length ?? 1) - 1, cols.length - 1),
                 },
             };
-            if (this.state.mode() === 'client') {
-                // 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();
+            // 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,
                 data: rows,
@@ -10455,9 +10594,12 @@ class MozGridComponent {
     onBulkDelete() {
         if (this.state.activeSelectionMode() === 'rows') {
             const event = this.rowSelectionEngine.getSelectionEvent();
-            if (this.state.mode() === 'client') {
-                this.deleteSelectedRows(event.selectedRows);
+            const changes = this.deleteSelectedRows(event.selectedRows);
+            if (changes.length > 0) {
+                this.historyEngine.record('delete', changes);
             }
+            // Intentionally keep the selection active so users can chain actions
+            // (undo, then paste, etc.) — the overlay only closes via the ✕ button.
             this.bulkDelete.emit({
                 range: null,
                 cellCount: event.count,
@@ -10478,13 +10620,11 @@ class MozGridComponent {
             return;
         const rows = range.end.row - range.start.row + 1;
         const colCount = range.end.col - range.start.col + 1;
-        if (this.state.mode() === 'client') {
-            const changes = this.clipboardEngine.clearRange(range);
-            if (changes.length > 0) {
-                this.historyEngine.record('delete', changes);
-            }
-            this.clipboardEngine.clearCut();
+        const changes = this.clipboardEngine.clearRange(range);
+        if (changes.length > 0) {
+            this.historyEngine.record('delete', changes);
         }
+        this.clipboardEngine.clearCut();
         this.bulkDelete.emit({
             range,
             cellCount: rows * colCount,
@@ -10537,6 +10677,7 @@ class MozGridComponent {
     applyPasteToSelectedRows(selectedRows, pasteRows) {
         const cols = this.state.visibleColumns();
         const idField = this.state.rowIdField?.() ?? 'id';
+        const changes = [];
         this.state.sourceData.update((data) => {
             const updated = [...data];
             for (let ri = 0; ri < Math.min(selectedRows.length, pasteRows.length); ri++) {
@@ -10552,10 +10693,14 @@ class MozGridComponent {
                     if (!field)
                         continue;
                     const coerced = this.coerceAndValidate(field, pasteRows[ri][ci], updated[dataIndex]);
-                    if (coerced !== PASTE_SKIP) {
-                        rowCopy[field] = coerced;
-                        changed = true;
-                    }
+                    if (coerced === PASTE_SKIP)
+                        continue;
+                    const before = updated[dataIndex][field];
+                    if (before === coerced)
+                        continue;
+                    rowCopy[field] = coerced;
+                    changes.push({ rowIndex: dataIndex, field, before, after: coerced });
+                    changed = true;
                 }
                 if (changed) {
                     updated[dataIndex] = rowCopy;
@@ -10563,10 +10708,12 @@ class MozGridComponent {
             }
             return updated;
         });
+        return changes;
     }
     deleteSelectedRows(selectedRows) {
         const cols = this.state.visibleColumns();
         const idField = this.state.rowIdField?.() ?? 'id';
+        const changes = [];
         this.state.sourceData.update((data) => {
             const updated = [...data];
             for (const selectedRow of selectedRows) {
@@ -10578,10 +10725,14 @@ class MozGridComponent {
                 let changed = false;
                 for (const col of cols) {
                     const coerced = this.coerceAndValidate(col.field, null, updated[dataIndex]);
-                    if (coerced !== PASTE_SKIP) {
-                        rowCopy[col.field] = coerced;
-                        changed = true;
-                    }
+                    if (coerced === PASTE_SKIP)
+                        continue;
+                    const before = updated[dataIndex][col.field];
+                    if (before === coerced)
+                        continue;
+                    rowCopy[col.field] = coerced;
+                    changes.push({ rowIndex: dataIndex, field: col.field, before, after: coerced });
+                    changed = true;
                 }
                 if (changed) {
                     updated[dataIndex] = rowCopy;
@@ -10589,6 +10740,7 @@ class MozGridComponent {
             }
             return updated;
         });
+        return changes;
     }
     coerceAndValidate(field, rawValue, row) {
         const def = this.state.columnDefMap().get(field);
@@ -10678,30 +10830,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"
@@ -10730,113 +10881,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]" />
 
@@ -10873,13 +11024,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 -->
@@ -10892,7 +11042,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,
@@ -10937,6 +11087,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()">
@@ -10944,30 +11095,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"
@@ -10996,113 +11146,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]" />
 
@@ -11139,13 +11289,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 -->
@@ -11160,7 +11309,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
     </div>
   `, 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"] }]
         }], ctorParameters: () => [], propDecorators: { gridBody: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MozGridBodyComponent), { isSignal: true }] }], gridContainer: [{ type: i0.ViewChild, args: ['gridContainer', { isSignal: true }] }], columnDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MozGridColumnDef), { isSignal: true }] }], toolbarDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MozGridToolbarDef), { isSignal: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], rowSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowSelection", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], rowIdField: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowIdField", required: false }] }], detailTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "detailTemplate", required: false }] }], fullscreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullscreen", required: false }] }], reorderable: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderable", required: false }] }], stateKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "stateKey", required: false }] }], exportable: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportable", required: false }] }], horizontalVirtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontalVirtualScroll", required: false }] }], loadingStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingStrategy", required: false }] }], scrollThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollThreshold", required: false }] }], plugins: [{ type: i0.Input, args: [{ isSignal: true, alias: "plugins", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], loadMore: [{ type: i0.Output, args: ["loadMore"] }], cellEdit: [{ type: i0.Output, args: ["cellEdit"] }], cellEditCancel: [{ type: i0.Output, args: ["cellEditCancel"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], cellSelectionChange: [{ type: i0.Output, args: ["cellSelectionChange"] }], groupChange: [{ type: i0.Output, args: ["groupChange"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], bulkEdit: [{ type: i0.Output, args: ["bulkEdit"] }], bulkCopy: [{ type: i0.Output, args: ["bulkCopy"] }], bulkPaste: [{ type: i0.Output, args: ["bulkPaste"] }], bulkDelete: [{ type: i0.Output, args: ["bulkDelete"] }], fillDown: [{ type: i0.Output, args: ["fillDown"] }], settingsChange: [{ type: i0.Output, args: ["settingsChange"] }] } });
-const PASTE_SKIP = Symbol('PASTE_SKIP');
 
 const DEFAULT_GRID_OPTIONS = {
     mode: 'client',