npm - @mozaic-ds/angular - Versions diffs - 0.24.0-beta.14 → 0.24.0-beta.15 - Mend

@mozaic-ds/angular 0.24.0-beta.14 → 0.24.0-beta.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (138) hide show

package/adeo/fesm2020/mozaic-ds-angular.mjs CHANGED Viewed

@@ -985,8 +985,8 @@ class ListboxComponent {
     }
     closeListbox() {
         this.isOpen = false;
-        this.isOpenChange.emit(this.isOpen);
         if (this.originalParent && this.listboxElementRef) {
+            this.isOpenChange.emit(this.isOpen);
             this.originalParent.appendChild(this.listboxElementRef.nativeElement);
             this.originalParent = null;
         }
@@ -1243,6 +1243,7 @@ class AutocompleteComponent {
         this.searchUpdated = new EventEmitter();
         this.inputClicked = new EventEmitter();
         this.scrollEnd = new EventEmitter();
+        this.isOpen = new EventEmitter();
         this.initialListboxItems = [];
         this.onChange = () => { };
         this.onTouch = () => { };
@@ -1267,6 +1268,9 @@ class AutocompleteComponent {
     registerOnTouched(fn) {
         this.onTouch = fn;
     }
+    openChangeEvent($event) {
+        this.isOpen.emit($event);
+    }
     openListbox() {
         this.openState = true;
         this.inputClicked.emit(true);
@@ -1374,13 +1378,13 @@ class AutocompleteComponent {
     }
 }
 AutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AutocompleteComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AutocompleteComponent, selector: "moz-autocomplete", inputs: { listboxItems: "listboxItems", multiple: "multiple", placeholder: "placeholder", disabled: "disabled", loading: "loading", clearfield: "clearfield", valid: "valid", invalid: "invalid", size: "size", showSelectedTag: "showSelectedTag", showTagList: "showTagList", maxShowingSelectedTags: "maxShowingSelectedTags", layerTagsTitle: "layerTagsTitle", layerTagsIcon: "layerTagsIcon", errorContentText: "errorContentText", withSearchFilter: "withSearchFilter", openState: "openState", labelClearButton: "labelClearButton", searchValue: "searchValue" }, outputs: { searchUpdated: "searchUpdated", inputClicked: "inputClicked", scrollEnd: "scrollEnd" }, providers: [
+AutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AutocompleteComponent, selector: "moz-autocomplete", inputs: { listboxItems: "listboxItems", multiple: "multiple", placeholder: "placeholder", disabled: "disabled", loading: "loading", clearfield: "clearfield", valid: "valid", invalid: "invalid", size: "size", showSelectedTag: "showSelectedTag", showTagList: "showTagList", maxShowingSelectedTags: "maxShowingSelectedTags", layerTagsTitle: "layerTagsTitle", layerTagsIcon: "layerTagsIcon", errorContentText: "errorContentText", withSearchFilter: "withSearchFilter", openState: "openState", labelClearButton: "labelClearButton", searchValue: "searchValue" }, outputs: { searchUpdated: "searchUpdated", inputClicked: "inputClicked", scrollEnd: "scrollEnd", isOpen: "isOpen" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => AutocompleteComponent),
             multi: true,
         },
-    ], viewQueries: [{ propertyName: "taglistComponent", first: true, predicate: ["taglist"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  id=\"js-autocomplete\"\n  class=\"mc-autocomplete mc-autocomplete--clearable\"\n  [ngClass]=\"{ 'mc-autocomplete--multi': multiple }\"\n  [ngStyle]=\"{\n    '--autocomplete-tag-width':\n      showSelectedTag && multiple && getSelectedListboxItems().length > 0 ? '3.5rem' : '',\n    '--autocomplete-width': '100%'\n  }\"\n>\n  <moz-listbox\n    #listbox\n    [listboxItems]=\"listboxItems\"\n    [(isOpen)]=\"openState\"\n    [multiple]=\"multiple\"\n    [selectedItems]=\"selectedItems\"\n    (itemsSelected)=\"itemsSelectedListboxEvent($event)\"\n    (scrollEnd)=\"scrollEndEvent($event)\"\n  >\n    <div class=\"mc-autocomplete__main\" reference>\n      <moz-tag\n        *ngIf=\"showSelectedTag && multiple && getSelectedListboxItems().length > 0\"\n        type=\"removable\"\n        class=\"mc-autocomplete__tag mc-tag-removable mc-tag-removable--s\"\n        [size]=\"'s'\"\n        (clickOnRemove)=\"clearFieldEvent()\"\n      >\n        {{ getSelectedListboxItems().length }}</moz-tag\n      >\n\n      <div class=\"mc-left-icon-input\">\n        <moz-icon\n          class=\"mc-left-icon-input__icon\"\n          [iconName]=\"'Navigation_Display_Search_24px'\"\n        ></moz-icon>\n        <input\n          moz-input\n          [type]=\"'text'\"\n          [invalid]=\"invalid\"\n          class=\"mc-left-icon-input__input mc-text-input mc-autocomplete__trigger\"\n          [valid]=\"valid\"\n          [placeholder]=\"placeholder\"\n          [disabled]=\"disabled\"\n          [size]=\"size\"\n          [(ngModel)]=\"searchValue\"\n          (ngModelChange)=\"searchEvent()\"\n          (focusin)=\"focusinEvent()\"\n          (focusout)=\"focusoutEvent($event)\"\n          (click)=\"openListbox()\"\n        />\n      </div>\n\n      <div class=\"mc-autocomplete__tools\">\n        <div class=\"mc-autocomplete__loader mc-loader mc-loader--s\" *ngIf=\"loading\">\n          <span class=\"mc-loader__spinner\">\n            <moz-loader class=\"mc-loader__icon\" size=\"s\"></moz-loader>\n          </span>\n        </div>\n        <button\n          class=\"mc-autocomplete__clear\"\n          type=\"button\"\n          *ngIf=\"canClearField()\"\n          (click)=\"clearFieldEvent()\"\n        >\n          <moz-icon\n            class=\"mc-autocomplete__clear-icon\"\n            [iconName]=\"'Navigation_Control_Tag--Cross_24px'\"\n          ></moz-icon\n          ><span class=\"mc-autocomplete__clear-text\">{{ labelClearButton }}</span>\n        </button>\n      </div>\n    </div>\n  </moz-listbox>\n</div>\n<div class=\"mc-autocomplete__error\" *ngIf=\"invalid\">\n  {{ errorContentText }}\n</div>\n<div class=\"mc-autocomplete__taglist\" *ngIf=\"showTagList && multiple && !openState\">\n  <moz-taglist\n    #taglist\n    (removeTag)=\"removeTagEvent($event)\"\n    [tagItems]=\"getTagItemsFromSelectedItems()\"\n    [max]=\"maxShowingSelectedTags\"\n    [layerTagsTitle]=\"layerTagsTitle\"\n    [layerTagsIcon]=\"layerTagsIcon\"\n  ></moz-taglist>\n</div>\n", styles: [".mc-left-icon-input{position:relative}.mc-left-icon-input__icon{position:absolute;z-index:1;top:50%;transform:translateY(-50%);fill:#666;pointer-events:none}.mc-left-icon-input .mc-left-icon-input__icon{left:.75rem;top:50%;width:1.5rem;height:1.5rem}.mc-left-icon-input .mc-left-icon-input__input{padding-left:2.9375rem}.mc-left-icon-input--s .mc-left-icon-input__icon{left:.5rem;top:50%;width:1.5rem;height:1.5rem}.mc-left-icon-input--s .mc-left-icon-input__input{padding-left:2.4375rem}.mc-text-input{font-family:Roboto,sans-serif;font-weight:400;box-sizing:border-box;outline:none;appearance:none;padding:0;margin:0;box-shadow:none;border:none;font-size:1rem;line-height:1.375;min-height:3rem;padding:.75rem .6875rem;transition:box-shadow .2s ease;display:block;width:100%;position:relative;border:1px solid #666666;color:#191919;background-color:#fff;border-radius:4px}.mc-text-input[type=number]::-webkit-inner-spin-button,.mc-text-input[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}.mc-text-input[type=number]{-moz-appearance:textfield}.mc-text-input[type=search]::-webkit-search-decoration:hover,.mc-text-input[type=search]::-webkit-search-cancel-button:hover{cursor:pointer}.mc-text-input::placeholder{font-size:1rem;line-height:1.375}.mc-text-input::placeholder{margin:0;color:#666;opacity:1}.mc-text-input.is-valid,.mc-text-input.is-invalid{background-repeat:no-repeat;background-size:1.5rem 1.5rem;background-position:right .4375rem center;padding-right:2.5rem}.mc-text-input.is-valid{border-color:#46a610;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1.5rem' width='1.5rem' fill='%2346a610' viewBox='0 0 24 24'%3E%3Cpath d='M12 4a8 8 0 11-8 8 8 8 0 018-8m0-2a10 10 0 1010 10A10 10 0 0012 2z'/%3E%3Cpath d='M10.73 15.75a1 1 0 01-.68-.26l-3-2.74a1 1 0 011.36-1.47l2.25 2.08 4.36-4.42a1 1 0 111.42 1.41l-5 5.1a1 1 0 01-.71.3z'/%3E%3C/svg%3E\")}.mc-text-input.is-valid:hover,.mc-text-input.is-valid.is-hover{border-color:#035010}.mc-text-input.is-invalid{border-color:#c61112;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1.5rem' width='1.5rem' viewBox='0 0 24 24' fill='%23c61112'%3E%3Cpath d='M12 2a10 10 0 1010 10A10 10 0 0012 2zm0 18a8 8 0 118-8 8 8 0 01-8 8z'/%3E%3Cpath d='M12 7a1 1 0 00-1 1v4.38a1 1 0 002 0V8a1 1 0 00-1-1z'/%3E%3Ccircle cx='12' cy='16' r='1'/%3E%3C/svg%3E\")}.mc-text-input.is-invalid:hover,.mc-text-input.is-invalid.is-hover{border-color:#530000}.mc-text-input:hover{border-color:#191919}.mc-text-input:focus{box-shadow:0 0 0 .125rem #fff,0 0 0 .25rem #758992}.mc-text-input:disabled{background:#e6e6e6;border-color:#e6e6e6;color:#666;cursor:not-allowed}.mc-text-input--s{font-size:.875rem;line-height:1.2857142857;min-height:2rem;padding:.375rem .4375rem}.mc-text-input--s::placeholder{font-size:.875rem;line-height:1.2857142857}@media screen and (min-width: 680px){.mc-text-input--s\\@from-m{font-size:.875rem;line-height:1.2857142857;min-height:2rem;padding:.375rem .4375rem}.mc-text-input--s\\@from-m::placeholder{font-size:.875rem;line-height:1.2857142857}}@media screen and (min-width: 1024px){.mc-text-input--s\\@from-l{font-size:.875rem;line-height:1.2857142857;min-height:2rem;padding:.375rem .4375rem}.mc-text-input--s\\@from-l::placeholder{font-size:.875rem;line-height:1.2857142857}}@media screen and (min-width: 1280px){.mc-text-input--s\\@from-xl{font-size:.875rem;line-height:1.2857142857;min-height:2rem;padding:.375rem .4375rem}.mc-text-input--s\\@from-xl::placeholder{font-size:.875rem;line-height:1.2857142857}}@media screen and (min-width: 1920px){.mc-text-input--s\\@from-xxl{font-size:.875rem;line-height:1.2857142857;min-height:2rem;padding:.375rem .4375rem}.mc-text-input--s\\@from-xxl::placeholder{font-size:.875rem;line-height:1.2857142857}}.mc-text-input--m{font-size:1rem;line-height:1.375;min-height:3rem;padding:.75rem .6875rem}.mc-text-input--m::placeholder{font-size:1rem;line-height:1.375}@media screen and (min-width: 680px){.mc-text-input--m\\@from-m{font-size:1rem;line-height:1.375;min-height:3rem;padding:.75rem .6875rem}.mc-text-input--m\\@from-m::placeholder{font-size:1rem;line-height:1.375}}@media screen and (min-width: 1024px){.mc-text-input--m\\@from-l{font-size:1rem;line-height:1.375;min-height:3rem;padding:.75rem .6875rem}.mc-text-input--m\\@from-l::placeholder{font-size:1rem;line-height:1.375}}@media screen and (min-width: 1280px){.mc-text-input--m\\@from-xl{font-size:1rem;line-height:1.375;min-height:3rem;padding:.75rem .6875rem}.mc-text-input--m\\@from-xl::placeholder{font-size:1rem;line-height:1.375}}@media screen and (min-width: 1920px){.mc-text-input--m\\@from-xxl{font-size:1rem;line-height:1.375;min-height:3rem;padding:.75rem .6875rem}.mc-text-input--m\\@from-xxl::placeholder{font-size:1rem;line-height:1.375}}.mc-listbox{background-color:#fff;border:1px solid #666666;border-radius:3px;overflow-y:auto;max-height:var(--listbox-height, 13.8125rem);max-width:var(--listbox-maxwidth, none);min-width:var(--listbox-minwidth, 18rem);width:var(--listbox-width, auto)}.mc-listbox::-webkit-scrollbar{background-color:#e6e6e6;width:.25rem}.mc-listbox::-webkit-scrollbar-thumb{background:#666666}.mc-listbox__list{list-style:none;margin:0;padding-left:0}.mc-listbox__tile{align-items:center;display:flex;gap:.5rem;height:3rem;justify-content:flex-start;padding-left:.75rem;padding-right:.75rem;position:relative}.mc-listbox__tile:not(.mc-listbox__tile--empty):not(.is-disabled):hover{background-color:#e6e6e6;box-shadow:inset 9px 0 0 -7px #191919}.mc-listbox__tile--danger{color:#c61112}.mc-listbox__tile--empty{color:#666;justify-content:center}.mc-listbox__tile--empty .mc-listbox__label{cursor:default}.mc-listbox__tile.is-disabled{box-shadow:none;background-color:#ccc;color:#666;pointer-events:none}.mc-listbox__flag,.mc-listbox__icon,.mc-listbox__logo{height:2rem;width:2rem}.mc-listbox__flag{font-size:1.4375rem;line-height:1.3913043478;text-align:center}.mc-listbox__icon{fill:#666}.mc-listbox__label{color:currentColor;cursor:pointer;white-space:nowrap}button.mc-listbox__label{background:none;border:none;padding:0;font-size:inherit;font-family:inherit}.mc-listbox__label:after{content:\"\";position:absolute;inset:0;z-index:2}.mc-listbox__input{margin-left:auto;order:1}.mc-listbox--left{right:0}.mc-listbox:not(.mc-listbox--multi) .mc-listbox__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-listbox--options .mc-listbox__tile:not(:last-child){border-bottom:1px solid #b3b3b3}.mc-listbox--options .mc-listbox__tile.is-selected .mc-listbox__label:before{visibility:visible}.mc-listbox--options .mc-listbox__tile.is-selected.is-disabled .mc-listbox__label:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\")}.mc-listbox--options .mc-listbox__input:checked+.mc-listbox__label:before{visibility:visible}.mc-listbox--options .mc-listbox__input:checked:disabled+.mc-listbox__label:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\")}.mc-listbox--options .mc-listbox__label:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23191919' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\");background-position:center;background-repeat:no-repeat;background-size:1.5rem;content:\"\";height:1.5rem;position:absolute;right:.75rem;top:0;transform:translateY(50%);width:1.5rem;visibility:hidden}.mc-listbox--actions{--listbox-height: auto;--listbox-minwidth: px-to-rem(278)}.mc-listbox--actions .mc-listbox__list:not(:last-child){border-bottom:1px solid #b3b3b3}.mc-listbox--actions .mc-listbox__list:first-child{padding-top:.4375rem;padding-bottom:.5rem}.mc-listbox--actions .mc-listbox__list:last-child{padding-top:.5rem;padding-bottom:.4375rem}.mc-listbox--actions .mc-listbox__list:not(:first-child):not(:last-child){padding-top:.5rem;padding-bottom:.5rem}.mc-listbox--overlay{position:absolute;z-index:10}.mc-loader{color:#007f8c;align-items:center;display:inline-flex;flex-direction:column}.mc-loader .mc-loader__spinner{height:2rem;width:2rem}.mc-loader .mc-loader__path{stroke-width:4}.mc-loader .mc-loader__path{stroke:currentColor}.mc-loader__spinner:not(:only-child){margin-bottom:1rem}.mc-loader__icon{animation:rotate-loader 2s linear infinite;transform-origin:center}.mc-loader__path{fill:none;stroke-dasharray:1,200;stroke-dashoffset:0;stroke-linecap:round;animation:animate-dash-loader 2s ease-in-out infinite}.mc-loader__text{font-size:1rem;line-height:1.375;color:currentColor}.mc-loader--s .mc-loader__spinner{height:1.5rem;width:1.5rem}.mc-loader--s .mc-loader__path{stroke-width:4}.mc-loader--l .mc-loader__spinner{height:4rem;width:4rem}.mc-loader--l .mc-loader__path{stroke-width:8}.mc-loader--dark{color:#191919}.mc-loader--dark .mc-loader__path{stroke:currentColor}.mc-loader--light{color:#fff}.mc-loader--light .mc-loader__path{stroke:currentColor}@keyframes rotate-loader{0%{transform:rotate(0)}to{transform:rotate(270deg)}}@keyframes animate-dash-loader{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}.mc-autocomplete{align-self:start;position:relative;min-width:18rem;max-width:var(--autocomplete-width, auto);width:100%}.mc-autocomplete__main{position:relative}.mc-autocomplete__tag,.mc-autocomplete__tools{position:absolute;top:50%;transform:translateY(-50%);z-index:2}.mc-autocomplete__tag{left:2.75rem}.mc-autocomplete__trigger{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mc-autocomplete__tools{align-items:center;background-color:#fff;display:flex;gap:.5rem;justify-content:flex-end;right:.75rem}.is-valid+.mc-autocomplete__tools,.is-invalid+.mc-autocomplete__tools{right:2.5rem}.mc-autocomplete__clear{margin:0;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;padding:0;box-shadow:0 0 0 0 transparent;transition:box-shadow .15s ease;background:none;border-radius:50%}.mc-autocomplete__clear:focus{box-shadow:0 0 0 2px #758992}.mc-autocomplete__clear,.mc-autocomplete__clear-icon{height:1.5rem;width:1.5rem}.mc-autocomplete__clear-icon{fill:#666}.mc-autocomplete__clear-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-autocomplete__error{font-size:.875rem;line-height:1.2857142857;color:#c61112;display:inline-block;margin-top:.25rem}.mc-autocomplete--multi .mc-autocomplete__trigger{padding-left:calc(2.9375rem + var(--autocomplete-tag-width, 0px))}.mc-autocomplete__taglist{margin-top:1rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TagComponent, selector: "moz-tag, a[moz-tag]", inputs: ["type", "size", "select"], outputs: ["selectChange", "clickOnRemove"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TaglistComponent, selector: "moz-taglist", inputs: ["tagItems", "tagSize", "showAllTitle", "showAll", "layerTagsTitle", "layerTagsIcon", "max"], outputs: ["removeTag"] }, { kind: "component", type: ListboxComponent, selector: "moz-listbox", inputs: ["listboxItems", "multiple", "selectedItems", "type", "overlay", "maxWidth", "maxHeight", "width", "disabled", "withoutOverflow", "isOpen"], outputs: ["itemsSelected", "scrollEnd", "isOpenChange"] }, { kind: "component", type: IconComponent, selector: "moz-icon", inputs: ["iconName"] }, { kind: "component", type: LoaderComponent, selector: "moz-loader", inputs: ["size", "theme", "isOverlay", "text", "hideOverlay"] }, { kind: "component", type: TextInputComponent, selector: "input[moz-input]", inputs: ["size", "invalid", "valid"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], viewQueries: [{ propertyName: "taglistComponent", first: true, predicate: ["taglist"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  id=\"js-autocomplete\"\n  class=\"mc-autocomplete mc-autocomplete--clearable\"\n  [ngClass]=\"{ 'mc-autocomplete--multi': multiple }\"\n  [ngStyle]=\"{\n    '--autocomplete-tag-width':\n      showSelectedTag && multiple && getSelectedListboxItems().length > 0 ? '3.5rem' : '',\n    '--autocomplete-width': '100%'\n  }\"\n>\n  <moz-listbox\n    #listbox\n    [listboxItems]=\"listboxItems\"\n    [(isOpen)]=\"openState\"\n    [multiple]=\"multiple\"\n    [selectedItems]=\"selectedItems\"\n    (itemsSelected)=\"itemsSelectedListboxEvent($event)\"\n    (scrollEnd)=\"scrollEndEvent($event)\"\n    (isOpenChange)=\"openChangeEvent($event)\"\n  >\n    <div class=\"mc-autocomplete__main\" reference>\n      <moz-tag\n        *ngIf=\"showSelectedTag && multiple && getSelectedListboxItems().length > 0\"\n        type=\"removable\"\n        class=\"mc-autocomplete__tag mc-tag-removable mc-tag-removable--s\"\n        [size]=\"'s'\"\n        (clickOnRemove)=\"clearFieldEvent()\"\n      >\n        {{ getSelectedListboxItems().length }}</moz-tag\n      >\n\n      <div class=\"mc-left-icon-input\">\n        <moz-icon\n          class=\"mc-left-icon-input__icon\"\n          [iconName]=\"'Navigation_Display_Search_24px'\"\n        ></moz-icon>\n        <input\n          moz-input\n          [type]=\"'text'\"\n          [invalid]=\"invalid\"\n          class=\"mc-left-icon-input__input mc-text-input mc-autocomplete__trigger\"\n          [valid]=\"valid\"\n          [placeholder]=\"placeholder\"\n          [disabled]=\"disabled\"\n          [size]=\"size\"\n          [(ngModel)]=\"searchValue\"\n          (ngModelChange)=\"searchEvent()\"\n          (focusin)=\"focusinEvent()\"\n          (focusout)=\"focusoutEvent($event)\"\n          (click)=\"openListbox()\"\n        />\n      </div>\n\n      <div class=\"mc-autocomplete__tools\">\n        <div class=\"mc-autocomplete__loader mc-loader mc-loader--s\" *ngIf=\"loading\">\n          <span class=\"mc-loader__spinner\">\n            <moz-loader class=\"mc-loader__icon\" size=\"s\"></moz-loader>\n          </span>\n        </div>\n        <button\n          class=\"mc-autocomplete__clear\"\n          type=\"button\"\n          *ngIf=\"canClearField()\"\n          (click)=\"clearFieldEvent()\"\n        >\n          <moz-icon\n            class=\"mc-autocomplete__clear-icon\"\n            [iconName]=\"'Navigation_Control_Tag--Cross_24px'\"\n          ></moz-icon\n          ><span class=\"mc-autocomplete__clear-text\">{{ labelClearButton }}</span>\n        </button>\n      </div>\n    </div>\n  </moz-listbox>\n</div>\n<div class=\"mc-autocomplete__error\" *ngIf=\"invalid\">\n  {{ errorContentText }}\n</div>\n<div class=\"mc-autocomplete__taglist\" *ngIf=\"showTagList && multiple && !openState\">\n  <moz-taglist\n    #taglist\n    (removeTag)=\"removeTagEvent($event)\"\n    [tagItems]=\"getTagItemsFromSelectedItems()\"\n    [max]=\"maxShowingSelectedTags\"\n    [layerTagsTitle]=\"layerTagsTitle\"\n    [layerTagsIcon]=\"layerTagsIcon\"\n  ></moz-taglist>\n</div>\n", styles: [".mc-left-icon-input{position:relative}.mc-left-icon-input__icon{position:absolute;z-index:1;top:50%;transform:translateY(-50%);fill:#666;pointer-events:none}.mc-left-icon-input .mc-left-icon-input__icon{left:.75rem;top:50%;width:1.5rem;height:1.5rem}.mc-left-icon-input .mc-left-icon-input__input{padding-left:2.9375rem}.mc-left-icon-input--s .mc-left-icon-input__icon{left:.5rem;top:50%;width:1.5rem;height:1.5rem}.mc-left-icon-input--s .mc-left-icon-input__input{padding-left:2.4375rem}.mc-text-input{font-family:Roboto,sans-serif;font-weight:400;box-sizing:border-box;outline:none;appearance:none;padding:0;margin:0;box-shadow:none;border:none;font-size:1rem;line-height:1.375;min-height:3rem;padding:.75rem .6875rem;transition:box-shadow .2s ease;display:block;width:100%;position:relative;border:1px solid #666666;color:#191919;background-color:#fff;border-radius:4px}.mc-text-input[type=number]::-webkit-inner-spin-button,.mc-text-input[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}.mc-text-input[type=number]{-moz-appearance:textfield}.mc-text-input[type=search]::-webkit-search-decoration:hover,.mc-text-input[type=search]::-webkit-search-cancel-button:hover{cursor:pointer}.mc-text-input::placeholder{font-size:1rem;line-height:1.375}.mc-text-input::placeholder{margin:0;color:#666;opacity:1}.mc-text-input.is-valid,.mc-text-input.is-invalid{background-repeat:no-repeat;background-size:1.5rem 1.5rem;background-position:right .4375rem center;padding-right:2.5rem}.mc-text-input.is-valid{border-color:#46a610;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1.5rem' width='1.5rem' fill='%2346a610' viewBox='0 0 24 24'%3E%3Cpath d='M12 4a8 8 0 11-8 8 8 8 0 018-8m0-2a10 10 0 1010 10A10 10 0 0012 2z'/%3E%3Cpath d='M10.73 15.75a1 1 0 01-.68-.26l-3-2.74a1 1 0 011.36-1.47l2.25 2.08 4.36-4.42a1 1 0 111.42 1.41l-5 5.1a1 1 0 01-.71.3z'/%3E%3C/svg%3E\")}.mc-text-input.is-valid:hover,.mc-text-input.is-valid.is-hover{border-color:#035010}.mc-text-input.is-invalid{border-color:#c61112;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1.5rem' width='1.5rem' viewBox='0 0 24 24' fill='%23c61112'%3E%3Cpath d='M12 2a10 10 0 1010 10A10 10 0 0012 2zm0 18a8 8 0 118-8 8 8 0 01-8 8z'/%3E%3Cpath d='M12 7a1 1 0 00-1 1v4.38a1 1 0 002 0V8a1 1 0 00-1-1z'/%3E%3Ccircle cx='12' cy='16' r='1'/%3E%3C/svg%3E\")}.mc-text-input.is-invalid:hover,.mc-text-input.is-invalid.is-hover{border-color:#530000}.mc-text-input:hover{border-color:#191919}.mc-text-input:focus{box-shadow:0 0 0 .125rem #fff,0 0 0 .25rem #758992}.mc-text-input:disabled{background:#e6e6e6;border-color:#e6e6e6;color:#666;cursor:not-allowed}.mc-text-input--s{font-size:.875rem;line-height:1.2857142857;min-height:2rem;padding:.375rem .4375rem}.mc-text-input--s::placeholder{font-size:.875rem;line-height:1.2857142857}@media screen and (min-width: 680px){.mc-text-input--s\\@from-m{font-size:.875rem;line-height:1.2857142857;min-height:2rem;padding:.375rem .4375rem}.mc-text-input--s\\@from-m::placeholder{font-size:.875rem;line-height:1.2857142857}}@media screen and (min-width: 1024px){.mc-text-input--s\\@from-l{font-size:.875rem;line-height:1.2857142857;min-height:2rem;padding:.375rem .4375rem}.mc-text-input--s\\@from-l::placeholder{font-size:.875rem;line-height:1.2857142857}}@media screen and (min-width: 1280px){.mc-text-input--s\\@from-xl{font-size:.875rem;line-height:1.2857142857;min-height:2rem;padding:.375rem .4375rem}.mc-text-input--s\\@from-xl::placeholder{font-size:.875rem;line-height:1.2857142857}}@media screen and (min-width: 1920px){.mc-text-input--s\\@from-xxl{font-size:.875rem;line-height:1.2857142857;min-height:2rem;padding:.375rem .4375rem}.mc-text-input--s\\@from-xxl::placeholder{font-size:.875rem;line-height:1.2857142857}}.mc-text-input--m{font-size:1rem;line-height:1.375;min-height:3rem;padding:.75rem .6875rem}.mc-text-input--m::placeholder{font-size:1rem;line-height:1.375}@media screen and (min-width: 680px){.mc-text-input--m\\@from-m{font-size:1rem;line-height:1.375;min-height:3rem;padding:.75rem .6875rem}.mc-text-input--m\\@from-m::placeholder{font-size:1rem;line-height:1.375}}@media screen and (min-width: 1024px){.mc-text-input--m\\@from-l{font-size:1rem;line-height:1.375;min-height:3rem;padding:.75rem .6875rem}.mc-text-input--m\\@from-l::placeholder{font-size:1rem;line-height:1.375}}@media screen and (min-width: 1280px){.mc-text-input--m\\@from-xl{font-size:1rem;line-height:1.375;min-height:3rem;padding:.75rem .6875rem}.mc-text-input--m\\@from-xl::placeholder{font-size:1rem;line-height:1.375}}@media screen and (min-width: 1920px){.mc-text-input--m\\@from-xxl{font-size:1rem;line-height:1.375;min-height:3rem;padding:.75rem .6875rem}.mc-text-input--m\\@from-xxl::placeholder{font-size:1rem;line-height:1.375}}.mc-listbox{background-color:#fff;border:1px solid #666666;border-radius:3px;overflow-y:auto;max-height:var(--listbox-height, 13.8125rem);max-width:var(--listbox-maxwidth, none);min-width:var(--listbox-minwidth, 18rem);width:var(--listbox-width, auto)}.mc-listbox::-webkit-scrollbar{background-color:#e6e6e6;width:.25rem}.mc-listbox::-webkit-scrollbar-thumb{background:#666666}.mc-listbox__list{list-style:none;margin:0;padding-left:0}.mc-listbox__tile{align-items:center;display:flex;gap:.5rem;height:3rem;justify-content:flex-start;padding-left:.75rem;padding-right:.75rem;position:relative}.mc-listbox__tile:not(.mc-listbox__tile--empty):not(.is-disabled):hover{background-color:#e6e6e6;box-shadow:inset 9px 0 0 -7px #191919}.mc-listbox__tile--danger{color:#c61112}.mc-listbox__tile--empty{color:#666;justify-content:center}.mc-listbox__tile--empty .mc-listbox__label{cursor:default}.mc-listbox__tile.is-disabled{box-shadow:none;background-color:#ccc;color:#666;pointer-events:none}.mc-listbox__flag,.mc-listbox__icon,.mc-listbox__logo{height:2rem;width:2rem}.mc-listbox__flag{font-size:1.4375rem;line-height:1.3913043478;text-align:center}.mc-listbox__icon{fill:#666}.mc-listbox__label{color:currentColor;cursor:pointer;white-space:nowrap}button.mc-listbox__label{background:none;border:none;padding:0;font-size:inherit;font-family:inherit}.mc-listbox__label:after{content:\"\";position:absolute;inset:0;z-index:2}.mc-listbox__input{margin-left:auto;order:1}.mc-listbox--left{right:0}.mc-listbox:not(.mc-listbox--multi) .mc-listbox__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-listbox--options .mc-listbox__tile:not(:last-child){border-bottom:1px solid #b3b3b3}.mc-listbox--options .mc-listbox__tile.is-selected .mc-listbox__label:before{visibility:visible}.mc-listbox--options .mc-listbox__tile.is-selected.is-disabled .mc-listbox__label:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\")}.mc-listbox--options .mc-listbox__input:checked+.mc-listbox__label:before{visibility:visible}.mc-listbox--options .mc-listbox__input:checked:disabled+.mc-listbox__label:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\")}.mc-listbox--options .mc-listbox__label:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23191919' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\");background-position:center;background-repeat:no-repeat;background-size:1.5rem;content:\"\";height:1.5rem;position:absolute;right:.75rem;top:0;transform:translateY(50%);width:1.5rem;visibility:hidden}.mc-listbox--actions{--listbox-height: auto;--listbox-minwidth: px-to-rem(278)}.mc-listbox--actions .mc-listbox__list:not(:last-child){border-bottom:1px solid #b3b3b3}.mc-listbox--actions .mc-listbox__list:first-child{padding-top:.4375rem;padding-bottom:.5rem}.mc-listbox--actions .mc-listbox__list:last-child{padding-top:.5rem;padding-bottom:.4375rem}.mc-listbox--actions .mc-listbox__list:not(:first-child):not(:last-child){padding-top:.5rem;padding-bottom:.5rem}.mc-listbox--overlay{position:absolute;z-index:10}.mc-loader{color:#007f8c;align-items:center;display:inline-flex;flex-direction:column}.mc-loader .mc-loader__spinner{height:2rem;width:2rem}.mc-loader .mc-loader__path{stroke-width:4}.mc-loader .mc-loader__path{stroke:currentColor}.mc-loader__spinner:not(:only-child){margin-bottom:1rem}.mc-loader__icon{animation:rotate-loader 2s linear infinite;transform-origin:center}.mc-loader__path{fill:none;stroke-dasharray:1,200;stroke-dashoffset:0;stroke-linecap:round;animation:animate-dash-loader 2s ease-in-out infinite}.mc-loader__text{font-size:1rem;line-height:1.375;color:currentColor}.mc-loader--s .mc-loader__spinner{height:1.5rem;width:1.5rem}.mc-loader--s .mc-loader__path{stroke-width:4}.mc-loader--l .mc-loader__spinner{height:4rem;width:4rem}.mc-loader--l .mc-loader__path{stroke-width:8}.mc-loader--dark{color:#191919}.mc-loader--dark .mc-loader__path{stroke:currentColor}.mc-loader--light{color:#fff}.mc-loader--light .mc-loader__path{stroke:currentColor}@keyframes rotate-loader{0%{transform:rotate(0)}to{transform:rotate(270deg)}}@keyframes animate-dash-loader{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}.mc-autocomplete{align-self:start;position:relative;min-width:18rem;max-width:var(--autocomplete-width, auto);width:100%}.mc-autocomplete__main{position:relative}.mc-autocomplete__tag,.mc-autocomplete__tools{position:absolute;top:50%;transform:translateY(-50%);z-index:2}.mc-autocomplete__tag{left:2.75rem}.mc-autocomplete__trigger{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mc-autocomplete__tools{align-items:center;background-color:#fff;display:flex;gap:.5rem;justify-content:flex-end;right:.75rem}.is-valid+.mc-autocomplete__tools,.is-invalid+.mc-autocomplete__tools{right:2.5rem}.mc-autocomplete__clear{margin:0;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;padding:0;box-shadow:0 0 0 0 transparent;transition:box-shadow .15s ease;background:none;border-radius:50%}.mc-autocomplete__clear:focus{box-shadow:0 0 0 2px #758992}.mc-autocomplete__clear,.mc-autocomplete__clear-icon{height:1.5rem;width:1.5rem}.mc-autocomplete__clear-icon{fill:#666}.mc-autocomplete__clear-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-autocomplete__error{font-size:.875rem;line-height:1.2857142857;color:#c61112;display:inline-block;margin-top:.25rem}.mc-autocomplete--multi .mc-autocomplete__trigger{padding-left:calc(2.9375rem + var(--autocomplete-tag-width, 0px))}.mc-autocomplete__taglist{margin-top:1rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TagComponent, selector: "moz-tag, a[moz-tag]", inputs: ["type", "size", "select"], outputs: ["selectChange", "clickOnRemove"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TaglistComponent, selector: "moz-taglist", inputs: ["tagItems", "tagSize", "showAllTitle", "showAll", "layerTagsTitle", "layerTagsIcon", "max"], outputs: ["removeTag"] }, { kind: "component", type: ListboxComponent, selector: "moz-listbox", inputs: ["listboxItems", "multiple", "selectedItems", "type", "overlay", "maxWidth", "maxHeight", "width", "disabled", "withoutOverflow", "isOpen"], outputs: ["itemsSelected", "scrollEnd", "isOpenChange"] }, { kind: "component", type: IconComponent, selector: "moz-icon", inputs: ["iconName"] }, { kind: "component", type: LoaderComponent, selector: "moz-loader", inputs: ["size", "theme", "isOverlay", "text", "hideOverlay"] }, { kind: "component", type: TextInputComponent, selector: "input[moz-input]", inputs: ["size", "invalid", "valid"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AutocompleteComponent, decorators: [{
             type: Component,
             args: [{ selector: 'moz-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -1389,7 +1393,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                             useExisting: forwardRef(() => AutocompleteComponent),
                             multi: true,
                         },
-                    ], template: "<div\n  id=\"js-autocomplete\"\n  class=\"mc-autocomplete mc-autocomplete--clearable\"\n  [ngClass]=\"{ 'mc-autocomplete--multi': multiple }\"\n  [ngStyle]=\"{\n    '--autocomplete-tag-width':\n      showSelectedTag && multiple && getSelectedListboxItems().length > 0 ? '3.5rem' : '',\n    '--autocomplete-width': '100%'\n  }\"\n>\n  <moz-listbox\n    #listbox\n    [listboxItems]=\"listboxItems\"\n    [(isOpen)]=\"openState\"\n    [multiple]=\"multiple\"\n    [selectedItems]=\"selectedItems\"\n    (itemsSelected)=\"itemsSelectedListboxEvent($event)\"\n    (scrollEnd)=\"scrollEndEvent($event)\"\n  >\n    <div class=\"mc-autocomplete__main\" reference>\n      <moz-tag\n        *ngIf=\"showSelectedTag && multiple && getSelectedListboxItems().length > 0\"\n        type=\"removable\"\n        class=\"mc-autocomplete__tag mc-tag-removable mc-tag-removable--s\"\n        [size]=\"'s'\"\n        (clickOnRemove)=\"clearFieldEvent()\"\n      >\n        {{ getSelectedListboxItems().length }}</moz-tag\n      >\n\n      <div class=\"mc-left-icon-input\">\n        <moz-icon\n          class=\"mc-left-icon-input__icon\"\n          [iconName]=\"'Navigation_Display_Search_24px'\"\n        ></moz-icon>\n        <input\n          moz-input\n          [type]=\"'text'\"\n          [invalid]=\"invalid\"\n          class=\"mc-left-icon-input__input mc-text-input mc-autocomplete__trigger\"\n          [valid]=\"valid\"\n          [placeholder]=\"placeholder\"\n          [disabled]=\"disabled\"\n          [size]=\"size\"\n          [(ngModel)]=\"searchValue\"\n          (ngModelChange)=\"searchEvent()\"\n          (focusin)=\"focusinEvent()\"\n          (focusout)=\"focusoutEvent($event)\"\n          (click)=\"openListbox()\"\n        />\n      </div>\n\n      <div class=\"mc-autocomplete__tools\">\n        <div class=\"mc-autocomplete__loader mc-loader mc-loader--s\" *ngIf=\"loading\">\n          <span class=\"mc-loader__spinner\">\n            <moz-loader class=\"mc-loader__icon\" size=\"s\"></moz-loader>\n          </span>\n        </div>\n        <button\n          class=\"mc-autocomplete__clear\"\n          type=\"button\"\n          *ngIf=\"canClearField()\"\n          (click)=\"clearFieldEvent()\"\n        >\n          <moz-icon\n            class=\"mc-autocomplete__clear-icon\"\n            [iconName]=\"'Navigation_Control_Tag--Cross_24px'\"\n          ></moz-icon\n          ><span class=\"mc-autocomplete__clear-text\">{{ labelClearButton }}</span>\n        </button>\n      </div>\n    </div>\n  </moz-listbox>\n</div>\n<div class=\"mc-autocomplete__error\" *ngIf=\"invalid\">\n  {{ errorContentText }}\n</div>\n<div class=\"mc-autocomplete__taglist\" *ngIf=\"showTagList && multiple && !openState\">\n  <moz-taglist\n    #taglist\n    (removeTag)=\"removeTagEvent($event)\"\n    [tagItems]=\"getTagItemsFromSelectedItems()\"\n    [max]=\"maxShowingSelectedTags\"\n    [layerTagsTitle]=\"layerTagsTitle\"\n    [layerTagsIcon]=\"layerTagsIcon\"\n  ></moz-taglist>\n</div>\n", styles: [".mc-left-icon-input{position:relative}.mc-left-icon-input__icon{position:absolute;z-index:1;top:50%;transform:translateY(-50%);fill:#666;pointer-events:none}.mc-left-icon-input .mc-left-icon-input__icon{left:.75rem;top:50%;width:1.5rem;height:1.5rem}.mc-left-icon-input .mc-left-icon-input__input{padding-left:2.9375rem}.mc-left-icon-input--s .mc-left-icon-input__icon{left:.5rem;top:50%;width:1.5rem;height:1.5rem}.mc-left-icon-input--s .mc-left-icon-input__input{padding-left:2.4375rem}.mc-text-input{font-family:Roboto,sans-serif;font-weight:400;box-sizing:border-box;outline:none;appearance:none;padding:0;margin:0;box-shadow:none;border:none;font-size:1rem;line-height:1.375;min-height:3rem;padding:.75rem .6875rem;transition:box-shadow .2s ease;display:block;width:100%;position:relative;border:1px solid #666666;color:#191919;background-color:#fff;border-radius:4px}.mc-text-input[type=number]::-webkit-inner-spin-button,.mc-text-input[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}.mc-text-input[type=number]{-moz-appearance:textfield}.mc-text-input[type=search]::-webkit-search-decoration:hover,.mc-text-input[type=search]::-webkit-search-cancel-button:hover{cursor:pointer}.mc-text-input::placeholder{font-size:1rem;line-height:1.375}.mc-text-input::placeholder{margin:0;color:#666;opacity:1}.mc-text-input.is-valid,.mc-text-input.is-invalid{background-repeat:no-repeat;background-size:1.5rem 1.5rem;background-position:right .4375rem center;padding-right:2.5rem}.mc-text-input.is-valid{border-color:#46a610;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1.5rem' width='1.5rem' fill='%2346a610' viewBox='0 0 24 24'%3E%3Cpath d='M12 4a8 8 0 11-8 8 8 8 0 018-8m0-2a10 10 0 1010 10A10 10 0 0012 2z'/%3E%3Cpath d='M10.73 15.75a1 1 0 01-.68-.26l-3-2.74a1 1 0 011.36-1.47l2.25 2.08 4.36-4.42a1 1 0 111.42 1.41l-5 5.1a1 1 0 01-.71.3z'/%3E%3C/svg%3E\")}.mc-text-input.is-valid:hover,.mc-text-input.is-valid.is-hover{border-color:#035010}.mc-text-input.is-invalid{border-color:#c61112;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1.5rem' width='1.5rem' viewBox='0 0 24 24' fill='%23c61112'%3E%3Cpath d='M12 2a10 10 0 1010 10A10 10 0 0012 2zm0 18a8 8 0 118-8 8 8 0 01-8 8z'/%3E%3Cpath d='M12 7a1 1 0 00-1 1v4.38a1 1 0 002 0V8a1 1 0 00-1-1z'/%3E%3Ccircle cx='12' cy='16' r='1'/%3E%3C/svg%3E\")}.mc-text-input.is-invalid:hover,.mc-text-input.is-invalid.is-hover{border-color:#530000}.mc-text-input:hover{border-color:#191919}.mc-text-input:focus{box-shadow:0 0 0 .125rem #fff,0 0 0 .25rem #758992}.mc-text-input:disabled{background:#e6e6e6;border-color:#e6e6e6;color:#666;cursor:not-allowed}.mc-text-input--s{font-size:.875rem;line-height:1.2857142857;min-height:2rem;padding:.375rem .4375rem}.mc-text-input--s::placeholder{font-size:.875rem;line-height:1.2857142857}@media screen and (min-width: 680px){.mc-text-input--s\\@from-m{font-size:.875rem;line-height:1.2857142857;min-height:2rem;padding:.375rem .4375rem}.mc-text-input--s\\@from-m::placeholder{font-size:.875rem;line-height:1.2857142857}}@media screen and (min-width: 1024px){.mc-text-input--s\\@from-l{font-size:.875rem;line-height:1.2857142857;min-height:2rem;padding:.375rem .4375rem}.mc-text-input--s\\@from-l::placeholder{font-size:.875rem;line-height:1.2857142857}}@media screen and (min-width: 1280px){.mc-text-input--s\\@from-xl{font-size:.875rem;line-height:1.2857142857;min-height:2rem;padding:.375rem .4375rem}.mc-text-input--s\\@from-xl::placeholder{font-size:.875rem;line-height:1.2857142857}}@media screen and (min-width: 1920px){.mc-text-input--s\\@from-xxl{font-size:.875rem;line-height:1.2857142857;min-height:2rem;padding:.375rem .4375rem}.mc-text-input--s\\@from-xxl::placeholder{font-size:.875rem;line-height:1.2857142857}}.mc-text-input--m{font-size:1rem;line-height:1.375;min-height:3rem;padding:.75rem .6875rem}.mc-text-input--m::placeholder{font-size:1rem;line-height:1.375}@media screen and (min-width: 680px){.mc-text-input--m\\@from-m{font-size:1rem;line-height:1.375;min-height:3rem;padding:.75rem .6875rem}.mc-text-input--m\\@from-m::placeholder{font-size:1rem;line-height:1.375}}@media screen and (min-width: 1024px){.mc-text-input--m\\@from-l{font-size:1rem;line-height:1.375;min-height:3rem;padding:.75rem .6875rem}.mc-text-input--m\\@from-l::placeholder{font-size:1rem;line-height:1.375}}@media screen and (min-width: 1280px){.mc-text-input--m\\@from-xl{font-size:1rem;line-height:1.375;min-height:3rem;padding:.75rem .6875rem}.mc-text-input--m\\@from-xl::placeholder{font-size:1rem;line-height:1.375}}@media screen and (min-width: 1920px){.mc-text-input--m\\@from-xxl{font-size:1rem;line-height:1.375;min-height:3rem;padding:.75rem .6875rem}.mc-text-input--m\\@from-xxl::placeholder{font-size:1rem;line-height:1.375}}.mc-listbox{background-color:#fff;border:1px solid #666666;border-radius:3px;overflow-y:auto;max-height:var(--listbox-height, 13.8125rem);max-width:var(--listbox-maxwidth, none);min-width:var(--listbox-minwidth, 18rem);width:var(--listbox-width, auto)}.mc-listbox::-webkit-scrollbar{background-color:#e6e6e6;width:.25rem}.mc-listbox::-webkit-scrollbar-thumb{background:#666666}.mc-listbox__list{list-style:none;margin:0;padding-left:0}.mc-listbox__tile{align-items:center;display:flex;gap:.5rem;height:3rem;justify-content:flex-start;padding-left:.75rem;padding-right:.75rem;position:relative}.mc-listbox__tile:not(.mc-listbox__tile--empty):not(.is-disabled):hover{background-color:#e6e6e6;box-shadow:inset 9px 0 0 -7px #191919}.mc-listbox__tile--danger{color:#c61112}.mc-listbox__tile--empty{color:#666;justify-content:center}.mc-listbox__tile--empty .mc-listbox__label{cursor:default}.mc-listbox__tile.is-disabled{box-shadow:none;background-color:#ccc;color:#666;pointer-events:none}.mc-listbox__flag,.mc-listbox__icon,.mc-listbox__logo{height:2rem;width:2rem}.mc-listbox__flag{font-size:1.4375rem;line-height:1.3913043478;text-align:center}.mc-listbox__icon{fill:#666}.mc-listbox__label{color:currentColor;cursor:pointer;white-space:nowrap}button.mc-listbox__label{background:none;border:none;padding:0;font-size:inherit;font-family:inherit}.mc-listbox__label:after{content:\"\";position:absolute;inset:0;z-index:2}.mc-listbox__input{margin-left:auto;order:1}.mc-listbox--left{right:0}.mc-listbox:not(.mc-listbox--multi) .mc-listbox__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-listbox--options .mc-listbox__tile:not(:last-child){border-bottom:1px solid #b3b3b3}.mc-listbox--options .mc-listbox__tile.is-selected .mc-listbox__label:before{visibility:visible}.mc-listbox--options .mc-listbox__tile.is-selected.is-disabled .mc-listbox__label:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\")}.mc-listbox--options .mc-listbox__input:checked+.mc-listbox__label:before{visibility:visible}.mc-listbox--options .mc-listbox__input:checked:disabled+.mc-listbox__label:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\")}.mc-listbox--options .mc-listbox__label:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23191919' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\");background-position:center;background-repeat:no-repeat;background-size:1.5rem;content:\"\";height:1.5rem;position:absolute;right:.75rem;top:0;transform:translateY(50%);width:1.5rem;visibility:hidden}.mc-listbox--actions{--listbox-height: auto;--listbox-minwidth: px-to-rem(278)}.mc-listbox--actions .mc-listbox__list:not(:last-child){border-bottom:1px solid #b3b3b3}.mc-listbox--actions .mc-listbox__list:first-child{padding-top:.4375rem;padding-bottom:.5rem}.mc-listbox--actions .mc-listbox__list:last-child{padding-top:.5rem;padding-bottom:.4375rem}.mc-listbox--actions .mc-listbox__list:not(:first-child):not(:last-child){padding-top:.5rem;padding-bottom:.5rem}.mc-listbox--overlay{position:absolute;z-index:10}.mc-loader{color:#007f8c;align-items:center;display:inline-flex;flex-direction:column}.mc-loader .mc-loader__spinner{height:2rem;width:2rem}.mc-loader .mc-loader__path{stroke-width:4}.mc-loader .mc-loader__path{stroke:currentColor}.mc-loader__spinner:not(:only-child){margin-bottom:1rem}.mc-loader__icon{animation:rotate-loader 2s linear infinite;transform-origin:center}.mc-loader__path{fill:none;stroke-dasharray:1,200;stroke-dashoffset:0;stroke-linecap:round;animation:animate-dash-loader 2s ease-in-out infinite}.mc-loader__text{font-size:1rem;line-height:1.375;color:currentColor}.mc-loader--s .mc-loader__spinner{height:1.5rem;width:1.5rem}.mc-loader--s .mc-loader__path{stroke-width:4}.mc-loader--l .mc-loader__spinner{height:4rem;width:4rem}.mc-loader--l .mc-loader__path{stroke-width:8}.mc-loader--dark{color:#191919}.mc-loader--dark .mc-loader__path{stroke:currentColor}.mc-loader--light{color:#fff}.mc-loader--light .mc-loader__path{stroke:currentColor}@keyframes rotate-loader{0%{transform:rotate(0)}to{transform:rotate(270deg)}}@keyframes animate-dash-loader{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}.mc-autocomplete{align-self:start;position:relative;min-width:18rem;max-width:var(--autocomplete-width, auto);width:100%}.mc-autocomplete__main{position:relative}.mc-autocomplete__tag,.mc-autocomplete__tools{position:absolute;top:50%;transform:translateY(-50%);z-index:2}.mc-autocomplete__tag{left:2.75rem}.mc-autocomplete__trigger{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mc-autocomplete__tools{align-items:center;background-color:#fff;display:flex;gap:.5rem;justify-content:flex-end;right:.75rem}.is-valid+.mc-autocomplete__tools,.is-invalid+.mc-autocomplete__tools{right:2.5rem}.mc-autocomplete__clear{margin:0;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;padding:0;box-shadow:0 0 0 0 transparent;transition:box-shadow .15s ease;background:none;border-radius:50%}.mc-autocomplete__clear:focus{box-shadow:0 0 0 2px #758992}.mc-autocomplete__clear,.mc-autocomplete__clear-icon{height:1.5rem;width:1.5rem}.mc-autocomplete__clear-icon{fill:#666}.mc-autocomplete__clear-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-autocomplete__error{font-size:.875rem;line-height:1.2857142857;color:#c61112;display:inline-block;margin-top:.25rem}.mc-autocomplete--multi .mc-autocomplete__trigger{padding-left:calc(2.9375rem + var(--autocomplete-tag-width, 0px))}.mc-autocomplete__taglist{margin-top:1rem}\n"] }]
+                    ], template: "<div\n  id=\"js-autocomplete\"\n  class=\"mc-autocomplete mc-autocomplete--clearable\"\n  [ngClass]=\"{ 'mc-autocomplete--multi': multiple }\"\n  [ngStyle]=\"{\n    '--autocomplete-tag-width':\n      showSelectedTag && multiple && getSelectedListboxItems().length > 0 ? '3.5rem' : '',\n    '--autocomplete-width': '100%'\n  }\"\n>\n  <moz-listbox\n    #listbox\n    [listboxItems]=\"listboxItems\"\n    [(isOpen)]=\"openState\"\n    [multiple]=\"multiple\"\n    [selectedItems]=\"selectedItems\"\n    (itemsSelected)=\"itemsSelectedListboxEvent($event)\"\n    (scrollEnd)=\"scrollEndEvent($event)\"\n    (isOpenChange)=\"openChangeEvent($event)\"\n  >\n    <div class=\"mc-autocomplete__main\" reference>\n      <moz-tag\n        *ngIf=\"showSelectedTag && multiple && getSelectedListboxItems().length > 0\"\n        type=\"removable\"\n        class=\"mc-autocomplete__tag mc-tag-removable mc-tag-removable--s\"\n        [size]=\"'s'\"\n        (clickOnRemove)=\"clearFieldEvent()\"\n      >\n        {{ getSelectedListboxItems().length }}</moz-tag\n      >\n\n      <div class=\"mc-left-icon-input\">\n        <moz-icon\n          class=\"mc-left-icon-input__icon\"\n          [iconName]=\"'Navigation_Display_Search_24px'\"\n        ></moz-icon>\n        <input\n          moz-input\n          [type]=\"'text'\"\n          [invalid]=\"invalid\"\n          class=\"mc-left-icon-input__input mc-text-input mc-autocomplete__trigger\"\n          [valid]=\"valid\"\n          [placeholder]=\"placeholder\"\n          [disabled]=\"disabled\"\n          [size]=\"size\"\n          [(ngModel)]=\"searchValue\"\n          (ngModelChange)=\"searchEvent()\"\n          (focusin)=\"focusinEvent()\"\n          (focusout)=\"focusoutEvent($event)\"\n          (click)=\"openListbox()\"\n        />\n      </div>\n\n      <div class=\"mc-autocomplete__tools\">\n        <div class=\"mc-autocomplete__loader mc-loader mc-loader--s\" *ngIf=\"loading\">\n          <span class=\"mc-loader__spinner\">\n            <moz-loader class=\"mc-loader__icon\" size=\"s\"></moz-loader>\n          </span>\n        </div>\n        <button\n          class=\"mc-autocomplete__clear\"\n          type=\"button\"\n          *ngIf=\"canClearField()\"\n          (click)=\"clearFieldEvent()\"\n        >\n          <moz-icon\n            class=\"mc-autocomplete__clear-icon\"\n            [iconName]=\"'Navigation_Control_Tag--Cross_24px'\"\n          ></moz-icon\n          ><span class=\"mc-autocomplete__clear-text\">{{ labelClearButton }}</span>\n        </button>\n      </div>\n    </div>\n  </moz-listbox>\n</div>\n<div class=\"mc-autocomplete__error\" *ngIf=\"invalid\">\n  {{ errorContentText }}\n</div>\n<div class=\"mc-autocomplete__taglist\" *ngIf=\"showTagList && multiple && !openState\">\n  <moz-taglist\n    #taglist\n    (removeTag)=\"removeTagEvent($event)\"\n    [tagItems]=\"getTagItemsFromSelectedItems()\"\n    [max]=\"maxShowingSelectedTags\"\n    [layerTagsTitle]=\"layerTagsTitle\"\n    [layerTagsIcon]=\"layerTagsIcon\"\n  ></moz-taglist>\n</div>\n", styles: [".mc-left-icon-input{position:relative}.mc-left-icon-input__icon{position:absolute;z-index:1;top:50%;transform:translateY(-50%);fill:#666;pointer-events:none}.mc-left-icon-input .mc-left-icon-input__icon{left:.75rem;top:50%;width:1.5rem;height:1.5rem}.mc-left-icon-input .mc-left-icon-input__input{padding-left:2.9375rem}.mc-left-icon-input--s .mc-left-icon-input__icon{left:.5rem;top:50%;width:1.5rem;height:1.5rem}.mc-left-icon-input--s .mc-left-icon-input__input{padding-left:2.4375rem}.mc-text-input{font-family:Roboto,sans-serif;font-weight:400;box-sizing:border-box;outline:none;appearance:none;padding:0;margin:0;box-shadow:none;border:none;font-size:1rem;line-height:1.375;min-height:3rem;padding:.75rem .6875rem;transition:box-shadow .2s ease;display:block;width:100%;position:relative;border:1px solid #666666;color:#191919;background-color:#fff;border-radius:4px}.mc-text-input[type=number]::-webkit-inner-spin-button,.mc-text-input[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}.mc-text-input[type=number]{-moz-appearance:textfield}.mc-text-input[type=search]::-webkit-search-decoration:hover,.mc-text-input[type=search]::-webkit-search-cancel-button:hover{cursor:pointer}.mc-text-input::placeholder{font-size:1rem;line-height:1.375}.mc-text-input::placeholder{margin:0;color:#666;opacity:1}.mc-text-input.is-valid,.mc-text-input.is-invalid{background-repeat:no-repeat;background-size:1.5rem 1.5rem;background-position:right .4375rem center;padding-right:2.5rem}.mc-text-input.is-valid{border-color:#46a610;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1.5rem' width='1.5rem' fill='%2346a610' viewBox='0 0 24 24'%3E%3Cpath d='M12 4a8 8 0 11-8 8 8 8 0 018-8m0-2a10 10 0 1010 10A10 10 0 0012 2z'/%3E%3Cpath d='M10.73 15.75a1 1 0 01-.68-.26l-3-2.74a1 1 0 011.36-1.47l2.25 2.08 4.36-4.42a1 1 0 111.42 1.41l-5 5.1a1 1 0 01-.71.3z'/%3E%3C/svg%3E\")}.mc-text-input.is-valid:hover,.mc-text-input.is-valid.is-hover{border-color:#035010}.mc-text-input.is-invalid{border-color:#c61112;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1.5rem' width='1.5rem' viewBox='0 0 24 24' fill='%23c61112'%3E%3Cpath d='M12 2a10 10 0 1010 10A10 10 0 0012 2zm0 18a8 8 0 118-8 8 8 0 01-8 8z'/%3E%3Cpath d='M12 7a1 1 0 00-1 1v4.38a1 1 0 002 0V8a1 1 0 00-1-1z'/%3E%3Ccircle cx='12' cy='16' r='1'/%3E%3C/svg%3E\")}.mc-text-input.is-invalid:hover,.mc-text-input.is-invalid.is-hover{border-color:#530000}.mc-text-input:hover{border-color:#191919}.mc-text-input:focus{box-shadow:0 0 0 .125rem #fff,0 0 0 .25rem #758992}.mc-text-input:disabled{background:#e6e6e6;border-color:#e6e6e6;color:#666;cursor:not-allowed}.mc-text-input--s{font-size:.875rem;line-height:1.2857142857;min-height:2rem;padding:.375rem .4375rem}.mc-text-input--s::placeholder{font-size:.875rem;line-height:1.2857142857}@media screen and (min-width: 680px){.mc-text-input--s\\@from-m{font-size:.875rem;line-height:1.2857142857;min-height:2rem;padding:.375rem .4375rem}.mc-text-input--s\\@from-m::placeholder{font-size:.875rem;line-height:1.2857142857}}@media screen and (min-width: 1024px){.mc-text-input--s\\@from-l{font-size:.875rem;line-height:1.2857142857;min-height:2rem;padding:.375rem .4375rem}.mc-text-input--s\\@from-l::placeholder{font-size:.875rem;line-height:1.2857142857}}@media screen and (min-width: 1280px){.mc-text-input--s\\@from-xl{font-size:.875rem;line-height:1.2857142857;min-height:2rem;padding:.375rem .4375rem}.mc-text-input--s\\@from-xl::placeholder{font-size:.875rem;line-height:1.2857142857}}@media screen and (min-width: 1920px){.mc-text-input--s\\@from-xxl{font-size:.875rem;line-height:1.2857142857;min-height:2rem;padding:.375rem .4375rem}.mc-text-input--s\\@from-xxl::placeholder{font-size:.875rem;line-height:1.2857142857}}.mc-text-input--m{font-size:1rem;line-height:1.375;min-height:3rem;padding:.75rem .6875rem}.mc-text-input--m::placeholder{font-size:1rem;line-height:1.375}@media screen and (min-width: 680px){.mc-text-input--m\\@from-m{font-size:1rem;line-height:1.375;min-height:3rem;padding:.75rem .6875rem}.mc-text-input--m\\@from-m::placeholder{font-size:1rem;line-height:1.375}}@media screen and (min-width: 1024px){.mc-text-input--m\\@from-l{font-size:1rem;line-height:1.375;min-height:3rem;padding:.75rem .6875rem}.mc-text-input--m\\@from-l::placeholder{font-size:1rem;line-height:1.375}}@media screen and (min-width: 1280px){.mc-text-input--m\\@from-xl{font-size:1rem;line-height:1.375;min-height:3rem;padding:.75rem .6875rem}.mc-text-input--m\\@from-xl::placeholder{font-size:1rem;line-height:1.375}}@media screen and (min-width: 1920px){.mc-text-input--m\\@from-xxl{font-size:1rem;line-height:1.375;min-height:3rem;padding:.75rem .6875rem}.mc-text-input--m\\@from-xxl::placeholder{font-size:1rem;line-height:1.375}}.mc-listbox{background-color:#fff;border:1px solid #666666;border-radius:3px;overflow-y:auto;max-height:var(--listbox-height, 13.8125rem);max-width:var(--listbox-maxwidth, none);min-width:var(--listbox-minwidth, 18rem);width:var(--listbox-width, auto)}.mc-listbox::-webkit-scrollbar{background-color:#e6e6e6;width:.25rem}.mc-listbox::-webkit-scrollbar-thumb{background:#666666}.mc-listbox__list{list-style:none;margin:0;padding-left:0}.mc-listbox__tile{align-items:center;display:flex;gap:.5rem;height:3rem;justify-content:flex-start;padding-left:.75rem;padding-right:.75rem;position:relative}.mc-listbox__tile:not(.mc-listbox__tile--empty):not(.is-disabled):hover{background-color:#e6e6e6;box-shadow:inset 9px 0 0 -7px #191919}.mc-listbox__tile--danger{color:#c61112}.mc-listbox__tile--empty{color:#666;justify-content:center}.mc-listbox__tile--empty .mc-listbox__label{cursor:default}.mc-listbox__tile.is-disabled{box-shadow:none;background-color:#ccc;color:#666;pointer-events:none}.mc-listbox__flag,.mc-listbox__icon,.mc-listbox__logo{height:2rem;width:2rem}.mc-listbox__flag{font-size:1.4375rem;line-height:1.3913043478;text-align:center}.mc-listbox__icon{fill:#666}.mc-listbox__label{color:currentColor;cursor:pointer;white-space:nowrap}button.mc-listbox__label{background:none;border:none;padding:0;font-size:inherit;font-family:inherit}.mc-listbox__label:after{content:\"\";position:absolute;inset:0;z-index:2}.mc-listbox__input{margin-left:auto;order:1}.mc-listbox--left{right:0}.mc-listbox:not(.mc-listbox--multi) .mc-listbox__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-listbox--options .mc-listbox__tile:not(:last-child){border-bottom:1px solid #b3b3b3}.mc-listbox--options .mc-listbox__tile.is-selected .mc-listbox__label:before{visibility:visible}.mc-listbox--options .mc-listbox__tile.is-selected.is-disabled .mc-listbox__label:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\")}.mc-listbox--options .mc-listbox__input:checked+.mc-listbox__label:before{visibility:visible}.mc-listbox--options .mc-listbox__input:checked:disabled+.mc-listbox__label:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\")}.mc-listbox--options .mc-listbox__label:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23191919' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\");background-position:center;background-repeat:no-repeat;background-size:1.5rem;content:\"\";height:1.5rem;position:absolute;right:.75rem;top:0;transform:translateY(50%);width:1.5rem;visibility:hidden}.mc-listbox--actions{--listbox-height: auto;--listbox-minwidth: px-to-rem(278)}.mc-listbox--actions .mc-listbox__list:not(:last-child){border-bottom:1px solid #b3b3b3}.mc-listbox--actions .mc-listbox__list:first-child{padding-top:.4375rem;padding-bottom:.5rem}.mc-listbox--actions .mc-listbox__list:last-child{padding-top:.5rem;padding-bottom:.4375rem}.mc-listbox--actions .mc-listbox__list:not(:first-child):not(:last-child){padding-top:.5rem;padding-bottom:.5rem}.mc-listbox--overlay{position:absolute;z-index:10}.mc-loader{color:#007f8c;align-items:center;display:inline-flex;flex-direction:column}.mc-loader .mc-loader__spinner{height:2rem;width:2rem}.mc-loader .mc-loader__path{stroke-width:4}.mc-loader .mc-loader__path{stroke:currentColor}.mc-loader__spinner:not(:only-child){margin-bottom:1rem}.mc-loader__icon{animation:rotate-loader 2s linear infinite;transform-origin:center}.mc-loader__path{fill:none;stroke-dasharray:1,200;stroke-dashoffset:0;stroke-linecap:round;animation:animate-dash-loader 2s ease-in-out infinite}.mc-loader__text{font-size:1rem;line-height:1.375;color:currentColor}.mc-loader--s .mc-loader__spinner{height:1.5rem;width:1.5rem}.mc-loader--s .mc-loader__path{stroke-width:4}.mc-loader--l .mc-loader__spinner{height:4rem;width:4rem}.mc-loader--l .mc-loader__path{stroke-width:8}.mc-loader--dark{color:#191919}.mc-loader--dark .mc-loader__path{stroke:currentColor}.mc-loader--light{color:#fff}.mc-loader--light .mc-loader__path{stroke:currentColor}@keyframes rotate-loader{0%{transform:rotate(0)}to{transform:rotate(270deg)}}@keyframes animate-dash-loader{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}.mc-autocomplete{align-self:start;position:relative;min-width:18rem;max-width:var(--autocomplete-width, auto);width:100%}.mc-autocomplete__main{position:relative}.mc-autocomplete__tag,.mc-autocomplete__tools{position:absolute;top:50%;transform:translateY(-50%);z-index:2}.mc-autocomplete__tag{left:2.75rem}.mc-autocomplete__trigger{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mc-autocomplete__tools{align-items:center;background-color:#fff;display:flex;gap:.5rem;justify-content:flex-end;right:.75rem}.is-valid+.mc-autocomplete__tools,.is-invalid+.mc-autocomplete__tools{right:2.5rem}.mc-autocomplete__clear{margin:0;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;padding:0;box-shadow:0 0 0 0 transparent;transition:box-shadow .15s ease;background:none;border-radius:50%}.mc-autocomplete__clear:focus{box-shadow:0 0 0 2px #758992}.mc-autocomplete__clear,.mc-autocomplete__clear-icon{height:1.5rem;width:1.5rem}.mc-autocomplete__clear-icon{fill:#666}.mc-autocomplete__clear-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-autocomplete__error{font-size:.875rem;line-height:1.2857142857;color:#c61112;display:inline-block;margin-top:.25rem}.mc-autocomplete--multi .mc-autocomplete__trigger{padding-left:calc(2.9375rem + var(--autocomplete-tag-width, 0px))}.mc-autocomplete__taglist{margin-top:1rem}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { listboxItems: [{
                 type: Input
             }], multiple: [{
@@ -1432,6 +1436,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Output
             }], scrollEnd: [{
                 type: Output
+            }], isOpen: [{
+                type: Output
             }], taglistComponent: [{
                 type: ViewChild,
                 args: ['taglist', { static: false }]
@@ -2400,6 +2406,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 class MozDatatableSelectionComponent {
     constructor(ref) {
         this.ref = ref;
+        this.allowAllSelected = true;
         this.updateSelectionAllEmitter = new EventEmitter();
         this.isIndeterminate = false;
     }
@@ -2408,38 +2415,13 @@ class MozDatatableSelectionComponent {
             this.updateSelection();
         }
     }
-    updateSelection() {
-        if (this.selectionSettings && this.rowData) {
-            this.rowData
-                ?.filter((row) => !row.disableSelection &&
-                row.selected &&
-                this.selectionSettings?.selectedIds.filter((selectedRow) => {
-                    return (!this.selectionSettings?.allSelected &&
-                        this.selectionSettings &&
-                        selectedRow === row[this.selectionSettings.selectionIdentifierFieldKey]);
-                }).length === 0)
-                .forEach((row) => {
-                this.selectionSettings?.selectedIds.push(row[this.selectionSettings.selectionIdentifierFieldKey]);
-            });
-            if ((this.selectionSettings?.selectedIds || []).length ===
-                this.selectionSettings.totalSelectableItems) {
-                this.selectionSettings.allSelected = true;
-                this.selectionSettings.selectedIds = [];
-                this.selectionSettings.excludedIds = [];
-            }
-            this.isIndeterminate = this.isSelectionIndeterminate();
-            this.selectionSettings.allSelected = this.isAllPageRowAreSelected();
-            this.ref.markForCheck();
-        }
-    }
     selectAll() {
         if (this.selectionSettings) {
             this.selectionSettings.excludedIds = [];
             this.selectionSettings.selectedIds = [];
-            this.selectionSettings.allSelected = true;
             this.updateSelectedValueOnRowData(true);
             this.isIndeterminate = this.isSelectionIndeterminate();
-            this.selectionSettings.allSelected = this.isAllPageRowAreSelected();
+            this.selectionSettings.allSelected = true;
             this.updateSelectionAllEmitter.emit(this.selectionSettings);
             this.ref.markForCheck();
         }
@@ -2448,21 +2430,15 @@ class MozDatatableSelectionComponent {
         if (this.selectionSettings) {
             this.selectionSettings.excludedIds = [];
             this.selectionSettings.selectedIds = [];
-            this.selectionSettings.allSelected = false;
             this.updateSelectedValueOnRowData(false);
             this.isIndeterminate = this.isSelectionIndeterminate();
-            this.selectionSettings.allSelected = this.isAllPageRowAreSelected();
+            this.selectionSettings.allSelected = false;
             this.updateSelectionAllEmitter.emit(this.selectionSettings);
             this.ref.markForCheck();
         }
     }
     isAllPageRowAreSelected() {
-        if (this.rowData) {
-            const selectedRows = this.rowData.filter((row) => !row.disableSelection && row.selected === true);
-            return (selectedRows.length === this.rowData.filter((row) => !row.disableSelection).length &&
-                this.rowData.filter((row) => !row.disableSelection).length > 0);
-        }
-        return false;
+        return this.canSwitchtoAllSelectedMode() || (this.selectionSettings?.allSelected ?? false);
     }
     onUdpateSelectionRow(row) {
         this.handleCountItemSelection(row);
@@ -2478,7 +2454,7 @@ class MozDatatableSelectionComponent {
                 if (row.selected) {
                     this.selectionSettings.excludedIds = [
                         ...this.selectionSettings.excludedIds.filter((deselectedId) => {
-                            return deselectedId !== row[selectionIdentifierFieldKey];
+                            return deselectedId !== '' + row[selectionIdentifierFieldKey];
                         }),
                     ];
                 }
@@ -2486,12 +2462,12 @@ class MozDatatableSelectionComponent {
                     if (this.paginationEnabled) {
                         this.selectionSettings.excludedIds = [
                             ...this.selectionSettings.excludedIds,
-                            row[selectionIdentifierFieldKey],
+                            '' + row[selectionIdentifierFieldKey],
                         ];
                     }
                     else {
                         this.selectionSettings.selectedIds = [
-                            ...this.selectionSettings.selectedIds.filter((selectedId) => selectedId !== row[selectionIdentifierFieldKey]),
+                            ...this.selectionSettings.selectedIds.filter((selectedId) => selectedId !== '' + row[selectionIdentifierFieldKey]),
                         ];
                         this.selectionSettings.allSelected = false;
                     }
@@ -2506,20 +2482,16 @@ class MozDatatableSelectionComponent {
                 if (row.selected) {
                     this.selectionSettings.selectedIds = [
                         ...this.selectionSettings.selectedIds,
-                        row[selectionIdentifierFieldKey],
+                        '' + row[selectionIdentifierFieldKey],
                     ];
-                    if (this.selectionSettings.selectedIds.length ===
-                        this.selectionSettings.totalSelectableItems) {
-                        if (this.paginationEnabled) {
-                            this.selectionSettings.selectedIds = [];
-                        }
-                        this.selectionSettings.allSelected = true;
+                    if (this.canSwitchtoAllSelectedMode()) {
+                        this.switchtoAllSelectedMode();
                     }
                 }
                 else {
                     this.selectionSettings.selectedIds = [
                         ...this.selectionSettings.selectedIds.filter((selectedId) => {
-                            return selectedId !== row[selectionIdentifierFieldKey];
+                            return selectedId !== '' + row[selectionIdentifierFieldKey];
                         }),
                     ];
                 }
@@ -2528,37 +2500,39 @@ class MozDatatableSelectionComponent {
             this.ref.markForCheck();
         }
     }
+    canSwitchtoAllSelectedMode() {
+        if (this.selectionSettings != null) {
+            return (this.selectionSettings.selectedIds.length === this.selectionSettings.totalSelectableItems &&
+                this.allowAllSelected);
+        }
+        return false;
+    }
+    switchtoAllSelectedMode() {
+        if (this.selectionSettings != null) {
+            if (this.paginationEnabled) {
+                this.selectionSettings.selectedIds = [];
+            }
+            this.selectionSettings.allSelected = true;
+        }
+    }
     handleCountAllSelection(allPageRowsSelected) {
         if (this.selectionSettings) {
             const selectionIdentifierFieldKey = this.selectionSettings.selectionIdentifierFieldKey;
             if (this.selectionSettings?.allSelected) {
                 if (this.isIndeterminate && this.rowData) {
-                    this.rowData
-                        .filter((row) => !row.disableSelection)
-                        .filter((row) => !(this.selectionSettings?.selectedIds || []).includes(row[selectionIdentifierFieldKey]))
-                        .forEach((row) => {
-                        if (this.selectionSettings) {
-                            this.selectionSettings.selectedIds = [
-                                ...this.selectionSettings.selectedIds,
-                                row[selectionIdentifierFieldKey],
-                            ];
-                        }
-                    });
                     this.rowData
                         .filter((row) => !row.disableSelection)
                         .forEach((row) => {
                         if (this.selectionSettings) {
-                            const index = this.selectionSettings.excludedIds.indexOf(row[selectionIdentifierFieldKey], 0);
+                            const index = this.selectionSettings.excludedIds.indexOf('' + row[selectionIdentifierFieldKey], 0);
                             if (index > -1) {
                                 this.selectionSettings.excludedIds.splice(index, 1);
                                 this.selectionSettings.excludedIds = [...this.selectionSettings.excludedIds];
                             }
                         }
                     });
-                    if (this.selectionSettings.selectedIds.length ===
-                        this.selectionSettings.totalSelectableItems) {
-                        this.selectionSettings.allSelected = true;
-                        this.selectionSettings.selectedIds = [];
+                    if (this.canSwitchtoAllSelectedMode()) {
+                        this.switchtoAllSelectedMode();
                         this.rowData = this.rowData
                             ?.filter((row) => !row.disableSelection)
                             .map((row) => {
@@ -2573,10 +2547,14 @@ class MozDatatableSelectionComponent {
                             ...this.selectionSettings.excludedIds,
                             ...this.rowData
                                 .filter((row) => !row.disableSelection)
-                                .map((row) => row[selectionIdentifierFieldKey]),
+                                .map((row) => '' + row[selectionIdentifierFieldKey]),
                         ];
                         if (this.selectionSettings.excludedIds.length ===
                             this.selectionSettings.totalSelectableItems) {
+                            this.selectionSettings.excludedIds = [];
+                            this.selectionSettings.allSelected = false;
+                        }
+                        if (this.canSwitchtoAllSelectedMode()) {
                             this.selectionSettings.allSelected = false;
                             this.selectionSettings.selectedIds = [];
                             this.selectionSettings.excludedIds = [];
@@ -2594,36 +2572,35 @@ class MozDatatableSelectionComponent {
                 if (allPageRowsSelected && this.rowData) {
                     this.rowData
                         .filter((row) => !row.disableSelection)
-                        .filter((row) => !(this.selectionSettings?.selectedIds || []).includes(row[selectionIdentifierFieldKey]))
+                        .filter((row) => !(this.selectionSettings?.selectedIds || []).includes('' + row[selectionIdentifierFieldKey]))
                         .forEach((row) => {
                         if (this.selectionSettings) {
                             this.selectionSettings.selectedIds = [
                                 ...this.selectionSettings.selectedIds,
-                                row[selectionIdentifierFieldKey],
+                                '' + row[selectionIdentifierFieldKey],
                             ];
                         }
                     });
-                    if (this.selectionSettings.selectedIds.length ===
-                        this.selectionSettings.totalSelectableItems) {
-                        if (this.paginationEnabled) {
-                            this.selectionSettings.selectedIds = [];
-                        }
-                        this.selectionSettings.allSelected = true;
+                    if (this.canSwitchtoAllSelectedMode()) {
+                        this.switchtoAllSelectedMode();
                     }
                 }
                 else {
                     if (this.rowData) {
-                        this.rowData
+                        const allRowOnPage = this.rowData
                             .filter((row) => !row.disableSelection)
-                            .forEach((row) => {
-                            if (this.selectionSettings) {
-                                this.selectionSettings.selectedIds = [
-                                    ...this.selectionSettings.selectedIds.filter((selectedId) => {
-                                        return selectedId !== row[selectionIdentifierFieldKey];
-                                    }),
-                                ];
-                            }
-                        });
+                            .map((row) => '' + row[selectionIdentifierFieldKey]);
+                        const allRowSelectedOnPage = this.rowData
+                            .filter((row) => !row.disableSelection && row.selected)
+                            .map((row) => '' + row[selectionIdentifierFieldKey]);
+                        const rowSelectedOnOtherPages = this.selectionSettings.selectedIds.filter((element) => !allRowOnPage.includes(element));
+                        this.selectionSettings.selectedIds = [
+                            ...rowSelectedOnOtherPages,
+                            ...allRowSelectedOnPage,
+                        ];
+                        if (this.canSwitchtoAllSelectedMode()) {
+                            this.switchtoAllSelectedMode();
+                        }
                     }
                 }
             }
@@ -2631,6 +2608,29 @@ class MozDatatableSelectionComponent {
         this.isIndeterminate = this.isSelectionIndeterminate();
         this.ref.markForCheck();
     }
+    updateSelection() {
+        if (this.selectionSettings && this.rowData) {
+            if (this.selectionSettings?.selectedIds) {
+                this.rowData.forEach((row) => {
+                    const existInSelectedIds = this.selectionSettings?.selectedIds.includes('' + row[this.selectionSettings.selectionIdentifierFieldKey]) ?? false;
+                    const existInExcludedIds = this.selectionSettings?.excludedIds.includes('' + row[this.selectionSettings.selectionIdentifierFieldKey]) ?? false;
+                    if ((this.selectionSettings?.allSelected || existInSelectedIds) && !existInExcludedIds) {
+                        row.selected = true;
+                    }
+                    else {
+                        row.selected = false;
+                    }
+                });
+            }
+            if (this.canSwitchtoAllSelectedMode()) {
+                this.switchtoAllSelectedMode();
+                this.selectionSettings.excludedIds = [];
+            }
+            this.isIndeterminate = this.isSelectionIndeterminate();
+            this.selectionSettings.allSelected = this.isAllPageRowAreSelected();
+            this.ref.markForCheck();
+        }
+    }
     updateSelectedValueOnRowData(selected) {
         this.rowData = this.rowData
             ?.filter((row) => !row.disableSelection)
@@ -2649,7 +2649,7 @@ class MozDatatableSelectionComponent {
                         return row[this.selectionSettings.selectionIdentifierFieldKey];
                     }
                 })
-                    .every((item) => (this.selectionSettings?.selectedIds || []).includes(item))) ||
+                    .every((item) => (this.selectionSettings?.selectedIds || []).includes('' + item))) ||
                 (!this.selectionSettings.allSelected && this.selectionSettings.selectedIds.length === 0) ||
                 (this.selectionSettings.allSelected &&
                     this.rowData &&
@@ -2659,8 +2659,8 @@ class MozDatatableSelectionComponent {
                             return row[this.selectionSettings.selectionIdentifierFieldKey];
                         }
                     })
-                        .some((id) => (this.selectionSettings?.excludedIds || []).includes(id))) ||
-                (this.selectionSettings.allSelected && this.selectionSettings.excludedIds.length === 0)) {
+                        .some((id) => (this.selectionSettings?.excludedIds || []).includes('' + id))) ||
+                this.canSwitchtoAllSelectedMode()) {
                 return false;
             }
             return true;
@@ -2669,7 +2669,7 @@ class MozDatatableSelectionComponent {
     }
 }
 MozDatatableSelectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MozDatatableSelectionComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-MozDatatableSelectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MozDatatableSelectionComponent, selector: "moz-datatable-selection", inputs: { selectionSettings: "selectionSettings", paginationEnabled: "paginationEnabled", rowData: "rowData" }, outputs: { updateSelectionAllEmitter: "updateSelectionAllEmitter" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"mc-datatable__selection\">\n  <ng-container *ngIf=\"selectionSettings && selectionSettings.labels && paginationEnabled\">\n    <div class=\"mc-datatable__topbar-selection\">\n      <ng-container *ngIf=\"selectionSettings.selectedIds.length || selectionSettings.allSelected\">\n        <div class=\"center-selection-label\">\n          <div *ngIf=\"selectionSettings.allSelected; else notAllSelected\">\n            <ng-container *ngIf=\"selectionSettings.excludedIds.length > 0; else exludedIdsEmpty\">\n              <span>\n                <b\n                  >{{\n                    selectionSettings.totalSelectableItems - selectionSettings.excludedIds.length\n                  }}\n                  {{ selectionSettings.labels.selectedLabel || 'selected' }}</b\n                >\n                <ng-container\n                  *ngIf=\"\n                    selectionSettings.totalSelectableItems -\n                      selectionSettings.excludedIds.length ===\n                      1;\n                    else plurialAllSelected\n                  \"\n                >\n                  {{ selectionSettings.labels.rowOnPageLabel || 'row on the page. ' }}-\n                </ng-container>\n                <ng-template #plurialAllSelected>\n                  {{ selectionSettings.labels.rowsOnPageLabel || 'rows on the page. ' }}-\n                </ng-template>\n\n                {{ selectionSettings.labels.rowsOnPageLabel || 'rows on the page. ' }}-\n                <a href=\"/\" (click)=\"selectAll(); $event.preventDefault()\">\n                  {{ selectionSettings.labels.selectAllLabel || 'Select all' }}\n                  {{ selectionSettings.totalSelectableItems }}\n                  {{ selectionSettings.labels.rowsOfTableLabel || 'rows of the table' }}\n                </a>\n              </span>\n            </ng-container>\n            <ng-template #exludedIdsEmpty>\n              <span>\n                {{\n                  selectionSettings.labels.rowsSelectedLabel ||\n                    'All rows are selected in the table.'\n                }}\n                -\n                <a href=\"/\" (click)=\"clearAll(); $event.preventDefault()\">\n                  {{ selectionSettings.labels.clearSelectionLabel || 'Clear selection' }}\n                </a>\n              </span>\n            </ng-template>\n          </div>\n          <ng-template #notAllSelected>\n            <span>\n              <b\n                >{{ selectionSettings.selectedIds.length }}\n                {{ selectionSettings.labels.selectedLabel || 'selected' }}</b\n              >\n              <ng-container\n                *ngIf=\"selectionSettings.selectedIds && selectionSettings.selectedIds.length > 0\"\n              >\n                <ng-container\n                  *ngIf=\"\n                    selectionSettings.selectedIds && selectionSettings.selectedIds.length === 1;\n                    else plurialNotAllSelected\n                  \"\n                >\n                  {{ selectionSettings.labels.rowOnPageLabel || 'row on the page. ' }}-\n                </ng-container>\n                <ng-template #plurialNotAllSelected>\n                  {{ selectionSettings.labels.rowsOnPageLabel || 'rows on the page. ' }}-\n                </ng-template>\n                <a href=\"/\" (click)=\"selectAll(); $event.preventDefault()\">\n                  {{ selectionSettings.labels.selectAllLabel || 'Select all' }}\n                  {{ selectionSettings.totalSelectableItems }}\n                  {{ selectionSettings.labels.rowsOfTableLabel || 'rows of the table' }}\n                </a>\n              </ng-container>\n            </span>\n          </ng-template>\n        </div>\n      </ng-container>\n    </div>\n  </ng-container>\n</div>\n", styles: [".center-selection-label{margin-bottom:1rem;background-color:#fff;height:34px;text-align:center;align-items:center;display:flex;justify-content:center;border-radius:.25rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MozDatatableSelectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MozDatatableSelectionComponent, selector: "moz-datatable-selection", inputs: { selectionSettings: "selectionSettings", paginationEnabled: "paginationEnabled", allowAllSelected: "allowAllSelected", rowData: "rowData" }, outputs: { updateSelectionAllEmitter: "updateSelectionAllEmitter" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"mc-datatable__selection\">\n  <ng-container *ngIf=\"selectionSettings && selectionSettings.labels && paginationEnabled\">\n    <div class=\"mc-datatable__topbar-selection\">\n      <ng-container *ngIf=\"selectionSettings.selectedIds.length || selectionSettings.allSelected\">\n        <div class=\"center-selection-label\">\n          <div *ngIf=\"selectionSettings.allSelected; else notAllSelected\">\n            <ng-container *ngIf=\"selectionSettings.excludedIds.length > 0; else exludedIdsEmpty\">\n              <span>\n                <b\n                  >{{\n                    selectionSettings.totalSelectableItems - selectionSettings.excludedIds.length\n                  }}\n                  {{ selectionSettings.labels.selectedLabel || 'selected' }}</b\n                >\n                <ng-container\n                  *ngIf=\"\n                    selectionSettings.totalSelectableItems -\n                      selectionSettings.excludedIds.length ===\n                      1;\n                    else plurialAllSelected\n                  \"\n                >\n                  {{ selectionSettings.labels.rowOnPageLabel || 'row on the page. ' }}-\n                </ng-container>\n                <ng-template #plurialAllSelected>\n                  {{ selectionSettings.labels.rowsOnPageLabel || 'rows on the page. ' }}-\n                </ng-template>\n\n                {{ selectionSettings.labels.rowsOnPageLabel || 'rows on the page. ' }}-\n                <a href=\"/\" (click)=\"selectAll(); $event.preventDefault()\">\n                  {{ selectionSettings.labels.selectAllLabel || 'Select all' }}\n                  {{ selectionSettings.totalSelectableItems }}\n                  {{ selectionSettings.labels.rowsOfTableLabel || 'rows of the table' }}\n                </a>\n              </span>\n            </ng-container>\n            <ng-template #exludedIdsEmpty>\n              <span>\n                {{\n                  selectionSettings.labels.rowsSelectedLabel ||\n                    'All rows are selected in the table.'\n                }}\n                -\n                <a href=\"/\" (click)=\"clearAll(); $event.preventDefault()\">\n                  {{ selectionSettings.labels.clearSelectionLabel || 'Clear selection' }}\n                </a>\n              </span>\n            </ng-template>\n          </div>\n          <ng-template #notAllSelected>\n            <span>\n              <b\n                >{{ selectionSettings.selectedIds.length }}\n                {{ selectionSettings.labels.selectedLabel || 'selected' }}</b\n              >\n              <ng-container\n                *ngIf=\"selectionSettings.selectedIds && selectionSettings.selectedIds.length > 0\"\n              >\n                <ng-container\n                  *ngIf=\"\n                    selectionSettings.selectedIds && selectionSettings.selectedIds.length === 1;\n                    else plurialNotAllSelected\n                  \"\n                >\n                  {{ selectionSettings.labels.rowOnPageLabel || 'row on the page. ' }}-\n                </ng-container>\n                <ng-template #plurialNotAllSelected>\n                  {{ selectionSettings.labels.rowsOnPageLabel || 'rows on the page. ' }}-\n                </ng-template>\n                <a href=\"/\" (click)=\"selectAll(); $event.preventDefault()\">\n                  {{ selectionSettings.labels.selectAllLabel || 'Select all' }}\n                  {{ selectionSettings.totalSelectableItems }}\n                  {{ selectionSettings.labels.rowsOfTableLabel || 'rows of the table' }}\n                </a>\n              </ng-container>\n            </span>\n          </ng-template>\n        </div>\n      </ng-container>\n    </div>\n  </ng-container>\n</div>\n", styles: [".center-selection-label{margin-bottom:1rem;background-color:#fff;height:34px;text-align:center;align-items:center;display:flex;justify-content:center;border-radius:.25rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MozDatatableSelectionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'moz-datatable-selection', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mc-datatable__selection\">\n  <ng-container *ngIf=\"selectionSettings && selectionSettings.labels && paginationEnabled\">\n    <div class=\"mc-datatable__topbar-selection\">\n      <ng-container *ngIf=\"selectionSettings.selectedIds.length || selectionSettings.allSelected\">\n        <div class=\"center-selection-label\">\n          <div *ngIf=\"selectionSettings.allSelected; else notAllSelected\">\n            <ng-container *ngIf=\"selectionSettings.excludedIds.length > 0; else exludedIdsEmpty\">\n              <span>\n                <b\n                  >{{\n                    selectionSettings.totalSelectableItems - selectionSettings.excludedIds.length\n                  }}\n                  {{ selectionSettings.labels.selectedLabel || 'selected' }}</b\n                >\n                <ng-container\n                  *ngIf=\"\n                    selectionSettings.totalSelectableItems -\n                      selectionSettings.excludedIds.length ===\n                      1;\n                    else plurialAllSelected\n                  \"\n                >\n                  {{ selectionSettings.labels.rowOnPageLabel || 'row on the page. ' }}-\n                </ng-container>\n                <ng-template #plurialAllSelected>\n                  {{ selectionSettings.labels.rowsOnPageLabel || 'rows on the page. ' }}-\n                </ng-template>\n\n                {{ selectionSettings.labels.rowsOnPageLabel || 'rows on the page. ' }}-\n                <a href=\"/\" (click)=\"selectAll(); $event.preventDefault()\">\n                  {{ selectionSettings.labels.selectAllLabel || 'Select all' }}\n                  {{ selectionSettings.totalSelectableItems }}\n                  {{ selectionSettings.labels.rowsOfTableLabel || 'rows of the table' }}\n                </a>\n              </span>\n            </ng-container>\n            <ng-template #exludedIdsEmpty>\n              <span>\n                {{\n                  selectionSettings.labels.rowsSelectedLabel ||\n                    'All rows are selected in the table.'\n                }}\n                -\n                <a href=\"/\" (click)=\"clearAll(); $event.preventDefault()\">\n                  {{ selectionSettings.labels.clearSelectionLabel || 'Clear selection' }}\n                </a>\n              </span>\n            </ng-template>\n          </div>\n          <ng-template #notAllSelected>\n            <span>\n              <b\n                >{{ selectionSettings.selectedIds.length }}\n                {{ selectionSettings.labels.selectedLabel || 'selected' }}</b\n              >\n              <ng-container\n                *ngIf=\"selectionSettings.selectedIds && selectionSettings.selectedIds.length > 0\"\n              >\n                <ng-container\n                  *ngIf=\"\n                    selectionSettings.selectedIds && selectionSettings.selectedIds.length === 1;\n                    else plurialNotAllSelected\n                  \"\n                >\n                  {{ selectionSettings.labels.rowOnPageLabel || 'row on the page. ' }}-\n                </ng-container>\n                <ng-template #plurialNotAllSelected>\n                  {{ selectionSettings.labels.rowsOnPageLabel || 'rows on the page. ' }}-\n                </ng-template>\n                <a href=\"/\" (click)=\"selectAll(); $event.preventDefault()\">\n                  {{ selectionSettings.labels.selectAllLabel || 'Select all' }}\n                  {{ selectionSettings.totalSelectableItems }}\n                  {{ selectionSettings.labels.rowsOfTableLabel || 'rows of the table' }}\n                </a>\n              </ng-container>\n            </span>\n          </ng-template>\n        </div>\n      </ng-container>\n    </div>\n  </ng-container>\n</div>\n", styles: [".center-selection-label{margin-bottom:1rem;background-color:#fff;height:34px;text-align:center;align-items:center;display:flex;justify-content:center;border-radius:.25rem}\n"] }]
@@ -2677,6 +2677,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], paginationEnabled: [{
                 type: Input
+            }], allowAllSelected: [{
+                type: Input
             }], rowData: [{
                 type: Input
             }], updateSelectionAllEmitter: [{
@@ -2772,10 +2774,10 @@ class MozDatatableFooterComponent {
     }
 }
 MozDatatableFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MozDatatableFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MozDatatableFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MozDatatableFooterComponent, selector: "moz-datatable-footer", inputs: { footerSettings: "footerSettings", isLoading: "isLoading" }, outputs: { rowPerPageChangeEmitter: "rowPerPageChangeEmitter", pageChangeEmitter: "pageChangeEmitter" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"mc-datatable__footer\">\n  <div class=\"mc-datatable__select\">\n    <label for=\"selectRows\" class=\"mc-datatable__select-label\">{{\n      footerSettings?.labels?.rowPerPage || 'Rows per page'\n    }}</label>\n    <select\n      moz-select\n      id=\"selectRows\"\n      [(ngModel)]=\"selectedRowPerPage\"\n      (change)=\"rowPerPageChangeEmitter.emit(selectedRowPerPage)\"\n      [disabled]=\"calculateNumberOfPage() === 0 || isLoading || false\"\n    >\n      <option\n        *ngFor=\"let value of footerSettings?.pagination?.rowPerPage?.options\"\n        [ngValue]=\"value\"\n      >\n        {{ value }}\n      </option>\n    </select>\n  </div>\n  <div class=\"mc-datatable__count\" *ngIf=\"!isLoading\">\n    <strong>{{ calculateCountStart() }}-{{ calculateCountEnd() }}</strong> /\n    <strong\n      >{{ footerSettings?.pagination?.totalItems || 0 }}\n      {{ footerSettings?.labels?.items || 'Items' }}</strong\n    >\n  </div>\n  <div class=\"mc-datatable__pagination\">\n    <moz-pagination\n      [numberOfPages]=\"isLoading ? 0 : calculateNumberOfPage()\"\n      [(ngModel)]=\"currentPage\"\n      (pageChangeEvent)=\"pageChangeEmitter.emit(currentPage)\"\n      [pageLabel]=\"footerSettings?.labels?.page || 'Page'\"\n      [pageOfLabel]=\"footerSettings?.labels?.of || 'of'\"\n    >\n    </moz-pagination>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PaginationComponent, selector: "moz-pagination", inputs: ["numberOfPages", "light", "pageLabel", "pageOfLabel", "pageTitleMask"], outputs: ["pageChangeEvent"] }, { kind: "component", type: SelectComponent, selector: "select[moz-`select`]", inputs: ["size"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MozDatatableFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MozDatatableFooterComponent, selector: "moz-datatable-footer", inputs: { footerSettings: "footerSettings", isLoading: "isLoading" }, outputs: { rowPerPageChangeEmitter: "rowPerPageChangeEmitter", pageChangeEmitter: "pageChangeEmitter" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"mc-datatable__footer\">\n  <div class=\"mc-datatable__select\">\n    <label for=\"selectRows\" class=\"mc-datatable__select-label\">{{\n      footerSettings?.labels?.rowPerPage || 'Rows per page'\n    }}</label>\n    <select\n      moz-select\n      id=\"selectRows\"\n      size=\"s\"\n      [(ngModel)]=\"selectedRowPerPage\"\n      (change)=\"rowPerPageChangeEmitter.emit(selectedRowPerPage)\"\n      [disabled]=\"calculateNumberOfPage() === 0 || isLoading || false\"\n    >\n      <option\n        *ngFor=\"let value of footerSettings?.pagination?.rowPerPage?.options\"\n        [ngValue]=\"value\"\n      >\n        {{ value }}\n      </option>\n    </select>\n  </div>\n  <div class=\"mc-datatable__count\" *ngIf=\"!isLoading\">\n    <strong>{{ calculateCountStart() }}-{{ calculateCountEnd() }}</strong> /\n    <strong\n      >{{ footerSettings?.pagination?.totalItems || 0 }}\n      {{ footerSettings?.labels?.items || 'Items' }}</strong\n    >\n  </div>\n  <div class=\"mc-datatable__pagination\">\n    <moz-pagination\n      [numberOfPages]=\"isLoading ? 0 : calculateNumberOfPage()\"\n      [(ngModel)]=\"currentPage\"\n      (pageChangeEvent)=\"pageChangeEmitter.emit(currentPage)\"\n      [pageLabel]=\"footerSettings?.labels?.page || 'Page'\"\n      [pageOfLabel]=\"footerSettings?.labels?.of || 'of'\"\n    >\n    </moz-pagination>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PaginationComponent, selector: "moz-pagination", inputs: ["numberOfPages", "light", "pageLabel", "pageOfLabel", "pageTitleMask"], outputs: ["pageChangeEvent"] }, { kind: "component", type: SelectComponent, selector: "select[moz-`select`]", inputs: ["size"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MozDatatableFooterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'moz-datatable-footer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mc-datatable__footer\">\n  <div class=\"mc-datatable__select\">\n    <label for=\"selectRows\" class=\"mc-datatable__select-label\">{{\n      footerSettings?.labels?.rowPerPage || 'Rows per page'\n    }}</label>\n    <select\n      moz-select\n      id=\"selectRows\"\n      [(ngModel)]=\"selectedRowPerPage\"\n      (change)=\"rowPerPageChangeEmitter.emit(selectedRowPerPage)\"\n      [disabled]=\"calculateNumberOfPage() === 0 || isLoading || false\"\n    >\n      <option\n        *ngFor=\"let value of footerSettings?.pagination?.rowPerPage?.options\"\n        [ngValue]=\"value\"\n      >\n        {{ value }}\n      </option>\n    </select>\n  </div>\n  <div class=\"mc-datatable__count\" *ngIf=\"!isLoading\">\n    <strong>{{ calculateCountStart() }}-{{ calculateCountEnd() }}</strong> /\n    <strong\n      >{{ footerSettings?.pagination?.totalItems || 0 }}\n      {{ footerSettings?.labels?.items || 'Items' }}</strong\n    >\n  </div>\n  <div class=\"mc-datatable__pagination\">\n    <moz-pagination\n      [numberOfPages]=\"isLoading ? 0 : calculateNumberOfPage()\"\n      [(ngModel)]=\"currentPage\"\n      (pageChangeEvent)=\"pageChangeEmitter.emit(currentPage)\"\n      [pageLabel]=\"footerSettings?.labels?.page || 'Page'\"\n      [pageOfLabel]=\"footerSettings?.labels?.of || 'of'\"\n    >\n    </moz-pagination>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'moz-datatable-footer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mc-datatable__footer\">\n  <div class=\"mc-datatable__select\">\n    <label for=\"selectRows\" class=\"mc-datatable__select-label\">{{\n      footerSettings?.labels?.rowPerPage || 'Rows per page'\n    }}</label>\n    <select\n      moz-select\n      id=\"selectRows\"\n      size=\"s\"\n      [(ngModel)]=\"selectedRowPerPage\"\n      (change)=\"rowPerPageChangeEmitter.emit(selectedRowPerPage)\"\n      [disabled]=\"calculateNumberOfPage() === 0 || isLoading || false\"\n    >\n      <option\n        *ngFor=\"let value of footerSettings?.pagination?.rowPerPage?.options\"\n        [ngValue]=\"value\"\n      >\n        {{ value }}\n      </option>\n    </select>\n  </div>\n  <div class=\"mc-datatable__count\" *ngIf=\"!isLoading\">\n    <strong>{{ calculateCountStart() }}-{{ calculateCountEnd() }}</strong> /\n    <strong\n      >{{ footerSettings?.pagination?.totalItems || 0 }}\n      {{ footerSettings?.labels?.items || 'Items' }}</strong\n    >\n  </div>\n  <div class=\"mc-datatable__pagination\">\n    <moz-pagination\n      [numberOfPages]=\"isLoading ? 0 : calculateNumberOfPage()\"\n      [(ngModel)]=\"currentPage\"\n      (pageChangeEvent)=\"pageChangeEmitter.emit(currentPage)\"\n      [pageLabel]=\"footerSettings?.labels?.page || 'Page'\"\n      [pageOfLabel]=\"footerSettings?.labels?.of || 'of'\"\n    >\n    </moz-pagination>\n  </div>\n</div>\n" }]
         }], propDecorators: { footerSettings: [{
                 type: Input
             }], isLoading: [{
@@ -2853,6 +2855,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 class MozDatatableComponent {
     constructor() {
+        this.allowAllSelected = true;
+        this.tableSummary = 'Table displaying data';
         // FROM BODY DATATABLE
         this.rowClick = new EventEmitter();
         this.sortColumn = new EventEmitter();
@@ -2870,6 +2874,9 @@ class MozDatatableComponent {
         this.buildCustomHeaderMap();
         this.buildCustomContentMap();
     }
+    resetSelection() {
+        this.selectionComponent?.clearAll();
+    }
     buildCustomHeaderMap() {
         if (this.headerCellComponents) {
             this.headerCellComponents.forEach((header) => {
@@ -2964,16 +2971,20 @@ class MozDatatableComponent {
     }
 }
 MozDatatableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MozDatatableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MozDatatableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MozDatatableComponent, selector: "moz-datatable", inputs: { footerSettings: "footerSettings", selectionSettings: "selectionSettings", datatableSettings: "datatableSettings" }, outputs: { rowClick: "rowClick", sortColumn: "sortColumn", rowSelected: "rowSelected", rowAllSelected: "rowAllSelected", emptyBodyButtonClicked: "emptyBodyButtonClicked", pageChange: "pageChange", rowPerPageChange: "rowPerPageChange" }, queries: [{ propertyName: "expansionContentComponent", first: true, predicate: MozDatatableRowExpansionContentComponent, descendants: true }, { propertyName: "headerCellComponents", predicate: MozDatatableHeaderCellComponent }, { propertyName: "contentCellComponents", predicate: MozDatatableContentCellComponent }], viewQueries: [{ propertyName: "selectionComponent", first: true, predicate: MozDatatableSelectionComponent, descendants: true }, { propertyName: "thSelectionRef", first: true, predicate: ["thSelection"], descendants: true }, { propertyName: "thSubRowRef", first: true, predicate: ["thSubRow"], descendants: true }], ngImport: i0, template: "<div class=\"mc-datatable\" [ngClass]=\"{ ' mc-datatable-height': datatableSettings?.fixHeaderRow }\">\n  <div class=\"mc-datatable__header\">\n    <ng-content select=\"moz-datatable-caption\"></ng-content>\n    <div>\n      <moz-datatable-selection\n        [selectionSettings]=\"selectionSettings\"\n        [paginationEnabled]=\"datatableSettings?.activatePagination\"\n        [rowData]=\"datatableSettings?.rowData\"\n        (updateSelectionAllEmitter)=\"selectionAllRowEvent($event)\"\n      ></moz-datatable-selection>\n    </div>\n  </div>\n  <div\n    class=\"mc-datatable__container\"\n    [ngClass]=\"{ ' mc-datatable-height': datatableSettings?.fixHeaderRow }\"\n  >\n    <div\n      class=\"mc-datatable__main\"\n      [ngClass]=\"{ ' mc-datatable-height': datatableSettings?.fixHeaderRow }\"\n    >\n      <table class=\"mc-datatable__table\">\n        <thead [ngClass]=\"{ 'fix-header-row': datatableSettings?.fixHeaderRow }\">\n          <tr *ngIf=\"getColumns() && getColumns().length > 0\">\n            <th\n              class=\"mc-datatable__cell-checkbox moz-datatable__th mc-datatable__fix-first-column\"\n              *ngIf=\"\n                datatableSettings?.activateSelection &&\n                selectionComponent &&\n                selectionSettings &&\n                ((datatableSettings?.rowData || []).length > 0 || datatableSettings?.isLoading)\n              \"\n              #thSelection\n            >\n              <ng-container *ngIf=\"datatableSettings?.isLoading; else notLoadingCheckbox\">\n                <div class=\"skeleton-box mu-mb-100 checkbox-loading\"></div>\n              </ng-container>\n              <ng-template #notLoadingCheckbox>\n                <moz-checkbox\n                  (change)=\"\n                    selectionComponent.onUdpateSelectionAllPageRows($event);\n                    selectionRowEvent($event)\n                  \"\n                  [indeterminate]=\"selectionComponent.isIndeterminate\"\n                  [checked]=\"selectionSettings.allSelected && !selectionComponent.isIndeterminate\"\n                  [disabled]=\"datatableSettings?.isLoading || false\"\n                >\n                </moz-checkbox>\n              </ng-template>\n            </th>\n            <th\n              *ngIf=\"hasSubRow() && !datatableSettings?.isLoading\"\n              class=\"mc-datatable__fix-first-column\"\n              [style.left.px]=\"getStyleLeftForColumnFixed()\"\n              #thSubRow\n            ></th>\n            <ng-container *ngFor=\"let columnDef of getColumns()\">\n              <th\n                class=\"moz-datatable__th\"\n                *ngIf=\"!columnDef.hide\"\n                [ngClass]=\"{\n                  'mc-datatable__fix-first-column':\n                    datatableSettings?.fixFirstColumn &&\n                    getUnhiddenColumns()[0].field === columnDef.field\n                }\"\n                [style.left.px]=\"getLeftValueFixFirstColumn()\"\n              >\n                <ng-container *ngIf=\"datatableSettings?.isLoading; else notLoadingHeading\">\n                  <div class=\"skeleton-box mu-mb-100 cells-loading\"></div>\n                </ng-container>\n\n                <ng-template #notLoadingHeading>\n                  <div\n                    [mozDatatableSort]=\"columnDef\"\n                    [ngClass]=\"{ header: columnDef.sort }\"\n                    (sortEmitter)=\"sortEvent($event)\"\n                  >\n                    <ng-container\n                      *ngIf=\"\n                        getCustomHeader(columnDef.field) as customHeader;\n                        else defaultHeaderCell\n                      \"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          customHeader;\n                          context: {\n                            $implicit: {\n                              content: columnDef\n                            }\n                          }\n                        \"\n                      ></ng-container>\n                    </ng-container>\n                    <ng-template #defaultHeaderCell>\n                      {{ columnDef.headerName | uppercase }}\n                    </ng-template>\n                  </div>\n                </ng-template>\n              </th>\n            </ng-container>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container\n            *ngIf=\"\n              (datatableSettings?.rowData?.length || 0) > 0 || datatableSettings?.isLoading;\n              else emptyBody\n            \"\n          >\n            <ng-container *ngFor=\"let row of getFields(); index as i\">\n              <tr class=\"mc-datatable__row-parent\" (click)=\"rowClickEvent($event, row)\">\n                <td\n                  class=\"mc-datatable__fix-first-column\"\n                  *ngIf=\"datatableSettings?.activateSelection && selectionComponent\"\n                >\n                  <ng-container *ngIf=\"datatableSettings?.isLoading; else notLoadingCheckbox\">\n                    <div class=\"skeleton-box mu-mb-100 checkbox-loading\"></div>\n                  </ng-container>\n                  <ng-template #notLoadingCheckbox>\n                    <moz-checkbox\n                      (change)=\"\n                        selectionComponent.onUdpateSelectionRow(row); selectionRowEvent($event)\n                      \"\n                      [(ngModel)]=\"row.selected\"\n                      [checked]=\"row.selected || false\"\n                      [disabled]=\"row.disableSelection || false\"\n                    >\n                    </moz-checkbox>\n                  </ng-template>\n                </td>\n                <ng-container *ngIf=\"hasSubRow() && !datatableSettings?.isLoading\">\n                  <td\n                    *ngIf=\"row['subRow']; else noSubRow\"\n                    class=\"mc-datatable__cell-button mc-datatable__fix-first-column\"\n                    [style.left.px]=\"getStyleLeftForColumnFixed()\"\n                  >\n                    <button\n                      class=\"mc-datatable__expand mc-datatable__btn\"\n                      (click)=\"toggleRowExpansion(i); $event.stopPropagation()\"\n                    >\n                      <span class=\"mc-datatable__btn-icon\">\n                        <ng-container *ngIf=\"!expandedRows[i]; else subrowClosed\">\n                          <moz-icon [iconName]=\"'Navigation_Control_Circle--More_24px'\"></moz-icon>\n                        </ng-container>\n                        <ng-template #subrowClosed>\n                          <moz-icon [iconName]=\"'Navigation_Control_Circle--Less_24px'\"></moz-icon>\n                        </ng-template>\n                      </span>\n                    </button>\n                  </td>\n                  <ng-template #noSubRow\n                    ><td\n                      class=\"mc-datatable__cell-button mc-datatable__fix-first-column\"\n                      [style.left.px]=\"getStyleLeftForColumnFixed()\"\n                    ></td\n                  ></ng-template>\n                </ng-container>\n                <ng-container *ngFor=\"let columnDef of getColumns()\">\n                  <td\n                    *ngIf=\"!columnDef.hide\"\n                    [ngClass]=\"{\n                      'mc-datatable__fix-first-column':\n                        datatableSettings?.fixFirstColumn &&\n                        getUnhiddenColumns()[0].field === columnDef.field\n                    }\"\n                    [style.left.px]=\"getLeftValueFixFirstColumn()\"\n                  >\n                    <ng-container *ngIf=\"datatableSettings?.isLoading; else notLoadingCells\">\n                      <div class=\"skeleton-box mu-mb-100 cells-loading\"></div>\n                    </ng-container>\n                    <ng-template #notLoadingCells>\n                      <ng-container\n                        *ngIf=\"\n                          getCustomContent(columnDef.field) as customContent;\n                          else defaultContentCell\n                        \"\n                      >\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            customContent;\n                            context: {\n                              $implicit: {\n                                row: row,\n                                index: i,\n                                columnDefs: datatableSettings?.columnDefs,\n                                content: row[columnDef.field]\n                              }\n                            }\n                          \"\n                        ></ng-container>\n                      </ng-container>\n                      <ng-template #defaultContentCell>\n                        {{ row[columnDef.field] }}\n                      </ng-template>\n                    </ng-template>\n                  </td>\n                </ng-container>\n              </tr>\n              <ng-container>\n                <tr *ngIf=\"expandedRows[i]\">\n                  <td [attr.colspan]=\"getColspanForExpansionRow()\">\n                    <ng-container\n                      *ngIf=\"getCustomExpansionRowContent() as expansionRowContentComponent\"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                        expansionRowContentComponent;\n                        context: {\n                          $implicit: {\n                            subRowContent: row['subRow'],\n                            index: i,\n                          }\n                        }\n                      \"\n                      ></ng-container>\n                    </ng-container>\n                  </td>\n                </tr>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n          <ng-template #emptyBody>\n            <tr class=\"mc-datatable__empty\">\n              <td colspan=\"5\" class=\"mc-datatable__empty-cell\">\n                <div class=\"mc-datatable__empty-content\">\n                  <div>\n                    <div>\n                      <p>\n                        <strong>\n                          {{\n                            datatableSettings?.labels?.emptyBodyTitle || 'There is no result.'\n                          }}</strong\n                        ><br />\n                        {{\n                          datatableSettings?.labels?.emptyBodyDescription ||\n                            'Please try changing your filters.'\n                        }}\n                      </p>\n                    </div>\n                    <div *ngIf=\"datatableSettings?.activateEmptyBodyButton\">\n                      <button\n                        moz-button\n                        [theme]=\"'neutral'\"\n                        [size]=\"'s'\"\n                        [variation]=\"'bordered'\"\n                        (click)=\"emptyButtonClickEvent()\"\n                      >\n                        <moz-icon\n                          iconName=\"{{\n                            datatableSettings?.icons?.emptyBodyButtonIcon ||\n                              'Navigation_Display_Filter_24px'\n                          }}\"\n                        ></moz-icon>\n                        {{ datatableSettings?.labels?.emptyBodyButtonTitle || 'Change filters' }}\n                      </button>\n                    </div>\n                  </div>\n                </div>\n              </td>\n            </tr></ng-template\n          >\n        </tbody>\n      </table>\n    </div>\n    <moz-datatable-footer\n      *ngIf=\"datatableSettings?.activatePagination\"\n      [footerSettings]=\"footerSettings\"\n      [isLoading]=\"datatableSettings?.isLoading\"\n      (rowPerPageChangeEmitter)=\"rowPerPageChangeEvent($event)\"\n      (pageChangeEmitter)=\"pageChangeEvent($event)\"\n    ></moz-datatable-footer>\n  </div>\n</div>\n", styles: [".mc-datatable{font-family:Roboto,sans-serif;box-sizing:border-box}.mc-datatable *,.mc-datatable :after,.mc-datatable :before{box-sizing:inherit}.mc-datatable__container{border-radius:4px;box-shadow:0 1px 5px #19191933;background-color:#e7e7f0;overflow:hidden}.mc-datatable__main{scrollbar-color:#666666 #e6e6e6;scrollbar-width:thin;overflow:auto}.mc-datatable__main::-webkit-scrollbar{background-color:#e6e6e6;height:.5rem;width:.5rem}.mc-datatable__main::-webkit-scrollbar-track{background:#e6e6e6}.mc-datatable__main::-webkit-scrollbar-thumb{background:#666666}.mc-datatable__table tr,.mc-datatable thead th,.mc-datatable thead td{height:2.9375rem}.mc-datatable__table{border-collapse:collapse;border-spacing:0;caption-side:bottom;width:100%}.mc-datatable__table>thead,.mc-datatable__table>tbody{background-color:#fff}.mc-datatable__table th,.mc-datatable__table td{border-bottom:1px solid #b3b3b3;text-align:left;vertical-align:middle;padding-right:1rem;padding-left:1rem}.mc-datatable thead th,.mc-datatable thead td{font-weight:700;font-size:.75rem;line-height:1.3333333333;color:#393879;text-transform:uppercase}.mc-datatable__head{align-items:center;display:flex;justify-content:space-between}.mc-datatable tbody tr:hover:not(.mc-datatable__empty){background-color:#eaedef}.mc-datatable tbody tr.selected{background-color:#d9f0f3}.mc-datatable tbody th,.mc-datatable tbody td{font-size:.875rem;line-height:1.2857142857;color:#191919}.mc-datatable__row-parent:not(.mc-datatable__row-parent--expanded)+.mc-datatable__row-expandable{height:0}.mc-datatable__row-parent:not(.mc-datatable__row-parent--expanded)+.mc-datatable__row-expandable .mc-datatable__row-inner{overflow:hidden;max-height:0}.mc-datatable__row-parent.mc-datatable__row-parent--expanded+.mc-datatable__row-expandable .mc-datatable__row-inner{max-height:100%}.mc-datatable__row-expandable>td{padding:0;border-bottom:0}.mc-datatable__row-expandable--offset-1 table th:first-child,.mc-datatable__row-expandable--offset-1 table td:first-child{padding-left:4.25rem}.mc-datatable__row-expandable--offset-2 table th:first-child,.mc-datatable__row-expandable--offset-2 table td:first-child{padding-left:7.75rem}.mc-datatable__cell-checkbox{width:3.25rem}.mc-datatable__cell-button{width:3.5rem}.mc-datatable__cell-field{min-width:9.375rem}td.mc-datatable__cell-number{text-align:right}.mc-datatable__empty,.mc-datatable__empty:hover{background-color:#e7e7f0}.mc-datatable__empty-cell{color:#4b4a8c}.mc-datatable__empty-content{font-size:1rem;line-height:1.375;align-items:center;color:#4b4a8c;display:flex;gap:1.5rem;min-height:19.375rem;justify-content:center;text-align:center}.mc-datatable__empty-content strong{font-size:1.125rem;line-height:1.3333333333}.mc-datatable--s .mc-datatable__table tr,.mc-datatable--s .mc-datatable thead th,.mc-datatable--s .mc-datatable thead td{height:2.4375rem}.mc-datatable--l .mc-datatable__table tr,.mc-datatable--l .mc-datatable thead th,.mc-datatable--l .mc-datatable thead td{height:3.4375rem}.mc-datatable--sticky .mc-datatable__table>thead,.mc-datatable--sticky-header .mc-datatable__table>thead{box-shadow:0 4px 20px #19191933;top:0;z-index:2}.mc-datatable--sticky .mc-datatable__table>tbody tr:last-child th,.mc-datatable--sticky .mc-datatable__table>tbody tr:last-child td,.mc-datatable--sticky-header .mc-datatable__table>tbody tr:last-child th,.mc-datatable--sticky-header .mc-datatable__table>tbody tr:last-child td{border-bottom:transparent}.mc-datatable--sticky .mc-datatable__footer,.mc-datatable--sticky-header .mc-datatable__footer{border-top:1px solid #b3b3b3;position:relative;z-index:2}.mc-datatable--sticky .mc-datatable__main{padding-top:2.9375rem;transform:translateZ(0)}.mc-datatable--sticky .mc-datatable__table{scrollbar-color:#666666 #e6e6e6;scrollbar-width:thin;display:block;overflow-y:auto}.mc-datatable--sticky .mc-datatable__table::-webkit-scrollbar{background-color:#e6e6e6;height:.5rem;width:.5rem}.mc-datatable--sticky .mc-datatable__table::-webkit-scrollbar-track{background:#e6e6e6}.mc-datatable--sticky .mc-datatable__table::-webkit-scrollbar-thumb{background:#666666}.mc-datatable--sticky .mc-datatable__table>thead{position:fixed;width:100%}.mc-datatable--sticky .mc-datatable__table>thead,.mc-datatable--sticky .mc-datatable__table>tbody,.mc-datatable--sticky .mc-datatable__table>thead tr,.mc-datatable--sticky .mc-datatable__table>tbody tr,.mc-datatable--sticky .mc-datatable__table>thead th,.mc-datatable--sticky .mc-datatable__table>thead td,.mc-datatable--sticky .mc-datatable__table>tbody th,.mc-datatable--sticky .mc-datatable__table>tbody td{display:flex}.mc-datatable--sticky .mc-datatable__table>thead,.mc-datatable--sticky .mc-datatable__table>tbody,.mc-datatable--sticky .mc-datatable__table>thead tr,.mc-datatable--sticky .mc-datatable__table>tbody tr{width:100%}.mc-datatable--sticky .mc-datatable__table>tbody{flex-direction:column}.mc-datatable--sticky .mc-datatable__table>thead th,.mc-datatable--sticky .mc-datatable__table>thead td,.mc-datatable--sticky .mc-datatable__table>tbody th,.mc-datatable--sticky .mc-datatable__table>tbody td{align-items:center}.mc-datatable--sticky .mc-datatable__table>thead th:not(.mc-datatable__cell-checkbox):not(.mc-datatable__cell-button),.mc-datatable--sticky .mc-datatable__table>thead td:not(.mc-datatable__cell-checkbox):not(.mc-datatable__cell-button),.mc-datatable--sticky .mc-datatable__table>tbody th:not(.mc-datatable__cell-checkbox):not(.mc-datatable__cell-button),.mc-datatable--sticky .mc-datatable__table>tbody td:not(.mc-datatable__cell-checkbox):not(.mc-datatable__cell-button){flex:1}.mc-datatable--sticky .mc-datatable__cell-checkbox,.mc-datatable--sticky .mc-datatable__cell-button,.mc-datatable--sticky .mc-datatable__cell-field,.mc-datatable--sticky .mc-datatable__cell-number{flex-shrink:0}.mc-datatable--sticky .mc-datatable__cell-number{justify-content:flex-end}.mc-datatable--sticky-header .mc-datatable__main{overflow-y:auto}.mc-datatable--sticky-header .mc-datatable__table>thead{position:sticky}.mc-datatable--overflow-visible .mc-datatable__container,.mc-datatable--overflow-visible .mc-datatable__main{overflow:visible}.mc-datatable__btn{margin:0;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;padding:0;align-items:center;background-color:transparent;display:flex}.mc-datatable__btn-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-datatable__btn-icon,.mc-datatable__btn svg{width:1.5rem;height:1.5rem}.mc-datatable__sort{font-weight:700;font-size:.75rem;line-height:1.3333333333;color:#393879;text-transform:uppercase;align-items:center;display:flex;height:100%;font-family:inherit;justify-content:space-between;width:100%}.mc-datatable__sort-arrow{align-items:center;display:flex;flex-direction:column;height:1.5rem;justify-content:space-around;margin-left:.5rem;width:1.5rem}.mc-datatable__sort-arrow:after,.mc-datatable__sort-arrow:before{background-color:#cdd4d8;content:\"\";flex-shrink:0;height:.5rem;width:.75rem}.mc-datatable__sort-arrow:before{clip-path:polygon(50% 0%,0% 100%,100% 100%)}.asc .mc-datatable__sort-arrow:before{background-color:#605f9d}.desc .mc-datatable__sort-arrow:before{display:none}.mc-datatable__sort-arrow:after{clip-path:polygon(0 0,100% 0,50% 100%)}.asc .mc-datatable__sort-arrow:after{display:none}.desc .mc-datatable__sort-arrow:after{background-color:#605f9d}.mc-datatable__options{width:1.5rem;height:1.5rem}.mc-datatable__expand .mc-datatable__btn-icon{fill:#007f8c}.mc-datatable .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-datatable__topbar,.mc-datatable__filters{padding-bottom:1rem}.mc-datatable__topbar{justify-content:space-between}.mc-datatable__topbar,.mc-datatable__topbar-edition,.mc-datatable__topbar-actions{display:flex;gap:1rem}.mc-datatable__topbar-edition,.mc-datatable__topbar-actions{flex-wrap:wrap}.mc-datatable__topbar-edition{flex-shrink:0}.mc-datatable__topbar-actions{align-items:center;justify-content:flex-end;margin-left:auto}.mc-datatable__filters{align-items:center;display:flex;flex-wrap:wrap;gap:1rem;justify-content:flex-end}.mc-datatable__filters:not(:only-child){border-top:1px solid #b0bbc0;padding-top:1rem}.mc-datatable__footer{align-items:center;background-color:#fff;display:flex;padding:.75rem 1rem;gap:1rem}@media screen and (max-width: 679px){.mc-datatable__footer{flex-direction:column}}.mc-datatable__select{display:flex;align-items:center;gap:.5rem}.mc-datatable__select-label{font-size:.875rem;line-height:1.2857142857;color:#333;flex-shrink:0}.mc-datatable__count{font-size:.75rem;line-height:1.3333333333;color:#666}.mc-datatable__pagination{margin-left:auto}.mc-datatable__subtable{border-collapse:collapse;border-spacing:0;caption-side:bottom;width:100%;background-color:#e7e7f0}.mc-datatable__subtable th,.mc-datatable__subtable td{border-bottom-color:#a4a3c7}.mc-datatable__subtable thead th,.mc-datatable__subtable thead td{font-size:.75rem;line-height:1.3333333333;color:#1a1a4b}.mc-datatable__subtable tbody th,.mc-datatable__subtable tbody td{color:#1a1a4b}.fix-header-row{position:sticky;top:0;box-shadow:0 1px 5px #22202033;z-index:1}.header{align-items:center;display:flex;height:100%;font-family:inherit;justify-content:space-between;width:100%}.is-sorted-asc:before{background-color:var(--color-datatable-sort-arrow-active, #333333)}.is-sorted-desc:after{background-color:var(--color-datatable-sort-arrow-active, #333333)}.mc-datatable-height{height:100%}.mc-datatable__sort-arrow{cursor:pointer}.mc-datatable__fix-first-column{position:sticky;background-color:#fff;left:0}.skeleton-box{display:inline-block;position:relative;overflow:hidden;background-color:#ccc}.skeleton-box:after{position:absolute;inset:0;transform:translate(-100%);background-image:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.2) 20%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0));animation:shimmer 2s infinite;content:\"\"}@keyframes shimmer{to{transform:translate(100%)}}.checkbox-loading{width:25px;height:25px}.cells-loading{width:250px;height:25px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ButtonComponent, selector: "button[moz-button]", inputs: ["iconPosition", "onlyIcon", "theme", "variation", "widthBehavior", "size"] }, { kind: "component", type: CheckboxComponent, selector: "moz-checkbox", inputs: ["disabled", "indeterminate", "invalid", "id", "checked"] }, { kind: "component", type: IconComponent, selector: "moz-icon", inputs: ["iconName"] }, { kind: "component", type: MozDatatableFooterComponent, selector: "moz-datatable-footer", inputs: ["footerSettings", "isLoading"], outputs: ["rowPerPageChangeEmitter", "pageChangeEmitter"] }, { kind: "component", type: MozDatatableSelectionComponent, selector: "moz-datatable-selection", inputs: ["selectionSettings", "paginationEnabled", "rowData"], outputs: ["updateSelectionAllEmitter"] }, { kind: "directive", type: MozDatatableSortDirective, selector: "[mozDatatableSort]", inputs: ["mozDatatableSort"], outputs: ["sortEmitter"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }], encapsulation: i0.ViewEncapsulation.None });
+MozDatatableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MozDatatableComponent, selector: "moz-datatable", inputs: { footerSettings: "footerSettings", selectionSettings: "selectionSettings", allowAllSelected: "allowAllSelected", datatableSettings: "datatableSettings", tableSummary: "tableSummary" }, outputs: { rowClick: "rowClick", sortColumn: "sortColumn", rowSelected: "rowSelected", rowAllSelected: "rowAllSelected", emptyBodyButtonClicked: "emptyBodyButtonClicked", pageChange: "pageChange", rowPerPageChange: "rowPerPageChange" }, queries: [{ propertyName: "expansionContentComponent", first: true, predicate: MozDatatableRowExpansionContentComponent, descendants: true }, { propertyName: "headerCellComponents", predicate: MozDatatableHeaderCellComponent }, { propertyName: "contentCellComponents", predicate: MozDatatableContentCellComponent }], viewQueries: [{ propertyName: "selectionComponent", first: true, predicate: MozDatatableSelectionComponent, descendants: true }, { propertyName: "thSelectionRef", first: true, predicate: ["thSelection"], descendants: true }, { propertyName: "thSubRowRef", first: true, predicate: ["thSubRow"], descendants: true }], ngImport: i0, template: "<div class=\"mc-datatable\" [ngClass]=\"{ ' mc-datatable-height': datatableSettings?.fixHeaderRow }\">\n  <div class=\"mc-datatable__header\">\n    <ng-content select=\"moz-datatable-caption\"></ng-content>\n    <div>\n      <moz-datatable-selection\n        [selectionSettings]=\"selectionSettings\"\n        [allowAllSelected]=\"allowAllSelected\"\n        [paginationEnabled]=\"datatableSettings?.activatePagination\"\n        [rowData]=\"datatableSettings?.rowData\"\n        (updateSelectionAllEmitter)=\"selectionAllRowEvent($event)\"\n      ></moz-datatable-selection>\n    </div>\n  </div>\n  <div\n    class=\"mc-datatable__container\"\n    [ngClass]=\"{ ' mc-datatable-height': datatableSettings?.fixHeaderRow }\"\n  >\n    <div\n      class=\"mc-datatable__main\"\n      [ngClass]=\"{ ' mc-datatable-height': datatableSettings?.fixHeaderRow }\"\n    >\n      <table class=\"mc-datatable__table\" summary=\"{{ tableSummary }}\">\n        <thead [ngClass]=\"{ 'fix-header-row': datatableSettings?.fixHeaderRow }\">\n          <tr *ngIf=\"getColumns() && getColumns().length > 0\">\n            <th\n              class=\"mc-datatable__cell-checkbox moz-datatable__th mc-datatable__fix-first-column\"\n              *ngIf=\"\n                datatableSettings?.activateSelection &&\n                selectionComponent &&\n                selectionSettings &&\n                ((datatableSettings?.rowData || []).length > 0 || datatableSettings?.isLoading)\n              \"\n              id=\"checkAllPageRows\"\n              #thSelection\n            >\n              <ng-container *ngIf=\"datatableSettings?.isLoading; else notLoadingCheckbox\">\n                <div class=\"skeleton-box mu-mb-100 checkbox-loading\"></div>\n              </ng-container>\n              <ng-template #notLoadingCheckbox>\n                <moz-checkbox\n                  (change)=\"\n                    selectionComponent.onUdpateSelectionAllPageRows($event);\n                    selectionRowEvent($event)\n                  \"\n                  [indeterminate]=\"selectionComponent.isIndeterminate\"\n                  [checked]=\"\n                    (selectionSettings.allSelected && !selectionComponent.isIndeterminate) ||\n                    (!selectionSettings.allSelected &&\n                      !selectionComponent.isIndeterminate &&\n                      (this.selectionSettings.selectedIds || []).length > 0)\n                  \"\n                  [disabled]=\"datatableSettings?.isLoading || false\"\n                >\n                </moz-checkbox>\n              </ng-template>\n            </th>\n            <th\n              *ngIf=\"hasSubRow() && !datatableSettings?.isLoading\"\n              class=\"mc-datatable__fix-first-column\"\n              [style.left.px]=\"getStyleLeftForColumnFixed()\"\n              #thSubRow\n            ></th>\n            <ng-container *ngFor=\"let columnDef of getColumns()\">\n              <th\n                class=\"moz-datatable__th\"\n                *ngIf=\"!columnDef.hide\"\n                [ngClass]=\"{\n                  'mc-datatable__fix-first-column':\n                    datatableSettings?.fixFirstColumn &&\n                    getUnhiddenColumns()[0].field === columnDef.field\n                }\"\n                [style.left.px]=\"getLeftValueFixFirstColumn()\"\n              >\n                <ng-container *ngIf=\"datatableSettings?.isLoading; else notLoadingHeading\">\n                  <div class=\"skeleton-box mu-mb-100 cells-loading\"></div>\n                </ng-container>\n\n                <ng-template #notLoadingHeading>\n                  <div\n                    [mozDatatableSort]=\"columnDef\"\n                    [ngClass]=\"{ header: columnDef.sort }\"\n                    (sortEmitter)=\"sortEvent($event)\"\n                  >\n                    <ng-container\n                      *ngIf=\"\n                        getCustomHeader(columnDef.field) as customHeader;\n                        else defaultHeaderCell\n                      \"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          customHeader;\n                          context: {\n                            $implicit: {\n                              content: columnDef\n                            }\n                          }\n                        \"\n                      ></ng-container>\n                    </ng-container>\n                    <ng-template #defaultHeaderCell>\n                      {{ columnDef.headerName | uppercase }}\n                    </ng-template>\n                  </div>\n                </ng-template>\n              </th>\n            </ng-container>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container\n            *ngIf=\"\n              (datatableSettings?.rowData?.length || 0) > 0 || datatableSettings?.isLoading;\n              else emptyBody\n            \"\n          >\n            <ng-container *ngFor=\"let row of getFields(); index as i\">\n              <tr class=\"mc-datatable__row-parent\" (click)=\"rowClickEvent($event, row)\">\n                <td\n                  class=\"mc-datatable__fix-first-column\"\n                  *ngIf=\"datatableSettings?.activateSelection && selectionComponent\"\n                >\n                  <ng-container *ngIf=\"datatableSettings?.isLoading; else notLoadingCheckbox\">\n                    <div class=\"skeleton-box mu-mb-100 checkbox-loading\"></div>\n                  </ng-container>\n                  <ng-template #notLoadingCheckbox>\n                    <moz-checkbox\n                      (change)=\"\n                        selectionComponent.onUdpateSelectionRow(row); selectionRowEvent($event)\n                      \"\n                      [(ngModel)]=\"row.selected\"\n                      [checked]=\"row.selected || false\"\n                      [disabled]=\"row.disableSelection || false\"\n                    >\n                    </moz-checkbox>\n                  </ng-template>\n                </td>\n                <ng-container *ngIf=\"hasSubRow() && !datatableSettings?.isLoading\">\n                  <td\n                    *ngIf=\"row['subRow']; else noSubRow\"\n                    class=\"mc-datatable__cell-button mc-datatable__fix-first-column\"\n                    [style.left.px]=\"getStyleLeftForColumnFixed()\"\n                  >\n                    <button\n                      class=\"mc-datatable__expand mc-datatable__btn\"\n                      (click)=\"toggleRowExpansion(i); $event.stopPropagation()\"\n                    >\n                      <span class=\"mc-datatable__btn-icon\">\n                        <ng-container *ngIf=\"!expandedRows[i]; else subrowClosed\">\n                          <moz-icon [iconName]=\"'Navigation_Control_Circle--More_24px'\"></moz-icon>\n                        </ng-container>\n                        <ng-template #subrowClosed>\n                          <moz-icon [iconName]=\"'Navigation_Control_Circle--Less_24px'\"></moz-icon>\n                        </ng-template>\n                      </span>\n                    </button>\n                  </td>\n                  <ng-template #noSubRow\n                    ><td\n                      class=\"mc-datatable__cell-button mc-datatable__fix-first-column\"\n                      [style.left.px]=\"getStyleLeftForColumnFixed()\"\n                    ></td\n                  ></ng-template>\n                </ng-container>\n                <ng-container *ngFor=\"let columnDef of getColumns()\">\n                  <td\n                    *ngIf=\"!columnDef.hide\"\n                    [ngClass]=\"{\n                      'mc-datatable__fix-first-column':\n                        datatableSettings?.fixFirstColumn &&\n                        getUnhiddenColumns()[0].field === columnDef.field\n                    }\"\n                    [style.left.px]=\"getLeftValueFixFirstColumn()\"\n                  >\n                    <ng-container *ngIf=\"datatableSettings?.isLoading; else notLoadingCells\">\n                      <div class=\"skeleton-box mu-mb-100 cells-loading\"></div>\n                    </ng-container>\n                    <ng-template #notLoadingCells>\n                      <ng-container\n                        *ngIf=\"\n                          getCustomContent(columnDef.field) as customContent;\n                          else defaultContentCell\n                        \"\n                      >\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            customContent;\n                            context: {\n                              $implicit: {\n                                row: row,\n                                index: i,\n                                columnDefs: datatableSettings?.columnDefs,\n                                content: row[columnDef.field]\n                              }\n                            }\n                          \"\n                        ></ng-container>\n                      </ng-container>\n                      <ng-template #defaultContentCell>\n                        {{ row[columnDef.field] }}\n                      </ng-template>\n                    </ng-template>\n                  </td>\n                </ng-container>\n              </tr>\n              <ng-container>\n                <tr *ngIf=\"expandedRows[i]\">\n                  <td [attr.colspan]=\"getColspanForExpansionRow()\">\n                    <ng-container\n                      *ngIf=\"getCustomExpansionRowContent() as expansionRowContentComponent\"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                        expansionRowContentComponent;\n                        context: {\n                          $implicit: {\n                            subRowContent: row['subRow'],\n                            index: i,\n                          }\n                        }\n                      \"\n                      ></ng-container>\n                    </ng-container>\n                  </td>\n                </tr>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n          <ng-template #emptyBody>\n            <tr class=\"mc-datatable__empty\">\n              <td colspan=\"5\" class=\"mc-datatable__empty-cell\">\n                <div class=\"mc-datatable__empty-content\">\n                  <div>\n                    <div>\n                      <p>\n                        <strong>\n                          {{\n                            datatableSettings?.labels?.emptyBodyTitle || 'There is no result.'\n                          }}</strong\n                        ><br />\n                        {{\n                          datatableSettings?.labels?.emptyBodyDescription ||\n                            'Please try changing your filters.'\n                        }}\n                      </p>\n                    </div>\n                    <div *ngIf=\"datatableSettings?.activateEmptyBodyButton\">\n                      <button\n                        moz-button\n                        [theme]=\"'neutral'\"\n                        [size]=\"'s'\"\n                        [variation]=\"'bordered'\"\n                        (click)=\"emptyButtonClickEvent()\"\n                      >\n                        <moz-icon\n                          iconName=\"{{\n                            datatableSettings?.icons?.emptyBodyButtonIcon ||\n                              'Navigation_Display_Filter_24px'\n                          }}\"\n                        ></moz-icon>\n                        {{ datatableSettings?.labels?.emptyBodyButtonTitle || 'Change filters' }}\n                      </button>\n                    </div>\n                  </div>\n                </div>\n              </td>\n            </tr></ng-template\n          >\n        </tbody>\n      </table>\n    </div>\n    <moz-datatable-footer\n      *ngIf=\"datatableSettings?.activatePagination\"\n      [footerSettings]=\"footerSettings\"\n      [isLoading]=\"datatableSettings?.isLoading\"\n      (rowPerPageChangeEmitter)=\"rowPerPageChangeEvent($event)\"\n      (pageChangeEmitter)=\"pageChangeEvent($event)\"\n    ></moz-datatable-footer>\n  </div>\n</div>\n", styles: [".mc-datatable{font-family:Roboto,sans-serif;box-sizing:border-box}.mc-datatable *,.mc-datatable :after,.mc-datatable :before{box-sizing:inherit}.mc-datatable__container{border-radius:4px;box-shadow:0 1px 5px #19191933;background-color:#e7e7f0;overflow:hidden}.mc-datatable__main{scrollbar-color:#666666 #e6e6e6;scrollbar-width:thin;overflow:auto}.mc-datatable__main::-webkit-scrollbar{background-color:#e6e6e6;height:.5rem;width:.5rem}.mc-datatable__main::-webkit-scrollbar-track{background:#e6e6e6}.mc-datatable__main::-webkit-scrollbar-thumb{background:#666666}.mc-datatable__table tr,.mc-datatable thead th,.mc-datatable thead td{height:2.9375rem}.mc-datatable__table{border-collapse:collapse;border-spacing:0;caption-side:bottom;width:100%}.mc-datatable__table>thead,.mc-datatable__table>tbody{background-color:#fff}.mc-datatable__table th,.mc-datatable__table td{border-bottom:1px solid #b3b3b3;text-align:left;vertical-align:middle;padding-right:1rem;padding-left:1rem}.mc-datatable thead th,.mc-datatable thead td{font-weight:700;font-size:.75rem;line-height:1.3333333333;color:#393879;text-transform:uppercase}.mc-datatable__head{align-items:center;display:flex;justify-content:space-between}.mc-datatable tbody tr:hover:not(.mc-datatable__empty){background-color:#eaedef}.mc-datatable tbody tr.selected{background-color:#d9f0f3}.mc-datatable tbody th,.mc-datatable tbody td{font-size:.875rem;line-height:1.2857142857;color:#191919}.mc-datatable__row-parent:not(.mc-datatable__row-parent--expanded)+.mc-datatable__row-expandable{height:0}.mc-datatable__row-parent:not(.mc-datatable__row-parent--expanded)+.mc-datatable__row-expandable .mc-datatable__row-inner{overflow:hidden;max-height:0}.mc-datatable__row-parent.mc-datatable__row-parent--expanded+.mc-datatable__row-expandable .mc-datatable__row-inner{max-height:100%}.mc-datatable__row-expandable>td{padding:0;border-bottom:0}.mc-datatable__row-expandable--offset-1 table th:first-child,.mc-datatable__row-expandable--offset-1 table td:first-child{padding-left:4.25rem}.mc-datatable__row-expandable--offset-2 table th:first-child,.mc-datatable__row-expandable--offset-2 table td:first-child{padding-left:7.75rem}.mc-datatable__cell-checkbox{width:3.25rem}.mc-datatable__cell-button{width:3.5rem}.mc-datatable__cell-field{min-width:9.375rem}td.mc-datatable__cell-number{text-align:right}.mc-datatable__empty,.mc-datatable__empty:hover{background-color:#e7e7f0}.mc-datatable__empty-cell{color:#4b4a8c}.mc-datatable__empty-content{font-size:1rem;line-height:1.375;align-items:center;color:#4b4a8c;display:flex;gap:1.5rem;min-height:19.375rem;justify-content:center;text-align:center}.mc-datatable__empty-content strong{font-size:1.125rem;line-height:1.3333333333}.mc-datatable--s .mc-datatable__table tr,.mc-datatable--s .mc-datatable thead th,.mc-datatable--s .mc-datatable thead td{height:2.4375rem}.mc-datatable--l .mc-datatable__table tr,.mc-datatable--l .mc-datatable thead th,.mc-datatable--l .mc-datatable thead td{height:3.4375rem}.mc-datatable--sticky .mc-datatable__table>thead,.mc-datatable--sticky-header .mc-datatable__table>thead{box-shadow:0 4px 20px #19191933;top:0;z-index:2}.mc-datatable--sticky .mc-datatable__table>tbody tr:last-child th,.mc-datatable--sticky .mc-datatable__table>tbody tr:last-child td,.mc-datatable--sticky-header .mc-datatable__table>tbody tr:last-child th,.mc-datatable--sticky-header .mc-datatable__table>tbody tr:last-child td{border-bottom:transparent}.mc-datatable--sticky .mc-datatable__footer,.mc-datatable--sticky-header .mc-datatable__footer{border-top:1px solid #b3b3b3;position:relative;z-index:2}.mc-datatable--sticky .mc-datatable__main{padding-top:2.9375rem;transform:translateZ(0)}.mc-datatable--sticky .mc-datatable__table{scrollbar-color:#666666 #e6e6e6;scrollbar-width:thin;display:block;overflow-y:auto}.mc-datatable--sticky .mc-datatable__table::-webkit-scrollbar{background-color:#e6e6e6;height:.5rem;width:.5rem}.mc-datatable--sticky .mc-datatable__table::-webkit-scrollbar-track{background:#e6e6e6}.mc-datatable--sticky .mc-datatable__table::-webkit-scrollbar-thumb{background:#666666}.mc-datatable--sticky .mc-datatable__table>thead{position:fixed;width:100%}.mc-datatable--sticky .mc-datatable__table>thead,.mc-datatable--sticky .mc-datatable__table>tbody,.mc-datatable--sticky .mc-datatable__table>thead tr,.mc-datatable--sticky .mc-datatable__table>tbody tr,.mc-datatable--sticky .mc-datatable__table>thead th,.mc-datatable--sticky .mc-datatable__table>thead td,.mc-datatable--sticky .mc-datatable__table>tbody th,.mc-datatable--sticky .mc-datatable__table>tbody td{display:flex}.mc-datatable--sticky .mc-datatable__table>thead,.mc-datatable--sticky .mc-datatable__table>tbody,.mc-datatable--sticky .mc-datatable__table>thead tr,.mc-datatable--sticky .mc-datatable__table>tbody tr{width:100%}.mc-datatable--sticky .mc-datatable__table>tbody{flex-direction:column}.mc-datatable--sticky .mc-datatable__table>thead th,.mc-datatable--sticky .mc-datatable__table>thead td,.mc-datatable--sticky .mc-datatable__table>tbody th,.mc-datatable--sticky .mc-datatable__table>tbody td{align-items:center}.mc-datatable--sticky .mc-datatable__table>thead th:not(.mc-datatable__cell-checkbox):not(.mc-datatable__cell-button),.mc-datatable--sticky .mc-datatable__table>thead td:not(.mc-datatable__cell-checkbox):not(.mc-datatable__cell-button),.mc-datatable--sticky .mc-datatable__table>tbody th:not(.mc-datatable__cell-checkbox):not(.mc-datatable__cell-button),.mc-datatable--sticky .mc-datatable__table>tbody td:not(.mc-datatable__cell-checkbox):not(.mc-datatable__cell-button){flex:1}.mc-datatable--sticky .mc-datatable__cell-checkbox,.mc-datatable--sticky .mc-datatable__cell-button,.mc-datatable--sticky .mc-datatable__cell-field,.mc-datatable--sticky .mc-datatable__cell-number{flex-shrink:0}.mc-datatable--sticky .mc-datatable__cell-number{justify-content:flex-end}.mc-datatable--sticky-header .mc-datatable__main{overflow-y:auto}.mc-datatable--sticky-header .mc-datatable__table>thead{position:sticky}.mc-datatable--overflow-visible .mc-datatable__container,.mc-datatable--overflow-visible .mc-datatable__main{overflow:visible}.mc-datatable__btn{margin:0;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;padding:0;align-items:center;background-color:transparent;display:flex}.mc-datatable__btn-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-datatable__btn-icon,.mc-datatable__btn svg{width:1.5rem;height:1.5rem}.mc-datatable__sort{font-weight:700;font-size:.75rem;line-height:1.3333333333;color:#393879;text-transform:uppercase;align-items:center;display:flex;height:100%;font-family:inherit;justify-content:space-between;width:100%}.mc-datatable__sort-arrow{align-items:center;display:flex;flex-direction:column;height:1.5rem;justify-content:space-around;margin-left:.5rem;width:1.5rem}.mc-datatable__sort-arrow:after,.mc-datatable__sort-arrow:before{background-color:#cdd4d8;content:\"\";flex-shrink:0;height:.5rem;width:.75rem}.mc-datatable__sort-arrow:before{clip-path:polygon(50% 0%,0% 100%,100% 100%)}.asc .mc-datatable__sort-arrow:before{background-color:#605f9d}.desc .mc-datatable__sort-arrow:before{display:none}.mc-datatable__sort-arrow:after{clip-path:polygon(0 0,100% 0,50% 100%)}.asc .mc-datatable__sort-arrow:after{display:none}.desc .mc-datatable__sort-arrow:after{background-color:#605f9d}.mc-datatable__options{width:1.5rem;height:1.5rem}.mc-datatable__expand .mc-datatable__btn-icon{fill:#007f8c}.mc-datatable .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-datatable__topbar,.mc-datatable__filters{padding-bottom:1rem}.mc-datatable__topbar{justify-content:space-between}.mc-datatable__topbar,.mc-datatable__topbar-edition,.mc-datatable__topbar-actions{display:flex;gap:1rem}.mc-datatable__topbar-edition,.mc-datatable__topbar-actions{flex-wrap:wrap}.mc-datatable__topbar-edition{flex-shrink:0}.mc-datatable__topbar-actions{align-items:center;justify-content:flex-end;margin-left:auto}.mc-datatable__filters{align-items:center;display:flex;flex-wrap:wrap;gap:1rem;justify-content:flex-end}.mc-datatable__filters:not(:only-child){border-top:1px solid #b0bbc0;padding-top:1rem}.mc-datatable__footer{align-items:center;background-color:#fff;display:flex;padding:.75rem 1rem;gap:1rem}@media screen and (max-width: 679px){.mc-datatable__footer{flex-direction:column}}.mc-datatable__select{display:flex;align-items:center;gap:.5rem}.mc-datatable__select-label{font-size:.875rem;line-height:1.2857142857;color:#333;flex-shrink:0}.mc-datatable__count{font-size:.75rem;line-height:1.3333333333;color:#666}.mc-datatable__pagination{margin-left:auto}.mc-datatable__subtable{border-collapse:collapse;border-spacing:0;caption-side:bottom;width:100%;background-color:#e7e7f0}.mc-datatable__subtable th,.mc-datatable__subtable td{border-bottom-color:#a4a3c7}.mc-datatable__subtable thead th,.mc-datatable__subtable thead td{font-size:.75rem;line-height:1.3333333333;color:#1a1a4b}.mc-datatable__subtable tbody th,.mc-datatable__subtable tbody td{color:#1a1a4b}.fix-header-row{position:sticky;top:0;box-shadow:0 1px 5px #22202033;z-index:1}.header{align-items:center;display:flex;height:100%;font-family:inherit;justify-content:space-between;width:100%}.is-sorted-asc:before{background-color:var(--color-datatable-sort-arrow-active, #333333)}.is-sorted-desc:after{background-color:var(--color-datatable-sort-arrow-active, #333333)}.mc-datatable-height{height:100%}.mc-datatable__sort-arrow{cursor:pointer}.mc-datatable__fix-first-column{position:sticky;background-color:#fff;left:0}.skeleton-box{display:inline-block;position:relative;overflow:hidden;background-color:#ccc}.skeleton-box:after{position:absolute;inset:0;transform:translate(-100%);background-image:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.2) 20%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0));animation:shimmer 2s infinite;content:\"\"}@keyframes shimmer{to{transform:translate(100%)}}.checkbox-loading{width:25px;height:25px}.cells-loading{width:250px;height:25px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ButtonComponent, selector: "button[moz-button]", inputs: ["iconPosition", "onlyIcon", "theme", "variation", "widthBehavior", "size"] }, { kind: "component", type: CheckboxComponent, selector: "moz-checkbox", inputs: ["disabled", "indeterminate", "invalid", "id", "checked"] }, { kind: "component", type: IconComponent, selector: "moz-icon", inputs: ["iconName"] }, { kind: "component", type: MozDatatableFooterComponent, selector: "moz-datatable-footer", inputs: ["footerSettings", "isLoading"], outputs: ["rowPerPageChangeEmitter", "pageChangeEmitter"] }, { kind: "component", type: MozDatatableSelectionComponent, selector: "moz-datatable-selection", inputs: ["selectionSettings", "paginationEnabled", "allowAllSelected", "rowData"], outputs: ["updateSelectionAllEmitter"] }, { kind: "directive", type: MozDatatableSortDirective, selector: "[mozDatatableSort]", inputs: ["mozDatatableSort"], outputs: ["sortEmitter"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MozDatatableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'moz-datatable', encapsulation: ViewEncapsulation.None, template: "<div class=\"mc-datatable\" [ngClass]=\"{ ' mc-datatable-height': datatableSettings?.fixHeaderRow }\">\n  <div class=\"mc-datatable__header\">\n    <ng-content select=\"moz-datatable-caption\"></ng-content>\n    <div>\n      <moz-datatable-selection\n        [selectionSettings]=\"selectionSettings\"\n        [paginationEnabled]=\"datatableSettings?.activatePagination\"\n        [rowData]=\"datatableSettings?.rowData\"\n        (updateSelectionAllEmitter)=\"selectionAllRowEvent($event)\"\n      ></moz-datatable-selection>\n    </div>\n  </div>\n  <div\n    class=\"mc-datatable__container\"\n    [ngClass]=\"{ ' mc-datatable-height': datatableSettings?.fixHeaderRow }\"\n  >\n    <div\n      class=\"mc-datatable__main\"\n      [ngClass]=\"{ ' mc-datatable-height': datatableSettings?.fixHeaderRow }\"\n    >\n      <table class=\"mc-datatable__table\">\n        <thead [ngClass]=\"{ 'fix-header-row': datatableSettings?.fixHeaderRow }\">\n          <tr *ngIf=\"getColumns() && getColumns().length > 0\">\n            <th\n              class=\"mc-datatable__cell-checkbox moz-datatable__th mc-datatable__fix-first-column\"\n              *ngIf=\"\n                datatableSettings?.activateSelection &&\n                selectionComponent &&\n                selectionSettings &&\n                ((datatableSettings?.rowData || []).length > 0 || datatableSettings?.isLoading)\n              \"\n              #thSelection\n            >\n              <ng-container *ngIf=\"datatableSettings?.isLoading; else notLoadingCheckbox\">\n                <div class=\"skeleton-box mu-mb-100 checkbox-loading\"></div>\n              </ng-container>\n              <ng-template #notLoadingCheckbox>\n                <moz-checkbox\n                  (change)=\"\n                    selectionComponent.onUdpateSelectionAllPageRows($event);\n                    selectionRowEvent($event)\n                  \"\n                  [indeterminate]=\"selectionComponent.isIndeterminate\"\n                  [checked]=\"selectionSettings.allSelected && !selectionComponent.isIndeterminate\"\n                  [disabled]=\"datatableSettings?.isLoading || false\"\n                >\n                </moz-checkbox>\n              </ng-template>\n            </th>\n            <th\n              *ngIf=\"hasSubRow() && !datatableSettings?.isLoading\"\n              class=\"mc-datatable__fix-first-column\"\n              [style.left.px]=\"getStyleLeftForColumnFixed()\"\n              #thSubRow\n            ></th>\n            <ng-container *ngFor=\"let columnDef of getColumns()\">\n              <th\n                class=\"moz-datatable__th\"\n                *ngIf=\"!columnDef.hide\"\n                [ngClass]=\"{\n                  'mc-datatable__fix-first-column':\n                    datatableSettings?.fixFirstColumn &&\n                    getUnhiddenColumns()[0].field === columnDef.field\n                }\"\n                [style.left.px]=\"getLeftValueFixFirstColumn()\"\n              >\n                <ng-container *ngIf=\"datatableSettings?.isLoading; else notLoadingHeading\">\n                  <div class=\"skeleton-box mu-mb-100 cells-loading\"></div>\n                </ng-container>\n\n                <ng-template #notLoadingHeading>\n                  <div\n                    [mozDatatableSort]=\"columnDef\"\n                    [ngClass]=\"{ header: columnDef.sort }\"\n                    (sortEmitter)=\"sortEvent($event)\"\n                  >\n                    <ng-container\n                      *ngIf=\"\n                        getCustomHeader(columnDef.field) as customHeader;\n                        else defaultHeaderCell\n                      \"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          customHeader;\n                          context: {\n                            $implicit: {\n                              content: columnDef\n                            }\n                          }\n                        \"\n                      ></ng-container>\n                    </ng-container>\n                    <ng-template #defaultHeaderCell>\n                      {{ columnDef.headerName | uppercase }}\n                    </ng-template>\n                  </div>\n                </ng-template>\n              </th>\n            </ng-container>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container\n            *ngIf=\"\n              (datatableSettings?.rowData?.length || 0) > 0 || datatableSettings?.isLoading;\n              else emptyBody\n            \"\n          >\n            <ng-container *ngFor=\"let row of getFields(); index as i\">\n              <tr class=\"mc-datatable__row-parent\" (click)=\"rowClickEvent($event, row)\">\n                <td\n                  class=\"mc-datatable__fix-first-column\"\n                  *ngIf=\"datatableSettings?.activateSelection && selectionComponent\"\n                >\n                  <ng-container *ngIf=\"datatableSettings?.isLoading; else notLoadingCheckbox\">\n                    <div class=\"skeleton-box mu-mb-100 checkbox-loading\"></div>\n                  </ng-container>\n                  <ng-template #notLoadingCheckbox>\n                    <moz-checkbox\n                      (change)=\"\n                        selectionComponent.onUdpateSelectionRow(row); selectionRowEvent($event)\n                      \"\n                      [(ngModel)]=\"row.selected\"\n                      [checked]=\"row.selected || false\"\n                      [disabled]=\"row.disableSelection || false\"\n                    >\n                    </moz-checkbox>\n                  </ng-template>\n                </td>\n                <ng-container *ngIf=\"hasSubRow() && !datatableSettings?.isLoading\">\n                  <td\n                    *ngIf=\"row['subRow']; else noSubRow\"\n                    class=\"mc-datatable__cell-button mc-datatable__fix-first-column\"\n                    [style.left.px]=\"getStyleLeftForColumnFixed()\"\n                  >\n                    <button\n                      class=\"mc-datatable__expand mc-datatable__btn\"\n                      (click)=\"toggleRowExpansion(i); $event.stopPropagation()\"\n                    >\n                      <span class=\"mc-datatable__btn-icon\">\n                        <ng-container *ngIf=\"!expandedRows[i]; else subrowClosed\">\n                          <moz-icon [iconName]=\"'Navigation_Control_Circle--More_24px'\"></moz-icon>\n                        </ng-container>\n                        <ng-template #subrowClosed>\n                          <moz-icon [iconName]=\"'Navigation_Control_Circle--Less_24px'\"></moz-icon>\n                        </ng-template>\n                      </span>\n                    </button>\n                  </td>\n                  <ng-template #noSubRow\n                    ><td\n                      class=\"mc-datatable__cell-button mc-datatable__fix-first-column\"\n                      [style.left.px]=\"getStyleLeftForColumnFixed()\"\n                    ></td\n                  ></ng-template>\n                </ng-container>\n                <ng-container *ngFor=\"let columnDef of getColumns()\">\n                  <td\n                    *ngIf=\"!columnDef.hide\"\n                    [ngClass]=\"{\n                      'mc-datatable__fix-first-column':\n                        datatableSettings?.fixFirstColumn &&\n                        getUnhiddenColumns()[0].field === columnDef.field\n                    }\"\n                    [style.left.px]=\"getLeftValueFixFirstColumn()\"\n                  >\n                    <ng-container *ngIf=\"datatableSettings?.isLoading; else notLoadingCells\">\n                      <div class=\"skeleton-box mu-mb-100 cells-loading\"></div>\n                    </ng-container>\n                    <ng-template #notLoadingCells>\n                      <ng-container\n                        *ngIf=\"\n                          getCustomContent(columnDef.field) as customContent;\n                          else defaultContentCell\n                        \"\n                      >\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            customContent;\n                            context: {\n                              $implicit: {\n                                row: row,\n                                index: i,\n                                columnDefs: datatableSettings?.columnDefs,\n                                content: row[columnDef.field]\n                              }\n                            }\n                          \"\n                        ></ng-container>\n                      </ng-container>\n                      <ng-template #defaultContentCell>\n                        {{ row[columnDef.field] }}\n                      </ng-template>\n                    </ng-template>\n                  </td>\n                </ng-container>\n              </tr>\n              <ng-container>\n                <tr *ngIf=\"expandedRows[i]\">\n                  <td [attr.colspan]=\"getColspanForExpansionRow()\">\n                    <ng-container\n                      *ngIf=\"getCustomExpansionRowContent() as expansionRowContentComponent\"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                        expansionRowContentComponent;\n                        context: {\n                          $implicit: {\n                            subRowContent: row['subRow'],\n                            index: i,\n                          }\n                        }\n                      \"\n                      ></ng-container>\n                    </ng-container>\n                  </td>\n                </tr>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n          <ng-template #emptyBody>\n            <tr class=\"mc-datatable__empty\">\n              <td colspan=\"5\" class=\"mc-datatable__empty-cell\">\n                <div class=\"mc-datatable__empty-content\">\n                  <div>\n                    <div>\n                      <p>\n                        <strong>\n                          {{\n                            datatableSettings?.labels?.emptyBodyTitle || 'There is no result.'\n                          }}</strong\n                        ><br />\n                        {{\n                          datatableSettings?.labels?.emptyBodyDescription ||\n                            'Please try changing your filters.'\n                        }}\n                      </p>\n                    </div>\n                    <div *ngIf=\"datatableSettings?.activateEmptyBodyButton\">\n                      <button\n                        moz-button\n                        [theme]=\"'neutral'\"\n                        [size]=\"'s'\"\n                        [variation]=\"'bordered'\"\n                        (click)=\"emptyButtonClickEvent()\"\n                      >\n                        <moz-icon\n                          iconName=\"{{\n                            datatableSettings?.icons?.emptyBodyButtonIcon ||\n                              'Navigation_Display_Filter_24px'\n                          }}\"\n                        ></moz-icon>\n                        {{ datatableSettings?.labels?.emptyBodyButtonTitle || 'Change filters' }}\n                      </button>\n                    </div>\n                  </div>\n                </div>\n              </td>\n            </tr></ng-template\n          >\n        </tbody>\n      </table>\n    </div>\n    <moz-datatable-footer\n      *ngIf=\"datatableSettings?.activatePagination\"\n      [footerSettings]=\"footerSettings\"\n      [isLoading]=\"datatableSettings?.isLoading\"\n      (rowPerPageChangeEmitter)=\"rowPerPageChangeEvent($event)\"\n      (pageChangeEmitter)=\"pageChangeEvent($event)\"\n    ></moz-datatable-footer>\n  </div>\n</div>\n", styles: [".mc-datatable{font-family:Roboto,sans-serif;box-sizing:border-box}.mc-datatable *,.mc-datatable :after,.mc-datatable :before{box-sizing:inherit}.mc-datatable__container{border-radius:4px;box-shadow:0 1px 5px #19191933;background-color:#e7e7f0;overflow:hidden}.mc-datatable__main{scrollbar-color:#666666 #e6e6e6;scrollbar-width:thin;overflow:auto}.mc-datatable__main::-webkit-scrollbar{background-color:#e6e6e6;height:.5rem;width:.5rem}.mc-datatable__main::-webkit-scrollbar-track{background:#e6e6e6}.mc-datatable__main::-webkit-scrollbar-thumb{background:#666666}.mc-datatable__table tr,.mc-datatable thead th,.mc-datatable thead td{height:2.9375rem}.mc-datatable__table{border-collapse:collapse;border-spacing:0;caption-side:bottom;width:100%}.mc-datatable__table>thead,.mc-datatable__table>tbody{background-color:#fff}.mc-datatable__table th,.mc-datatable__table td{border-bottom:1px solid #b3b3b3;text-align:left;vertical-align:middle;padding-right:1rem;padding-left:1rem}.mc-datatable thead th,.mc-datatable thead td{font-weight:700;font-size:.75rem;line-height:1.3333333333;color:#393879;text-transform:uppercase}.mc-datatable__head{align-items:center;display:flex;justify-content:space-between}.mc-datatable tbody tr:hover:not(.mc-datatable__empty){background-color:#eaedef}.mc-datatable tbody tr.selected{background-color:#d9f0f3}.mc-datatable tbody th,.mc-datatable tbody td{font-size:.875rem;line-height:1.2857142857;color:#191919}.mc-datatable__row-parent:not(.mc-datatable__row-parent--expanded)+.mc-datatable__row-expandable{height:0}.mc-datatable__row-parent:not(.mc-datatable__row-parent--expanded)+.mc-datatable__row-expandable .mc-datatable__row-inner{overflow:hidden;max-height:0}.mc-datatable__row-parent.mc-datatable__row-parent--expanded+.mc-datatable__row-expandable .mc-datatable__row-inner{max-height:100%}.mc-datatable__row-expandable>td{padding:0;border-bottom:0}.mc-datatable__row-expandable--offset-1 table th:first-child,.mc-datatable__row-expandable--offset-1 table td:first-child{padding-left:4.25rem}.mc-datatable__row-expandable--offset-2 table th:first-child,.mc-datatable__row-expandable--offset-2 table td:first-child{padding-left:7.75rem}.mc-datatable__cell-checkbox{width:3.25rem}.mc-datatable__cell-button{width:3.5rem}.mc-datatable__cell-field{min-width:9.375rem}td.mc-datatable__cell-number{text-align:right}.mc-datatable__empty,.mc-datatable__empty:hover{background-color:#e7e7f0}.mc-datatable__empty-cell{color:#4b4a8c}.mc-datatable__empty-content{font-size:1rem;line-height:1.375;align-items:center;color:#4b4a8c;display:flex;gap:1.5rem;min-height:19.375rem;justify-content:center;text-align:center}.mc-datatable__empty-content strong{font-size:1.125rem;line-height:1.3333333333}.mc-datatable--s .mc-datatable__table tr,.mc-datatable--s .mc-datatable thead th,.mc-datatable--s .mc-datatable thead td{height:2.4375rem}.mc-datatable--l .mc-datatable__table tr,.mc-datatable--l .mc-datatable thead th,.mc-datatable--l .mc-datatable thead td{height:3.4375rem}.mc-datatable--sticky .mc-datatable__table>thead,.mc-datatable--sticky-header .mc-datatable__table>thead{box-shadow:0 4px 20px #19191933;top:0;z-index:2}.mc-datatable--sticky .mc-datatable__table>tbody tr:last-child th,.mc-datatable--sticky .mc-datatable__table>tbody tr:last-child td,.mc-datatable--sticky-header .mc-datatable__table>tbody tr:last-child th,.mc-datatable--sticky-header .mc-datatable__table>tbody tr:last-child td{border-bottom:transparent}.mc-datatable--sticky .mc-datatable__footer,.mc-datatable--sticky-header .mc-datatable__footer{border-top:1px solid #b3b3b3;position:relative;z-index:2}.mc-datatable--sticky .mc-datatable__main{padding-top:2.9375rem;transform:translateZ(0)}.mc-datatable--sticky .mc-datatable__table{scrollbar-color:#666666 #e6e6e6;scrollbar-width:thin;display:block;overflow-y:auto}.mc-datatable--sticky .mc-datatable__table::-webkit-scrollbar{background-color:#e6e6e6;height:.5rem;width:.5rem}.mc-datatable--sticky .mc-datatable__table::-webkit-scrollbar-track{background:#e6e6e6}.mc-datatable--sticky .mc-datatable__table::-webkit-scrollbar-thumb{background:#666666}.mc-datatable--sticky .mc-datatable__table>thead{position:fixed;width:100%}.mc-datatable--sticky .mc-datatable__table>thead,.mc-datatable--sticky .mc-datatable__table>tbody,.mc-datatable--sticky .mc-datatable__table>thead tr,.mc-datatable--sticky .mc-datatable__table>tbody tr,.mc-datatable--sticky .mc-datatable__table>thead th,.mc-datatable--sticky .mc-datatable__table>thead td,.mc-datatable--sticky .mc-datatable__table>tbody th,.mc-datatable--sticky .mc-datatable__table>tbody td{display:flex}.mc-datatable--sticky .mc-datatable__table>thead,.mc-datatable--sticky .mc-datatable__table>tbody,.mc-datatable--sticky .mc-datatable__table>thead tr,.mc-datatable--sticky .mc-datatable__table>tbody tr{width:100%}.mc-datatable--sticky .mc-datatable__table>tbody{flex-direction:column}.mc-datatable--sticky .mc-datatable__table>thead th,.mc-datatable--sticky .mc-datatable__table>thead td,.mc-datatable--sticky .mc-datatable__table>tbody th,.mc-datatable--sticky .mc-datatable__table>tbody td{align-items:center}.mc-datatable--sticky .mc-datatable__table>thead th:not(.mc-datatable__cell-checkbox):not(.mc-datatable__cell-button),.mc-datatable--sticky .mc-datatable__table>thead td:not(.mc-datatable__cell-checkbox):not(.mc-datatable__cell-button),.mc-datatable--sticky .mc-datatable__table>tbody th:not(.mc-datatable__cell-checkbox):not(.mc-datatable__cell-button),.mc-datatable--sticky .mc-datatable__table>tbody td:not(.mc-datatable__cell-checkbox):not(.mc-datatable__cell-button){flex:1}.mc-datatable--sticky .mc-datatable__cell-checkbox,.mc-datatable--sticky .mc-datatable__cell-button,.mc-datatable--sticky .mc-datatable__cell-field,.mc-datatable--sticky .mc-datatable__cell-number{flex-shrink:0}.mc-datatable--sticky .mc-datatable__cell-number{justify-content:flex-end}.mc-datatable--sticky-header .mc-datatable__main{overflow-y:auto}.mc-datatable--sticky-header .mc-datatable__table>thead{position:sticky}.mc-datatable--overflow-visible .mc-datatable__container,.mc-datatable--overflow-visible .mc-datatable__main{overflow:visible}.mc-datatable__btn{margin:0;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;padding:0;align-items:center;background-color:transparent;display:flex}.mc-datatable__btn-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-datatable__btn-icon,.mc-datatable__btn svg{width:1.5rem;height:1.5rem}.mc-datatable__sort{font-weight:700;font-size:.75rem;line-height:1.3333333333;color:#393879;text-transform:uppercase;align-items:center;display:flex;height:100%;font-family:inherit;justify-content:space-between;width:100%}.mc-datatable__sort-arrow{align-items:center;display:flex;flex-direction:column;height:1.5rem;justify-content:space-around;margin-left:.5rem;width:1.5rem}.mc-datatable__sort-arrow:after,.mc-datatable__sort-arrow:before{background-color:#cdd4d8;content:\"\";flex-shrink:0;height:.5rem;width:.75rem}.mc-datatable__sort-arrow:before{clip-path:polygon(50% 0%,0% 100%,100% 100%)}.asc .mc-datatable__sort-arrow:before{background-color:#605f9d}.desc .mc-datatable__sort-arrow:before{display:none}.mc-datatable__sort-arrow:after{clip-path:polygon(0 0,100% 0,50% 100%)}.asc .mc-datatable__sort-arrow:after{display:none}.desc .mc-datatable__sort-arrow:after{background-color:#605f9d}.mc-datatable__options{width:1.5rem;height:1.5rem}.mc-datatable__expand .mc-datatable__btn-icon{fill:#007f8c}.mc-datatable .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-datatable__topbar,.mc-datatable__filters{padding-bottom:1rem}.mc-datatable__topbar{justify-content:space-between}.mc-datatable__topbar,.mc-datatable__topbar-edition,.mc-datatable__topbar-actions{display:flex;gap:1rem}.mc-datatable__topbar-edition,.mc-datatable__topbar-actions{flex-wrap:wrap}.mc-datatable__topbar-edition{flex-shrink:0}.mc-datatable__topbar-actions{align-items:center;justify-content:flex-end;margin-left:auto}.mc-datatable__filters{align-items:center;display:flex;flex-wrap:wrap;gap:1rem;justify-content:flex-end}.mc-datatable__filters:not(:only-child){border-top:1px solid #b0bbc0;padding-top:1rem}.mc-datatable__footer{align-items:center;background-color:#fff;display:flex;padding:.75rem 1rem;gap:1rem}@media screen and (max-width: 679px){.mc-datatable__footer{flex-direction:column}}.mc-datatable__select{display:flex;align-items:center;gap:.5rem}.mc-datatable__select-label{font-size:.875rem;line-height:1.2857142857;color:#333;flex-shrink:0}.mc-datatable__count{font-size:.75rem;line-height:1.3333333333;color:#666}.mc-datatable__pagination{margin-left:auto}.mc-datatable__subtable{border-collapse:collapse;border-spacing:0;caption-side:bottom;width:100%;background-color:#e7e7f0}.mc-datatable__subtable th,.mc-datatable__subtable td{border-bottom-color:#a4a3c7}.mc-datatable__subtable thead th,.mc-datatable__subtable thead td{font-size:.75rem;line-height:1.3333333333;color:#1a1a4b}.mc-datatable__subtable tbody th,.mc-datatable__subtable tbody td{color:#1a1a4b}.fix-header-row{position:sticky;top:0;box-shadow:0 1px 5px #22202033;z-index:1}.header{align-items:center;display:flex;height:100%;font-family:inherit;justify-content:space-between;width:100%}.is-sorted-asc:before{background-color:var(--color-datatable-sort-arrow-active, #333333)}.is-sorted-desc:after{background-color:var(--color-datatable-sort-arrow-active, #333333)}.mc-datatable-height{height:100%}.mc-datatable__sort-arrow{cursor:pointer}.mc-datatable__fix-first-column{position:sticky;background-color:#fff;left:0}.skeleton-box{display:inline-block;position:relative;overflow:hidden;background-color:#ccc}.skeleton-box:after{position:absolute;inset:0;transform:translate(-100%);background-image:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.2) 20%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0));animation:shimmer 2s infinite;content:\"\"}@keyframes shimmer{to{transform:translate(100%)}}.checkbox-loading{width:25px;height:25px}.cells-loading{width:250px;height:25px}\n"] }]
+            args: [{ selector: 'moz-datatable', encapsulation: ViewEncapsulation.None, template: "<div class=\"mc-datatable\" [ngClass]=\"{ ' mc-datatable-height': datatableSettings?.fixHeaderRow }\">\n  <div class=\"mc-datatable__header\">\n    <ng-content select=\"moz-datatable-caption\"></ng-content>\n    <div>\n      <moz-datatable-selection\n        [selectionSettings]=\"selectionSettings\"\n        [allowAllSelected]=\"allowAllSelected\"\n        [paginationEnabled]=\"datatableSettings?.activatePagination\"\n        [rowData]=\"datatableSettings?.rowData\"\n        (updateSelectionAllEmitter)=\"selectionAllRowEvent($event)\"\n      ></moz-datatable-selection>\n    </div>\n  </div>\n  <div\n    class=\"mc-datatable__container\"\n    [ngClass]=\"{ ' mc-datatable-height': datatableSettings?.fixHeaderRow }\"\n  >\n    <div\n      class=\"mc-datatable__main\"\n      [ngClass]=\"{ ' mc-datatable-height': datatableSettings?.fixHeaderRow }\"\n    >\n      <table class=\"mc-datatable__table\" summary=\"{{ tableSummary }}\">\n        <thead [ngClass]=\"{ 'fix-header-row': datatableSettings?.fixHeaderRow }\">\n          <tr *ngIf=\"getColumns() && getColumns().length > 0\">\n            <th\n              class=\"mc-datatable__cell-checkbox moz-datatable__th mc-datatable__fix-first-column\"\n              *ngIf=\"\n                datatableSettings?.activateSelection &&\n                selectionComponent &&\n                selectionSettings &&\n                ((datatableSettings?.rowData || []).length > 0 || datatableSettings?.isLoading)\n              \"\n              id=\"checkAllPageRows\"\n              #thSelection\n            >\n              <ng-container *ngIf=\"datatableSettings?.isLoading; else notLoadingCheckbox\">\n                <div class=\"skeleton-box mu-mb-100 checkbox-loading\"></div>\n              </ng-container>\n              <ng-template #notLoadingCheckbox>\n                <moz-checkbox\n                  (change)=\"\n                    selectionComponent.onUdpateSelectionAllPageRows($event);\n                    selectionRowEvent($event)\n                  \"\n                  [indeterminate]=\"selectionComponent.isIndeterminate\"\n                  [checked]=\"\n                    (selectionSettings.allSelected && !selectionComponent.isIndeterminate) ||\n                    (!selectionSettings.allSelected &&\n                      !selectionComponent.isIndeterminate &&\n                      (this.selectionSettings.selectedIds || []).length > 0)\n                  \"\n                  [disabled]=\"datatableSettings?.isLoading || false\"\n                >\n                </moz-checkbox>\n              </ng-template>\n            </th>\n            <th\n              *ngIf=\"hasSubRow() && !datatableSettings?.isLoading\"\n              class=\"mc-datatable__fix-first-column\"\n              [style.left.px]=\"getStyleLeftForColumnFixed()\"\n              #thSubRow\n            ></th>\n            <ng-container *ngFor=\"let columnDef of getColumns()\">\n              <th\n                class=\"moz-datatable__th\"\n                *ngIf=\"!columnDef.hide\"\n                [ngClass]=\"{\n                  'mc-datatable__fix-first-column':\n                    datatableSettings?.fixFirstColumn &&\n                    getUnhiddenColumns()[0].field === columnDef.field\n                }\"\n                [style.left.px]=\"getLeftValueFixFirstColumn()\"\n              >\n                <ng-container *ngIf=\"datatableSettings?.isLoading; else notLoadingHeading\">\n                  <div class=\"skeleton-box mu-mb-100 cells-loading\"></div>\n                </ng-container>\n\n                <ng-template #notLoadingHeading>\n                  <div\n                    [mozDatatableSort]=\"columnDef\"\n                    [ngClass]=\"{ header: columnDef.sort }\"\n                    (sortEmitter)=\"sortEvent($event)\"\n                  >\n                    <ng-container\n                      *ngIf=\"\n                        getCustomHeader(columnDef.field) as customHeader;\n                        else defaultHeaderCell\n                      \"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          customHeader;\n                          context: {\n                            $implicit: {\n                              content: columnDef\n                            }\n                          }\n                        \"\n                      ></ng-container>\n                    </ng-container>\n                    <ng-template #defaultHeaderCell>\n                      {{ columnDef.headerName | uppercase }}\n                    </ng-template>\n                  </div>\n                </ng-template>\n              </th>\n            </ng-container>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container\n            *ngIf=\"\n              (datatableSettings?.rowData?.length || 0) > 0 || datatableSettings?.isLoading;\n              else emptyBody\n            \"\n          >\n            <ng-container *ngFor=\"let row of getFields(); index as i\">\n              <tr class=\"mc-datatable__row-parent\" (click)=\"rowClickEvent($event, row)\">\n                <td\n                  class=\"mc-datatable__fix-first-column\"\n                  *ngIf=\"datatableSettings?.activateSelection && selectionComponent\"\n                >\n                  <ng-container *ngIf=\"datatableSettings?.isLoading; else notLoadingCheckbox\">\n                    <div class=\"skeleton-box mu-mb-100 checkbox-loading\"></div>\n                  </ng-container>\n                  <ng-template #notLoadingCheckbox>\n                    <moz-checkbox\n                      (change)=\"\n                        selectionComponent.onUdpateSelectionRow(row); selectionRowEvent($event)\n                      \"\n                      [(ngModel)]=\"row.selected\"\n                      [checked]=\"row.selected || false\"\n                      [disabled]=\"row.disableSelection || false\"\n                    >\n                    </moz-checkbox>\n                  </ng-template>\n                </td>\n                <ng-container *ngIf=\"hasSubRow() && !datatableSettings?.isLoading\">\n                  <td\n                    *ngIf=\"row['subRow']; else noSubRow\"\n                    class=\"mc-datatable__cell-button mc-datatable__fix-first-column\"\n                    [style.left.px]=\"getStyleLeftForColumnFixed()\"\n                  >\n                    <button\n                      class=\"mc-datatable__expand mc-datatable__btn\"\n                      (click)=\"toggleRowExpansion(i); $event.stopPropagation()\"\n                    >\n                      <span class=\"mc-datatable__btn-icon\">\n                        <ng-container *ngIf=\"!expandedRows[i]; else subrowClosed\">\n                          <moz-icon [iconName]=\"'Navigation_Control_Circle--More_24px'\"></moz-icon>\n                        </ng-container>\n                        <ng-template #subrowClosed>\n                          <moz-icon [iconName]=\"'Navigation_Control_Circle--Less_24px'\"></moz-icon>\n                        </ng-template>\n                      </span>\n                    </button>\n                  </td>\n                  <ng-template #noSubRow\n                    ><td\n                      class=\"mc-datatable__cell-button mc-datatable__fix-first-column\"\n                      [style.left.px]=\"getStyleLeftForColumnFixed()\"\n                    ></td\n                  ></ng-template>\n                </ng-container>\n                <ng-container *ngFor=\"let columnDef of getColumns()\">\n                  <td\n                    *ngIf=\"!columnDef.hide\"\n                    [ngClass]=\"{\n                      'mc-datatable__fix-first-column':\n                        datatableSettings?.fixFirstColumn &&\n                        getUnhiddenColumns()[0].field === columnDef.field\n                    }\"\n                    [style.left.px]=\"getLeftValueFixFirstColumn()\"\n                  >\n                    <ng-container *ngIf=\"datatableSettings?.isLoading; else notLoadingCells\">\n                      <div class=\"skeleton-box mu-mb-100 cells-loading\"></div>\n                    </ng-container>\n                    <ng-template #notLoadingCells>\n                      <ng-container\n                        *ngIf=\"\n                          getCustomContent(columnDef.field) as customContent;\n                          else defaultContentCell\n                        \"\n                      >\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            customContent;\n                            context: {\n                              $implicit: {\n                                row: row,\n                                index: i,\n                                columnDefs: datatableSettings?.columnDefs,\n                                content: row[columnDef.field]\n                              }\n                            }\n                          \"\n                        ></ng-container>\n                      </ng-container>\n                      <ng-template #defaultContentCell>\n                        {{ row[columnDef.field] }}\n                      </ng-template>\n                    </ng-template>\n                  </td>\n                </ng-container>\n              </tr>\n              <ng-container>\n                <tr *ngIf=\"expandedRows[i]\">\n                  <td [attr.colspan]=\"getColspanForExpansionRow()\">\n                    <ng-container\n                      *ngIf=\"getCustomExpansionRowContent() as expansionRowContentComponent\"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                        expansionRowContentComponent;\n                        context: {\n                          $implicit: {\n                            subRowContent: row['subRow'],\n                            index: i,\n                          }\n                        }\n                      \"\n                      ></ng-container>\n                    </ng-container>\n                  </td>\n                </tr>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n          <ng-template #emptyBody>\n            <tr class=\"mc-datatable__empty\">\n              <td colspan=\"5\" class=\"mc-datatable__empty-cell\">\n                <div class=\"mc-datatable__empty-content\">\n                  <div>\n                    <div>\n                      <p>\n                        <strong>\n                          {{\n                            datatableSettings?.labels?.emptyBodyTitle || 'There is no result.'\n                          }}</strong\n                        ><br />\n                        {{\n                          datatableSettings?.labels?.emptyBodyDescription ||\n                            'Please try changing your filters.'\n                        }}\n                      </p>\n                    </div>\n                    <div *ngIf=\"datatableSettings?.activateEmptyBodyButton\">\n                      <button\n                        moz-button\n                        [theme]=\"'neutral'\"\n                        [size]=\"'s'\"\n                        [variation]=\"'bordered'\"\n                        (click)=\"emptyButtonClickEvent()\"\n                      >\n                        <moz-icon\n                          iconName=\"{{\n                            datatableSettings?.icons?.emptyBodyButtonIcon ||\n                              'Navigation_Display_Filter_24px'\n                          }}\"\n                        ></moz-icon>\n                        {{ datatableSettings?.labels?.emptyBodyButtonTitle || 'Change filters' }}\n                      </button>\n                    </div>\n                  </div>\n                </div>\n              </td>\n            </tr></ng-template\n          >\n        </tbody>\n      </table>\n    </div>\n    <moz-datatable-footer\n      *ngIf=\"datatableSettings?.activatePagination\"\n      [footerSettings]=\"footerSettings\"\n      [isLoading]=\"datatableSettings?.isLoading\"\n      (rowPerPageChangeEmitter)=\"rowPerPageChangeEvent($event)\"\n      (pageChangeEmitter)=\"pageChangeEvent($event)\"\n    ></moz-datatable-footer>\n  </div>\n</div>\n", styles: [".mc-datatable{font-family:Roboto,sans-serif;box-sizing:border-box}.mc-datatable *,.mc-datatable :after,.mc-datatable :before{box-sizing:inherit}.mc-datatable__container{border-radius:4px;box-shadow:0 1px 5px #19191933;background-color:#e7e7f0;overflow:hidden}.mc-datatable__main{scrollbar-color:#666666 #e6e6e6;scrollbar-width:thin;overflow:auto}.mc-datatable__main::-webkit-scrollbar{background-color:#e6e6e6;height:.5rem;width:.5rem}.mc-datatable__main::-webkit-scrollbar-track{background:#e6e6e6}.mc-datatable__main::-webkit-scrollbar-thumb{background:#666666}.mc-datatable__table tr,.mc-datatable thead th,.mc-datatable thead td{height:2.9375rem}.mc-datatable__table{border-collapse:collapse;border-spacing:0;caption-side:bottom;width:100%}.mc-datatable__table>thead,.mc-datatable__table>tbody{background-color:#fff}.mc-datatable__table th,.mc-datatable__table td{border-bottom:1px solid #b3b3b3;text-align:left;vertical-align:middle;padding-right:1rem;padding-left:1rem}.mc-datatable thead th,.mc-datatable thead td{font-weight:700;font-size:.75rem;line-height:1.3333333333;color:#393879;text-transform:uppercase}.mc-datatable__head{align-items:center;display:flex;justify-content:space-between}.mc-datatable tbody tr:hover:not(.mc-datatable__empty){background-color:#eaedef}.mc-datatable tbody tr.selected{background-color:#d9f0f3}.mc-datatable tbody th,.mc-datatable tbody td{font-size:.875rem;line-height:1.2857142857;color:#191919}.mc-datatable__row-parent:not(.mc-datatable__row-parent--expanded)+.mc-datatable__row-expandable{height:0}.mc-datatable__row-parent:not(.mc-datatable__row-parent--expanded)+.mc-datatable__row-expandable .mc-datatable__row-inner{overflow:hidden;max-height:0}.mc-datatable__row-parent.mc-datatable__row-parent--expanded+.mc-datatable__row-expandable .mc-datatable__row-inner{max-height:100%}.mc-datatable__row-expandable>td{padding:0;border-bottom:0}.mc-datatable__row-expandable--offset-1 table th:first-child,.mc-datatable__row-expandable--offset-1 table td:first-child{padding-left:4.25rem}.mc-datatable__row-expandable--offset-2 table th:first-child,.mc-datatable__row-expandable--offset-2 table td:first-child{padding-left:7.75rem}.mc-datatable__cell-checkbox{width:3.25rem}.mc-datatable__cell-button{width:3.5rem}.mc-datatable__cell-field{min-width:9.375rem}td.mc-datatable__cell-number{text-align:right}.mc-datatable__empty,.mc-datatable__empty:hover{background-color:#e7e7f0}.mc-datatable__empty-cell{color:#4b4a8c}.mc-datatable__empty-content{font-size:1rem;line-height:1.375;align-items:center;color:#4b4a8c;display:flex;gap:1.5rem;min-height:19.375rem;justify-content:center;text-align:center}.mc-datatable__empty-content strong{font-size:1.125rem;line-height:1.3333333333}.mc-datatable--s .mc-datatable__table tr,.mc-datatable--s .mc-datatable thead th,.mc-datatable--s .mc-datatable thead td{height:2.4375rem}.mc-datatable--l .mc-datatable__table tr,.mc-datatable--l .mc-datatable thead th,.mc-datatable--l .mc-datatable thead td{height:3.4375rem}.mc-datatable--sticky .mc-datatable__table>thead,.mc-datatable--sticky-header .mc-datatable__table>thead{box-shadow:0 4px 20px #19191933;top:0;z-index:2}.mc-datatable--sticky .mc-datatable__table>tbody tr:last-child th,.mc-datatable--sticky .mc-datatable__table>tbody tr:last-child td,.mc-datatable--sticky-header .mc-datatable__table>tbody tr:last-child th,.mc-datatable--sticky-header .mc-datatable__table>tbody tr:last-child td{border-bottom:transparent}.mc-datatable--sticky .mc-datatable__footer,.mc-datatable--sticky-header .mc-datatable__footer{border-top:1px solid #b3b3b3;position:relative;z-index:2}.mc-datatable--sticky .mc-datatable__main{padding-top:2.9375rem;transform:translateZ(0)}.mc-datatable--sticky .mc-datatable__table{scrollbar-color:#666666 #e6e6e6;scrollbar-width:thin;display:block;overflow-y:auto}.mc-datatable--sticky .mc-datatable__table::-webkit-scrollbar{background-color:#e6e6e6;height:.5rem;width:.5rem}.mc-datatable--sticky .mc-datatable__table::-webkit-scrollbar-track{background:#e6e6e6}.mc-datatable--sticky .mc-datatable__table::-webkit-scrollbar-thumb{background:#666666}.mc-datatable--sticky .mc-datatable__table>thead{position:fixed;width:100%}.mc-datatable--sticky .mc-datatable__table>thead,.mc-datatable--sticky .mc-datatable__table>tbody,.mc-datatable--sticky .mc-datatable__table>thead tr,.mc-datatable--sticky .mc-datatable__table>tbody tr,.mc-datatable--sticky .mc-datatable__table>thead th,.mc-datatable--sticky .mc-datatable__table>thead td,.mc-datatable--sticky .mc-datatable__table>tbody th,.mc-datatable--sticky .mc-datatable__table>tbody td{display:flex}.mc-datatable--sticky .mc-datatable__table>thead,.mc-datatable--sticky .mc-datatable__table>tbody,.mc-datatable--sticky .mc-datatable__table>thead tr,.mc-datatable--sticky .mc-datatable__table>tbody tr{width:100%}.mc-datatable--sticky .mc-datatable__table>tbody{flex-direction:column}.mc-datatable--sticky .mc-datatable__table>thead th,.mc-datatable--sticky .mc-datatable__table>thead td,.mc-datatable--sticky .mc-datatable__table>tbody th,.mc-datatable--sticky .mc-datatable__table>tbody td{align-items:center}.mc-datatable--sticky .mc-datatable__table>thead th:not(.mc-datatable__cell-checkbox):not(.mc-datatable__cell-button),.mc-datatable--sticky .mc-datatable__table>thead td:not(.mc-datatable__cell-checkbox):not(.mc-datatable__cell-button),.mc-datatable--sticky .mc-datatable__table>tbody th:not(.mc-datatable__cell-checkbox):not(.mc-datatable__cell-button),.mc-datatable--sticky .mc-datatable__table>tbody td:not(.mc-datatable__cell-checkbox):not(.mc-datatable__cell-button){flex:1}.mc-datatable--sticky .mc-datatable__cell-checkbox,.mc-datatable--sticky .mc-datatable__cell-button,.mc-datatable--sticky .mc-datatable__cell-field,.mc-datatable--sticky .mc-datatable__cell-number{flex-shrink:0}.mc-datatable--sticky .mc-datatable__cell-number{justify-content:flex-end}.mc-datatable--sticky-header .mc-datatable__main{overflow-y:auto}.mc-datatable--sticky-header .mc-datatable__table>thead{position:sticky}.mc-datatable--overflow-visible .mc-datatable__container,.mc-datatable--overflow-visible .mc-datatable__main{overflow:visible}.mc-datatable__btn{margin:0;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;padding:0;align-items:center;background-color:transparent;display:flex}.mc-datatable__btn-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-datatable__btn-icon,.mc-datatable__btn svg{width:1.5rem;height:1.5rem}.mc-datatable__sort{font-weight:700;font-size:.75rem;line-height:1.3333333333;color:#393879;text-transform:uppercase;align-items:center;display:flex;height:100%;font-family:inherit;justify-content:space-between;width:100%}.mc-datatable__sort-arrow{align-items:center;display:flex;flex-direction:column;height:1.5rem;justify-content:space-around;margin-left:.5rem;width:1.5rem}.mc-datatable__sort-arrow:after,.mc-datatable__sort-arrow:before{background-color:#cdd4d8;content:\"\";flex-shrink:0;height:.5rem;width:.75rem}.mc-datatable__sort-arrow:before{clip-path:polygon(50% 0%,0% 100%,100% 100%)}.asc .mc-datatable__sort-arrow:before{background-color:#605f9d}.desc .mc-datatable__sort-arrow:before{display:none}.mc-datatable__sort-arrow:after{clip-path:polygon(0 0,100% 0,50% 100%)}.asc .mc-datatable__sort-arrow:after{display:none}.desc .mc-datatable__sort-arrow:after{background-color:#605f9d}.mc-datatable__options{width:1.5rem;height:1.5rem}.mc-datatable__expand .mc-datatable__btn-icon{fill:#007f8c}.mc-datatable .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-datatable__topbar,.mc-datatable__filters{padding-bottom:1rem}.mc-datatable__topbar{justify-content:space-between}.mc-datatable__topbar,.mc-datatable__topbar-edition,.mc-datatable__topbar-actions{display:flex;gap:1rem}.mc-datatable__topbar-edition,.mc-datatable__topbar-actions{flex-wrap:wrap}.mc-datatable__topbar-edition{flex-shrink:0}.mc-datatable__topbar-actions{align-items:center;justify-content:flex-end;margin-left:auto}.mc-datatable__filters{align-items:center;display:flex;flex-wrap:wrap;gap:1rem;justify-content:flex-end}.mc-datatable__filters:not(:only-child){border-top:1px solid #b0bbc0;padding-top:1rem}.mc-datatable__footer{align-items:center;background-color:#fff;display:flex;padding:.75rem 1rem;gap:1rem}@media screen and (max-width: 679px){.mc-datatable__footer{flex-direction:column}}.mc-datatable__select{display:flex;align-items:center;gap:.5rem}.mc-datatable__select-label{font-size:.875rem;line-height:1.2857142857;color:#333;flex-shrink:0}.mc-datatable__count{font-size:.75rem;line-height:1.3333333333;color:#666}.mc-datatable__pagination{margin-left:auto}.mc-datatable__subtable{border-collapse:collapse;border-spacing:0;caption-side:bottom;width:100%;background-color:#e7e7f0}.mc-datatable__subtable th,.mc-datatable__subtable td{border-bottom-color:#a4a3c7}.mc-datatable__subtable thead th,.mc-datatable__subtable thead td{font-size:.75rem;line-height:1.3333333333;color:#1a1a4b}.mc-datatable__subtable tbody th,.mc-datatable__subtable tbody td{color:#1a1a4b}.fix-header-row{position:sticky;top:0;box-shadow:0 1px 5px #22202033;z-index:1}.header{align-items:center;display:flex;height:100%;font-family:inherit;justify-content:space-between;width:100%}.is-sorted-asc:before{background-color:var(--color-datatable-sort-arrow-active, #333333)}.is-sorted-desc:after{background-color:var(--color-datatable-sort-arrow-active, #333333)}.mc-datatable-height{height:100%}.mc-datatable__sort-arrow{cursor:pointer}.mc-datatable__fix-first-column{position:sticky;background-color:#fff;left:0}.skeleton-box{display:inline-block;position:relative;overflow:hidden;background-color:#ccc}.skeleton-box:after{position:absolute;inset:0;transform:translate(-100%);background-image:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.2) 20%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0));animation:shimmer 2s infinite;content:\"\"}@keyframes shimmer{to{transform:translate(100%)}}.checkbox-loading{width:25px;height:25px}.cells-loading{width:250px;height:25px}\n"] }]
         }], propDecorators: { footerSettings: [{
                 type: Input
             }], selectionSettings: [{
                 type: Input
+            }], allowAllSelected: [{
+                type: Input
             }], datatableSettings: [{
                 type: Input
+            }], tableSummary: [{
+                type: Input
             }], rowClick: [{
                 type: Output
             }], sortColumn: [{
@@ -3154,6 +3165,7 @@ class DropdownComponent {
         this.openState = false;
         this.labelClearButton = 'Clear';
         this.scrollEnd = new EventEmitter();
+        this.isOpen = new EventEmitter();
         this.onChange = () => { };
         this.onTouch = () => { };
     }
@@ -3168,6 +3180,9 @@ class DropdownComponent {
     registerOnTouched(fn) {
         this.onTouch = fn;
     }
+    openChangeEvent($event) {
+        this.isOpen.emit($event);
+    }
     openListbox() {
         if (this.openState) {
             this.openState = false;
@@ -3245,13 +3260,13 @@ class DropdownComponent {
     }
 }
 DropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropdownComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DropdownComponent, selector: "moz-dropdown", inputs: { listboxItems: "listboxItems", multiple: "multiple", placeholder: "placeholder", disabled: "disabled", loading: "loading", clearfield: "clearfield", valid: "valid", invalid: "invalid", showSelectedTag: "showSelectedTag", showTagList: "showTagList", maxShowingSelectedTags: "maxShowingSelectedTags", size: "size", layerTagsTitle: "layerTagsTitle", layerTagsIcon: "layerTagsIcon", openState: "openState", labelClearButton: "labelClearButton" }, outputs: { scrollEnd: "scrollEnd" }, providers: [
+DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DropdownComponent, selector: "moz-dropdown", inputs: { listboxItems: "listboxItems", multiple: "multiple", placeholder: "placeholder", disabled: "disabled", loading: "loading", clearfield: "clearfield", valid: "valid", invalid: "invalid", showSelectedTag: "showSelectedTag", showTagList: "showTagList", maxShowingSelectedTags: "maxShowingSelectedTags", size: "size", layerTagsTitle: "layerTagsTitle", layerTagsIcon: "layerTagsIcon", openState: "openState", labelClearButton: "labelClearButton" }, outputs: { scrollEnd: "scrollEnd", isOpen: "isOpen" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => DropdownComponent),
             multi: true,
         },
-    ], viewQueries: [{ propertyName: "taglistComponent", first: true, predicate: ["taglist"], descendants: true }], ngImport: i0, template: "<div\n  class=\"mc-dropdown mc-dropdown--clearable\"\n  [ngClass]=\"{ 'mc-dropdown--multi': multiple }\"\n  [ngStyle]=\"{\n    '--dropdown-tag-width':\n      showSelectedTag && multiple && getSelectedListboxItems().length > 0 ? '3.5rem' : '',\n    '--dropdown-width': '100%'\n  }\"\n>\n  <moz-listbox\n    [listboxItems]=\"listboxItems\"\n    [(isOpen)]=\"openState\"\n    [multiple]=\"multiple\"\n    [selectedItems]=\"selectedItems\"\n    (itemsSelected)=\"itemsSelectedListboxEvent($event)\"\n    (scrollEnd)=\"scrollEndEvent($event)\"\n  >\n    <div class=\"mc-dropdown__main\" reference>\n      <moz-tag\n        *ngIf=\"showSelectedTag && multiple && getSelectedListboxItems().length > 0\"\n        class=\"mc-dropdown__tag mc-tag-removable mc-tag-removable--s mc-autocomplete__tag\"\n        type=\"removable\"\n        [size]=\"'s'\"\n        (clickOnRemove)=\"clearFieldEvent()\"\n      >\n        {{ getSelectedListboxItems().length }}</moz-tag\n      >\n\n      <button\n        type=\"button\"\n        id=\"trigger\"\n        class=\"mc-select mc-dropdown__trigger mc-button--{{ size }}\"\n        [ngClass]=\"{\n          'is-open': openState,\n          'is-invalid': invalid,\n          'is-valid': valid,\n        }\"\n        aria-haspopup=\"listbox\"\n        title=\"Dropdown menu options\"\n        [disabled]=\"disabled\"\n        aria-expanded=\"false\"\n        (click)=\"openListbox()\"\n      >\n        <ng-container *ngIf=\"multiple; else monoSelection\">{{\n          getLabelFromMultipleSelection()\n        }}</ng-container>\n        <ng-template #monoSelection>{{ getLabelFromMonoSelection() }}</ng-template>\n      </button>\n\n      <div class=\"mc-dropdown__tools\">\n        <div class=\"mc-dropdown__loader mc-loader mc-loader--s\" *ngIf=\"loading\">\n          <span class=\"mc-loader__spinner\">\n            <moz-loader class=\"mc-loader__icon\" size=\"s\"></moz-loader>\n          </span>\n        </div>\n        <button\n          class=\"mc-dropdown__clear\"\n          type=\"button\"\n          *ngIf=\"canClearField()\"\n          (click)=\"clearFieldEvent()\"\n        >\n          <moz-icon\n            class=\"mc-dropdown__clear-icon\"\n            [iconName]=\"'Navigation_Control_Tag--Cross_24px'\"\n          ></moz-icon>\n          <span class=\"mc-dropdown__clear-text\">{{ labelClearButton }}</span>\n        </button>\n      </div>\n    </div>\n  </moz-listbox>\n</div>\n<div class=\"mc-dropdow__taglist\" *ngIf=\"showTagList && multiple && !openState\">\n  <moz-taglist\n    #taglist\n    (removeTag)=\"removeTagEvent($event)\"\n    [tagItems]=\"getTagItemsFromSelectedItems()\"\n    [max]=\"maxShowingSelectedTags\"\n    [layerTagsTitle]=\"layerTagsTitle\"\n    [layerTagsIcon]=\"layerTagsIcon\"\n  ></moz-taglist>\n</div>\n", styles: [".mc-select{font-family:Roboto,sans-serif;font-weight:400;box-sizing:border-box;outline:none;appearance:none;padding:0;margin:0;box-shadow:none;border:none;font-size:1rem;line-height:1.125;background-position:right 1rem center,right 2.5rem center;padding:calc(.9375rem - 1px) 3rem calc(.9375rem - 1px) calc(.75rem - 1px);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23191919' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E\");background-color:#fff;background-repeat:no-repeat;background-size:1rem 1rem,1.5rem 1.5rem;border:1px solid #666666;border-radius:4px;color:#191919;transition:border-color .2s ease,box-shadow .2s ease;width:100%}.mc-select[type=number]::-webkit-inner-spin-button,.mc-select[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}.mc-select[type=number]{-moz-appearance:textfield}.mc-select[type=search]::-webkit-search-decoration:hover,.mc-select[type=search]::-webkit-search-cancel-button:hover{cursor:pointer}.mc-select::-ms-expand{display:none}.mc-select:hover{border-color:#191919}.mc-select:focus{box-shadow:0 0 0 .125rem #fff,0 0 0 .25rem #758992}.mc-select:disabled{background-color:#e6e6e6;border-color:#e6e6e6;color:#666;cursor:not-allowed;opacity:1}.mc-select.is-invalid{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23191919' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E\"),url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNjNjExMTIiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMTAxMCAxMEExMCAxMCAwIDAwMTIgMnptMCAxOGE4IDggMCAxMTgtOCA4IDggMCAwMS04IDh6Ii8+PHBhdGggZD0iTTEyIDdhMSAxIDAgMDAtMSAxdjQuMzhhMSAxIDAgMDAyIDBWOGExIDEgMCAwMC0xLTF6Ii8+PGNpcmNsZSBjeD0iMTIiIGN5PSIxNiIgcj0iMSIvPjwvc3ZnPg==);border-color:#c61112}.mc-select.is-valid{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23191919' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E\"),url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjNDZhNjEwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiA0YTggOCAwIDExLTggOCA4IDggMCAwMTgtOG0wLTJhMTAgMTAgMCAxMDEwIDEwQTEwIDEwIDAgMDAxMiAyeiIvPjxwYXRoIGQ9Ik0xMC43MyAxNS43NWExIDEgMCAwMS0uNjgtLjI2bC0zLTIuNzRhMSAxIDAgMDExLjM2LTEuNDdsMi4yNSAyLjA4IDQuMzYtNC40MmExIDEgMCAxMTEuNDIgMS40MWwtNSA1LjFhMSAxIDAgMDEtLjcxLjN6Ii8+PC9zdmc+);border-color:#46a610}.mc-select--s{font-size:.875rem;line-height:1.1428571429;background-position:right .5rem center,right 2rem center;padding:calc(.5rem - 1px) 2rem calc(.5rem - 1px) calc(.5rem - 1px)}@media screen and (min-width: 680px){.mc-select--s\\@from-m{font-size:.875rem;line-height:1.1428571429;background-position:right .5rem center,right 2rem center;padding:calc(.5rem - 1px) 2rem calc(.5rem - 1px) calc(.5rem - 1px)}}@media screen and (min-width: 1024px){.mc-select--s\\@from-l{font-size:.875rem;line-height:1.1428571429;background-position:right .5rem center,right 2rem center;padding:calc(.5rem - 1px) 2rem calc(.5rem - 1px) calc(.5rem - 1px)}}@media screen and (min-width: 1280px){.mc-select--s\\@from-xl{font-size:.875rem;line-height:1.1428571429;background-position:right .5rem center,right 2rem center;padding:calc(.5rem - 1px) 2rem calc(.5rem - 1px) calc(.5rem - 1px)}}@media screen and (min-width: 1920px){.mc-select--s\\@from-xxl{font-size:.875rem;line-height:1.1428571429;background-position:right .5rem center,right 2rem center;padding:calc(.5rem - 1px) 2rem calc(.5rem - 1px) calc(.5rem - 1px)}}.mc-select--m{font-size:1rem;line-height:1.125;background-position:right 1rem center,right 2.5rem center;padding:calc(.9375rem - 1px) 3rem calc(.9375rem - 1px) calc(.75rem - 1px)}@media screen and (min-width: 680px){.mc-select--m\\@from-m{font-size:1rem;line-height:1.125;background-position:right 1rem center,right 2.5rem center;padding:calc(.9375rem - 1px) 3rem calc(.9375rem - 1px) calc(.75rem - 1px)}}@media screen and (min-width: 1024px){.mc-select--m\\@from-l{font-size:1rem;line-height:1.125;background-position:right 1rem center,right 2.5rem center;padding:calc(.9375rem - 1px) 3rem calc(.9375rem - 1px) calc(.75rem - 1px)}}@media screen and (min-width: 1280px){.mc-select--m\\@from-xl{font-size:1rem;line-height:1.125;background-position:right 1rem center,right 2.5rem center;padding:calc(.9375rem - 1px) 3rem calc(.9375rem - 1px) calc(.75rem - 1px)}}@media screen and (min-width: 1920px){.mc-select--m\\@from-xxl{font-size:1rem;line-height:1.125;background-position:right 1rem center,right 2.5rem center;padding:calc(.9375rem - 1px) 3rem calc(.9375rem - 1px) calc(.75rem - 1px)}}.mc-listbox{background-color:#fff;border:1px solid #666666;border-radius:3px;overflow-y:auto;max-height:var(--listbox-height, 13.8125rem);max-width:var(--listbox-maxwidth, none);min-width:var(--listbox-minwidth, 18rem);width:var(--listbox-width, auto)}.mc-listbox::-webkit-scrollbar{background-color:#e6e6e6;width:.25rem}.mc-listbox::-webkit-scrollbar-thumb{background:#666666}.mc-listbox__list{list-style:none;margin:0;padding-left:0}.mc-listbox__tile{align-items:center;display:flex;gap:.5rem;height:3rem;justify-content:flex-start;padding-left:.75rem;padding-right:.75rem;position:relative}.mc-listbox__tile:not(.mc-listbox__tile--empty):not(.is-disabled):hover{background-color:#e6e6e6;box-shadow:inset 9px 0 0 -7px #191919}.mc-listbox__tile--danger{color:#c61112}.mc-listbox__tile--empty{color:#666;justify-content:center}.mc-listbox__tile--empty .mc-listbox__label{cursor:default}.mc-listbox__tile.is-disabled{box-shadow:none;background-color:#ccc;color:#666;pointer-events:none}.mc-listbox__flag,.mc-listbox__icon,.mc-listbox__logo{height:2rem;width:2rem}.mc-listbox__flag{font-size:1.4375rem;line-height:1.3913043478;text-align:center}.mc-listbox__icon{fill:#666}.mc-listbox__label{color:currentColor;cursor:pointer;white-space:nowrap}button.mc-listbox__label{background:none;border:none;padding:0;font-size:inherit;font-family:inherit}.mc-listbox__label:after{content:\"\";position:absolute;inset:0;z-index:2}.mc-listbox__input{margin-left:auto;order:1}.mc-listbox--left{right:0}.mc-listbox:not(.mc-listbox--multi) .mc-listbox__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-listbox--options .mc-listbox__tile:not(:last-child){border-bottom:1px solid #b3b3b3}.mc-listbox--options .mc-listbox__tile.is-selected .mc-listbox__label:before{visibility:visible}.mc-listbox--options .mc-listbox__tile.is-selected.is-disabled .mc-listbox__label:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\")}.mc-listbox--options .mc-listbox__input:checked+.mc-listbox__label:before{visibility:visible}.mc-listbox--options .mc-listbox__input:checked:disabled+.mc-listbox__label:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\")}.mc-listbox--options .mc-listbox__label:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23191919' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\");background-position:center;background-repeat:no-repeat;background-size:1.5rem;content:\"\";height:1.5rem;position:absolute;right:.75rem;top:0;transform:translateY(50%);width:1.5rem;visibility:hidden}.mc-listbox--actions{--listbox-height: auto;--listbox-minwidth: px-to-rem(278)}.mc-listbox--actions .mc-listbox__list:not(:last-child){border-bottom:1px solid #b3b3b3}.mc-listbox--actions .mc-listbox__list:first-child{padding-top:.4375rem;padding-bottom:.5rem}.mc-listbox--actions .mc-listbox__list:last-child{padding-top:.5rem;padding-bottom:.4375rem}.mc-listbox--actions .mc-listbox__list:not(:first-child):not(:last-child){padding-top:.5rem;padding-bottom:.5rem}.mc-listbox--overlay{position:absolute;z-index:10}.mc-loader{color:#007f8c;align-items:center;display:inline-flex;flex-direction:column}.mc-loader .mc-loader__spinner{height:2rem;width:2rem}.mc-loader .mc-loader__path{stroke-width:4}.mc-loader .mc-loader__path{stroke:currentColor}.mc-loader__spinner:not(:only-child){margin-bottom:1rem}.mc-loader__icon{animation:rotate-loader 2s linear infinite;transform-origin:center}.mc-loader__path{fill:none;stroke-dasharray:1,200;stroke-dashoffset:0;stroke-linecap:round;animation:animate-dash-loader 2s ease-in-out infinite}.mc-loader__text{font-size:1rem;line-height:1.375;color:currentColor}.mc-loader--s .mc-loader__spinner{height:1.5rem;width:1.5rem}.mc-loader--s .mc-loader__path{stroke-width:4}.mc-loader--l .mc-loader__spinner{height:4rem;width:4rem}.mc-loader--l .mc-loader__path{stroke-width:8}.mc-loader--dark{color:#191919}.mc-loader--dark .mc-loader__path{stroke:currentColor}.mc-loader--light{color:#fff}.mc-loader--light .mc-loader__path{stroke:currentColor}@keyframes rotate-loader{0%{transform:rotate(0)}to{transform:rotate(270deg)}}@keyframes animate-dash-loader{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}.mc-dropdown{align-self:start;position:relative;min-width:18rem;max-width:var(--dropdown-width, auto);width:100%}.mc-dropdown__tag,.mc-dropdown__tools{position:absolute;top:50%;transform:translateY(-50%);z-index:2}.mc-dropdown__tag{left:.75rem}.mc-dropdown__trigger{display:block;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.mc-dropdown__trigger.is-open{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23000000' viewBox='0 0 16 16'%3E%3Cpath d='M2 10.5a1 1 0 01.29-.71l5-5a1 1 0 011.42 0l5 5a1 1 0 01-1.42 1.42L8 6.91l-4.29 4.3a1 1 0 01-1.42 0A1 1 0 012 10.5z'/%3E%3C/svg%3E\")}.mc-dropdown__tools{align-items:center;background-color:#fff;display:flex;gap:.5rem;justify-content:flex-end;right:2.5rem}.is-valid+.mc-dropdown__tools,.is-invalid+.mc-dropdown__tools{right:4.5rem}.mc-dropdown__clear{margin:0;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;padding:0;box-shadow:0 0 0 0 transparent;transition:box-shadow .15s ease;background:none;border-radius:50%}.mc-dropdown__clear:focus{box-shadow:0 0 0 2px #758992}.mc-dropdown__clear,.mc-dropdown__clear-icon{height:1.5rem;width:1.5rem}.mc-dropdown__clear-icon{fill:#666}.mc-dropdown__clear-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-dropdown--multi .mc-dropdown__trigger{padding-left:calc(.75rem + var(--dropdown-tag-width, 0px))}.mc-button{margin:0;box-shadow:none;text-decoration:none;outline:none;border:none;padding:0;color:#fff;background-color:#007f8c;font-family:Roboto,sans-serif;font-weight:700;font-size:1rem;line-height:1.375;padding:.6875rem 1.5rem;min-height:3rem;min-width:3rem;cursor:pointer;border-radius:4px;text-align:center;border:2px solid transparent;transition:all ease .2s;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;align-items:stretch;box-sizing:border-box;fill:currentColor}.mc-button:hover{background-color:#006974;color:#fff}.mc-button:active{background-color:#006974}.mc-button:disabled,.mc-button.is-disabled{background-color:#ccc;border-color:transparent;color:#666;cursor:not-allowed}.mc-button .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button .mc-button__icon:first-child,.mc-button .mc-button__icon:last-child{margin-bottom:-1px;margin-top:-1px}.mc-button .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}.mc-button:focus{box-shadow:0 0 0 .125rem #fff,0 0 0 .25rem #758992}.mc-button--s{font-size:.875rem;line-height:1.2857142857;padding:.3125rem 1rem;min-height:2rem;min-width:2rem}.mc-button--s .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--s .mc-button__icon:first-child,.mc-button--s .mc-button__icon:last-child{margin-bottom:-.1875rem;margin-top:-.1875rem}.mc-button--s .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:1.5rem;height:1.5rem}@media screen and (min-width: 680px){.mc-button--s\\@from-m{font-size:.875rem;line-height:1.2857142857;padding:.3125rem 1rem;min-height:2rem;min-width:2rem}.mc-button--s\\@from-m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--s\\@from-m .mc-button__icon:first-child,.mc-button--s\\@from-m .mc-button__icon:last-child{margin-bottom:-.1875rem;margin-top:-.1875rem}.mc-button--s\\@from-m .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:1.5rem;height:1.5rem}}@media screen and (min-width: 1024px){.mc-button--s\\@from-l{font-size:.875rem;line-height:1.2857142857;padding:.3125rem 1rem;min-height:2rem;min-width:2rem}.mc-button--s\\@from-l .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--s\\@from-l .mc-button__icon:first-child,.mc-button--s\\@from-l .mc-button__icon:last-child{margin-bottom:-.1875rem;margin-top:-.1875rem}.mc-button--s\\@from-l .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:1.5rem;height:1.5rem}}@media screen and (min-width: 1280px){.mc-button--s\\@from-xl{font-size:.875rem;line-height:1.2857142857;padding:.3125rem 1rem;min-height:2rem;min-width:2rem}.mc-button--s\\@from-xl .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--s\\@from-xl .mc-button__icon:first-child,.mc-button--s\\@from-xl .mc-button__icon:last-child{margin-bottom:-.1875rem;margin-top:-.1875rem}.mc-button--s\\@from-xl .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:1.5rem;height:1.5rem}}@media screen and (min-width: 1920px){.mc-button--s\\@from-xxl{font-size:.875rem;line-height:1.2857142857;padding:.3125rem 1rem;min-height:2rem;min-width:2rem}.mc-button--s\\@from-xxl .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--s\\@from-xxl .mc-button__icon:first-child,.mc-button--s\\@from-xxl .mc-button__icon:last-child{margin-bottom:-.1875rem;margin-top:-.1875rem}.mc-button--s\\@from-xxl .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:1.5rem;height:1.5rem}}.mc-button--m{font-size:1rem;line-height:1.375;padding:.6875rem 1.5rem;min-height:3rem;min-width:3rem}.mc-button--m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:first-child,.mc-button--m .mc-button__icon:last-child{margin-bottom:-1px;margin-top:-1px}.mc-button--m .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}@media screen and (min-width: 680px){.mc-button--m\\@from-m{font-size:1rem;line-height:1.375;padding:.6875rem 1.5rem;min-height:3rem;min-width:3rem}.mc-button--m\\@from-m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m\\@from-m .mc-button__icon:first-child,.mc-button--m\\@from-m .mc-button__icon:last-child{margin-bottom:-1px;margin-top:-1px}.mc-button--m\\@from-m .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}}@media screen and (min-width: 1024px){.mc-button--m\\@from-l{font-size:1rem;line-height:1.375;padding:.6875rem 1.5rem;min-height:3rem;min-width:3rem}.mc-button--m\\@from-l .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m\\@from-l .mc-button__icon:first-child,.mc-button--m\\@from-l .mc-button__icon:last-child{margin-bottom:-1px;margin-top:-1px}.mc-button--m\\@from-l .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}}@media screen and (min-width: 1280px){.mc-button--m\\@from-xl{font-size:1rem;line-height:1.375;padding:.6875rem 1.5rem;min-height:3rem;min-width:3rem}.mc-button--m\\@from-xl .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m\\@from-xl .mc-button__icon:first-child,.mc-button--m\\@from-xl .mc-button__icon:last-child{margin-bottom:-1px;margin-top:-1px}.mc-button--m\\@from-xl .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}}@media screen and (min-width: 1920px){.mc-button--m\\@from-xxl{font-size:1rem;line-height:1.375;padding:.6875rem 1.5rem;min-height:3rem;min-width:3rem}.mc-button--m\\@from-xxl .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m\\@from-xxl .mc-button__icon:first-child,.mc-button--m\\@from-xxl .mc-button__icon:last-child{margin-bottom:-1px;margin-top:-1px}.mc-button--m\\@from-xxl .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}}.mc-button--l{font-size:1.125rem;line-height:1.3333333333;padding:.875rem 1.5rem;min-height:3.5rem;min-width:3.5rem}.mc-button--l .mc-button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:first-child,.mc-button--l .mc-button__icon:last-child{margin-bottom:-.25rem;margin-top:-.25rem}.mc-button--l .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}@media screen and (min-width: 680px){.mc-button--l\\@from-m{font-size:1.125rem;line-height:1.3333333333;padding:.875rem 1.5rem;min-height:3.5rem;min-width:3.5rem}.mc-button--l\\@from-m .mc-button__icon{width:2rem;height:2rem}.mc-button--l\\@from-m .mc-button__icon:first-child,.mc-button--l\\@from-m .mc-button__icon:last-child{margin-bottom:-.25rem;margin-top:-.25rem}.mc-button--l\\@from-m .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}}@media screen and (min-width: 1024px){.mc-button--l\\@from-l{font-size:1.125rem;line-height:1.3333333333;padding:.875rem 1.5rem;min-height:3.5rem;min-width:3.5rem}.mc-button--l\\@from-l .mc-button__icon{width:2rem;height:2rem}.mc-button--l\\@from-l .mc-button__icon:first-child,.mc-button--l\\@from-l .mc-button__icon:last-child{margin-bottom:-.25rem;margin-top:-.25rem}.mc-button--l\\@from-l .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}}@media screen and (min-width: 1280px){.mc-button--l\\@from-xl{font-size:1.125rem;line-height:1.3333333333;padding:.875rem 1.5rem;min-height:3.5rem;min-width:3.5rem}.mc-button--l\\@from-xl .mc-button__icon{width:2rem;height:2rem}.mc-button--l\\@from-xl .mc-button__icon:first-child,.mc-button--l\\@from-xl .mc-button__icon:last-child{margin-bottom:-.25rem;margin-top:-.25rem}.mc-button--l\\@from-xl .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}}@media screen and (min-width: 1920px){.mc-button--l\\@from-xxl{font-size:1.125rem;line-height:1.3333333333;padding:.875rem 1.5rem;min-height:3.5rem;min-width:3.5rem}.mc-button--l\\@from-xxl .mc-button__icon{width:2rem;height:2rem}.mc-button--l\\@from-xxl .mc-button__icon:first-child,.mc-button--l\\@from-xxl .mc-button__icon:last-child{margin-bottom:-.25rem;margin-top:-.25rem}.mc-button--l\\@from-xxl .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}}.mc-button--fit{display:inline-flex;width:auto}@media screen and (min-width: 680px){.mc-button--fit\\@from-m{display:inline-flex;width:auto}}@media screen and (min-width: 1024px){.mc-button--fit\\@from-l{display:inline-flex;width:auto}}@media screen and (min-width: 1280px){.mc-button--fit\\@from-xl{display:inline-flex;width:auto}}@media screen and (min-width: 1920px){.mc-button--fit\\@from-xxl{display:inline-flex;width:auto}}.mc-button--full{display:flex;width:100%}@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)){.mc-button--full{width:-webkit-fill-available;width:-moz-available;width:stretch}}@media screen and (min-width: 680px){.mc-button--full\\@from-m{display:flex;width:100%}@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)){.mc-button--full\\@from-m{width:-webkit-fill-available;width:-moz-available;width:stretch}}}@media screen and (min-width: 1024px){.mc-button--full\\@from-l{display:flex;width:100%}@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)){.mc-button--full\\@from-l{width:-webkit-fill-available;width:-moz-available;width:stretch}}}@media screen and (min-width: 1280px){.mc-button--full\\@from-xl{display:flex;width:100%}@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)){.mc-button--full\\@from-xl{width:-webkit-fill-available;width:-moz-available;width:stretch}}}@media screen and (min-width: 1920px){.mc-button--full\\@from-xxl{display:flex;width:100%}@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)){.mc-button--full\\@from-xxl{width:-webkit-fill-available;width:-moz-available;width:stretch}}}.mc-button--square{align-items:center;height:0;padding:0}@media screen and (min-width: 1024px){.mc-button--square{padding:0}}.mc-button__icon{flex-shrink:0}.mc-button__icon:last-child{margin-left:.5rem;margin-right:-.25rem}.mc-button__icon:first-child{margin-right:.5rem;margin-left:-.25rem}.mc-button__icon:only-child{margin:0}.mc-button__label{align-items:center;display:flex;pointer-events:none}a.mc-button:disabled,a.mc-button.is-disabled{pointer-events:none}.mc-button--solid-primary-02{background-color:#6a7081}.mc-button--solid-primary-02:hover{background-color:#242938}.mc-button--solid-primary-02:active{background-color:#171b26}.mc-button--solid-primary-02:disabled,.mc-button--solid-primary-02.is-disabled{background-color:#ccc;border-color:transparent;color:#666;cursor:not-allowed}.mc-button--solid-neutral{background-color:#333}.mc-button--solid-neutral:hover{background-color:#191919}.mc-button--solid-neutral:active{background-color:#333}.mc-button--solid-neutral:disabled,.mc-button--solid-neutral.is-disabled{background-color:#ccc;border-color:transparent;color:#666;cursor:not-allowed}.mc-button--solid-danger{background-color:#c61112}.mc-button--solid-danger:hover,.mc-button--solid-danger:active{background-color:#8c0003}.mc-button--solid-danger:disabled,.mc-button--solid-danger.is-disabled{background-color:#ccc;border-color:transparent;color:#666;cursor:not-allowed}.mc-button--bordered{color:#007f8c;border-color:#007f8c;background-color:#fff}.mc-button--bordered:hover{background-color:#d9f0f3;color:#006974}.mc-button--bordered:active{background-color:#91d5db;color:#004e57}.mc-button--bordered:disabled,.mc-button--bordered.is-disabled{background-color:#ccc;border-color:transparent;color:#666;cursor:not-allowed}.mc-button--bordered-primary-02{color:#6a7081;border-color:#6a7081;background-color:#fff}.mc-button--bordered-primary-02:hover{background-color:#eeeff1;color:#6a7081}.mc-button--bordered-primary-02:active{background-color:#cfd2d8}.mc-button--bordered-primary-02:disabled,.mc-button--bordered-primary-02.is-disabled{background-color:#ccc;border-color:transparent;color:#666;cursor:not-allowed}.mc-button--bordered-neutral{color:#333;border-color:#333;background-color:#fff}.mc-button--bordered-neutral:hover{background-color:#e6e6e6;color:#333}.mc-button--bordered-neutral:active{background-color:#ccc}.mc-button--bordered-neutral:disabled,.mc-button--bordered-neutral.is-disabled{background-color:#ccc;border-color:transparent;color:#666;cursor:not-allowed}.mc-button--bordered-danger{color:#c61112;border-color:#c61112;background-color:#fff}.mc-button--bordered-danger:hover{background-color:#fdeaea;color:#8c0003}.mc-button--bordered-danger:active{background-color:#f8bcbb;color:#530000}.mc-button--bordered-danger:disabled,.mc-button--bordered-danger.is-disabled{background-color:#ccc;border-color:transparent;color:#666;cursor:not-allowed}.mc-dropdow__taglist{margin-top:1rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ListboxComponent, selector: "moz-listbox", inputs: ["listboxItems", "multiple", "selectedItems", "type", "overlay", "maxWidth", "maxHeight", "width", "disabled", "withoutOverflow", "isOpen"], outputs: ["itemsSelected", "scrollEnd", "isOpenChange"] }, { kind: "component", type: LoaderComponent, selector: "moz-loader", inputs: ["size", "theme", "isOverlay", "text", "hideOverlay"] }, { kind: "component", type: IconComponent, selector: "moz-icon", inputs: ["iconName"] }, { kind: "component", type: TagComponent, selector: "moz-tag, a[moz-tag]", inputs: ["type", "size", "select"], outputs: ["selectChange", "clickOnRemove"] }, { kind: "component", type: TaglistComponent, selector: "moz-taglist", inputs: ["tagItems", "tagSize", "showAllTitle", "showAll", "layerTagsTitle", "layerTagsIcon", "max"], outputs: ["removeTag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], viewQueries: [{ propertyName: "taglistComponent", first: true, predicate: ["taglist"], descendants: true }], ngImport: i0, template: "<div\n  class=\"mc-dropdown mc-dropdown--clearable\"\n  [ngClass]=\"{ 'mc-dropdown--multi': multiple }\"\n  [ngStyle]=\"{\n    '--dropdown-tag-width':\n      showSelectedTag && multiple && getSelectedListboxItems().length > 0 ? '3.5rem' : '',\n    '--dropdown-width': '100%'\n  }\"\n>\n  <moz-listbox\n    [listboxItems]=\"listboxItems\"\n    [(isOpen)]=\"openState\"\n    [multiple]=\"multiple\"\n    [selectedItems]=\"selectedItems\"\n    (itemsSelected)=\"itemsSelectedListboxEvent($event)\"\n    (scrollEnd)=\"scrollEndEvent($event)\"\n    (isOpenChange)=\"openChangeEvent($event)\"\n  >\n    <div class=\"mc-dropdown__main\" reference>\n      <moz-tag\n        *ngIf=\"showSelectedTag && multiple && getSelectedListboxItems().length > 0\"\n        class=\"mc-dropdown__tag mc-tag-removable mc-tag-removable--s mc-autocomplete__tag\"\n        type=\"removable\"\n        [size]=\"'s'\"\n        (clickOnRemove)=\"clearFieldEvent()\"\n      >\n        {{ getSelectedListboxItems().length }}</moz-tag\n      >\n\n      <button\n        type=\"button\"\n        id=\"trigger\"\n        class=\"mc-select mc-dropdown__trigger mc-button--{{ size }}\"\n        [ngClass]=\"{\n          'is-open': openState,\n          'is-invalid': invalid,\n          'is-valid': valid,\n        }\"\n        aria-haspopup=\"listbox\"\n        title=\"Dropdown menu options\"\n        [disabled]=\"disabled\"\n        aria-expanded=\"false\"\n        (click)=\"openListbox()\"\n      >\n        <ng-container *ngIf=\"multiple; else monoSelection\">{{\n          getLabelFromMultipleSelection()\n        }}</ng-container>\n        <ng-template #monoSelection>{{ getLabelFromMonoSelection() }}</ng-template>\n      </button>\n\n      <div class=\"mc-dropdown__tools\">\n        <div class=\"mc-dropdown__loader mc-loader mc-loader--s\" *ngIf=\"loading\">\n          <span class=\"mc-loader__spinner\">\n            <moz-loader class=\"mc-loader__icon\" size=\"s\"></moz-loader>\n          </span>\n        </div>\n        <button\n          class=\"mc-dropdown__clear\"\n          type=\"button\"\n          *ngIf=\"canClearField()\"\n          (click)=\"clearFieldEvent()\"\n        >\n          <moz-icon\n            class=\"mc-dropdown__clear-icon\"\n            [iconName]=\"'Navigation_Control_Tag--Cross_24px'\"\n          ></moz-icon>\n          <span class=\"mc-dropdown__clear-text\">{{ labelClearButton }}</span>\n        </button>\n      </div>\n    </div>\n  </moz-listbox>\n</div>\n<div class=\"mc-dropdow__taglist\" *ngIf=\"showTagList && multiple && !openState\">\n  <moz-taglist\n    #taglist\n    (removeTag)=\"removeTagEvent($event)\"\n    [tagItems]=\"getTagItemsFromSelectedItems()\"\n    [max]=\"maxShowingSelectedTags\"\n    [layerTagsTitle]=\"layerTagsTitle\"\n    [layerTagsIcon]=\"layerTagsIcon\"\n  ></moz-taglist>\n</div>\n", styles: [".mc-select{font-family:Roboto,sans-serif;font-weight:400;box-sizing:border-box;outline:none;appearance:none;padding:0;margin:0;box-shadow:none;border:none;font-size:1rem;line-height:1.125;background-position:right 1rem center,right 2.5rem center;padding:calc(.9375rem - 1px) 3rem calc(.9375rem - 1px) calc(.75rem - 1px);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23191919' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E\");background-color:#fff;background-repeat:no-repeat;background-size:1rem 1rem,1.5rem 1.5rem;border:1px solid #666666;border-radius:4px;color:#191919;transition:border-color .2s ease,box-shadow .2s ease;width:100%}.mc-select[type=number]::-webkit-inner-spin-button,.mc-select[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}.mc-select[type=number]{-moz-appearance:textfield}.mc-select[type=search]::-webkit-search-decoration:hover,.mc-select[type=search]::-webkit-search-cancel-button:hover{cursor:pointer}.mc-select::-ms-expand{display:none}.mc-select:hover{border-color:#191919}.mc-select:focus{box-shadow:0 0 0 .125rem #fff,0 0 0 .25rem #758992}.mc-select:disabled{background-color:#e6e6e6;border-color:#e6e6e6;color:#666;cursor:not-allowed;opacity:1}.mc-select.is-invalid{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23191919' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E\"),url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNjNjExMTIiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMTAxMCAxMEExMCAxMCAwIDAwMTIgMnptMCAxOGE4IDggMCAxMTgtOCA4IDggMCAwMS04IDh6Ii8+PHBhdGggZD0iTTEyIDdhMSAxIDAgMDAtMSAxdjQuMzhhMSAxIDAgMDAyIDBWOGExIDEgMCAwMC0xLTF6Ii8+PGNpcmNsZSBjeD0iMTIiIGN5PSIxNiIgcj0iMSIvPjwvc3ZnPg==);border-color:#c61112}.mc-select.is-valid{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23191919' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E\"),url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjNDZhNjEwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiA0YTggOCAwIDExLTggOCA4IDggMCAwMTgtOG0wLTJhMTAgMTAgMCAxMDEwIDEwQTEwIDEwIDAgMDAxMiAyeiIvPjxwYXRoIGQ9Ik0xMC43MyAxNS43NWExIDEgMCAwMS0uNjgtLjI2bC0zLTIuNzRhMSAxIDAgMDExLjM2LTEuNDdsMi4yNSAyLjA4IDQuMzYtNC40MmExIDEgMCAxMTEuNDIgMS40MWwtNSA1LjFhMSAxIDAgMDEtLjcxLjN6Ii8+PC9zdmc+);border-color:#46a610}.mc-select--s{font-size:.875rem;line-height:1.1428571429;background-position:right .5rem center,right 2rem center;padding:calc(.5rem - 1px) 2rem calc(.5rem - 1px) calc(.5rem - 1px)}@media screen and (min-width: 680px){.mc-select--s\\@from-m{font-size:.875rem;line-height:1.1428571429;background-position:right .5rem center,right 2rem center;padding:calc(.5rem - 1px) 2rem calc(.5rem - 1px) calc(.5rem - 1px)}}@media screen and (min-width: 1024px){.mc-select--s\\@from-l{font-size:.875rem;line-height:1.1428571429;background-position:right .5rem center,right 2rem center;padding:calc(.5rem - 1px) 2rem calc(.5rem - 1px) calc(.5rem - 1px)}}@media screen and (min-width: 1280px){.mc-select--s\\@from-xl{font-size:.875rem;line-height:1.1428571429;background-position:right .5rem center,right 2rem center;padding:calc(.5rem - 1px) 2rem calc(.5rem - 1px) calc(.5rem - 1px)}}@media screen and (min-width: 1920px){.mc-select--s\\@from-xxl{font-size:.875rem;line-height:1.1428571429;background-position:right .5rem center,right 2rem center;padding:calc(.5rem - 1px) 2rem calc(.5rem - 1px) calc(.5rem - 1px)}}.mc-select--m{font-size:1rem;line-height:1.125;background-position:right 1rem center,right 2.5rem center;padding:calc(.9375rem - 1px) 3rem calc(.9375rem - 1px) calc(.75rem - 1px)}@media screen and (min-width: 680px){.mc-select--m\\@from-m{font-size:1rem;line-height:1.125;background-position:right 1rem center,right 2.5rem center;padding:calc(.9375rem - 1px) 3rem calc(.9375rem - 1px) calc(.75rem - 1px)}}@media screen and (min-width: 1024px){.mc-select--m\\@from-l{font-size:1rem;line-height:1.125;background-position:right 1rem center,right 2.5rem center;padding:calc(.9375rem - 1px) 3rem calc(.9375rem - 1px) calc(.75rem - 1px)}}@media screen and (min-width: 1280px){.mc-select--m\\@from-xl{font-size:1rem;line-height:1.125;background-position:right 1rem center,right 2.5rem center;padding:calc(.9375rem - 1px) 3rem calc(.9375rem - 1px) calc(.75rem - 1px)}}@media screen and (min-width: 1920px){.mc-select--m\\@from-xxl{font-size:1rem;line-height:1.125;background-position:right 1rem center,right 2.5rem center;padding:calc(.9375rem - 1px) 3rem calc(.9375rem - 1px) calc(.75rem - 1px)}}.mc-listbox{background-color:#fff;border:1px solid #666666;border-radius:3px;overflow-y:auto;max-height:var(--listbox-height, 13.8125rem);max-width:var(--listbox-maxwidth, none);min-width:var(--listbox-minwidth, 18rem);width:var(--listbox-width, auto)}.mc-listbox::-webkit-scrollbar{background-color:#e6e6e6;width:.25rem}.mc-listbox::-webkit-scrollbar-thumb{background:#666666}.mc-listbox__list{list-style:none;margin:0;padding-left:0}.mc-listbox__tile{align-items:center;display:flex;gap:.5rem;height:3rem;justify-content:flex-start;padding-left:.75rem;padding-right:.75rem;position:relative}.mc-listbox__tile:not(.mc-listbox__tile--empty):not(.is-disabled):hover{background-color:#e6e6e6;box-shadow:inset 9px 0 0 -7px #191919}.mc-listbox__tile--danger{color:#c61112}.mc-listbox__tile--empty{color:#666;justify-content:center}.mc-listbox__tile--empty .mc-listbox__label{cursor:default}.mc-listbox__tile.is-disabled{box-shadow:none;background-color:#ccc;color:#666;pointer-events:none}.mc-listbox__flag,.mc-listbox__icon,.mc-listbox__logo{height:2rem;width:2rem}.mc-listbox__flag{font-size:1.4375rem;line-height:1.3913043478;text-align:center}.mc-listbox__icon{fill:#666}.mc-listbox__label{color:currentColor;cursor:pointer;white-space:nowrap}button.mc-listbox__label{background:none;border:none;padding:0;font-size:inherit;font-family:inherit}.mc-listbox__label:after{content:\"\";position:absolute;inset:0;z-index:2}.mc-listbox__input{margin-left:auto;order:1}.mc-listbox--left{right:0}.mc-listbox:not(.mc-listbox--multi) .mc-listbox__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-listbox--options .mc-listbox__tile:not(:last-child){border-bottom:1px solid #b3b3b3}.mc-listbox--options .mc-listbox__tile.is-selected .mc-listbox__label:before{visibility:visible}.mc-listbox--options .mc-listbox__tile.is-selected.is-disabled .mc-listbox__label:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\")}.mc-listbox--options .mc-listbox__input:checked+.mc-listbox__label:before{visibility:visible}.mc-listbox--options .mc-listbox__input:checked:disabled+.mc-listbox__label:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\")}.mc-listbox--options .mc-listbox__label:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23191919' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\");background-position:center;background-repeat:no-repeat;background-size:1.5rem;content:\"\";height:1.5rem;position:absolute;right:.75rem;top:0;transform:translateY(50%);width:1.5rem;visibility:hidden}.mc-listbox--actions{--listbox-height: auto;--listbox-minwidth: px-to-rem(278)}.mc-listbox--actions .mc-listbox__list:not(:last-child){border-bottom:1px solid #b3b3b3}.mc-listbox--actions .mc-listbox__list:first-child{padding-top:.4375rem;padding-bottom:.5rem}.mc-listbox--actions .mc-listbox__list:last-child{padding-top:.5rem;padding-bottom:.4375rem}.mc-listbox--actions .mc-listbox__list:not(:first-child):not(:last-child){padding-top:.5rem;padding-bottom:.5rem}.mc-listbox--overlay{position:absolute;z-index:10}.mc-loader{color:#007f8c;align-items:center;display:inline-flex;flex-direction:column}.mc-loader .mc-loader__spinner{height:2rem;width:2rem}.mc-loader .mc-loader__path{stroke-width:4}.mc-loader .mc-loader__path{stroke:currentColor}.mc-loader__spinner:not(:only-child){margin-bottom:1rem}.mc-loader__icon{animation:rotate-loader 2s linear infinite;transform-origin:center}.mc-loader__path{fill:none;stroke-dasharray:1,200;stroke-dashoffset:0;stroke-linecap:round;animation:animate-dash-loader 2s ease-in-out infinite}.mc-loader__text{font-size:1rem;line-height:1.375;color:currentColor}.mc-loader--s .mc-loader__spinner{height:1.5rem;width:1.5rem}.mc-loader--s .mc-loader__path{stroke-width:4}.mc-loader--l .mc-loader__spinner{height:4rem;width:4rem}.mc-loader--l .mc-loader__path{stroke-width:8}.mc-loader--dark{color:#191919}.mc-loader--dark .mc-loader__path{stroke:currentColor}.mc-loader--light{color:#fff}.mc-loader--light .mc-loader__path{stroke:currentColor}@keyframes rotate-loader{0%{transform:rotate(0)}to{transform:rotate(270deg)}}@keyframes animate-dash-loader{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}.mc-dropdown{align-self:start;position:relative;min-width:18rem;max-width:var(--dropdown-width, auto);width:100%}.mc-dropdown__tag,.mc-dropdown__tools{position:absolute;top:50%;transform:translateY(-50%);z-index:2}.mc-dropdown__tag{left:.75rem}.mc-dropdown__trigger{display:block;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.mc-dropdown__trigger.is-open{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23000000' viewBox='0 0 16 16'%3E%3Cpath d='M2 10.5a1 1 0 01.29-.71l5-5a1 1 0 011.42 0l5 5a1 1 0 01-1.42 1.42L8 6.91l-4.29 4.3a1 1 0 01-1.42 0A1 1 0 012 10.5z'/%3E%3C/svg%3E\")}.mc-dropdown__tools{align-items:center;background-color:#fff;display:flex;gap:.5rem;justify-content:flex-end;right:2.5rem}.is-valid+.mc-dropdown__tools,.is-invalid+.mc-dropdown__tools{right:4.5rem}.mc-dropdown__clear{margin:0;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;padding:0;box-shadow:0 0 0 0 transparent;transition:box-shadow .15s ease;background:none;border-radius:50%}.mc-dropdown__clear:focus{box-shadow:0 0 0 2px #758992}.mc-dropdown__clear,.mc-dropdown__clear-icon{height:1.5rem;width:1.5rem}.mc-dropdown__clear-icon{fill:#666}.mc-dropdown__clear-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-dropdown--multi .mc-dropdown__trigger{padding-left:calc(.75rem + var(--dropdown-tag-width, 0px))}.mc-button{margin:0;box-shadow:none;text-decoration:none;outline:none;border:none;padding:0;color:#fff;background-color:#007f8c;font-family:Roboto,sans-serif;font-weight:700;font-size:1rem;line-height:1.375;padding:.6875rem 1.5rem;min-height:3rem;min-width:3rem;cursor:pointer;border-radius:4px;text-align:center;border:2px solid transparent;transition:all ease .2s;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;align-items:stretch;box-sizing:border-box;fill:currentColor}.mc-button:hover{background-color:#006974;color:#fff}.mc-button:active{background-color:#006974}.mc-button:disabled,.mc-button.is-disabled{background-color:#ccc;border-color:transparent;color:#666;cursor:not-allowed}.mc-button .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button .mc-button__icon:first-child,.mc-button .mc-button__icon:last-child{margin-bottom:-1px;margin-top:-1px}.mc-button .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}.mc-button:focus{box-shadow:0 0 0 .125rem #fff,0 0 0 .25rem #758992}.mc-button--s{font-size:.875rem;line-height:1.2857142857;padding:.3125rem 1rem;min-height:2rem;min-width:2rem}.mc-button--s .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--s .mc-button__icon:first-child,.mc-button--s .mc-button__icon:last-child{margin-bottom:-.1875rem;margin-top:-.1875rem}.mc-button--s .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:1.5rem;height:1.5rem}@media screen and (min-width: 680px){.mc-button--s\\@from-m{font-size:.875rem;line-height:1.2857142857;padding:.3125rem 1rem;min-height:2rem;min-width:2rem}.mc-button--s\\@from-m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--s\\@from-m .mc-button__icon:first-child,.mc-button--s\\@from-m .mc-button__icon:last-child{margin-bottom:-.1875rem;margin-top:-.1875rem}.mc-button--s\\@from-m .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:1.5rem;height:1.5rem}}@media screen and (min-width: 1024px){.mc-button--s\\@from-l{font-size:.875rem;line-height:1.2857142857;padding:.3125rem 1rem;min-height:2rem;min-width:2rem}.mc-button--s\\@from-l .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--s\\@from-l .mc-button__icon:first-child,.mc-button--s\\@from-l .mc-button__icon:last-child{margin-bottom:-.1875rem;margin-top:-.1875rem}.mc-button--s\\@from-l .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:1.5rem;height:1.5rem}}@media screen and (min-width: 1280px){.mc-button--s\\@from-xl{font-size:.875rem;line-height:1.2857142857;padding:.3125rem 1rem;min-height:2rem;min-width:2rem}.mc-button--s\\@from-xl .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--s\\@from-xl .mc-button__icon:first-child,.mc-button--s\\@from-xl .mc-button__icon:last-child{margin-bottom:-.1875rem;margin-top:-.1875rem}.mc-button--s\\@from-xl .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:1.5rem;height:1.5rem}}@media screen and (min-width: 1920px){.mc-button--s\\@from-xxl{font-size:.875rem;line-height:1.2857142857;padding:.3125rem 1rem;min-height:2rem;min-width:2rem}.mc-button--s\\@from-xxl .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--s\\@from-xxl .mc-button__icon:first-child,.mc-button--s\\@from-xxl .mc-button__icon:last-child{margin-bottom:-.1875rem;margin-top:-.1875rem}.mc-button--s\\@from-xxl .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:1.5rem;height:1.5rem}}.mc-button--m{font-size:1rem;line-height:1.375;padding:.6875rem 1.5rem;min-height:3rem;min-width:3rem}.mc-button--m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:first-child,.mc-button--m .mc-button__icon:last-child{margin-bottom:-1px;margin-top:-1px}.mc-button--m .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}@media screen and (min-width: 680px){.mc-button--m\\@from-m{font-size:1rem;line-height:1.375;padding:.6875rem 1.5rem;min-height:3rem;min-width:3rem}.mc-button--m\\@from-m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m\\@from-m .mc-button__icon:first-child,.mc-button--m\\@from-m .mc-button__icon:last-child{margin-bottom:-1px;margin-top:-1px}.mc-button--m\\@from-m .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}}@media screen and (min-width: 1024px){.mc-button--m\\@from-l{font-size:1rem;line-height:1.375;padding:.6875rem 1.5rem;min-height:3rem;min-width:3rem}.mc-button--m\\@from-l .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m\\@from-l .mc-button__icon:first-child,.mc-button--m\\@from-l .mc-button__icon:last-child{margin-bottom:-1px;margin-top:-1px}.mc-button--m\\@from-l .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}}@media screen and (min-width: 1280px){.mc-button--m\\@from-xl{font-size:1rem;line-height:1.375;padding:.6875rem 1.5rem;min-height:3rem;min-width:3rem}.mc-button--m\\@from-xl .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m\\@from-xl .mc-button__icon:first-child,.mc-button--m\\@from-xl .mc-button__icon:last-child{margin-bottom:-1px;margin-top:-1px}.mc-button--m\\@from-xl .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}}@media screen and (min-width: 1920px){.mc-button--m\\@from-xxl{font-size:1rem;line-height:1.375;padding:.6875rem 1.5rem;min-height:3rem;min-width:3rem}.mc-button--m\\@from-xxl .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m\\@from-xxl .mc-button__icon:first-child,.mc-button--m\\@from-xxl .mc-button__icon:last-child{margin-bottom:-1px;margin-top:-1px}.mc-button--m\\@from-xxl .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}}.mc-button--l{font-size:1.125rem;line-height:1.3333333333;padding:.875rem 1.5rem;min-height:3.5rem;min-width:3.5rem}.mc-button--l .mc-button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:first-child,.mc-button--l .mc-button__icon:last-child{margin-bottom:-.25rem;margin-top:-.25rem}.mc-button--l .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}@media screen and (min-width: 680px){.mc-button--l\\@from-m{font-size:1.125rem;line-height:1.3333333333;padding:.875rem 1.5rem;min-height:3.5rem;min-width:3.5rem}.mc-button--l\\@from-m .mc-button__icon{width:2rem;height:2rem}.mc-button--l\\@from-m .mc-button__icon:first-child,.mc-button--l\\@from-m .mc-button__icon:last-child{margin-bottom:-.25rem;margin-top:-.25rem}.mc-button--l\\@from-m .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}}@media screen and (min-width: 1024px){.mc-button--l\\@from-l{font-size:1.125rem;line-height:1.3333333333;padding:.875rem 1.5rem;min-height:3.5rem;min-width:3.5rem}.mc-button--l\\@from-l .mc-button__icon{width:2rem;height:2rem}.mc-button--l\\@from-l .mc-button__icon:first-child,.mc-button--l\\@from-l .mc-button__icon:last-child{margin-bottom:-.25rem;margin-top:-.25rem}.mc-button--l\\@from-l .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}}@media screen and (min-width: 1280px){.mc-button--l\\@from-xl{font-size:1.125rem;line-height:1.3333333333;padding:.875rem 1.5rem;min-height:3.5rem;min-width:3.5rem}.mc-button--l\\@from-xl .mc-button__icon{width:2rem;height:2rem}.mc-button--l\\@from-xl .mc-button__icon:first-child,.mc-button--l\\@from-xl .mc-button__icon:last-child{margin-bottom:-.25rem;margin-top:-.25rem}.mc-button--l\\@from-xl .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}}@media screen and (min-width: 1920px){.mc-button--l\\@from-xxl{font-size:1.125rem;line-height:1.3333333333;padding:.875rem 1.5rem;min-height:3.5rem;min-width:3.5rem}.mc-button--l\\@from-xxl .mc-button__icon{width:2rem;height:2rem}.mc-button--l\\@from-xxl .mc-button__icon:first-child,.mc-button--l\\@from-xxl .mc-button__icon:last-child{margin-bottom:-.25rem;margin-top:-.25rem}.mc-button--l\\@from-xxl .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}}.mc-button--fit{display:inline-flex;width:auto}@media screen and (min-width: 680px){.mc-button--fit\\@from-m{display:inline-flex;width:auto}}@media screen and (min-width: 1024px){.mc-button--fit\\@from-l{display:inline-flex;width:auto}}@media screen and (min-width: 1280px){.mc-button--fit\\@from-xl{display:inline-flex;width:auto}}@media screen and (min-width: 1920px){.mc-button--fit\\@from-xxl{display:inline-flex;width:auto}}.mc-button--full{display:flex;width:100%}@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)){.mc-button--full{width:-webkit-fill-available;width:-moz-available;width:stretch}}@media screen and (min-width: 680px){.mc-button--full\\@from-m{display:flex;width:100%}@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)){.mc-button--full\\@from-m{width:-webkit-fill-available;width:-moz-available;width:stretch}}}@media screen and (min-width: 1024px){.mc-button--full\\@from-l{display:flex;width:100%}@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)){.mc-button--full\\@from-l{width:-webkit-fill-available;width:-moz-available;width:stretch}}}@media screen and (min-width: 1280px){.mc-button--full\\@from-xl{display:flex;width:100%}@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)){.mc-button--full\\@from-xl{width:-webkit-fill-available;width:-moz-available;width:stretch}}}@media screen and (min-width: 1920px){.mc-button--full\\@from-xxl{display:flex;width:100%}@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)){.mc-button--full\\@from-xxl{width:-webkit-fill-available;width:-moz-available;width:stretch}}}.mc-button--square{align-items:center;height:0;padding:0}@media screen and (min-width: 1024px){.mc-button--square{padding:0}}.mc-button__icon{flex-shrink:0}.mc-button__icon:last-child{margin-left:.5rem;margin-right:-.25rem}.mc-button__icon:first-child{margin-right:.5rem;margin-left:-.25rem}.mc-button__icon:only-child{margin:0}.mc-button__label{align-items:center;display:flex;pointer-events:none}a.mc-button:disabled,a.mc-button.is-disabled{pointer-events:none}.mc-button--solid-primary-02{background-color:#6a7081}.mc-button--solid-primary-02:hover{background-color:#242938}.mc-button--solid-primary-02:active{background-color:#171b26}.mc-button--solid-primary-02:disabled,.mc-button--solid-primary-02.is-disabled{background-color:#ccc;border-color:transparent;color:#666;cursor:not-allowed}.mc-button--solid-neutral{background-color:#333}.mc-button--solid-neutral:hover{background-color:#191919}.mc-button--solid-neutral:active{background-color:#333}.mc-button--solid-neutral:disabled,.mc-button--solid-neutral.is-disabled{background-color:#ccc;border-color:transparent;color:#666;cursor:not-allowed}.mc-button--solid-danger{background-color:#c61112}.mc-button--solid-danger:hover,.mc-button--solid-danger:active{background-color:#8c0003}.mc-button--solid-danger:disabled,.mc-button--solid-danger.is-disabled{background-color:#ccc;border-color:transparent;color:#666;cursor:not-allowed}.mc-button--bordered{color:#007f8c;border-color:#007f8c;background-color:#fff}.mc-button--bordered:hover{background-color:#d9f0f3;color:#006974}.mc-button--bordered:active{background-color:#91d5db;color:#004e57}.mc-button--bordered:disabled,.mc-button--bordered.is-disabled{background-color:#ccc;border-color:transparent;color:#666;cursor:not-allowed}.mc-button--bordered-primary-02{color:#6a7081;border-color:#6a7081;background-color:#fff}.mc-button--bordered-primary-02:hover{background-color:#eeeff1;color:#6a7081}.mc-button--bordered-primary-02:active{background-color:#cfd2d8}.mc-button--bordered-primary-02:disabled,.mc-button--bordered-primary-02.is-disabled{background-color:#ccc;border-color:transparent;color:#666;cursor:not-allowed}.mc-button--bordered-neutral{color:#333;border-color:#333;background-color:#fff}.mc-button--bordered-neutral:hover{background-color:#e6e6e6;color:#333}.mc-button--bordered-neutral:active{background-color:#ccc}.mc-button--bordered-neutral:disabled,.mc-button--bordered-neutral.is-disabled{background-color:#ccc;border-color:transparent;color:#666;cursor:not-allowed}.mc-button--bordered-danger{color:#c61112;border-color:#c61112;background-color:#fff}.mc-button--bordered-danger:hover{background-color:#fdeaea;color:#8c0003}.mc-button--bordered-danger:active{background-color:#f8bcbb;color:#530000}.mc-button--bordered-danger:disabled,.mc-button--bordered-danger.is-disabled{background-color:#ccc;border-color:transparent;color:#666;cursor:not-allowed}.mc-dropdow__taglist{margin-top:1rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ListboxComponent, selector: "moz-listbox", inputs: ["listboxItems", "multiple", "selectedItems", "type", "overlay", "maxWidth", "maxHeight", "width", "disabled", "withoutOverflow", "isOpen"], outputs: ["itemsSelected", "scrollEnd", "isOpenChange"] }, { kind: "component", type: LoaderComponent, selector: "moz-loader", inputs: ["size", "theme", "isOverlay", "text", "hideOverlay"] }, { kind: "component", type: IconComponent, selector: "moz-icon", inputs: ["iconName"] }, { kind: "component", type: TagComponent, selector: "moz-tag, a[moz-tag]", inputs: ["type", "size", "select"], outputs: ["selectChange", "clickOnRemove"] }, { kind: "component", type: TaglistComponent, selector: "moz-taglist", inputs: ["tagItems", "tagSize", "showAllTitle", "showAll", "layerTagsTitle", "layerTagsIcon", "max"], outputs: ["removeTag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'moz-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -3260,7 +3275,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                             useExisting: forwardRef(() => DropdownComponent),
                             multi: true,
                         },
-                    ], template: "<div\n  class=\"mc-dropdown mc-dropdown--clearable\"\n  [ngClass]=\"{ 'mc-dropdown--multi': multiple }\"\n  [ngStyle]=\"{\n    '--dropdown-tag-width':\n      showSelectedTag && multiple && getSelectedListboxItems().length > 0 ? '3.5rem' : '',\n    '--dropdown-width': '100%'\n  }\"\n>\n  <moz-listbox\n    [listboxItems]=\"listboxItems\"\n    [(isOpen)]=\"openState\"\n    [multiple]=\"multiple\"\n    [selectedItems]=\"selectedItems\"\n    (itemsSelected)=\"itemsSelectedListboxEvent($event)\"\n    (scrollEnd)=\"scrollEndEvent($event)\"\n  >\n    <div class=\"mc-dropdown__main\" reference>\n      <moz-tag\n        *ngIf=\"showSelectedTag && multiple && getSelectedListboxItems().length > 0\"\n        class=\"mc-dropdown__tag mc-tag-removable mc-tag-removable--s mc-autocomplete__tag\"\n        type=\"removable\"\n        [size]=\"'s'\"\n        (clickOnRemove)=\"clearFieldEvent()\"\n      >\n        {{ getSelectedListboxItems().length }}</moz-tag\n      >\n\n      <button\n        type=\"button\"\n        id=\"trigger\"\n        class=\"mc-select mc-dropdown__trigger mc-button--{{ size }}\"\n        [ngClass]=\"{\n          'is-open': openState,\n          'is-invalid': invalid,\n          'is-valid': valid,\n        }\"\n        aria-haspopup=\"listbox\"\n        title=\"Dropdown menu options\"\n        [disabled]=\"disabled\"\n        aria-expanded=\"false\"\n        (click)=\"openListbox()\"\n      >\n        <ng-container *ngIf=\"multiple; else monoSelection\">{{\n          getLabelFromMultipleSelection()\n        }}</ng-container>\n        <ng-template #monoSelection>{{ getLabelFromMonoSelection() }}</ng-template>\n      </button>\n\n      <div class=\"mc-dropdown__tools\">\n        <div class=\"mc-dropdown__loader mc-loader mc-loader--s\" *ngIf=\"loading\">\n          <span class=\"mc-loader__spinner\">\n            <moz-loader class=\"mc-loader__icon\" size=\"s\"></moz-loader>\n          </span>\n        </div>\n        <button\n          class=\"mc-dropdown__clear\"\n          type=\"button\"\n          *ngIf=\"canClearField()\"\n          (click)=\"clearFieldEvent()\"\n        >\n          <moz-icon\n            class=\"mc-dropdown__clear-icon\"\n            [iconName]=\"'Navigation_Control_Tag--Cross_24px'\"\n          ></moz-icon>\n          <span class=\"mc-dropdown__clear-text\">{{ labelClearButton }}</span>\n        </button>\n      </div>\n    </div>\n  </moz-listbox>\n</div>\n<div class=\"mc-dropdow__taglist\" *ngIf=\"showTagList && multiple && !openState\">\n  <moz-taglist\n    #taglist\n    (removeTag)=\"removeTagEvent($event)\"\n    [tagItems]=\"getTagItemsFromSelectedItems()\"\n    [max]=\"maxShowingSelectedTags\"\n    [layerTagsTitle]=\"layerTagsTitle\"\n    [layerTagsIcon]=\"layerTagsIcon\"\n  ></moz-taglist>\n</div>\n", styles: [".mc-select{font-family:Roboto,sans-serif;font-weight:400;box-sizing:border-box;outline:none;appearance:none;padding:0;margin:0;box-shadow:none;border:none;font-size:1rem;line-height:1.125;background-position:right 1rem center,right 2.5rem center;padding:calc(.9375rem - 1px) 3rem calc(.9375rem - 1px) calc(.75rem - 1px);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23191919' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E\");background-color:#fff;background-repeat:no-repeat;background-size:1rem 1rem,1.5rem 1.5rem;border:1px solid #666666;border-radius:4px;color:#191919;transition:border-color .2s ease,box-shadow .2s ease;width:100%}.mc-select[type=number]::-webkit-inner-spin-button,.mc-select[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}.mc-select[type=number]{-moz-appearance:textfield}.mc-select[type=search]::-webkit-search-decoration:hover,.mc-select[type=search]::-webkit-search-cancel-button:hover{cursor:pointer}.mc-select::-ms-expand{display:none}.mc-select:hover{border-color:#191919}.mc-select:focus{box-shadow:0 0 0 .125rem #fff,0 0 0 .25rem #758992}.mc-select:disabled{background-color:#e6e6e6;border-color:#e6e6e6;color:#666;cursor:not-allowed;opacity:1}.mc-select.is-invalid{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23191919' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E\"),url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNjNjExMTIiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMTAxMCAxMEExMCAxMCAwIDAwMTIgMnptMCAxOGE4IDggMCAxMTgtOCA4IDggMCAwMS04IDh6Ii8+PHBhdGggZD0iTTEyIDdhMSAxIDAgMDAtMSAxdjQuMzhhMSAxIDAgMDAyIDBWOGExIDEgMCAwMC0xLTF6Ii8+PGNpcmNsZSBjeD0iMTIiIGN5PSIxNiIgcj0iMSIvPjwvc3ZnPg==);border-color:#c61112}.mc-select.is-valid{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23191919' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E\"),url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjNDZhNjEwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiA0YTggOCAwIDExLTggOCA4IDggMCAwMTgtOG0wLTJhMTAgMTAgMCAxMDEwIDEwQTEwIDEwIDAgMDAxMiAyeiIvPjxwYXRoIGQ9Ik0xMC43MyAxNS43NWExIDEgMCAwMS0uNjgtLjI2bC0zLTIuNzRhMSAxIDAgMDExLjM2LTEuNDdsMi4yNSAyLjA4IDQuMzYtNC40MmExIDEgMCAxMTEuNDIgMS40MWwtNSA1LjFhMSAxIDAgMDEtLjcxLjN6Ii8+PC9zdmc+);border-color:#46a610}.mc-select--s{font-size:.875rem;line-height:1.1428571429;background-position:right .5rem center,right 2rem center;padding:calc(.5rem - 1px) 2rem calc(.5rem - 1px) calc(.5rem - 1px)}@media screen and (min-width: 680px){.mc-select--s\\@from-m{font-size:.875rem;line-height:1.1428571429;background-position:right .5rem center,right 2rem center;padding:calc(.5rem - 1px) 2rem calc(.5rem - 1px) calc(.5rem - 1px)}}@media screen and (min-width: 1024px){.mc-select--s\\@from-l{font-size:.875rem;line-height:1.1428571429;background-position:right .5rem center,right 2rem center;padding:calc(.5rem - 1px) 2rem calc(.5rem - 1px) calc(.5rem - 1px)}}@media screen and (min-width: 1280px){.mc-select--s\\@from-xl{font-size:.875rem;line-height:1.1428571429;background-position:right .5rem center,right 2rem center;padding:calc(.5rem - 1px) 2rem calc(.5rem - 1px) calc(.5rem - 1px)}}@media screen and (min-width: 1920px){.mc-select--s\\@from-xxl{font-size:.875rem;line-height:1.1428571429;background-position:right .5rem center,right 2rem center;padding:calc(.5rem - 1px) 2rem calc(.5rem - 1px) calc(.5rem - 1px)}}.mc-select--m{font-size:1rem;line-height:1.125;background-position:right 1rem center,right 2.5rem center;padding:calc(.9375rem - 1px) 3rem calc(.9375rem - 1px) calc(.75rem - 1px)}@media screen and (min-width: 680px){.mc-select--m\\@from-m{font-size:1rem;line-height:1.125;background-position:right 1rem center,right 2.5rem center;padding:calc(.9375rem - 1px) 3rem calc(.9375rem - 1px) calc(.75rem - 1px)}}@media screen and (min-width: 1024px){.mc-select--m\\@from-l{font-size:1rem;line-height:1.125;background-position:right 1rem center,right 2.5rem center;padding:calc(.9375rem - 1px) 3rem calc(.9375rem - 1px) calc(.75rem - 1px)}}@media screen and (min-width: 1280px){.mc-select--m\\@from-xl{font-size:1rem;line-height:1.125;background-position:right 1rem center,right 2.5rem center;padding:calc(.9375rem - 1px) 3rem calc(.9375rem - 1px) calc(.75rem - 1px)}}@media screen and (min-width: 1920px){.mc-select--m\\@from-xxl{font-size:1rem;line-height:1.125;background-position:right 1rem center,right 2.5rem center;padding:calc(.9375rem - 1px) 3rem calc(.9375rem - 1px) calc(.75rem - 1px)}}.mc-listbox{background-color:#fff;border:1px solid #666666;border-radius:3px;overflow-y:auto;max-height:var(--listbox-height, 13.8125rem);max-width:var(--listbox-maxwidth, none);min-width:var(--listbox-minwidth, 18rem);width:var(--listbox-width, auto)}.mc-listbox::-webkit-scrollbar{background-color:#e6e6e6;width:.25rem}.mc-listbox::-webkit-scrollbar-thumb{background:#666666}.mc-listbox__list{list-style:none;margin:0;padding-left:0}.mc-listbox__tile{align-items:center;display:flex;gap:.5rem;height:3rem;justify-content:flex-start;padding-left:.75rem;padding-right:.75rem;position:relative}.mc-listbox__tile:not(.mc-listbox__tile--empty):not(.is-disabled):hover{background-color:#e6e6e6;box-shadow:inset 9px 0 0 -7px #191919}.mc-listbox__tile--danger{color:#c61112}.mc-listbox__tile--empty{color:#666;justify-content:center}.mc-listbox__tile--empty .mc-listbox__label{cursor:default}.mc-listbox__tile.is-disabled{box-shadow:none;background-color:#ccc;color:#666;pointer-events:none}.mc-listbox__flag,.mc-listbox__icon,.mc-listbox__logo{height:2rem;width:2rem}.mc-listbox__flag{font-size:1.4375rem;line-height:1.3913043478;text-align:center}.mc-listbox__icon{fill:#666}.mc-listbox__label{color:currentColor;cursor:pointer;white-space:nowrap}button.mc-listbox__label{background:none;border:none;padding:0;font-size:inherit;font-family:inherit}.mc-listbox__label:after{content:\"\";position:absolute;inset:0;z-index:2}.mc-listbox__input{margin-left:auto;order:1}.mc-listbox--left{right:0}.mc-listbox:not(.mc-listbox--multi) .mc-listbox__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-listbox--options .mc-listbox__tile:not(:last-child){border-bottom:1px solid #b3b3b3}.mc-listbox--options .mc-listbox__tile.is-selected .mc-listbox__label:before{visibility:visible}.mc-listbox--options .mc-listbox__tile.is-selected.is-disabled .mc-listbox__label:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\")}.mc-listbox--options .mc-listbox__input:checked+.mc-listbox__label:before{visibility:visible}.mc-listbox--options .mc-listbox__input:checked:disabled+.mc-listbox__label:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\")}.mc-listbox--options .mc-listbox__label:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23191919' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\");background-position:center;background-repeat:no-repeat;background-size:1.5rem;content:\"\";height:1.5rem;position:absolute;right:.75rem;top:0;transform:translateY(50%);width:1.5rem;visibility:hidden}.mc-listbox--actions{--listbox-height: auto;--listbox-minwidth: px-to-rem(278)}.mc-listbox--actions .mc-listbox__list:not(:last-child){border-bottom:1px solid #b3b3b3}.mc-listbox--actions .mc-listbox__list:first-child{padding-top:.4375rem;padding-bottom:.5rem}.mc-listbox--actions .mc-listbox__list:last-child{padding-top:.5rem;padding-bottom:.4375rem}.mc-listbox--actions .mc-listbox__list:not(:first-child):not(:last-child){padding-top:.5rem;padding-bottom:.5rem}.mc-listbox--overlay{position:absolute;z-index:10}.mc-loader{color:#007f8c;align-items:center;display:inline-flex;flex-direction:column}.mc-loader .mc-loader__spinner{height:2rem;width:2rem}.mc-loader .mc-loader__path{stroke-width:4}.mc-loader .mc-loader__path{stroke:currentColor}.mc-loader__spinner:not(:only-child){margin-bottom:1rem}.mc-loader__icon{animation:rotate-loader 2s linear infinite;transform-origin:center}.mc-loader__path{fill:none;stroke-dasharray:1,200;stroke-dashoffset:0;stroke-linecap:round;animation:animate-dash-loader 2s ease-in-out infinite}.mc-loader__text{font-size:1rem;line-height:1.375;color:currentColor}.mc-loader--s .mc-loader__spinner{height:1.5rem;width:1.5rem}.mc-loader--s .mc-loader__path{stroke-width:4}.mc-loader--l .mc-loader__spinner{height:4rem;width:4rem}.mc-loader--l .mc-loader__path{stroke-width:8}.mc-loader--dark{color:#191919}.mc-loader--dark .mc-loader__path{stroke:currentColor}.mc-loader--light{color:#fff}.mc-loader--light .mc-loader__path{stroke:currentColor}@keyframes rotate-loader{0%{transform:rotate(0)}to{transform:rotate(270deg)}}@keyframes animate-dash-loader{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}.mc-dropdown{align-self:start;position:relative;min-width:18rem;max-width:var(--dropdown-width, auto);width:100%}.mc-dropdown__tag,.mc-dropdown__tools{position:absolute;top:50%;transform:translateY(-50%);z-index:2}.mc-dropdown__tag{left:.75rem}.mc-dropdown__trigger{display:block;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.mc-dropdown__trigger.is-open{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23000000' viewBox='0 0 16 16'%3E%3Cpath d='M2 10.5a1 1 0 01.29-.71l5-5a1 1 0 011.42 0l5 5a1 1 0 01-1.42 1.42L8 6.91l-4.29 4.3a1 1 0 01-1.42 0A1 1 0 012 10.5z'/%3E%3C/svg%3E\")}.mc-dropdown__tools{align-items:center;background-color:#fff;display:flex;gap:.5rem;justify-content:flex-end;right:2.5rem}.is-valid+.mc-dropdown__tools,.is-invalid+.mc-dropdown__tools{right:4.5rem}.mc-dropdown__clear{margin:0;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;padding:0;box-shadow:0 0 0 0 transparent;transition:box-shadow .15s ease;background:none;border-radius:50%}.mc-dropdown__clear:focus{box-shadow:0 0 0 2px #758992}.mc-dropdown__clear,.mc-dropdown__clear-icon{height:1.5rem;width:1.5rem}.mc-dropdown__clear-icon{fill:#666}.mc-dropdown__clear-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-dropdown--multi .mc-dropdown__trigger{padding-left:calc(.75rem + var(--dropdown-tag-width, 0px))}.mc-button{margin:0;box-shadow:none;text-decoration:none;outline:none;border:none;padding:0;color:#fff;background-color:#007f8c;font-family:Roboto,sans-serif;font-weight:700;font-size:1rem;line-height:1.375;padding:.6875rem 1.5rem;min-height:3rem;min-width:3rem;cursor:pointer;border-radius:4px;text-align:center;border:2px solid transparent;transition:all ease .2s;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;align-items:stretch;box-sizing:border-box;fill:currentColor}.mc-button:hover{background-color:#006974;color:#fff}.mc-button:active{background-color:#006974}.mc-button:disabled,.mc-button.is-disabled{background-color:#ccc;border-color:transparent;color:#666;cursor:not-allowed}.mc-button .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button .mc-button__icon:first-child,.mc-button .mc-button__icon:last-child{margin-bottom:-1px;margin-top:-1px}.mc-button .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}.mc-button:focus{box-shadow:0 0 0 .125rem #fff,0 0 0 .25rem #758992}.mc-button--s{font-size:.875rem;line-height:1.2857142857;padding:.3125rem 1rem;min-height:2rem;min-width:2rem}.mc-button--s .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--s .mc-button__icon:first-child,.mc-button--s .mc-button__icon:last-child{margin-bottom:-.1875rem;margin-top:-.1875rem}.mc-button--s .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:1.5rem;height:1.5rem}@media screen and (min-width: 680px){.mc-button--s\\@from-m{font-size:.875rem;line-height:1.2857142857;padding:.3125rem 1rem;min-height:2rem;min-width:2rem}.mc-button--s\\@from-m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--s\\@from-m .mc-button__icon:first-child,.mc-button--s\\@from-m .mc-button__icon:last-child{margin-bottom:-.1875rem;margin-top:-.1875rem}.mc-button--s\\@from-m .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:1.5rem;height:1.5rem}}@media screen and (min-width: 1024px){.mc-button--s\\@from-l{font-size:.875rem;line-height:1.2857142857;padding:.3125rem 1rem;min-height:2rem;min-width:2rem}.mc-button--s\\@from-l .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--s\\@from-l .mc-button__icon:first-child,.mc-button--s\\@from-l .mc-button__icon:last-child{margin-bottom:-.1875rem;margin-top:-.1875rem}.mc-button--s\\@from-l .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:1.5rem;height:1.5rem}}@media screen and (min-width: 1280px){.mc-button--s\\@from-xl{font-size:.875rem;line-height:1.2857142857;padding:.3125rem 1rem;min-height:2rem;min-width:2rem}.mc-button--s\\@from-xl .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--s\\@from-xl .mc-button__icon:first-child,.mc-button--s\\@from-xl .mc-button__icon:last-child{margin-bottom:-.1875rem;margin-top:-.1875rem}.mc-button--s\\@from-xl .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:1.5rem;height:1.5rem}}@media screen and (min-width: 1920px){.mc-button--s\\@from-xxl{font-size:.875rem;line-height:1.2857142857;padding:.3125rem 1rem;min-height:2rem;min-width:2rem}.mc-button--s\\@from-xxl .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--s\\@from-xxl .mc-button__icon:first-child,.mc-button--s\\@from-xxl .mc-button__icon:last-child{margin-bottom:-.1875rem;margin-top:-.1875rem}.mc-button--s\\@from-xxl .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:1.5rem;height:1.5rem}}.mc-button--m{font-size:1rem;line-height:1.375;padding:.6875rem 1.5rem;min-height:3rem;min-width:3rem}.mc-button--m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:first-child,.mc-button--m .mc-button__icon:last-child{margin-bottom:-1px;margin-top:-1px}.mc-button--m .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}@media screen and (min-width: 680px){.mc-button--m\\@from-m{font-size:1rem;line-height:1.375;padding:.6875rem 1.5rem;min-height:3rem;min-width:3rem}.mc-button--m\\@from-m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m\\@from-m .mc-button__icon:first-child,.mc-button--m\\@from-m .mc-button__icon:last-child{margin-bottom:-1px;margin-top:-1px}.mc-button--m\\@from-m .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}}@media screen and (min-width: 1024px){.mc-button--m\\@from-l{font-size:1rem;line-height:1.375;padding:.6875rem 1.5rem;min-height:3rem;min-width:3rem}.mc-button--m\\@from-l .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m\\@from-l .mc-button__icon:first-child,.mc-button--m\\@from-l .mc-button__icon:last-child{margin-bottom:-1px;margin-top:-1px}.mc-button--m\\@from-l .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}}@media screen and (min-width: 1280px){.mc-button--m\\@from-xl{font-size:1rem;line-height:1.375;padding:.6875rem 1.5rem;min-height:3rem;min-width:3rem}.mc-button--m\\@from-xl .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m\\@from-xl .mc-button__icon:first-child,.mc-button--m\\@from-xl .mc-button__icon:last-child{margin-bottom:-1px;margin-top:-1px}.mc-button--m\\@from-xl .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}}@media screen and (min-width: 1920px){.mc-button--m\\@from-xxl{font-size:1rem;line-height:1.375;padding:.6875rem 1.5rem;min-height:3rem;min-width:3rem}.mc-button--m\\@from-xxl .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m\\@from-xxl .mc-button__icon:first-child,.mc-button--m\\@from-xxl .mc-button__icon:last-child{margin-bottom:-1px;margin-top:-1px}.mc-button--m\\@from-xxl .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}}.mc-button--l{font-size:1.125rem;line-height:1.3333333333;padding:.875rem 1.5rem;min-height:3.5rem;min-width:3.5rem}.mc-button--l .mc-button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:first-child,.mc-button--l .mc-button__icon:last-child{margin-bottom:-.25rem;margin-top:-.25rem}.mc-button--l .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}@media screen and (min-width: 680px){.mc-button--l\\@from-m{font-size:1.125rem;line-height:1.3333333333;padding:.875rem 1.5rem;min-height:3.5rem;min-width:3.5rem}.mc-button--l\\@from-m .mc-button__icon{width:2rem;height:2rem}.mc-button--l\\@from-m .mc-button__icon:first-child,.mc-button--l\\@from-m .mc-button__icon:last-child{margin-bottom:-.25rem;margin-top:-.25rem}.mc-button--l\\@from-m .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}}@media screen and (min-width: 1024px){.mc-button--l\\@from-l{font-size:1.125rem;line-height:1.3333333333;padding:.875rem 1.5rem;min-height:3.5rem;min-width:3.5rem}.mc-button--l\\@from-l .mc-button__icon{width:2rem;height:2rem}.mc-button--l\\@from-l .mc-button__icon:first-child,.mc-button--l\\@from-l .mc-button__icon:last-child{margin-bottom:-.25rem;margin-top:-.25rem}.mc-button--l\\@from-l .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}}@media screen and (min-width: 1280px){.mc-button--l\\@from-xl{font-size:1.125rem;line-height:1.3333333333;padding:.875rem 1.5rem;min-height:3.5rem;min-width:3.5rem}.mc-button--l\\@from-xl .mc-button__icon{width:2rem;height:2rem}.mc-button--l\\@from-xl .mc-button__icon:first-child,.mc-button--l\\@from-xl .mc-button__icon:last-child{margin-bottom:-.25rem;margin-top:-.25rem}.mc-button--l\\@from-xl .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}}@media screen and (min-width: 1920px){.mc-button--l\\@from-xxl{font-size:1.125rem;line-height:1.3333333333;padding:.875rem 1.5rem;min-height:3.5rem;min-width:3.5rem}.mc-button--l\\@from-xxl .mc-button__icon{width:2rem;height:2rem}.mc-button--l\\@from-xxl .mc-button__icon:first-child,.mc-button--l\\@from-xxl .mc-button__icon:last-child{margin-bottom:-.25rem;margin-top:-.25rem}.mc-button--l\\@from-xxl .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}}.mc-button--fit{display:inline-flex;width:auto}@media screen and (min-width: 680px){.mc-button--fit\\@from-m{display:inline-flex;width:auto}}@media screen and (min-width: 1024px){.mc-button--fit\\@from-l{display:inline-flex;width:auto}}@media screen and (min-width: 1280px){.mc-button--fit\\@from-xl{display:inline-flex;width:auto}}@media screen and (min-width: 1920px){.mc-button--fit\\@from-xxl{display:inline-flex;width:auto}}.mc-button--full{display:flex;width:100%}@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)){.mc-button--full{width:-webkit-fill-available;width:-moz-available;width:stretch}}@media screen and (min-width: 680px){.mc-button--full\\@from-m{display:flex;width:100%}@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)){.mc-button--full\\@from-m{width:-webkit-fill-available;width:-moz-available;width:stretch}}}@media screen and (min-width: 1024px){.mc-button--full\\@from-l{display:flex;width:100%}@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)){.mc-button--full\\@from-l{width:-webkit-fill-available;width:-moz-available;width:stretch}}}@media screen and (min-width: 1280px){.mc-button--full\\@from-xl{display:flex;width:100%}@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)){.mc-button--full\\@from-xl{width:-webkit-fill-available;width:-moz-available;width:stretch}}}@media screen and (min-width: 1920px){.mc-button--full\\@from-xxl{display:flex;width:100%}@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)){.mc-button--full\\@from-xxl{width:-webkit-fill-available;width:-moz-available;width:stretch}}}.mc-button--square{align-items:center;height:0;padding:0}@media screen and (min-width: 1024px){.mc-button--square{padding:0}}.mc-button__icon{flex-shrink:0}.mc-button__icon:last-child{margin-left:.5rem;margin-right:-.25rem}.mc-button__icon:first-child{margin-right:.5rem;margin-left:-.25rem}.mc-button__icon:only-child{margin:0}.mc-button__label{align-items:center;display:flex;pointer-events:none}a.mc-button:disabled,a.mc-button.is-disabled{pointer-events:none}.mc-button--solid-primary-02{background-color:#6a7081}.mc-button--solid-primary-02:hover{background-color:#242938}.mc-button--solid-primary-02:active{background-color:#171b26}.mc-button--solid-primary-02:disabled,.mc-button--solid-primary-02.is-disabled{background-color:#ccc;border-color:transparent;color:#666;cursor:not-allowed}.mc-button--solid-neutral{background-color:#333}.mc-button--solid-neutral:hover{background-color:#191919}.mc-button--solid-neutral:active{background-color:#333}.mc-button--solid-neutral:disabled,.mc-button--solid-neutral.is-disabled{background-color:#ccc;border-color:transparent;color:#666;cursor:not-allowed}.mc-button--solid-danger{background-color:#c61112}.mc-button--solid-danger:hover,.mc-button--solid-danger:active{background-color:#8c0003}.mc-button--solid-danger:disabled,.mc-button--solid-danger.is-disabled{background-color:#ccc;border-color:transparent;color:#666;cursor:not-allowed}.mc-button--bordered{color:#007f8c;border-color:#007f8c;background-color:#fff}.mc-button--bordered:hover{background-color:#d9f0f3;color:#006974}.mc-button--bordered:active{background-color:#91d5db;color:#004e57}.mc-button--bordered:disabled,.mc-button--bordered.is-disabled{background-color:#ccc;border-color:transparent;color:#666;cursor:not-allowed}.mc-button--bordered-primary-02{color:#6a7081;border-color:#6a7081;background-color:#fff}.mc-button--bordered-primary-02:hover{background-color:#eeeff1;color:#6a7081}.mc-button--bordered-primary-02:active{background-color:#cfd2d8}.mc-button--bordered-primary-02:disabled,.mc-button--bordered-primary-02.is-disabled{background-color:#ccc;border-color:transparent;color:#666;cursor:not-allowed}.mc-button--bordered-neutral{color:#333;border-color:#333;background-color:#fff}.mc-button--bordered-neutral:hover{background-color:#e6e6e6;color:#333}.mc-button--bordered-neutral:active{background-color:#ccc}.mc-button--bordered-neutral:disabled,.mc-button--bordered-neutral.is-disabled{background-color:#ccc;border-color:transparent;color:#666;cursor:not-allowed}.mc-button--bordered-danger{color:#c61112;border-color:#c61112;background-color:#fff}.mc-button--bordered-danger:hover{background-color:#fdeaea;color:#8c0003}.mc-button--bordered-danger:active{background-color:#f8bcbb;color:#530000}.mc-button--bordered-danger:disabled,.mc-button--bordered-danger.is-disabled{background-color:#ccc;border-color:transparent;color:#666;cursor:not-allowed}.mc-dropdow__taglist{margin-top:1rem}\n"] }]
+                    ], template: "<div\n  class=\"mc-dropdown mc-dropdown--clearable\"\n  [ngClass]=\"{ 'mc-dropdown--multi': multiple }\"\n  [ngStyle]=\"{\n    '--dropdown-tag-width':\n      showSelectedTag && multiple && getSelectedListboxItems().length > 0 ? '3.5rem' : '',\n    '--dropdown-width': '100%'\n  }\"\n>\n  <moz-listbox\n    [listboxItems]=\"listboxItems\"\n    [(isOpen)]=\"openState\"\n    [multiple]=\"multiple\"\n    [selectedItems]=\"selectedItems\"\n    (itemsSelected)=\"itemsSelectedListboxEvent($event)\"\n    (scrollEnd)=\"scrollEndEvent($event)\"\n    (isOpenChange)=\"openChangeEvent($event)\"\n  >\n    <div class=\"mc-dropdown__main\" reference>\n      <moz-tag\n        *ngIf=\"showSelectedTag && multiple && getSelectedListboxItems().length > 0\"\n        class=\"mc-dropdown__tag mc-tag-removable mc-tag-removable--s mc-autocomplete__tag\"\n        type=\"removable\"\n        [size]=\"'s'\"\n        (clickOnRemove)=\"clearFieldEvent()\"\n      >\n        {{ getSelectedListboxItems().length }}</moz-tag\n      >\n\n      <button\n        type=\"button\"\n        id=\"trigger\"\n        class=\"mc-select mc-dropdown__trigger mc-button--{{ size }}\"\n        [ngClass]=\"{\n          'is-open': openState,\n          'is-invalid': invalid,\n          'is-valid': valid,\n        }\"\n        aria-haspopup=\"listbox\"\n        title=\"Dropdown menu options\"\n        [disabled]=\"disabled\"\n        aria-expanded=\"false\"\n        (click)=\"openListbox()\"\n      >\n        <ng-container *ngIf=\"multiple; else monoSelection\">{{\n          getLabelFromMultipleSelection()\n        }}</ng-container>\n        <ng-template #monoSelection>{{ getLabelFromMonoSelection() }}</ng-template>\n      </button>\n\n      <div class=\"mc-dropdown__tools\">\n        <div class=\"mc-dropdown__loader mc-loader mc-loader--s\" *ngIf=\"loading\">\n          <span class=\"mc-loader__spinner\">\n            <moz-loader class=\"mc-loader__icon\" size=\"s\"></moz-loader>\n          </span>\n        </div>\n        <button\n          class=\"mc-dropdown__clear\"\n          type=\"button\"\n          *ngIf=\"canClearField()\"\n          (click)=\"clearFieldEvent()\"\n        >\n          <moz-icon\n            class=\"mc-dropdown__clear-icon\"\n            [iconName]=\"'Navigation_Control_Tag--Cross_24px'\"\n          ></moz-icon>\n          <span class=\"mc-dropdown__clear-text\">{{ labelClearButton }}</span>\n        </button>\n      </div>\n    </div>\n  </moz-listbox>\n</div>\n<div class=\"mc-dropdow__taglist\" *ngIf=\"showTagList && multiple && !openState\">\n  <moz-taglist\n    #taglist\n    (removeTag)=\"removeTagEvent($event)\"\n    [tagItems]=\"getTagItemsFromSelectedItems()\"\n    [max]=\"maxShowingSelectedTags\"\n    [layerTagsTitle]=\"layerTagsTitle\"\n    [layerTagsIcon]=\"layerTagsIcon\"\n  ></moz-taglist>\n</div>\n", styles: [".mc-select{font-family:Roboto,sans-serif;font-weight:400;box-sizing:border-box;outline:none;appearance:none;padding:0;margin:0;box-shadow:none;border:none;font-size:1rem;line-height:1.125;background-position:right 1rem center,right 2.5rem center;padding:calc(.9375rem - 1px) 3rem calc(.9375rem - 1px) calc(.75rem - 1px);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23191919' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E\");background-color:#fff;background-repeat:no-repeat;background-size:1rem 1rem,1.5rem 1.5rem;border:1px solid #666666;border-radius:4px;color:#191919;transition:border-color .2s ease,box-shadow .2s ease;width:100%}.mc-select[type=number]::-webkit-inner-spin-button,.mc-select[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}.mc-select[type=number]{-moz-appearance:textfield}.mc-select[type=search]::-webkit-search-decoration:hover,.mc-select[type=search]::-webkit-search-cancel-button:hover{cursor:pointer}.mc-select::-ms-expand{display:none}.mc-select:hover{border-color:#191919}.mc-select:focus{box-shadow:0 0 0 .125rem #fff,0 0 0 .25rem #758992}.mc-select:disabled{background-color:#e6e6e6;border-color:#e6e6e6;color:#666;cursor:not-allowed;opacity:1}.mc-select.is-invalid{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23191919' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E\"),url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNjNjExMTIiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMTAxMCAxMEExMCAxMCAwIDAwMTIgMnptMCAxOGE4IDggMCAxMTgtOCA4IDggMCAwMS04IDh6Ii8+PHBhdGggZD0iTTEyIDdhMSAxIDAgMDAtMSAxdjQuMzhhMSAxIDAgMDAyIDBWOGExIDEgMCAwMC0xLTF6Ii8+PGNpcmNsZSBjeD0iMTIiIGN5PSIxNiIgcj0iMSIvPjwvc3ZnPg==);border-color:#c61112}.mc-select.is-valid{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23191919' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E\"),url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjNDZhNjEwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiA0YTggOCAwIDExLTggOCA4IDggMCAwMTgtOG0wLTJhMTAgMTAgMCAxMDEwIDEwQTEwIDEwIDAgMDAxMiAyeiIvPjxwYXRoIGQ9Ik0xMC43MyAxNS43NWExIDEgMCAwMS0uNjgtLjI2bC0zLTIuNzRhMSAxIDAgMDExLjM2LTEuNDdsMi4yNSAyLjA4IDQuMzYtNC40MmExIDEgMCAxMTEuNDIgMS40MWwtNSA1LjFhMSAxIDAgMDEtLjcxLjN6Ii8+PC9zdmc+);border-color:#46a610}.mc-select--s{font-size:.875rem;line-height:1.1428571429;background-position:right .5rem center,right 2rem center;padding:calc(.5rem - 1px) 2rem calc(.5rem - 1px) calc(.5rem - 1px)}@media screen and (min-width: 680px){.mc-select--s\\@from-m{font-size:.875rem;line-height:1.1428571429;background-position:right .5rem center,right 2rem center;padding:calc(.5rem - 1px) 2rem calc(.5rem - 1px) calc(.5rem - 1px)}}@media screen and (min-width: 1024px){.mc-select--s\\@from-l{font-size:.875rem;line-height:1.1428571429;background-position:right .5rem center,right 2rem center;padding:calc(.5rem - 1px) 2rem calc(.5rem - 1px) calc(.5rem - 1px)}}@media screen and (min-width: 1280px){.mc-select--s\\@from-xl{font-size:.875rem;line-height:1.1428571429;background-position:right .5rem center,right 2rem center;padding:calc(.5rem - 1px) 2rem calc(.5rem - 1px) calc(.5rem - 1px)}}@media screen and (min-width: 1920px){.mc-select--s\\@from-xxl{font-size:.875rem;line-height:1.1428571429;background-position:right .5rem center,right 2rem center;padding:calc(.5rem - 1px) 2rem calc(.5rem - 1px) calc(.5rem - 1px)}}.mc-select--m{font-size:1rem;line-height:1.125;background-position:right 1rem center,right 2.5rem center;padding:calc(.9375rem - 1px) 3rem calc(.9375rem - 1px) calc(.75rem - 1px)}@media screen and (min-width: 680px){.mc-select--m\\@from-m{font-size:1rem;line-height:1.125;background-position:right 1rem center,right 2.5rem center;padding:calc(.9375rem - 1px) 3rem calc(.9375rem - 1px) calc(.75rem - 1px)}}@media screen and (min-width: 1024px){.mc-select--m\\@from-l{font-size:1rem;line-height:1.125;background-position:right 1rem center,right 2.5rem center;padding:calc(.9375rem - 1px) 3rem calc(.9375rem - 1px) calc(.75rem - 1px)}}@media screen and (min-width: 1280px){.mc-select--m\\@from-xl{font-size:1rem;line-height:1.125;background-position:right 1rem center,right 2.5rem center;padding:calc(.9375rem - 1px) 3rem calc(.9375rem - 1px) calc(.75rem - 1px)}}@media screen and (min-width: 1920px){.mc-select--m\\@from-xxl{font-size:1rem;line-height:1.125;background-position:right 1rem center,right 2.5rem center;padding:calc(.9375rem - 1px) 3rem calc(.9375rem - 1px) calc(.75rem - 1px)}}.mc-listbox{background-color:#fff;border:1px solid #666666;border-radius:3px;overflow-y:auto;max-height:var(--listbox-height, 13.8125rem);max-width:var(--listbox-maxwidth, none);min-width:var(--listbox-minwidth, 18rem);width:var(--listbox-width, auto)}.mc-listbox::-webkit-scrollbar{background-color:#e6e6e6;width:.25rem}.mc-listbox::-webkit-scrollbar-thumb{background:#666666}.mc-listbox__list{list-style:none;margin:0;padding-left:0}.mc-listbox__tile{align-items:center;display:flex;gap:.5rem;height:3rem;justify-content:flex-start;padding-left:.75rem;padding-right:.75rem;position:relative}.mc-listbox__tile:not(.mc-listbox__tile--empty):not(.is-disabled):hover{background-color:#e6e6e6;box-shadow:inset 9px 0 0 -7px #191919}.mc-listbox__tile--danger{color:#c61112}.mc-listbox__tile--empty{color:#666;justify-content:center}.mc-listbox__tile--empty .mc-listbox__label{cursor:default}.mc-listbox__tile.is-disabled{box-shadow:none;background-color:#ccc;color:#666;pointer-events:none}.mc-listbox__flag,.mc-listbox__icon,.mc-listbox__logo{height:2rem;width:2rem}.mc-listbox__flag{font-size:1.4375rem;line-height:1.3913043478;text-align:center}.mc-listbox__icon{fill:#666}.mc-listbox__label{color:currentColor;cursor:pointer;white-space:nowrap}button.mc-listbox__label{background:none;border:none;padding:0;font-size:inherit;font-family:inherit}.mc-listbox__label:after{content:\"\";position:absolute;inset:0;z-index:2}.mc-listbox__input{margin-left:auto;order:1}.mc-listbox--left{right:0}.mc-listbox:not(.mc-listbox--multi) .mc-listbox__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-listbox--options .mc-listbox__tile:not(:last-child){border-bottom:1px solid #b3b3b3}.mc-listbox--options .mc-listbox__tile.is-selected .mc-listbox__label:before{visibility:visible}.mc-listbox--options .mc-listbox__tile.is-selected.is-disabled .mc-listbox__label:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\")}.mc-listbox--options .mc-listbox__input:checked+.mc-listbox__label:before{visibility:visible}.mc-listbox--options .mc-listbox__input:checked:disabled+.mc-listbox__label:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\")}.mc-listbox--options .mc-listbox__label:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23191919' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\");background-position:center;background-repeat:no-repeat;background-size:1.5rem;content:\"\";height:1.5rem;position:absolute;right:.75rem;top:0;transform:translateY(50%);width:1.5rem;visibility:hidden}.mc-listbox--actions{--listbox-height: auto;--listbox-minwidth: px-to-rem(278)}.mc-listbox--actions .mc-listbox__list:not(:last-child){border-bottom:1px solid #b3b3b3}.mc-listbox--actions .mc-listbox__list:first-child{padding-top:.4375rem;padding-bottom:.5rem}.mc-listbox--actions .mc-listbox__list:last-child{padding-top:.5rem;padding-bottom:.4375rem}.mc-listbox--actions .mc-listbox__list:not(:first-child):not(:last-child){padding-top:.5rem;padding-bottom:.5rem}.mc-listbox--overlay{position:absolute;z-index:10}.mc-loader{color:#007f8c;align-items:center;display:inline-flex;flex-direction:column}.mc-loader .mc-loader__spinner{height:2rem;width:2rem}.mc-loader .mc-loader__path{stroke-width:4}.mc-loader .mc-loader__path{stroke:currentColor}.mc-loader__spinner:not(:only-child){margin-bottom:1rem}.mc-loader__icon{animation:rotate-loader 2s linear infinite;transform-origin:center}.mc-loader__path{fill:none;stroke-dasharray:1,200;stroke-dashoffset:0;stroke-linecap:round;animation:animate-dash-loader 2s ease-in-out infinite}.mc-loader__text{font-size:1rem;line-height:1.375;color:currentColor}.mc-loader--s .mc-loader__spinner{height:1.5rem;width:1.5rem}.mc-loader--s .mc-loader__path{stroke-width:4}.mc-loader--l .mc-loader__spinner{height:4rem;width:4rem}.mc-loader--l .mc-loader__path{stroke-width:8}.mc-loader--dark{color:#191919}.mc-loader--dark .mc-loader__path{stroke:currentColor}.mc-loader--light{color:#fff}.mc-loader--light .mc-loader__path{stroke:currentColor}@keyframes rotate-loader{0%{transform:rotate(0)}to{transform:rotate(270deg)}}@keyframes animate-dash-loader{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}.mc-dropdown{align-self:start;position:relative;min-width:18rem;max-width:var(--dropdown-width, auto);width:100%}.mc-dropdown__tag,.mc-dropdown__tools{position:absolute;top:50%;transform:translateY(-50%);z-index:2}.mc-dropdown__tag{left:.75rem}.mc-dropdown__trigger{display:block;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.mc-dropdown__trigger.is-open{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23000000' viewBox='0 0 16 16'%3E%3Cpath d='M2 10.5a1 1 0 01.29-.71l5-5a1 1 0 011.42 0l5 5a1 1 0 01-1.42 1.42L8 6.91l-4.29 4.3a1 1 0 01-1.42 0A1 1 0 012 10.5z'/%3E%3C/svg%3E\")}.mc-dropdown__tools{align-items:center;background-color:#fff;display:flex;gap:.5rem;justify-content:flex-end;right:2.5rem}.is-valid+.mc-dropdown__tools,.is-invalid+.mc-dropdown__tools{right:4.5rem}.mc-dropdown__clear{margin:0;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;padding:0;box-shadow:0 0 0 0 transparent;transition:box-shadow .15s ease;background:none;border-radius:50%}.mc-dropdown__clear:focus{box-shadow:0 0 0 2px #758992}.mc-dropdown__clear,.mc-dropdown__clear-icon{height:1.5rem;width:1.5rem}.mc-dropdown__clear-icon{fill:#666}.mc-dropdown__clear-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-dropdown--multi .mc-dropdown__trigger{padding-left:calc(.75rem + var(--dropdown-tag-width, 0px))}.mc-button{margin:0;box-shadow:none;text-decoration:none;outline:none;border:none;padding:0;color:#fff;background-color:#007f8c;font-family:Roboto,sans-serif;font-weight:700;font-size:1rem;line-height:1.375;padding:.6875rem 1.5rem;min-height:3rem;min-width:3rem;cursor:pointer;border-radius:4px;text-align:center;border:2px solid transparent;transition:all ease .2s;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;align-items:stretch;box-sizing:border-box;fill:currentColor}.mc-button:hover{background-color:#006974;color:#fff}.mc-button:active{background-color:#006974}.mc-button:disabled,.mc-button.is-disabled{background-color:#ccc;border-color:transparent;color:#666;cursor:not-allowed}.mc-button .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button .mc-button__icon:first-child,.mc-button .mc-button__icon:last-child{margin-bottom:-1px;margin-top:-1px}.mc-button .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}.mc-button:focus{box-shadow:0 0 0 .125rem #fff,0 0 0 .25rem #758992}.mc-button--s{font-size:.875rem;line-height:1.2857142857;padding:.3125rem 1rem;min-height:2rem;min-width:2rem}.mc-button--s .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--s .mc-button__icon:first-child,.mc-button--s .mc-button__icon:last-child{margin-bottom:-.1875rem;margin-top:-.1875rem}.mc-button--s .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:1.5rem;height:1.5rem}@media screen and (min-width: 680px){.mc-button--s\\@from-m{font-size:.875rem;line-height:1.2857142857;padding:.3125rem 1rem;min-height:2rem;min-width:2rem}.mc-button--s\\@from-m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--s\\@from-m .mc-button__icon:first-child,.mc-button--s\\@from-m .mc-button__icon:last-child{margin-bottom:-.1875rem;margin-top:-.1875rem}.mc-button--s\\@from-m .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:1.5rem;height:1.5rem}}@media screen and (min-width: 1024px){.mc-button--s\\@from-l{font-size:.875rem;line-height:1.2857142857;padding:.3125rem 1rem;min-height:2rem;min-width:2rem}.mc-button--s\\@from-l .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--s\\@from-l .mc-button__icon:first-child,.mc-button--s\\@from-l .mc-button__icon:last-child{margin-bottom:-.1875rem;margin-top:-.1875rem}.mc-button--s\\@from-l .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:1.5rem;height:1.5rem}}@media screen and (min-width: 1280px){.mc-button--s\\@from-xl{font-size:.875rem;line-height:1.2857142857;padding:.3125rem 1rem;min-height:2rem;min-width:2rem}.mc-button--s\\@from-xl .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--s\\@from-xl .mc-button__icon:first-child,.mc-button--s\\@from-xl .mc-button__icon:last-child{margin-bottom:-.1875rem;margin-top:-.1875rem}.mc-button--s\\@from-xl .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:1.5rem;height:1.5rem}}@media screen and (min-width: 1920px){.mc-button--s\\@from-xxl{font-size:.875rem;line-height:1.2857142857;padding:.3125rem 1rem;min-height:2rem;min-width:2rem}.mc-button--s\\@from-xxl .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--s\\@from-xxl .mc-button__icon:first-child,.mc-button--s\\@from-xxl .mc-button__icon:last-child{margin-bottom:-.1875rem;margin-top:-.1875rem}.mc-button--s\\@from-xxl .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:1.5rem;height:1.5rem}}.mc-button--m{font-size:1rem;line-height:1.375;padding:.6875rem 1.5rem;min-height:3rem;min-width:3rem}.mc-button--m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:first-child,.mc-button--m .mc-button__icon:last-child{margin-bottom:-1px;margin-top:-1px}.mc-button--m .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}@media screen and (min-width: 680px){.mc-button--m\\@from-m{font-size:1rem;line-height:1.375;padding:.6875rem 1.5rem;min-height:3rem;min-width:3rem}.mc-button--m\\@from-m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m\\@from-m .mc-button__icon:first-child,.mc-button--m\\@from-m .mc-button__icon:last-child{margin-bottom:-1px;margin-top:-1px}.mc-button--m\\@from-m .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}}@media screen and (min-width: 1024px){.mc-button--m\\@from-l{font-size:1rem;line-height:1.375;padding:.6875rem 1.5rem;min-height:3rem;min-width:3rem}.mc-button--m\\@from-l .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m\\@from-l .mc-button__icon:first-child,.mc-button--m\\@from-l .mc-button__icon:last-child{margin-bottom:-1px;margin-top:-1px}.mc-button--m\\@from-l .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}}@media screen and (min-width: 1280px){.mc-button--m\\@from-xl{font-size:1rem;line-height:1.375;padding:.6875rem 1.5rem;min-height:3rem;min-width:3rem}.mc-button--m\\@from-xl .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m\\@from-xl .mc-button__icon:first-child,.mc-button--m\\@from-xl .mc-button__icon:last-child{margin-bottom:-1px;margin-top:-1px}.mc-button--m\\@from-xl .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}}@media screen and (min-width: 1920px){.mc-button--m\\@from-xxl{font-size:1rem;line-height:1.375;padding:.6875rem 1.5rem;min-height:3rem;min-width:3rem}.mc-button--m\\@from-xxl .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m\\@from-xxl .mc-button__icon:first-child,.mc-button--m\\@from-xxl .mc-button__icon:last-child{margin-bottom:-1px;margin-top:-1px}.mc-button--m\\@from-xxl .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}}.mc-button--l{font-size:1.125rem;line-height:1.3333333333;padding:.875rem 1.5rem;min-height:3.5rem;min-width:3.5rem}.mc-button--l .mc-button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:first-child,.mc-button--l .mc-button__icon:last-child{margin-bottom:-.25rem;margin-top:-.25rem}.mc-button--l .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}@media screen and (min-width: 680px){.mc-button--l\\@from-m{font-size:1.125rem;line-height:1.3333333333;padding:.875rem 1.5rem;min-height:3.5rem;min-width:3.5rem}.mc-button--l\\@from-m .mc-button__icon{width:2rem;height:2rem}.mc-button--l\\@from-m .mc-button__icon:first-child,.mc-button--l\\@from-m .mc-button__icon:last-child{margin-bottom:-.25rem;margin-top:-.25rem}.mc-button--l\\@from-m .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}}@media screen and (min-width: 1024px){.mc-button--l\\@from-l{font-size:1.125rem;line-height:1.3333333333;padding:.875rem 1.5rem;min-height:3.5rem;min-width:3.5rem}.mc-button--l\\@from-l .mc-button__icon{width:2rem;height:2rem}.mc-button--l\\@from-l .mc-button__icon:first-child,.mc-button--l\\@from-l .mc-button__icon:last-child{margin-bottom:-.25rem;margin-top:-.25rem}.mc-button--l\\@from-l .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}}@media screen and (min-width: 1280px){.mc-button--l\\@from-xl{font-size:1.125rem;line-height:1.3333333333;padding:.875rem 1.5rem;min-height:3.5rem;min-width:3.5rem}.mc-button--l\\@from-xl .mc-button__icon{width:2rem;height:2rem}.mc-button--l\\@from-xl .mc-button__icon:first-child,.mc-button--l\\@from-xl .mc-button__icon:last-child{margin-bottom:-.25rem;margin-top:-.25rem}.mc-button--l\\@from-xl .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}}@media screen and (min-width: 1920px){.mc-button--l\\@from-xxl{font-size:1.125rem;line-height:1.3333333333;padding:.875rem 1.5rem;min-height:3.5rem;min-width:3.5rem}.mc-button--l\\@from-xxl .mc-button__icon{width:2rem;height:2rem}.mc-button--l\\@from-xxl .mc-button__icon:first-child,.mc-button--l\\@from-xxl .mc-button__icon:last-child{margin-bottom:-.25rem;margin-top:-.25rem}.mc-button--l\\@from-xxl .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}}.mc-button--fit{display:inline-flex;width:auto}@media screen and (min-width: 680px){.mc-button--fit\\@from-m{display:inline-flex;width:auto}}@media screen and (min-width: 1024px){.mc-button--fit\\@from-l{display:inline-flex;width:auto}}@media screen and (min-width: 1280px){.mc-button--fit\\@from-xl{display:inline-flex;width:auto}}@media screen and (min-width: 1920px){.mc-button--fit\\@from-xxl{display:inline-flex;width:auto}}.mc-button--full{display:flex;width:100%}@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)){.mc-button--full{width:-webkit-fill-available;width:-moz-available;width:stretch}}@media screen and (min-width: 680px){.mc-button--full\\@from-m{display:flex;width:100%}@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)){.mc-button--full\\@from-m{width:-webkit-fill-available;width:-moz-available;width:stretch}}}@media screen and (min-width: 1024px){.mc-button--full\\@from-l{display:flex;width:100%}@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)){.mc-button--full\\@from-l{width:-webkit-fill-available;width:-moz-available;width:stretch}}}@media screen and (min-width: 1280px){.mc-button--full\\@from-xl{display:flex;width:100%}@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)){.mc-button--full\\@from-xl{width:-webkit-fill-available;width:-moz-available;width:stretch}}}@media screen and (min-width: 1920px){.mc-button--full\\@from-xxl{display:flex;width:100%}@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)){.mc-button--full\\@from-xxl{width:-webkit-fill-available;width:-moz-available;width:stretch}}}.mc-button--square{align-items:center;height:0;padding:0}@media screen and (min-width: 1024px){.mc-button--square{padding:0}}.mc-button__icon{flex-shrink:0}.mc-button__icon:last-child{margin-left:.5rem;margin-right:-.25rem}.mc-button__icon:first-child{margin-right:.5rem;margin-left:-.25rem}.mc-button__icon:only-child{margin:0}.mc-button__label{align-items:center;display:flex;pointer-events:none}a.mc-button:disabled,a.mc-button.is-disabled{pointer-events:none}.mc-button--solid-primary-02{background-color:#6a7081}.mc-button--solid-primary-02:hover{background-color:#242938}.mc-button--solid-primary-02:active{background-color:#171b26}.mc-button--solid-primary-02:disabled,.mc-button--solid-primary-02.is-disabled{background-color:#ccc;border-color:transparent;color:#666;cursor:not-allowed}.mc-button--solid-neutral{background-color:#333}.mc-button--solid-neutral:hover{background-color:#191919}.mc-button--solid-neutral:active{background-color:#333}.mc-button--solid-neutral:disabled,.mc-button--solid-neutral.is-disabled{background-color:#ccc;border-color:transparent;color:#666;cursor:not-allowed}.mc-button--solid-danger{background-color:#c61112}.mc-button--solid-danger:hover,.mc-button--solid-danger:active{background-color:#8c0003}.mc-button--solid-danger:disabled,.mc-button--solid-danger.is-disabled{background-color:#ccc;border-color:transparent;color:#666;cursor:not-allowed}.mc-button--bordered{color:#007f8c;border-color:#007f8c;background-color:#fff}.mc-button--bordered:hover{background-color:#d9f0f3;color:#006974}.mc-button--bordered:active{background-color:#91d5db;color:#004e57}.mc-button--bordered:disabled,.mc-button--bordered.is-disabled{background-color:#ccc;border-color:transparent;color:#666;cursor:not-allowed}.mc-button--bordered-primary-02{color:#6a7081;border-color:#6a7081;background-color:#fff}.mc-button--bordered-primary-02:hover{background-color:#eeeff1;color:#6a7081}.mc-button--bordered-primary-02:active{background-color:#cfd2d8}.mc-button--bordered-primary-02:disabled,.mc-button--bordered-primary-02.is-disabled{background-color:#ccc;border-color:transparent;color:#666;cursor:not-allowed}.mc-button--bordered-neutral{color:#333;border-color:#333;background-color:#fff}.mc-button--bordered-neutral:hover{background-color:#e6e6e6;color:#333}.mc-button--bordered-neutral:active{background-color:#ccc}.mc-button--bordered-neutral:disabled,.mc-button--bordered-neutral.is-disabled{background-color:#ccc;border-color:transparent;color:#666;cursor:not-allowed}.mc-button--bordered-danger{color:#c61112;border-color:#c61112;background-color:#fff}.mc-button--bordered-danger:hover{background-color:#fdeaea;color:#8c0003}.mc-button--bordered-danger:active{background-color:#f8bcbb;color:#530000}.mc-button--bordered-danger:disabled,.mc-button--bordered-danger.is-disabled{background-color:#ccc;border-color:transparent;color:#666;cursor:not-allowed}.mc-dropdow__taglist{margin-top:1rem}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { listboxItems: [{
                 type: Input
             }], multiple: [{
@@ -3295,6 +3310,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], scrollEnd: [{
                 type: Output
+            }], isOpen: [{
+                type: Output
             }], taglistComponent: [{
                 type: ViewChild,
                 args: ['taglist', { static: false }]