@mozaic-ds/angular 2.1.3 → 2.1.4

package/fesm2022/mozaic-ds-angular.mjs

@@ -4950,11 +4950,8 @@ const VIEWPORT_HEIGHT_PX = 300;
 class MozComboboxComponent {
     _doc = inject(DOCUMENT);
     _overlay = inject(Overlay);
-    _appRef = inject(ApplicationRef);
-    /** rAF handle for the scroll-driven change-detection loop (see _kickViewportTick). */
-    _viewportTickRaf = null;
-    /** Timestamp of the last viewport scroll event, used to stop the tick loop when idle. */
-    _lastViewportScrollTs = 0;
+    /** Timestamp of the last viewport re-measure, to throttle onViewportScroll(). */
+    _lastViewportSync = 0;
     /**
      * No-op scroll strategy: the dropdown embeds a CDK virtual-scroll viewport,
      * which is a global `CdkScrollable`. With the default `reposition` strategy,
@@ -5255,40 +5252,6 @@ class MozComboboxComponent {
                 }
             }
         });
-        // Zoneless support for the virtual-scroll viewport.
-        //
-        // The viewport lives inside the CDK connected-overlay portal, so it CANNOT
-        // be reached through `viewChild()` (the portal renders in a separate view
-        // container). On Angular/CDK 22 the viewport applies its content transform
-        // from an `effect()` that only runs during an ApplicationRef tick; in
-        // zoneless mode no tick is scheduled while the user scrolls the list, so the
-        // rendered window freezes and the panel appears to "bounce" without ever
-        // reaching the bottom. (CDK 21 used a different path and was unaffected,
-        // which is why Storybook on 21 looked fine while the 22 consumer bounced.)
-        //
-        // Fix: while the dropdown is open, listen for scroll events on the viewport
-        // in the capture phase (scroll does not bubble) and drive change detection
-        // for a few frames after each scroll, restoring the per-frame CD that
-        // Zone.js would otherwise provide.
-        effect((onCleanup) => {
-            if (!this.isOpen())
-                return;
-            const viewportId = `${this.comboboxId}-viewport`;
-            const onScroll = (event) => {
-                const target = event.target;
-                if (target?.id === viewportId) {
-                    this._kickViewportTick();
-                }
-            };
-            this._doc.addEventListener('scroll', onScroll, true);
-            onCleanup(() => {
-                this._doc.removeEventListener('scroll', onScroll, true);
-                if (this._viewportTickRaf !== null) {
-                    cancelAnimationFrame(this._viewportTickRaf);
-                    this._viewportTickRaf = null;
-                }
-            });
-        });
         // Inject global overlay styles — CDK teleports content outside the
         // component host so scoped CSS never reaches .cdk-overlay-pane.
         // Check DOM each render — Storybook may remove the tag on navigation.
@@ -5599,33 +5562,35 @@ class MozComboboxComponent {
         }
     }
     /**
-     * Drive change detection for a short window after a viewport scroll so the
-     * CDK virtual-scroll viewport (inside the overlay portal) applies its content
-     * transform in zoneless mode. Runs at most one rAF loop at a time; each new
-     * scroll event extends the window, and the loop stops ~200ms after the last
-     * scroll. `tick()` is guarded because it throws if called during an ongoing
-     * change-detection pass (it never is here — rAF callbacks run outside CD).
+     * Zoneless fix for the virtual-scroll viewport.
+     *
+     * On Angular/CDK 22 in zoneless mode the viewport never recomputes its
+     * rendered range while the user scrolls: `onContentScrolled` doesn't refresh
+     * the window and the content transform stays frozen, so the panel "bounces"
+     * and never reaches the bottom of the list. (CDK 21 used a different path and
+     * was unaffected — hence Storybook on 21 looked fine while the 22 consumer
+     * bounced.) Calling the viewport's public `checkViewportSize()` re-measures
+     * and re-renders the correct window; it is idempotent at a valid scroll
+     * position (verified — repeated calls don't move the scroll), so there is no
+     * feedback loop. The handler receives the viewport through the `#viewport`
+     * template reference, which resolves correctly even though the viewport lives
+     * in the overlay portal (unlike `viewChild`).
+     *
+     * Throttled to ~one re-measure per frame (16 ms). Browsers already coalesce
+     * scroll events to roughly one per animation frame — even for a high-frequency
+     * trackpad / momentum scroll — but the throttle is a defensive cap so this
+     * synchronous reflow can never be called in a tight burst. `checkViewportSize()`
+     * is idempotent at a valid scroll offset (verified on the real CDK 22 zoneless
+     * runtime — repeated calls don't move the scroll), so it never fights the
+     * scroll position and there is no feedback loop.
      */
-    _kickViewportTick() {
-        this._lastViewportScrollTs = Date.now();
-        if (this._viewportTickRaf !== null) {
+    onViewportScroll(viewport) {
+        const now = performance.now();
+        if (now - this._lastViewportSync < 16) {
             return;
         }
-        const loop = () => {
-            try {
-                this._appRef.tick();
-            }
-            catch {
-                // tick() called during an active CD pass — safe to skip this frame.
-            }
-            if (Date.now() - this._lastViewportScrollTs < 200) {
-                this._viewportTickRaf = requestAnimationFrame(loop);
-            }
-            else {
-                this._viewportTickRaf = null;
-            }
-        };
-        this._viewportTickRaf = requestAnimationFrame(loop);
+        this._lastViewportSync = now;
+        viewport.checkViewportSize();
     }
     /** Coerce the current value into an array (safe for .some/.filter/.every). */
     _currentValueAsArray() {
@@ -5692,7 +5657,7 @@ class MozComboboxComponent {
                 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      [id]=\"comboboxId + '-trigger'\"\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 [id]=\"comboboxId + '-counter'\" class=\"mc-combobox__counter\" aria-live=\"polite\">\n      {{ selectedCount() }} {{ selectedSuffix() }}\n    </span>\n    }\n\n    <!-- Clear button -->\n    @if (showClear()) {\n    <button\n      [id]=\"comboboxId + '-clear'\"\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\n      [id]=\"comboboxId + '-trigger-loader'\"\n      size=\"s\"\n      [appearance]=\"'accent'\"\n      class=\"mc-combobox__loader\"\n    />\n    }\n\n    <!-- Chevron -->\n    <button\n      [id]=\"comboboxId + '-chevron'\"\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  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"mc-combobox-backdrop\"\n  (backdropClick)=\"onOverlayOutsideClick()\"\n  (attach)=\"onOverlayAttached()\"\n>\n  <div\n    [id]=\"comboboxId + '-panel'\"\n    class=\"mc-option-listbox mc-listbox__content mc-combobox__listbox\"\n    (keydown)=\"onPanelKeydown($event)\"\n  >\n    <!-- Search -->\n    @if (searchable()) {\n    <div [id]=\"comboboxId + '-search'\" class=\"mc-option-listbox__search\">\n      <Search24 icon />\n      <input\n        #searchInput\n        [id]=\"comboboxId + '-search-input'\"\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 [id]=\"comboboxId + '-actions'\" class=\"mc-option-listbox__actions\">\n      <button\n        [id]=\"comboboxId + '-select-all'\"\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\n        [id]=\"comboboxId + '-clear-selection'\"\n        moz-button\n        type=\"button\"\n        [size]=\"'s'\"\n        [ghost]=\"true\"\n        (click)=\"clearSelection()\"\n      >\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 [id]=\"comboboxId + '-loading'\" 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\n        [id]=\"comboboxId + '-empty'\"\n        class=\"mc-option-listbox__empty\"\n        role=\"presentation\"\n        aria-live=\"polite\"\n      >\n        {{ noResultsText() }}\n      </div>\n      } @else {\n      <cdk-virtual-scroll-viewport\n        #viewport\n        [id]=\"comboboxId + '-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            [id]=\"comboboxId + '-section-' + i\"\n            class=\"mc-option-listbox__item mc-option-listbox__item--section\"\n            [class.mc-option-listbox__item--selectable]=\"\n              item.checkable && multiple() && !item.disabled\n            \"\n            [class.mc-option-listbox__item--disabled]=\"item.disabled\"\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)=\"\n              item.checkable && multiple() && !item.disabled ? toggleSection(item.title) : null\n            \"\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                [disabled]=\"!!item.disabled\"\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:100%}.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{flex-shrink:0;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      [id]=\"comboboxId + '-trigger'\"\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 [id]=\"comboboxId + '-counter'\" class=\"mc-combobox__counter\" aria-live=\"polite\">\n      {{ selectedCount() }} {{ selectedSuffix() }}\n    </span>\n    }\n\n    <!-- Clear button -->\n    @if (showClear()) {\n    <button\n      [id]=\"comboboxId + '-clear'\"\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\n      [id]=\"comboboxId + '-trigger-loader'\"\n      size=\"s\"\n      [appearance]=\"'accent'\"\n      class=\"mc-combobox__loader\"\n    />\n    }\n\n    <!-- Chevron -->\n    <button\n      [id]=\"comboboxId + '-chevron'\"\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  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"mc-combobox-backdrop\"\n  (backdropClick)=\"onOverlayOutsideClick()\"\n  (attach)=\"onOverlayAttached()\"\n>\n  <div\n    [id]=\"comboboxId + '-panel'\"\n    class=\"mc-option-listbox mc-listbox__content mc-combobox__listbox\"\n    (keydown)=\"onPanelKeydown($event)\"\n  >\n    <!-- Search -->\n    @if (searchable()) {\n    <div [id]=\"comboboxId + '-search'\" class=\"mc-option-listbox__search\">\n      <Search24 icon />\n      <input\n        #searchInput\n        [id]=\"comboboxId + '-search-input'\"\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 [id]=\"comboboxId + '-actions'\" class=\"mc-option-listbox__actions\">\n      <button\n        [id]=\"comboboxId + '-select-all'\"\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\n        [id]=\"comboboxId + '-clear-selection'\"\n        moz-button\n        type=\"button\"\n        [size]=\"'s'\"\n        [ghost]=\"true\"\n        (click)=\"clearSelection()\"\n      >\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 [id]=\"comboboxId + '-loading'\" 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\n        [id]=\"comboboxId + '-empty'\"\n        class=\"mc-option-listbox__empty\"\n        role=\"presentation\"\n        aria-live=\"polite\"\n      >\n        {{ noResultsText() }}\n      </div>\n      } @else {\n      <cdk-virtual-scroll-viewport\n        #viewport\n        [id]=\"comboboxId + '-viewport'\"\n        [itemSize]=\"itemSizePx\"\n        [style.height.px]=\"viewportHeight()\"\n        class=\"mc-combobox__viewport\"\n        (scroll)=\"onViewportScroll(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            [id]=\"comboboxId + '-section-' + i\"\n            class=\"mc-option-listbox__item mc-option-listbox__item--section\"\n            [class.mc-option-listbox__item--selectable]=\"\n              item.checkable && multiple() && !item.disabled\n            \"\n            [class.mc-option-listbox__item--disabled]=\"item.disabled\"\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)=\"\n              item.checkable && multiple() && !item.disabled ? toggleSection(item.title) : null\n            \"\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                [disabled]=\"!!item.disabled\"\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:100%}.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{flex-shrink:0;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.15", ngImport: i0, type: MozComboboxComponent, decorators: [{
             type: Component,
@@ -5715,7 +5680,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                             useExisting: forwardRef(() => MozComboboxComponent),
                             multi: true,
                         },
-                    ], template: "<!-- ====================================================================== -->\n<!-- TRIGGER                                                                -->\n<!-- ====================================================================== -->\n<div [class]=\"wrapperClasses()\">\n  <div class=\"mc-combobox__input\">\n    <button\n      #triggerBtn\n      [id]=\"comboboxId + '-trigger'\"\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 [id]=\"comboboxId + '-counter'\" class=\"mc-combobox__counter\" aria-live=\"polite\">\n      {{ selectedCount() }} {{ selectedSuffix() }}\n    </span>\n    }\n\n    <!-- Clear button -->\n    @if (showClear()) {\n    <button\n      [id]=\"comboboxId + '-clear'\"\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\n      [id]=\"comboboxId + '-trigger-loader'\"\n      size=\"s\"\n      [appearance]=\"'accent'\"\n      class=\"mc-combobox__loader\"\n    />\n    }\n\n    <!-- Chevron -->\n    <button\n      [id]=\"comboboxId + '-chevron'\"\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  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"mc-combobox-backdrop\"\n  (backdropClick)=\"onOverlayOutsideClick()\"\n  (attach)=\"onOverlayAttached()\"\n>\n  <div\n    [id]=\"comboboxId + '-panel'\"\n    class=\"mc-option-listbox mc-listbox__content mc-combobox__listbox\"\n    (keydown)=\"onPanelKeydown($event)\"\n  >\n    <!-- Search -->\n    @if (searchable()) {\n    <div [id]=\"comboboxId + '-search'\" class=\"mc-option-listbox__search\">\n      <Search24 icon />\n      <input\n        #searchInput\n        [id]=\"comboboxId + '-search-input'\"\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 [id]=\"comboboxId + '-actions'\" class=\"mc-option-listbox__actions\">\n      <button\n        [id]=\"comboboxId + '-select-all'\"\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\n        [id]=\"comboboxId + '-clear-selection'\"\n        moz-button\n        type=\"button\"\n        [size]=\"'s'\"\n        [ghost]=\"true\"\n        (click)=\"clearSelection()\"\n      >\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 [id]=\"comboboxId + '-loading'\" 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\n        [id]=\"comboboxId + '-empty'\"\n        class=\"mc-option-listbox__empty\"\n        role=\"presentation\"\n        aria-live=\"polite\"\n      >\n        {{ noResultsText() }}\n      </div>\n      } @else {\n      <cdk-virtual-scroll-viewport\n        #viewport\n        [id]=\"comboboxId + '-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            [id]=\"comboboxId + '-section-' + i\"\n            class=\"mc-option-listbox__item mc-option-listbox__item--section\"\n            [class.mc-option-listbox__item--selectable]=\"\n              item.checkable && multiple() && !item.disabled\n            \"\n            [class.mc-option-listbox__item--disabled]=\"item.disabled\"\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)=\"\n              item.checkable && multiple() && !item.disabled ? toggleSection(item.title) : null\n            \"\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                [disabled]=\"!!item.disabled\"\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:100%}.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{flex-shrink:0;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"] }]
+                    ], template: "<!-- ====================================================================== -->\n<!-- TRIGGER                                                                -->\n<!-- ====================================================================== -->\n<div [class]=\"wrapperClasses()\">\n  <div class=\"mc-combobox__input\">\n    <button\n      #triggerBtn\n      [id]=\"comboboxId + '-trigger'\"\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 [id]=\"comboboxId + '-counter'\" class=\"mc-combobox__counter\" aria-live=\"polite\">\n      {{ selectedCount() }} {{ selectedSuffix() }}\n    </span>\n    }\n\n    <!-- Clear button -->\n    @if (showClear()) {\n    <button\n      [id]=\"comboboxId + '-clear'\"\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\n      [id]=\"comboboxId + '-trigger-loader'\"\n      size=\"s\"\n      [appearance]=\"'accent'\"\n      class=\"mc-combobox__loader\"\n    />\n    }\n\n    <!-- Chevron -->\n    <button\n      [id]=\"comboboxId + '-chevron'\"\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  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"mc-combobox-backdrop\"\n  (backdropClick)=\"onOverlayOutsideClick()\"\n  (attach)=\"onOverlayAttached()\"\n>\n  <div\n    [id]=\"comboboxId + '-panel'\"\n    class=\"mc-option-listbox mc-listbox__content mc-combobox__listbox\"\n    (keydown)=\"onPanelKeydown($event)\"\n  >\n    <!-- Search -->\n    @if (searchable()) {\n    <div [id]=\"comboboxId + '-search'\" class=\"mc-option-listbox__search\">\n      <Search24 icon />\n      <input\n        #searchInput\n        [id]=\"comboboxId + '-search-input'\"\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 [id]=\"comboboxId + '-actions'\" class=\"mc-option-listbox__actions\">\n      <button\n        [id]=\"comboboxId + '-select-all'\"\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\n        [id]=\"comboboxId + '-clear-selection'\"\n        moz-button\n        type=\"button\"\n        [size]=\"'s'\"\n        [ghost]=\"true\"\n        (click)=\"clearSelection()\"\n      >\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 [id]=\"comboboxId + '-loading'\" 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\n        [id]=\"comboboxId + '-empty'\"\n        class=\"mc-option-listbox__empty\"\n        role=\"presentation\"\n        aria-live=\"polite\"\n      >\n        {{ noResultsText() }}\n      </div>\n      } @else {\n      <cdk-virtual-scroll-viewport\n        #viewport\n        [id]=\"comboboxId + '-viewport'\"\n        [itemSize]=\"itemSizePx\"\n        [style.height.px]=\"viewportHeight()\"\n        class=\"mc-combobox__viewport\"\n        (scroll)=\"onViewportScroll(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            [id]=\"comboboxId + '-section-' + i\"\n            class=\"mc-option-listbox__item mc-option-listbox__item--section\"\n            [class.mc-option-listbox__item--selectable]=\"\n              item.checkable && multiple() && !item.disabled\n            \"\n            [class.mc-option-listbox__item--disabled]=\"item.disabled\"\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)=\"\n              item.checkable && multiple() && !item.disabled ? toggleSection(item.title) : null\n            \"\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                [disabled]=\"!!item.disabled\"\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:100%}.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{flex-shrink:0;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 }] }], serverSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "serverSide", 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 }] }], canSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "canSelectAll", 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 }] }] } });
 
 /**