@mozaic-ds/angular 2.4.0 → 2.5.0

package/fesm2022/mozaic-ds-angular.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, computed, ChangeDetectionStrategy, Component, contentChild, ViewEncapsulation, signal, forwardRef, output, ContentChild, viewChild, inject, model, InjectionToken, HostListener, Injector, Injectable, TemplateRef, afterNextRender, Directive, linkedSignal, EnvironmentInjector, createComponent, ChangeDetectorRef, NgZone, viewChildren, effect, ContentChildren, ApplicationRef, Renderer2, ElementRef, Input, booleanAttribute, contentChildren, untracked } from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, Component, contentChild, ViewEncapsulation, signal, forwardRef, output, ContentChild, viewChild, inject, model, InjectionToken, HostListener, Injector, Injectable, TemplateRef, afterNextRender, Directive, linkedSignal, EnvironmentInjector, createComponent, ChangeDetectorRef, NgZone, viewChildren, effect, ContentChildren, ApplicationRef, Renderer2, ElementRef, Input, booleanAttribute, contentChildren, afterRenderEffect, untracked } from '@angular/core';
 import { RouterLink, RouterLinkActive, RouterLinkWithHref } from '@angular/router';
 import { NgTemplateOutlet, NgClass, NgComponentOutlet, DOCUMENT } from '@angular/common';
 import * as i1 from '@angular/forms';
