@mozaic-ds/angular 2.0.48 → 2.0.50

package/fesm2022/mozaic-ds-angular.mjs

@@ -5973,17 +5973,28 @@ function formatField(field) {
 /**
  * Render a structured ref as A1 notation using the column order from the
  * current grid context. Returns `#REF!` when the field is not visible.
+ * Same-row refs render as `[field]` surface shorthand.
  */
 function cellRefToA1(ref, fieldOrder) {
     const idx = fieldOrder.indexOf(ref.field);
     if (idx < 0)
         return '#REF!';
+    if (ref.sameRow)
+        return `[${ref.field}]`;
     const col = columnIndexToLetters(idx);
     return `${ref.absField ? '$' : ''}${col}${ref.absRow ? '$' : ''}${ref.row}`;
 }
-/** Render a structured ref as the long-form `REF(COLUMN("field"),ROW(N))`. */
+/**
+ * Render a structured ref as the long-form storage string. Same-row refs
+ * omit the ROW argument entirely (`REF(COLUMN("field"))`), which is the
+ * signal consumed by the parser and the ref-mapper to resolve against the
+ * host cell's row at evaluation time.
+ */
 function cellRefToLongForm(ref) {
-    return `REF(COLUMN("${ref.field.replace(/"/g, '""')}"),ROW(${ref.row}))`;
+    const field = ref.field.replace(/"/g, '""');
+    if (ref.sameRow)
+        return `REF(COLUMN("${field}"))`;
+    return `REF(COLUMN("${field}"),ROW(${ref.row}))`;
 }
 
 /**
@@ -7732,6 +7743,9 @@ const DEFAULT_FORMULA_FUNCTIONS = Object.freeze({
  *   REF(COLUMN("price"),ROW(8),"$C")   — absolute col, relative row ($A1)
  *   REF(COLUMN("price"),ROW(8),"$R")   — relative col, absolute row (A$1)
  *   REF(COLUMN("price"),ROW(8),"$CR")  — absolute both ($A$1)
+ *   REF(COLUMN("price"))               — same-row ref ([price] surface), no
+ *                                         ROW arg. Row resolves to the host
+ *                                         cell's row at evaluation time.
  *
  * Ranges use the same shape for each endpoint, joined with `:`.
  *
@@ -8040,8 +8054,10 @@ class RecursiveDescent {
         return { kind: 'call', name: upper, args };
     }
     /**
-     * Parse `REF(COLUMN("field"),ROW(N) [,"$C"|"$R"|"$CR"])` starting from
-     * just after the `REF` ident. Returns the `StructuredRef`.
+     * Parse `REF(COLUMN("field")[,ROW(N) [,"$C"|"$R"|"$CR"]])` starting from
+     * just after the `REF` ident. Returns the `StructuredRef`. A missing
+     * `ROW(...)` arg marks the ref as same-row (resolves against the host
+     * cell's row at evaluation time).
      */
     parseRefPrimitive(position) {
         this.expect('lparen');
@@ -8052,6 +8068,18 @@ class RecursiveDescent {
         this.expect('lparen');
         const fieldTok = this.expect('string');
         this.expect('rparen');
+        // Same-row form: `REF(COLUMN("field"))` — no ROW arg.
+        if (this.peek().type === 'rparen') {
+            this.cursor++;
+            void position;
+            return {
+                field: fieldTok.value,
+                row: 0,
+                absField: false,
+                absRow: false,
+                sameRow: true,
+            };
+        }
         this.expect('comma');
         const rowIdent = this.expect('ident');
         if (rowIdent.value.toUpperCase() !== 'ROW') {
@@ -8125,6 +8153,11 @@ class RecursiveDescent {
 function structuredRefToAddress(ref, ctx) {
     if (!ctx.fields.includes(ref.field))
         return undefined;
+    if (ref.sameRow) {
+        if (ctx.currentRowId === undefined)
+            return undefined;
+        return { rowId: ctx.currentRowId, field: ref.field };
+    }
     const rowId = ctx.rowIds[ref.row - 1];
     if (rowId === undefined)
         return undefined;
@@ -8136,10 +8169,28 @@ function structuredRefToAddress(ref, ctx) {
  * propagate `#REF!` per cell rather than blanket-failing the whole range.
  */
 function rangeToAddresses(start, end, ctx) {
-    const rowLo = Math.min(start.row, end.row);
-    const rowHi = Math.max(start.row, end.row);
     const startIdx = ctx.fields.indexOf(start.field);
     const endIdx = ctx.fields.indexOf(end.field);
+    // Same-row range `[a]:[c]` — one row (host), columns from a to c. Mixed
+    // same-row + explicit-row is nonsensical (the "a" endpoint has no row
+    // and "c" has a specific one) so we fail the whole range.
+    if (start.sameRow && end.sameRow) {
+        const rowId = ctx.currentRowId;
+        if (startIdx < 0 || endIdx < 0 || rowId === undefined)
+            return [undefined];
+        const colLo = Math.min(startIdx, endIdx);
+        const colHi = Math.max(startIdx, endIdx);
+        const out = [];
+        for (let c = colLo; c <= colHi; c++) {
+            const field = ctx.fields[c];
+            out.push(field ? { rowId, field } : undefined);
+        }
+        return out;
+    }
+    if (start.sameRow !== end.sameRow)
+        return [undefined];
+    const rowLo = Math.min(start.row, end.row);
+    const rowHi = Math.max(start.row, end.row);
     if (startIdx < 0 || endIdx < 0) {
         const cells = rowHi - rowLo + 1;
         return Array.from({ length: cells }, () => undefined);
@@ -8208,16 +8259,47 @@ function addressToA1(addr, ctx) {
  * (`foo1` is not a ref).
  */
 const A1_REF_RE = /(\$?)([A-Z]+)(\$?)(\d+)/g;
+/**
+ * Matches the `[field]` same-row surface shorthand. Field names may contain
+ * any chars except `]`; callers that need `]` in a field must fall back to
+ * the full `REF(COLUMN("…"))` form.
+ */
+const SAME_ROW_SURFACE_RE = /\[([^\]]+)\]/g;
 /**
  * Convert an A1-form source string to REF long-form storage. Refs that
  * point to unknown columns are replaced with a literal `#REF!` to match
  * Excel's convention for broken refs.
  *
- *   a1ToLongForm('=A1+B2', ctx)
+ * When `ctx.currentRowId` is known, relative refs pointing at the current
+ * row (`=B5` on row 5, neither `$` lock set) collapse to same-row storage
+ * (`REF(COLUMN("field"))` with no ROW arg). This preserves the "one
+ * formula covers every row" property across an edit → commit round-trip
+ * when the user only views / tweaks the formula without changing rows.
+ *
+ *   a1ToLongForm('=A1+B2', ctx)                        // no currentRowId
  *     → '=REF(COLUMN("price"),ROW(1))+REF(COLUMN("qty"),ROW(2))'
+ *   a1ToLongForm('=A1*B1', { ...ctx, currentRowId: 'r_1' })
+ *     → '=REF(COLUMN("price"))*REF(COLUMN("qty"))'   // collapsed to same-row
+ *   a1ToLongForm('=[price]*[qty]', ctx)
+ *     → '=REF(COLUMN("price"))*REF(COLUMN("qty"))'
  */
 function a1ToLongForm(source, ctx) {
-    return replaceOutsideStrings(source, (body) => body.replace(A1_REF_RE, (match, absCol, letters, absRow, digits, offset, full) => {
+    // Index of the host row in the display order. Used below to detect refs
+    // that point at the current row and can therefore collapse to same-row
+    // storage. `-1` when unknown or unresolved — the collapse is skipped in
+    // that case and refs remain explicit-row.
+    const currentRowIndex = ctx.currentRowId !== undefined ? ctx.rowIds.indexOf(ctx.currentRowId) : -1;
+    // Pass 1: `[field]` → `REF(COLUMN("field"))`. Runs first so the A1 scan in
+    // pass 2 never sees letters+digits *inside* a user-authored `[A1]`.
+    const afterSameRow = replaceOutsideStrings(source, (body) => body.replace(SAME_ROW_SURFACE_RE, (_match, rawField) => {
+        if (!ctx.fields.includes(rawField))
+            return '#REF!';
+        return `REF(COLUMN("${rawField.replace(/"/g, '""')}"))`;
+    }));
+    // Pass 2: A1 refs. A separate `replaceOutsideStrings` run so the freshly
+    // introduced `"…"` quoting from pass 1 is honoured — otherwise the `A1`
+    // in `REF(COLUMN("A1"))` would be rewritten a second time.
+    return replaceOutsideStrings(afterSameRow, (body) => body.replace(A1_REF_RE, (match, absCol, letters, absRow, digits, offset, full) => {
         if (isIdentLikeContext(full, offset, match.length))
             return match;
         // `ATAN2(…)` — letters+digits followed by `(` is a function call.
@@ -8228,11 +8310,28 @@ function a1ToLongForm(source, ctx) {
         const row = Number(digits);
         if (!field || !Number.isFinite(row) || row < 1)
             return '#REF!';
+        const isAbsField = absCol === '$';
+        const isAbsRow = absRow === '$';
+        // Collapse to same-row storage when: we know the host row, the ref
+        // targets exactly that row, and neither axis is locked. Locked refs
+        // (`$…`) convey "always this row / column" and must stay explicit.
+        if (currentRowIndex >= 0 &&
+            row === currentRowIndex + 1 &&
+            !isAbsRow &&
+            !isAbsField) {
+            return formatRefLongFormWithLocks({
+                field,
+                row: 0,
+                absField: false,
+                absRow: false,
+                sameRow: true,
+            });
+        }
         const ref = {
             field,
             row,
-            absField: absCol === '$',
-            absRow: absRow === '$',
+            absField: isAbsField,
+            absRow: isAbsRow,
         };
         return formatRefLongFormWithLocks(ref);
     }));
@@ -8241,11 +8340,37 @@ function a1ToLongForm(source, ctx) {
  * Convert REF long-form storage to A1 surface for display. Tolerant —
  * unknown fields and out-of-range rows become `#REF!` in the output.
  *
+ * Same-row storage (`REF(COLUMN("field"))`, no ROW) renders as a concrete
+ * A1 ref tied to the **host row** when `ctx.currentRowId` is provided —
+ * this matches spreadsheet intuition (a cell on row 5 shows `=C5*D5`, a
+ * cell on row 6 shows `=C6*D6`). Without a host row (tests, offline tools),
+ * it falls back to the `[field]` bracket shorthand that round-trips losslessly.
+ *
  *   longFormToA1('=REF(COLUMN("price"),ROW(1))+1', ctx)
  *     → '=A1+1'
+ *   longFormToA1('=REF(COLUMN("price"))*REF(COLUMN("qty"))', ctxRow1)
+ *     → '=A1*B1'                            // with currentRowId → row 1
+ *   longFormToA1('=REF(COLUMN("price"))*REF(COLUMN("qty"))', ctx)
+ *     → '=[price]*[qty]'                    // no currentRowId → fallback
  */
 function longFormToA1(source, ctx) {
     let out = source;
+    // Resolve the host row once — undefined when the caller didn't provide
+    // one or the id is not in the current window. When undefined, same-row
+    // refs render in bracket form so they still round-trip through a1ToLongForm.
+    const hostRow = ctx.currentRowId !== undefined ? ctx.rowIds.indexOf(ctx.currentRowId) + 1 : 0;
+    // Same-row form first: `REF(COLUMN("field"))` → `B5` (host row) or `[field]`
+    // (no host row). Must run before the row-form regex because they share the
+    // `REF(COLUMN("…")` prefix; the row-form regex does not match the no-ROW
+    // shape, so order is about clarity rather than correctness.
+    const SAME_ROW_RE = /REF\(COLUMN\("((?:[^"]|"")*)"\)\)/g;
+    out = out.replace(SAME_ROW_RE, (_match, rawField) => {
+        const field = rawField.replace(/""/g, '"');
+        if (hostRow >= 1) {
+            return cellRefToA1({ field, row: hostRow, absField: false, absRow: false }, ctx.fields);
+        }
+        return cellRefToA1({ field, row: 0, absField: false, absRow: false, sameRow: true }, ctx.fields);
+    });
     // Naive scan: find every `REF(COLUMN("…"),ROW(N)[,"…"])` call.
     // The ref grammar is simple enough that a regex is sufficient here.
     const RE = /REF\(COLUMN\("((?:[^"]|"")*)"\),ROW\((\d+)\)(?:,"(\$C|\$R|\$CR)")?\)/g;
@@ -8264,6 +8389,10 @@ function longFormToA1(source, ctx) {
  */
 function formatRefLongFormWithLocks(ref) {
     const base = cellRefToLongForm(ref);
+    // Same-row refs use the `REF(COLUMN("…"))` shape — no ROW to lock. Locks
+    // aren't meaningful there, so we leave the base string untouched.
+    if (ref.sameRow)
+        return base;
     if (!ref.absField && !ref.absRow)
         return base;
     const lock = ref.absField && ref.absRow ? '$CR' : ref.absField ? '$C' : '$R';
@@ -10874,9 +11003,18 @@ class FormulaRefHighlightService {
     palette = new FormulaRefPalette();
     highlightsSignal = signal([], ...(ngDevMode ? [{ debugName: "highlightsSignal" }] : /* istanbul ignore next */ []));
     isActiveSignal = signal(false, ...(ngDevMode ? [{ debugName: "isActiveSignal" }] : /* istanbul ignore next */ []));
+    isPickModeSignal = signal(false, ...(ngDevMode ? [{ debugName: "isPickModeSignal" }] : /* istanbul ignore next */ []));
     isPickDraggingSignal = signal(false, ...(ngDevMode ? [{ debugName: "isPickDraggingSignal" }] : /* istanbul ignore next */ []));
     highlights = this.highlightsSignal.asReadonly();
+    /** `true` while any formula editor is active — used by cells/headers to
+     *  render ref-color borders and column-letter badges. Orthogonal to
+     *  pick mode: a text-only editor (e.g. the formula bar) still marks itself
+     *  active so highlights appear, but never flips pick mode on. */
     isActive = this.isActiveSignal.asReadonly();
+    /** `true` when cell clicks should be intercepted to insert refs into the
+     *  active editor. The formula bar deliberately disables this to keep its
+     *  input purely text-driven. */
+    isPickMode = this.isPickModeSignal.asReadonly();
     /** `true` between `pickRangeStart` and `pickRangeCommit` — used by cells
      *  to know that a mouseenter should extend the range being built. */
     isPickDragging = this.isPickDraggingSignal.asReadonly();
@@ -10893,17 +11031,26 @@ class FormulaRefHighlightService {
     pickHandler = null;
     /**
      * Called by the editor on mount. Registers the handler used by cells
-     * to dispatch pick events. Flipping `isActive` on is what switches the
-     * grid cells into "pick mode" (no focus stealing, no commit on click).
+     * to dispatch pick events.
+     *
+     * `isActive` flips on unconditionally so cells paint ref-color borders
+     * and headers show column-letter badges — the *visual* feedback is
+     * useful in both inline and formula-bar editors.
+     *
+     * `pickMode` (default `true`) controls whether cell clicks are
+     * intercepted to insert refs. The formula bar passes `false` so typing
+     * stays keyboard-only and normal cell selection keeps working.
      */
-    activate(handler) {
+    activate(handler, options) {
         this.pickHandler = handler;
         this.isActiveSignal.set(true);
+        this.isPickModeSignal.set(options?.pickMode ?? true);
     }
     /** Called on editor teardown. Resets state + palette. */
     deactivate() {
         this.pickHandler = null;
         this.isActiveSignal.set(false);
+        this.isPickModeSignal.set(false);
         this.isPickDraggingSignal.set(false);
         this.highlightsSignal.set([]);
         this.palette.clear();
@@ -12089,6 +12236,30 @@ function tokenizeFormulaEditor(source, options = {}) {
             out.push({ kind: 'string', text: source.slice(start, i), start, end: i });
             continue;
         }
+        // Same-row ref surface: `[field]`. Emitted as a ref token so the
+        // coloured overlay picks it up and the click-to-pick machinery can
+        // replace it in place. An unclosed `[…` is still emitted (field is the
+        // tail) so highlights update live while the user types.
+        if (ch === '[') {
+            const start = i;
+            i++;
+            while (i < len && source[i] !== ']')
+                i++;
+            const hasClose = i < len;
+            if (hasClose)
+                i++;
+            const text = source.slice(start, i);
+            const inner = hasClose ? text.slice(1, -1) : text.slice(1);
+            const field = fieldOrder.includes(inner) ? inner : '';
+            out.push({
+                kind: 'ref',
+                text,
+                start,
+                end: i,
+                ref: { field, row: 0, absField: false, absRow: false, sameRow: true },
+            });
+            continue;
+        }
         // A1 cell ref: `$?LETTERS$?DIGITS`. Detected before identifier scan so
         // `A1` is a ref, not an ident `A` + number `1`.
         const refMatch = tryScanA1(source, i, fieldOrder);
@@ -12348,6 +12519,13 @@ class MozGridFormulaEditorComponent {
      * back to `cellEditState` to derive it from the inline edit coord.
      */
     editingAddr = input(null, ...(ngDevMode ? [{ debugName: "editingAddr" }] : /* istanbul ignore next */ []));
+    /**
+     * When `true`, the editor behaves as a plain text field: no click-to-pick
+     * from grid cells, and no ref-color painting of referenced cells. Used by
+     * the formula bar, where picking-by-click competes with normal cell
+     * selection and confuses users.
+     */
+    disableCellPick = input(false, ...(ngDevMode ? [{ debugName: "disableCellPick" }] : /* istanbul ignore next */ []));
     valueChange = output();
     commit = output();
     cancel = output();
@@ -12454,12 +12632,16 @@ class MozGridFormulaEditorComponent {
             this.highlight.setHighlights(highlights);
         });
         afterNextRender(() => {
+            // Activate unconditionally so referenced cells paint their ref-color
+            // borders and headers show column-letter badges. `pickMode` gates the
+            // click-to-pick behaviour alone — the formula bar opts out because
+            // cell clicks there compete with normal cell selection.
             this.highlight.activate({
                 pickCell: (addr, opts) => this.handlePickCell(addr, opts),
                 pickRangeStart: (addr, opts) => this.handlePickRangeStart(addr, opts),
                 pickRangeExtend: (end) => this.handlePickRangeExtend(end),
                 pickRangeCommit: () => this.handlePickRangeCommit(),
-            });
+            }, { pickMode: !this.disableCellPick() });
             this.focus();
         });
         this.destroyRef.onDestroy(() => this.highlight.deactivate());
@@ -12687,12 +12869,12 @@ class MozGridFormulaEditorComponent {
             overlay.scrollLeft = el.scrollLeft;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MozGridFormulaEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MozGridFormulaEditorComponent, isStandalone: true, selector: "moz-grid-formula-editor", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, editingAddr: { classPropertyName: "editingAddr", publicName: "editingAddr", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", commit: "commit", cancel: "cancel" }, viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["input"], descendants: true, isSignal: true }, { propertyName: "origin", first: true, predicate: CdkOverlayOrigin, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"moz-grid-formula-editor\" cdkOverlayOrigin>\n  <div class=\"moz-grid-formula-editor__overlay\" aria-hidden=\"true\">\n    @for (seg of overlaySegments(); track $index) {\n      @if (seg.color) {\n        <span class=\"moz-grid-formula-editor__ref\" [style.color]=\"seg.color\">{{ seg.text }}</span>\n      } @else {\n        <span>{{ seg.text }}</span>\n      }\n    }\n  </div>\n  <input\n    #input\n    class=\"moz-grid-formula-editor__input\"\n    type=\"text\"\n    role=\"combobox\"\n    aria-autocomplete=\"list\"\n    [attr.aria-expanded]=\"panelOpen()\"\n    [attr.aria-controls]=\"panelOpen() ? 'moz-grid-formula-editor-listbox' : null\"\n    [attr.aria-activedescendant]=\"panelOpen() ? 'moz-grid-formula-editor-option-' + selectedIndex() : null\"\n    spellcheck=\"false\"\n    autocomplete=\"off\"\n    autocapitalize=\"off\"\n    [value]=\"value()\"\n    (input)=\"onInput($event)\"\n    (keydown)=\"onKeyDown($event)\"\n    (keyup)=\"onCaretProbe($event)\"\n    (click)=\"onCaretProbe($event)\"\n    (select)=\"onCaretProbe($event)\"\n    (scroll)=\"onScroll($event)\"\n  />\n</div>\n\n<ng-template\n  [cdkConnectedOverlayOrigin]=\"origin()\"\n  [cdkConnectedOverlayOpen]=\"panelOpen()\"\n  [cdkConnectedOverlayPositions]=\"panelPositions\"\n  [cdkConnectedOverlayHasBackdrop]=\"false\"\n  cdkConnectedOverlay\n  (overlayOutsideClick)=\"closePanel()\"\n>\n  <ul\n    id=\"moz-grid-formula-editor-listbox\"\n    class=\"moz-grid-formula-editor__panel\"\n    role=\"listbox\"\n  >\n    @for (s of suggestions(); track s.name; let i = $index) {\n      <li\n        class=\"moz-grid-formula-editor__option\"\n        [class.moz-grid-formula-editor__option--selected]=\"i === selectedIndex()\"\n        [id]=\"'moz-grid-formula-editor-option-' + i\"\n        role=\"option\"\n        [attr.aria-selected]=\"i === selectedIndex()\"\n        (mousedown)=\"onSuggestionMouseDown($event, i)\"\n        (mouseenter)=\"onSuggestionMouseEnter(i)\"\n      >\n        <span class=\"moz-grid-formula-editor__option-name\">{{ s.name }}</span>\n        @if (s.signature) {\n          <span class=\"moz-grid-formula-editor__option-signature\">{{ s.signature }}</span>\n        }\n        @if (s.summary) {\n          <span class=\"moz-grid-formula-editor__option-summary\">{{ s.summary }}</span>\n        }\n      </li>\n    }\n  </ul>\n</ng-template>\n\n<div\n  class=\"moz-grid-formula-editor__a11y-live\"\n  role=\"status\"\n  aria-live=\"polite\"\n>\n  @if (panelOpen()) {\n    {{ suggestions().length }} suggestions. {{ suggestions()[selectedIndex()]?.name }} s\u00E9lectionn\u00E9.\n  }\n</div>\n", styles: [".moz-grid-formula-editor{position:relative;width:100%;height:100%;display:flex;align-items:center;min-width:0}.moz-grid-formula-editor__overlay{position:absolute;inset:0;margin:0;padding:0;pointer-events:none;white-space:pre;overflow:hidden;display:flex;align-items:center;font-family:inherit;font-size:var(--font-size-s, 14px);line-height:1;color:var(--color-text-primary)}.moz-grid-formula-editor__overlay>span{white-space:pre}.moz-grid-formula-editor__ref{font-weight:600}.moz-grid-formula-editor__input{position:relative;width:100%;border:none;outline:none;background:transparent;font-family:inherit;font-size:var(--font-size-s, 14px);line-height:1;padding:0;height:100%;min-width:0;box-sizing:border-box;color:transparent;-webkit-text-fill-color:transparent;caret-color:var(--color-text-primary)}.moz-grid-formula-editor__input::selection{background:#1a73e840}.moz-grid-formula-editor__panel{list-style:none;margin:0;padding:4px 0;min-width:240px;max-height:280px;overflow-y:auto;background:var(--color-background-primary, #fff);border:1px solid var(--color-border-primary, #dadce0);border-radius:6px;box-shadow:0 2px 8px #3c404326,0 4px 12px #3c40431a;font-family:inherit;font-size:var(--font-size-s, 14px);color:var(--color-text-primary)}.moz-grid-formula-editor__option{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:8px;row-gap:0;padding:6px 12px;cursor:pointer;line-height:1.35}.moz-grid-formula-editor__option:hover,.moz-grid-formula-editor__option--selected{background:var(--color-background-accent, rgba(26, 115, 232, .08))}.moz-grid-formula-editor__option-name{font-weight:600;grid-column:1;grid-row:1}.moz-grid-formula-editor__option-signature{grid-column:2;grid-row:1;color:var(--color-text-secondary, #5f6368);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--font-size-xs, 12px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.moz-grid-formula-editor__option-summary{grid-column:1/span 2;grid-row:2;color:var(--color-text-secondary, #5f6368);font-size:var(--font-size-xs, 12px)}.moz-grid-formula-editor__a11y-live{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MozGridFormulaEditorComponent, isStandalone: true, selector: "moz-grid-formula-editor", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, editingAddr: { classPropertyName: "editingAddr", publicName: "editingAddr", isSignal: true, isRequired: false, transformFunction: null }, disableCellPick: { classPropertyName: "disableCellPick", publicName: "disableCellPick", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", commit: "commit", cancel: "cancel" }, viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["input"], descendants: true, isSignal: true }, { propertyName: "origin", first: true, predicate: CdkOverlayOrigin, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"moz-grid-formula-editor\" cdkOverlayOrigin>\n  <div class=\"moz-grid-formula-editor__overlay\" aria-hidden=\"true\">\n    @for (seg of overlaySegments(); track $index) {\n      @if (seg.color) {\n        <span class=\"moz-grid-formula-editor__ref\" [style.color]=\"seg.color\">{{ seg.text }}</span>\n      } @else {\n        <span>{{ seg.text }}</span>\n      }\n    }\n  </div>\n  <input\n    #input\n    class=\"moz-grid-formula-editor__input\"\n    type=\"text\"\n    role=\"combobox\"\n    aria-autocomplete=\"list\"\n    [attr.aria-expanded]=\"panelOpen()\"\n    [attr.aria-controls]=\"panelOpen() ? 'moz-grid-formula-editor-listbox' : null\"\n    [attr.aria-activedescendant]=\"panelOpen() ? 'moz-grid-formula-editor-option-' + selectedIndex() : null\"\n    spellcheck=\"false\"\n    autocomplete=\"off\"\n    autocapitalize=\"off\"\n    [value]=\"value()\"\n    (input)=\"onInput($event)\"\n    (keydown)=\"onKeyDown($event)\"\n    (keyup)=\"onCaretProbe($event)\"\n    (click)=\"onCaretProbe($event)\"\n    (select)=\"onCaretProbe($event)\"\n    (scroll)=\"onScroll($event)\"\n  />\n</div>\n\n<ng-template\n  [cdkConnectedOverlayOrigin]=\"origin()\"\n  [cdkConnectedOverlayOpen]=\"panelOpen()\"\n  [cdkConnectedOverlayPositions]=\"panelPositions\"\n  [cdkConnectedOverlayHasBackdrop]=\"false\"\n  cdkConnectedOverlay\n  (overlayOutsideClick)=\"closePanel()\"\n>\n  <ul\n    id=\"moz-grid-formula-editor-listbox\"\n    class=\"moz-grid-formula-editor__panel\"\n    role=\"listbox\"\n  >\n    @for (s of suggestions(); track s.name; let i = $index) {\n      <li\n        class=\"moz-grid-formula-editor__option\"\n        [class.moz-grid-formula-editor__option--selected]=\"i === selectedIndex()\"\n        [id]=\"'moz-grid-formula-editor-option-' + i\"\n        role=\"option\"\n        [attr.aria-selected]=\"i === selectedIndex()\"\n        (mousedown)=\"onSuggestionMouseDown($event, i)\"\n        (mouseenter)=\"onSuggestionMouseEnter(i)\"\n      >\n        <span class=\"moz-grid-formula-editor__option-name\">{{ s.name }}</span>\n        @if (s.signature) {\n          <span class=\"moz-grid-formula-editor__option-signature\">{{ s.signature }}</span>\n        }\n        @if (s.summary) {\n          <span class=\"moz-grid-formula-editor__option-summary\">{{ s.summary }}</span>\n        }\n      </li>\n    }\n  </ul>\n</ng-template>\n\n<div\n  class=\"moz-grid-formula-editor__a11y-live\"\n  role=\"status\"\n  aria-live=\"polite\"\n>\n  @if (panelOpen()) {\n    {{ suggestions().length }} suggestions. {{ suggestions()[selectedIndex()]?.name }} s\u00E9lectionn\u00E9.\n  }\n</div>\n", styles: [".moz-grid-formula-editor{position:relative;width:100%;height:100%;display:flex;align-items:center;min-width:0}.moz-grid-formula-editor__overlay{position:absolute;inset:0;margin:0;padding:0;pointer-events:none;white-space:pre;overflow:hidden;display:flex;align-items:center;font-family:inherit;font-size:var(--font-size-s, 14px);line-height:1;color:var(--color-text-primary)}.moz-grid-formula-editor__overlay>span{white-space:pre}.moz-grid-formula-editor__ref{font-weight:600}.moz-grid-formula-editor__input{position:relative;width:100%;border:none;outline:none;background:transparent;font-family:inherit;font-size:var(--font-size-s, 14px);line-height:1;padding:0;height:100%;min-width:0;box-sizing:border-box;color:transparent;-webkit-text-fill-color:transparent;caret-color:var(--color-text-primary)}.moz-grid-formula-editor__input::selection{background:#1a73e840}.moz-grid-formula-editor__panel{list-style:none;margin:0;padding:4px 0;min-width:240px;max-height:280px;overflow-y:auto;background:var(--color-background-primary, #fff);border:1px solid var(--color-border-primary, #dadce0);border-radius:6px;box-shadow:0 2px 8px #3c404326,0 4px 12px #3c40431a;font-family:inherit;font-size:var(--font-size-s, 14px);color:var(--color-text-primary)}.moz-grid-formula-editor__option{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:8px;row-gap:0;padding:6px 12px;cursor:pointer;line-height:1.35}.moz-grid-formula-editor__option:hover,.moz-grid-formula-editor__option--selected{background:var(--color-background-accent, rgba(26, 115, 232, .08))}.moz-grid-formula-editor__option-name{font-weight:600;grid-column:1;grid-row:1}.moz-grid-formula-editor__option-signature{grid-column:2;grid-row:1;color:var(--color-text-secondary, #5f6368);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--font-size-xs, 12px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.moz-grid-formula-editor__option-summary{grid-column:1/span 2;grid-row:2;color:var(--color-text-secondary, #5f6368);font-size:var(--font-size-xs, 12px)}.moz-grid-formula-editor__a11y-live{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MozGridFormulaEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'moz-grid-formula-editor', standalone: true, imports: [CdkConnectedOverlay, CdkOverlayOrigin], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"moz-grid-formula-editor\" cdkOverlayOrigin>\n  <div class=\"moz-grid-formula-editor__overlay\" aria-hidden=\"true\">\n    @for (seg of overlaySegments(); track $index) {\n      @if (seg.color) {\n        <span class=\"moz-grid-formula-editor__ref\" [style.color]=\"seg.color\">{{ seg.text }}</span>\n      } @else {\n        <span>{{ seg.text }}</span>\n      }\n    }\n  </div>\n  <input\n    #input\n    class=\"moz-grid-formula-editor__input\"\n    type=\"text\"\n    role=\"combobox\"\n    aria-autocomplete=\"list\"\n    [attr.aria-expanded]=\"panelOpen()\"\n    [attr.aria-controls]=\"panelOpen() ? 'moz-grid-formula-editor-listbox' : null\"\n    [attr.aria-activedescendant]=\"panelOpen() ? 'moz-grid-formula-editor-option-' + selectedIndex() : null\"\n    spellcheck=\"false\"\n    autocomplete=\"off\"\n    autocapitalize=\"off\"\n    [value]=\"value()\"\n    (input)=\"onInput($event)\"\n    (keydown)=\"onKeyDown($event)\"\n    (keyup)=\"onCaretProbe($event)\"\n    (click)=\"onCaretProbe($event)\"\n    (select)=\"onCaretProbe($event)\"\n    (scroll)=\"onScroll($event)\"\n  />\n</div>\n\n<ng-template\n  [cdkConnectedOverlayOrigin]=\"origin()\"\n  [cdkConnectedOverlayOpen]=\"panelOpen()\"\n  [cdkConnectedOverlayPositions]=\"panelPositions\"\n  [cdkConnectedOverlayHasBackdrop]=\"false\"\n  cdkConnectedOverlay\n  (overlayOutsideClick)=\"closePanel()\"\n>\n  <ul\n    id=\"moz-grid-formula-editor-listbox\"\n    class=\"moz-grid-formula-editor__panel\"\n    role=\"listbox\"\n  >\n    @for (s of suggestions(); track s.name; let i = $index) {\n      <li\n        class=\"moz-grid-formula-editor__option\"\n        [class.moz-grid-formula-editor__option--selected]=\"i === selectedIndex()\"\n        [id]=\"'moz-grid-formula-editor-option-' + i\"\n        role=\"option\"\n        [attr.aria-selected]=\"i === selectedIndex()\"\n        (mousedown)=\"onSuggestionMouseDown($event, i)\"\n        (mouseenter)=\"onSuggestionMouseEnter(i)\"\n      >\n        <span class=\"moz-grid-formula-editor__option-name\">{{ s.name }}</span>\n        @if (s.signature) {\n          <span class=\"moz-grid-formula-editor__option-signature\">{{ s.signature }}</span>\n        }\n        @if (s.summary) {\n          <span class=\"moz-grid-formula-editor__option-summary\">{{ s.summary }}</span>\n        }\n      </li>\n    }\n  </ul>\n</ng-template>\n\n<div\n  class=\"moz-grid-formula-editor__a11y-live\"\n  role=\"status\"\n  aria-live=\"polite\"\n>\n  @if (panelOpen()) {\n    {{ suggestions().length }} suggestions. {{ suggestions()[selectedIndex()]?.name }} s\u00E9lectionn\u00E9.\n  }\n</div>\n", styles: [".moz-grid-formula-editor{position:relative;width:100%;height:100%;display:flex;align-items:center;min-width:0}.moz-grid-formula-editor__overlay{position:absolute;inset:0;margin:0;padding:0;pointer-events:none;white-space:pre;overflow:hidden;display:flex;align-items:center;font-family:inherit;font-size:var(--font-size-s, 14px);line-height:1;color:var(--color-text-primary)}.moz-grid-formula-editor__overlay>span{white-space:pre}.moz-grid-formula-editor__ref{font-weight:600}.moz-grid-formula-editor__input{position:relative;width:100%;border:none;outline:none;background:transparent;font-family:inherit;font-size:var(--font-size-s, 14px);line-height:1;padding:0;height:100%;min-width:0;box-sizing:border-box;color:transparent;-webkit-text-fill-color:transparent;caret-color:var(--color-text-primary)}.moz-grid-formula-editor__input::selection{background:#1a73e840}.moz-grid-formula-editor__panel{list-style:none;margin:0;padding:4px 0;min-width:240px;max-height:280px;overflow-y:auto;background:var(--color-background-primary, #fff);border:1px solid var(--color-border-primary, #dadce0);border-radius:6px;box-shadow:0 2px 8px #3c404326,0 4px 12px #3c40431a;font-family:inherit;font-size:var(--font-size-s, 14px);color:var(--color-text-primary)}.moz-grid-formula-editor__option{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:8px;row-gap:0;padding:6px 12px;cursor:pointer;line-height:1.35}.moz-grid-formula-editor__option:hover,.moz-grid-formula-editor__option--selected{background:var(--color-background-accent, rgba(26, 115, 232, .08))}.moz-grid-formula-editor__option-name{font-weight:600;grid-column:1;grid-row:1}.moz-grid-formula-editor__option-signature{grid-column:2;grid-row:1;color:var(--color-text-secondary, #5f6368);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--font-size-xs, 12px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.moz-grid-formula-editor__option-summary{grid-column:1/span 2;grid-row:2;color:var(--color-text-secondary, #5f6368);font-size:var(--font-size-xs, 12px)}.moz-grid-formula-editor__a11y-live{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], editingAddr: [{ type: i0.Input, args: [{ isSignal: true, alias: "editingAddr", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], commit: [{ type: i0.Output, args: ["commit"] }], cancel: [{ type: i0.Output, args: ["cancel"] }], inputEl: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], origin: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkOverlayOrigin), { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], editingAddr: [{ type: i0.Input, args: [{ isSignal: true, alias: "editingAddr", required: false }] }], disableCellPick: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableCellPick", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], commit: [{ type: i0.Output, args: ["commit"] }], cancel: [{ type: i0.Output, args: ["cancel"] }], inputEl: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], origin: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkOverlayOrigin), { isSignal: true }] }] } });
 
 class MozGridCellComponent {
     state = inject(GridStateManager);
@@ -12953,7 +13135,7 @@ class MozGridCellComponent {
         // Formula pick mode: a formula editor is active elsewhere. Clicking a
         // cell inserts its reference into the editor instead of starting a
         // selection. The editor keeps the focus; we must not focus the grid.
-        if (this.refHighlight?.isActive() && !this.isEditing()) {
+        if (this.refHighlight?.isPickMode() && !this.isEditing()) {
             // Double-click wins over pick: abandon the formula edit so the
             // target cell can open its own editor on the upcoming dblclick.
             if (event.detail >= 2) {
@@ -13059,15 +13241,23 @@ class MozGridCellComponent {
             if (overlay)
                 return;
         }
-        // Use setTimeout to let any pending interactions complete before committing
+        // Defer the commit so pending interactions can settle. In particular,
+        // typing `=` in the plain text input mounts the formula editor in its
+        // place — the old input's removal fires `focusout` with a null
+        // `relatedTarget` (focus lands on `<body>` for a tick), but the new
+        // formula input grabs focus in its own `afterNextRender`. Re-check
+        // `activeElement` here so we don't commit out from under it.
         setTimeout(() => {
-            if (this.isEditing()) {
-                this.commitEdit.emit();
-            }
+            if (!this.isEditing())
+                return;
+            const active = document.activeElement;
+            if (active instanceof Node && editorDiv.contains(active))
+                return;
+            this.commitEdit.emit();
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MozGridCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MozGridCellComponent, isStandalone: true, selector: "moz-grid-cell", inputs: { row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: true, transformFunction: null }, colIndex: { classPropertyName: "colIndex", publicName: "colIndex", isSignal: true, isRequired: true, transformFunction: null }, colState: { classPropertyName: "colState", publicName: "colState", isSignal: true, isRequired: true, transformFunction: null }, def: { classPropertyName: "def", publicName: "def", isSignal: true, isRequired: true, transformFunction: null }, isLast: { classPropertyName: "isLast", publicName: "isLast", isSignal: true, isRequired: false, transformFunction: null }, pinnedEnd: { classPropertyName: "pinnedEnd", publicName: "pinnedEnd", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { commitEdit: "commitEdit", cancelEdit: "cancelEdit" }, host: { properties: { "style.flex": "isLast() ? \"1 0 auto\" : \"0 0 auto\"", "style.width.px": "isLast() ? undefined : colState().currentWidth", "style.min-width.px": "isLast() ? colState().currentWidth : resolvedMinWidth()" } }, ngImport: i0, template: "<div\n  class=\"grid-cell\"\n  [class.grid-cell--focused]=\"isFocused()\"\n  [class.grid-cell--in-range]=\"isInRange()\"\n  [class.grid-cell--in-fill-range]=\"isInFillRange()\"\n  [class.grid-cell--in-fill-reject-range]=\"isInFillRejectRange()\"\n  [class.grid-cell--cut]=\"cutEdges().any\"\n  [class.grid-cell--last]=\"isLast()\"\n  [class.grid-cell--pinned-end]=\"pinnedEnd()\"\n  [class.grid-cell--readonly]=\"!def().editable\"\n  [class.grid-cell--error]=\"cellError()\"\n  [class.grid-cell--formula-error]=\"hasFormulaError()\"\n  [class.grid-cell--ref-highlight]=\"refHighlightColor()\"\n  [style.--moz-grid-ref-color]=\"refHighlightColor()\"\n  [attr.aria-invalid]=\"cellError() ? 'true' : null\"\n  (click)=\"onCellClick($event)\"\n  (dblclick)=\"onDoubleClick()\"\n  (mousedown)=\"onMouseDown($event)\"\n  (mouseenter)=\"onMouseEnter()\"\n>\n  @if (isEditing()) {\n  <div class=\"grid-cell__editor\" (focusout)=\"onEditorBlur($event)\">\n    @if (isFormulaEditing()) {\n    <moz-grid-formula-editor\n      [value]=\"$any(editState().draftValue)\"\n      (valueChange)=\"updateDraftFn($event)\"\n      (commit)=\"commitEditFn()\"\n      (cancel)=\"onFormulaCancel()\"\n    />\n    } @else if (editTemplate()) {\n    <div class=\"grid-cell__editor-custom\">\n      <ng-container\n        [ngTemplateOutlet]=\"editTemplate()!\"\n        [ngTemplateOutletContext]=\"{\n          $implicit: value(),\n          row: row(),\n          field: def().field,\n          draft: editState().draftValue,\n          updateDraft: updateDraftFn,\n          commitEdit: commitEditFn\n        }\"\n      />\n    </div>\n    } @else { @switch (editorType()) {  @case ('text') {\n    <input\n      class=\"grid-cell__input grid-cell__input--plain\"\n      type=\"text\"\n      [value]=\"editState().draftValue\"\n      (input)=\"onEditorInput($event)\"\n    />\n    } @case ('number') {\n    <input\n      class=\"grid-cell__input grid-cell__input--plain\"\n      type=\"number\"\n      [value]=\"editState().draftValue\"\n      (input)=\"onEditorInput($event)\"\n    />\n    } @case ('select') {\n    <moz-select\n      name=\"cell-editor\"\n      [options]=\"def().cellEditorOptions ?? []\"\n      [ngModel]=\"editState().draftValue\"\n      (change)=\"onSelectChange($event)\"\n      [size]=\"'s'\"\n    />\n    } @case ('checkbox') {\n    <moz-checkbox\n      [id]=\"'grid-cell-editor-' + rowIndex() + '-' + colIndex()\"\n      [ngModel]=\"!!editState().draftValue\"\n      (change)=\"onCheckboxChange($event)\"\n    />\n    } @case ('date') {\n    <moz-datepicker\n      [id]=\"'grid-cell-editor-' + rowIndex() + '-' + colIndex()\"\n      size=\"s\"\n      [ngModel]=\"editState().draftValue\"\n      (ngModelChange)=\"onDateChange($event)\"\n    />\n    } @default {\n    <input\n      class=\"grid-cell__input grid-cell__input--plain\"\n      type=\"text\"\n      [value]=\"editState().draftValue\"\n      (input)=\"onEditorInput($event)\"\n    />\n    } } }\n  </div>\n  } @else { @if (cellTemplate()) {\n  <div class=\"grid-cell__custom\">\n    <ng-container\n      [ngTemplateOutlet]=\"cellTemplate()!\"\n      [ngTemplateOutletContext]=\"{ $implicit: value(), row: row(), field: def().field }\"\n    />\n  </div>\n  } @else {\n  <span class=\"grid-cell__value\">{{ displayValue() }}</span>\n  } } @if (cutEdges(); as edges) { @if (edges.top) {\n  <div class=\"grid-cell__cut-mark grid-cell__cut-mark--top\"></div>\n  } @if (edges.bottom) {\n  <div class=\"grid-cell__cut-mark grid-cell__cut-mark--bottom\"></div>\n  } @if (edges.left) {\n  <div class=\"grid-cell__cut-mark grid-cell__cut-mark--left\"></div>\n  } @if (edges.right) {\n  <div class=\"grid-cell__cut-mark grid-cell__cut-mark--right\"></div>\n  } } @if (isFocused() && !isEditing() && def().editable) {\n  <div class=\"grid-cell__fill-handle\" (mousedown)=\"onFillHandleMouseDown($event)\"></div>\n  } @if (cellError(); as error) {\n  <div\n    class=\"grid-cell__error-icon\"\n    [mozTooltip]=\"error.message\"\n    tooltipPosition=\"top\"\n    aria-label=\"Erreur de validation\"\n  >\n    <ErrorFilled24 />\n  </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;height:100%;min-width:0}.grid-cell{display:flex;align-items:center;position:relative;padding:0 var(--spacing-s, 8px);height:100%;border-right:1px solid var(--color-border-primary);overflow:hidden;box-sizing:border-box;min-width:0;background:inherit;cursor:pointer}.grid-cell--last{border-right:none}.grid-cell--pinned-end{border-right:none;border-left:1px solid var(--color-border-primary)}:host(:first-child) .grid-cell--pinned-end{border-left:none}.grid-cell__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--font-size-s, 14px);color:var(--color-text-primary);position:relative;z-index:1}.grid-cell__editor{width:100%;min-width:0;max-width:100%;height:100%;display:flex;align-items:center;overflow:hidden;box-sizing:border-box;position:relative;z-index:1}.grid-cell__editor-custom{width:100%;min-width:0;max-width:100%;overflow:hidden;box-sizing:border-box;display:flex;align-items:center;flex-wrap:wrap;gap:4px}.grid-cell__editor input,.grid-cell__editor moz-select{width:100%;min-width:0;box-sizing:border-box}.grid-cell__input--plain{border:none;outline:none;background:transparent;font-family:inherit;font-size:var(--font-size-s, 14px);color:var(--color-text-primary);padding:0;height:100%;width:100%;min-width:0;box-sizing:border-box}.grid-cell__input--plain:focus{outline:none}.grid-cell__input--plain[type=number]::-webkit-inner-spin-button,.grid-cell__input--plain[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.grid-cell__input--plain[type=number]{-moz-appearance:textfield}.grid-cell__editor ::ng-deep .text-input{width:100%;min-width:0;box-sizing:border-box}.grid-cell__editor ::ng-deep .select,.grid-cell__editor ::ng-deep .select__trigger{min-width:0;width:100%}.grid-cell__editor ::ng-deep *{max-width:100%}.grid-cell__editor moz-datepicker{width:100%;min-width:0;box-sizing:border-box}.grid-cell__editor ::ng-deep .mc-datepicker,.grid-cell__editor ::ng-deep .mc-text-input{width:100%;min-width:0;box-sizing:border-box;height:28px;font-size:var(--font-size-xs, 12px)}.grid-cell__editor ::ng-deep moz-datepicker label{display:none}.grid-cell>*:not(.grid-cell__fill-handle){position:relative;z-index:1}.grid-cell:before{content:\"\";position:absolute;inset:3px;border-radius:4px;pointer-events:none;z-index:0}.grid-cell:hover:before{background:#f1f3f4}.grid-cell--focused:hover:before,.grid-cell--in-range:hover:before,.grid-cell--in-fill-range:hover:before,.grid-cell--in-fill-reject-range:hover:before{background:transparent}.grid-cell--focused{z-index:2}.grid-cell--focused:after{content:\"\";position:absolute;inset:0;border:2px solid var(--color-background-accent-inverse);border-radius:4px;pointer-events:none}.grid-cell--ref-highlight{z-index:2}.grid-cell--ref-highlight:after{content:\"\";position:absolute;inset:0;border:2px solid var(--moz-grid-ref-color, transparent);border-radius:4px;pointer-events:none;z-index:3}.grid-cell--in-range{background:var(--color-background-accent)}.grid-cell--readonly .grid-cell__value{color:var(--color-text-secondary, #666)}.grid-cell--in-fill-range{background:#34a85314}.grid-cell--in-fill-range:after{content:\"\";position:absolute;inset:0;border:1px dashed var(--color-success, #34a853);border-radius:4px;pointer-events:none}.grid-cell--in-fill-reject-range{background:#ea302d1f;cursor:not-allowed;z-index:2}.grid-cell--in-fill-reject-range:after{content:\"\";position:absolute;inset:0;border:2px dashed var(--Status-Standalone-element-Error, #ea302d);border-radius:4px;pointer-events:none;z-index:3}.grid-cell--cut{background:#1a73e80f}.grid-cell__cut-mark{position:absolute;pointer-events:none;z-index:5;--cut-color: var(--color-background-accent-inverse, #1a73e8)}.grid-cell__cut-mark--top,.grid-cell__cut-mark--bottom{left:0;right:0;height:2px;background-image:linear-gradient(90deg,var(--cut-color) 50%,transparent 50%);background-size:8px 2px;background-repeat:repeat-x;animation:moz-grid-marching-ants-x .5s linear infinite}.grid-cell__cut-mark--top{top:0}.grid-cell__cut-mark--bottom{bottom:0}.grid-cell__cut-mark--left,.grid-cell__cut-mark--right{top:0;bottom:0;width:2px;background-image:linear-gradient(180deg,var(--cut-color) 50%,transparent 50%);background-size:2px 8px;background-repeat:repeat-y;animation:moz-grid-marching-ants-y .5s linear infinite}.grid-cell__cut-mark--left{left:0}.grid-cell__cut-mark--right{right:0}@keyframes moz-grid-marching-ants-x{0%{background-position-x:0}to{background-position-x:8px}}@keyframes moz-grid-marching-ants-y{0%{background-position-y:0}to{background-position-y:8px}}.grid-cell__fill-handle{position:absolute;right:0;bottom:0;width:8px;height:8px;background:var(--color-background-accent-inverse);cursor:crosshair;z-index:4}.grid-cell--error{outline:1px solid var(--Status-Border-Error, #ef5f5c);outline-offset:-2px;z-index:1;border-radius:4px}.grid-cell--error:hover:before{background:transparent}.grid-cell--formula-error .grid-cell__value{color:var(--Status-Text-Error, #d0021b);font-style:italic}.grid-cell__error-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:auto;cursor:help;position:relative;z-index:2;fill:var(--Status-Standalone-element-Error, #ea302d)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MozSelectComponent, selector: "moz-select", inputs: ["id", "name", "options", "placeholder", "isInvalid", "disabled", "readonly", "size"] }, { kind: "component", type: MozCheckboxComponent, selector: "moz-checkbox", inputs: ["id", "name", "label", "indeterminate", "isInvalid", "disabled", "indented"] }, { kind: "component", type: MozDatepickerComponent, selector: "moz-datepicker", inputs: ["id", "disabled", "readonly", "invalid", "error", "clearable", "size", "label"] }, { kind: "directive", type: MozTooltipDirective, selector: "[mozTooltip]", inputs: ["mozTooltip", "tooltipPosition", "tooltipNoPointer"] }, { kind: "component", type: ErrorFilled24, selector: "ErrorFilled24", inputs: ["hostClass"] }, { kind: "component", type: MozGridFormulaEditorComponent, selector: "moz-grid-formula-editor", inputs: ["value", "locale", "editingAddr"], outputs: ["valueChange", "commit", "cancel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MozGridCellComponent, isStandalone: true, selector: "moz-grid-cell", inputs: { row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: true, transformFunction: null }, colIndex: { classPropertyName: "colIndex", publicName: "colIndex", isSignal: true, isRequired: true, transformFunction: null }, colState: { classPropertyName: "colState", publicName: "colState", isSignal: true, isRequired: true, transformFunction: null }, def: { classPropertyName: "def", publicName: "def", isSignal: true, isRequired: true, transformFunction: null }, isLast: { classPropertyName: "isLast", publicName: "isLast", isSignal: true, isRequired: false, transformFunction: null }, pinnedEnd: { classPropertyName: "pinnedEnd", publicName: "pinnedEnd", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { commitEdit: "commitEdit", cancelEdit: "cancelEdit" }, host: { properties: { "style.flex": "isLast() ? \"1 0 auto\" : \"0 0 auto\"", "style.width.px": "isLast() ? undefined : colState().currentWidth", "style.min-width.px": "isLast() ? colState().currentWidth : resolvedMinWidth()" } }, ngImport: i0, template: "<div\n  class=\"grid-cell\"\n  [class.grid-cell--focused]=\"isFocused()\"\n  [class.grid-cell--in-range]=\"isInRange()\"\n  [class.grid-cell--in-fill-range]=\"isInFillRange()\"\n  [class.grid-cell--in-fill-reject-range]=\"isInFillRejectRange()\"\n  [class.grid-cell--cut]=\"cutEdges().any\"\n  [class.grid-cell--last]=\"isLast()\"\n  [class.grid-cell--pinned-end]=\"pinnedEnd()\"\n  [class.grid-cell--readonly]=\"!def().editable\"\n  [class.grid-cell--error]=\"cellError()\"\n  [class.grid-cell--formula-error]=\"hasFormulaError()\"\n  [class.grid-cell--ref-highlight]=\"refHighlightColor()\"\n  [style.--moz-grid-ref-color]=\"refHighlightColor()\"\n  [attr.aria-invalid]=\"cellError() ? 'true' : null\"\n  (click)=\"onCellClick($event)\"\n  (dblclick)=\"onDoubleClick()\"\n  (mousedown)=\"onMouseDown($event)\"\n  (mouseenter)=\"onMouseEnter()\"\n>\n  @if (isEditing()) {\n  <div class=\"grid-cell__editor\" (focusout)=\"onEditorBlur($event)\">\n    @if (isFormulaEditing()) {\n    <moz-grid-formula-editor\n      [value]=\"$any(editState().draftValue)\"\n      (valueChange)=\"updateDraftFn($event)\"\n      (commit)=\"commitEditFn()\"\n      (cancel)=\"onFormulaCancel()\"\n    />\n    } @else if (editTemplate()) {\n    <div class=\"grid-cell__editor-custom\">\n      <ng-container\n        [ngTemplateOutlet]=\"editTemplate()!\"\n        [ngTemplateOutletContext]=\"{\n          $implicit: value(),\n          row: row(),\n          field: def().field,\n          draft: editState().draftValue,\n          updateDraft: updateDraftFn,\n          commitEdit: commitEditFn\n        }\"\n      />\n    </div>\n    } @else { @switch (editorType()) {  @case ('text') {\n    <input\n      class=\"grid-cell__input grid-cell__input--plain\"\n      type=\"text\"\n      [value]=\"editState().draftValue\"\n      (input)=\"onEditorInput($event)\"\n    />\n    } @case ('number') {\n    <input\n      class=\"grid-cell__input grid-cell__input--plain\"\n      type=\"number\"\n      [value]=\"editState().draftValue\"\n      (input)=\"onEditorInput($event)\"\n    />\n    } @case ('select') {\n    <moz-select\n      name=\"cell-editor\"\n      [options]=\"def().cellEditorOptions ?? []\"\n      [ngModel]=\"editState().draftValue\"\n      (change)=\"onSelectChange($event)\"\n      [size]=\"'s'\"\n    />\n    } @case ('checkbox') {\n    <moz-checkbox\n      [id]=\"'grid-cell-editor-' + rowIndex() + '-' + colIndex()\"\n      [ngModel]=\"!!editState().draftValue\"\n      (change)=\"onCheckboxChange($event)\"\n    />\n    } @case ('date') {\n    <moz-datepicker\n      [id]=\"'grid-cell-editor-' + rowIndex() + '-' + colIndex()\"\n      size=\"s\"\n      [ngModel]=\"editState().draftValue\"\n      (ngModelChange)=\"onDateChange($event)\"\n    />\n    } @default {\n    <input\n      class=\"grid-cell__input grid-cell__input--plain\"\n      type=\"text\"\n      [value]=\"editState().draftValue\"\n      (input)=\"onEditorInput($event)\"\n    />\n    } } }\n  </div>\n  } @else { @if (cellTemplate()) {\n  <div class=\"grid-cell__custom\">\n    <ng-container\n      [ngTemplateOutlet]=\"cellTemplate()!\"\n      [ngTemplateOutletContext]=\"{ $implicit: value(), row: row(), field: def().field }\"\n    />\n  </div>\n  } @else {\n  <span class=\"grid-cell__value\">{{ displayValue() }}</span>\n  } } @if (cutEdges(); as edges) { @if (edges.top) {\n  <div class=\"grid-cell__cut-mark grid-cell__cut-mark--top\"></div>\n  } @if (edges.bottom) {\n  <div class=\"grid-cell__cut-mark grid-cell__cut-mark--bottom\"></div>\n  } @if (edges.left) {\n  <div class=\"grid-cell__cut-mark grid-cell__cut-mark--left\"></div>\n  } @if (edges.right) {\n  <div class=\"grid-cell__cut-mark grid-cell__cut-mark--right\"></div>\n  } } @if (isFocused() && !isEditing() && def().editable) {\n  <div class=\"grid-cell__fill-handle\" (mousedown)=\"onFillHandleMouseDown($event)\"></div>\n  } @if (cellError(); as error) {\n  <div\n    class=\"grid-cell__error-icon\"\n    [mozTooltip]=\"error.message\"\n    tooltipPosition=\"top\"\n    aria-label=\"Erreur de validation\"\n  >\n    <ErrorFilled24 />\n  </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;height:100%;min-width:0}.grid-cell{display:flex;align-items:center;position:relative;padding:0 var(--spacing-s, 8px);height:100%;border-right:1px solid var(--color-border-primary);overflow:hidden;box-sizing:border-box;min-width:0;background:inherit;cursor:pointer}.grid-cell--last{border-right:none}.grid-cell--pinned-end{border-right:none;border-left:1px solid var(--color-border-primary)}:host(:first-child) .grid-cell--pinned-end{border-left:none}.grid-cell__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--font-size-s, 14px);color:var(--color-text-primary);position:relative;z-index:1}.grid-cell__editor{width:100%;min-width:0;max-width:100%;height:100%;display:flex;align-items:center;overflow:hidden;box-sizing:border-box;position:relative;z-index:1}.grid-cell__editor-custom{width:100%;min-width:0;max-width:100%;overflow:hidden;box-sizing:border-box;display:flex;align-items:center;flex-wrap:wrap;gap:4px}.grid-cell__editor input,.grid-cell__editor moz-select{width:100%;min-width:0;box-sizing:border-box}.grid-cell__input--plain{border:none;outline:none;background:transparent;font-family:inherit;font-size:var(--font-size-s, 14px);color:var(--color-text-primary);padding:0;height:100%;width:100%;min-width:0;box-sizing:border-box}.grid-cell__input--plain:focus{outline:none}.grid-cell__input--plain[type=number]::-webkit-inner-spin-button,.grid-cell__input--plain[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.grid-cell__input--plain[type=number]{-moz-appearance:textfield}.grid-cell__editor ::ng-deep .text-input{width:100%;min-width:0;box-sizing:border-box}.grid-cell__editor ::ng-deep .select,.grid-cell__editor ::ng-deep .select__trigger{min-width:0;width:100%}.grid-cell__editor ::ng-deep *{max-width:100%}.grid-cell__editor moz-datepicker{width:100%;min-width:0;box-sizing:border-box}.grid-cell__editor ::ng-deep .mc-datepicker,.grid-cell__editor ::ng-deep .mc-text-input{width:100%;min-width:0;box-sizing:border-box;height:28px;font-size:var(--font-size-xs, 12px)}.grid-cell__editor ::ng-deep moz-datepicker label{display:none}.grid-cell>*:not(.grid-cell__fill-handle){position:relative;z-index:1}.grid-cell:before{content:\"\";position:absolute;inset:3px;border-radius:4px;pointer-events:none;z-index:0}.grid-cell:hover:before{background:#f1f3f4}.grid-cell--focused:hover:before,.grid-cell--in-range:hover:before,.grid-cell--in-fill-range:hover:before,.grid-cell--in-fill-reject-range:hover:before{background:transparent}.grid-cell--focused{z-index:2}.grid-cell--focused:after{content:\"\";position:absolute;inset:0;border:2px solid var(--color-background-accent-inverse);border-radius:4px;pointer-events:none}.grid-cell--ref-highlight{z-index:2}.grid-cell--ref-highlight:after{content:\"\";position:absolute;inset:0;border:2px solid var(--moz-grid-ref-color, transparent);border-radius:4px;pointer-events:none;z-index:3}.grid-cell--in-range{background:var(--color-background-accent)}.grid-cell--readonly .grid-cell__value{color:var(--color-text-secondary, #666)}.grid-cell--in-fill-range{background:#34a85314}.grid-cell--in-fill-range:after{content:\"\";position:absolute;inset:0;border:1px dashed var(--color-success, #34a853);border-radius:4px;pointer-events:none}.grid-cell--in-fill-reject-range{background:#ea302d1f;cursor:not-allowed;z-index:2}.grid-cell--in-fill-reject-range:after{content:\"\";position:absolute;inset:0;border:2px dashed var(--Status-Standalone-element-Error, #ea302d);border-radius:4px;pointer-events:none;z-index:3}.grid-cell--cut{background:#1a73e80f}.grid-cell__cut-mark{position:absolute;pointer-events:none;z-index:5;--cut-color: var(--color-background-accent-inverse, #1a73e8)}.grid-cell__cut-mark--top,.grid-cell__cut-mark--bottom{left:0;right:0;height:2px;background-image:linear-gradient(90deg,var(--cut-color) 50%,transparent 50%);background-size:8px 2px;background-repeat:repeat-x;animation:moz-grid-marching-ants-x .5s linear infinite}.grid-cell__cut-mark--top{top:0}.grid-cell__cut-mark--bottom{bottom:0}.grid-cell__cut-mark--left,.grid-cell__cut-mark--right{top:0;bottom:0;width:2px;background-image:linear-gradient(180deg,var(--cut-color) 50%,transparent 50%);background-size:2px 8px;background-repeat:repeat-y;animation:moz-grid-marching-ants-y .5s linear infinite}.grid-cell__cut-mark--left{left:0}.grid-cell__cut-mark--right{right:0}@keyframes moz-grid-marching-ants-x{0%{background-position-x:0}to{background-position-x:8px}}@keyframes moz-grid-marching-ants-y{0%{background-position-y:0}to{background-position-y:8px}}.grid-cell__fill-handle{position:absolute;right:0;bottom:0;width:8px;height:8px;background:var(--color-background-accent-inverse);cursor:crosshair;z-index:4}.grid-cell--error{outline:1px solid var(--Status-Border-Error, #ef5f5c);outline-offset:-2px;z-index:1;border-radius:4px}.grid-cell--error:hover:before{background:transparent}.grid-cell--formula-error .grid-cell__value{color:var(--Status-Text-Error, #d0021b);font-style:italic}.grid-cell__error-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:auto;cursor:help;position:relative;z-index:2;fill:var(--Status-Standalone-element-Error, #ea302d)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MozSelectComponent, selector: "moz-select", inputs: ["id", "name", "options", "placeholder", "isInvalid", "disabled", "readonly", "size"] }, { kind: "component", type: MozCheckboxComponent, selector: "moz-checkbox", inputs: ["id", "name", "label", "indeterminate", "isInvalid", "disabled", "indented"] }, { kind: "component", type: MozDatepickerComponent, selector: "moz-datepicker", inputs: ["id", "disabled", "readonly", "invalid", "error", "clearable", "size", "label"] }, { kind: "directive", type: MozTooltipDirective, selector: "[mozTooltip]", inputs: ["mozTooltip", "tooltipPosition", "tooltipNoPointer"] }, { kind: "component", type: ErrorFilled24, selector: "ErrorFilled24", inputs: ["hostClass"] }, { kind: "component", type: MozGridFormulaEditorComponent, selector: "moz-grid-formula-editor", inputs: ["value", "locale", "editingAddr", "disableCellPick"], outputs: ["valueChange", "commit", "cancel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MozGridCellComponent, decorators: [{
             type: Component,
@@ -15751,6 +15941,7 @@ class MozGridComponent {
             class="moz-grid__formula-bar-editor"
             [value]="formulaBarDraft() ?? ''"
             [editingAddr]="formulaBarEditingAddr()"
+            [disableCellPick]="true"
             (valueChange)="onFormulaBarEditorChange($event)"
             (commit)="onFormulaBarEditorCommit()"
             (cancel)="onFormulaBarEditorCancel()"
@@ -15842,7 +16033,7 @@ class MozGridComponent {
         />
       </div>
     </div>
-  `, isInline: true, styles: [":host{display:block;height:100%;--moz-grid-ref-color-0: #1a73e8;--moz-grid-ref-color-1: #d93025;--moz-grid-ref-color-2: #188038;--moz-grid-ref-color-3: #e37400;--moz-grid-ref-color-4: #8430ce;--moz-grid-ref-color-5: #009e95;--moz-grid-ref-color-6: #c5221f;--moz-grid-ref-color-7: #5f6368}.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__formula-bar{display:flex;align-items:stretch;flex-shrink:0;height:32px;border:1px solid var(--Border-Primary, #cdd4d8);border-radius:var(--border-radius-s, 4px);background:var(--color-background-primary, #fff);font-family:var(--font-family-monospace, ui-monospace, SFMono-Regular, Menlo, monospace);font-size:var(--font-size-s, 13px);overflow:hidden}.moz-grid__formula-bar-addr{display:flex;align-items:center;justify-content:center;min-width:72px;padding:0 8px;border-right:1px solid var(--Border-Primary, #cdd4d8);color:var(--color-text-primary);font-weight:600;-webkit-user-select:text;user-select:text}.moz-grid__formula-bar-fx{display:flex;align-items:center;justify-content:center;width:32px;border-right:1px solid var(--Border-Primary, #cdd4d8);color:var(--color-text-secondary);font-style:italic;font-weight:500}.moz-grid__formula-bar-content{flex:1;min-width:0;display:flex;align-items:stretch;overflow:hidden}.moz-grid__formula-bar-input{flex:1;min-width:0;padding:0 10px;color:var(--color-text-primary);font:inherit;background:transparent;border:none;outline:none;text-overflow:ellipsis;white-space:nowrap}.moz-grid__formula-bar-input:focus{outline:2px solid var(--color-border-accent, #1a73e8);outline-offset:-2px;border-radius:var(--border-radius-xs, 2px)}.moz-grid__formula-bar-input:disabled{color:var(--color-text-secondary);cursor:not-allowed}.moz-grid__formula-bar-editor{flex:1;min-width:0;display:flex;align-items:stretch}.moz-grid__formula-bar-editor .moz-grid-formula-editor,.moz-grid__formula-bar-editor .moz-grid-formula-editor__input{width:100%;height:100%}.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: Calculator20, selector: "Calculator20", inputs: ["hostClass"] }, { kind: "component", type: MozButtonComponent, selector: "button[moz-button]", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "iconPosition", "type", "isLoading"] }, { kind: "component", type: MozGridFormulaEditorComponent, selector: "moz-grid-formula-editor", inputs: ["value", "locale", "editingAddr"], outputs: ["valueChange", "commit", "cancel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;height:100%;--moz-grid-ref-color-0: #1a73e8;--moz-grid-ref-color-1: #d93025;--moz-grid-ref-color-2: #188038;--moz-grid-ref-color-3: #e37400;--moz-grid-ref-color-4: #8430ce;--moz-grid-ref-color-5: #009e95;--moz-grid-ref-color-6: #c5221f;--moz-grid-ref-color-7: #5f6368}.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__formula-bar{display:flex;align-items:stretch;flex-shrink:0;height:32px;border:1px solid var(--Border-Primary, #cdd4d8);border-radius:var(--border-radius-s, 4px);background:var(--color-background-primary, #fff);font-family:var(--font-family-monospace, ui-monospace, SFMono-Regular, Menlo, monospace);font-size:var(--font-size-s, 13px);overflow:hidden}.moz-grid__formula-bar-addr{display:flex;align-items:center;justify-content:center;min-width:72px;padding:0 8px;border-right:1px solid var(--Border-Primary, #cdd4d8);color:var(--color-text-primary);font-weight:600;-webkit-user-select:text;user-select:text}.moz-grid__formula-bar-fx{display:flex;align-items:center;justify-content:center;width:32px;border-right:1px solid var(--Border-Primary, #cdd4d8);color:var(--color-text-secondary);font-style:italic;font-weight:500}.moz-grid__formula-bar-content{flex:1;min-width:0;display:flex;align-items:stretch;overflow:hidden}.moz-grid__formula-bar-input{flex:1;min-width:0;padding:0 10px;color:var(--color-text-primary);font:inherit;background:transparent;border:none;outline:none;text-overflow:ellipsis;white-space:nowrap}.moz-grid__formula-bar-input:focus{outline:2px solid var(--color-border-accent, #1a73e8);outline-offset:-2px;border-radius:var(--border-radius-xs, 2px)}.moz-grid__formula-bar-input:disabled{color:var(--color-text-secondary);cursor:not-allowed}.moz-grid__formula-bar-editor{flex:1;min-width:0;display:flex;align-items:stretch}.moz-grid__formula-bar-editor .moz-grid-formula-editor,.moz-grid__formula-bar-editor .moz-grid-formula-editor__input{width:100%;height:100%}.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: Calculator20, selector: "Calculator20", inputs: ["hostClass"] }, { kind: "component", type: MozButtonComponent, selector: "button[moz-button]", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "iconPosition", "type", "isLoading"] }, { kind: "component", type: MozGridFormulaEditorComponent, selector: "moz-grid-formula-editor", inputs: ["value", "locale", "editingAddr", "disableCellPick"], outputs: ["valueChange", "commit", "cancel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MozGridComponent, decorators: [{
             type: Component,
@@ -16093,6 +16284,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             class="moz-grid__formula-bar-editor"
             [value]="formulaBarDraft() ?? ''"
             [editingAddr]="formulaBarEditingAddr()"
+            [disableCellPick]="true"
             (valueChange)="onFormulaBarEditorChange($event)"
             (commit)="onFormulaBarEditorCommit()"
             (cancel)="onFormulaBarEditorCancel()"
@@ -16399,6 +16591,13 @@ class MozComboboxComponent {
     clearable = input(false, ...(ngDevMode ? [{ debugName: "clearable" }] : /* istanbul ignore next */ []));
     /** Show a search/filter input inside the dropdown */
     searchable = input(false, ...(ngDevMode ? [{ debugName: "searchable" }] : /* istanbul ignore next */ []));
+    /**
+     * When true, the search query is split on spaces/commas and each term is
+     * matched independently (e.g. "red shoe" matches labels containing either
+     * "red" or "shoe"). When false, the query is matched as a single substring
+     * so users can search for multi-word labels like "Item 1".
+     */
+    multiSearch = input(false, ...(ngDevMode ? [{ debugName: "multiSearch" }] : /* istanbul ignore next */ []));
     /** Show "Select all / Clear" action buttons (multiple only) */
     showActions = input(false, ...(ngDevMode ? [{ debugName: "showActions" }] : /* istanbul ignore next */ []));
     /** Whether the component is in a loading state (e.g. async data) */
@@ -16507,10 +16706,12 @@ class MozComboboxComponent {
         if (!query)
             return this.flatItems();
         const flat = this.flatItems();
-        const parts = query
-            .split(/[,\s]+/)
-            .map((s) => s.toLowerCase().trim())
-            .filter(Boolean);
+        const parts = this.multiSearch()
+            ? query
+                .split(/[,\s]+/)
+                .map((s) => s.toLowerCase().trim())
+                .filter(Boolean)
+            : [query.toLowerCase()];
         // Find which section titles have matching children
         const matchingSections = new Set();
         for (const item of flat) {
@@ -16965,13 +17166,13 @@ class MozComboboxComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MozComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MozComboboxComponent, isStandalone: true, selector: "moz-combobox", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, noResultsText: { classPropertyName: "noResultsText", publicName: "noResultsText", isSignal: true, isRequired: false, transformFunction: null }, selectAllText: { classPropertyName: "selectAllText", publicName: "selectAllText", isSignal: true, isRequired: false, transformFunction: null }, clearText: { classPropertyName: "clearText", publicName: "clearText", isSignal: true, isRequired: false, transformFunction: null }, selectedSuffix: { classPropertyName: "selectedSuffix", publicName: "selectedSuffix", isSignal: true, isRequired: false, transformFunction: null }, clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, showNoResultText: { classPropertyName: "showNoResultText", publicName: "showNoResultText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", opened: "opened", closed: "closed", searched: "searched" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MozComboboxComponent, isStandalone: true, selector: "moz-combobox", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, multiSearch: { classPropertyName: "multiSearch", publicName: "multiSearch", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, noResultsText: { classPropertyName: "noResultsText", publicName: "noResultsText", isSignal: true, isRequired: false, transformFunction: null }, selectAllText: { classPropertyName: "selectAllText", publicName: "selectAllText", isSignal: true, isRequired: false, transformFunction: null }, clearText: { classPropertyName: "clearText", publicName: "clearText", isSignal: true, isRequired: false, transformFunction: null }, selectedSuffix: { classPropertyName: "selectedSuffix", publicName: "selectedSuffix", isSignal: true, isRequired: false, transformFunction: null }, clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, showNoResultText: { classPropertyName: "showNoResultText", publicName: "showNoResultText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", opened: "opened", closed: "closed", searched: "searched" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MozComboboxComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerBtn"], descendants: true, isSignal: true }, { propertyName: "viewportEl", first: true, predicate: ["viewport"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- ====================================================================== -->\n<!-- TRIGGER                                                                -->\n<!-- ====================================================================== -->\n<div [class]=\"wrapperClasses()\">\n  <div class=\"mc-combobox__input\">\n    <button\n      #triggerBtn\n      type=\"button\"\n      class=\"mc-combobox__control\"\n      role=\"combobox\"\n      cdkOverlayOrigin\n      #overlayOrigin=\"cdkOverlayOrigin\"\n      [disabled]=\"isEffectivelyDisabled()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-controls]=\"listboxId\"\n      [attr.aria-activedescendant]=\"\n        focusedIndex() >= 0 ? comboboxId + '-opt-' + focusedIndex() : null\n      \"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.aria-labelledby]=\"ariaLabelledBy()\"\n      [attr.aria-invalid]=\"invalid() || null\"\n      (click)=\"toggle()\"\n      (keydown)=\"onTriggerKeydown($event)\"\n    >\n      @if (displayValue()) {\n        <span class=\"mc-combobox__value\">{{ displayValue() }}</span>\n      } @else {\n        <span class=\"mc-combobox__placeholder\">{{ placeholder() }}</span>\n      }\n    </button>\n\n    <!-- Counter (compact + multiple) -->\n    @if (multiple() && compact() && selectedCount() > 0) {\n      <span class=\"mc-combobox__counter\" aria-live=\"polite\">\n        {{ selectedCount() }} {{ selectedSuffix() }}\n      </span>\n    }\n\n    <!-- Clear button -->\n    @if (showClear()) {\n      <button\n        type=\"button\"\n        class=\"mc-combobox__clear\"\n        [attr.aria-label]=\"clearAriaLabel()\"\n        (click)=\"onClear($event)\"\n      >\n        <CrossCircleFilled24 />\n      </button>\n    }\n\n    <!-- Trigger loader -->\n    @if (loading()) {\n      <moz-loader size=\"s\" [appearance]=\"'accent'\" class=\"mc-combobox__loader\" />\n    }\n\n    <!-- Chevron -->\n    <button\n      type=\"button\"\n      class=\"mc-combobox__icon\"\n      tabindex=\"-1\"\n      aria-hidden=\"true\"\n      (click)=\"toggle()\"\n    >\n      <ChevronDown24 />\n    </button>\n  </div>\n</div>\n\n<!-- ====================================================================== -->\n<!-- OVERLAY / DROPDOWN                                                     -->\n<!-- ====================================================================== -->\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayWidth]=\"triggerWidth()\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"mc-combobox-backdrop\"\n  (backdropClick)=\"onOverlayOutsideClick()\"\n  (attach)=\"onOverlayAttached()\"\n>\n  <div\n    class=\"mc-option-listbox mc-listbox__content mc-combobox__listbox\"\n    (keydown)=\"onPanelKeydown($event)\"\n  >\n    <!-- Search -->\n    @if (searchable()) {\n      <div class=\"mc-option-listbox__search\">\n        <Search24 icon />\n        <input\n          #searchInput\n          moz-text-input\n          type=\"text\"\n          [placeholder]=\"searchPlaceholder()\"\n          autocomplete=\"off\"\n          aria-autocomplete=\"list\"\n          [attr.aria-controls]=\"listboxId\"\n          [value]=\"searchQuery()\"\n          (input)=\"onSearchInput($event)\"\n          (keydown)=\"onSearchKeydown($event)\"\n          [size]=\"'s'\"\n        />\n      </div>\n      <hr class=\"mc-option-listbox__separator\" />\n    }\n\n    <!-- Actions (multiple only) -->\n    @if (showActions() && multiple()) {\n      <div class=\"mc-option-listbox__actions\">\n        <button\n          moz-button\n          type=\"button\"\n          [size]=\"'s'\"\n          [ghost]=\"true\"\n          [appearance]=\"'accent'\"\n          (click)=\"selectAll()\"\n        >\n          {{ selectAllText() }}\n        </button>\n        <button moz-button type=\"button\" [size]=\"'s'\" [ghost]=\"true\" (click)=\"clearSelection()\">\n          {{ clearText() }}\n        </button>\n      </div>\n      <hr class=\"mc-option-listbox__separator\" />\n    }\n\n    <!-- Listbox with virtual scroll -->\n    <div\n      #listbox\n      role=\"listbox\"\n      [id]=\"listboxId\"\n      class=\"mc-option-listbox__list mc-combobox__virtual-host\"\n      [attr.aria-multiselectable]=\"multiple() || null\"\n      [attr.aria-label]=\"ariaLabel() ?? 'Options'\"\n      [attr.aria-busy]=\"loading() || null\"\n      [attr.aria-activedescendant]=\"\n        focusedIndex() >= 0 ? comboboxId + '-opt-' + focusedIndex() : null\n      \"\n      tabindex=\"-1\"\n    >\n      @if (loading()) {\n        <div class=\"mc-combobox__loading\" role=\"status\">\n          <moz-loader size=\"s\" [appearance]=\"'accent'\" [text]=\"loadingText()\" />\n        </div>\n      } @else if (filteredItems().length === 0 && showNoResultText() && searchQuery().length > 0) {\n        <div class=\"mc-option-listbox__empty\" role=\"presentation\" aria-live=\"polite\">\n          {{ noResultsText() }}\n        </div>\n      } @else {\n        <cdk-virtual-scroll-viewport\n          #viewport\n          [itemSize]=\"itemSizePx\"\n          [style.height.px]=\"viewportHeight()\"\n          class=\"mc-combobox__viewport\"\n        >\n          <ng-container\n            *cdkVirtualFor=\"let item of filteredItems(); let i = index; trackBy: trackByFlatItem\"\n          >\n            <!-- Section header -->\n            @if (isFlatSection(item)) {\n              <div\n                class=\"mc-option-listbox__item mc-option-listbox__item--section\"\n                [class.mc-option-listbox__item--selectable]=\"item.checkable && multiple()\"\n                [class.mc-option-listbox__item--selected]=\"\n                  item.checkable &&\n                  multiple() &&\n                  (isSectionFullySelected(item.title) || isSectionPartiallySelected(item.title))\n                \"\n                role=\"presentation\"\n                (click)=\"item.checkable && multiple() ? toggleSection(item.title) : null\"\n              >\n                <div class=\"mc-option-listbox__label\">\n                  <div class=\"mc-option-listbox__content\">\n                    <span class=\"mc-option-listbox__section-title\">{{ item.title }}</span>\n                  </div>\n                  <div class=\"mc-option-listbox__spacer\"></div>\n                  @if (item.checkable && multiple()) {\n                    <moz-checkbox\n                      class=\"mc-option-listbox__checkbox\"\n                      [id]=\"comboboxId + '-section-cb-' + i\"\n                      [ngModel]=\"isSectionFullySelected(item.title)\"\n                      [indeterminate]=\"isSectionPartiallySelected(item.title)\"\n                    />\n                  }\n                </div>\n              </div>\n            }\n\n            <!-- Option -->\n            @if (isFlatOption(item)) {\n              <div\n                role=\"option\"\n                [id]=\"comboboxId + '-opt-' + i\"\n                [attr.aria-selected]=\"isOptionSelected($any(item.value))\"\n                [attr.aria-disabled]=\"item.disabled || null\"\n                class=\"mc-option-listbox__item\"\n                [class.mc-option-listbox__item--selectable]=\"!item.disabled\"\n                [class.mc-option-listbox__item--disabled]=\"item.disabled\"\n                [class.mc-option-listbox__item--selected]=\"isOptionSelected($any(item.value))\"\n                [class.mc-option-listbox__item--active]=\"focusedIndex() === i\"\n                (click)=\"!item.disabled && selectOption($any(item.value))\"\n                (mouseenter)=\"focusedIndex.set(i)\"\n              >\n                <div class=\"mc-option-listbox__label\">\n                  @if (item.icon) {\n                    <div class=\"mc-option-listbox__prepend\">\n                      <span class=\"mc-option-listbox__icon\">{{ item.icon }}</span>\n                    </div>\n                  }\n                  <div class=\"mc-option-listbox__content\">\n                    <span class=\"mc-option-listbox__text\">{{ item.label }}</span>\n                    @if (item.content) {\n                      <span class=\"mc-option-listbox__additional\">{{ item.content }}</span>\n                    }\n                  </div>\n                  <div class=\"mc-option-listbox__spacer\"></div>\n\n                  <!-- Selection indicator -->\n                  @if (multiple()) {\n                    <moz-checkbox\n                      class=\"mc-option-listbox__checkbox\"\n                      [id]=\"comboboxId + '-cb-' + i\"\n                      [ngModel]=\"isOptionSelected($any(item.value))\"\n                    />\n                  } @else {\n                    <CheckCircle24 class=\"mc-option-listbox__selection-icon\" />\n                  }\n                </div>\n              </div>\n            }\n          </ng-container>\n        </cdk-virtual-scroll-viewport>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".mc-combobox{position:relative;width:18.75rem}.mc-combobox__input{transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;color:var(--forms-color-text-default, #000000);display:block;width:100%;display:flex;align-items:center;gap:.5rem;box-sizing:border-box}.mc-combobox__input:focus-within{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-combobox__input:hover:not(:focus-within){border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-hover, #4d4d4d)}.mc-combobox__input:has(.mc-combobox__control:disabled){background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-combobox__input .mc-combobox__control{text-align:left;font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);color:var(--forms-color-text-default, #000000);background-color:transparent;border:none;padding-left:.75rem;padding-right:0;flex-grow:1;height:3rem;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mc-combobox__input .mc-combobox__control:focus-within{outline:none}.mc-combobox__icon{border:none;display:flex;align-items:center;cursor:pointer;padding-right:.75rem;background:none;color:var(--forms-color-icon-interactive, #000000);fill:currentcolor}.mc-combobox__clear{padding:0;display:flex;align-items:center;justify-content:center;border:none;background:none;cursor:pointer;color:var(--forms-color-icon-clear, #666666);fill:currentcolor}.mc-combobox__counter{height:1.5rem;display:flex;flex-shrink:0;align-items:center;justify-content:center;padding:0 .5rem;border-radius:var(--border-radius-l, 1rem);background-color:var(--forms-color-selection-counter-background, #464e63);font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-50, .75rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-selection-counter-text, #ffffff)}.mc-combobox__listbox{position:absolute;left:0;top:calc(100% + .25rem);visibility:hidden;opacity:0;box-shadow:var(--shadow-bottom-s-x, 0px) var(--shadow-bottom-s-y, 5px) var(--shadow-bottom-s-blur, 10px) var(--shadow-bottom-s-spread, -2px) rgba(0,0,0,var(--shadow-bottom-s-opacity, 20%));border:var(--border-width-s, .0625rem) solid var(--color-border-primary, #cccccc);border-radius:var(--border-radius-m, .5rem);width:100%;z-index:10;background-color:var(--color-background-primary, #ffffff);pointer-events:all}.mc-combobox--open .mc-combobox__listbox{visibility:visible;opacity:1}.mc-combobox--s .mc-combobox__control{height:2rem;font-size:var(--font-size-100, .875rem);padding-left:.5rem}.mc-combobox--s .mc-combobox__icon{padding-right:.5rem}.mc-combobox--s .mc-combobox__clear{width:1.25rem;height:1.25rem}.mc-combobox--invalid .mc-combobox__input{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid, #ea302d)}.mc-combobox--invalid .mc-combobox__input:hover:not(:focus-within){border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid-hover, #c61112)}.mc-combobox--disabled .mc-combobox__input{background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-combobox--disabled .mc-combobox__control{color:var(--forms-color-text-disabled, #737373)}.mc-combobox--disabled .mc-combobox__icon{color:var(--forms-color-icon-disabled, #737373)}.mc-combobox--readonly .mc-combobox__input{border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.mc-option-listbox__list{overflow:auto;display:flex;flex-direction:column;gap:.125rem;margin:0;padding:.5rem;max-height:18.75rem}.mc-option-listbox__item{display:block;border-radius:var(--border-radius-s, .25rem)}.mc-option-listbox__item--disabled{color:var(--option-listbox-color-text-disabled, #b3b3b3)}.mc-option-listbox__item--disabled .mc-option-listbox__label{pointer-events:none;color:var(--option-listbox-color-text-disabled, #b3b3b3)}.mc-option-listbox__item--disabled .mc-option-listbox__additional{color:var(--option-listbox-color-text-disabled, #b3b3b3)}.mc-option-listbox__item--disabled .mc-option-listbox__checkbox{border:none;background-color:var(--forms-color-background-disabled, #d9d9d9)}.mc-option-listbox__item--readonly .mc-option-listbox__label{pointer-events:none}.mc-option-listbox__item--selected:not(.mc-option-listbox__item--section){background-color:var(--option-listbox-color-background-checked, #ebf5de)}.mc-option-listbox__item--selected .mc-option-listbox__selection-icon{opacity:1;color:var(--option-listbox-color-selection-indicator-default, #117f03);fill:currentcolor}.mc-option-listbox__item--selected .mc-option-listbox__checkbox{border:none;background-color:var(--forms-color-background-checked, #117f03);color:var(--forms-color-icon-inverse, #ffffff);fill:currentcolor}.mc-option-listbox__item--selected .mc-option-listbox__checkbox svg{display:block}.mc-option-listbox__item--readonly.mc-option-listbox__item--selected{background-color:var(--option-listbox-color-background-checked-read-only, #eff1f6)}.mc-option-listbox__item--readonly.mc-option-listbox__item--selected .mc-option-listbox__selection-icon{color:var(--option-listbox-color-selection-indicator-read-only, #000000)}.mc-option-listbox__item--readonly.mc-option-listbox__item--selected .mc-option-listbox__checkbox{border:2px solid var(--forms-color-border-read-only, #cccccc);background-color:var(--forms-color-background-default, #ffffff);color:var(--option-listbox-color-selection-indicator-read-only, #000000)}.mc-option-listbox__item--selectable{cursor:pointer}.mc-option-listbox__item--selectable:not(.mc-option-listbox__item--disabled):hover,.mc-option-listbox__item--selectable:not(.mc-option-listbox__item--disabled).mc-option-listbox__item--active{background-color:var(--option-listbox-color-background-hover, rgba(0, 0, 0, .05))}.mc-option-listbox__content{display:flex;flex-direction:column;gap:.125rem}.mc-option-listbox__additional{font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-50, .75rem);color:var(--option-listbox-color-text-information, #666666)}.mc-option-listbox__label{display:flex;align-items:center;gap:.5rem;height:3rem;padding:.5rem;border-radius:var(--border-radius-s, .25rem);line-height:var(--line-height-s, 1.3);box-sizing:border-box}.mc-option-listbox__checkbox{display:flex;align-items:center;justify-content:center;height:1.25rem;width:1.25rem;border:.125rem solid var(--forms-color-border-default, #666666);border-radius:.25rem;box-sizing:border-box}.mc-option-listbox__checkbox svg{display:none}.mc-option-listbox__spacer{flex-grow:1}.mc-option-listbox__selection-icon{opacity:0}.mc-option-listbox__section-title{font-size:var(--font-size-100, .875rem);font-weight:var(--font-weight-semi-bold, 600);margin:0;color:var(--option-listbox-color-text-section-title, #666666)}.mc-option-listbox__search{margin:.5rem;width:unset}.mc-option-listbox__separator{display:block;height:1px;border:0;border-top:1px solid var(--color-border-primary, #cccccc);margin:0;padding:0}.mc-option-listbox__actions{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem}.mc-combobox__virtual-host{overflow:hidden;max-height:none;padding:0}.mc-combobox__viewport,.mc-combobox__viewport .cdk-virtual-scroll-content-wrapper{width:100%}.mc-combobox__loader{display:flex;align-items:center;padding-inline:4px}.mc-combobox__loading,.mc-option-listbox__empty{display:flex;align-items:center;justify-content:center;padding:24px 16px}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: MozLoaderComponent, selector: "moz-loader", inputs: ["appearance", "size", "text"] }, { kind: "component", type: MozButtonComponent, selector: "button[moz-button]", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "iconPosition", "type", "isLoading"] }, { kind: "component", type: CrossCircleFilled24, selector: "CrossCircleFilled24", inputs: ["hostClass"] }, { kind: "component", type: ChevronDown24, selector: "ChevronDown24", inputs: ["hostClass"] }, { kind: "component", type: Search24, selector: "Search24", inputs: ["hostClass"] }, { kind: "component", type: MozTextInput, selector: "input[moz-text-input]", inputs: ["isInvalid", "disabled", "readonly", "size", "clearable", "clearLabel", "prefix", "suffix"] }, { kind: "component", type: MozCheckboxComponent, selector: "moz-checkbox", inputs: ["id", "name", "label", "indeterminate", "isInvalid", "disabled", "indented"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CheckCircle24, selector: "CheckCircle24", inputs: ["hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerBtn"], descendants: true, isSignal: true }, { propertyName: "viewportEl", first: true, predicate: ["viewport"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- ====================================================================== -->\n<!-- TRIGGER                                                                -->\n<!-- ====================================================================== -->\n<div [class]=\"wrapperClasses()\">\n  <div class=\"mc-combobox__input\">\n    <button\n      #triggerBtn\n      type=\"button\"\n      class=\"mc-combobox__control\"\n      role=\"combobox\"\n      cdkOverlayOrigin\n      #overlayOrigin=\"cdkOverlayOrigin\"\n      [disabled]=\"isEffectivelyDisabled()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-controls]=\"listboxId\"\n      [attr.aria-activedescendant]=\"\n        focusedIndex() >= 0 ? comboboxId + '-opt-' + focusedIndex() : null\n      \"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.aria-labelledby]=\"ariaLabelledBy()\"\n      [attr.aria-invalid]=\"invalid() || null\"\n      (click)=\"toggle()\"\n      (keydown)=\"onTriggerKeydown($event)\"\n    >\n      @if (displayValue()) {\n        <span class=\"mc-combobox__value\">{{ displayValue() }}</span>\n      } @else {\n        <span class=\"mc-combobox__placeholder\">{{ placeholder() }}</span>\n      }\n    </button>\n\n    <!-- Counter (compact + multiple) -->\n    @if (multiple() && compact() && selectedCount() > 0) {\n      <span class=\"mc-combobox__counter\" aria-live=\"polite\">\n        {{ selectedCount() }} {{ selectedSuffix() }}\n      </span>\n    }\n\n    <!-- Clear button -->\n    @if (showClear()) {\n      <button\n        type=\"button\"\n        class=\"mc-combobox__clear\"\n        [attr.aria-label]=\"clearAriaLabel()\"\n        (click)=\"onClear($event)\"\n      >\n        <CrossCircleFilled24 />\n      </button>\n    }\n\n    <!-- Trigger loader -->\n    @if (loading()) {\n      <moz-loader size=\"s\" [appearance]=\"'accent'\" class=\"mc-combobox__loader\" />\n    }\n\n    <!-- Chevron -->\n    <button\n      type=\"button\"\n      class=\"mc-combobox__icon\"\n      tabindex=\"-1\"\n      aria-hidden=\"true\"\n      (click)=\"toggle()\"\n    >\n      <ChevronDown24 />\n    </button>\n  </div>\n</div>\n\n<!-- ====================================================================== -->\n<!-- OVERLAY / DROPDOWN                                                     -->\n<!-- ====================================================================== -->\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayWidth]=\"triggerWidth()\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"mc-combobox-backdrop\"\n  (backdropClick)=\"onOverlayOutsideClick()\"\n  (attach)=\"onOverlayAttached()\"\n>\n  <div\n    class=\"mc-option-listbox mc-listbox__content mc-combobox__listbox\"\n    (keydown)=\"onPanelKeydown($event)\"\n  >\n    <!-- Search -->\n    @if (searchable()) {\n      <div class=\"mc-option-listbox__search\">\n        <Search24 icon />\n        <input\n          #searchInput\n          moz-text-input\n          type=\"text\"\n          [placeholder]=\"searchPlaceholder()\"\n          autocomplete=\"off\"\n          aria-autocomplete=\"list\"\n          [attr.aria-controls]=\"listboxId\"\n          [value]=\"searchQuery()\"\n          (input)=\"onSearchInput($event)\"\n          (keydown)=\"onSearchKeydown($event)\"\n          [size]=\"'s'\"\n        />\n      </div>\n      <hr class=\"mc-option-listbox__separator\" />\n    }\n\n    <!-- Actions (multiple only) -->\n    @if (showActions() && multiple()) {\n      <div class=\"mc-option-listbox__actions\">\n        <button\n          moz-button\n          type=\"button\"\n          [size]=\"'s'\"\n          [ghost]=\"true\"\n          [appearance]=\"'accent'\"\n          (click)=\"selectAll()\"\n        >\n          {{ selectAllText() }}\n        </button>\n        <button moz-button type=\"button\" [size]=\"'s'\" [ghost]=\"true\" (click)=\"clearSelection()\">\n          {{ clearText() }}\n        </button>\n      </div>\n      <hr class=\"mc-option-listbox__separator\" />\n    }\n\n    <!-- Listbox with virtual scroll -->\n    <div\n      #listbox\n      role=\"listbox\"\n      [id]=\"listboxId\"\n      class=\"mc-option-listbox__list mc-combobox__virtual-host\"\n      [attr.aria-multiselectable]=\"multiple() || null\"\n      [attr.aria-label]=\"ariaLabel() ?? 'Options'\"\n      [attr.aria-busy]=\"loading() || null\"\n      [attr.aria-activedescendant]=\"\n        focusedIndex() >= 0 ? comboboxId + '-opt-' + focusedIndex() : null\n      \"\n      tabindex=\"-1\"\n    >\n      @if (loading()) {\n        <div class=\"mc-combobox__loading\" role=\"status\">\n          <moz-loader size=\"s\" [appearance]=\"'accent'\" [text]=\"loadingText()\" />\n        </div>\n      } @else if (filteredItems().length === 0 && showNoResultText() && searchQuery().length > 0) {\n        <div class=\"mc-option-listbox__empty\" role=\"presentation\" aria-live=\"polite\">\n          {{ noResultsText() }}\n        </div>\n      } @else {\n        <cdk-virtual-scroll-viewport\n          #viewport\n          [itemSize]=\"itemSizePx\"\n          [style.height.px]=\"viewportHeight()\"\n          class=\"mc-combobox__viewport\"\n        >\n          <ng-container\n            *cdkVirtualFor=\"let item of filteredItems(); let i = index; trackBy: trackByFlatItem\"\n          >\n            <!-- Section header -->\n            @if (isFlatSection(item)) {\n              <div\n                class=\"mc-option-listbox__item mc-option-listbox__item--section\"\n                [class.mc-option-listbox__item--selectable]=\"item.checkable && multiple()\"\n                [class.mc-option-listbox__item--selected]=\"\n                  item.checkable &&\n                  multiple() &&\n                  (isSectionFullySelected(item.title) || isSectionPartiallySelected(item.title))\n                \"\n                role=\"presentation\"\n                (click)=\"item.checkable && multiple() ? toggleSection(item.title) : null\"\n              >\n                <div class=\"mc-option-listbox__label\">\n                  <div class=\"mc-option-listbox__content\">\n                    <span class=\"mc-option-listbox__section-title\">{{ item.title }}</span>\n                  </div>\n                  <div class=\"mc-option-listbox__spacer\"></div>\n                  @if (item.checkable && multiple()) {\n                    <moz-checkbox\n                      class=\"mc-option-listbox__checkbox\"\n                      [id]=\"comboboxId + '-section-cb-' + i\"\n                      [ngModel]=\"isSectionFullySelected(item.title)\"\n                      [indeterminate]=\"isSectionPartiallySelected(item.title)\"\n                    />\n                  }\n                </div>\n              </div>\n            }\n\n            <!-- Option -->\n            @if (isFlatOption(item)) {\n              <div\n                role=\"option\"\n                [id]=\"comboboxId + '-opt-' + i\"\n                [attr.aria-selected]=\"isOptionSelected($any(item.value))\"\n                [attr.aria-disabled]=\"item.disabled || null\"\n                class=\"mc-option-listbox__item\"\n                [class.mc-option-listbox__item--selectable]=\"!item.disabled\"\n                [class.mc-option-listbox__item--disabled]=\"item.disabled\"\n                [class.mc-option-listbox__item--selected]=\"isOptionSelected($any(item.value))\"\n                [class.mc-option-listbox__item--active]=\"focusedIndex() === i\"\n                (click)=\"!item.disabled && selectOption($any(item.value))\"\n                (mouseenter)=\"focusedIndex.set(i)\"\n              >\n                <div class=\"mc-option-listbox__label\">\n                  @if (item.icon) {\n                    <div class=\"mc-option-listbox__prepend\">\n                      <span class=\"mc-option-listbox__icon\">{{ item.icon }}</span>\n                    </div>\n                  }\n                  <div class=\"mc-option-listbox__content\">\n                    <span class=\"mc-option-listbox__text\">{{ item.label }}</span>\n                    @if (item.content) {\n                      <span class=\"mc-option-listbox__additional\">{{ item.content }}</span>\n                    }\n                  </div>\n                  <div class=\"mc-option-listbox__spacer\"></div>\n\n                  <!-- Selection indicator -->\n                  @if (multiple()) {\n                    <moz-checkbox\n                      class=\"mc-option-listbox__checkbox\"\n                      [id]=\"comboboxId + '-cb-' + i\"\n                      [ngModel]=\"isOptionSelected($any(item.value))\"\n                      [disabled]=\"!!item.disabled\"\n                    />\n                  } @else {\n                    <CheckCircle24 class=\"mc-option-listbox__selection-icon\" />\n                  }\n                </div>\n              </div>\n            }\n          </ng-container>\n        </cdk-virtual-scroll-viewport>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".mc-combobox{position:relative;width:18.75rem}.mc-combobox__input{transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;color:var(--forms-color-text-default, #000000);display:block;width:100%;display:flex;align-items:center;gap:.5rem;box-sizing:border-box}.mc-combobox__input:focus-within{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-combobox__input:hover:not(:focus-within){border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-hover, #4d4d4d)}.mc-combobox__input:has(.mc-combobox__control:disabled){background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-combobox__input .mc-combobox__control{text-align:left;font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);color:var(--forms-color-text-default, #000000);background-color:transparent;border:none;padding-left:.75rem;padding-right:0;flex-grow:1;height:3rem;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mc-combobox__input .mc-combobox__control:focus-within{outline:none}.mc-combobox__icon{border:none;display:flex;align-items:center;cursor:pointer;padding-right:.75rem;background:none;color:var(--forms-color-icon-interactive, #000000);fill:currentcolor}.mc-combobox__clear{padding:0;display:flex;align-items:center;justify-content:center;border:none;background:none;cursor:pointer;color:var(--forms-color-icon-clear, #666666);fill:currentcolor}.mc-combobox__counter{height:1.5rem;display:flex;flex-shrink:0;align-items:center;justify-content:center;padding:0 .5rem;border-radius:var(--border-radius-l, 1rem);background-color:var(--forms-color-selection-counter-background, #464e63);font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-50, .75rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-selection-counter-text, #ffffff)}.mc-combobox__listbox{position:absolute;left:0;top:calc(100% + .25rem);visibility:hidden;opacity:0;box-shadow:var(--shadow-bottom-s-x, 0px) var(--shadow-bottom-s-y, 5px) var(--shadow-bottom-s-blur, 10px) var(--shadow-bottom-s-spread, -2px) rgba(0,0,0,var(--shadow-bottom-s-opacity, 20%));border:var(--border-width-s, .0625rem) solid var(--color-border-primary, #cccccc);border-radius:var(--border-radius-m, .5rem);width:100%;z-index:10;background-color:var(--color-background-primary, #ffffff);pointer-events:all}.mc-combobox--open .mc-combobox__listbox{visibility:visible;opacity:1}.mc-combobox--s .mc-combobox__control{height:2rem;font-size:var(--font-size-100, .875rem);padding-left:.5rem}.mc-combobox--s .mc-combobox__icon{padding-right:.5rem}.mc-combobox--s .mc-combobox__clear{width:1.25rem;height:1.25rem}.mc-combobox--invalid .mc-combobox__input{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid, #ea302d)}.mc-combobox--invalid .mc-combobox__input:hover:not(:focus-within){border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid-hover, #c61112)}.mc-combobox--disabled .mc-combobox__input{background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-combobox--disabled .mc-combobox__control{color:var(--forms-color-text-disabled, #737373)}.mc-combobox--disabled .mc-combobox__icon{color:var(--forms-color-icon-disabled, #737373)}.mc-combobox--readonly .mc-combobox__input{border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.mc-option-listbox__list{overflow:auto;display:flex;flex-direction:column;gap:.125rem;margin:0;padding:.5rem;max-height:18.75rem}.mc-option-listbox__item{display:block;border-radius:var(--border-radius-s, .25rem)}.mc-option-listbox__item--disabled{color:var(--option-listbox-color-text-disabled, #b3b3b3)}.mc-option-listbox__item--disabled .mc-option-listbox__label{pointer-events:none;color:var(--option-listbox-color-text-disabled, #b3b3b3)}.mc-option-listbox__item--disabled .mc-option-listbox__additional{color:var(--option-listbox-color-text-disabled, #b3b3b3)}.mc-option-listbox__item--disabled .mc-option-listbox__checkbox{border:none;background-color:var(--forms-color-background-disabled, #d9d9d9)}.mc-option-listbox__item--readonly .mc-option-listbox__label{pointer-events:none}.mc-option-listbox__item--selected:not(.mc-option-listbox__item--section){background-color:var(--option-listbox-color-background-checked, #ebf5de)}.mc-option-listbox__item--selected .mc-option-listbox__selection-icon{opacity:1;color:var(--option-listbox-color-selection-indicator-default, #117f03);fill:currentcolor}.mc-option-listbox__item--selected .mc-option-listbox__checkbox{border:none;background-color:var(--forms-color-background-checked, #117f03);color:var(--forms-color-icon-inverse, #ffffff);fill:currentcolor}.mc-option-listbox__item--selected .mc-option-listbox__checkbox svg{display:block}.mc-option-listbox__item--readonly.mc-option-listbox__item--selected{background-color:var(--option-listbox-color-background-checked-read-only, #eff1f6)}.mc-option-listbox__item--readonly.mc-option-listbox__item--selected .mc-option-listbox__selection-icon{color:var(--option-listbox-color-selection-indicator-read-only, #000000)}.mc-option-listbox__item--readonly.mc-option-listbox__item--selected .mc-option-listbox__checkbox{border:2px solid var(--forms-color-border-read-only, #cccccc);background-color:var(--forms-color-background-default, #ffffff);color:var(--option-listbox-color-selection-indicator-read-only, #000000)}.mc-option-listbox__item--selectable{cursor:pointer}.mc-option-listbox__item--selectable:not(.mc-option-listbox__item--disabled):hover,.mc-option-listbox__item--selectable:not(.mc-option-listbox__item--disabled).mc-option-listbox__item--active{background-color:var(--option-listbox-color-background-hover, rgba(0, 0, 0, .05))}.mc-option-listbox__content{display:flex;flex-direction:column;gap:.125rem}.mc-option-listbox__additional{font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-50, .75rem);color:var(--option-listbox-color-text-information, #666666)}.mc-option-listbox__label{display:flex;align-items:center;gap:.5rem;height:3rem;padding:.5rem;border-radius:var(--border-radius-s, .25rem);line-height:var(--line-height-s, 1.3);box-sizing:border-box}.mc-option-listbox__checkbox{display:flex;align-items:center;justify-content:center;height:1.25rem;width:1.25rem;border:.125rem solid var(--forms-color-border-default, #666666);border-radius:.25rem;box-sizing:border-box}.mc-option-listbox__checkbox svg{display:none}.mc-option-listbox__spacer{flex-grow:1}.mc-option-listbox__selection-icon{opacity:0}.mc-option-listbox__section-title{font-size:var(--font-size-100, .875rem);font-weight:var(--font-weight-semi-bold, 600);margin:0;color:var(--option-listbox-color-text-section-title, #666666)}.mc-option-listbox__search{margin:.5rem;width:unset}.mc-option-listbox__separator{display:block;height:1px;border:0;border-top:1px solid var(--color-border-primary, #cccccc);margin:0;padding:0}.mc-option-listbox__actions{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem}.mc-combobox__virtual-host{overflow:hidden;max-height:none;padding:0}.mc-combobox__viewport,.mc-combobox__viewport .cdk-virtual-scroll-content-wrapper{width:100%}.mc-combobox__loader{display:flex;align-items:center;padding-inline:4px}.mc-combobox__loading,.mc-option-listbox__empty{display:flex;align-items:center;justify-content:center;padding:24px 16px}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: MozLoaderComponent, selector: "moz-loader", inputs: ["appearance", "size", "text"] }, { kind: "component", type: MozButtonComponent, selector: "button[moz-button]", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "iconPosition", "type", "isLoading"] }, { kind: "component", type: CrossCircleFilled24, selector: "CrossCircleFilled24", inputs: ["hostClass"] }, { kind: "component", type: ChevronDown24, selector: "ChevronDown24", inputs: ["hostClass"] }, { kind: "component", type: Search24, selector: "Search24", inputs: ["hostClass"] }, { kind: "component", type: MozTextInput, selector: "input[moz-text-input]", inputs: ["isInvalid", "disabled", "readonly", "size", "clearable", "clearLabel", "prefix", "suffix"] }, { kind: "component", type: MozCheckboxComponent, selector: "moz-checkbox", inputs: ["id", "name", "label", "indeterminate", "isInvalid", "disabled", "indented"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CheckCircle24, selector: "CheckCircle24", inputs: ["hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MozComboboxComponent, decorators: [{
             type: Component,
@@ -16994,8 +17195,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                             useExisting: forwardRef(() => MozComboboxComponent),
                             multi: true,
                         },
-                    ], template: "<!-- ====================================================================== -->\n<!-- TRIGGER                                                                -->\n<!-- ====================================================================== -->\n<div [class]=\"wrapperClasses()\">\n  <div class=\"mc-combobox__input\">\n    <button\n      #triggerBtn\n      type=\"button\"\n      class=\"mc-combobox__control\"\n      role=\"combobox\"\n      cdkOverlayOrigin\n      #overlayOrigin=\"cdkOverlayOrigin\"\n      [disabled]=\"isEffectivelyDisabled()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-controls]=\"listboxId\"\n      [attr.aria-activedescendant]=\"\n        focusedIndex() >= 0 ? comboboxId + '-opt-' + focusedIndex() : null\n      \"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.aria-labelledby]=\"ariaLabelledBy()\"\n      [attr.aria-invalid]=\"invalid() || null\"\n      (click)=\"toggle()\"\n      (keydown)=\"onTriggerKeydown($event)\"\n    >\n      @if (displayValue()) {\n        <span class=\"mc-combobox__value\">{{ displayValue() }}</span>\n      } @else {\n        <span class=\"mc-combobox__placeholder\">{{ placeholder() }}</span>\n      }\n    </button>\n\n    <!-- Counter (compact + multiple) -->\n    @if (multiple() && compact() && selectedCount() > 0) {\n      <span class=\"mc-combobox__counter\" aria-live=\"polite\">\n        {{ selectedCount() }} {{ selectedSuffix() }}\n      </span>\n    }\n\n    <!-- Clear button -->\n    @if (showClear()) {\n      <button\n        type=\"button\"\n        class=\"mc-combobox__clear\"\n        [attr.aria-label]=\"clearAriaLabel()\"\n        (click)=\"onClear($event)\"\n      >\n        <CrossCircleFilled24 />\n      </button>\n    }\n\n    <!-- Trigger loader -->\n    @if (loading()) {\n      <moz-loader size=\"s\" [appearance]=\"'accent'\" class=\"mc-combobox__loader\" />\n    }\n\n    <!-- Chevron -->\n    <button\n      type=\"button\"\n      class=\"mc-combobox__icon\"\n      tabindex=\"-1\"\n      aria-hidden=\"true\"\n      (click)=\"toggle()\"\n    >\n      <ChevronDown24 />\n    </button>\n  </div>\n</div>\n\n<!-- ====================================================================== -->\n<!-- OVERLAY / DROPDOWN                                                     -->\n<!-- ====================================================================== -->\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayWidth]=\"triggerWidth()\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"mc-combobox-backdrop\"\n  (backdropClick)=\"onOverlayOutsideClick()\"\n  (attach)=\"onOverlayAttached()\"\n>\n  <div\n    class=\"mc-option-listbox mc-listbox__content mc-combobox__listbox\"\n    (keydown)=\"onPanelKeydown($event)\"\n  >\n    <!-- Search -->\n    @if (searchable()) {\n      <div class=\"mc-option-listbox__search\">\n        <Search24 icon />\n        <input\n          #searchInput\n          moz-text-input\n          type=\"text\"\n          [placeholder]=\"searchPlaceholder()\"\n          autocomplete=\"off\"\n          aria-autocomplete=\"list\"\n          [attr.aria-controls]=\"listboxId\"\n          [value]=\"searchQuery()\"\n          (input)=\"onSearchInput($event)\"\n          (keydown)=\"onSearchKeydown($event)\"\n          [size]=\"'s'\"\n        />\n      </div>\n      <hr class=\"mc-option-listbox__separator\" />\n    }\n\n    <!-- Actions (multiple only) -->\n    @if (showActions() && multiple()) {\n      <div class=\"mc-option-listbox__actions\">\n        <button\n          moz-button\n          type=\"button\"\n          [size]=\"'s'\"\n          [ghost]=\"true\"\n          [appearance]=\"'accent'\"\n          (click)=\"selectAll()\"\n        >\n          {{ selectAllText() }}\n        </button>\n        <button moz-button type=\"button\" [size]=\"'s'\" [ghost]=\"true\" (click)=\"clearSelection()\">\n          {{ clearText() }}\n        </button>\n      </div>\n      <hr class=\"mc-option-listbox__separator\" />\n    }\n\n    <!-- Listbox with virtual scroll -->\n    <div\n      #listbox\n      role=\"listbox\"\n      [id]=\"listboxId\"\n      class=\"mc-option-listbox__list mc-combobox__virtual-host\"\n      [attr.aria-multiselectable]=\"multiple() || null\"\n      [attr.aria-label]=\"ariaLabel() ?? 'Options'\"\n      [attr.aria-busy]=\"loading() || null\"\n      [attr.aria-activedescendant]=\"\n        focusedIndex() >= 0 ? comboboxId + '-opt-' + focusedIndex() : null\n      \"\n      tabindex=\"-1\"\n    >\n      @if (loading()) {\n        <div class=\"mc-combobox__loading\" role=\"status\">\n          <moz-loader size=\"s\" [appearance]=\"'accent'\" [text]=\"loadingText()\" />\n        </div>\n      } @else if (filteredItems().length === 0 && showNoResultText() && searchQuery().length > 0) {\n        <div class=\"mc-option-listbox__empty\" role=\"presentation\" aria-live=\"polite\">\n          {{ noResultsText() }}\n        </div>\n      } @else {\n        <cdk-virtual-scroll-viewport\n          #viewport\n          [itemSize]=\"itemSizePx\"\n          [style.height.px]=\"viewportHeight()\"\n          class=\"mc-combobox__viewport\"\n        >\n          <ng-container\n            *cdkVirtualFor=\"let item of filteredItems(); let i = index; trackBy: trackByFlatItem\"\n          >\n            <!-- Section header -->\n            @if (isFlatSection(item)) {\n              <div\n                class=\"mc-option-listbox__item mc-option-listbox__item--section\"\n                [class.mc-option-listbox__item--selectable]=\"item.checkable && multiple()\"\n                [class.mc-option-listbox__item--selected]=\"\n                  item.checkable &&\n                  multiple() &&\n                  (isSectionFullySelected(item.title) || isSectionPartiallySelected(item.title))\n                \"\n                role=\"presentation\"\n                (click)=\"item.checkable && multiple() ? toggleSection(item.title) : null\"\n              >\n                <div class=\"mc-option-listbox__label\">\n                  <div class=\"mc-option-listbox__content\">\n                    <span class=\"mc-option-listbox__section-title\">{{ item.title }}</span>\n                  </div>\n                  <div class=\"mc-option-listbox__spacer\"></div>\n                  @if (item.checkable && multiple()) {\n                    <moz-checkbox\n                      class=\"mc-option-listbox__checkbox\"\n                      [id]=\"comboboxId + '-section-cb-' + i\"\n                      [ngModel]=\"isSectionFullySelected(item.title)\"\n                      [indeterminate]=\"isSectionPartiallySelected(item.title)\"\n                    />\n                  }\n                </div>\n              </div>\n            }\n\n            <!-- Option -->\n            @if (isFlatOption(item)) {\n              <div\n                role=\"option\"\n                [id]=\"comboboxId + '-opt-' + i\"\n                [attr.aria-selected]=\"isOptionSelected($any(item.value))\"\n                [attr.aria-disabled]=\"item.disabled || null\"\n                class=\"mc-option-listbox__item\"\n                [class.mc-option-listbox__item--selectable]=\"!item.disabled\"\n                [class.mc-option-listbox__item--disabled]=\"item.disabled\"\n                [class.mc-option-listbox__item--selected]=\"isOptionSelected($any(item.value))\"\n                [class.mc-option-listbox__item--active]=\"focusedIndex() === i\"\n                (click)=\"!item.disabled && selectOption($any(item.value))\"\n                (mouseenter)=\"focusedIndex.set(i)\"\n              >\n                <div class=\"mc-option-listbox__label\">\n                  @if (item.icon) {\n                    <div class=\"mc-option-listbox__prepend\">\n                      <span class=\"mc-option-listbox__icon\">{{ item.icon }}</span>\n                    </div>\n                  }\n                  <div class=\"mc-option-listbox__content\">\n                    <span class=\"mc-option-listbox__text\">{{ item.label }}</span>\n                    @if (item.content) {\n                      <span class=\"mc-option-listbox__additional\">{{ item.content }}</span>\n                    }\n                  </div>\n                  <div class=\"mc-option-listbox__spacer\"></div>\n\n                  <!-- Selection indicator -->\n                  @if (multiple()) {\n                    <moz-checkbox\n                      class=\"mc-option-listbox__checkbox\"\n                      [id]=\"comboboxId + '-cb-' + i\"\n                      [ngModel]=\"isOptionSelected($any(item.value))\"\n                    />\n                  } @else {\n                    <CheckCircle24 class=\"mc-option-listbox__selection-icon\" />\n                  }\n                </div>\n              </div>\n            }\n          </ng-container>\n        </cdk-virtual-scroll-viewport>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".mc-combobox{position:relative;width:18.75rem}.mc-combobox__input{transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;color:var(--forms-color-text-default, #000000);display:block;width:100%;display:flex;align-items:center;gap:.5rem;box-sizing:border-box}.mc-combobox__input:focus-within{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-combobox__input:hover:not(:focus-within){border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-hover, #4d4d4d)}.mc-combobox__input:has(.mc-combobox__control:disabled){background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-combobox__input .mc-combobox__control{text-align:left;font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);color:var(--forms-color-text-default, #000000);background-color:transparent;border:none;padding-left:.75rem;padding-right:0;flex-grow:1;height:3rem;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mc-combobox__input .mc-combobox__control:focus-within{outline:none}.mc-combobox__icon{border:none;display:flex;align-items:center;cursor:pointer;padding-right:.75rem;background:none;color:var(--forms-color-icon-interactive, #000000);fill:currentcolor}.mc-combobox__clear{padding:0;display:flex;align-items:center;justify-content:center;border:none;background:none;cursor:pointer;color:var(--forms-color-icon-clear, #666666);fill:currentcolor}.mc-combobox__counter{height:1.5rem;display:flex;flex-shrink:0;align-items:center;justify-content:center;padding:0 .5rem;border-radius:var(--border-radius-l, 1rem);background-color:var(--forms-color-selection-counter-background, #464e63);font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-50, .75rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-selection-counter-text, #ffffff)}.mc-combobox__listbox{position:absolute;left:0;top:calc(100% + .25rem);visibility:hidden;opacity:0;box-shadow:var(--shadow-bottom-s-x, 0px) var(--shadow-bottom-s-y, 5px) var(--shadow-bottom-s-blur, 10px) var(--shadow-bottom-s-spread, -2px) rgba(0,0,0,var(--shadow-bottom-s-opacity, 20%));border:var(--border-width-s, .0625rem) solid var(--color-border-primary, #cccccc);border-radius:var(--border-radius-m, .5rem);width:100%;z-index:10;background-color:var(--color-background-primary, #ffffff);pointer-events:all}.mc-combobox--open .mc-combobox__listbox{visibility:visible;opacity:1}.mc-combobox--s .mc-combobox__control{height:2rem;font-size:var(--font-size-100, .875rem);padding-left:.5rem}.mc-combobox--s .mc-combobox__icon{padding-right:.5rem}.mc-combobox--s .mc-combobox__clear{width:1.25rem;height:1.25rem}.mc-combobox--invalid .mc-combobox__input{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid, #ea302d)}.mc-combobox--invalid .mc-combobox__input:hover:not(:focus-within){border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid-hover, #c61112)}.mc-combobox--disabled .mc-combobox__input{background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-combobox--disabled .mc-combobox__control{color:var(--forms-color-text-disabled, #737373)}.mc-combobox--disabled .mc-combobox__icon{color:var(--forms-color-icon-disabled, #737373)}.mc-combobox--readonly .mc-combobox__input{border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.mc-option-listbox__list{overflow:auto;display:flex;flex-direction:column;gap:.125rem;margin:0;padding:.5rem;max-height:18.75rem}.mc-option-listbox__item{display:block;border-radius:var(--border-radius-s, .25rem)}.mc-option-listbox__item--disabled{color:var(--option-listbox-color-text-disabled, #b3b3b3)}.mc-option-listbox__item--disabled .mc-option-listbox__label{pointer-events:none;color:var(--option-listbox-color-text-disabled, #b3b3b3)}.mc-option-listbox__item--disabled .mc-option-listbox__additional{color:var(--option-listbox-color-text-disabled, #b3b3b3)}.mc-option-listbox__item--disabled .mc-option-listbox__checkbox{border:none;background-color:var(--forms-color-background-disabled, #d9d9d9)}.mc-option-listbox__item--readonly .mc-option-listbox__label{pointer-events:none}.mc-option-listbox__item--selected:not(.mc-option-listbox__item--section){background-color:var(--option-listbox-color-background-checked, #ebf5de)}.mc-option-listbox__item--selected .mc-option-listbox__selection-icon{opacity:1;color:var(--option-listbox-color-selection-indicator-default, #117f03);fill:currentcolor}.mc-option-listbox__item--selected .mc-option-listbox__checkbox{border:none;background-color:var(--forms-color-background-checked, #117f03);color:var(--forms-color-icon-inverse, #ffffff);fill:currentcolor}.mc-option-listbox__item--selected .mc-option-listbox__checkbox svg{display:block}.mc-option-listbox__item--readonly.mc-option-listbox__item--selected{background-color:var(--option-listbox-color-background-checked-read-only, #eff1f6)}.mc-option-listbox__item--readonly.mc-option-listbox__item--selected .mc-option-listbox__selection-icon{color:var(--option-listbox-color-selection-indicator-read-only, #000000)}.mc-option-listbox__item--readonly.mc-option-listbox__item--selected .mc-option-listbox__checkbox{border:2px solid var(--forms-color-border-read-only, #cccccc);background-color:var(--forms-color-background-default, #ffffff);color:var(--option-listbox-color-selection-indicator-read-only, #000000)}.mc-option-listbox__item--selectable{cursor:pointer}.mc-option-listbox__item--selectable:not(.mc-option-listbox__item--disabled):hover,.mc-option-listbox__item--selectable:not(.mc-option-listbox__item--disabled).mc-option-listbox__item--active{background-color:var(--option-listbox-color-background-hover, rgba(0, 0, 0, .05))}.mc-option-listbox__content{display:flex;flex-direction:column;gap:.125rem}.mc-option-listbox__additional{font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-50, .75rem);color:var(--option-listbox-color-text-information, #666666)}.mc-option-listbox__label{display:flex;align-items:center;gap:.5rem;height:3rem;padding:.5rem;border-radius:var(--border-radius-s, .25rem);line-height:var(--line-height-s, 1.3);box-sizing:border-box}.mc-option-listbox__checkbox{display:flex;align-items:center;justify-content:center;height:1.25rem;width:1.25rem;border:.125rem solid var(--forms-color-border-default, #666666);border-radius:.25rem;box-sizing:border-box}.mc-option-listbox__checkbox svg{display:none}.mc-option-listbox__spacer{flex-grow:1}.mc-option-listbox__selection-icon{opacity:0}.mc-option-listbox__section-title{font-size:var(--font-size-100, .875rem);font-weight:var(--font-weight-semi-bold, 600);margin:0;color:var(--option-listbox-color-text-section-title, #666666)}.mc-option-listbox__search{margin:.5rem;width:unset}.mc-option-listbox__separator{display:block;height:1px;border:0;border-top:1px solid var(--color-border-primary, #cccccc);margin:0;padding:0}.mc-option-listbox__actions{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem}.mc-combobox__virtual-host{overflow:hidden;max-height:none;padding:0}.mc-combobox__viewport,.mc-combobox__viewport .cdk-virtual-scroll-content-wrapper{width:100%}.mc-combobox__loader{display:flex;align-items:center;padding-inline:4px}.mc-combobox__loading,.mc-option-listbox__empty{display:flex;align-items:center;justify-content:center;padding:24px 16px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], showActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActions", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], noResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsText", required: false }] }], selectAllText: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllText", required: false }] }], clearText: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearText", required: false }] }], selectedSuffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedSuffix", required: false }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], showNoResultText: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNoResultText", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], searched: [{ type: i0.Output, args: ["searched"] }], triggerEl: [{ type: i0.ViewChild, args: ['triggerBtn', { isSignal: true }] }], viewportEl: [{ type: i0.ViewChild, args: ['viewport', { isSignal: true }] }] } });
+                    ], template: "<!-- ====================================================================== -->\n<!-- TRIGGER                                                                -->\n<!-- ====================================================================== -->\n<div [class]=\"wrapperClasses()\">\n  <div class=\"mc-combobox__input\">\n    <button\n      #triggerBtn\n      type=\"button\"\n      class=\"mc-combobox__control\"\n      role=\"combobox\"\n      cdkOverlayOrigin\n      #overlayOrigin=\"cdkOverlayOrigin\"\n      [disabled]=\"isEffectivelyDisabled()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-controls]=\"listboxId\"\n      [attr.aria-activedescendant]=\"\n        focusedIndex() >= 0 ? comboboxId + '-opt-' + focusedIndex() : null\n      \"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.aria-labelledby]=\"ariaLabelledBy()\"\n      [attr.aria-invalid]=\"invalid() || null\"\n      (click)=\"toggle()\"\n      (keydown)=\"onTriggerKeydown($event)\"\n    >\n      @if (displayValue()) {\n        <span class=\"mc-combobox__value\">{{ displayValue() }}</span>\n      } @else {\n        <span class=\"mc-combobox__placeholder\">{{ placeholder() }}</span>\n      }\n    </button>\n\n    <!-- Counter (compact + multiple) -->\n    @if (multiple() && compact() && selectedCount() > 0) {\n      <span class=\"mc-combobox__counter\" aria-live=\"polite\">\n        {{ selectedCount() }} {{ selectedSuffix() }}\n      </span>\n    }\n\n    <!-- Clear button -->\n    @if (showClear()) {\n      <button\n        type=\"button\"\n        class=\"mc-combobox__clear\"\n        [attr.aria-label]=\"clearAriaLabel()\"\n        (click)=\"onClear($event)\"\n      >\n        <CrossCircleFilled24 />\n      </button>\n    }\n\n    <!-- Trigger loader -->\n    @if (loading()) {\n      <moz-loader size=\"s\" [appearance]=\"'accent'\" class=\"mc-combobox__loader\" />\n    }\n\n    <!-- Chevron -->\n    <button\n      type=\"button\"\n      class=\"mc-combobox__icon\"\n      tabindex=\"-1\"\n      aria-hidden=\"true\"\n      (click)=\"toggle()\"\n    >\n      <ChevronDown24 />\n    </button>\n  </div>\n</div>\n\n<!-- ====================================================================== -->\n<!-- OVERLAY / DROPDOWN                                                     -->\n<!-- ====================================================================== -->\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayWidth]=\"triggerWidth()\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"mc-combobox-backdrop\"\n  (backdropClick)=\"onOverlayOutsideClick()\"\n  (attach)=\"onOverlayAttached()\"\n>\n  <div\n    class=\"mc-option-listbox mc-listbox__content mc-combobox__listbox\"\n    (keydown)=\"onPanelKeydown($event)\"\n  >\n    <!-- Search -->\n    @if (searchable()) {\n      <div class=\"mc-option-listbox__search\">\n        <Search24 icon />\n        <input\n          #searchInput\n          moz-text-input\n          type=\"text\"\n          [placeholder]=\"searchPlaceholder()\"\n          autocomplete=\"off\"\n          aria-autocomplete=\"list\"\n          [attr.aria-controls]=\"listboxId\"\n          [value]=\"searchQuery()\"\n          (input)=\"onSearchInput($event)\"\n          (keydown)=\"onSearchKeydown($event)\"\n          [size]=\"'s'\"\n        />\n      </div>\n      <hr class=\"mc-option-listbox__separator\" />\n    }\n\n    <!-- Actions (multiple only) -->\n    @if (showActions() && multiple()) {\n      <div class=\"mc-option-listbox__actions\">\n        <button\n          moz-button\n          type=\"button\"\n          [size]=\"'s'\"\n          [ghost]=\"true\"\n          [appearance]=\"'accent'\"\n          (click)=\"selectAll()\"\n        >\n          {{ selectAllText() }}\n        </button>\n        <button moz-button type=\"button\" [size]=\"'s'\" [ghost]=\"true\" (click)=\"clearSelection()\">\n          {{ clearText() }}\n        </button>\n      </div>\n      <hr class=\"mc-option-listbox__separator\" />\n    }\n\n    <!-- Listbox with virtual scroll -->\n    <div\n      #listbox\n      role=\"listbox\"\n      [id]=\"listboxId\"\n      class=\"mc-option-listbox__list mc-combobox__virtual-host\"\n      [attr.aria-multiselectable]=\"multiple() || null\"\n      [attr.aria-label]=\"ariaLabel() ?? 'Options'\"\n      [attr.aria-busy]=\"loading() || null\"\n      [attr.aria-activedescendant]=\"\n        focusedIndex() >= 0 ? comboboxId + '-opt-' + focusedIndex() : null\n      \"\n      tabindex=\"-1\"\n    >\n      @if (loading()) {\n        <div class=\"mc-combobox__loading\" role=\"status\">\n          <moz-loader size=\"s\" [appearance]=\"'accent'\" [text]=\"loadingText()\" />\n        </div>\n      } @else if (filteredItems().length === 0 && showNoResultText() && searchQuery().length > 0) {\n        <div class=\"mc-option-listbox__empty\" role=\"presentation\" aria-live=\"polite\">\n          {{ noResultsText() }}\n        </div>\n      } @else {\n        <cdk-virtual-scroll-viewport\n          #viewport\n          [itemSize]=\"itemSizePx\"\n          [style.height.px]=\"viewportHeight()\"\n          class=\"mc-combobox__viewport\"\n        >\n          <ng-container\n            *cdkVirtualFor=\"let item of filteredItems(); let i = index; trackBy: trackByFlatItem\"\n          >\n            <!-- Section header -->\n            @if (isFlatSection(item)) {\n              <div\n                class=\"mc-option-listbox__item mc-option-listbox__item--section\"\n                [class.mc-option-listbox__item--selectable]=\"item.checkable && multiple()\"\n                [class.mc-option-listbox__item--selected]=\"\n                  item.checkable &&\n                  multiple() &&\n                  (isSectionFullySelected(item.title) || isSectionPartiallySelected(item.title))\n                \"\n                role=\"presentation\"\n                (click)=\"item.checkable && multiple() ? toggleSection(item.title) : null\"\n              >\n                <div class=\"mc-option-listbox__label\">\n                  <div class=\"mc-option-listbox__content\">\n                    <span class=\"mc-option-listbox__section-title\">{{ item.title }}</span>\n                  </div>\n                  <div class=\"mc-option-listbox__spacer\"></div>\n                  @if (item.checkable && multiple()) {\n                    <moz-checkbox\n                      class=\"mc-option-listbox__checkbox\"\n                      [id]=\"comboboxId + '-section-cb-' + i\"\n                      [ngModel]=\"isSectionFullySelected(item.title)\"\n                      [indeterminate]=\"isSectionPartiallySelected(item.title)\"\n                    />\n                  }\n                </div>\n              </div>\n            }\n\n            <!-- Option -->\n            @if (isFlatOption(item)) {\n              <div\n                role=\"option\"\n                [id]=\"comboboxId + '-opt-' + i\"\n                [attr.aria-selected]=\"isOptionSelected($any(item.value))\"\n                [attr.aria-disabled]=\"item.disabled || null\"\n                class=\"mc-option-listbox__item\"\n                [class.mc-option-listbox__item--selectable]=\"!item.disabled\"\n                [class.mc-option-listbox__item--disabled]=\"item.disabled\"\n                [class.mc-option-listbox__item--selected]=\"isOptionSelected($any(item.value))\"\n                [class.mc-option-listbox__item--active]=\"focusedIndex() === i\"\n                (click)=\"!item.disabled && selectOption($any(item.value))\"\n                (mouseenter)=\"focusedIndex.set(i)\"\n              >\n                <div class=\"mc-option-listbox__label\">\n                  @if (item.icon) {\n                    <div class=\"mc-option-listbox__prepend\">\n                      <span class=\"mc-option-listbox__icon\">{{ item.icon }}</span>\n                    </div>\n                  }\n                  <div class=\"mc-option-listbox__content\">\n                    <span class=\"mc-option-listbox__text\">{{ item.label }}</span>\n                    @if (item.content) {\n                      <span class=\"mc-option-listbox__additional\">{{ item.content }}</span>\n                    }\n                  </div>\n                  <div class=\"mc-option-listbox__spacer\"></div>\n\n                  <!-- Selection indicator -->\n                  @if (multiple()) {\n                    <moz-checkbox\n                      class=\"mc-option-listbox__checkbox\"\n                      [id]=\"comboboxId + '-cb-' + i\"\n                      [ngModel]=\"isOptionSelected($any(item.value))\"\n                      [disabled]=\"!!item.disabled\"\n                    />\n                  } @else {\n                    <CheckCircle24 class=\"mc-option-listbox__selection-icon\" />\n                  }\n                </div>\n              </div>\n            }\n          </ng-container>\n        </cdk-virtual-scroll-viewport>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".mc-combobox{position:relative;width:18.75rem}.mc-combobox__input{transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;color:var(--forms-color-text-default, #000000);display:block;width:100%;display:flex;align-items:center;gap:.5rem;box-sizing:border-box}.mc-combobox__input:focus-within{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-combobox__input:hover:not(:focus-within){border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-hover, #4d4d4d)}.mc-combobox__input:has(.mc-combobox__control:disabled){background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-combobox__input .mc-combobox__control{text-align:left;font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);color:var(--forms-color-text-default, #000000);background-color:transparent;border:none;padding-left:.75rem;padding-right:0;flex-grow:1;height:3rem;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mc-combobox__input .mc-combobox__control:focus-within{outline:none}.mc-combobox__icon{border:none;display:flex;align-items:center;cursor:pointer;padding-right:.75rem;background:none;color:var(--forms-color-icon-interactive, #000000);fill:currentcolor}.mc-combobox__clear{padding:0;display:flex;align-items:center;justify-content:center;border:none;background:none;cursor:pointer;color:var(--forms-color-icon-clear, #666666);fill:currentcolor}.mc-combobox__counter{height:1.5rem;display:flex;flex-shrink:0;align-items:center;justify-content:center;padding:0 .5rem;border-radius:var(--border-radius-l, 1rem);background-color:var(--forms-color-selection-counter-background, #464e63);font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-50, .75rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-selection-counter-text, #ffffff)}.mc-combobox__listbox{position:absolute;left:0;top:calc(100% + .25rem);visibility:hidden;opacity:0;box-shadow:var(--shadow-bottom-s-x, 0px) var(--shadow-bottom-s-y, 5px) var(--shadow-bottom-s-blur, 10px) var(--shadow-bottom-s-spread, -2px) rgba(0,0,0,var(--shadow-bottom-s-opacity, 20%));border:var(--border-width-s, .0625rem) solid var(--color-border-primary, #cccccc);border-radius:var(--border-radius-m, .5rem);width:100%;z-index:10;background-color:var(--color-background-primary, #ffffff);pointer-events:all}.mc-combobox--open .mc-combobox__listbox{visibility:visible;opacity:1}.mc-combobox--s .mc-combobox__control{height:2rem;font-size:var(--font-size-100, .875rem);padding-left:.5rem}.mc-combobox--s .mc-combobox__icon{padding-right:.5rem}.mc-combobox--s .mc-combobox__clear{width:1.25rem;height:1.25rem}.mc-combobox--invalid .mc-combobox__input{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid, #ea302d)}.mc-combobox--invalid .mc-combobox__input:hover:not(:focus-within){border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid-hover, #c61112)}.mc-combobox--disabled .mc-combobox__input{background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-combobox--disabled .mc-combobox__control{color:var(--forms-color-text-disabled, #737373)}.mc-combobox--disabled .mc-combobox__icon{color:var(--forms-color-icon-disabled, #737373)}.mc-combobox--readonly .mc-combobox__input{border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.mc-option-listbox__list{overflow:auto;display:flex;flex-direction:column;gap:.125rem;margin:0;padding:.5rem;max-height:18.75rem}.mc-option-listbox__item{display:block;border-radius:var(--border-radius-s, .25rem)}.mc-option-listbox__item--disabled{color:var(--option-listbox-color-text-disabled, #b3b3b3)}.mc-option-listbox__item--disabled .mc-option-listbox__label{pointer-events:none;color:var(--option-listbox-color-text-disabled, #b3b3b3)}.mc-option-listbox__item--disabled .mc-option-listbox__additional{color:var(--option-listbox-color-text-disabled, #b3b3b3)}.mc-option-listbox__item--disabled .mc-option-listbox__checkbox{border:none;background-color:var(--forms-color-background-disabled, #d9d9d9)}.mc-option-listbox__item--readonly .mc-option-listbox__label{pointer-events:none}.mc-option-listbox__item--selected:not(.mc-option-listbox__item--section){background-color:var(--option-listbox-color-background-checked, #ebf5de)}.mc-option-listbox__item--selected .mc-option-listbox__selection-icon{opacity:1;color:var(--option-listbox-color-selection-indicator-default, #117f03);fill:currentcolor}.mc-option-listbox__item--selected .mc-option-listbox__checkbox{border:none;background-color:var(--forms-color-background-checked, #117f03);color:var(--forms-color-icon-inverse, #ffffff);fill:currentcolor}.mc-option-listbox__item--selected .mc-option-listbox__checkbox svg{display:block}.mc-option-listbox__item--readonly.mc-option-listbox__item--selected{background-color:var(--option-listbox-color-background-checked-read-only, #eff1f6)}.mc-option-listbox__item--readonly.mc-option-listbox__item--selected .mc-option-listbox__selection-icon{color:var(--option-listbox-color-selection-indicator-read-only, #000000)}.mc-option-listbox__item--readonly.mc-option-listbox__item--selected .mc-option-listbox__checkbox{border:2px solid var(--forms-color-border-read-only, #cccccc);background-color:var(--forms-color-background-default, #ffffff);color:var(--option-listbox-color-selection-indicator-read-only, #000000)}.mc-option-listbox__item--selectable{cursor:pointer}.mc-option-listbox__item--selectable:not(.mc-option-listbox__item--disabled):hover,.mc-option-listbox__item--selectable:not(.mc-option-listbox__item--disabled).mc-option-listbox__item--active{background-color:var(--option-listbox-color-background-hover, rgba(0, 0, 0, .05))}.mc-option-listbox__content{display:flex;flex-direction:column;gap:.125rem}.mc-option-listbox__additional{font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-50, .75rem);color:var(--option-listbox-color-text-information, #666666)}.mc-option-listbox__label{display:flex;align-items:center;gap:.5rem;height:3rem;padding:.5rem;border-radius:var(--border-radius-s, .25rem);line-height:var(--line-height-s, 1.3);box-sizing:border-box}.mc-option-listbox__checkbox{display:flex;align-items:center;justify-content:center;height:1.25rem;width:1.25rem;border:.125rem solid var(--forms-color-border-default, #666666);border-radius:.25rem;box-sizing:border-box}.mc-option-listbox__checkbox svg{display:none}.mc-option-listbox__spacer{flex-grow:1}.mc-option-listbox__selection-icon{opacity:0}.mc-option-listbox__section-title{font-size:var(--font-size-100, .875rem);font-weight:var(--font-weight-semi-bold, 600);margin:0;color:var(--option-listbox-color-text-section-title, #666666)}.mc-option-listbox__search{margin:.5rem;width:unset}.mc-option-listbox__separator{display:block;height:1px;border:0;border-top:1px solid var(--color-border-primary, #cccccc);margin:0;padding:0}.mc-option-listbox__actions{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem}.mc-combobox__virtual-host{overflow:hidden;max-height:none;padding:0}.mc-combobox__viewport,.mc-combobox__viewport .cdk-virtual-scroll-content-wrapper{width:100%}.mc-combobox__loader{display:flex;align-items:center;padding-inline:4px}.mc-combobox__loading,.mc-option-listbox__empty{display:flex;align-items:center;justify-content:center;padding:24px 16px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], multiSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSearch", required: false }] }], showActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActions", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], noResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsText", required: false }] }], selectAllText: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllText", required: false }] }], clearText: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearText", required: false }] }], selectedSuffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedSuffix", required: false }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], showNoResultText: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNoResultText", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], searched: [{ type: i0.Output, args: ["searched"] }], triggerEl: [{ type: i0.ViewChild, args: ['triggerBtn', { isSignal: true }] }], viewportEl: [{ type: i0.ViewChild, args: ['viewport', { isSignal: true }] }] } });
 
 /**
  * Harness for a single option inside the combobox dropdown.