@mozaic-ds/angular 2.0.45 → 2.0.47

package/fesm2022/mozaic-ds-angular.mjs

@@ -4,7 +4,7 @@ import { RouterLink, RouterLinkActive, RouterLinkWithHref } from '@angular/route
 import { NgTemplateOutlet, NgClass, NgComponentOutlet, JsonPipe, DOCUMENT } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { WarningCircle32, Uploading32, CheckCircle32, CrossCircleFilled20, Refresh32, Refresh20, Eye20, Upload24, Cross24, ChevronLeft24, ChevronRight24, ChevronLeft20, ChevronRight20, CrossCircleFilled24, More24, Less24, InfoCircle32, CrossCircle32, Cross20, CrossCircle24, ImageAlt32, ChevronDown24, CheckCircleFilled32, WarningCircleFilled32, CrossCircleFilled32, InfoCircleFilled32, SidebarExpand24, ChevronDown20, InfoCircleFilled24, WarningCircleFilled24, CheckCircleFilled24, ArrowBottomRight24, ArrowTopRight24, StarHalf32, StarFilled32, Star32, StarHalf24, StarFilled24, Star24, StarHalf20, StarFilled20, Star20, Check20, Check24, ArrowBack24, ArrowNext24, HelpCircle24, Menu24, Notification24, Search24, PauseCircle24, PlayCircle24, Drag20, ListAdd20, ChevronUp20, Filter20, Settings20, ErrorFilled24, ViewGridX420, 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, Folder48, Search48, 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';
@@ -5378,12 +5378,17 @@ class FilterEngine {
         return resolveFilterType(this.state.columnDefMap().get(field));
     }
     /**
-     * Builds the column descriptors consumed by the filter builder UI. The
-     * returned list includes only filterable columns.
+     * Builds the column descriptors consumed by the filter builder UI.
+     *
+     * All `filterable` columns are included, even those that ship a custom
+     * `filterTemplate`. The custom template drives the inline header filter
+     * row (quick per-column UI), while the builder — rendered in the toolbar
+     * drawer and in the column-menu overlay — always uses the generic editors.
+     * The two mechanisms are complementary and can coexist on the same column.
      */
     describeFilterableColumns() {
         const defs = this.state.columnDefs();
-        return defs.filter((d) => d.filterable && !d.filterTemplate).map((d) => this.describeColumn(d));
+        return defs.filter((d) => d.filterable).map((d) => this.describeColumn(d));
     }
     describeColumn(def) {
         const type = resolveFilterType(def);
@@ -8501,6 +8506,77 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }], propDecorators: { slot: [{ type: i0.Input, args: [{ isSignal: true, alias: "mozGridToolbarDef", required: false }] }] } });
 