@@ -4819,11 +4819,11 @@ class DrawerContainerComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: DrawerContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: DrawerContainerComponent, isStandalone: true, selector: "moz-drawer-container", host: { listeners: { "keydown.escape": "onEscape()" } }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, isSignal: true }], ngImport: i0, template: "<section\n  (click)=\"$event.stopPropagation()\"\n  (keydown)=\"noop()\"\n  class=\"mc-drawer\"\n  [class.is-open]=\"drawerRef.isOpen()\"\n  [class.mc-drawer--extend]=\"drawerRef.extended()\"\n  [class.mc-drawer--left]=\"drawerRef.position() === 'left'\"\n  role=\"dialog\"\n  aria-labelledby=\"drawerTitle\"\n  [attr.aria-modal]=\"ariaModal()\"\n  tabindex=\"-1\"\n  [attr.aria-hidden]=\"!drawerRef.isOpen()\"\n>\n  <div class=\"mc-drawer__dialog\" [class]=\"drawerRef.panelClass()\" role=\"document\">\n    <div class=\"mc-drawer__header\">\n      @if (drawerRef.back()) {\n        <moz-icon-button\n          class=\"mc-drawer__back\"\n          aria-label=\"Back\"\n          [ghost]=\"true\"\n          (activated)=\"onBackClick()\"\n          [id]=\"'drawer-back-button'\"\n        >\n          <ArrowBack24 icon />\n        </moz-icon-button>\n      }\n\n      <h2 class=\"mc-drawer__title\" id=\"drawerTitle\">{{ drawerRef.title() }}</h2>\n\n      <moz-icon-button\n        class=\"mc-drawer__close\"\n        aria-label=\"Close\"\n        [ghost]=\"true\"\n        (activated)=\"drawerRef.close()\"\n        [id]=\"'drawer-close-button'\"\n      >\n        <Cross24 icon />\n      </moz-icon-button>\n    </div>\n\n    <div class=\"mc-drawer__body\">\n      <div class=\"mc-drawer__content\" tabindex=\"0\">\n        @if (drawerRef.contentTitle()) {\n        <h2 class=\"mc-drawer__content__title\">\n          {{ drawerRef.contentTitle() }}\n        </h2>\n        }\n\n        <ng-template cdkPortalOutlet />\n      </div>\n    </div>\n\n    @if (footerTpl) {\n    <div class=\"mc-drawer__footer\">\n      <ng-container *ngTemplateOutlet=\"footerTpl\" />\n    </div>\n    }\n  </div>\n\n  @if (drawerRef.isOpen()) {\n  <div class=\"mc-overlay is-visible\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\"></div>\n  }\n</section>\n", styles: [".mc-drawer{box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;display:flex;overflow:hidden;padding:var(--spacing-100, .5rem);justify-content:flex-end;z-index:var(--drawer-z-index, 5)}@media(width>=680px){.mc-drawer{padding:var(--spacing-200, 1rem)}}.mc-drawer--left{justify-content:flex-start}.mc-drawer--left .mc-drawer__dialog{transform:translate3d(-100%,0,0)}@media(width>=680px){.mc-drawer--extend .mc-drawer__dialog{max-width:39rem}}.mc-drawer__dialog{background:var(--drawer-color-background, #ffffff);display:flex;flex-direction:column;height:100%;max-width:100%;transform:translate3d(100%,0,0);transition:visibility 0s linear .4s,transform .4s;visibility:hidden;width:100%;z-index:var(--drawer-z-index, 5);border-radius:var(--border-radius-l, 1rem)}@media(width>=680px){.mc-drawer__dialog{max-width:25rem}}.mc-drawer__header{display:flex;align-items:center;justify-content:center;height:var(--spacing-800, 4rem)}.mc-drawer__icon{height:var(--spacing-300, 1.5rem);margin-right:var(--spacing-150, .75rem);width:var(--spacing-300, 1.5rem)}.mc-drawer__title{font:var(--font-body-accent-s, 600 .875rem/1.3 LeroyMerlin),sans-serif;color:var(--drawer-color-text-title, #666666);margin-bottom:0;margin-top:0;text-align:center;flex-grow:1;outline:none}.mc-drawer__title:first-child{padding-left:var(--spacing-800, 4rem)}.mc-drawer__back,.mc-drawer__close{margin:var(--spacing-100, .5rem)}.mc-drawer__body{flex:1 1;overflow:scroll}.mc-drawer__body:last-child{margin-bottom:var(--spacing-300, 1.5rem);padding-bottom:var(--spacing-300, 1.5rem)}.mc-drawer__content{height:100%;overflow:hidden auto;padding:var(--spacing-100, .5rem) var(--spacing-200, 1rem) 0;color:var(--drawer-color-text-paragraph, #000000)}@media(width>=680px){.mc-drawer__content{padding:var(--spacing-100, .5rem) var(--spacing-300, 1.5rem) 0}}.mc-drawer__content__title{font:var(--font-title-m, 600 1.5rem/1.3 LeroyMerlin),sans-serif;margin:0 0 var(--spacing-100, .5rem)}.mc-drawer__footer{display:flex;flex-direction:column;gap:var(--spacing-200, 1rem);padding:var(--spacing-200, 1rem) var(--spacing-300, 1.5rem);border-top:var(--border-width-s, .0625rem) solid var(--divider-color-primary, #cccccc)}@media(width>=680px){.mc-drawer__footer{justify-content:center;flex-direction:row}}.mc-drawer-open{overflow:hidden}.mc-drawer.is-open .mc-drawer__dialog{pointer-events:all;transform:translateZ(0);transition:visibility 0s linear 0s,transform .4s;visibility:visible}.mc-overlay{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 4)}.mc-overlay.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 4)}.mc-overlay-loader.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{align-items:center;display:flex;justify-content:center}.mc-drawer{z-index:1000}\n"], dependencies: [{ kind: "component", type: MozIconButtonComponent, selector: "moz-icon-button", inputs: ["id", "appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"], outputs: ["activated"] }, { kind: "component", type: ArrowBack24, selector: "ArrowBack24", inputs: ["hostClass"] }, { kind: "component", type: Cross24, selector: "Cross24", inputs: ["hostClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: DrawerContainerComponent, isStandalone: true, selector: "moz-drawer-container", host: { listeners: { "keydown.escape": "onEscape()" } }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, isSignal: true }], ngImport: i0, template: "<section\n  (click)=\"$event.stopPropagation()\"\n  (keydown)=\"noop()\"\n  class=\"mc-drawer\"\n  [class.is-open]=\"drawerRef.isOpen()\"\n  [class.mc-drawer--extend]=\"drawerRef.extended()\"\n  [class.mc-drawer--left]=\"drawerRef.position() === 'left'\"\n  role=\"dialog\"\n  aria-labelledby=\"drawerTitle\"\n  [attr.aria-modal]=\"ariaModal()\"\n  tabindex=\"-1\"\n  [attr.aria-hidden]=\"!drawerRef.isOpen()\"\n>\n  <div class=\"mc-drawer__dialog\" [class]=\"drawerRef.panelClass()\" role=\"document\">\n    <div class=\"mc-drawer__header\">\n      @if (drawerRef.back()) {\n        <moz-icon-button\n          class=\"mc-drawer__back\"\n          aria-label=\"Back\"\n          [ghost]=\"true\"\n          (activated)=\"onBackClick()\"\n          [id]=\"'drawer-back-button'\"\n        >\n          <ArrowBack24 icon />\n        </moz-icon-button>\n      }\n\n      <h2 class=\"mc-drawer__title\" id=\"drawerTitle\">{{ drawerRef.title() }}</h2>\n\n      <moz-icon-button\n        class=\"mc-drawer__close\"\n        aria-label=\"Close\"\n        [ghost]=\"true\"\n        (activated)=\"drawerRef.close()\"\n        [id]=\"'drawer-close-button'\"\n      >\n        <Cross24 icon />\n      </moz-icon-button>\n    </div>\n\n    <div class=\"mc-drawer__body\">\n      <div class=\"mc-drawer__content\" tabindex=\"0\">\n        @if (drawerRef.contentTitle()) {\n        <h2 class=\"mc-drawer__content__title\">\n          {{ drawerRef.contentTitle() }}\n        </h2>\n        }\n\n        <ng-template cdkPortalOutlet />\n      </div>\n    </div>\n\n    @if (footerTpl) {\n    <div class=\"mc-drawer__footer\">\n      <ng-container *ngTemplateOutlet=\"footerTpl\" />\n    </div>\n    }\n  </div>\n\n  @if (drawerRef.isOpen()) {\n  <div class=\"mc-overlay is-visible\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\"></div>\n  }\n</section>\n", styles: [".mc-drawer{box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;display:flex;overflow:hidden;padding:var(--spacing-100, .5rem);justify-content:flex-end;z-index:var(--drawer-z-index, 5)}@media(width>=680px){.mc-drawer{padding:var(--spacing-200, 1rem)}}.mc-drawer--left{justify-content:flex-start}.mc-drawer--left .mc-drawer__dialog{transform:translate3d(-100%,0,0)}@media(width>=680px){.mc-drawer--extend .mc-drawer__dialog{max-width:39rem}}.mc-drawer__dialog{background:var(--drawer-color-background, #ffffff);display:flex;flex-direction:column;height:100%;max-width:100%;transform:translate3d(100%,0,0);transition:visibility 0s linear .4s,transform .4s;visibility:hidden;width:100%;z-index:var(--drawer-z-index, 5);border-radius:var(--border-radius-l, 1rem)}@media(width>=680px){.mc-drawer__dialog{max-width:25rem}}.mc-drawer__header{display:flex;align-items:center;justify-content:center;height:var(--spacing-800, 4rem)}.mc-drawer__icon{height:var(--spacing-300, 1.5rem);margin-right:var(--spacing-150, .75rem);width:var(--spacing-300, 1.5rem)}.mc-drawer__title{font:var(--font-body-accent-s, 600 .875rem/1.3 LeroyMerlin),sans-serif;color:var(--drawer-color-text-title, #666666);margin-bottom:0;margin-top:0;text-align:center;flex-grow:1;outline:none}.mc-drawer__title:first-child{padding-left:var(--spacing-800, 4rem)}.mc-drawer__back,.mc-drawer__close{margin:var(--spacing-100, .5rem)}.mc-drawer__body{flex:1 1;overflow:scroll}.mc-drawer__body:last-child{margin-bottom:var(--spacing-300, 1.5rem);padding-bottom:var(--spacing-300, 1.5rem)}.mc-drawer__content{height:100%;overflow:hidden auto;padding:var(--spacing-100, .5rem) var(--spacing-200, 1rem) 0;color:var(--drawer-color-text-paragraph, #000000)}@media(width>=680px){.mc-drawer__content{padding:var(--spacing-100, .5rem) var(--spacing-300, 1.5rem) 0}}.mc-drawer__content__title{font:var(--font-title-m, 600 1.5rem/1.3 LeroyMerlin),sans-serif;margin:0 0 var(--spacing-100, .5rem)}.mc-drawer__footer{display:flex;flex-direction:column;gap:var(--spacing-200, 1rem);padding:var(--spacing-200, 1rem) var(--spacing-300, 1.5rem);border-top:var(--border-width-s, .0625rem) solid var(--divider-color-primary, #cccccc)}@media(width>=680px){.mc-drawer__footer{justify-content:center;flex-direction:row}}.mc-drawer-open{overflow:hidden}.mc-drawer.is-open .mc-drawer__dialog{pointer-events:all;transform:translateZ(0);transition:visibility 0s linear 0s,transform .4s;visibility:visible}.mc-overlay{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 4)}.mc-overlay.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 4)}.mc-overlay-loader.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{align-items:center;display:flex;justify-content:center}.mc-drawer{z-index:1000}.mc-drawer__body{overflow:auto}\n"], dependencies: [{ kind: "component", type: MozIconButtonComponent, selector: "moz-icon-button", inputs: ["id", "appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"], outputs: ["activated"] }, { kind: "component", type: ArrowBack24, selector: "ArrowBack24", inputs: ["hostClass"] }, { kind: "component", type: Cross24, selector: "Cross24", inputs: ["hostClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: DrawerContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'moz-drawer-container', imports: [MozIconButtonComponent, ArrowBack24, Cross24, NgTemplateOutlet, CdkPortalOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n  (click)=\"$event.stopPropagation()\"\n  (keydown)=\"noop()\"\n  class=\"mc-drawer\"\n  [class.is-open]=\"drawerRef.isOpen()\"\n  [class.mc-drawer--extend]=\"drawerRef.extended()\"\n  [class.mc-drawer--left]=\"drawerRef.position() === 'left'\"\n  role=\"dialog\"\n  aria-labelledby=\"drawerTitle\"\n  [attr.aria-modal]=\"ariaModal()\"\n  tabindex=\"-1\"\n  [attr.aria-hidden]=\"!drawerRef.isOpen()\"\n>\n  <div class=\"mc-drawer__dialog\" [class]=\"drawerRef.panelClass()\" role=\"document\">\n    <div class=\"mc-drawer__header\">\n      @if (drawerRef.back()) {\n        <moz-icon-button\n          class=\"mc-drawer__back\"\n          aria-label=\"Back\"\n          [ghost]=\"true\"\n          (activated)=\"onBackClick()\"\n          [id]=\"'drawer-back-button'\"\n        >\n          <ArrowBack24 icon />\n        </moz-icon-button>\n      }\n\n      <h2 class=\"mc-drawer__title\" id=\"drawerTitle\">{{ drawerRef.title() }}</h2>\n\n      <moz-icon-button\n        class=\"mc-drawer__close\"\n        aria-label=\"Close\"\n        [ghost]=\"true\"\n        (activated)=\"drawerRef.close()\"\n        [id]=\"'drawer-close-button'\"\n      >\n        <Cross24 icon />\n      </moz-icon-button>\n    </div>\n\n    <div class=\"mc-drawer__body\">\n      <div class=\"mc-drawer__content\" tabindex=\"0\">\n        @if (drawerRef.contentTitle()) {\n        <h2 class=\"mc-drawer__content__title\">\n          {{ drawerRef.contentTitle() }}\n        </h2>\n        }\n\n        <ng-template cdkPortalOutlet />\n      </div>\n    </div>\n\n    @if (footerTpl) {\n    <div class=\"mc-drawer__footer\">\n      <ng-container *ngTemplateOutlet=\"footerTpl\" />\n    </div>\n    }\n  </div>\n\n  @if (drawerRef.isOpen()) {\n  <div class=\"mc-overlay is-visible\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\"></div>\n  }\n</section>\n", styles: [".mc-drawer{box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;display:flex;overflow:hidden;padding:var(--spacing-100, .5rem);justify-content:flex-end;z-index:var(--drawer-z-index, 5)}@media(width>=680px){.mc-drawer{padding:var(--spacing-200, 1rem)}}.mc-drawer--left{justify-content:flex-start}.mc-drawer--left .mc-drawer__dialog{transform:translate3d(-100%,0,0)}@media(width>=680px){.mc-drawer--extend .mc-drawer__dialog{max-width:39rem}}.mc-drawer__dialog{background:var(--drawer-color-background, #ffffff);display:flex;flex-direction:column;height:100%;max-width:100%;transform:translate3d(100%,0,0);transition:visibility 0s linear .4s,transform .4s;visibility:hidden;width:100%;z-index:var(--drawer-z-index, 5);border-radius:var(--border-radius-l, 1rem)}@media(width>=680px){.mc-drawer__dialog{max-width:25rem}}.mc-drawer__header{display:flex;align-items:center;justify-content:center;height:var(--spacing-800, 4rem)}.mc-drawer__icon{height:var(--spacing-300, 1.5rem);margin-right:var(--spacing-150, .75rem);width:var(--spacing-300, 1.5rem)}.mc-drawer__title{font:var(--font-body-accent-s, 600 .875rem/1.3 LeroyMerlin),sans-serif;color:var(--drawer-color-text-title, #666666);margin-bottom:0;margin-top:0;text-align:center;flex-grow:1;outline:none}.mc-drawer__title:first-child{padding-left:var(--spacing-800, 4rem)}.mc-drawer__back,.mc-drawer__close{margin:var(--spacing-100, .5rem)}.mc-drawer__body{flex:1 1;overflow:scroll}.mc-drawer__body:last-child{margin-bottom:var(--spacing-300, 1.5rem);padding-bottom:var(--spacing-300, 1.5rem)}.mc-drawer__content{height:100%;overflow:hidden auto;padding:var(--spacing-100, .5rem) var(--spacing-200, 1rem) 0;color:var(--drawer-color-text-paragraph, #000000)}@media(width>=680px){.mc-drawer__content{padding:var(--spacing-100, .5rem) var(--spacing-300, 1.5rem) 0}}.mc-drawer__content__title{font:var(--font-title-m, 600 1.5rem/1.3 LeroyMerlin),sans-serif;margin:0 0 var(--spacing-100, .5rem)}.mc-drawer__footer{display:flex;flex-direction:column;gap:var(--spacing-200, 1rem);padding:var(--spacing-200, 1rem) var(--spacing-300, 1.5rem);border-top:var(--border-width-s, .0625rem) solid var(--divider-color-primary, #cccccc)}@media(width>=680px){.mc-drawer__footer{justify-content:center;flex-direction:row}}.mc-drawer-open{overflow:hidden}.mc-drawer.is-open .mc-drawer__dialog{pointer-events:all;transform:translateZ(0);transition:visibility 0s linear 0s,transform .4s;visibility:visible}.mc-overlay{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 4)}.mc-overlay.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 4)}.mc-overlay-loader.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{align-items:center;display:flex;justify-content:center}.mc-drawer{z-index:1000}\n"] }]
+            args: [{ selector: 'moz-drawer-container', imports: [MozIconButtonComponent, ArrowBack24, Cross24, NgTemplateOutlet, CdkPortalOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n  (click)=\"$event.stopPropagation()\"\n  (keydown)=\"noop()\"\n  class=\"mc-drawer\"\n  [class.is-open]=\"drawerRef.isOpen()\"\n  [class.mc-drawer--extend]=\"drawerRef.extended()\"\n  [class.mc-drawer--left]=\"drawerRef.position() === 'left'\"\n  role=\"dialog\"\n  aria-labelledby=\"drawerTitle\"\n  [attr.aria-modal]=\"ariaModal()\"\n  tabindex=\"-1\"\n  [attr.aria-hidden]=\"!drawerRef.isOpen()\"\n>\n  <div class=\"mc-drawer__dialog\" [class]=\"drawerRef.panelClass()\" role=\"document\">\n    <div class=\"mc-drawer__header\">\n      @if (drawerRef.back()) {\n        <moz-icon-button\n          class=\"mc-drawer__back\"\n          aria-label=\"Back\"\n          [ghost]=\"true\"\n          (activated)=\"onBackClick()\"\n          [id]=\"'drawer-back-button'\"\n        >\n          <ArrowBack24 icon />\n        </moz-icon-button>\n      }\n\n      <h2 class=\"mc-drawer__title\" id=\"drawerTitle\">{{ drawerRef.title() }}</h2>\n\n      <moz-icon-button\n        class=\"mc-drawer__close\"\n        aria-label=\"Close\"\n        [ghost]=\"true\"\n        (activated)=\"drawerRef.close()\"\n        [id]=\"'drawer-close-button'\"\n      >\n        <Cross24 icon />\n      </moz-icon-button>\n    </div>\n\n    <div class=\"mc-drawer__body\">\n      <div class=\"mc-drawer__content\" tabindex=\"0\">\n        @if (drawerRef.contentTitle()) {\n        <h2 class=\"mc-drawer__content__title\">\n          {{ drawerRef.contentTitle() }}\n        </h2>\n        }\n\n        <ng-template cdkPortalOutlet />\n      </div>\n    </div>\n\n    @if (footerTpl) {\n    <div class=\"mc-drawer__footer\">\n      <ng-container *ngTemplateOutlet=\"footerTpl\" />\n    </div>\n    }\n  </div>\n\n  @if (drawerRef.isOpen()) {\n  <div class=\"mc-overlay is-visible\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\"></div>\n  }\n</section>\n", styles: [".mc-drawer{box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;display:flex;overflow:hidden;padding:var(--spacing-100, .5rem);justify-content:flex-end;z-index:var(--drawer-z-index, 5)}@media(width>=680px){.mc-drawer{padding:var(--spacing-200, 1rem)}}.mc-drawer--left{justify-content:flex-start}.mc-drawer--left .mc-drawer__dialog{transform:translate3d(-100%,0,0)}@media(width>=680px){.mc-drawer--extend .mc-drawer__dialog{max-width:39rem}}.mc-drawer__dialog{background:var(--drawer-color-background, #ffffff);display:flex;flex-direction:column;height:100%;max-width:100%;transform:translate3d(100%,0,0);transition:visibility 0s linear .4s,transform .4s;visibility:hidden;width:100%;z-index:var(--drawer-z-index, 5);border-radius:var(--border-radius-l, 1rem)}@media(width>=680px){.mc-drawer__dialog{max-width:25rem}}.mc-drawer__header{display:flex;align-items:center;justify-content:center;height:var(--spacing-800, 4rem)}.mc-drawer__icon{height:var(--spacing-300, 1.5rem);margin-right:var(--spacing-150, .75rem);width:var(--spacing-300, 1.5rem)}.mc-drawer__title{font:var(--font-body-accent-s, 600 .875rem/1.3 LeroyMerlin),sans-serif;color:var(--drawer-color-text-title, #666666);margin-bottom:0;margin-top:0;text-align:center;flex-grow:1;outline:none}.mc-drawer__title:first-child{padding-left:var(--spacing-800, 4rem)}.mc-drawer__back,.mc-drawer__close{margin:var(--spacing-100, .5rem)}.mc-drawer__body{flex:1 1;overflow:scroll}.mc-drawer__body:last-child{margin-bottom:var(--spacing-300, 1.5rem);padding-bottom:var(--spacing-300, 1.5rem)}.mc-drawer__content{height:100%;overflow:hidden auto;padding:var(--spacing-100, .5rem) var(--spacing-200, 1rem) 0;color:var(--drawer-color-text-paragraph, #000000)}@media(width>=680px){.mc-drawer__content{padding:var(--spacing-100, .5rem) var(--spacing-300, 1.5rem) 0}}.mc-drawer__content__title{font:var(--font-title-m, 600 1.5rem/1.3 LeroyMerlin),sans-serif;margin:0 0 var(--spacing-100, .5rem)}.mc-drawer__footer{display:flex;flex-direction:column;gap:var(--spacing-200, 1rem);padding:var(--spacing-200, 1rem) var(--spacing-300, 1.5rem);border-top:var(--border-width-s, .0625rem) solid var(--divider-color-primary, #cccccc)}@media(width>=680px){.mc-drawer__footer{justify-content:center;flex-direction:row}}.mc-drawer-open{overflow:hidden}.mc-drawer.is-open .mc-drawer__dialog{pointer-events:all;transform:translateZ(0);transition:visibility 0s linear 0s,transform .4s;visibility:visible}.mc-overlay{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 4)}.mc-overlay.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 4)}.mc-overlay-loader.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{align-items:center;display:flex;justify-content:center}.mc-drawer{z-index:1000}.mc-drawer__body{overflow:auto}\n"] }]
         }], propDecorators: { portalOutlet: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkPortalOutlet), { isSignal: true }] }], onEscape: [{
                 type: HostListener,
                 args: ['keydown.escape']
@@ -4979,11 +4979,11 @@ class MozDrawerComponent {
         this.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: MozDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: MozDrawerComponent, isStandalone: true, selector: "moz-drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, extended: { classPropertyName: "extended", publicName: "extended", isSignal: true, isRequired: false, transformFunction: null }, back: { classPropertyName: "back", publicName: "back", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, contentTitle: { classPropertyName: "contentTitle", publicName: "contentTitle", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { updateOpen: "updateOpen", backEvent: "backEvent" }, host: { listeners: { "keydown.escape": "onEscape()" } }, queries: [{ propertyName: "footerTpl", first: true, predicate: ["footer"], isSignal: true }], ngImport: i0, template: "<section\n  (click)=\"$event.stopPropagation()\"\n  (keydown)=\"noop()\"\n  [class]=\"classes()\"\n  role=\"dialog\"\n  aria-labelledby=\"drawerTitle\"\n  [attr.aria-modal]=\"ariaModal()\"\n  tabindex=\"-1\"\n  [attr.aria-hidden]=\"!isOpen()\"\n>\n  <div [class]=\"dialogClasses()\" role=\"document\">\n    <div class=\"mc-drawer__header\">\n      @if (back()) {\n      <moz-icon-button\n        class=\"mc-drawer__back\"\n        aria-label=\"Back\"\n        [ghost]=\"true\"\n        (activated)=\"backClick()\"\n        [id]=\"'drawer-back-button'\"\n      >\n        <ArrowBack24 icon />\n      </moz-icon-button>\n      }\n\n      <h2 class=\"mc-drawer__title\" id=\"drawerTitle\">{{ title() }}</h2>\n\n      <moz-icon-button\n        class=\"mc-drawer__close\"\n        aria-label=\"Close\"\n        [ghost]=\"true\"\n        (activated)=\"close()\"\n        [id]=\"'drawer-close-button'\"\n      >\n        <Cross24 icon />\n      </moz-icon-button>\n    </div>\n\n    <div class=\"mc-drawer__body\">\n      <div class=\"mc-drawer__content\" tabindex=\"0\">\n        @if (contentTitle()) {\n        <h2 class=\"mc-drawer__content__title\">\n          {{ contentTitle() }}\n        </h2>\n        }\n\n        <ng-content />\n      </div>\n    </div>\n\n    @if (footerTpl()) {\n    <div class=\"mc-drawer__footer\">\n      <ng-container *ngTemplateOutlet=\"footerTpl()\" />\n    </div>\n    }\n  </div>\n  @if(isOpen()){\n  <div\n    class=\"mc-overlay is-visible\"\n    tabindex=\"-1\"\n    role=\"dialog\"\n    aria-labelledby=\"modalTitle\"\n    (click)=\"onBackdropClick($event)\"\n  ></div>\n  }\n</section>\n", styles: [".mc-drawer{box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;display:flex;overflow:hidden;padding:var(--spacing-100, .5rem);justify-content:flex-end;z-index:var(--drawer-z-index, 5)}@media(width>=680px){.mc-drawer{padding:var(--spacing-200, 1rem)}}.mc-drawer--left{justify-content:flex-start}.mc-drawer--left .mc-drawer__dialog{transform:translate3d(-100%,0,0)}@media(width>=680px){.mc-drawer--extend .mc-drawer__dialog{max-width:39rem}}.mc-drawer__dialog{background:var(--drawer-color-background, #ffffff);display:flex;flex-direction:column;height:100%;max-width:100%;transform:translate3d(100%,0,0);transition:visibility 0s linear .4s,transform .4s;visibility:hidden;width:100%;z-index:var(--drawer-z-index, 5);border-radius:var(--border-radius-l, 1rem)}@media(width>=680px){.mc-drawer__dialog{max-width:25rem}}.mc-drawer__header{display:flex;align-items:center;justify-content:center;height:var(--spacing-800, 4rem)}.mc-drawer__icon{height:var(--spacing-300, 1.5rem);margin-right:var(--spacing-150, .75rem);width:var(--spacing-300, 1.5rem)}.mc-drawer__title{font:var(--font-body-accent-s, 600 .875rem/1.3 LeroyMerlin),sans-serif;color:var(--drawer-color-text-title, #666666);margin-bottom:0;margin-top:0;text-align:center;flex-grow:1;outline:none}.mc-drawer__title:first-child{padding-left:var(--spacing-800, 4rem)}.mc-drawer__back,.mc-drawer__close{margin:var(--spacing-100, .5rem)}.mc-drawer__body{flex:1 1;overflow:scroll}.mc-drawer__body:last-child{margin-bottom:var(--spacing-300, 1.5rem);padding-bottom:var(--spacing-300, 1.5rem)}.mc-drawer__content{height:100%;overflow:hidden auto;padding:var(--spacing-100, .5rem) var(--spacing-200, 1rem) 0;color:var(--drawer-color-text-paragraph, #000000)}@media(width>=680px){.mc-drawer__content{padding:var(--spacing-100, .5rem) var(--spacing-300, 1.5rem) 0}}.mc-drawer__content__title{font:var(--font-title-m, 600 1.5rem/1.3 LeroyMerlin),sans-serif;margin:0 0 var(--spacing-100, .5rem)}.mc-drawer__footer{display:flex;flex-direction:column;gap:var(--spacing-200, 1rem);padding:var(--spacing-200, 1rem) var(--spacing-300, 1.5rem);border-top:var(--border-width-s, .0625rem) solid var(--divider-color-primary, #cccccc)}@media(width>=680px){.mc-drawer__footer{justify-content:center;flex-direction:row}}.mc-drawer-open{overflow:hidden}.mc-drawer.is-open .mc-drawer__dialog{pointer-events:all;transform:translateZ(0);transition:visibility 0s linear 0s,transform .4s;visibility:visible}.mc-overlay{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 4)}.mc-overlay.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 4)}.mc-overlay-loader.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{align-items:center;display:flex;justify-content:center}.mc-drawer{z-index:1000}\n"], dependencies: [{ kind: "component", type: MozIconButtonComponent, selector: "moz-icon-button", inputs: ["id", "appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"], outputs: ["activated"] }, { kind: "component", type: ArrowBack24, selector: "ArrowBack24", inputs: ["hostClass"] }, { kind: "component", type: Cross24, selector: "Cross24", inputs: ["hostClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: MozDrawerComponent, isStandalone: true, selector: "moz-drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, extended: { classPropertyName: "extended", publicName: "extended", isSignal: true, isRequired: false, transformFunction: null }, back: { classPropertyName: "back", publicName: "back", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, contentTitle: { classPropertyName: "contentTitle", publicName: "contentTitle", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { updateOpen: "updateOpen", backEvent: "backEvent" }, host: { listeners: { "keydown.escape": "onEscape()" } }, queries: [{ propertyName: "footerTpl", first: true, predicate: ["footer"], isSignal: true }], ngImport: i0, template: "<section\n  (click)=\"$event.stopPropagation()\"\n  (keydown)=\"noop()\"\n  [class]=\"classes()\"\n  role=\"dialog\"\n  aria-labelledby=\"drawerTitle\"\n  [attr.aria-modal]=\"ariaModal()\"\n  tabindex=\"-1\"\n  [attr.aria-hidden]=\"!isOpen()\"\n>\n  <div [class]=\"dialogClasses()\" role=\"document\">\n    <div class=\"mc-drawer__header\">\n      @if (back()) {\n      <moz-icon-button\n        class=\"mc-drawer__back\"\n        aria-label=\"Back\"\n        [ghost]=\"true\"\n        (activated)=\"backClick()\"\n        [id]=\"'drawer-back-button'\"\n      >\n        <ArrowBack24 icon />\n      </moz-icon-button>\n      }\n\n      <h2 class=\"mc-drawer__title\" id=\"drawerTitle\">{{ title() }}</h2>\n\n      <moz-icon-button\n        class=\"mc-drawer__close\"\n        aria-label=\"Close\"\n        [ghost]=\"true\"\n        (activated)=\"close()\"\n        [id]=\"'drawer-close-button'\"\n      >\n        <Cross24 icon />\n      </moz-icon-button>\n    </div>\n\n    <div class=\"mc-drawer__body\">\n      <div class=\"mc-drawer__content\" tabindex=\"0\">\n        @if (contentTitle()) {\n        <h2 class=\"mc-drawer__content__title\">\n          {{ contentTitle() }}\n        </h2>\n        }\n\n        <ng-content />\n      </div>\n    </div>\n\n    @if (footerTpl()) {\n    <div class=\"mc-drawer__footer\">\n      <ng-container *ngTemplateOutlet=\"footerTpl()\" />\n    </div>\n    }\n  </div>\n  @if(isOpen()){\n  <div\n    class=\"mc-overlay is-visible\"\n    tabindex=\"-1\"\n    role=\"dialog\"\n    aria-labelledby=\"modalTitle\"\n    (click)=\"onBackdropClick($event)\"\n  ></div>\n  }\n</section>\n", styles: [".mc-drawer{box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;display:flex;overflow:hidden;padding:var(--spacing-100, .5rem);justify-content:flex-end;z-index:var(--drawer-z-index, 5)}@media(width>=680px){.mc-drawer{padding:var(--spacing-200, 1rem)}}.mc-drawer--left{justify-content:flex-start}.mc-drawer--left .mc-drawer__dialog{transform:translate3d(-100%,0,0)}@media(width>=680px){.mc-drawer--extend .mc-drawer__dialog{max-width:39rem}}.mc-drawer__dialog{background:var(--drawer-color-background, #ffffff);display:flex;flex-direction:column;height:100%;max-width:100%;transform:translate3d(100%,0,0);transition:visibility 0s linear .4s,transform .4s;visibility:hidden;width:100%;z-index:var(--drawer-z-index, 5);border-radius:var(--border-radius-l, 1rem)}@media(width>=680px){.mc-drawer__dialog{max-width:25rem}}.mc-drawer__header{display:flex;align-items:center;justify-content:center;height:var(--spacing-800, 4rem)}.mc-drawer__icon{height:var(--spacing-300, 1.5rem);margin-right:var(--spacing-150, .75rem);width:var(--spacing-300, 1.5rem)}.mc-drawer__title{font:var(--font-body-accent-s, 600 .875rem/1.3 LeroyMerlin),sans-serif;color:var(--drawer-color-text-title, #666666);margin-bottom:0;margin-top:0;text-align:center;flex-grow:1;outline:none}.mc-drawer__title:first-child{padding-left:var(--spacing-800, 4rem)}.mc-drawer__back,.mc-drawer__close{margin:var(--spacing-100, .5rem)}.mc-drawer__body{flex:1 1;overflow:scroll}.mc-drawer__body:last-child{margin-bottom:var(--spacing-300, 1.5rem);padding-bottom:var(--spacing-300, 1.5rem)}.mc-drawer__content{height:100%;overflow:hidden auto;padding:var(--spacing-100, .5rem) var(--spacing-200, 1rem) 0;color:var(--drawer-color-text-paragraph, #000000)}@media(width>=680px){.mc-drawer__content{padding:var(--spacing-100, .5rem) var(--spacing-300, 1.5rem) 0}}.mc-drawer__content__title{font:var(--font-title-m, 600 1.5rem/1.3 LeroyMerlin),sans-serif;margin:0 0 var(--spacing-100, .5rem)}.mc-drawer__footer{display:flex;flex-direction:column;gap:var(--spacing-200, 1rem);padding:var(--spacing-200, 1rem) var(--spacing-300, 1.5rem);border-top:var(--border-width-s, .0625rem) solid var(--divider-color-primary, #cccccc)}@media(width>=680px){.mc-drawer__footer{justify-content:center;flex-direction:row}}.mc-drawer-open{overflow:hidden}.mc-drawer.is-open .mc-drawer__dialog{pointer-events:all;transform:translateZ(0);transition:visibility 0s linear 0s,transform .4s;visibility:visible}.mc-overlay{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 4)}.mc-overlay.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 4)}.mc-overlay-loader.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{align-items:center;display:flex;justify-content:center}.mc-drawer{z-index:1000}.mc-drawer__body{overflow:auto}\n"], dependencies: [{ kind: "component", type: MozIconButtonComponent, selector: "moz-icon-button", inputs: ["id", "appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"], outputs: ["activated"] }, { kind: "component", type: ArrowBack24, selector: "ArrowBack24", inputs: ["hostClass"] }, { kind: "component", type: Cross24, selector: "Cross24", inputs: ["hostClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: MozDrawerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'moz-drawer', imports: [MozIconButtonComponent, ArrowBack24, Cross24, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n  (click)=\"$event.stopPropagation()\"\n  (keydown)=\"noop()\"\n  [class]=\"classes()\"\n  role=\"dialog\"\n  aria-labelledby=\"drawerTitle\"\n  [attr.aria-modal]=\"ariaModal()\"\n  tabindex=\"-1\"\n  [attr.aria-hidden]=\"!isOpen()\"\n>\n  <div [class]=\"dialogClasses()\" role=\"document\">\n    <div class=\"mc-drawer__header\">\n      @if (back()) {\n      <moz-icon-button\n        class=\"mc-drawer__back\"\n        aria-label=\"Back\"\n        [ghost]=\"true\"\n        (activated)=\"backClick()\"\n        [id]=\"'drawer-back-button'\"\n      >\n        <ArrowBack24 icon />\n      </moz-icon-button>\n      }\n\n      <h2 class=\"mc-drawer__title\" id=\"drawerTitle\">{{ title() }}</h2>\n\n      <moz-icon-button\n        class=\"mc-drawer__close\"\n        aria-label=\"Close\"\n        [ghost]=\"true\"\n        (activated)=\"close()\"\n        [id]=\"'drawer-close-button'\"\n      >\n        <Cross24 icon />\n      </moz-icon-button>\n    </div>\n\n    <div class=\"mc-drawer__body\">\n      <div class=\"mc-drawer__content\" tabindex=\"0\">\n        @if (contentTitle()) {\n        <h2 class=\"mc-drawer__content__title\">\n          {{ contentTitle() }}\n        </h2>\n        }\n\n        <ng-content />\n      </div>\n    </div>\n\n    @if (footerTpl()) {\n    <div class=\"mc-drawer__footer\">\n      <ng-container *ngTemplateOutlet=\"footerTpl()\" />\n    </div>\n    }\n  </div>\n  @if(isOpen()){\n  <div\n    class=\"mc-overlay is-visible\"\n    tabindex=\"-1\"\n    role=\"dialog\"\n    aria-labelledby=\"modalTitle\"\n    (click)=\"onBackdropClick($event)\"\n  ></div>\n  }\n</section>\n", styles: [".mc-drawer{box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;display:flex;overflow:hidden;padding:var(--spacing-100, .5rem);justify-content:flex-end;z-index:var(--drawer-z-index, 5)}@media(width>=680px){.mc-drawer{padding:var(--spacing-200, 1rem)}}.mc-drawer--left{justify-content:flex-start}.mc-drawer--left .mc-drawer__dialog{transform:translate3d(-100%,0,0)}@media(width>=680px){.mc-drawer--extend .mc-drawer__dialog{max-width:39rem}}.mc-drawer__dialog{background:var(--drawer-color-background, #ffffff);display:flex;flex-direction:column;height:100%;max-width:100%;transform:translate3d(100%,0,0);transition:visibility 0s linear .4s,transform .4s;visibility:hidden;width:100%;z-index:var(--drawer-z-index, 5);border-radius:var(--border-radius-l, 1rem)}@media(width>=680px){.mc-drawer__dialog{max-width:25rem}}.mc-drawer__header{display:flex;align-items:center;justify-content:center;height:var(--spacing-800, 4rem)}.mc-drawer__icon{height:var(--spacing-300, 1.5rem);margin-right:var(--spacing-150, .75rem);width:var(--spacing-300, 1.5rem)}.mc-drawer__title{font:var(--font-body-accent-s, 600 .875rem/1.3 LeroyMerlin),sans-serif;color:var(--drawer-color-text-title, #666666);margin-bottom:0;margin-top:0;text-align:center;flex-grow:1;outline:none}.mc-drawer__title:first-child{padding-left:var(--spacing-800, 4rem)}.mc-drawer__back,.mc-drawer__close{margin:var(--spacing-100, .5rem)}.mc-drawer__body{flex:1 1;overflow:scroll}.mc-drawer__body:last-child{margin-bottom:var(--spacing-300, 1.5rem);padding-bottom:var(--spacing-300, 1.5rem)}.mc-drawer__content{height:100%;overflow:hidden auto;padding:var(--spacing-100, .5rem) var(--spacing-200, 1rem) 0;color:var(--drawer-color-text-paragraph, #000000)}@media(width>=680px){.mc-drawer__content{padding:var(--spacing-100, .5rem) var(--spacing-300, 1.5rem) 0}}.mc-drawer__content__title{font:var(--font-title-m, 600 1.5rem/1.3 LeroyMerlin),sans-serif;margin:0 0 var(--spacing-100, .5rem)}.mc-drawer__footer{display:flex;flex-direction:column;gap:var(--spacing-200, 1rem);padding:var(--spacing-200, 1rem) var(--spacing-300, 1.5rem);border-top:var(--border-width-s, .0625rem) solid var(--divider-color-primary, #cccccc)}@media(width>=680px){.mc-drawer__footer{justify-content:center;flex-direction:row}}.mc-drawer-open{overflow:hidden}.mc-drawer.is-open .mc-drawer__dialog{pointer-events:all;transform:translateZ(0);transition:visibility 0s linear 0s,transform .4s;visibility:visible}.mc-overlay{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 4)}.mc-overlay.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 4)}.mc-overlay-loader.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{align-items:center;display:flex;justify-content:center}.mc-drawer{z-index:1000}\n"] }]
+            args: [{ selector: 'moz-drawer', imports: [MozIconButtonComponent, ArrowBack24, Cross24, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n  (click)=\"$event.stopPropagation()\"\n  (keydown)=\"noop()\"\n  [class]=\"classes()\"\n  role=\"dialog\"\n  aria-labelledby=\"drawerTitle\"\n  [attr.aria-modal]=\"ariaModal()\"\n  tabindex=\"-1\"\n  [attr.aria-hidden]=\"!isOpen()\"\n>\n  <div [class]=\"dialogClasses()\" role=\"document\">\n    <div class=\"mc-drawer__header\">\n      @if (back()) {\n      <moz-icon-button\n        class=\"mc-drawer__back\"\n        aria-label=\"Back\"\n        [ghost]=\"true\"\n        (activated)=\"backClick()\"\n        [id]=\"'drawer-back-button'\"\n      >\n        <ArrowBack24 icon />\n      </moz-icon-button>\n      }\n\n      <h2 class=\"mc-drawer__title\" id=\"drawerTitle\">{{ title() }}</h2>\n\n      <moz-icon-button\n        class=\"mc-drawer__close\"\n        aria-label=\"Close\"\n        [ghost]=\"true\"\n        (activated)=\"close()\"\n        [id]=\"'drawer-close-button'\"\n      >\n        <Cross24 icon />\n      </moz-icon-button>\n    </div>\n\n    <div class=\"mc-drawer__body\">\n      <div class=\"mc-drawer__content\" tabindex=\"0\">\n        @if (contentTitle()) {\n        <h2 class=\"mc-drawer__content__title\">\n          {{ contentTitle() }}\n        </h2>\n        }\n\n        <ng-content />\n      </div>\n    </div>\n\n    @if (footerTpl()) {\n    <div class=\"mc-drawer__footer\">\n      <ng-container *ngTemplateOutlet=\"footerTpl()\" />\n    </div>\n    }\n  </div>\n  @if(isOpen()){\n  <div\n    class=\"mc-overlay is-visible\"\n    tabindex=\"-1\"\n    role=\"dialog\"\n    aria-labelledby=\"modalTitle\"\n    (click)=\"onBackdropClick($event)\"\n  ></div>\n  }\n</section>\n", styles: [".mc-drawer{box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;display:flex;overflow:hidden;padding:var(--spacing-100, .5rem);justify-content:flex-end;z-index:var(--drawer-z-index, 5)}@media(width>=680px){.mc-drawer{padding:var(--spacing-200, 1rem)}}.mc-drawer--left{justify-content:flex-start}.mc-drawer--left .mc-drawer__dialog{transform:translate3d(-100%,0,0)}@media(width>=680px){.mc-drawer--extend .mc-drawer__dialog{max-width:39rem}}.mc-drawer__dialog{background:var(--drawer-color-background, #ffffff);display:flex;flex-direction:column;height:100%;max-width:100%;transform:translate3d(100%,0,0);transition:visibility 0s linear .4s,transform .4s;visibility:hidden;width:100%;z-index:var(--drawer-z-index, 5);border-radius:var(--border-radius-l, 1rem)}@media(width>=680px){.mc-drawer__dialog{max-width:25rem}}.mc-drawer__header{display:flex;align-items:center;justify-content:center;height:var(--spacing-800, 4rem)}.mc-drawer__icon{height:var(--spacing-300, 1.5rem);margin-right:var(--spacing-150, .75rem);width:var(--spacing-300, 1.5rem)}.mc-drawer__title{font:var(--font-body-accent-s, 600 .875rem/1.3 LeroyMerlin),sans-serif;color:var(--drawer-color-text-title, #666666);margin-bottom:0;margin-top:0;text-align:center;flex-grow:1;outline:none}.mc-drawer__title:first-child{padding-left:var(--spacing-800, 4rem)}.mc-drawer__back,.mc-drawer__close{margin:var(--spacing-100, .5rem)}.mc-drawer__body{flex:1 1;overflow:scroll}.mc-drawer__body:last-child{margin-bottom:var(--spacing-300, 1.5rem);padding-bottom:var(--spacing-300, 1.5rem)}.mc-drawer__content{height:100%;overflow:hidden auto;padding:var(--spacing-100, .5rem) var(--spacing-200, 1rem) 0;color:var(--drawer-color-text-paragraph, #000000)}@media(width>=680px){.mc-drawer__content{padding:var(--spacing-100, .5rem) var(--spacing-300, 1.5rem) 0}}.mc-drawer__content__title{font:var(--font-title-m, 600 1.5rem/1.3 LeroyMerlin),sans-serif;margin:0 0 var(--spacing-100, .5rem)}.mc-drawer__footer{display:flex;flex-direction:column;gap:var(--spacing-200, 1rem);padding:var(--spacing-200, 1rem) var(--spacing-300, 1.5rem);border-top:var(--border-width-s, .0625rem) solid var(--divider-color-primary, #cccccc)}@media(width>=680px){.mc-drawer__footer{justify-content:center;flex-direction:row}}.mc-drawer-open{overflow:hidden}.mc-drawer.is-open .mc-drawer__dialog{pointer-events:all;transform:translateZ(0);transition:visibility 0s linear 0s,transform .4s;visibility:visible}.mc-overlay{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 4)}.mc-overlay.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 4)}.mc-overlay-loader.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{align-items:center;display:flex;justify-content:center}.mc-drawer{z-index:1000}.mc-drawer__body{overflow:auto}\n"] }]
         }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], extended: [{ type: i0.Input, args: [{ isSignal: true, alias: "extended", required: false }] }], back: [{ type: i0.Input, args: [{ isSignal: true, alias: "back", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], contentTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentTitle", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], updateOpen: [{ type: i0.Output, args: ["updateOpen"] }], backEvent: [{ type: i0.Output, args: ["backEvent"] }], footerTpl: [{ type: i0.ContentChild, args: ['footer', { ...{ descendants: false }, isSignal: true }] }], onEscape: [{
                 type: HostListener,
                 args: ['keydown.escape']
@@ -5730,6 +5730,8 @@ class MozComboboxComponent {
     ...(ngDevMode ? [{ debugName: "triggerEl" }] : /* istanbul ignore next */ []));
     viewportEl = viewChild('viewport', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "viewportEl" }] : /* istanbul ignore next */ []));
+    connectedOverlay = viewChild(CdkConnectedOverlay, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "connectedOverlay" }] : /* istanbul ignore next */ []));
     // -----------------------------------------------------------------------
     // Internal state
     // -----------------------------------------------------------------------
@@ -5947,6 +5949,46 @@ class MozComboboxComponent {
                 }
             }
         });
+        // Reposition the panel whenever its own height changes while it is open.
+        // The position is resolved once, when the overlay attaches: with an async
+        // list the panel is then just the loader (or an empty list), so it always
+        // fits below the trigger and the first position wins. When the items land
+        // the panel grows downwards and overflows the viewport without ever
+        // flipping above the trigger — the `noop` scroll strategy never
+        // repositions it either. Re-running the position strategy after the DOM
+        // has grown lets the fallback (above the trigger) win. `afterRenderEffect`
+        // (rather than `effect`) guarantees the viewport's new
+        // `[style.height.px]` is already applied when we re-measure.
+        afterRenderEffect(() => {
+            // Track everything that changes the panel height.
+            const open = this.isOpen();
+            const heightDeps = [this.loading(), this.viewportHeight(), this.filteredItems().length];
+            void heightDeps;
+            if (!open) {
+                return;
+            }
+            this.connectedOverlay()?.overlayRef?.updatePosition();
+        });
+        // Follow the trigger's own box while the panel is open. Its height can
+        // change under an open panel — a long display value wrapping to a second
+        // line, the counter / clear button / trigger loader appearing — which moves
+        // the anchor point the panel is positioned against; its width feeds
+        // `cdkConnectedOverlayWidth`. A ResizeObserver covers every cause,
+        // including container resizes and font swaps that no signal reflects.
+        // It only fires while open, and `updatePosition()` resizes the overlay
+        // pane, never the trigger, so it cannot feed itself.
+        effect((onCleanup) => {
+            const trigger = this.triggerEl()?.nativeElement;
+            if (!this.isOpen() || !trigger || typeof ResizeObserver === 'undefined') {
+                return;
+            }
+            const observer = new ResizeObserver(() => {
+                this._updateTriggerWidth();
+                this.connectedOverlay()?.overlayRef?.updatePosition();
+            });
+            observer.observe(trigger);
+            onCleanup(() => observer.disconnect());
+        });
         // 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.
@@ -6355,7 +6397,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 + '-clear-selection'\"\n          moz-button\n          type=\"button\"\n          [size]=\"'s'\"\n          [ghost]=\"true\"\n          (click)=\"clearSelection()\"\n        >\n          {{ clearText() }}\n        </button>\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      </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          [minBufferPx]=\"minBufferPx\"\n          [maxBufferPx]=\"maxBufferPx\"\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(--border-radius-s, .25rem);transition:all ease .2s;color:var(--forms-color-text-default, #000000);display:block;width:100%;display:flex;align-items:center;gap:var(--spacing-100, .5rem);box-sizing:border-box}.mc-combobox__input:focus-within{box-shadow:0 0 0 var(--focus-dimension-outline-mid, .125rem) var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 var(--focus-dimension-outline-outer, .25rem) var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:var(--focus-dimension-gap, .125rem) solid transparent;outline-offset:var(--focus-dimension-gap, .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:var(--spacing-150, .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:var(--spacing-150, .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:var(--spacing-300, 1.5rem);display:flex;flex-shrink:0;align-items:center;justify-content:center;padding:0 var(--spacing-100, .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{width:100%;position:absolute;left:0;top:calc(100% + var(--spacing-050, .25rem));visibility:hidden;opacity:0;z-index:var(--combobox-listbox-z-index, 10)}.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:var(--spacing-100, .5rem)}.mc-combobox--s .mc-combobox__icon{padding-right:var(--spacing-100, .5rem)}.mc-combobox--s .mc-combobox__clear{width:var(--spacing-250, 1.25rem);height:var(--spacing-250, 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{width:100%;z-index:10;background-color:var(--color-background-primary, #ffffff);pointer-events:all;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)}@media(width>=680px){.mc-option-listbox{min-width:18.75rem}}.mc-option-listbox__list{overflow:auto;display:flex;flex-direction:column;gap:var(--spacing-025, .125rem);margin:0;padding:var(--spacing-100, .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-selection-color-background-checked, #464e63);color:var(--forms-selection-color-icon, #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:var(--spacing-025, .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:var(--spacing-100, .5rem);height:3rem;padding:var(--spacing-100, .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:var(--spacing-250, 1.25rem);width:var(--spacing-250, 1.25rem);border:var(--spacing-025, .125rem) solid var(--forms-color-border-default, #666666);border-radius:var(--spacing-050, .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:var(--spacing-100, .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:var(--spacing-100, .5rem) var(--spacing-200, 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 }, { propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, 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 + '-clear-selection'\"\n          moz-button\n          type=\"button\"\n          [size]=\"'s'\"\n          [ghost]=\"true\"\n          (click)=\"clearSelection()\"\n        >\n          {{ clearText() }}\n        </button>\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      </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          [minBufferPx]=\"minBufferPx\"\n          [maxBufferPx]=\"maxBufferPx\"\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(--border-radius-s, .25rem);transition:all ease .2s;color:var(--forms-color-text-default, #000000);display:block;width:100%;display:flex;align-items:center;gap:var(--spacing-100, .5rem);box-sizing:border-box}.mc-combobox__input:focus-within{box-shadow:0 0 0 var(--focus-dimension-outline-mid, .125rem) var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 var(--focus-dimension-outline-outer, .25rem) var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:var(--focus-dimension-gap, .125rem) solid transparent;outline-offset:var(--focus-dimension-gap, .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:var(--spacing-150, .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:var(--spacing-150, .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:var(--spacing-300, 1.5rem);display:flex;flex-shrink:0;align-items:center;justify-content:center;padding:0 var(--spacing-100, .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{width:100%;position:absolute;left:0;top:calc(100% + var(--spacing-050, .25rem));visibility:hidden;opacity:0;z-index:var(--combobox-listbox-z-index, 10)}.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:var(--spacing-100, .5rem)}.mc-combobox--s .mc-combobox__icon{padding-right:var(--spacing-100, .5rem)}.mc-combobox--s .mc-combobox__clear{width:var(--spacing-250, 1.25rem);height:var(--spacing-250, 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{width:100%;z-index:10;background-color:var(--color-background-primary, #ffffff);pointer-events:all;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)}@media(width>=680px){.mc-option-listbox{min-width:18.75rem}}.mc-option-listbox__list{overflow:auto;display:flex;flex-direction:column;gap:var(--spacing-025, .125rem);margin:0;padding:var(--spacing-100, .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-selection-color-background-checked, #464e63);color:var(--forms-selection-color-icon, #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:var(--spacing-025, .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:var(--spacing-100, .5rem);height:3rem;padding:var(--spacing-100, .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:var(--spacing-250, 1.25rem);width:var(--spacing-250, 1.25rem);border:var(--spacing-025, .125rem) solid var(--forms-color-border-default, #666666);border-radius:var(--spacing-050, .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:var(--spacing-100, .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:var(--spacing-100, .5rem) var(--spacing-200, 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: "22.1.3", ngImport: i0, type: MozComboboxComponent, decorators: [{
             type: Component,
@@ -6379,7 +6421,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
                             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 + '-clear-selection'\"\n          moz-button\n          type=\"button\"\n          [size]=\"'s'\"\n          [ghost]=\"true\"\n          (click)=\"clearSelection()\"\n        >\n          {{ clearText() }}\n        </button>\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      </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          [minBufferPx]=\"minBufferPx\"\n          [maxBufferPx]=\"maxBufferPx\"\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(--border-radius-s, .25rem);transition:all ease .2s;color:var(--forms-color-text-default, #000000);display:block;width:100%;display:flex;align-items:center;gap:var(--spacing-100, .5rem);box-sizing:border-box}.mc-combobox__input:focus-within{box-shadow:0 0 0 var(--focus-dimension-outline-mid, .125rem) var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 var(--focus-dimension-outline-outer, .25rem) var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:var(--focus-dimension-gap, .125rem) solid transparent;outline-offset:var(--focus-dimension-gap, .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:var(--spacing-150, .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:var(--spacing-150, .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:var(--spacing-300, 1.5rem);display:flex;flex-shrink:0;align-items:center;justify-content:center;padding:0 var(--spacing-100, .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{width:100%;position:absolute;left:0;top:calc(100% + var(--spacing-050, .25rem));visibility:hidden;opacity:0;z-index:var(--combobox-listbox-z-index, 10)}.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:var(--spacing-100, .5rem)}.mc-combobox--s .mc-combobox__icon{padding-right:var(--spacing-100, .5rem)}.mc-combobox--s .mc-combobox__clear{width:var(--spacing-250, 1.25rem);height:var(--spacing-250, 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{width:100%;z-index:10;background-color:var(--color-background-primary, #ffffff);pointer-events:all;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)}@media(width>=680px){.mc-option-listbox{min-width:18.75rem}}.mc-option-listbox__list{overflow:auto;display:flex;flex-direction:column;gap:var(--spacing-025, .125rem);margin:0;padding:var(--spacing-100, .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-selection-color-background-checked, #464e63);color:var(--forms-selection-color-icon, #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:var(--spacing-025, .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:var(--spacing-100, .5rem);height:3rem;padding:var(--spacing-100, .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:var(--spacing-250, 1.25rem);width:var(--spacing-250, 1.25rem);border:var(--spacing-025, .125rem) solid var(--forms-color-border-default, #666666);border-radius:var(--spacing-050, .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:var(--spacing-100, .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:var(--spacing-100, .5rem) var(--spacing-200, 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 }] }] } });
+        }], 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 }] }], connectedOverlay: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkConnectedOverlay), { isSignal: true }] }] } });
 
 /**
  * Harness for a single option inside the combobox dropdown.