@mozaic-ds/angular 2.0.44 → 2.0.45

package/fesm2022/mozaic-ds-angular.mjs

@@ -1,18 +1,18 @@
 import * as i0 from '@angular/core';
-import { input, computed, ChangeDetectionStrategy, Component, contentChild, ViewEncapsulation, signal, forwardRef, output, ContentChild, viewChild, inject, model, InjectionToken, HostListener, Injector, Injectable, TemplateRef, afterNextRender, Directive, linkedSignal, EnvironmentInjector, createComponent, ChangeDetectorRef, NgZone, viewChildren, EventEmitter, effect, Output, ContentChildren, ApplicationRef, Renderer2, ElementRef, Input, booleanAttribute, contentChildren, DestroyRef } from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, Component, contentChild, ViewEncapsulation, signal, forwardRef, output, ContentChild, viewChild, inject, model, InjectionToken, HostListener, Injector, Injectable, TemplateRef, afterNextRender, Directive, linkedSignal, EnvironmentInjector, createComponent, ChangeDetectorRef, NgZone, viewChildren, EventEmitter, effect, Output, ContentChildren, ApplicationRef, Renderer2, ElementRef, Input, booleanAttribute, contentChildren, DestroyRef, untracked } from '@angular/core';
 import { RouterLink, RouterLinkActive, RouterLinkWithHref } from '@angular/router';
 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, Keyboard20, 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, Drag20, ListAdd20, ChevronUp20, Filter20, Settings20, ErrorFilled24, ViewGridX420, 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';
 import parsePhoneNumberFromString, { getCountries, getExampleNumber, isValidPhoneNumber, getCountryCallingCode } from 'libphonenumber-js';
 import examples from 'libphonenumber-js/mobile/examples';