+/**
+ * Marks a `<ng-template>` projected into `<moz-grid>` as the renderer for
+ * the empty state. Register one or two templates:
+ *
+ * ```html
+ * <moz-grid [data]="rows">
+ *   <ng-template mozGridEmptyDef>
+ *     <p>Aucune donnée pour le moment</p>
+ *   </ng-template>
+ *
+ *   <ng-template mozGridEmptyDef="no-results" let-ctx>
+ *     <p>Aucun résultat pour vos filtres ({{ ctx.activeFilterCount }})</p>
+ *     <button (click)="ctx.clearFilters()">Réinitialiser</button>
+ *   </ng-template>
+ * </moz-grid>
+ * ```
+ *
+ * The implicit context (`let-ctx`) exposes `{ activeFilterCount, clearFilters }`.
+ */
+class MozGridEmptyDef {
+    kind = input('no-data', { ...(ngDevMode ? { debugName: "kind" } : /* istanbul ignore next */ {}), alias: 'mozGridEmptyDef' });
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MozGridEmptyDef, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: MozGridEmptyDef, isStandalone: true, selector: "[mozGridEmptyDef]", inputs: { kind: { classPropertyName: "kind", publicName: "mozGridEmptyDef", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MozGridEmptyDef, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mozGridEmptyDef]',
+                }]
+        }], propDecorators: { kind: [{ type: i0.Input, args: [{ isSignal: true, alias: "mozGridEmptyDef", required: false }] }] } });
+
+/**
+ * Default empty-state shown by `<moz-grid>` when the body has no rows.
+ * Two visual variants are dispatched on the `kind` input:
+ *  - `'no-data'`    : the dataset is empty (folder icon, neutral copy).
+ *  - `'no-results'` : filters/search produced zero rows (search icon, CTA).
+ *
+ * Consumers can fully replace this component by projecting a
+ * `<ng-template mozGridEmptyDef>` into the grid; see `MozGridEmptyDef`.
+ */
+class MozGridEmptyStateComponent {
+    kind = input.required(...(ngDevMode ? [{ debugName: "kind" }] : /* istanbul ignore next */ []));
+    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    description = input('', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional CTA label. When falsy the button is not rendered. The grid
+     * shell wires this to "Clear filters" for the `no-results` variant.
+     */
+    actionLabel = input('', ...(ngDevMode ? [{ debugName: "actionLabel" }] : /* istanbul ignore next */ []));
+    action = output();
+    resolvedTitle = computed(() => {
+        if (this.title())
+            return this.title();
+        return this.kind() === 'no-results' ? 'No matching results' : 'No data to display';
+    }, ...(ngDevMode ? [{ debugName: "resolvedTitle" }] : /* istanbul ignore next */ []));
+    resolvedDescription = computed(() => {
+        if (this.description())
+            return this.description();
+        return this.kind() === 'no-results'
+            ? 'Try adjusting your filters or clearing them to see more rows.'
+            : 'There is nothing to show here yet.';
+    }, ...(ngDevMode ? [{ debugName: "resolvedDescription" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MozGridEmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MozGridEmptyStateComponent, isStandalone: true, selector: "moz-grid-empty-state", inputs: { kind: { classPropertyName: "kind", publicName: "kind", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, ngImport: i0, template: "<div\n  class=\"grid-empty-state\"\n  [class.grid-empty-state--no-results]=\"kind() === 'no-results'\"\n  role=\"status\"\n  aria-live=\"polite\"\n>\n  <div class=\"grid-empty-state__icon\" aria-hidden=\"true\">\n    @if (kind() === 'no-results') {\n    <Search48 />\n    } @else {\n    <Folder48 />\n    }\n  </div>\n\n  <p class=\"grid-empty-state__title\">{{ resolvedTitle() }}</p>\n\n  @if (resolvedDescription()) {\n  <p class=\"grid-empty-state__description\">{{ resolvedDescription() }}</p>\n  } @if (actionLabel()) {\n  <button moz-button [outlined]=\"true\" size=\"s\" (click)=\"action.emit()\">\n    {{ actionLabel() }}\n  </button>\n  }\n</div>\n", styles: [".grid-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:32px 24px;width:100%;height:100%;min-height:240px;color:var(--Text-Secondary, #555)}.grid-empty-state__icon{color:var(--Neutral-Grey-400, #97a1a8);margin-bottom:4px;display:inline-flex}.grid-empty-state__title{margin:0;font-size:16px;font-weight:600;color:var(--Text-Primary, #222)}.grid-empty-state__description{margin:0;max-width:360px;font-size:14px;line-height:1.4}.grid-empty-state--no-results .grid-empty-state__icon{color:var(--Status-Standalone-element-Primary, #0071ce)}\n"], dependencies: [{ kind: "component", type: Folder48, selector: "Folder48", inputs: ["hostClass"] }, { kind: "component", type: Search48, selector: "Search48", 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: MozGridEmptyStateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'moz-grid-empty-state', changeDetection: ChangeDetectionStrategy.OnPush, imports: [Folder48, Search48, MozButtonComponent], template: "<div\n  class=\"grid-empty-state\"\n  [class.grid-empty-state--no-results]=\"kind() === 'no-results'\"\n  role=\"status\"\n  aria-live=\"polite\"\n>\n  <div class=\"grid-empty-state__icon\" aria-hidden=\"true\">\n    @if (kind() === 'no-results') {\n    <Search48 />\n    } @else {\n    <Folder48 />\n    }\n  </div>\n\n  <p class=\"grid-empty-state__title\">{{ resolvedTitle() }}</p>\n\n  @if (resolvedDescription()) {\n  <p class=\"grid-empty-state__description\">{{ resolvedDescription() }}</p>\n  } @if (actionLabel()) {\n  <button moz-button [outlined]=\"true\" size=\"s\" (click)=\"action.emit()\">\n    {{ actionLabel() }}\n  </button>\n  }\n</div>\n", styles: [".grid-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:32px 24px;width:100%;height:100%;min-height:240px;color:var(--Text-Secondary, #555)}.grid-empty-state__icon{color:var(--Neutral-Grey-400, #97a1a8);margin-bottom:4px;display:inline-flex}.grid-empty-state__title{margin:0;font-size:16px;font-weight:600;color:var(--Text-Primary, #222)}.grid-empty-state__description{margin:0;max-width:360px;font-size:14px;line-height:1.4}.grid-empty-state--no-results .grid-empty-state__icon{color:var(--Status-Standalone-element-Primary, #0071ce)}\n"] }]
+        }], propDecorators: { kind: [{ type: i0.Input, args: [{ isSignal: true, alias: "kind", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], actionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionLabel", required: false }] }], action: [{ type: i0.Output, args: ["action"] }] } });
+
 class MozGridFilterBuilderComponent {
     model = input.required(...(ngDevMode ? [{ debugName: "model" }] : /* istanbul ignore next */ []));
     availableColumns = input.required(...(ngDevMode ? [{ debugName: "availableColumns" }] : /* istanbul ignore next */ []));
@@ -8627,7 +8703,7 @@ class MozGridFilterBuilderComponent {
         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 });
+    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;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,
@@ -8640,7 +8716,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         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"] }]
+                    ], 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;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))
@@ -8843,12 +8919,13 @@ class MozGridHeaderCellComponent {
     onMenuItemClick(item) {
         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) {
+        // "Filter in this column" always opens the conditions builder overlay
+        // anchored on the gear button, seeded on the current column. This stays
+        // true even when the column provides a `filterTemplate`: the inline
+        // header filter row (driven by the template) and the builder overlay
+        // are complementary — quick filter vs. advanced conditions — and must
+        // both be reachable from the column menu.
+        if (actionId === 'filter-column') {
             this.openFilterOverlay(field);
             return;
         }
@@ -10281,6 +10358,7 @@ class MozGridComponent {
     // --- Content children ---
     columnDefs = contentChildren(MozGridColumnDef, ...(ngDevMode ? [{ debugName: "columnDefs" }] : /* istanbul ignore next */ []));
     toolbarDefs = contentChildren(MozGridToolbarDef, ...(ngDevMode ? [{ debugName: "toolbarDefs" }] : /* istanbul ignore next */ []));
+    emptyDefs = contentChildren(MozGridEmptyDef, ...(ngDevMode ? [{ debugName: "emptyDefs" }] : /* istanbul ignore next */ []));
     // --- Inputs ---
     data = input([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
     mode = input('client', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
@@ -10297,6 +10375,17 @@ class MozGridComponent {
     fullscreen = input(false, ...(ngDevMode ? [{ debugName: "fullscreen" }] : /* istanbul ignore next */ []));
     reorderable = input(false, ...(ngDevMode ? [{ debugName: "reorderable" }] : /* istanbul ignore next */ []));
     stateKey = input(null, ...(ngDevMode ? [{ debugName: "stateKey" }] : /* istanbul ignore next */ []));
+    // --- Empty state customization ---
+    /** Title for the default "no data" empty state. */
+    emptyDataTitle = input('', ...(ngDevMode ? [{ debugName: "emptyDataTitle" }] : /* istanbul ignore next */ []));
+    /** Description for the default "no data" empty state. */
+    emptyDataDescription = input('', ...(ngDevMode ? [{ debugName: "emptyDataDescription" }] : /* istanbul ignore next */ []));
+    /** Title for the default "no results" empty state (active filters). */
+    noResultsTitle = input('', ...(ngDevMode ? [{ debugName: "noResultsTitle" }] : /* istanbul ignore next */ []));
+    /** Description for the default "no results" empty state. */
+    noResultsDescription = input('', ...(ngDevMode ? [{ debugName: "noResultsDescription" }] : /* istanbul ignore next */ []));
+    /** CTA label on the "no results" state. Empty disables the button. */
+    noResultsActionLabel = input('Clear filters', ...(ngDevMode ? [{ debugName: "noResultsActionLabel" }] : /* istanbul ignore next */ []));
     exportable = input(false, ...(ngDevMode ? [{ debugName: "exportable" }] : /* istanbul ignore next */ []));
     horizontalVirtualScroll = input(false, ...(ngDevMode ? [{ debugName: "horizontalVirtualScroll" }] : /* istanbul ignore next */ []));
     loadingStrategy = input('pagination', ...(ngDevMode ? [{ debugName: "loadingStrategy" }] : /* istanbul ignore next */ []));
@@ -10343,6 +10432,66 @@ class MozGridComponent {
         }));
     }, ...(ngDevMode ? [{ debugName: "activeFilters" }] : /* istanbul ignore next */ []));
     activeFilterCount = computed(() => this.filterEngine.conditions().length, ...(ngDevMode ? [{ debugName: "activeFilterCount" }] : /* istanbul ignore next */ []));
+    /**
+     * Kind of empty state to show, or `'none'` when rows are present:
+     *  - `'no-data'`    : no rows have been loaded (and the source is empty).
+     *  - `'no-results'` : the source has rows but the active filters yield 0.
+     *
+     * Loading and infinite-scroll loading-more states are *not* treated as
+     * empty (we let the loading indicator drive the UX instead).
+     */
+    emptyStateKind = computed(() => {
+        if (this.gridEngine.displayRows().length > 0)
+            return 'none';
+        if (this.state.isLoading())
+            return 'none';
+        const hasFilters = this.filterEngine.conditions().length > 0;
+        const sourceCount = this.state.mode() === 'server' ? this.state.totalItems() : this.state.sourceData().length;
+        // In server mode `totalItems` may not reflect filters, so trust active
+        // filters as the discriminator. Same heuristic in client mode.
+        if (hasFilters)
+            return 'no-results';
+        if (sourceCount === 0)
+            return 'no-data';
+        // Source has rows, no filters, but display is empty (e.g. group with no
+        // matching rows after pagination). Fall back to `no-results` which
+        // offers the "Clear filters" CTA — harmless when no filters are active
+        // because we hide the button when the count is zero.
+        return 'no-results';
+    }, ...(ngDevMode ? [{ debugName: "emptyStateKind" }] : /* istanbul ignore next */ []));
+    /** Resolves the projected `<ng-template mozGridEmptyDef>` for the kind. */
+    emptyTemplate = computed(() => {
+        const kind = this.emptyStateKind();
+        if (kind === 'none')
+            return null;
+        const defs = this.emptyDefs();
+        const exact = defs.find((d) => d.kind() === kind);
+        if (exact)
+            return exact.template;
+        // Fallback to a `no-data` template for the `no-results` kind.
+        return defs.find((d) => d.kind() === 'no-data')?.template ?? null;
+    }, ...(ngDevMode ? [{ debugName: "emptyTemplate" }] : /* istanbul ignore next */ []));
+    /** Context object exposed to projected empty-state templates. */
+    emptyContext = computed(() => ({
+        activeFilterCount: this.filterEngine.conditions().length,
+        clearFilters: () => this.filterEngine.clearAll(),
+    }), ...(ngDevMode ? [{ debugName: "emptyContext" }] : /* istanbul ignore next */ []));
+    /**
+     * Wrap the empty context for `ngTemplateOutlet` so consumers can use
+     * either `let-ctx` (positional, via `$implicit`) or named bindings
+     * (`let-clearFilters="clearFilters"`) without having to choose at
+     * declaration time.
+     */
+    emptyTemplateContext = computed(() => {
+        const ctx = this.emptyContext();
+        return { $implicit: ctx, ...ctx };
+    }, ...(ngDevMode ? [{ debugName: "emptyTemplateContext" }] : /* istanbul ignore next */ []));
+    /** CTA label for the default no-results state — hidden when no filters. */
+    resolvedNoResultsActionLabel = computed(() => {
+        if (this.filterEngine.conditions().length === 0)
+            return '';
+        return this.noResultsActionLabel();
+    }, ...(ngDevMode ? [{ debugName: "resolvedNoResultsActionLabel" }] : /* 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();
@@ -11195,6 +11344,27 @@ class MozGridComponent {
     getAllVisibleFields() {
         return this.state.visibleColumns().map((c) => c.field);
     }
+    /**
+     * Resolves a list of internal `HistoryCellChange` records into the public
+     * `BulkCellChange[]` shape exposed on bulk events. Looks up each row's
+     * configured id so consumers can persist changes without a second pass.
+     */
+    toBulkCellChanges(changes) {
+        if (changes.length === 0)
+            return [];
+        const data = this.state.sourceData();
+        const idField = this.state.rowIdField?.() ?? 'id';
+        return changes.map((c) => {
+            const row = data[c.rowIndex];
+            return {
+                rowIndex: c.rowIndex,
+                rowId: row ? row[idField] : undefined,
+                field: c.field,
+                oldValue: c.before,
+                newValue: c.after,
+            };
+        });
+    }
     clearSelectionAndCloseBar() {
         const mode = this.state.activeSelectionMode();
         if (mode === 'rows') {
@@ -11275,6 +11445,7 @@ class MozGridComponent {
                     data: pasteRows,
                     rowIds: this.getRowSelectionIds(event),
                     fields: this.getAllVisibleFields(),
+                    changes: this.toBulkCellChanges(changes),
                     selectionMode: 'rows',
                     rowSelection: event,
                 });
@@ -11331,6 +11502,7 @@ class MozGridComponent {
                 data: rows,
                 rowIds: this.getRangeRowIds(pasteRange),
                 fields: this.getRangeFields(pasteRange),
+                changes: this.toBulkCellChanges(allChanges),
             });
         }
         catch {
@@ -11376,6 +11548,7 @@ class MozGridComponent {
                 cellCount: event.count,
                 rowIds: this.getRowSelectionIds(event),
                 fields: this.getAllVisibleFields(),
+                changes: this.toBulkCellChanges(changes),
                 selectionMode: 'rows',
                 rowSelection: event,
             });
@@ -11401,6 +11574,7 @@ class MozGridComponent {
             cellCount: rows * colCount,
             rowIds: this.getRangeRowIds(range),
             fields: this.getRangeFields(range),
+            changes: this.toBulkCellChanges(changes),
         });
     }
     extractRangeData() {
@@ -11571,7 +11745,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 }, 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: [
+    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 }, emptyDataTitle: { classPropertyName: "emptyDataTitle", publicName: "emptyDataTitle", isSignal: true, isRequired: false, transformFunction: null }, emptyDataDescription: { classPropertyName: "emptyDataDescription", publicName: "emptyDataDescription", isSignal: true, isRequired: false, transformFunction: null }, noResultsTitle: { classPropertyName: "noResultsTitle", publicName: "noResultsTitle", isSignal: true, isRequired: false, transformFunction: null }, noResultsDescription: { classPropertyName: "noResultsDescription", publicName: "noResultsDescription", isSignal: true, isRequired: false, transformFunction: null }, noResultsActionLabel: { classPropertyName: "noResultsActionLabel", publicName: "noResultsActionLabel", 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,
@@ -11595,7 +11769,7 @@ class MozGridComponent {
             PaginationEngine,
             InfiniteScrollEngine,
             Overlay,
-        ], queries: [{ propertyName: "columnDefs", predicate: MozGridColumnDef, isSignal: true }, { propertyName: "toolbarDefs", predicate: MozGridToolbarDef, isSignal: true }], viewQueries: [{ propertyName: "gridBody", first: true, predicate: MozGridBodyComponent, descendants: true, isSignal: true }, { propertyName: "gridContainer", first: true, predicate: ["gridContainer"], descendants: true, isSignal: true }], ngImport: i0, template: `
+        ], queries: [{ propertyName: "columnDefs", predicate: MozGridColumnDef, isSignal: true }, { propertyName: "toolbarDefs", predicate: MozGridToolbarDef, isSignal: true }, { propertyName: "emptyDefs", predicate: MozGridEmptyDef, isSignal: true }], viewQueries: [{ propertyName: "gridBody", first: true, predicate: MozGridBodyComponent, descendants: true, isSignal: true }, { propertyName: "gridContainer", first: true, predicate: ["gridContainer"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="moz-grid-wrapper" [class.moz-grid-wrapper--fullscreen]="isFullscreen()">
       <!-- Toolbar (outside .moz-grid) -->
       <div class="moz-grid__toolbar">
@@ -11802,6 +11976,25 @@ class MozGridComponent {
           (rowSelectionToggle)="onRowSelectionToggle()"
         />
 
+        <!-- Empty state overlay (consumer template wins, fallback default) -->
+        @if (emptyStateKind() !== 'none') {
+        <div class="moz-grid__empty-overlay">
+          @if (emptyTemplate(); as tpl) {
+          <ng-container *ngTemplateOutlet="tpl; context: emptyTemplateContext()" />
+          } @else {
+          <moz-grid-empty-state
+            [kind]="$any(emptyStateKind())"
+            [title]="emptyStateKind() === 'no-results' ? noResultsTitle() : emptyDataTitle()"
+            [description]="
+              emptyStateKind() === 'no-results' ? noResultsDescription() : emptyDataDescription()
+            "
+            [actionLabel]="emptyStateKind() === 'no-results' ? resolvedNoResultsActionLabel() : ''"
+            (action)="onRemoveAllFilters()"
+          />
+          }
+        </div>
+        }
+
         <!-- Footer: pagination or infinite scroll loading indicator -->
         @if (showPagination()) {
         <moz-grid-footer
@@ -11822,7 +12015,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__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 });
+  `, 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__empty-overlay{position:absolute;inset:0;top:var(--moz-grid-header-height, 48px);display:flex;align-items:center;justify-content:center;background:var(--Background-Primary, #fff);z-index:1}.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: MozGridEmptyStateComponent, selector: "moz-grid-empty-state", inputs: ["kind", "title", "description", "actionLabel"], outputs: ["action"] }, { 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,
@@ -11857,6 +12050,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         MozGridFooterComponent,
                         MozGridLoadingIndicatorComponent,
                         MozGridSelectionBarComponent,
+                        MozGridEmptyStateComponent,
                         MozTagComponent,
                         MozIconButtonComponent,
                         ViewGridX420,
@@ -12076,6 +12270,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
           (rowSelectionToggle)="onRowSelectionToggle()"
         />
 
+        <!-- Empty state overlay (consumer template wins, fallback default) -->
+        @if (emptyStateKind() !== 'none') {
+        <div class="moz-grid__empty-overlay">
+          @if (emptyTemplate(); as tpl) {
+          <ng-container *ngTemplateOutlet="tpl; context: emptyTemplateContext()" />
+          } @else {
+          <moz-grid-empty-state
+            [kind]="$any(emptyStateKind())"
+            [title]="emptyStateKind() === 'no-results' ? noResultsTitle() : emptyDataTitle()"
+            [description]="
+              emptyStateKind() === 'no-results' ? noResultsDescription() : emptyDataDescription()
+            "
+            [actionLabel]="emptyStateKind() === 'no-results' ? resolvedNoResultsActionLabel() : ''"
+            (action)="onRemoveAllFilters()"
+          />
+          }
+        </div>
+        }
+
         <!-- Footer: pagination or infinite scroll loading indicator -->
         @if (showPagination()) {
         <moz-grid-footer
@@ -12096,8 +12309,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__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 }] }] } });
+  `, 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__empty-overlay{position:absolute;inset:0;top:var(--moz-grid-header-height, 48px);display:flex;align-items:center;justify-content:center;background:var(--Background-Primary, #fff);z-index:1}.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 }] }], emptyDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MozGridEmptyDef), { 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 }] }], emptyDataTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyDataTitle", required: false }] }], emptyDataDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyDataDescription", required: false }] }], noResultsTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsTitle", required: false }] }], noResultsDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsDescription", required: false }] }], noResultsActionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsActionLabel", 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',
@@ -13713,5 +13926,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_LISTBOX_CONFIG, ActionListboxContainerComponent, ActionListboxRef, BuiltInMenuComponent, CellSelectionEngine, CellValidationEngine, ColumnReorderEngine, ColumnResizeEngine, DEFAULT_ACTION_LISTBOX_CONFIG, DEFAULT_GRID_OPTIONS, DEFAULT_MODAL_CONFIG, DEFAULT_TOASTER_CONFIG, DRAWER_CONFIG, DRAWER_DATA, DrawerContainerComponent, ExpandableRowEngine, ExportEngine, FilterEngine, GridEngine, GridGroupDrawerComponent, GridSettingsDrawerComponent, GridStateManager, GroupEngine, HorizontalVirtualScrollEngine, InfiniteScrollEngine, InlineEditEngine, KeyboardEngine, MODAL_CONFIG, MODAL_DATA, MozAccordionComponent, MozAccordionContentComponent, MozAccordionHeaderComponent, MozAccordionPanelComponent, MozActionBottomBarComponent, MozActionListboxComponent, MozActionListboxTriggerDirective, MozAvatarComponent, MozBreadcrumbComponent, MozButtonComponent, MozCalloutComponent, MozCarouselComponent, MozCheckListMenuComponent, MozCheckboxComponent, MozCheckboxGroupComponent, MozCircularProgressBarComponent, MozComboboxComponent, MozComboboxHarness, MozComboboxOptionHarness, MozDatepickerComponent, MozDividerComponent, MozDrawerComponent, MozDrawerFooterDirective, MozDrawerRef, MozDrawerService, MozFieldComponent, MozFieldGroupComponent, MozFileUploaderComponent, MozFileUploaderItemComponent, MozFlagComponent, MozGridBodyComponent, MozGridCellComponent, MozGridColumnDef, MozGridColumnVisibilityPanelComponent, MozGridComponent, MozGridDetailRowComponent, MozGridFooterComponent, MozGridGroupRowComponent, MozGridHeaderCellComponent, MozGridHeaderComponent, MozGridHeaderMenuComponent, MozGridLoadingIndicatorComponent, MozGridRowComponent, MozGridToolbarDef, MozIconButtonComponent, MozKpiComponent, MozLinearProgressBarBufferComponent, MozLinearProgressBarPercentageComponent, MozLinkComponent, MozLoaderComponent, MozLoadingOverlayComponent, MozModalComponent, MozModalFooterDirective, MozModalRef, MozModalService, MozNavigationIndicatorComponent, MozNumberBadgeComponent, MozOverlayComponent, MozPageHeaderComponent, MozPaginationComponent, MozPasswordInputDirective, MozPhoneNumberComponent, MozPincodeInputComponent, MozPopoverComponent, MozPopoverFooterDirective, MozPopoverTriggerDirective, MozQuantitySelectorComponent, MozRadioComponent, MozRadioGroupComponent, MozSegmentedControlComponent, MozSelectComponent, MozSidebarComponent, MozStarRatingComponent, MozStatusBadgeComponent, MozStatusDotComponent, MozStatusMessageComponent, MozStatusNotificationComponent, MozStepperBottomBarComponent, MozStepperCompactComponent, MozStepperInlineComponent, MozStepperStackedComponent, MozTabComponent, MozTabsComponent, MozTagComponent, MozTextInput, MozTextarea, MozTileComponent, MozTileExpandableComponent, MozTileSelectableComponent, MozToasterComponent, MozToasterRef, MozToasterService, MozToggleComponent, MozTooltipComponent, MozTooltipDirective, MozTreeComponent, MozTreeNodeComponent, MozTreeNodeTemplateDirective, POPOVER_CONFIG, POPOVER_DATA, PaginationEngine, PopoverContainerComponent, PopoverRef, PopoverService, RowSelectionEngine, SortEngine, StatePersistenceEngine, TOASTER_CONFIG, TreeEngine, TreeKeyboardService, TreeSelectionService, TreeStateService, isSection, trackByField, trackDisplayRow };
+export { ACTION_LISTBOX_CONFIG, ActionListboxContainerComponent, ActionListboxRef, BuiltInMenuComponent, CellSelectionEngine, CellValidationEngine, ColumnReorderEngine, ColumnResizeEngine, DEFAULT_ACTION_LISTBOX_CONFIG, DEFAULT_GRID_OPTIONS, DEFAULT_MODAL_CONFIG, DEFAULT_TOASTER_CONFIG, DRAWER_CONFIG, DRAWER_DATA, DrawerContainerComponent, ExpandableRowEngine, ExportEngine, FilterEngine, GridEngine, GridGroupDrawerComponent, GridSettingsDrawerComponent, GridStateManager, GroupEngine, HorizontalVirtualScrollEngine, InfiniteScrollEngine, InlineEditEngine, KeyboardEngine, MODAL_CONFIG, MODAL_DATA, MozAccordionComponent, MozAccordionContentComponent, MozAccordionHeaderComponent, MozAccordionPanelComponent, MozActionBottomBarComponent, MozActionListboxComponent, MozActionListboxTriggerDirective, MozAvatarComponent, MozBreadcrumbComponent, MozButtonComponent, MozCalloutComponent, MozCarouselComponent, MozCheckListMenuComponent, MozCheckboxComponent, MozCheckboxGroupComponent, MozCircularProgressBarComponent, MozComboboxComponent, MozComboboxHarness, MozComboboxOptionHarness, MozDatepickerComponent, MozDividerComponent, MozDrawerComponent, MozDrawerFooterDirective, MozDrawerRef, MozDrawerService, MozFieldComponent, MozFieldGroupComponent, MozFileUploaderComponent, MozFileUploaderItemComponent, MozFlagComponent, MozGridBodyComponent, MozGridCellComponent, MozGridColumnDef, MozGridColumnVisibilityPanelComponent, MozGridComponent, MozGridDetailRowComponent, MozGridEmptyDef, MozGridFooterComponent, MozGridGroupRowComponent, MozGridHeaderCellComponent, MozGridHeaderComponent, MozGridHeaderMenuComponent, MozGridLoadingIndicatorComponent, MozGridRowComponent, MozGridToolbarDef, MozIconButtonComponent, MozKpiComponent, MozLinearProgressBarBufferComponent, MozLinearProgressBarPercentageComponent, MozLinkComponent, MozLoaderComponent, MozLoadingOverlayComponent, MozModalComponent, MozModalFooterDirective, MozModalRef, MozModalService, MozNavigationIndicatorComponent, MozNumberBadgeComponent, MozOverlayComponent, MozPageHeaderComponent, MozPaginationComponent, MozPasswordInputDirective, MozPhoneNumberComponent, MozPincodeInputComponent, MozPopoverComponent, MozPopoverFooterDirective, MozPopoverTriggerDirective, MozQuantitySelectorComponent, MozRadioComponent, MozRadioGroupComponent, MozSegmentedControlComponent, MozSelectComponent, MozSidebarComponent, MozStarRatingComponent, MozStatusBadgeComponent, MozStatusDotComponent, MozStatusMessageComponent, MozStatusNotificationComponent, MozStepperBottomBarComponent, MozStepperCompactComponent, MozStepperInlineComponent, MozStepperStackedComponent, MozTabComponent, MozTabsComponent, MozTagComponent, MozTextInput, MozTextarea, MozTileComponent, MozTileExpandableComponent, MozTileSelectableComponent, MozToasterComponent, MozToasterRef, MozToasterService, MozToggleComponent, MozTooltipComponent, MozTooltipDirective, MozTreeComponent, MozTreeNodeComponent, MozTreeNodeTemplateDirective, POPOVER_CONFIG, POPOVER_DATA, PaginationEngine, PopoverContainerComponent, PopoverRef, PopoverService, RowSelectionEngine, SortEngine, StatePersistenceEngine, TOASTER_CONFIG, TreeEngine, TreeKeyboardService, TreeSelectionService, TreeStateService, isSection, trackByField, trackDisplayRow };
 //# sourceMappingURL=mozaic-ds-angular.mjs.map