+import { moveItemInArray, CdkDropList, CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
 import * as i1$1 from '@angular/cdk/scrolling';
 import { VIRTUAL_SCROLL_STRATEGY, ScrollingModule } from '@angular/cdk/scrolling';
-import { moveItemInArray, CdkDropList, CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
 import { ComponentHarness, TestKey } from '@angular/cdk/testing';
 
 class MozBreadcrumbComponent {
@@ -4887,8 +4887,11 @@ class GridStateManager {
     groupColumns = signal([], ...(ngDevMode ? [{ debugName: "groupColumns" }] : /* istanbul ignore next */ []));
     expandedGroups = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedGroups" }] : /* istanbul ignore next */ []));
     // --- Filter ---
-    activeFilters = signal([], ...(ngDevMode ? [{ debugName: "activeFilters" }] : /* istanbul ignore next */ []));
-    filterDefs = signal([], ...(ngDevMode ? [{ debugName: "filterDefs" }] : /* istanbul ignore next */ []));
+    /**
+     * Unified filter state: single source of truth for the multi-condition
+     * builder. The tag-bar displays a derived view via `FilterEngine.toLabel()`.
+     */
+    filterModel = signal({ conditions: [] }, ...(ngDevMode ? [{ debugName: "filterModel" }] : /* istanbul ignore next */ []));
     // --- Pagination ---
     pageIndex = signal(0, ...(ngDevMode ? [{ debugName: "pageIndex" }] : /* istanbul ignore next */ []));
     pageSize = signal(20, ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
@@ -5168,87 +5171,257 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             type: Injectable
         }] });
 
+/**
+ * Filter model — multi-condition filter builder with AND/OR combinators.
+ *
+ * Evaluation is left-associative (no operator precedence). Grouped / parenthesised
+ * conditions (`(a AND b) OR c`) are out of scope for the MVP; see docs.
+ */
+/**
+ * Default operator sets per data type. Consumers can restrict the set via
+ * `ColumnDef.filterOperators`.
+ */
+const DEFAULT_OPERATORS = {
+    text: [
+        'contains',
+        'notContains',
+        'equals',
+        'notEquals',
+        'startsWith',
+        'endsWith',
+        'blank',
+        'notBlank',
+    ],
+    number: ['equals', 'notEquals', 'gt', 'gte', 'lt', 'lte', 'between', 'blank', 'notBlank'],
+    date: ['equals', 'notEquals', 'gt', 'gte', 'lt', 'lte', 'between', 'blank', 'notBlank'],
+    set: ['in', 'notIn', 'blank', 'notBlank'],
+    boolean: ['equals', 'blank', 'notBlank'],
+};
+const DEFAULT_OPERATOR_PER_TYPE = {
+    text: 'contains',
+    number: 'equals',
+    date: 'equals',
+    set: 'in',
+    boolean: 'equals',
+};
+/** Human-readable operator labels (used by `toLabel`). */
+const OPERATOR_LABELS = {
+    contains: 'contains',
+    notContains: 'does not contain',
+    equals: 'equals',
+    notEquals: 'does not equal',
+    startsWith: 'starts with',
+    endsWith: 'ends with',
+    gt: '>',
+    gte: '≥',
+    lt: '<',
+    lte: '≤',
+    between: 'between',
+    in: 'in',
+    notIn: 'not in',
+    blank: 'is blank',
+    notBlank: 'is not blank',
+};
+/** Operators that do not require a user-entered value. */
+const VALUELESS_OPERATORS = new Set([
+    'blank',
+    'notBlank',
+]);
+/** Operators that need a secondary value (`between`). */
+const RANGE_OPERATORS = new Set(['between']);
+/** Small helper for generating condition ids without pulling in a uuid dep. */
+function generateConditionId() {
+    return `cond-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+}
+/** True when a condition has enough information to participate in evaluation. */
+function isConditionComplete(condition) {
+    if (!condition.field)
+        return false;
+    if (VALUELESS_OPERATORS.has(condition.operator))
+        return true;
+    const { value, valueTo } = condition.value;
+    if (value == null || value === '')
+        return false;
+    if (RANGE_OPERATORS.has(condition.operator)) {
+        if (valueTo == null || valueTo === '')
+            return false;
+    }
+    return true;
+}
+
 class FilterEngine {
     state = inject(GridStateManager);
-    setFilter(field, value, operator = 'contains') {
-        if (value === '' || value == null) {
-            this.removeFilter(field);
-            return;
-        }
-        const defMap = this.state.columnDefMap();
-        const def = defMap.get(field);
-        const label = `${def?.headerName ?? field}: ${String(value)}`;
-        this.state.activeFilters.update((filters) => {
-            const existing = filters.findIndex((f) => f.field === field);
-            const newFilter = { field, label, value, removable: true };
-            if (existing >= 0) {
-                const next = [...filters];
-                next[existing] = newFilter;
-                return next;
-            }
-            return [...filters, newFilter];
-        });
-        this.state.filterDefs.update((defs) => {
-            const existing = defs.findIndex((d) => d.field === field);
-            const newDef = { field, type: 'text', operator, value };
-            if (existing >= 0) {
-                const next = [...defs];
-                next[existing] = newDef;
+    /** Latest mutation, used by the grid shell to emit `filterChange` once. */
+    lastChange = signal(null, ...(ngDevMode ? [{ debugName: "lastChange" }] : /* istanbul ignore next */ []));
+    conditions = computed(() => this.state.filterModel().conditions, ...(ngDevMode ? [{ debugName: "conditions" }] : /* istanbul ignore next */ []));
+    hasActiveFilters = computed(() => this.conditions().length > 0, ...(ngDevMode ? [{ debugName: "hasActiveFilters" }] : /* istanbul ignore next */ []));
+    lastEvent = this.lastChange.asReadonly();
+    // ------------------------------------------------------------------
+    // Mutations
+    // ------------------------------------------------------------------
+    /** Replaces the whole model in one go. Used by the drawer's Apply button. */
+    setModel(model, reason = 'replace') {
+        this.state.filterModel.set({ conditions: [...model.conditions] });
+        this.state.pageIndex.set(0);
+        this.notify(reason, null);
+    }
+    addCondition(condition) {
+        this.state.filterModel.update((m) => ({
+            conditions: [...m.conditions, condition],
+        }));
+        this.state.pageIndex.set(0);
+        this.notify('add', condition);
+    }
+    updateCondition(id, patch) {
+        let updated = null;
+        this.state.filterModel.update((m) => ({
+            conditions: m.conditions.map((c) => {
+                if (c.id !== id)
+                    return c;
+                const next = { ...c, ...patch, value: { ...c.value, ...(patch.value ?? {}) } };
+                updated = next;
                 return next;
-            }
-            return [...defs, newDef];
+            }),
+        }));
+        this.state.pageIndex.set(0);
+        if (updated)
+            this.notify('update', updated);
+    }
+    removeCondition(id) {
+        const removed = this.state.filterModel().conditions.find((c) => c.id === id) ?? null;
+        this.state.filterModel.update((m) => ({
+            conditions: m.conditions.filter((c) => c.id !== id),
+        }));
+        this.state.pageIndex.set(0);
+        this.notify('remove', removed);
+    }
+    reorderConditions(fromIndex, toIndex) {
+        this.state.filterModel.update((m) => {
+            if (fromIndex === toIndex)
+                return m;
+            const next = [...m.conditions];
+            const [item] = next.splice(fromIndex, 1);
+            if (!item)
+                return m;
+            next.splice(toIndex, 0, item);
+            return { conditions: next };
         });
         this.state.pageIndex.set(0);
+        this.notify('reorder', null);
     }
-    removeFilter(field) {
-        this.state.activeFilters.update((filters) => filters.filter((f) => f.field !== field));
-        this.state.filterDefs.update((defs) => defs.filter((d) => d.field !== field));
+    clearAll() {
+        if (this.state.filterModel().conditions.length === 0)
+            return;
+        this.state.filterModel.set({ conditions: [] });
         this.state.pageIndex.set(0);
+        this.notify('clear', null);
     }
-    clearAllFilters() {
-        this.state.activeFilters.set([]);
-        this.state.filterDefs.set([]);
+    /** Convenience: drop all conditions that target a given field. */
+    removeByField(field) {
+        const before = this.state.filterModel().conditions;
+        const after = before.filter((c) => c.field !== field);
+        if (after.length === before.length)
+            return;
+        this.state.filterModel.set({ conditions: after });
         this.state.pageIndex.set(0);
+        this.notify('replace', null);
     }
+    // ------------------------------------------------------------------
+    // Evaluation
+    // ------------------------------------------------------------------
+    /**
+     * Evaluates the current model against the provided data. In `server` mode,
+     * the grid delegates filtering to the consumer so we return the input as-is.
+     */
     filterData(data) {
-        const defs = this.state.filterDefs();
-        if (defs.length === 0)
+        if (this.state.mode() === 'server')
+            return data;
+        const conditions = this.state.filterModel().conditions.filter(isConditionComplete);
+        if (conditions.length === 0)
             return data;
         const defMap = this.state.columnDefMap();
+        const prepared = conditions.map((c) => ({
+            cond: c,
+            col: defMap.get(c.field),
+            type: resolveFilterType(defMap.get(c.field)),
+        }));
         return data.filter((row) => {
-            return defs.every((filterDef) => {
-                const colDef = defMap.get(filterDef.field);
-                const rawValue = colDef?.valueGetter
-                    ? colDef.valueGetter(row)
-                    : row[filterDef.field];
-                return this.matchFilter(rawValue, filterDef);
-            });
+            let pass = matchOne(row, prepared[0].cond, prepared[0].col, prepared[0].type);
+            for (let i = 1; i < prepared.length; i++) {
+                const step = prepared[i];
+                const result = matchOne(row, step.cond, step.col, step.type);
+                pass = step.cond.combinator === 'and' ? pass && result : pass || result;
+            }
+            return pass;
         });
     }
-    matchFilter(value, filterDef) {
-        const filterValue = filterDef.value;
-        if (filterValue == null || filterValue === '')
-            return true;
-        const strValue = String(value ?? '').toLowerCase();
-        const strFilter = String(filterValue).toLowerCase();
-        switch (filterDef.operator) {
-            case 'contains':
-                return strValue.includes(strFilter);
-            case 'equals':
-                return strValue === strFilter;
-            case 'startsWith':
-                return strValue.startsWith(strFilter);
-            case 'gt':
-                return Number(value) > Number(filterValue);
-            case 'lt':
-                return Number(value) < Number(filterValue);
-            case 'in': {
-                const arr = Array.isArray(filterValue) ? filterValue : [filterValue];
-                return arr.some((v) => String(v).toLowerCase() === strValue);
-            }
-            default:
-                return true;
+    // ------------------------------------------------------------------
+    // Helpers
+    // ------------------------------------------------------------------
+    /** Returns a human-readable label for a condition ("Status equals En stock"). */
+    toLabel(condition) {
+        const def = this.state.columnDefMap().get(condition.field);
+        const col = def?.headerName ?? condition.field;
+        const op = OPERATOR_LABELS[condition.operator] ?? condition.operator;
+        if (VALUELESS_OPERATORS.has(condition.operator)) {
+            return `${col} ${op}`;
+        }
+        const value = formatValue(condition.value.value, def);
+        if (RANGE_OPERATORS.has(condition.operator)) {
+            const to = formatValue(condition.value.valueTo, def);
+            return `${col} ${op} ${value} – ${to}`;
         }
+        return `${col} ${op} ${value}`;
+    }
+    /** Returns the filter data type inferred for a column. */
+    getFilterType(field) {
+        return resolveFilterType(this.state.columnDefMap().get(field));
+    }
+    /**
+     * Builds the column descriptors consumed by the filter builder UI. The
+     * returned list includes only filterable columns.
+     */
+    describeFilterableColumns() {
+        const defs = this.state.columnDefs();
+        return defs.filter((d) => d.filterable && !d.filterTemplate).map((d) => this.describeColumn(d));
+    }
+    describeColumn(def) {
+        const type = resolveFilterType(def);
+        const operators = def.filterOperators && def.filterOperators.length > 0
+            ? def.filterOperators
+            : DEFAULT_OPERATORS[type];
+        const defaultOp = def.defaultFilterOperator ?? DEFAULT_OPERATOR_PER_TYPE[type];
+        return {
+            field: def.field,
+            headerName: def.headerName ?? def.field,
+            filterType: type,
+            operators,
+            defaultOperator: operators.includes(defaultOp) ? defaultOp : operators[0],
+            options: def.filterOptions ?? inferOptionsFromData(this.state.sourceData(), def, type),
+        };
+    }
+    /** Factory for new conditions created by the UI. */
+    makeCondition(field, isFirst, overrides = {}) {
+        const def = this.state.columnDefMap().get(field);
+        const descriptor = def ? this.describeColumn(def) : null;
+        return {
+            id: generateConditionId(),
+            combinator: isFirst ? 'and' : 'and',
+            field,
+            operator: descriptor?.defaultOperator ?? 'contains',
+            value: {},
+            ...overrides,
+        };
+    }
+    // ------------------------------------------------------------------
+    // Internal
+    // ------------------------------------------------------------------
+    notify(reason, condition) {
+        this.lastChange.set({
+            model: { conditions: this.state.filterModel().conditions.slice() },
+            condition,
+            reason,
+        });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FilterEngine, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FilterEngine });
@@ -5256,6 +5429,181 @@ class FilterEngine {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FilterEngine, decorators: [{
             type: Injectable
         }] });
+// --------------------------------------------------------------------
+// Pure helpers
+// --------------------------------------------------------------------
+function resolveFilterType(def) {
+    if (!def)
+        return 'text';
+    if (def.filterType)
+        return def.filterType;
+    switch (def.cellEditor) {
+        case 'number':
+            return 'number';
+        case 'date':
+            return 'date';
+        case 'select':
+            return 'set';
+        case 'checkbox':
+        case 'toggle':
+            return 'boolean';
+        default:
+            return 'text';
+    }
+}
+function matchOne(row, condition, col, type) {
+    const raw = col?.valueGetter
+        ? col.valueGetter(row)
+        : row[condition.field];
+    const predicate = PREDICATES[type]?.[condition.operator];
+    if (!predicate)
+        return true;
+    return predicate(raw, condition.value);
+}
+function formatValue(value, def) {
+    if (value == null || value === '')
+        return '';
+    if (Array.isArray(value)) {
+        return value.map((v) => formatSingleOption(v, def)).join(', ');
+    }
+    return formatSingleOption(value, def);
+}
+function formatSingleOption(value, def) {
+    if (def?.filterOptions) {
+        const opt = def.filterOptions.find((o) => String(o.value) === String(value));
+        if (opt)
+            return String(opt.label);
+    }
+    return String(value);
+}
+function inferOptionsFromData(data, def, type) {
+    if (type !== 'set')
+        return undefined;
+    const seen = new Set();
+    const out = [];
+    for (const row of data) {
+        const v = def.valueGetter ? def.valueGetter(row) : row[def.field];
+        if (v == null)
+            continue;
+        const key = String(v);
+        if (seen.has(key))
+            continue;
+        seen.add(key);
+        out.push({ value: v, label: key });
+        if (out.length >= 200)
+            break;
+    }
+    return out;
+}
+// --------------------------------------------------------------------
+// Predicate table — dispatched by (filterType, operator)
+// --------------------------------------------------------------------
+const textContains = (cell, { value }) => String(cell ?? '')
+    .toLowerCase()
+    .includes(String(value ?? '').toLowerCase());
+const textNotContains = (cell, v) => !textContains(cell, v);
+const textEquals = (cell, { value }) => String(cell ?? '').toLowerCase() === String(value ?? '').toLowerCase();
+const textNotEquals = (cell, v) => !textEquals(cell, v);
+const textStartsWith = (cell, { value }) => String(cell ?? '')
+    .toLowerCase()
+    .startsWith(String(value ?? '').toLowerCase());
+const textEndsWith = (cell, { value }) => String(cell ?? '')
+    .toLowerCase()
+    .endsWith(String(value ?? '').toLowerCase());
+const blank = (cell) => cell == null || cell === '';
+const notBlank = (cell) => !blank(cell, { value: undefined });
+const numEquals = (cell, { value }) => toNum(cell) === toNum(value);
+const numNotEquals = (cell, v) => !numEquals(cell, v);
+const numGt = (cell, { value }) => toNum(cell) > toNum(value);
+const numGte = (cell, { value }) => toNum(cell) >= toNum(value);
+const numLt = (cell, { value }) => toNum(cell) < toNum(value);
+const numLte = (cell, { value }) => toNum(cell) <= toNum(value);
+const numBetween = (cell, { value, valueTo }) => {
+    const n = toNum(cell);
+    return n >= toNum(value) && n <= toNum(valueTo);
+};
+const dateEquals = (cell, { value }) => toTime(cell) === toTime(value);
+const dateNotEquals = (cell, v) => !dateEquals(cell, v);
+const dateGt = (cell, { value }) => toTime(cell) > toTime(value);
+const dateGte = (cell, { value }) => toTime(cell) >= toTime(value);
+const dateLt = (cell, { value }) => toTime(cell) < toTime(value);
+const dateLte = (cell, { value }) => toTime(cell) <= toTime(value);
+const dateBetween = (cell, { value, valueTo }) => {
+    const t = toTime(cell);
+    return t >= toTime(value) && t <= toTime(valueTo);
+};
+const setIn = (cell, { value }) => {
+    const arr = Array.isArray(value) ? value : [value];
+    if (arr.length === 0)
+        return true;
+    return arr.some((v) => String(v) === String(cell));
+};
+const setNotIn = (cell, v) => !setIn(cell, v);
+const boolEquals = (cell, { value }) => {
+    const expected = value === true || value === 'true' || value === 1;
+    const actual = cell === true || cell === 'true' || cell === 1;
+    return expected === actual;
+};
+function toNum(v) {
+    const n = typeof v === 'number' ? v : Number(v);
+    return Number.isFinite(n) ? n : NaN;
+}
+function toTime(v) {
+    if (v instanceof Date)
+        return v.getTime();
+    if (typeof v === 'number')
+        return v;
+    if (typeof v === 'string') {
+        const parsed = Date.parse(v);
+        return Number.isFinite(parsed) ? parsed : NaN;
+    }
+    return NaN;
+}
+const PREDICATES = {
+    text: {
+        contains: textContains,
+        notContains: textNotContains,
+        equals: textEquals,
+        notEquals: textNotEquals,
+        startsWith: textStartsWith,
+        endsWith: textEndsWith,
+        blank,
+        notBlank,
+    },
+    number: {
+        equals: numEquals,
+        notEquals: numNotEquals,
+        gt: numGt,
+        gte: numGte,
+        lt: numLt,
+        lte: numLte,
+        between: numBetween,
+        blank,
+        notBlank,
+    },
+    date: {
+        equals: dateEquals,
+        notEquals: dateNotEquals,
+        gt: dateGt,
+        gte: dateGte,
+        lt: dateLt,
+        lte: dateLte,
+        between: dateBetween,
+        blank,
+        notBlank,
+    },
+    set: {
+        in: setIn,
+        notIn: setNotIn,
+        blank,
+        notBlank,
+    },
+    boolean: {
+        equals: boolEquals,
+        blank,
+        notBlank,
+    },
+};
 
 class GroupEngine {
     state = inject(GridStateManager);
@@ -7737,6 +8085,7 @@ class StatePersistenceEngine {
                 pinned: col.pinned,
             })),
             sorts: this.state.activeSorts(),
+            filters: this.state.filterModel().conditions.map(({ id: _id, ...rest }) => rest),
         };
         try {
             localStorage.setItem(storageKey, JSON.stringify(persisted));
@@ -7780,6 +8129,11 @@ class StatePersistenceEngine {
                         : { ...s, sort: null, sortIndex: null };
                 }));
             }
+            if (persisted.filters?.length) {
+                this.state.filterModel.set({
+                    conditions: persisted.filters.map((f) => ({ ...f, id: generateConditionId() })),
+                });
+            }
             return true;
         }
         catch {
@@ -8147,13 +8501,272 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }], propDecorators: { slot: [{ type: i0.Input, args: [{ isSignal: true, alias: "mozGridToolbarDef", required: false }] }] } });
 
+class MozGridFilterBuilderComponent {
+    model = input.required(...(ngDevMode ? [{ debugName: "model" }] : /* istanbul ignore next */ []));
+    availableColumns = input.required(...(ngDevMode ? [{ debugName: "availableColumns" }] : /* istanbul ignore next */ []));
+    applyMode = input('auto', ...(ngDevMode ? [{ debugName: "applyMode" }] : /* istanbul ignore next */ []));
+    /** Hint: when true, renders a "Show rows" sub-title (used inside the overlay). */
+    showSubtitle = input(true, ...(ngDevMode ? [{ debugName: "showSubtitle" }] : /* istanbul ignore next */ []));
+    modelChange = output();
+    // Draft (what the user sees). Synced from `model` input on change.
+    draft = signal([], ...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const incoming = this.model().conditions;
+            // Avoid clobbering local mutations: only sync when the incoming model
+            // differs by id-set or values from the current draft.
+            const current = untracked(() => this.draft());
+            if (!conditionsEqual(incoming, current)) {
+                this.draft.set(incoming.map((c) => ({ ...c, value: { ...c.value } })));
+            }
+        });
+    }
+    columnsById = computed(() => {
+        const m = new Map();
+        for (const c of this.availableColumns())
+            m.set(c.field, c);
+        return m;
+    }, ...(ngDevMode ? [{ debugName: "columnsById" }] : /* istanbul ignore next */ []));
+    operatorLabels = OPERATOR_LABELS;
+    // ------------------------------------------------------------------
+    // Mutations
+    // ------------------------------------------------------------------
+    addCondition() {
+        const cols = this.availableColumns();
+        if (cols.length === 0)
+            return;
+        const first = cols[0];
+        const isFirst = this.draft().length === 0;
+        const condition = {
+            id: generateConditionId(),
+            combinator: isFirst ? 'and' : 'and',
+            field: first.field,
+            operator: first.defaultOperator,
+            value: {},
+        };
+        this.draft.update((list) => [...list, condition]);
+        this.commit();
+    }
+    removeCondition(id) {
+        this.draft.update((list) => list.filter((c) => c.id !== id));
+        this.commit();
+    }
+    onCombinatorChange(id, combinator) {
+        this.draft.update((list) => list.map((c) => (c.id === id ? { ...c, combinator } : c)));
+        this.commit();
+    }
+    onFieldChange(id, field) {
+        const col = this.columnsById().get(field);
+        this.draft.update((list) => list.map((c) => c.id === id
+            ? {
+                ...c,
+                field,
+                operator: col?.defaultOperator ?? c.operator,
+                value: {},
+            }
+            : c));
+        this.commit();
+    }
+    onOperatorChange(id, operator) {
+        this.draft.update((list) => list.map((c) => (c.id === id ? { ...c, operator, value: resetValueFor(operator, c.value) } : c)));
+        this.commit();
+    }
+    onValueChange(id, patch) {
+        this.draft.update((list) => list.map((c) => c.id === id
+            ? {
+                ...c,
+                value: { ...c.value, ...patch },
+            }
+            : c));
+        this.commit();
+    }
+    onSetValueChange(id, event) {
+        const select = event.target;
+        const values = Array.from(select.selectedOptions).map((o) => o.value);
+        this.onValueChange(id, { value: values });
+    }
+    onDrop(event) {
+        this.draft.update((list) => {
+            const next = [...list];
+            moveItemInArray(next, event.previousIndex, event.currentIndex);
+            return next;
+        });
+        this.commit();
+    }
+    // ------------------------------------------------------------------
+    // Value editor helpers (for the template)
+    // ------------------------------------------------------------------
+    needsValue(op) {
+        return !VALUELESS_OPERATORS.has(op);
+    }
+    needsRange(op) {
+        return RANGE_OPERATORS.has(op);
+    }
+    getSelectedSetValues(condition) {
+        const v = condition.value.value;
+        if (Array.isArray(v))
+            return v.map((x) => String(x));
+        if (v == null || v === '')
+            return [];
+        return [String(v)];
+    }
+    isSetValueSelected(condition, value) {
+        return this.getSelectedSetValues(condition).includes(String(value));
+    }
+    inputTypeFor(op, type) {
+        if (type === 'number')
+            return 'number';
+        if (type === 'date')
+            return 'date';
+        return 'text';
+    }
+    // ------------------------------------------------------------------
+    // Internals
+    // ------------------------------------------------------------------
+    commit() {
+        this.modelChange.emit({ conditions: this.draft().map((c) => ({ ...c, value: { ...c.value } })) });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MozGridFilterBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MozGridFilterBuilderComponent, isStandalone: true, selector: "moz-grid-filter-builder", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, availableColumns: { classPropertyName: "availableColumns", publicName: "availableColumns", isSignal: true, isRequired: true, transformFunction: null }, applyMode: { classPropertyName: "applyMode", publicName: "applyMode", isSignal: true, isRequired: false, transformFunction: null }, showSubtitle: { classPropertyName: "showSubtitle", publicName: "showSubtitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { modelChange: "modelChange" }, ngImport: i0, template: "<div class=\"filter-builder\">\n  @if (showSubtitle()) {\n  <p class=\"filter-builder__subtitle\">Show rows</p>\n  }\n\n  <div class=\"filter-builder__rows\" cdkDropList (cdkDropListDropped)=\"onDrop($event)\">\n    @for (cond of draft(); track cond.id; let idx = $index; let first = $first) {\n    <div class=\"filter-builder__row\" cdkDrag>\n      <!-- Combinator -->\n      <div class=\"filter-builder__combinator\">\n        @if (first) {\n        <span class=\"filter-builder__combinator-label\">Where</span>\n        } @else {\n        <select\n          class=\"filter-builder__select filter-builder__select--combinator\"\n          [value]=\"cond.combinator\"\n          [attr.aria-label]=\"'Combinator for condition ' + (idx + 1)\"\n          (change)=\"onCombinatorChange(cond.id, $any($event.target).value)\"\n        >\n          <option value=\"and\">And</option>\n          <option value=\"or\">Or</option>\n        </select>\n        }\n      </div>\n\n      <!-- Column -->\n      <select\n        class=\"filter-builder__select filter-builder__select--column\"\n        [value]=\"cond.field\"\n        [attr.aria-label]=\"'Column for condition ' + (idx + 1)\"\n        (change)=\"onFieldChange(cond.id, $any($event.target).value)\"\n      >\n        @for (col of availableColumns(); track col.field) {\n        <option [value]=\"col.field\">{{ col.headerName }}</option>\n        }\n      </select>\n\n      <!-- Operator -->\n      <select\n        class=\"filter-builder__select filter-builder__select--operator\"\n        [value]=\"cond.operator\"\n        [attr.aria-label]=\"'Operator for condition ' + (idx + 1)\"\n        (change)=\"onOperatorChange(cond.id, $any($event.target).value)\"\n      >\n        @for (op of columnsById().get(cond.field)?.operators ?? []; track op) {\n        <option [value]=\"op\">{{ operatorLabels[op] }}</option>\n        }\n      </select>\n\n      <!-- Value -->\n      <div class=\"filter-builder__value\">\n        @if (needsValue(cond.operator)) { @let col = columnsById().get(cond.field); @if\n        (col?.filterType === 'set') {\n        <select\n          class=\"filter-builder__select filter-builder__select--set\"\n          multiple\n          size=\"4\"\n          [attr.aria-label]=\"'Values for condition ' + (idx + 1)\"\n          (change)=\"onSetValueChange(cond.id, $event)\"\n        >\n          @for (opt of col?.options ?? []; track $any(opt.value)) {\n          <option [value]=\"opt.value\" [selected]=\"isSetValueSelected(cond, opt.value)\">\n            {{ opt.label }}\n          </option>\n          }\n        </select>\n        } @else if (col?.filterType === 'boolean') {\n        <select\n          class=\"filter-builder__select\"\n          [value]=\"cond.value.value === true ? 'true' : 'false'\"\n          [attr.aria-label]=\"'Value for condition ' + (idx + 1)\"\n          (change)=\"onValueChange(cond.id, { value: $any($event.target).value === 'true' })\"\n        >\n          <option value=\"true\">True</option>\n          <option value=\"false\">False</option>\n        </select>\n        } @else {\n        <input\n          class=\"filter-builder__input\"\n          [type]=\"inputTypeFor(cond.operator, col?.filterType ?? 'text')\"\n          [value]=\"cond.value.value ?? ''\"\n          [attr.aria-label]=\"'Value for condition ' + (idx + 1)\"\n          (input)=\"onValueChange(cond.id, { value: $any($event.target).value })\"\n        />\n        @if (needsRange(cond.operator)) {\n        <span class=\"filter-builder__range-sep\">\u2013</span>\n        <input\n          class=\"filter-builder__input\"\n          [type]=\"inputTypeFor(cond.operator, col?.filterType ?? 'text')\"\n          [value]=\"cond.value.valueTo ?? ''\"\n          [attr.aria-label]=\"'Upper bound for condition ' + (idx + 1)\"\n          (input)=\"onValueChange(cond.id, { valueTo: $any($event.target).value })\"\n        />\n        } } }\n      </div>\n\n      <!-- Delete -->\n      <button\n        type=\"button\"\n        moz-button\n        [ghost]=\"true\"\n        [size]=\"'s'\"\n        [iconPosition]=\"'only'\"\n        [attr.aria-label]=\"'Remove condition ' + (idx + 1)\"\n        (click)=\"removeCondition(cond.id)\"\n      >\n        <Cross20 icon />\n      </button>\n\n      <!-- Drag handle -->\n      <span\n        class=\"filter-builder__drag\"\n        cdkDragHandle\n        [attr.aria-label]=\"'Reorder condition ' + (idx + 1)\"\n      >\n        <Drag20 />\n      </span>\n    </div>\n    }\n  </div>\n\n  <button\n    type=\"button\"\n    class=\"filter-builder__add\"\n    [disabled]=\"availableColumns().length === 0\"\n    (click)=\"addCondition()\"\n  >\n    <ListAdd20 />\n    <span>Add condition</span>\n  </button>\n</div>\n", styles: [":host{display:block;background:var(--Background-Primary, #fff);border:1px solid var(--Border-Primary, #cdd4d8);border-radius:6px;box-shadow:0 4px 16px #0000001f}.filter-builder{display:flex;flex-direction:column;gap:12px;min-width:560px;padding:16px}.filter-builder__subtitle{margin:0;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--Text-Secondary, #555)}.filter-builder__rows{display:flex;flex-direction:column;gap:8px}.filter-builder__row{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--Border-Primary, #e0e0e0);border-radius:6px;background:var(--Background-Primary, #fff)}.filter-builder__row.cdk-drag-preview{box-shadow:0 2px 8px #0000001f}.filter-builder__row.cdk-drag-placeholder{opacity:.3}.filter-builder__combinator{min-width:64px;flex:0 0 64px}.filter-builder__combinator-label{display:inline-block;width:100%;padding:6px 8px;font-weight:600;color:var(--Text-Secondary, #555)}.filter-builder__select,.filter-builder__input{font:inherit;padding:6px 8px;border:1px solid var(--Border-Primary, #ccc);border-radius:4px;background:#fff;min-height:32px;box-sizing:border-box}.filter-builder__select--combinator{width:100%}.filter-builder__select--column,.filter-builder__select--operator{flex:1 1 120px;min-width:0}.filter-builder__select--set{min-width:160px;height:auto}.filter-builder__value{display:flex;align-items:center;gap:4px;flex:1 1 160px;min-width:0}.filter-builder__input{flex:1 1 0;min-width:0}.filter-builder__range-sep{color:var(--Text-Secondary, #777)}.filter-builder__drag{display:inline-flex;cursor:grab;color:var(--Text-Secondary, #777)}.filter-builder__drag:active{cursor:grabbing}.filter-builder__add{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;padding:6px 10px;background:transparent;border:none;color:var(--Status-Standalone-element-Primary, #0071ce);font:inherit;cursor:pointer;border-radius:4px}.filter-builder__add:hover:not([disabled]){background:var(--Background-Secondary, #f4f4f4)}.filter-builder__add[disabled]{cursor:not-allowed;opacity:.5}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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: "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: MozGridFilterBuilderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'moz-grid-filter-builder', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        FormsModule,
+                        CdkDropList,
+                        CdkDrag,
+                        CdkDragHandle,
+                        MozButtonComponent,
+                        Drag20,
+                        Cross20,
+                        ListAdd20,
+                    ], template: "<div class=\"filter-builder\">\n  @if (showSubtitle()) {\n  <p class=\"filter-builder__subtitle\">Show rows</p>\n  }\n\n  <div class=\"filter-builder__rows\" cdkDropList (cdkDropListDropped)=\"onDrop($event)\">\n    @for (cond of draft(); track cond.id; let idx = $index; let first = $first) {\n    <div class=\"filter-builder__row\" cdkDrag>\n      <!-- Combinator -->\n      <div class=\"filter-builder__combinator\">\n        @if (first) {\n        <span class=\"filter-builder__combinator-label\">Where</span>\n        } @else {\n        <select\n          class=\"filter-builder__select filter-builder__select--combinator\"\n          [value]=\"cond.combinator\"\n          [attr.aria-label]=\"'Combinator for condition ' + (idx + 1)\"\n          (change)=\"onCombinatorChange(cond.id, $any($event.target).value)\"\n        >\n          <option value=\"and\">And</option>\n          <option value=\"or\">Or</option>\n        </select>\n        }\n      </div>\n\n      <!-- Column -->\n      <select\n        class=\"filter-builder__select filter-builder__select--column\"\n        [value]=\"cond.field\"\n        [attr.aria-label]=\"'Column for condition ' + (idx + 1)\"\n        (change)=\"onFieldChange(cond.id, $any($event.target).value)\"\n      >\n        @for (col of availableColumns(); track col.field) {\n        <option [value]=\"col.field\">{{ col.headerName }}</option>\n        }\n      </select>\n\n      <!-- Operator -->\n      <select\n        class=\"filter-builder__select filter-builder__select--operator\"\n        [value]=\"cond.operator\"\n        [attr.aria-label]=\"'Operator for condition ' + (idx + 1)\"\n        (change)=\"onOperatorChange(cond.id, $any($event.target).value)\"\n      >\n        @for (op of columnsById().get(cond.field)?.operators ?? []; track op) {\n        <option [value]=\"op\">{{ operatorLabels[op] }}</option>\n        }\n      </select>\n\n      <!-- Value -->\n      <div class=\"filter-builder__value\">\n        @if (needsValue(cond.operator)) { @let col = columnsById().get(cond.field); @if\n        (col?.filterType === 'set') {\n        <select\n          class=\"filter-builder__select filter-builder__select--set\"\n          multiple\n          size=\"4\"\n          [attr.aria-label]=\"'Values for condition ' + (idx + 1)\"\n          (change)=\"onSetValueChange(cond.id, $event)\"\n        >\n          @for (opt of col?.options ?? []; track $any(opt.value)) {\n          <option [value]=\"opt.value\" [selected]=\"isSetValueSelected(cond, opt.value)\">\n            {{ opt.label }}\n          </option>\n          }\n        </select>\n        } @else if (col?.filterType === 'boolean') {\n        <select\n          class=\"filter-builder__select\"\n          [value]=\"cond.value.value === true ? 'true' : 'false'\"\n          [attr.aria-label]=\"'Value for condition ' + (idx + 1)\"\n          (change)=\"onValueChange(cond.id, { value: $any($event.target).value === 'true' })\"\n        >\n          <option value=\"true\">True</option>\n          <option value=\"false\">False</option>\n        </select>\n        } @else {\n        <input\n          class=\"filter-builder__input\"\n          [type]=\"inputTypeFor(cond.operator, col?.filterType ?? 'text')\"\n          [value]=\"cond.value.value ?? ''\"\n          [attr.aria-label]=\"'Value for condition ' + (idx + 1)\"\n          (input)=\"onValueChange(cond.id, { value: $any($event.target).value })\"\n        />\n        @if (needsRange(cond.operator)) {\n        <span class=\"filter-builder__range-sep\">\u2013</span>\n        <input\n          class=\"filter-builder__input\"\n          [type]=\"inputTypeFor(cond.operator, col?.filterType ?? 'text')\"\n          [value]=\"cond.value.valueTo ?? ''\"\n          [attr.aria-label]=\"'Upper bound for condition ' + (idx + 1)\"\n          (input)=\"onValueChange(cond.id, { valueTo: $any($event.target).value })\"\n        />\n        } } }\n      </div>\n\n      <!-- Delete -->\n      <button\n        type=\"button\"\n        moz-button\n        [ghost]=\"true\"\n        [size]=\"'s'\"\n        [iconPosition]=\"'only'\"\n        [attr.aria-label]=\"'Remove condition ' + (idx + 1)\"\n        (click)=\"removeCondition(cond.id)\"\n      >\n        <Cross20 icon />\n      </button>\n\n      <!-- Drag handle -->\n      <span\n        class=\"filter-builder__drag\"\n        cdkDragHandle\n        [attr.aria-label]=\"'Reorder condition ' + (idx + 1)\"\n      >\n        <Drag20 />\n      </span>\n    </div>\n    }\n  </div>\n\n  <button\n    type=\"button\"\n    class=\"filter-builder__add\"\n    [disabled]=\"availableColumns().length === 0\"\n    (click)=\"addCondition()\"\n  >\n    <ListAdd20 />\n    <span>Add condition</span>\n  </button>\n</div>\n", styles: [":host{display:block;background:var(--Background-Primary, #fff);border:1px solid var(--Border-Primary, #cdd4d8);border-radius:6px;box-shadow:0 4px 16px #0000001f}.filter-builder{display:flex;flex-direction:column;gap:12px;min-width:560px;padding:16px}.filter-builder__subtitle{margin:0;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--Text-Secondary, #555)}.filter-builder__rows{display:flex;flex-direction:column;gap:8px}.filter-builder__row{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--Border-Primary, #e0e0e0);border-radius:6px;background:var(--Background-Primary, #fff)}.filter-builder__row.cdk-drag-preview{box-shadow:0 2px 8px #0000001f}.filter-builder__row.cdk-drag-placeholder{opacity:.3}.filter-builder__combinator{min-width:64px;flex:0 0 64px}.filter-builder__combinator-label{display:inline-block;width:100%;padding:6px 8px;font-weight:600;color:var(--Text-Secondary, #555)}.filter-builder__select,.filter-builder__input{font:inherit;padding:6px 8px;border:1px solid var(--Border-Primary, #ccc);border-radius:4px;background:#fff;min-height:32px;box-sizing:border-box}.filter-builder__select--combinator{width:100%}.filter-builder__select--column,.filter-builder__select--operator{flex:1 1 120px;min-width:0}.filter-builder__select--set{min-width:160px;height:auto}.filter-builder__value{display:flex;align-items:center;gap:4px;flex:1 1 160px;min-width:0}.filter-builder__input{flex:1 1 0;min-width:0}.filter-builder__range-sep{color:var(--Text-Secondary, #777)}.filter-builder__drag{display:inline-flex;cursor:grab;color:var(--Text-Secondary, #777)}.filter-builder__drag:active{cursor:grabbing}.filter-builder__add{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;padding:6px 10px;background:transparent;border:none;color:var(--Status-Standalone-element-Primary, #0071ce);font:inherit;cursor:pointer;border-radius:4px}.filter-builder__add:hover:not([disabled]){background:var(--Background-Secondary, #f4f4f4)}.filter-builder__add[disabled]{cursor:not-allowed;opacity:.5}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: true }] }], availableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableColumns", required: true }] }], applyMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "applyMode", required: false }] }], showSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSubtitle", required: false }] }], modelChange: [{ type: i0.Output, args: ["modelChange"] }] } });
+function resetValueFor(op, previous) {
+    if (VALUELESS_OPERATORS.has(op))
+        return {};
+    if (RANGE_OPERATORS.has(op))
+        return { value: previous.value ?? '', valueTo: previous.valueTo ?? '' };
+    return { value: previous.value ?? '' };
+}
+function conditionsEqual(a, b) {
+    if (a.length !== b.length)
+        return false;
+    for (let i = 0; i < a.length; i++) {
+        const ca = a[i];
+        const cb = b[i];
+        if (ca.id !== cb.id ||
+            ca.combinator !== cb.combinator ||
+            ca.field !== cb.field ||
+            ca.operator !== cb.operator ||
+            ca.value.value !== cb.value.value ||
+            ca.value.valueTo !== cb.value.valueTo) {
+            return false;
+        }
+    }
+    return true;
+}
+
+/**
+ * Programmatically opens a CDK overlay anchored on the host element that
+ * renders the filter builder. Unlike the action-listbox directive, the
+ * overlay does not toggle on click — the host is simply the anchor. Open
+ * the overlay by injecting this directive via a template ref (`#filter`)
+ * and calling `filter.open(options)`.
+ */
+class MozGridFilterOverlayDirective {
+    overlay = inject(Overlay);
+    host = inject((ElementRef));
+    injector = inject(Injector);
+    engine = inject(FilterEngine, { optional: true });
+    overlayRef = null;
+    componentRef = null;
+    /** Opens the overlay anchored on the host. No-op if already open. */
+    open(options) {
+        if (this.overlayRef)
+            return;
+        if (!this.engine)
+            return;
+        const positions = [
+            { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
+            { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 4 },
+            { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
+        ];
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(this.host)
+            .withPositions(positions)
+            .withPush(true)
+            .withViewportMargin(8);
+        const config = new OverlayConfig({
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+            panelClass: 'moz-grid-filter-overlay',
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+        });
+        const overlayRef = this.overlay.create(config);
+        this.overlayRef = overlayRef;
+        // Seed the draft with a new condition targeting the clicked column, if any
+        const seededModel = options.seedField && options.model.conditions.length === 0
+            ? { conditions: [this.engine.makeCondition(options.seedField, true)] }
+            : options.model;
+        const portal = new ComponentPortal(MozGridFilterBuilderComponent, null, this.injector);
+        const compRef = overlayRef.attach(portal);
+        compRef.setInput('model', seededModel);
+        compRef.setInput('availableColumns', options.columns);
+        compRef.setInput('applyMode', 'auto');
+        compRef.setInput('showSubtitle', true);
+        compRef.instance.modelChange.subscribe((next) => {
+            compRef.setInput('model', next);
+            options.onChange(next);
+        });
+        this.componentRef = compRef;
+        overlayRef.backdropClick().subscribe(() => this.close());
+        overlayRef.keydownEvents().subscribe((event) => {
+            if (event.key === 'Escape')
+                this.close();
+        });
+    }
+    close() {
+        this.overlayRef?.dispose();
+        this.overlayRef = null;
+        this.componentRef = null;
+    }
+    ngOnDestroy() {
+        this.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MozGridFilterOverlayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: MozGridFilterOverlayDirective, isStandalone: true, selector: "[mozGridFilterOverlay]", exportAs: ["mozGridFilterOverlay"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MozGridFilterOverlayDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mozGridFilterOverlay]',
+                    exportAs: 'mozGridFilterOverlay',
+                }]
+        }] });
+
 class MozGridHeaderCellComponent {
     state = inject(GridStateManager);
+    filterEngine = inject(FilterEngine);
     columnState = input.required(...(ngDevMode ? [{ debugName: "columnState" }] : /* istanbul ignore next */ []));
     def = input.required(...(ngDevMode ? [{ debugName: "def" }] : /* istanbul ignore next */ []));
     isLast = input(false, ...(ngDevMode ? [{ debugName: "isLast" }] : /* istanbul ignore next */ []));
     pinnedEnd = input(false, ...(ngDevMode ? [{ debugName: "pinnedEnd" }] : /* istanbul ignore next */ []));
     reorderable = input(false, ...(ngDevMode ? [{ debugName: "reorderable" }] : /* istanbul ignore next */ []));
+    filterOverlay = viewChild(MozGridFilterOverlayDirective, ...(ngDevMode ? [{ debugName: "filterOverlay" }] : /* istanbul ignore next */ []));
+    /** True when at least one active condition targets this column. */
+    hasActiveFilter = computed(() => this.filterEngine.conditions().some((c) => c.field === this.columnState().field), ...(ngDevMode ? [{ debugName: "hasActiveFilter" }] : /* istanbul ignore next */ []));
+    /** Tooltip for the gear / filter button (count + short summary). */
+    filterTooltip = computed(() => {
+        const field = this.columnState().field;
+        const matching = this.filterEngine.conditions().filter((c) => c.field === field);
+        if (matching.length === 0)
+            return 'Column settings';
+        const summary = matching.map((c) => this.filterEngine.toLabel(c)).join(', ');
+        return `${matching.length} filter${matching.length > 1 ? 's' : ''}: ${summary}`;
+    }, ...(ngDevMode ? [{ debugName: "filterTooltip" }] : /* istanbul ignore next */ []));
     resolvedMinWidth = computed(() => {
         const def = this.def();
         return def.minWidth ? parseInt(def.minWidth, 10) || 50 : 50;
@@ -8175,6 +8788,14 @@ 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',
+                icon: Filter20,
+                divider: items.length > 0,
+            });
+        }
         if (def.groupable) {
             items.push({
                 id: 'group-column',
@@ -8220,24 +8841,58 @@ class MozGridHeaderCellComponent {
         }
     }
     onMenuItemClick(item) {
-        this.menuAction.emit({
-            field: this.columnState().field,
-            actionId: item.id,
-        });
+        const field = this.columnState().field;
+        const actionId = item.id;
+        // Intercept "Filter in this column": when the column does not provide a
+        // custom `filterTemplate`, open the overlay anchored on the gear button
+        // instead of delegating to the grid shell (which would toggle the legacy
+        // per-column search input). Columns that ship a filterTemplate keep their
+        // legacy behaviour — the grid handles them via `onMenuAction`.
+        if (actionId === 'filter-column' && !this.def().filterTemplate) {
+            this.openFilterOverlay(field);
+            return;
+        }
+        this.menuAction.emit({ field, actionId });
+    }
+    openFilterOverlay(seedField) {
+        // Defer so the action-listbox has time to tear down its overlay before
+        // we attach a new one at roughly the same location. Without this, the
+        // lingering mouseup from the menu-item click can land on the freshly
+        // mounted filter backdrop and close it instantly.
+        setTimeout(() => {
+            const overlay = this.filterOverlay();
+            if (!overlay)
+                return;
+            overlay.open({
+                columns: this.filterEngine.describeFilterableColumns(),
+                model: { conditions: this.filterEngine.conditions().slice() },
+                seedField,
+                onChange: (next) => {
+                    this.filterEngine.setModel(next, 'replace');
+                },
+            });
+        }, 0);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MozGridHeaderCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MozGridHeaderCellComponent, isStandalone: true, selector: "moz-grid-header-cell", inputs: { columnState: { classPropertyName: "columnState", publicName: "columnState", 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 }, reorderable: { classPropertyName: "reorderable", publicName: "reorderable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortClick: "sortClick", menuAction: "menuAction", resizeStart: "resizeStart" }, host: { properties: { "style.flex": "isLast() ? \"1 0 auto\" : \"0 0 auto\"", "style.width.px": "isLast() ? undefined : columnState().currentWidth", "style.min-width.px": "isLast() ? columnState().currentWidth : resolvedMinWidth()", "class.grid-header-cell-host--dragging": "isDragging()", "class.grid-header-cell-host--reorderable": "reorderable()" } }, ngImport: i0, template: "<div\n  class=\"grid-header-cell\"\n  [class.grid-header-cell--sorted]=\"columnState().sort !== null\"\n  [class.grid-header-cell--last]=\"isLast()\"\n  [class.grid-header-cell--pinned-end]=\"pinnedEnd()\"\n>\n  <div class=\"grid-header-cell__content\" (click)=\"onHeaderClick($event)\">\n    <span class=\"grid-header-cell__label\">{{ label() }}</span>\n    @if (columnState().sort === 'asc') {\n    <ChevronUp20 class=\"grid-header-cell__sort-icon\" />\n    } @if (columnState().sort === 'desc') {\n    <ChevronDown20 class=\"grid-header-cell__sort-icon\" />\n    }\n  </div>\n\n  @if (!def().headerMenuDisabled) {\n  <button\n    type=\"button\"\n    class=\"grid-header-cell__menu-trigger\"\n    [attr.aria-label]=\"'Column settings for ' + label()\"\n    [mozActionListboxTrigger]=\"menuItems()\"\n    actionListboxPosition=\"below\"\n    (itemClick)=\"onMenuItemClick($event)\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <Settings20 />\n  </button>\n  } @if (def().resizable !== false && (!isLast() || pinnedEnd())) {\n  <div\n    class=\"grid-header-cell__resize-handle\"\n    [class.grid-header-cell__resize-handle--left]=\"pinnedEnd()\"\n    (mousedown)=\"resizeStart.emit($event)\"\n  ></div>\n  }\n</div>\n", styles: [":host{display:block;height:100%}.grid-header-cell{display:flex;align-items:center;position:relative;height:100%;padding:0 var(--spacing-s, 8px);border-right:1px solid var(--color-border-primary);-webkit-user-select:none;user-select:none;box-sizing:border-box;min-width:0;background:inherit}.grid-header-cell--pinned-end{border-right:none;border-left:1px solid var(--color-border-primary)}:host(:first-child) .grid-header-cell--pinned-end{border-left:none}.grid-header-cell--last{border-right:none}.grid-header-cell__content{display:flex;align-items:center;gap:var(--spacing-xs, 4px);flex:1;min-width:0;cursor:pointer}.grid-header-cell__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-text-secondary);font-family:LeroyMerlin,sans-serif;font-size:var(--font-size-50);font-weight:700;text-transform:uppercase}.grid-header-cell__sort-icon{flex-shrink:0;color:var(--color-text-primary)}.grid-header-cell__menu-trigger{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-text-secondary);opacity:0;transition:opacity .15s ease}.grid-header-cell__menu-trigger:hover{background:var(--color-background-tertiary, rgba(0, 0, 0, .06));color:var(--color-text-primary)}.grid-header-cell:hover .grid-header-cell__menu-trigger{opacity:1}.grid-header-cell__resize-handle{position:absolute;right:0;top:0;bottom:0;width:4px;cursor:col-resize;z-index:1}.grid-header-cell__resize-handle:hover{background:var(--color-background-accent-inverse)}.grid-header-cell__resize-handle--left{right:auto;left:0}:host(.grid-header-cell-host--reorderable) .grid-header-cell__content{cursor:grab}:host(.grid-header-cell-host--dragging){outline:2px solid var(--color-background-accent-inverse);outline-offset:-2px;opacity:.85;z-index:1}\n"], dependencies: [{ kind: "component", type: ChevronDown20, selector: "ChevronDown20", inputs: ["hostClass"] }, { kind: "component", type: ChevronUp20, selector: "ChevronUp20", inputs: ["hostClass"] }, { kind: "component", type: Settings20, selector: "Settings20", inputs: ["hostClass"] }, { kind: "directive", type: MozActionListboxTriggerDirective, selector: "[mozActionListboxTrigger]", inputs: ["mozActionListboxTrigger", "actionListboxTitle", "actionListboxPosition"], outputs: ["itemClick"], exportAs: ["mozActionListboxTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MozGridHeaderCellComponent, isStandalone: true, selector: "moz-grid-header-cell", inputs: { columnState: { classPropertyName: "columnState", publicName: "columnState", 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 }, reorderable: { classPropertyName: "reorderable", publicName: "reorderable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortClick: "sortClick", menuAction: "menuAction", resizeStart: "resizeStart" }, host: { properties: { "style.flex": "isLast() ? \"1 0 auto\" : \"0 0 auto\"", "style.width.px": "isLast() ? undefined : columnState().currentWidth", "style.min-width.px": "isLast() ? columnState().currentWidth : resolvedMinWidth()", "class.grid-header-cell-host--dragging": "isDragging()", "class.grid-header-cell-host--reorderable": "reorderable()" } }, viewQueries: [{ propertyName: "filterOverlay", first: true, predicate: MozGridFilterOverlayDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"grid-header-cell\"\n  [class.grid-header-cell--sorted]=\"columnState().sort !== null\"\n  [class.grid-header-cell--last]=\"isLast()\"\n  [class.grid-header-cell--pinned-end]=\"pinnedEnd()\"\n>\n  <div class=\"grid-header-cell__content\" (click)=\"onHeaderClick($event)\">\n    <span class=\"grid-header-cell__label\">{{ label() }}</span>\n    @if (columnState().sort === 'asc') {\n    <ChevronUp20 class=\"grid-header-cell__sort-icon\" />\n    } @if (columnState().sort === 'desc') {\n    <ChevronDown20 class=\"grid-header-cell__sort-icon\" />\n    }\n  </div>\n\n  @if (!def().headerMenuDisabled) {\n  <button\n    type=\"button\"\n    class=\"grid-header-cell__menu-trigger\"\n    [class.grid-header-cell__menu-trigger--filtered]=\"hasActiveFilter()\"\n    [attr.aria-label]=\"'Column settings for ' + label()\"\n    [attr.title]=\"filterTooltip()\"\n    [mozActionListboxTrigger]=\"menuItems()\"\n    actionListboxPosition=\"below\"\n    mozGridFilterOverlay\n    (itemClick)=\"onMenuItemClick($event)\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    @if (hasActiveFilter()) {\n    <Filter20 />\n    } @else {\n    <Settings20 />\n    }\n  </button>\n  } @if (def().resizable !== false && (!isLast() || pinnedEnd())) {\n  <div\n    class=\"grid-header-cell__resize-handle\"\n    [class.grid-header-cell__resize-handle--left]=\"pinnedEnd()\"\n    (mousedown)=\"resizeStart.emit($event)\"\n  ></div>\n  }\n</div>\n", styles: [":host{display:block;height:100%}.grid-header-cell{display:flex;align-items:center;position:relative;height:100%;padding:0 var(--spacing-s, 8px);border-right:1px solid var(--color-border-primary);-webkit-user-select:none;user-select:none;box-sizing:border-box;min-width:0;background:inherit}.grid-header-cell--pinned-end{border-right:none;border-left:1px solid var(--color-border-primary)}:host(:first-child) .grid-header-cell--pinned-end{border-left:none}.grid-header-cell--last{border-right:none}.grid-header-cell__content{display:flex;align-items:center;gap:var(--spacing-xs, 4px);flex:1;min-width:0;cursor:pointer}.grid-header-cell__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-text-secondary);font-family:LeroyMerlin,sans-serif;font-size:var(--font-size-50);font-weight:700;text-transform:uppercase}.grid-header-cell__sort-icon{flex-shrink:0;color:var(--color-text-primary)}.grid-header-cell__menu-trigger{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-text-secondary);opacity:0;transition:opacity .15s ease}.grid-header-cell__menu-trigger:hover{background:var(--color-background-tertiary, rgba(0, 0, 0, .06));color:var(--color-text-primary)}.grid-header-cell:hover .grid-header-cell__menu-trigger{opacity:1}.grid-header-cell__menu-trigger--filtered{opacity:1;color:var(--Status-Standalone-element-Primary, #0071ce)}.grid-header-cell__resize-handle{position:absolute;right:0;top:0;bottom:0;width:4px;cursor:col-resize;z-index:1}.grid-header-cell__resize-handle:hover{background:var(--color-background-accent-inverse)}.grid-header-cell__resize-handle--left{right:auto;left:0}:host(.grid-header-cell-host--reorderable) .grid-header-cell__content{cursor:grab}:host(.grid-header-cell-host--dragging){outline:2px solid var(--color-background-accent-inverse);outline-offset:-2px;opacity:.85;z-index:1}\n"], dependencies: [{ kind: "component", type: ChevronDown20, selector: "ChevronDown20", inputs: ["hostClass"] }, { kind: "component", type: ChevronUp20, selector: "ChevronUp20", inputs: ["hostClass"] }, { kind: "component", type: Settings20, selector: "Settings20", inputs: ["hostClass"] }, { kind: "component", type: Filter20, selector: "Filter20", inputs: ["hostClass"] }, { kind: "directive", type: MozActionListboxTriggerDirective, selector: "[mozActionListboxTrigger]", inputs: ["mozActionListboxTrigger", "actionListboxTitle", "actionListboxPosition"], outputs: ["itemClick"], exportAs: ["mozActionListboxTrigger"] }, { kind: "directive", type: MozGridFilterOverlayDirective, selector: "[mozGridFilterOverlay]", exportAs: ["mozGridFilterOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MozGridHeaderCellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'moz-grid-header-cell', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ChevronDown20, ChevronUp20, Settings20, MozActionListboxTriggerDirective], host: {
+            args: [{ selector: 'moz-grid-header-cell', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        ChevronDown20,
+                        ChevronUp20,
+                        Settings20,
+                        Filter20,
+                        MozActionListboxTriggerDirective,
+                        MozGridFilterOverlayDirective,
+                    ], host: {
                         '[style.flex]': 'isLast() ? "1 0 auto" : "0 0 auto"',
                         '[style.width.px]': 'isLast() ? undefined : columnState().currentWidth',
                         '[style.min-width.px]': 'isLast() ? columnState().currentWidth : resolvedMinWidth()',
                         '[class.grid-header-cell-host--dragging]': 'isDragging()',
                         '[class.grid-header-cell-host--reorderable]': 'reorderable()',
-                    }, template: "<div\n  class=\"grid-header-cell\"\n  [class.grid-header-cell--sorted]=\"columnState().sort !== null\"\n  [class.grid-header-cell--last]=\"isLast()\"\n  [class.grid-header-cell--pinned-end]=\"pinnedEnd()\"\n>\n  <div class=\"grid-header-cell__content\" (click)=\"onHeaderClick($event)\">\n    <span class=\"grid-header-cell__label\">{{ label() }}</span>\n    @if (columnState().sort === 'asc') {\n    <ChevronUp20 class=\"grid-header-cell__sort-icon\" />\n    } @if (columnState().sort === 'desc') {\n    <ChevronDown20 class=\"grid-header-cell__sort-icon\" />\n    }\n  </div>\n\n  @if (!def().headerMenuDisabled) {\n  <button\n    type=\"button\"\n    class=\"grid-header-cell__menu-trigger\"\n    [attr.aria-label]=\"'Column settings for ' + label()\"\n    [mozActionListboxTrigger]=\"menuItems()\"\n    actionListboxPosition=\"below\"\n    (itemClick)=\"onMenuItemClick($event)\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <Settings20 />\n  </button>\n  } @if (def().resizable !== false && (!isLast() || pinnedEnd())) {\n  <div\n    class=\"grid-header-cell__resize-handle\"\n    [class.grid-header-cell__resize-handle--left]=\"pinnedEnd()\"\n    (mousedown)=\"resizeStart.emit($event)\"\n  ></div>\n  }\n</div>\n", styles: [":host{display:block;height:100%}.grid-header-cell{display:flex;align-items:center;position:relative;height:100%;padding:0 var(--spacing-s, 8px);border-right:1px solid var(--color-border-primary);-webkit-user-select:none;user-select:none;box-sizing:border-box;min-width:0;background:inherit}.grid-header-cell--pinned-end{border-right:none;border-left:1px solid var(--color-border-primary)}:host(:first-child) .grid-header-cell--pinned-end{border-left:none}.grid-header-cell--last{border-right:none}.grid-header-cell__content{display:flex;align-items:center;gap:var(--spacing-xs, 4px);flex:1;min-width:0;cursor:pointer}.grid-header-cell__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-text-secondary);font-family:LeroyMerlin,sans-serif;font-size:var(--font-size-50);font-weight:700;text-transform:uppercase}.grid-header-cell__sort-icon{flex-shrink:0;color:var(--color-text-primary)}.grid-header-cell__menu-trigger{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-text-secondary);opacity:0;transition:opacity .15s ease}.grid-header-cell__menu-trigger:hover{background:var(--color-background-tertiary, rgba(0, 0, 0, .06));color:var(--color-text-primary)}.grid-header-cell:hover .grid-header-cell__menu-trigger{opacity:1}.grid-header-cell__resize-handle{position:absolute;right:0;top:0;bottom:0;width:4px;cursor:col-resize;z-index:1}.grid-header-cell__resize-handle:hover{background:var(--color-background-accent-inverse)}.grid-header-cell__resize-handle--left{right:auto;left:0}:host(.grid-header-cell-host--reorderable) .grid-header-cell__content{cursor:grab}:host(.grid-header-cell-host--dragging){outline:2px solid var(--color-background-accent-inverse);outline-offset:-2px;opacity:.85;z-index:1}\n"] }]
-        }], propDecorators: { columnState: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnState", 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 }] }], 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"] }] } });
+                    }, template: "<div\n  class=\"grid-header-cell\"\n  [class.grid-header-cell--sorted]=\"columnState().sort !== null\"\n  [class.grid-header-cell--last]=\"isLast()\"\n  [class.grid-header-cell--pinned-end]=\"pinnedEnd()\"\n>\n  <div class=\"grid-header-cell__content\" (click)=\"onHeaderClick($event)\">\n    <span class=\"grid-header-cell__label\">{{ label() }}</span>\n    @if (columnState().sort === 'asc') {\n    <ChevronUp20 class=\"grid-header-cell__sort-icon\" />\n    } @if (columnState().sort === 'desc') {\n    <ChevronDown20 class=\"grid-header-cell__sort-icon\" />\n    }\n  </div>\n\n  @if (!def().headerMenuDisabled) {\n  <button\n    type=\"button\"\n    class=\"grid-header-cell__menu-trigger\"\n    [class.grid-header-cell__menu-trigger--filtered]=\"hasActiveFilter()\"\n    [attr.aria-label]=\"'Column settings for ' + label()\"\n    [attr.title]=\"filterTooltip()\"\n    [mozActionListboxTrigger]=\"menuItems()\"\n    actionListboxPosition=\"below\"\n    mozGridFilterOverlay\n    (itemClick)=\"onMenuItemClick($event)\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    @if (hasActiveFilter()) {\n    <Filter20 />\n    } @else {\n    <Settings20 />\n    }\n  </button>\n  } @if (def().resizable !== false && (!isLast() || pinnedEnd())) {\n  <div\n    class=\"grid-header-cell__resize-handle\"\n    [class.grid-header-cell__resize-handle--left]=\"pinnedEnd()\"\n    (mousedown)=\"resizeStart.emit($event)\"\n  ></div>\n  }\n</div>\n", styles: [":host{display:block;height:100%}.grid-header-cell{display:flex;align-items:center;position:relative;height:100%;padding:0 var(--spacing-s, 8px);border-right:1px solid var(--color-border-primary);-webkit-user-select:none;user-select:none;box-sizing:border-box;min-width:0;background:inherit}.grid-header-cell--pinned-end{border-right:none;border-left:1px solid var(--color-border-primary)}:host(:first-child) .grid-header-cell--pinned-end{border-left:none}.grid-header-cell--last{border-right:none}.grid-header-cell__content{display:flex;align-items:center;gap:var(--spacing-xs, 4px);flex:1;min-width:0;cursor:pointer}.grid-header-cell__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-text-secondary);font-family:LeroyMerlin,sans-serif;font-size:var(--font-size-50);font-weight:700;text-transform:uppercase}.grid-header-cell__sort-icon{flex-shrink:0;color:var(--color-text-primary)}.grid-header-cell__menu-trigger{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-text-secondary);opacity:0;transition:opacity .15s ease}.grid-header-cell__menu-trigger:hover{background:var(--color-background-tertiary, rgba(0, 0, 0, .06));color:var(--color-text-primary)}.grid-header-cell:hover .grid-header-cell__menu-trigger{opacity:1}.grid-header-cell__menu-trigger--filtered{opacity:1;color:var(--Status-Standalone-element-Primary, #0071ce)}.grid-header-cell__resize-handle{position:absolute;right:0;top:0;bottom:0;width:4px;cursor:col-resize;z-index:1}.grid-header-cell__resize-handle:hover{background:var(--color-background-accent-inverse)}.grid-header-cell__resize-handle--left{right:auto;left:0}:host(.grid-header-cell-host--reorderable) .grid-header-cell__content{cursor:grab}:host(.grid-header-cell-host--dragging){outline:2px solid var(--color-background-accent-inverse);outline-offset:-2px;opacity:.85;z-index:1}\n"] }]
+        }], propDecorators: { columnState: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnState", 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 }] }], reorderable: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderable", required: false }] }], filterOverlay: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MozGridFilterOverlayDirective), { isSignal: true }] }], sortClick: [{ type: i0.Output, args: ["sortClick"] }], menuAction: [{ type: i0.Output, args: ["menuAction"] }], resizeStart: [{ type: i0.Output, args: ["resizeStart"] }] } });
 
 function trackDisplayRow(_index, row) {
     if (row.type === 'group') {
@@ -8490,6 +9145,12 @@ class AutoSizeVirtualScrollStrategy {
         const viewportSize = this._viewport.getViewportSize();
         const dataLength = this._viewport.getDataLength();
         if (dataLength === 0) {
+            // IMPORTANT: also reset the cache. Otherwise, when data comes back to
+            // the same length as before the empty state (e.g. filter matching N,
+            // then 0, then N again), the range we compute below equals the stale
+            // `_lastRenderedRange` and `setRenderedRange` is skipped — the viewport
+            // stays stuck on empty until a scroll event forces a re-render.
+            this._lastRenderedRange = { start: 0, end: 0 };
             this._viewport.setRenderedRange({ start: 0, end: 0 });
             this._viewport.setRenderedContentOffset(0);
             return;
@@ -8637,8 +9298,9 @@ class AutoSizeVirtualScrollStrategy {
         // Quick check: if the first child matches the default height,
         // assume all rows are uniform and skip the full measurement pass.
         const firstHeight = children[0].offsetHeight;
-        if (firstHeight > 0 && Math.abs(firstHeight - this._defaultItemSize) <= 0.5
-            && this._heightMap.size === 0) {
+        if (firstHeight > 0 &&
+            Math.abs(firstHeight - this._defaultItemSize) <= 0.5 &&
+            this._heightMap.size === 0) {
             return;
         }
         let changed = false;
@@ -8765,13 +9427,36 @@ class MozGridCellComponent {
             const editorEl = this.elRef.nativeElement.querySelector('.grid-cell__editor');
             if (!editorEl)
                 return;
-            // Temporarily remove overflow constraint to measure natural content width
             const cell = this.elRef.nativeElement.querySelector('.grid-cell');
+            // The cell-level `overflow: hidden`, the editor's `width: 100%`, the
+            // `flex-wrap: wrap` on `.grid-cell__editor-custom` and the global
+            // `.grid-cell__editor ::ng-deep * { max-width: 100% }` rule all collapse
+            // the editor's content back inside the current column width. Lift each of
+            // those — on the editor and every descendant — so scrollWidth reports
+            // the true natural width. Restore everything after measuring.
+            const prevCellOverflow = cell?.style.overflow ?? '';
+            const prevEditorCss = editorEl.style.cssText;
+            const descendants = editorEl.querySelectorAll('*');
+            const prevDescendantCss = [];
+            descendants.forEach((el) => {
+                prevDescendantCss.push(el.style.cssText);
+                el.style.maxWidth = 'none';
+                el.style.minWidth = 'max-content';
+                el.style.flexWrap = 'nowrap';
+                el.style.overflow = 'visible';
+            });
             if (cell)
                 cell.style.overflow = 'visible';
+            editorEl.style.width = 'max-content';
+            editorEl.style.maxWidth = 'none';
+            editorEl.style.overflow = 'visible';
             const contentWidth = editorEl.scrollWidth + 16; // 16 = cell horizontal padding (8px × 2)
             if (cell)
-                cell.style.overflow = '';
+                cell.style.overflow = prevCellOverflow;
+            editorEl.style.cssText = prevEditorCss;
+            descendants.forEach((el, i) => {
+                el.style.cssText = prevDescendantCss[i];
+            });
             if (contentWidth > currentWidth) {
                 this.state.updateColumnState(field, { currentWidth: contentWidth });
             }
@@ -8950,7 +9635,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()" } }, 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 });
+    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{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;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,
@@ -8966,7 +9651,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()',
-                    }, 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"] }]
+                    }, 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{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;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 {
@@ -9541,6 +10226,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             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 MozGridFilterDrawerComponent {
+    drawerRef = inject(MozDrawerRef);
+    data = inject(DRAWER_DATA);
+    availableColumns = this.data.availableColumns;
+    draft = signal({
+        conditions: this.data.model.conditions.map((c) => ({ ...c, value: { ...c.value } })),
+    }, ...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
+    activeCount = computed(() => this.draft().conditions.length, ...(ngDevMode ? [{ debugName: "activeCount" }] : /* istanbul ignore next */ []));
+    onDraftChange(model) {
+        this.draft.set(model);
+    }
+    apply() {
+        this.drawerRef.close({ model: this.draft(), applied: true });
+    }
+    clearAll() {
+        this.draft.set({ conditions: [] });
+    }
+    cancel() {
+        this.drawerRef.close({ model: this.data.model, applied: false });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MozGridFilterDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: MozGridFilterDrawerComponent, isStandalone: true, selector: "moz-grid-filter-drawer", ngImport: i0, template: "<div class=\"filter-drawer\">\n  <p class=\"filter-drawer__subtitle\">{{ activeCount() }} active filter(s)</p>\n  <moz-grid-filter-builder\n    [model]=\"draft()\"\n    [availableColumns]=\"availableColumns\"\n    [applyMode]=\"'manual'\"\n    [showSubtitle]=\"false\"\n    (modelChange)=\"onDraftChange($event)\"\n  />\n</div>\n\n<ng-template mozDrawerFooter>\n  <button moz-button [appearance]=\"'accent'\" (click)=\"apply()\">Apply</button>\n  <button moz-button [outlined]=\"true\" (click)=\"clearAll()\">Clear all</button>\n</ng-template>\n", styles: [".filter-drawer{padding-bottom:16px}.filter-drawer__subtitle{margin:0 16px 8px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--Text-Secondary, #555)}\n"], dependencies: [{ kind: "component", type: MozGridFilterBuilderComponent, selector: "moz-grid-filter-builder", inputs: ["model", "availableColumns", "applyMode", "showSubtitle"], outputs: ["modelChange"] }, { 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: MozGridFilterDrawerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'moz-grid-filter-drawer', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MozGridFilterBuilderComponent, MozButtonComponent, MozDrawerFooterDirective], template: "<div class=\"filter-drawer\">\n  <p class=\"filter-drawer__subtitle\">{{ activeCount() }} active filter(s)</p>\n  <moz-grid-filter-builder\n    [model]=\"draft()\"\n    [availableColumns]=\"availableColumns\"\n    [applyMode]=\"'manual'\"\n    [showSubtitle]=\"false\"\n    (modelChange)=\"onDraftChange($event)\"\n  />\n</div>\n\n<ng-template mozDrawerFooter>\n  <button moz-button [appearance]=\"'accent'\" (click)=\"apply()\">Apply</button>\n  <button moz-button [outlined]=\"true\" (click)=\"clearAll()\">Clear all</button>\n</ng-template>\n", styles: [".filter-drawer{padding-bottom:16px}.filter-drawer__subtitle{margin:0 16px 8px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--Text-Secondary, #555)}\n"] }]
+        }] });
+
 class MozGridComponent {
     state = inject(GridStateManager);
     gridEngine = inject(GridEngine);
@@ -9608,7 +10321,28 @@ class MozGridComponent {
     // --- Internal ---
     isFullscreen = signal(false, ...(ngDevMode ? [{ debugName: "isFullscreen" }] : /* istanbul ignore next */ []));
     groupPanelOpen = signal(false, ...(ngDevMode ? [{ debugName: "groupPanelOpen" }] : /* istanbul ignore next */ []));
-    filterPanelOpen = signal(false, ...(ngDevMode ? [{ debugName: "filterPanelOpen" }] : /* istanbul ignore next */ []));
+    /**
+     * Mode controlling how the builder emits `filterChange`:
+     *  - `auto`   : each mutation triggers an event (default in `client` mode).
+     *  - `manual` : only an explicit Apply emits (default in `server` mode).
+     */
+    filterApplyMode = input(null, ...(ngDevMode ? [{ debugName: "filterApplyMode" }] : /* istanbul ignore next */ []));
+    resolvedFilterApplyMode = computed(() => {
+        const override = this.filterApplyMode();
+        if (override)
+            return override;
+        return this.state.mode() === 'server' ? 'manual' : 'auto';
+    }, ...(ngDevMode ? [{ debugName: "resolvedFilterApplyMode" }] : /* istanbul ignore next */ []));
+    /** Display descriptors for the "FILTERED BY" tag bar. */
+    activeFilters = computed(() => {
+        return this.filterEngine.conditions().map((c) => ({
+            id: c.id,
+            field: c.field,
+            label: this.filterEngine.toLabel(c),
+            removable: true,
+        }));
+    }, ...(ngDevMode ? [{ debugName: "activeFilters" }] : /* istanbul ignore next */ []));
+    activeFilterCount = computed(() => this.filterEngine.conditions().length, ...(ngDevMode ? [{ debugName: "activeFilterCount" }] : /* istanbul ignore next */ []));
     hasHiddenColumns = computed(() => this.state.columnStates().some((col) => !col.visible), ...(ngDevMode ? [{ debugName: "hasHiddenColumns" }] : /* istanbul ignore next */ []));
     hiddenColumnsList = computed(() => {
         const defMap = this.state.columnDefMap();
@@ -9799,7 +10533,7 @@ class MozGridComponent {
                 this.persistenceEngine.restore(key);
             }
         }, { allowSignalWrites: true });
-        // Auto-save state on column/sort changes
+        // Auto-save state on column/sort/filter changes
         effect(() => {
             const key = this.stateKey();
             if (!key)
@@ -9807,8 +10541,19 @@ class MozGridComponent {
             // Read signals to track them
             this.state.columnStates();
             this.state.activeSorts();
+            this.state.filterModel();
             this.persistenceEngine.save(key);
         });
+        // Emit `filterChange` once per mutation. The engine's `lastEvent` signal
+        // is set synchronously from every mutation path, guaranteeing we emit
+        // exactly once per reason (add / update / remove / reorder / clear / replace).
+        effect(() => {
+            const event = this.filterEngine.lastEvent();
+            if (!event)
+                return;
+            this.filterChange.emit(event);
+            this.resetInfiniteScrollIfActive();
+        });
         // Initialize plugins
         effect(() => {
             const pluginList = this.plugins();
@@ -10306,17 +11051,27 @@ class MozGridComponent {
         this.state.activeSelectionMode.set('none');
         this.selectionChange.emit(this.rowSelectionEngine.getSelectionEvent());
     }
-    onRemoveFilter(field) {
-        this.filterEngine.removeFilter(field);
-        this.filterChange.emit({ filters: this.state.activeFilters() });
-        this.resetInfiniteScrollIfActive();
+    /** Removes a single condition by id (tag "×" button). */
+    onRemoveFilter(id) {
+        this.filterEngine.removeCondition(id);
     }
+    /** Clears the whole filter model ("Remove all" button). */
     onRemoveAllFilters() {
-        for (const filter of this.state.activeFilters()) {
-            this.filterEngine.removeFilter(filter.field);
-        }
-        this.filterChange.emit({ filters: this.state.activeFilters() });
-        this.resetInfiniteScrollIfActive();
+        this.filterEngine.clearAll();
+    }
+    // --- Filter drawer ---
+    onFiltersClick() {
+        const data = {
+            model: { conditions: this.filterEngine.conditions().slice() },
+            availableColumns: this.filterEngine.describeFilterableColumns(),
+            applyMode: this.resolvedFilterApplyMode(),
+        };
+        const ref = this.drawerService.open(MozGridFilterDrawerComponent, { title: 'Filters', data, extended: true });
+        ref.afterClosed().subscribe((result) => {
+            if (result?.applied) {
+                this.filterEngine.setModel(result.model, 'replace');
+            }
+        });
     }
     onRestoreColumn(field) {
         this.state.updateColumnState(field, { visible: true });
@@ -10535,21 +11290,37 @@ class MozGridComponent {
             return;
         try {
             const text = await navigator.clipboard.readText();
-            const rows = text.split('\n').map((line) => line.split('\t'));
+            const rows = text
+                .replace(/\r?\n$/, '')
+                .split('\n')
+                .map((line) => line.split('\t'));
             const cols = this.state.visibleColumns();
-            // Build a paste range starting from the focused cell
-            const pasteRange = {
-                start: { row: focused.row, col: focused.col },
-                end: {
-                    row: Math.min(focused.row + rows.length - 1, this.state.sourceData().length - 1),
-                    col: Math.min(focused.col + (rows[0]?.length ?? 1) - 1, cols.length - 1),
-                },
-            };
+            // Excel-style: a single clipboard value pasted over a multi-cell selection
+            // fills the entire selection rather than only the focused anchor.
+            const isSingleValue = rows.length === 1 && rows[0].length === 1;
+            const selection = this.cellSelectionEngine.getNormalizedRange();
+            const isMultiCellSelection = !!selection &&
+                (selection.start.row !== selection.end.row || selection.start.col !== selection.end.col);
+            let pasteRange;
+            let pasteChanges;
+            if (isSingleValue && isMultiCellSelection && selection) {
+                pasteRange = selection;
+                pasteChanges = this.clipboardEngine.fillSelection(selection, rows[0][0]);
+            }
+            else {
+                pasteRange = {
+                    start: { row: focused.row, col: focused.col },
+                    end: {
+                        row: Math.min(focused.row + rows.length - 1, this.state.sourceData().length - 1),
+                        col: Math.min(focused.col + (rows[0]?.length ?? 1) - 1, cols.length - 1),
+                    },
+                };
+                pasteChanges = this.clipboardEngine.applyPaste(pasteRange, rows);
+            }
             // If a cut is pending, first wipe the source cells so cut+paste == move,
             // and fold both halves into a single undoable history op.
             const cutSource = this.state.cutSource();
             const clearChanges = cutSource ? this.clipboardEngine.clearRange(cutSource) : [];
-            const pasteChanges = this.clipboardEngine.applyPaste(pasteRange, rows);
             const allChanges = [...clearChanges, ...pasteChanges];
             if (allChanges.length > 0) {
                 this.historyEngine.record(cutSource ? 'cut' : 'paste', allChanges);
@@ -10800,7 +11571,7 @@ class MozGridComponent {
         return value;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MozGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MozGridComponent, isStandalone: true, selector: "moz-grid", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, rowSelection: { classPropertyName: "rowSelection", publicName: "rowSelection", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, rowIdField: { classPropertyName: "rowIdField", publicName: "rowIdField", isSignal: true, isRequired: false, transformFunction: null }, detailTemplate: { classPropertyName: "detailTemplate", publicName: "detailTemplate", isSignal: true, isRequired: false, transformFunction: null }, fullscreen: { classPropertyName: "fullscreen", publicName: "fullscreen", isSignal: true, isRequired: false, transformFunction: null }, reorderable: { classPropertyName: "reorderable", publicName: "reorderable", isSignal: true, isRequired: false, transformFunction: null }, stateKey: { classPropertyName: "stateKey", publicName: "stateKey", isSignal: true, isRequired: false, transformFunction: null }, exportable: { classPropertyName: "exportable", publicName: "exportable", isSignal: true, isRequired: false, transformFunction: null }, horizontalVirtualScroll: { classPropertyName: "horizontalVirtualScroll", publicName: "horizontalVirtualScroll", isSignal: true, isRequired: false, transformFunction: null }, loadingStrategy: { classPropertyName: "loadingStrategy", publicName: "loadingStrategy", isSignal: true, isRequired: false, transformFunction: null }, scrollThreshold: { classPropertyName: "scrollThreshold", publicName: "scrollThreshold", isSignal: true, isRequired: false, transformFunction: null }, plugins: { classPropertyName: "plugins", publicName: "plugins", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", pageChange: "pageChange", loadMore: "loadMore", cellEdit: "cellEdit", cellEditCancel: "cellEditCancel", selectionChange: "selectionChange", cellSelectionChange: "cellSelectionChange", groupChange: "groupChange", filterChange: "filterChange", bulkEdit: "bulkEdit", bulkCopy: "bulkCopy", bulkPaste: "bulkPaste", bulkDelete: "bulkDelete", fillDown: "fillDown", settingsChange: "settingsChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MozGridComponent, isStandalone: true, selector: "moz-grid", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, rowSelection: { classPropertyName: "rowSelection", publicName: "rowSelection", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, rowIdField: { classPropertyName: "rowIdField", publicName: "rowIdField", isSignal: true, isRequired: false, transformFunction: null }, detailTemplate: { classPropertyName: "detailTemplate", publicName: "detailTemplate", isSignal: true, isRequired: false, transformFunction: null }, fullscreen: { classPropertyName: "fullscreen", publicName: "fullscreen", isSignal: true, isRequired: false, transformFunction: null }, reorderable: { classPropertyName: "reorderable", publicName: "reorderable", isSignal: true, isRequired: false, transformFunction: null }, stateKey: { classPropertyName: "stateKey", publicName: "stateKey", isSignal: true, isRequired: false, transformFunction: null }, exportable: { classPropertyName: "exportable", publicName: "exportable", isSignal: true, isRequired: false, transformFunction: null }, horizontalVirtualScroll: { classPropertyName: "horizontalVirtualScroll", publicName: "horizontalVirtualScroll", isSignal: true, isRequired: false, transformFunction: null }, loadingStrategy: { classPropertyName: "loadingStrategy", publicName: "loadingStrategy", isSignal: true, isRequired: false, transformFunction: null }, scrollThreshold: { classPropertyName: "scrollThreshold", publicName: "scrollThreshold", isSignal: true, isRequired: false, transformFunction: null }, plugins: { classPropertyName: "plugins", publicName: "plugins", isSignal: true, isRequired: false, transformFunction: null }, filterApplyMode: { classPropertyName: "filterApplyMode", publicName: "filterApplyMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", pageChange: "pageChange", loadMore: "loadMore", cellEdit: "cellEdit", cellEditCancel: "cellEditCancel", selectionChange: "selectionChange", cellSelectionChange: "cellSelectionChange", groupChange: "groupChange", filterChange: "filterChange", bulkEdit: "bulkEdit", bulkCopy: "bulkCopy", bulkPaste: "bulkPaste", bulkDelete: "bulkDelete", fillDown: "fillDown", settingsChange: "settingsChange" }, providers: [
             GridStateManager,
             GridEngine,
             SortEngine,
@@ -10854,15 +11625,24 @@ class MozGridComponent {
             <Download20 icon />
           </moz-icon-button>
           }
-          <moz-icon-button
+          <button
+            type="button"
+            moz-button
             id="grid-filter"
             size="s"
             [ghost]="true"
-            ariaLabel="Filter"
-            (activated)="filterPanelOpen.set(!filterPanelOpen())"
+            [ariaLabel]="'Filters'"
+            class="moz-grid__toolbar-filter-btn"
+            (click)="onFiltersClick()"
           >
             <Filter20 icon />
-          </moz-icon-button>
+            <span>Filters</span>
+            @if (activeFilterCount() > 0) {
+            <span class="moz-grid__toolbar-filter-badge" aria-hidden="true">
+              {{ activeFilterCount() }}
+            </span>
+            }
+          </button>
           <moz-icon-button
             id="grid-settings"
             size="s"
@@ -10972,15 +11752,15 @@ class MozGridComponent {
         </button>
         }
       </div>
-      } @if (state.activeFilters().length > 0) {
+      } @if (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) {
+        @for (filter of activeFilters(); track filter.id) {
         <moz-tag
           [type]="filter.removable ? 'removable' : 'informative'"
           size="s"
-          [id]="'filter-' + filter.field"
-          (removeTag)="onRemoveFilter(filter.field)"
+          [id]="'filter-' + filter.id"
+          (removeTag)="onRemoveFilter(filter.id)"
           >{{ filter.label }}</moz-tag
         >
         }
@@ -11042,7 +11822,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: 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 });
+  `, 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__toolbar-filter-btn{display:inline-flex;align-items:center;gap:4px}.moz-grid__toolbar-filter-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 6px;border-radius:9px;background:var(--Status-Standalone-element-Primary, #0071ce);color:#fff;font-size:11px;font-weight:600;line-height:1}.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,
@@ -11119,15 +11899,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             <Download20 icon />
           </moz-icon-button>
           }
-          <moz-icon-button
+          <button
+            type="button"
+            moz-button
             id="grid-filter"
             size="s"
             [ghost]="true"
-            ariaLabel="Filter"
-            (activated)="filterPanelOpen.set(!filterPanelOpen())"
+            [ariaLabel]="'Filters'"
+            class="moz-grid__toolbar-filter-btn"
+            (click)="onFiltersClick()"
           >
             <Filter20 icon />
-          </moz-icon-button>
+            <span>Filters</span>
+            @if (activeFilterCount() > 0) {
+            <span class="moz-grid__toolbar-filter-badge" aria-hidden="true">
+              {{ activeFilterCount() }}
+            </span>
+            }
+          </button>
           <moz-icon-button
             id="grid-settings"
             size="s"
@@ -11237,15 +12026,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         </button>
         }
       </div>
-      } @if (state.activeFilters().length > 0) {
+      } @if (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) {
+        @for (filter of activeFilters(); track filter.id) {
         <moz-tag
           [type]="filter.removable ? 'removable' : 'informative'"
           size="s"
-          [id]="'filter-' + filter.field"
-          (removeTag)="onRemoveFilter(filter.field)"
+          [id]="'filter-' + filter.id"
+          (removeTag)="onRemoveFilter(filter.id)"
           >{{ filter.label }}</moz-tag
         >
         }
@@ -11307,8 +12096,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         />
       </div>
     </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"] }] } });
+  `, 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__toolbar-filter-btn{display:inline-flex;align-items:center;gap:4px}.moz-grid__toolbar-filter-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 6px;border-radius:9px;background:var(--Status-Standalone-element-Primary, #0071ce);color:#fff;font-size:11px;font-weight:600;line-height:1}.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"] }], filterApplyMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterApplyMode", required: false }] }] } });
 
 const DEFAULT_GRID_OPTIONS = {
     mode: 'client',