@mozaic-ds/angular 0.24.0-beta.6 → 0.24.0-beta.7

package/fesm2020/mozaic-ds-angular.mjs

@@ -2532,22 +2532,24 @@ class MozDatatableSortDirective {
         if (this.columnDef?.sort) {
             const sortIcon = this.renderer.createElement('span');
             this.renderer.addClass(sortIcon, 'mc-datatable__sort-arrow');
-            this.updateSortDirection(sortIcon);
+            this.updateSortDirection(sortIcon, true);
             this.renderer.appendChild(this.elementRef.nativeElement, sortIcon);
         }
     }
     onSortClick($event) {
-        this.updateSortDirection($event.target);
+        this.updateSortDirection($event.target, false);
     }
-    updateSortDirection(htmlSpanElement) {
+    updateSortDirection(htmlSpanElement, init) {
         if (this.columnDef?.sort) {
             if (htmlSpanElement.classList.contains('mc-datatable__sort-arrow')) {
-                this.columnDef.sort.direction =
-                    this.columnDef.sort.direction == undefined
-                        ? 'ASC'
-                        : this.columnDef.sort.direction === 'ASC'
-                            ? 'DESC'
-                            : undefined;
+                if (!init) {
+                    this.columnDef.sort.direction =
+                        this.columnDef.sort.direction == undefined
+                            ? 'ASC'
+                            : this.columnDef.sort.direction === 'ASC'
+                                ? 'DESC'
+                                : undefined;
+                }
                 if (this.columnDef.sort.direction === 'ASC') {
                     this.renderer.addClass(htmlSpanElement, 'is-sorted-asc');
                     this.renderer.removeClass(htmlSpanElement, 'is-sorted-desc');
@@ -3497,6 +3499,9 @@ class AutocompleteComponent {
         this.withSearchFilter = true;
         this.openState = false;
         this.searchUpdated = new EventEmitter();
+        this.focusinEmitter = new EventEmitter();
+        this.focusoutEmitter = new EventEmitter();
+        this.inputClicked = new EventEmitter();
         this.destroyed = new Subject();
         this.search = '';
         this.initialListboxItems = [];
@@ -3504,8 +3509,10 @@ class AutocompleteComponent {
         this.onTouch = () => { };
         this.noResults = false;
     }
-    ngOnInit() {
+    ngOnChanges() {
         this.initialListboxItems = this.listboxItems.map((x) => ({ ...x }));
+    }
+    ngOnInit() {
         const ngControl = this.injector.get(NgControl);
         if (ngControl instanceof FormControlName) {
             this.control = this.injector.get(FormGroupDirective).getControl(ngControl);
@@ -3542,12 +3549,42 @@ class AutocompleteComponent {
             this.closeListbox();
             this.cd.detectChanges();
         });
-        fromEvent(window, 'scroll')
-            .pipe(takeUntil(this.destroyed))
-            .subscribe(() => {
+        this.scroll();
+        this.cd.detectChanges();
+    }
+    scroll() {
+        const parentElement = this.findParentWithScroll(this.eRef.nativeElement);
+        if (parentElement) {
+            this.onParentScroll(parentElement);
+        }
+        else {
+            fromEvent(window, 'scroll')
+                .pipe(takeUntil(this.destroyed))
+                .subscribe(() => {
+                this.closeListbox();
+                this.cd.detectChanges();
+            });
+        }
+    }
+    onParentScroll(parentElement) {
+        const handleScroll = () => {
             this.closeListbox();
             this.cd.detectChanges();
-        });
+        };
+        parentElement.addEventListener('scroll', handleScroll);
+    }
+    findParentWithScroll(element) {
+        if (element.parentElement) {
+            const parent = element.parentElement;
+            const hasOverflow = window.getComputedStyle(parent).overflow;
+            if (hasOverflow === 'auto' || hasOverflow === 'scroll') {
+                return parent;
+            }
+            else {
+                return this.findParentWithScroll(parent);
+            }
+        }
+        return null;
     }
     clickout(event) {
         const listboxHtmlElementContainsClickTarget = this.listboxElementRef && this.listboxElementRef.nativeElement.contains(event.target);
@@ -3572,6 +3609,7 @@ class AutocompleteComponent {
                 document.body.appendChild(mozListbox);
             }, 10);
         }
+        this.inputClicked.emit(true);
     }
     closeListbox() {
         this.openState = false;
@@ -3675,15 +3713,26 @@ class AutocompleteComponent {
         this.searchUpdated.emit(this.search);
         this.cd.detectChanges();
     }
+    focusinEvent() {
+        this.openListbox();
+        this.focusinEmitter.emit(true);
+    }
+    focusoutEvent($event) {
+        const listboxHtmlElementContainsClickTarget = this.listboxElementRef && this.listboxElementRef.nativeElement.contains($event.relatedTarget);
+        if (!listboxHtmlElementContainsClickTarget) {
+            this.closeListbox();
+        }
+        this.focusoutEmitter.emit(true);
+    }
 }
 AutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AutocompleteComponent, deps: [{ token: Injector }, { token: i0.ElementRef }, { 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", showSelectedTags: "showSelectedTags", maxShowingSelectedTags: "maxShowingSelectedTags", layerTagsTitle: "layerTagsTitle", layerTagsIcon: "layerTagsIcon", errorContentText: "errorContentText", withSearchFilter: "withSearchFilter", openState: "openState" }, outputs: { searchUpdated: "searchUpdated" }, host: { listeners: { "document:click": "clickout($event)" } }, 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", showSelectedTags: "showSelectedTags", maxShowingSelectedTags: "maxShowingSelectedTags", layerTagsTitle: "layerTagsTitle", layerTagsIcon: "layerTagsIcon", errorContentText: "errorContentText", withSearchFilter: "withSearchFilter", openState: "openState" }, outputs: { searchUpdated: "searchUpdated", focusinEmitter: "focusinEmitter", focusoutEmitter: "focusoutEmitter", inputClicked: "inputClicked" }, host: { listeners: { "document:click": "clickout($event)" } }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => AutocompleteComponent),
             multi: true,
         },
-    ], viewQueries: [{ propertyName: "taglistComponent", first: true, predicate: ["taglist"], descendants: true }, { propertyName: "listboxElementRef", first: true, predicate: ["listbox"], descendants: true, read: ElementRef }], 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      !showSelectedTags && multiple && getSelectedListboxItems().length > 0 ? '3.5rem' : '',\n    '--autocomplete-width': '100%'\n  }\"\n>\n  <div class=\"mc-autocomplete__main\">\n    <moz-tag\n      *ngIf=\"!showSelectedTags && 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)]=\"search\"\n        (ngModelChange)=\"searchEvent()\"\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\">Clear</span>\n      </button>\n    </div>\n  </div>\n  <moz-listbox\n    *ngIf=\"openState\"\n    #listbox\n    [listboxItems]=\"listboxItems\"\n    [isOpen]=\"openState\"\n    [multiple]=\"multiple\"\n    [selectedItems]=\"selectedItems\"\n    (itemsSelected)=\"itemsSelectedListboxEvent($event)\"\n  ></moz-listbox>\n</div>\n<div class=\"mc-autocomplete__error\" *ngIf=\"invalid\">\n  {{ errorContentText }}\n</div>\n<div class=\"mc-autocomplete__taglist\" *ngIf=\"showSelectedTags && multiple\">\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:LeroyMerlin,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 #0b96cc}.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{list-style:none;margin-left:0;padding-left:0;background-color:#fff;border:1px solid #666666;border-radius:3px;position:absolute;overflow-y:auto;margin-top:.25rem;margin-bottom:0;max-height:13.8125rem;min-width:auto;opacity:0;visibility:hidden;max-width:var(--listbox-width, auto);width:100%}.mc-listbox.is-open{opacity:1;visibility:visible;z-index:10}.mc-listbox::-webkit-scrollbar{background-color:#e6e6e6;width:.25rem}.mc-listbox::-webkit-scrollbar-thumb{background:#666666}.mc-listbox__item,.mc-listbox__tile{align-items:center;display:flex;gap:.5rem;min-height:3rem;padding-left:.75rem;padding-right:.75rem;position:relative;justify-content:space-between}.mc-listbox__item:not(:last-child),.mc-listbox__tile:not(:last-child){border-bottom:1px solid #b3b3b3}.mc-listbox__item:hover,.mc-listbox__tile:hover{background-color:#e6e6e6;box-shadow:inset 9px 0 0 -7px #191919}.mc-listbox__flag,.mc-listbox__icon{width:2rem;height:2rem}.mc-listbox__flag{font-size:1.4375rem;line-height:1.3913043478;text-align:center}.mc-listbox__empty{font-size:.875rem;line-height:1.2857142857;color:#c61112;display:inline-block;margin-top:.25rem}.mc-listbox__label{cursor:pointer;margin-right:auto}.mc-listbox__label:after{content:\"\";position:absolute;inset:0;z-index:2}.mc-listbox__input{order:1}.mc-listbox .is-checked,.mc-listbox .is-selected{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%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-repeat:no-repeat;background-position:right .75rem center;background-size:1.5rem}.mc-listbox .is-focus{background-color:#e6e6e6;box-shadow:inset 9px 0 0 -7px #191919}.mc-listbox .is-disabled{cursor:not-allowed;box-shadow:none;background-color:#ccc;color:#666;pointer-events:none}.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:not(.mc-listbox--multi) .mc-listbox__input:checked+.mc-listbox__label:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%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-repeat:no-repeat;background-position:center;content:\"\";height:1.5rem;position:absolute;right:.75rem;top:0;transform:translateY(50%);width:1.5rem}.mc-listbox--left{right:0}.mc-loader{color:#188803;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 #0b96cc}.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", "isOpen", "selectedItems", "customMaxWidth"], outputs: ["itemsSelected"] }, { 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 }, { propertyName: "listboxElementRef", first: true, predicate: ["listbox"], descendants: true, read: ElementRef }], 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      !showSelectedTags && multiple && getSelectedListboxItems().length > 0 ? '3.5rem' : '',\n    '--autocomplete-width': '100%'\n  }\"\n>\n  <div class=\"mc-autocomplete__main\">\n    <moz-tag\n      *ngIf=\"!showSelectedTags && 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)]=\"search\"\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\">Clear</span>\n      </button>\n    </div>\n  </div>\n  <moz-listbox\n    *ngIf=\"openState\"\n    #listbox\n    [listboxItems]=\"listboxItems\"\n    [isOpen]=\"openState\"\n    [multiple]=\"multiple\"\n    [selectedItems]=\"selectedItems\"\n    (itemsSelected)=\"itemsSelectedListboxEvent($event)\"\n  ></moz-listbox>\n</div>\n<div class=\"mc-autocomplete__error\" *ngIf=\"invalid\">\n  {{ errorContentText }}\n</div>\n<div class=\"mc-autocomplete__taglist\" *ngIf=\"showSelectedTags && multiple\">\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:LeroyMerlin,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 #0b96cc}.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{list-style:none;margin-left:0;padding-left:0;background-color:#fff;border:1px solid #666666;border-radius:3px;position:absolute;overflow-y:auto;margin-top:.25rem;margin-bottom:0;max-height:13.8125rem;min-width:auto;opacity:0;visibility:hidden;max-width:var(--listbox-width, auto);width:100%}.mc-listbox.is-open{opacity:1;visibility:visible;z-index:10}.mc-listbox::-webkit-scrollbar{background-color:#e6e6e6;width:.25rem}.mc-listbox::-webkit-scrollbar-thumb{background:#666666}.mc-listbox__item,.mc-listbox__tile{align-items:center;display:flex;gap:.5rem;min-height:3rem;padding-left:.75rem;padding-right:.75rem;position:relative;justify-content:space-between}.mc-listbox__item:not(:last-child),.mc-listbox__tile:not(:last-child){border-bottom:1px solid #b3b3b3}.mc-listbox__item:hover,.mc-listbox__tile:hover{background-color:#e6e6e6;box-shadow:inset 9px 0 0 -7px #191919}.mc-listbox__flag,.mc-listbox__icon{width:2rem;height:2rem}.mc-listbox__flag{font-size:1.4375rem;line-height:1.3913043478;text-align:center}.mc-listbox__empty{font-size:.875rem;line-height:1.2857142857;color:#c61112;display:inline-block;margin-top:.25rem}.mc-listbox__label{cursor:pointer;margin-right:auto}.mc-listbox__label:after{content:\"\";position:absolute;inset:0;z-index:2}.mc-listbox__input{order:1}.mc-listbox .is-checked,.mc-listbox .is-selected{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%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-repeat:no-repeat;background-position:right .75rem center;background-size:1.5rem}.mc-listbox .is-focus{background-color:#e6e6e6;box-shadow:inset 9px 0 0 -7px #191919}.mc-listbox .is-disabled{cursor:not-allowed;box-shadow:none;background-color:#ccc;color:#666;pointer-events:none}.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:not(.mc-listbox--multi) .mc-listbox__input:checked+.mc-listbox__label:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%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-repeat:no-repeat;background-position:center;content:\"\";height:1.5rem;position:absolute;right:.75rem;top:0;transform:translateY(50%);width:1.5rem}.mc-listbox--left{right:0}.mc-loader{color:#188803;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 #0b96cc}.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", "isOpen", "selectedItems", "customMaxWidth"], outputs: ["itemsSelected"] }, { 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: [
@@ -3692,7 +3741,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      !showSelectedTags && multiple && getSelectedListboxItems().length > 0 ? '3.5rem' : '',\n    '--autocomplete-width': '100%'\n  }\"\n>\n  <div class=\"mc-autocomplete__main\">\n    <moz-tag\n      *ngIf=\"!showSelectedTags && 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)]=\"search\"\n        (ngModelChange)=\"searchEvent()\"\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\">Clear</span>\n      </button>\n    </div>\n  </div>\n  <moz-listbox\n    *ngIf=\"openState\"\n    #listbox\n    [listboxItems]=\"listboxItems\"\n    [isOpen]=\"openState\"\n    [multiple]=\"multiple\"\n    [selectedItems]=\"selectedItems\"\n    (itemsSelected)=\"itemsSelectedListboxEvent($event)\"\n  ></moz-listbox>\n</div>\n<div class=\"mc-autocomplete__error\" *ngIf=\"invalid\">\n  {{ errorContentText }}\n</div>\n<div class=\"mc-autocomplete__taglist\" *ngIf=\"showSelectedTags && multiple\">\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:LeroyMerlin,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 #0b96cc}.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{list-style:none;margin-left:0;padding-left:0;background-color:#fff;border:1px solid #666666;border-radius:3px;position:absolute;overflow-y:auto;margin-top:.25rem;margin-bottom:0;max-height:13.8125rem;min-width:auto;opacity:0;visibility:hidden;max-width:var(--listbox-width, auto);width:100%}.mc-listbox.is-open{opacity:1;visibility:visible;z-index:10}.mc-listbox::-webkit-scrollbar{background-color:#e6e6e6;width:.25rem}.mc-listbox::-webkit-scrollbar-thumb{background:#666666}.mc-listbox__item,.mc-listbox__tile{align-items:center;display:flex;gap:.5rem;min-height:3rem;padding-left:.75rem;padding-right:.75rem;position:relative;justify-content:space-between}.mc-listbox__item:not(:last-child),.mc-listbox__tile:not(:last-child){border-bottom:1px solid #b3b3b3}.mc-listbox__item:hover,.mc-listbox__tile:hover{background-color:#e6e6e6;box-shadow:inset 9px 0 0 -7px #191919}.mc-listbox__flag,.mc-listbox__icon{width:2rem;height:2rem}.mc-listbox__flag{font-size:1.4375rem;line-height:1.3913043478;text-align:center}.mc-listbox__empty{font-size:.875rem;line-height:1.2857142857;color:#c61112;display:inline-block;margin-top:.25rem}.mc-listbox__label{cursor:pointer;margin-right:auto}.mc-listbox__label:after{content:\"\";position:absolute;inset:0;z-index:2}.mc-listbox__input{order:1}.mc-listbox .is-checked,.mc-listbox .is-selected{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%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-repeat:no-repeat;background-position:right .75rem center;background-size:1.5rem}.mc-listbox .is-focus{background-color:#e6e6e6;box-shadow:inset 9px 0 0 -7px #191919}.mc-listbox .is-disabled{cursor:not-allowed;box-shadow:none;background-color:#ccc;color:#666;pointer-events:none}.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:not(.mc-listbox--multi) .mc-listbox__input:checked+.mc-listbox__label:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%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-repeat:no-repeat;background-position:center;content:\"\";height:1.5rem;position:absolute;right:.75rem;top:0;transform:translateY(50%);width:1.5rem}.mc-listbox--left{right:0}.mc-loader{color:#188803;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 #0b96cc}.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      !showSelectedTags && multiple && getSelectedListboxItems().length > 0 ? '3.5rem' : '',\n    '--autocomplete-width': '100%'\n  }\"\n>\n  <div class=\"mc-autocomplete__main\">\n    <moz-tag\n      *ngIf=\"!showSelectedTags && 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)]=\"search\"\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\">Clear</span>\n      </button>\n    </div>\n  </div>\n  <moz-listbox\n    *ngIf=\"openState\"\n    #listbox\n    [listboxItems]=\"listboxItems\"\n    [isOpen]=\"openState\"\n    [multiple]=\"multiple\"\n    [selectedItems]=\"selectedItems\"\n    (itemsSelected)=\"itemsSelectedListboxEvent($event)\"\n  ></moz-listbox>\n</div>\n<div class=\"mc-autocomplete__error\" *ngIf=\"invalid\">\n  {{ errorContentText }}\n</div>\n<div class=\"mc-autocomplete__taglist\" *ngIf=\"showSelectedTags && multiple\">\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:LeroyMerlin,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 #0b96cc}.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{list-style:none;margin-left:0;padding-left:0;background-color:#fff;border:1px solid #666666;border-radius:3px;position:absolute;overflow-y:auto;margin-top:.25rem;margin-bottom:0;max-height:13.8125rem;min-width:auto;opacity:0;visibility:hidden;max-width:var(--listbox-width, auto);width:100%}.mc-listbox.is-open{opacity:1;visibility:visible;z-index:10}.mc-listbox::-webkit-scrollbar{background-color:#e6e6e6;width:.25rem}.mc-listbox::-webkit-scrollbar-thumb{background:#666666}.mc-listbox__item,.mc-listbox__tile{align-items:center;display:flex;gap:.5rem;min-height:3rem;padding-left:.75rem;padding-right:.75rem;position:relative;justify-content:space-between}.mc-listbox__item:not(:last-child),.mc-listbox__tile:not(:last-child){border-bottom:1px solid #b3b3b3}.mc-listbox__item:hover,.mc-listbox__tile:hover{background-color:#e6e6e6;box-shadow:inset 9px 0 0 -7px #191919}.mc-listbox__flag,.mc-listbox__icon{width:2rem;height:2rem}.mc-listbox__flag{font-size:1.4375rem;line-height:1.3913043478;text-align:center}.mc-listbox__empty{font-size:.875rem;line-height:1.2857142857;color:#c61112;display:inline-block;margin-top:.25rem}.mc-listbox__label{cursor:pointer;margin-right:auto}.mc-listbox__label:after{content:\"\";position:absolute;inset:0;z-index:2}.mc-listbox__input{order:1}.mc-listbox .is-checked,.mc-listbox .is-selected{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%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-repeat:no-repeat;background-position:right .75rem center;background-size:1.5rem}.mc-listbox .is-focus{background-color:#e6e6e6;box-shadow:inset 9px 0 0 -7px #191919}.mc-listbox .is-disabled{cursor:not-allowed;box-shadow:none;background-color:#ccc;color:#666;pointer-events:none}.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:not(.mc-listbox--multi) .mc-listbox__input:checked+.mc-listbox__label:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%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-repeat:no-repeat;background-position:center;content:\"\";height:1.5rem;position:absolute;right:.75rem;top:0;transform:translateY(50%);width:1.5rem}.mc-listbox--left{right:0}.mc-loader{color:#188803;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 #0b96cc}.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.Injector, decorators: [{
                     type: Inject,
                     args: [Injector]
@@ -3730,6 +3779,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], searchUpdated: [{
                 type: Output
+            }], focusinEmitter: [{
+                type: Output
+            }], focusoutEmitter: [{
+                type: Output
+            }], inputClicked: [{
+                type: Output
             }], taglistComponent: [{
                 type: ViewChild,
                 args: ['taglist', { static: false }]
@@ -4679,15 +4734,17 @@ class MozSidebarComponent {
     constructor(routerLinkActive, routerLink) {
         this.routerLinkActive = routerLinkActive;
         this.routerLink = routerLink;
+        this.opened = new EventEmitter();
         this.localOpen = false;
-        this.defaultOptions = { active: '', collapsed: true, closeOnSelect: true };
+        this.defaultOptions = { active: '', opened: true, closeOnSelect: true };
     }
     ngOnInit() {
         this.options = { ...this.defaultOptions, ...this.options };
-        this.localOpen = this.options.collapsed || false;
+        this.localOpen = this.options.opened || false;
     }
     toggleSidebar() {
         this.localOpen = !this.localOpen;
+        this.opened.emit(this.localOpen);
     }
     toggleUser() {
         if (!this.userCmp)
@@ -4725,10 +4782,10 @@ class MozSidebarComponent {
     }
 }
 MozSidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MozSidebarComponent, deps: [{ token: RouterLinkActive, optional: true }, { token: RouterLinkWithHref, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MozSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MozSidebarComponent, selector: "moz-sidebar", inputs: { options: "options" }, queries: [{ propertyName: "homeCmp", first: true, predicate: MozSidebarHomeComponent, descendants: true }, { propertyName: "userCmp", first: true, predicate: MozSidebarUserComponent, descendants: true }, { propertyName: "featuresCmp", predicate: i0.forwardRef(function () { return MozSidebarFeatureComponent; }) }, { propertyName: "utilitiesCmp", predicate: MozSidebarUtilityComponent }], ngImport: i0, template: "<nav class=\"mc-sidebar\" [ngClass]=\"localOpen ? 'is-open' : 'is-close'\">\n  <div class=\"mc-sidebar__container\" [ngClass]=\"{'has-bottom-panel': userCmp}\">\n    <button class=\"mc-sidebar__trigger\" type=\"button\" id=\"mc-sidebar__trigger\" (click)=\"toggleSidebar()\">\n      <span class=\"mc-sidebar__trigger__container\">\n        <moz-icon *ngIf=\"!localOpen\" [iconName]=\"'Navigation_Arrow_DoubleArrow--Right_24px'\"></moz-icon>\n        <moz-icon *ngIf=\"localOpen\" [iconName]=\"'Navigation_Arrow_DoubleArrow--Left_24px'\"></moz-icon>\n      </span>\n    </button>\n    <ng-container *ngTemplateOutlet=\"sidebarHome\"></ng-container>\n\n    <ng-container *ngTemplateOutlet=\"separator\"></ng-container>\n\n    <div class=\"mc-sidebar-section\">\n      <ul [ngClass]=\"{'is-hidden': activeSubFeature && localOpen,\n          'is-visible': !activeSubFeature || !localOpen}\">\n        <li *ngFor=\"let item of featuresCmp\">\n          <ng-container *ngTemplateOutlet=\"sidebarFeatures; context: {item: item}\"></ng-container>\n        </li>\n      </ul>\n      <ng-container *ngTemplateOutlet=\"tmplSubFeature; context: {feature: activeSubFeature}\"></ng-container>\n    </div>\n    <div class=\"mc-sidebar__utilities\">\n      <div *ngFor=\"let utility of utilitiesCmp\">\n        <ng-container *ngTemplateOutlet=\"separator\"></ng-container>\n          <ul>\n            <li class=\"mc-sidebar__utilities__item\">\n              <ng-container *ngTemplateOutlet=\"sidebarUtility; context: {utility: utility}\"></ng-container>\n            </li>\n          </ul>\n      </div>\n    </div>\n\n    <!-- <ng-container *ngTemplateOutlet=\"separator\"></ng-container> -->\n\n  </div>\n  <ng-container *ngTemplateOutlet=\"sidebarUser\"></ng-container>\n</nav>\n\n<ng-template #sidebarHome>\n  <ng-container *ngIf=\"homeCmp\">\n    <button class=\"mc-sidebar-feature-group\" [ngClass]=\"localOpen ? 'is-open' : 'is-close'\">\n      <a href=\"#\" [routerLink]=\"homeCmp.link\">\n        <span class=\"mc-sidebar-feature-group__container\" [ngClass]=\"localOpen ? 'is-open' : 'is-close'\" (click)=\"select(homeCmp)\">\n          <span class=\"mc-sidebar-feature-group__icon\">\n            <ng-container *ngTemplateOutlet=\"homeCmp.tmplIcon\"></ng-container>\n          </span>\n          <ng-container *ngIf=\"localOpen\">\n            <span class=\"mc-sidebar-feature-group__label\">\n              <ng-container *ngTemplateOutlet=\"homeCmp.tmplText\"></ng-container>\n            </span>\n          </ng-container>\n        </span>\n      </a>\n    </button >\n   </ng-container>\n</ng-template>\n\n<ng-template #sidebarFeatures let-item=\"item\">\n  <!-- <span> -->\n    <ng-container *ngTemplateOutlet=\"tmplFeatureGroup\"></ng-container>\n\n    <ul *ngIf=\"item?.category\" class=\"mc-sidebar-feature-group__content\" [ngClass]=\"{ 'is-open': localOpen && item.selected, 'is-close': !localOpen || !item.selected }\">\n      <li *ngFor=\"let innerItem of item.featuresCmp\" id=\"innerFeature\">\n            <ng-template *ngTemplateOutlet=\"tmplFeature; context: {feature: innerItem}\"></ng-template>\n      </li>\n    </ul>\n  <!-- </span> -->\n\n  <ng-template #tmplFeatureGroup>\n    <button class=\"mc-sidebar-feature-group\" (click)=\"select(item)\" [ngClass]=\"{ 'is-selected': item.selected && !item.category, 'is-open': localOpen, 'is-close': !localOpen }\">\n      <a href=\"#\" [routerLink]=\"item.link\">\n        <span class=\"mc-sidebar-feature-group__container\" [routerLink]=\"item.link\">\n          <span class=\"mc-sidebar-feature-group__icon\">\n          <ng-container *ngTemplateOutlet=\"item.tmplIcon\"></ng-container>\n        </span>\n        <div style=\"display:flex;\" *ngIf=\"localOpen\">\n          <span class=\"mc-sidebar-feature-group__label\">\n            <ng-container *ngTemplateOutlet=\"item.tmplText\"></ng-container>\n          </span>\n          <div *ngIf=\"localOpen && item?.category\">\n            <moz-icon *ngIf=\"!item.selected\" [iconName]=\"'Navigation_Control_More_16px'\"></moz-icon>\n\n            <moz-icon *ngIf=\"item.selected\" [iconName]=\"'Navigation_Control_Less_16px'\"></moz-icon>\n          </div>\n        </div>\n      </span>\n      </a>\n    </button>\n  </ng-template>\n\n</ng-template>\n\n<ng-template #tmplFeature let-feature=\"feature\">\n  <button class=\"mc-sidebar-feature\" [ngClass]=\"{ 'is-selected': feature.selected, 'is-open': localOpen, 'is-close': !localOpen }\">\n    <a href=\"#\" [routerLink]=\"feature.link\">\n      <span class=\"mc-sidebar-feature__container\" (click)=\"feature.subCategory ? selectSubFeature(feature) : select(feature)\">\n        <span class=\"mc-sidebar-feature__label\">\n          <ng-container *ngTemplateOutlet=\"feature.tmplText\"></ng-container>\n        </span>\n      </span>\n    </a>\n  </button>\n</ng-template>\n\n<ng-template #tmplSubFeature let-feature=\"feature\">\n  <!-- <ng-container *ngTemplateOutlet=\"feature.tmplText\"></ng-container> -->\n  <div class=\"mc-sidebar-sub-feature\" *ngIf=\"!!feature\">\n    <button class=\"mc-sidebar-sub-feature__trigger\" (click)=\"closeSubFeature()\">\n      <span class=\"mc-sidebar-sub-feature__container\">\n        <moz-icon *ngIf=\"localOpen\" [iconName]=\"'Navigation_Arrow_Back_24px'\"></moz-icon>\n        <span class=\"mc-sidebar-sub-feature__trigger__label\">\n          <ng-container *ngTemplateOutlet=\"feature.tmplText\"></ng-container>\n        </span>\n      </span>\n    </button>\n    <ul>\n      <li *ngFor=\"let item of feature.featuresCmp\" class=\"mc-sidebar-sub-feature__item\" id=\"sub-features\">\n        <ng-template *ngTemplateOutlet=\"tmplFeature; context: {feature: item}\"></ng-template>\n      </li>\n    </ul>\n  </div>\n</ng-template>\n\n<ng-template #sidebarUtility let-utility=\"utility\">\n    <button class=\"mc-sidebar-segment\" [ngClass]=\"{ 'is-selected': utility.selected, 'is-open': localOpen, 'is-close': !localOpen }\">\n      <a href=\"#\" [routerLink]=\"utility.link\">\n        <span class=\"mc-sidebar-segment__container\" (click)=\"select(utility)\">\n            <span class=\"mc-sidebar-segment__icon\">\n            <ng-container *ngTemplateOutlet=\"utility.tmplIcon\"></ng-container>\n            </span>\n          <span class=\"mc-sidebar-segment__label\">\n            <ng-container *ngTemplateOutlet=\"utility.tmplText\"></ng-container>\n          </span>\n        </span>\n      </a>\n    </button>\n</ng-template>\n\n<ng-template #sidebarUser>\n  <ng-container *ngIf=\"userCmp && userCmp.templateRef\">\n    <div class=\"mc-sidebar-user\" [ngClass]=\"localOpen ? 'is-open' : 'is-close'\">\n      <button class=\"mc-sidebar-user__header\">\n        <span class=\"mc-sidebar-user__header__picture\">\n          <ng-template #tmplProfilPicture>\n            <ng-container *ngTemplateOutlet=\"userCmp.tmplPicture\"></ng-container>\n          </ng-template>\n          <moz-icon *ngIf=\"!userCmp.tmplPicture; else tmplProfilPicture\" [iconName]=\"'User_Account_Profile--View_24px'\"></moz-icon>\n        </span>\n        <div style=\"display:flex; width: 100%;\" *ngIf=\"localOpen\">\n          <p class=\"mc-sidebar-user__header__information\">\n            <ng-container *ngTemplateOutlet=\"userCmp.templateRef\"></ng-container>\n          </p>\n          <span (click)=\"toggleUser()\" *ngIf=\"userCmp?.features?.length\" class=\"mc-sidebar-user__header__information__icon\">\n            <moz-icon *ngIf=\"!userCmp.localOpen\" [iconName]=\"'Navigation_Control_More_16px'\"></moz-icon>\n\n            <moz-icon *ngIf=\"userCmp.localOpen\" [iconName]=\"'Navigation_Control_Less_16px'\"></moz-icon>\n          </span>\n        </div>\n      </button>\n\n      <ul *ngIf=\"userCmp.features?.length && userCmp.localOpen\" [ngClass]=\"userCmp.localOpen ? 'is-open' : 'is-close'\"\n        id=\"user-content\" ref=\"content\" class=\"mc-sidebar-user__content\">\n        <li *ngFor=\"let userFeature of userCmp.features\">\n          <button class=\"mc-sidebar-feature\" [ngClass]=\"{ 'is-open': localOpen, 'is-close': !localOpen }\">\n            <!-- <a href=\"#\"> -->\n              <span class=\"mc-sidebar-feature__container\">\n                <span class=\"mc-sidebar-feature__label\">\n                  <ng-container *ngTemplateOutlet=\"userFeature\"></ng-container>\n                </span>\n              </span>\n            <!-- </a> -->\n          </button>\n        </li>\n      </ul>\n  </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #separator>\n  <span role=\"separator\" class=\"mc-sidebar-separator\" [ngClass]=\"localOpen ? 'is-open' : 'is-close'\">\n  </span>\n</ng-template>\n", styles: ["a,a:hover,a:visited,a:focus,a:active{text-decoration:none;color:inherit}.mc-sidebar{position:absolute;top:0;left:0;z-index:10;font-size:14px;font-family:LeroyMerlin,sans-serif;color:#fff;box-sizing:border-box;fill:#fff;width:320px;background:#082435;display:block;height:100vh}.mc-sidebar__container{height:100%;display:flex;flex-direction:column}.mc-sidebar__container.has-bottom-panel{height:calc(100% - 88px)}.mc-sidebar__utilities{margin-bottom:24px}.mc-sidebar__utilities__item{margin:4px 0}.mc-sidebar__utilities__item:first-child{margin-top:0}.mc-sidebar__utilities__item:last-child{margin-bottom:0}.mc-sidebar__trigger{cursor:pointer;background:none;border:none;padding:0;min-height:92px;width:100%;font-size:inherit;font-family:inherit;position:relative;display:flex}.mc-sidebar__trigger__container{position:relative;margin:28px 20px;height:32px;width:100%}.mc-sidebar__trigger__container>*{position:absolute;top:0;right:0;width:24px;height:24px}.mc-sidebar__trigger:focus-visible{box-shadow:none;border:none;outline:none}.mc-sidebar__trigger:focus-visible .mc-sidebar__trigger__container{box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}.mc-sidebar.is-open{transition:width .3s ease-in-out}.mc-sidebar.is-close{transition:width .3s ease-in-out;width:64px;padding:0}.mc-sidebar ul{list-style-type:none;margin:0;padding:0}.mc-sidebar-segment{font-size:.875rem;line-height:1.5714285714;background:none;border:none;cursor:pointer;flex:0;font-family:inherit;text-decoration:none;color:#fff;display:flex;overflow:hidden;min-height:40px;padding:0;width:100%}.mc-sidebar-segment__container{display:flex;align-items:center;width:100%;padding:8px 0}.mc-sidebar-segment__icon{flex-shrink:0}.mc-sidebar-segment__label{margin-left:10px}.mc-sidebar-segment.is-selected{background:#007f8c}.mc-sidebar-segment:focus-visible{box-shadow:none;border:none;outline:none}.mc-sidebar-segment:focus-visible .mc-sidebar-segment__container{box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}.mc-sidebar-segment:hover{background:#405d68}.mc-sidebar-segment.is-close .mc-sidebar-segment__container{transition:margin .3s ease-in-out;margin:0 20px;width:24px}.mc-sidebar-segment.is-close .mc-sidebar-segment__label{opacity:0}.mc-sidebar-segment.is-open .mc-sidebar-segment__container{transition:margin .3s ease-in-out;margin:0 32px}.mc-sidebar-segment.is-open__label{opacity:1}.mc-sidebar-section{display:flex;flex-direction:row;flex:1;align-items:flex-start;min-height:38px;overflow-x:hidden;overflow-y:auto;overflow-y:overlay;padding:1px 0;scrollbar-color:#009eac #082435;scrollbar-width:thin}.mc-sidebar-section ul,.mc-sidebar-section li{list-style-type:none;margin:0;padding:0;display:flex;width:100%}.mc-sidebar-section ul{align-items:start;flex-direction:column;justify-content:center}.mc-sidebar-section ul li{flex-direction:column;box-sizing:border-box;margin:4px 0}.mc-sidebar-section ul li:first-child{margin-top:0}.mc-sidebar-section ul li:last-child{margin-bottom:0}.mc-sidebar-section ul.is-hidden{transition:margin-left .3s ease-in-out;margin-left:-320px;opacity:0}.mc-sidebar-section ul.is-visible{transition:margin-left .3s ease-in-out;margin-left:0}.mc-sidebar-section::-webkit-scrollbar{width:5px;height:10px;background:#082435}.mc-sidebar-section::-webkit-scrollbar-thumb{background:#009eac}.mc-sidebar-feature-group{background:none;border:none;color:#fff;cursor:pointer;font-size:inherit;font-family:inherit;text-align:initial;margin:0;padding:0;min-height:40px;overflow:hidden;text-decoration:none}.mc-sidebar-feature-group__container{display:flex;align-items:center;margin:5px 0;padding:8px 0;transition:margin .3s ease-in-out}.mc-sidebar-feature-group__label{font-size:.875rem;line-height:1.2857142857;margin:0 8px;width:200px;min-width:200px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}.mc-sidebar-feature-group__label__tooltip{opacity:0;transition:0s opacity;background-color:#5b737d;border:1px solid white;border-radius:4px;position:absolute;pointer-events:none;left:calc(100% - 16px);padding:8px 16px;width:188px}.mc-sidebar-feature-group__label__tooltip__pointer{position:absolute;top:50%;left:-8px;top:calc(50% - 6px);width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid white}.mc-sidebar-feature-group__label__tooltip__pointer div{position:relative;top:-6px;left:2px;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid #5b737d}.mc-sidebar-feature-group__label:hover+.mc-sidebar-feature-group__label__tooltip{opacity:1;transition-delay:1s}.mc-sidebar-feature-group__content{overflow:hidden;transition:height .3s ease-in-out}.mc-sidebar-feature-group__content.is-close{height:0}.mc-sidebar-feature-group__content.is-open{height:auto}.mc-sidebar-feature-group__content li#innerFeature{margin:0}.mc-sidebar-feature-group.is-selected{background:#007f8c}.mc-sidebar-feature-group.is-close .mc-sidebar-feature-group__container{margin:0 20px;width:24px}.mc-sidebar-feature-group.is-open .mc-sidebar-feature-group__container{margin:0 32px}.mc-sidebar-feature-group:hover{background:#405d68}.mc-sidebar-feature-group:focus-visible{box-shadow:none;border:none;outline:none}.mc-sidebar-feature-group:focus-visible .mc-sidebar-feature-group__container{box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}.mc-sidebar-feature-group ul,.mc-sidebar-feature-group li{list-style-type:none;margin:0;padding:0;display:flex;width:100%}.mc-sidebar-feature-group ul{align-items:start;flex-direction:column;justify-content:center}.mc-sidebar-feature-group ul li{flex-direction:column;box-sizing:border-box}.mc-sidebar-feature{font-size:16px;min-width:200px;cursor:pointer;flex:1;display:flex;color:#fff;line-height:22px;overflow:hidden;background:none;border:none;padding:0;text-align:left;font-family:inherit;text-decoration:none}.mc-sidebar-feature__container{display:flex;align-items:center;width:100%;padding-top:8px;padding-bottom:8px}.mc-sidebar-feature__container span{max-width:200px;min-width:200px}.mc-sidebar-feature__label{font-size:.875rem;line-height:1.2857142857;flex:1;margin-right:8px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}.mc-sidebar-feature__label__tooltip{opacity:0;transition:0s opacity;background-color:#5b737d;border:1px solid white;border-radius:4px;position:absolute;pointer-events:none;left:calc(100% - 16px);padding:8px 16px;width:188px}.mc-sidebar-feature__label__tooltip__pointer{position:absolute;top:50%;left:-8px;top:calc(50% - 6px);width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid white}.mc-sidebar-feature__label__tooltip__pointer div{position:relative;top:-6px;left:2px;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid #5b737d}.mc-sidebar-feature__label:hover+.mc-sidebar-feature__label__tooltip{opacity:1;transition-delay:1s}.mc-sidebar-feature__icon{margin-right:8px}.mc-sidebar-feature.is-selected{background:#007f8c}.mc-sidebar-feature.is-close{transition:padding .3s ease-in-out;padding:0}.mc-sidebar-feature.is-close .mc-sidebar-feature__container{transition:padding-left .3s ease-in-out;padding-left:20px;width:24px}.mc-sidebar-feature.is-open{transition:padding .3s ease-in-out;padding:0 32px}.mc-sidebar-feature.is-open .mc-sidebar-feature__container{transition:padding-left .3s ease-in-out;padding-left:32px}.mc-sidebar-feature.is-disabled{color:#92a2a9;fill:#92a2a9}.mc-sidebar-feature:hover{background:#405d68}.mc-sidebar-feature:focus-visible{box-shadow:none;border:none;outline:none}.mc-sidebar-feature:focus-visible .mc-sidebar-feature__container{box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}.mc-sidebar-sub-feature{width:320px}.mc-sidebar-sub-feature__trigger{background:none;border:none;cursor:pointer;display:flex;margin:0;font-size:inherit;font-family:inherit;width:100%;padding:0 32px}.mc-sidebar-sub-feature__trigger__label{font-size:16px;font-weight:700;margin-left:8px;color:#fff}.mc-sidebar-sub-feature__trigger__item{margin:-8px 0 24px}.mc-sidebar-sub-feature__trigger:focus-visible{box-shadow:none;border:none;outline:none}.mc-sidebar-sub-feature__trigger:focus-visible .mc-sidebar-sub-feature__container{box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}.mc-sidebar-sub-feature__container{display:flex;align-items:center;width:100%;height:24px;padding:8px 0}.mc-sidebar-sub-feature ul{list-style:none;margin:0;padding:0}.mc-sidebar-sub-feature ul li#sub-features{margin:0}.mc-sidebar-user{left:0;right:0;bottom:0;position:absolute;background:#264653}.mc-sidebar-user__header{display:flex;align-items:center;background:none;border:none;color:#fff;font-size:inherit;font-family:inherit;text-align:initial;margin:0;width:100%;overflow:hidden}.mc-sidebar-user__header:focus-visible{box-shadow:none;border:none;border-radius:12px;outline:1px solid #0b96cc;outline-offset:-5px}.mc-sidebar-user__header:hover{cursor:pointer}.mc-sidebar-user__header:hover .mc-sidebar-user__header__information__icon{background:#082435}.mc-sidebar-user__header__picture{display:flex;align-items:center;justify-content:center;background:#5b737d;border-radius:24px;width:48px;min-width:48px;height:48px;overflow:hidden}.mc-sidebar-user__header__picture img{display:block}.mc-sidebar-user__header__information{justify-content:space-around;display:flex;flex-direction:column;flex:1;margin:0 0 0 8px;height:40px}.mc-sidebar-user__header__information__icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:4px}.mc-sidebar-user__header__information__identity{font-size:16px;font-weight:700}.mc-sidebar-user__header__information__title,.mc-sidebar-user__header__information__identity{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:176px}.mc-sidebar-user__content#user-content{list-style-type:none;padding:0;overflow:hidden;margin:-8px 0 24px;transition:all .3s ease-in-out}.mc-sidebar-user__content#user-content.is-close{height:0;margin:0}.mc-sidebar-user__content#user-content .is-open{height:auto}.mc-sidebar-user.is-close .mc-sidebar-user__header{transition:padding .3s ease-in-out;padding:12px 8px;margin:8px 0}.mc-sidebar-user.is-open .mc-sidebar-user__header{transition:padding .3s ease-in-out;padding:12px 24px 12px 32px;margin:8px 0}.mc-sidebar-separator{border-bottom:1px solid #5b737d;display:flex}.mc-sidebar-separator.is-close{transition:margin .3s ease-in-out;margin:24px 0}.mc-sidebar-separator.is-open{transition:margin .3s ease-in-out;margin:24px 32px}\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: "component", type: IconComponent, selector: "moz-icon", inputs: ["iconName"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MozSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MozSidebarComponent, selector: "moz-sidebar", inputs: { options: "options" }, outputs: { opened: "opened" }, queries: [{ propertyName: "homeCmp", first: true, predicate: MozSidebarHomeComponent, descendants: true }, { propertyName: "userCmp", first: true, predicate: MozSidebarUserComponent, descendants: true }, { propertyName: "featuresCmp", predicate: i0.forwardRef(function () { return MozSidebarFeatureComponent; }) }, { propertyName: "utilitiesCmp", predicate: MozSidebarUtilityComponent }], ngImport: i0, template: "<nav class=\"mc-sidebar\" [ngClass]=\"localOpen ? 'is-open' : 'is-close'\">\n  <div class=\"mc-sidebar__container\" [ngClass]=\"{'has-bottom-panel': userCmp}\">\n    <button class=\"mc-sidebar__trigger\" type=\"button\" id=\"mc-sidebar__trigger\" (click)=\"toggleSidebar()\">\n      <span class=\"mc-sidebar__trigger__container\">\n        <moz-icon *ngIf=\"!localOpen\" [iconName]=\"'Navigation_Arrow_DoubleArrow--Right_24px'\"></moz-icon>\n        <moz-icon *ngIf=\"localOpen\" [iconName]=\"'Navigation_Arrow_DoubleArrow--Left_24px'\"></moz-icon>\n      </span>\n    </button>\n    <ng-container *ngTemplateOutlet=\"sidebarHome\"></ng-container>\n\n    <ng-container *ngTemplateOutlet=\"separator\"></ng-container>\n\n    <div class=\"mc-sidebar-section\">\n      <ul [ngClass]=\"{'is-hidden': activeSubFeature && localOpen,\n          'is-visible': !activeSubFeature || !localOpen}\">\n        <li *ngFor=\"let item of featuresCmp\">\n          <ng-container *ngTemplateOutlet=\"sidebarFeatures; context: {item: item}\"></ng-container>\n        </li>\n      </ul>\n      <ng-container *ngTemplateOutlet=\"tmplSubFeature; context: {feature: activeSubFeature}\"></ng-container>\n    </div>\n    <div class=\"mc-sidebar__utilities\">\n      <div *ngFor=\"let utility of utilitiesCmp\">\n        <ng-container *ngTemplateOutlet=\"separator\"></ng-container>\n          <ul>\n            <li class=\"mc-sidebar__utilities__item\">\n              <ng-container *ngTemplateOutlet=\"sidebarUtility; context: {utility: utility}\"></ng-container>\n            </li>\n          </ul>\n      </div>\n    </div>\n\n  </div>\n  <ng-container *ngTemplateOutlet=\"sidebarUser\"></ng-container>\n</nav>\n\n<ng-template #sidebarHome>\n  <ng-container *ngIf=\"homeCmp\">\n    <button class=\"mc-sidebar-feature-group\" [ngClass]=\"localOpen ? 'is-open' : 'is-close'\">\n      <a href=\"#\" [routerLink]=\"homeCmp.link\">\n        <span class=\"mc-sidebar-feature-group__container\" [ngClass]=\"localOpen ? 'is-open' : 'is-close'\" (click)=\"select(homeCmp)\">\n          <span class=\"mc-sidebar-feature-group__icon\">\n            <ng-container *ngTemplateOutlet=\"homeCmp.tmplIcon\"></ng-container>\n          </span>\n          <ng-container *ngIf=\"localOpen\">\n            <span class=\"mc-sidebar-feature-group__label\">\n              <ng-container *ngTemplateOutlet=\"homeCmp.tmplText\"></ng-container>\n            </span>\n          </ng-container>\n        </span>\n      </a>\n    </button >\n   </ng-container>\n</ng-template>\n\n<ng-template #sidebarFeatures let-item=\"item\">\n    <ng-container *ngTemplateOutlet=\"tmplFeatureGroup\"></ng-container>\n\n    <ul *ngIf=\"item?.category\" class=\"mc-sidebar-feature-group__content\" [ngClass]=\"{ 'is-open': localOpen && item.selected, 'is-close': !localOpen || !item.selected }\">\n      <li *ngFor=\"let innerItem of item.featuresCmp\" id=\"innerFeature\">\n            <ng-template *ngTemplateOutlet=\"tmplFeature; context: {feature: innerItem}\"></ng-template>\n      </li>\n    </ul>\n\n  <ng-template #tmplFeatureGroup>\n    <button class=\"mc-sidebar-feature-group\" (click)=\"select(item)\" [ngClass]=\"{ 'is-selected': item.selected && !item.category, 'is-open': localOpen, 'is-close': !localOpen }\">\n      <a href=\"#\" [routerLink]=\"item.link\">\n        <span class=\"mc-sidebar-feature-group__container\" [routerLink]=\"item.link\">\n          <span class=\"mc-sidebar-feature-group__icon\">\n          <ng-container *ngTemplateOutlet=\"item.tmplIcon\"></ng-container>\n        </span>\n        <div style=\"display:flex;\" *ngIf=\"localOpen\">\n          <span class=\"mc-sidebar-feature-group__label\">\n            <ng-container *ngTemplateOutlet=\"item.tmplText\"></ng-container>\n          </span>\n          <div *ngIf=\"localOpen && item?.category\">\n            <moz-icon *ngIf=\"!item.selected\" [iconName]=\"'Navigation_Control_More_16px'\"></moz-icon>\n\n            <moz-icon *ngIf=\"item.selected\" [iconName]=\"'Navigation_Control_Less_16px'\"></moz-icon>\n          </div>\n        </div>\n      </span>\n      </a>\n    </button>\n  </ng-template>\n\n</ng-template>\n\n<ng-template #tmplFeature let-feature=\"feature\">\n  <button class=\"mc-sidebar-feature\" [ngClass]=\"{ 'is-selected': feature.selected, 'is-open': localOpen, 'is-close': !localOpen }\">\n    <a href=\"#\" [routerLink]=\"feature.link\">\n      <span class=\"mc-sidebar-feature__container\" (click)=\"feature.subCategory ? selectSubFeature(feature) : select(feature)\">\n        <span class=\"mc-sidebar-feature__label\">\n          <ng-container *ngTemplateOutlet=\"feature.tmplText\"></ng-container>\n        </span>\n      </span>\n    </a>\n  </button>\n</ng-template>\n\n<ng-template #tmplSubFeature let-feature=\"feature\">\n  <div class=\"mc-sidebar-sub-feature\" *ngIf=\"!!feature\">\n    <button class=\"mc-sidebar-sub-feature__trigger\" (click)=\"closeSubFeature()\">\n      <span class=\"mc-sidebar-sub-feature__container\">\n        <moz-icon *ngIf=\"localOpen\" [iconName]=\"'Navigation_Arrow_Back_24px'\"></moz-icon>\n        <span class=\"mc-sidebar-sub-feature__trigger__label\">\n          <ng-container *ngTemplateOutlet=\"feature.tmplText\"></ng-container>\n        </span>\n      </span>\n    </button>\n    <ul>\n      <li *ngFor=\"let item of feature.featuresCmp\" class=\"mc-sidebar-sub-feature__item\" id=\"sub-features\">\n        <ng-template *ngTemplateOutlet=\"tmplFeature; context: {feature: item}\"></ng-template>\n      </li>\n    </ul>\n  </div>\n</ng-template>\n\n<ng-template #sidebarUtility let-utility=\"utility\">\n    <button class=\"mc-sidebar-segment\" [ngClass]=\"{ 'is-selected': utility.selected, 'is-open': localOpen, 'is-close': !localOpen }\">\n      <a href=\"#\" [routerLink]=\"utility.link\">\n        <span class=\"mc-sidebar-segment__container\" (click)=\"select(utility)\">\n            <span class=\"mc-sidebar-segment__icon\">\n            <ng-container *ngTemplateOutlet=\"utility.tmplIcon\"></ng-container>\n            </span>\n          <span class=\"mc-sidebar-segment__label\">\n            <ng-container *ngTemplateOutlet=\"utility.tmplText\"></ng-container>\n          </span>\n        </span>\n      </a>\n    </button>\n</ng-template>\n\n<ng-template #sidebarUser>\n  <ng-container *ngIf=\"userCmp && userCmp.templateRef\">\n    <div class=\"mc-sidebar-user\" [ngClass]=\"localOpen ? 'is-open' : 'is-close'\">\n      <button class=\"mc-sidebar-user__header\">\n        <span class=\"mc-sidebar-user__header__picture\">\n          <ng-template #tmplProfilPicture>\n            <ng-container *ngTemplateOutlet=\"userCmp.tmplPicture\"></ng-container>\n          </ng-template>\n          <moz-icon *ngIf=\"!userCmp.tmplPicture; else tmplProfilPicture\" [iconName]=\"'User_Account_Profile--View_24px'\"></moz-icon>\n        </span>\n        <div style=\"display:flex; width: 100%;\" *ngIf=\"localOpen\">\n          <p class=\"mc-sidebar-user__header__information\">\n            <ng-container *ngTemplateOutlet=\"userCmp.templateRef\"></ng-container>\n          </p>\n          <span (click)=\"toggleUser()\" *ngIf=\"userCmp?.features?.length\" class=\"mc-sidebar-user__header__information__icon\">\n            <moz-icon *ngIf=\"!userCmp.localOpen\" [iconName]=\"'Navigation_Control_More_16px'\"></moz-icon>\n\n            <moz-icon *ngIf=\"userCmp.localOpen\" [iconName]=\"'Navigation_Control_Less_16px'\"></moz-icon>\n          </span>\n        </div>\n      </button>\n\n      <ul *ngIf=\"userCmp.features?.length && userCmp.localOpen\" [ngClass]=\"userCmp.localOpen ? 'is-open' : 'is-close'\"\n        id=\"user-content\" ref=\"content\" class=\"mc-sidebar-user__content\">\n        <li *ngFor=\"let userFeature of userCmp.features\">\n          <button class=\"mc-sidebar-feature\" [ngClass]=\"{ 'is-open': localOpen, 'is-close': !localOpen }\">\n              <span class=\"mc-sidebar-feature__container\">\n                <span class=\"mc-sidebar-feature__label\">\n                  <ng-container *ngTemplateOutlet=\"userFeature\"></ng-container>\n                </span>\n              </span>\n          </button>\n        </li>\n      </ul>\n  </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #separator>\n  <span role=\"separator\" class=\"mc-sidebar-separator\" [ngClass]=\"localOpen ? 'is-open' : 'is-close'\">\n  </span>\n</ng-template>\n", styles: ["a,a:hover,a:visited,a:focus,a:active{text-decoration:none;color:inherit}.mc-sidebar{position:absolute;top:0;left:0;z-index:10;font-size:14px;font-family:LeroyMerlin,sans-serif;color:#fff;box-sizing:border-box;fill:#fff;width:320px;background:#082435;display:block;height:100vh}.mc-sidebar__container{height:100%;display:flex;flex-direction:column}.mc-sidebar__container.has-bottom-panel{height:calc(100% - 88px)}.mc-sidebar__utilities{margin-bottom:24px}.mc-sidebar__utilities__item{margin:4px 0}.mc-sidebar__utilities__item:first-child{margin-top:0}.mc-sidebar__utilities__item:last-child{margin-bottom:0}.mc-sidebar__trigger{cursor:pointer;background:none;border:none;padding:0;min-height:92px;width:100%;font-size:inherit;font-family:inherit;position:relative;display:flex}.mc-sidebar__trigger__container{position:relative;margin:28px 20px;height:32px;width:100%}.mc-sidebar__trigger__container>*{position:absolute;top:0;right:0;width:24px;height:24px}.mc-sidebar__trigger:focus-visible{box-shadow:none;border:none;outline:none}.mc-sidebar__trigger:focus-visible .mc-sidebar__trigger__container{box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}.mc-sidebar.is-open{transition:width .3s ease-in-out}.mc-sidebar.is-close{transition:width .3s ease-in-out;width:64px;padding:0}.mc-sidebar ul{list-style-type:none;margin:0;padding:0}.mc-sidebar-segment{font-size:.875rem;line-height:1.5714285714;background:none;border:none;cursor:pointer;flex:0;font-family:inherit;text-decoration:none;color:#fff;display:flex;overflow:hidden;min-height:40px;padding:0;width:100%}.mc-sidebar-segment__container{display:flex;align-items:center;width:100%;padding:8px 0}.mc-sidebar-segment__icon{flex-shrink:0}.mc-sidebar-segment__label{margin-left:10px}.mc-sidebar-segment.is-selected{background:#007f8c}.mc-sidebar-segment:focus-visible{box-shadow:none;border:none;outline:none}.mc-sidebar-segment:focus-visible .mc-sidebar-segment__container{box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}.mc-sidebar-segment:hover{background:#405d68}.mc-sidebar-segment.is-close .mc-sidebar-segment__container{transition:margin .3s ease-in-out;margin:0 20px;width:24px}.mc-sidebar-segment.is-close .mc-sidebar-segment__label{opacity:0}.mc-sidebar-segment.is-open .mc-sidebar-segment__container{transition:margin .3s ease-in-out;margin:0 32px}.mc-sidebar-segment.is-open__label{opacity:1}.mc-sidebar-section{display:flex;flex-direction:row;flex:1;align-items:flex-start;min-height:38px;overflow-x:hidden;overflow-y:auto;overflow-y:overlay;padding:1px 0;scrollbar-color:#009eac #082435;scrollbar-width:thin}.mc-sidebar-section ul,.mc-sidebar-section li{list-style-type:none;margin:0;padding:0;display:flex;width:100%}.mc-sidebar-section ul{align-items:start;flex-direction:column;justify-content:center}.mc-sidebar-section ul li{flex-direction:column;box-sizing:border-box;margin:4px 0}.mc-sidebar-section ul li:first-child{margin-top:0}.mc-sidebar-section ul li:last-child{margin-bottom:0}.mc-sidebar-section ul.is-hidden{transition:margin-left .3s ease-in-out;margin-left:-320px;opacity:0}.mc-sidebar-section ul.is-visible{transition:margin-left .3s ease-in-out;margin-left:0}.mc-sidebar-section::-webkit-scrollbar{width:5px;height:10px;background:#082435}.mc-sidebar-section::-webkit-scrollbar-thumb{background:#009eac}.mc-sidebar-feature-group{background:none;border:none;color:#fff;cursor:pointer;font-size:inherit;font-family:inherit;text-align:initial;margin:0;padding:0;min-height:40px;overflow:hidden;text-decoration:none}.mc-sidebar-feature-group__container{display:flex;align-items:center;margin:5px 0;padding:8px 0;transition:margin .3s ease-in-out}.mc-sidebar-feature-group__label{font-size:.875rem;line-height:1.2857142857;margin:0 8px;width:200px;min-width:200px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}.mc-sidebar-feature-group__label__tooltip{opacity:0;transition:0s opacity;background-color:#5b737d;border:1px solid white;border-radius:4px;position:absolute;pointer-events:none;left:calc(100% - 16px);padding:8px 16px;width:188px}.mc-sidebar-feature-group__label__tooltip__pointer{position:absolute;top:50%;left:-8px;top:calc(50% - 6px);width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid white}.mc-sidebar-feature-group__label__tooltip__pointer div{position:relative;top:-6px;left:2px;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid #5b737d}.mc-sidebar-feature-group__label:hover+.mc-sidebar-feature-group__label__tooltip{opacity:1;transition-delay:1s}.mc-sidebar-feature-group__content{overflow:hidden;transition:height .3s ease-in-out}.mc-sidebar-feature-group__content.is-close{height:0}.mc-sidebar-feature-group__content.is-open{height:auto}.mc-sidebar-feature-group__content li#innerFeature{margin:0}.mc-sidebar-feature-group.is-selected{background:#007f8c}.mc-sidebar-feature-group.is-close .mc-sidebar-feature-group__container{margin:0 20px;width:24px}.mc-sidebar-feature-group.is-open .mc-sidebar-feature-group__container{margin:0 32px}.mc-sidebar-feature-group:hover{background:#405d68}.mc-sidebar-feature-group:focus-visible{box-shadow:none;border:none;outline:none}.mc-sidebar-feature-group:focus-visible .mc-sidebar-feature-group__container{box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}.mc-sidebar-feature-group ul,.mc-sidebar-feature-group li{list-style-type:none;margin:0;padding:0;display:flex;width:100%}.mc-sidebar-feature-group ul{align-items:start;flex-direction:column;justify-content:center}.mc-sidebar-feature-group ul li{flex-direction:column;box-sizing:border-box}.mc-sidebar-feature{font-size:16px;min-width:200px;cursor:pointer;flex:1;display:flex;color:#fff;line-height:22px;overflow:hidden;background:none;border:none;padding:0;text-align:left;font-family:inherit;text-decoration:none}.mc-sidebar-feature__container{display:flex;align-items:center;width:100%;padding-top:8px;padding-bottom:8px}.mc-sidebar-feature__container span{max-width:200px;min-width:200px}.mc-sidebar-feature__label{font-size:.875rem;line-height:1.2857142857;flex:1;margin-right:8px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}.mc-sidebar-feature__label__tooltip{opacity:0;transition:0s opacity;background-color:#5b737d;border:1px solid white;border-radius:4px;position:absolute;pointer-events:none;left:calc(100% - 16px);padding:8px 16px;width:188px}.mc-sidebar-feature__label__tooltip__pointer{position:absolute;top:50%;left:-8px;top:calc(50% - 6px);width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid white}.mc-sidebar-feature__label__tooltip__pointer div{position:relative;top:-6px;left:2px;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid #5b737d}.mc-sidebar-feature__label:hover+.mc-sidebar-feature__label__tooltip{opacity:1;transition-delay:1s}.mc-sidebar-feature__icon{margin-right:8px}.mc-sidebar-feature.is-selected{background:#007f8c}.mc-sidebar-feature.is-close{transition:padding .3s ease-in-out;padding:0}.mc-sidebar-feature.is-close .mc-sidebar-feature__container{transition:padding-left .3s ease-in-out;padding-left:20px;width:24px}.mc-sidebar-feature.is-open{transition:padding .3s ease-in-out;padding:0 32px}.mc-sidebar-feature.is-open .mc-sidebar-feature__container{transition:padding-left .3s ease-in-out;padding-left:32px}.mc-sidebar-feature.is-disabled{color:#92a2a9;fill:#92a2a9}.mc-sidebar-feature:hover{background:#405d68}.mc-sidebar-feature:focus-visible{box-shadow:none;border:none;outline:none}.mc-sidebar-feature:focus-visible .mc-sidebar-feature__container{box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}.mc-sidebar-sub-feature{width:320px}.mc-sidebar-sub-feature__trigger{background:none;border:none;cursor:pointer;display:flex;margin:0;font-size:inherit;font-family:inherit;width:100%;padding:0 32px}.mc-sidebar-sub-feature__trigger__label{font-size:16px;font-weight:700;margin-left:8px;color:#fff}.mc-sidebar-sub-feature__trigger__item{margin:-8px 0 24px}.mc-sidebar-sub-feature__trigger:focus-visible{box-shadow:none;border:none;outline:none}.mc-sidebar-sub-feature__trigger:focus-visible .mc-sidebar-sub-feature__container{box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}.mc-sidebar-sub-feature__container{display:flex;align-items:center;width:100%;height:24px;padding:8px 0}.mc-sidebar-sub-feature ul{list-style:none;margin:0;padding:0}.mc-sidebar-sub-feature ul li#sub-features{margin:0}.mc-sidebar-user{left:0;right:0;bottom:0;position:absolute;background:#264653}.mc-sidebar-user__header{display:flex;align-items:center;background:none;border:none;color:#fff;font-size:inherit;font-family:inherit;text-align:initial;margin:0;width:100%;overflow:hidden}.mc-sidebar-user__header:focus-visible{box-shadow:none;border:none;border-radius:12px;outline:1px solid #0b96cc;outline-offset:-5px}.mc-sidebar-user__header:hover{cursor:pointer}.mc-sidebar-user__header:hover .mc-sidebar-user__header__information__icon{background:#082435}.mc-sidebar-user__header__picture{display:flex;align-items:center;justify-content:center;background:#5b737d;border-radius:24px;width:48px;min-width:48px;height:48px;overflow:hidden}.mc-sidebar-user__header__picture img{display:block}.mc-sidebar-user__header__information{justify-content:space-around;display:flex;flex-direction:column;flex:1;margin:0 0 0 8px;height:40px}.mc-sidebar-user__header__information__icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:4px}.mc-sidebar-user__header__information__identity{font-size:16px;font-weight:700}.mc-sidebar-user__header__information__title,.mc-sidebar-user__header__information__identity{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:176px}.mc-sidebar-user__content#user-content{list-style-type:none;padding:0;overflow:hidden;margin:-8px 0 24px;transition:all .3s ease-in-out}.mc-sidebar-user__content#user-content.is-close{height:0;margin:0}.mc-sidebar-user__content#user-content .is-open{height:auto}.mc-sidebar-user.is-close .mc-sidebar-user__header{transition:padding .3s ease-in-out;padding:12px 8px;margin:8px 0}.mc-sidebar-user.is-open .mc-sidebar-user__header{transition:padding .3s ease-in-out;padding:12px 24px 12px 32px;margin:8px 0}.mc-sidebar-separator{border-bottom:1px solid #5b737d;display:flex}.mc-sidebar-separator.is-close{transition:margin .3s ease-in-out;margin:24px 0}.mc-sidebar-separator.is-open{transition:margin .3s ease-in-out;margin:24px 32px}\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: "component", type: IconComponent, selector: "moz-icon", inputs: ["iconName"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MozSidebarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'moz-sidebar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"mc-sidebar\" [ngClass]=\"localOpen ? 'is-open' : 'is-close'\">\n  <div class=\"mc-sidebar__container\" [ngClass]=\"{'has-bottom-panel': userCmp}\">\n    <button class=\"mc-sidebar__trigger\" type=\"button\" id=\"mc-sidebar__trigger\" (click)=\"toggleSidebar()\">\n      <span class=\"mc-sidebar__trigger__container\">\n        <moz-icon *ngIf=\"!localOpen\" [iconName]=\"'Navigation_Arrow_DoubleArrow--Right_24px'\"></moz-icon>\n        <moz-icon *ngIf=\"localOpen\" [iconName]=\"'Navigation_Arrow_DoubleArrow--Left_24px'\"></moz-icon>\n      </span>\n    </button>\n    <ng-container *ngTemplateOutlet=\"sidebarHome\"></ng-container>\n\n    <ng-container *ngTemplateOutlet=\"separator\"></ng-container>\n\n    <div class=\"mc-sidebar-section\">\n      <ul [ngClass]=\"{'is-hidden': activeSubFeature && localOpen,\n          'is-visible': !activeSubFeature || !localOpen}\">\n        <li *ngFor=\"let item of featuresCmp\">\n          <ng-container *ngTemplateOutlet=\"sidebarFeatures; context: {item: item}\"></ng-container>\n        </li>\n      </ul>\n      <ng-container *ngTemplateOutlet=\"tmplSubFeature; context: {feature: activeSubFeature}\"></ng-container>\n    </div>\n    <div class=\"mc-sidebar__utilities\">\n      <div *ngFor=\"let utility of utilitiesCmp\">\n        <ng-container *ngTemplateOutlet=\"separator\"></ng-container>\n          <ul>\n            <li class=\"mc-sidebar__utilities__item\">\n              <ng-container *ngTemplateOutlet=\"sidebarUtility; context: {utility: utility}\"></ng-container>\n            </li>\n          </ul>\n      </div>\n    </div>\n\n    <!-- <ng-container *ngTemplateOutlet=\"separator\"></ng-container> -->\n\n  </div>\n  <ng-container *ngTemplateOutlet=\"sidebarUser\"></ng-container>\n</nav>\n\n<ng-template #sidebarHome>\n  <ng-container *ngIf=\"homeCmp\">\n    <button class=\"mc-sidebar-feature-group\" [ngClass]=\"localOpen ? 'is-open' : 'is-close'\">\n      <a href=\"#\" [routerLink]=\"homeCmp.link\">\n        <span class=\"mc-sidebar-feature-group__container\" [ngClass]=\"localOpen ? 'is-open' : 'is-close'\" (click)=\"select(homeCmp)\">\n          <span class=\"mc-sidebar-feature-group__icon\">\n            <ng-container *ngTemplateOutlet=\"homeCmp.tmplIcon\"></ng-container>\n          </span>\n          <ng-container *ngIf=\"localOpen\">\n            <span class=\"mc-sidebar-feature-group__label\">\n              <ng-container *ngTemplateOutlet=\"homeCmp.tmplText\"></ng-container>\n            </span>\n          </ng-container>\n        </span>\n      </a>\n    </button >\n   </ng-container>\n</ng-template>\n\n<ng-template #sidebarFeatures let-item=\"item\">\n  <!-- <span> -->\n    <ng-container *ngTemplateOutlet=\"tmplFeatureGroup\"></ng-container>\n\n    <ul *ngIf=\"item?.category\" class=\"mc-sidebar-feature-group__content\" [ngClass]=\"{ 'is-open': localOpen && item.selected, 'is-close': !localOpen || !item.selected }\">\n      <li *ngFor=\"let innerItem of item.featuresCmp\" id=\"innerFeature\">\n            <ng-template *ngTemplateOutlet=\"tmplFeature; context: {feature: innerItem}\"></ng-template>\n      </li>\n    </ul>\n  <!-- </span> -->\n\n  <ng-template #tmplFeatureGroup>\n    <button class=\"mc-sidebar-feature-group\" (click)=\"select(item)\" [ngClass]=\"{ 'is-selected': item.selected && !item.category, 'is-open': localOpen, 'is-close': !localOpen }\">\n      <a href=\"#\" [routerLink]=\"item.link\">\n        <span class=\"mc-sidebar-feature-group__container\" [routerLink]=\"item.link\">\n          <span class=\"mc-sidebar-feature-group__icon\">\n          <ng-container *ngTemplateOutlet=\"item.tmplIcon\"></ng-container>\n        </span>\n        <div style=\"display:flex;\" *ngIf=\"localOpen\">\n          <span class=\"mc-sidebar-feature-group__label\">\n            <ng-container *ngTemplateOutlet=\"item.tmplText\"></ng-container>\n          </span>\n          <div *ngIf=\"localOpen && item?.category\">\n            <moz-icon *ngIf=\"!item.selected\" [iconName]=\"'Navigation_Control_More_16px'\"></moz-icon>\n\n            <moz-icon *ngIf=\"item.selected\" [iconName]=\"'Navigation_Control_Less_16px'\"></moz-icon>\n          </div>\n        </div>\n      </span>\n      </a>\n    </button>\n  </ng-template>\n\n</ng-template>\n\n<ng-template #tmplFeature let-feature=\"feature\">\n  <button class=\"mc-sidebar-feature\" [ngClass]=\"{ 'is-selected': feature.selected, 'is-open': localOpen, 'is-close': !localOpen }\">\n    <a href=\"#\" [routerLink]=\"feature.link\">\n      <span class=\"mc-sidebar-feature__container\" (click)=\"feature.subCategory ? selectSubFeature(feature) : select(feature)\">\n        <span class=\"mc-sidebar-feature__label\">\n          <ng-container *ngTemplateOutlet=\"feature.tmplText\"></ng-container>\n        </span>\n      </span>\n    </a>\n  </button>\n</ng-template>\n\n<ng-template #tmplSubFeature let-feature=\"feature\">\n  <!-- <ng-container *ngTemplateOutlet=\"feature.tmplText\"></ng-container> -->\n  <div class=\"mc-sidebar-sub-feature\" *ngIf=\"!!feature\">\n    <button class=\"mc-sidebar-sub-feature__trigger\" (click)=\"closeSubFeature()\">\n      <span class=\"mc-sidebar-sub-feature__container\">\n        <moz-icon *ngIf=\"localOpen\" [iconName]=\"'Navigation_Arrow_Back_24px'\"></moz-icon>\n        <span class=\"mc-sidebar-sub-feature__trigger__label\">\n          <ng-container *ngTemplateOutlet=\"feature.tmplText\"></ng-container>\n        </span>\n      </span>\n    </button>\n    <ul>\n      <li *ngFor=\"let item of feature.featuresCmp\" class=\"mc-sidebar-sub-feature__item\" id=\"sub-features\">\n        <ng-template *ngTemplateOutlet=\"tmplFeature; context: {feature: item}\"></ng-template>\n      </li>\n    </ul>\n  </div>\n</ng-template>\n\n<ng-template #sidebarUtility let-utility=\"utility\">\n    <button class=\"mc-sidebar-segment\" [ngClass]=\"{ 'is-selected': utility.selected, 'is-open': localOpen, 'is-close': !localOpen }\">\n      <a href=\"#\" [routerLink]=\"utility.link\">\n        <span class=\"mc-sidebar-segment__container\" (click)=\"select(utility)\">\n            <span class=\"mc-sidebar-segment__icon\">\n            <ng-container *ngTemplateOutlet=\"utility.tmplIcon\"></ng-container>\n            </span>\n          <span class=\"mc-sidebar-segment__label\">\n            <ng-container *ngTemplateOutlet=\"utility.tmplText\"></ng-container>\n          </span>\n        </span>\n      </a>\n    </button>\n</ng-template>\n\n<ng-template #sidebarUser>\n  <ng-container *ngIf=\"userCmp && userCmp.templateRef\">\n    <div class=\"mc-sidebar-user\" [ngClass]=\"localOpen ? 'is-open' : 'is-close'\">\n      <button class=\"mc-sidebar-user__header\">\n        <span class=\"mc-sidebar-user__header__picture\">\n          <ng-template #tmplProfilPicture>\n            <ng-container *ngTemplateOutlet=\"userCmp.tmplPicture\"></ng-container>\n          </ng-template>\n          <moz-icon *ngIf=\"!userCmp.tmplPicture; else tmplProfilPicture\" [iconName]=\"'User_Account_Profile--View_24px'\"></moz-icon>\n        </span>\n        <div style=\"display:flex; width: 100%;\" *ngIf=\"localOpen\">\n          <p class=\"mc-sidebar-user__header__information\">\n            <ng-container *ngTemplateOutlet=\"userCmp.templateRef\"></ng-container>\n          </p>\n          <span (click)=\"toggleUser()\" *ngIf=\"userCmp?.features?.length\" class=\"mc-sidebar-user__header__information__icon\">\n            <moz-icon *ngIf=\"!userCmp.localOpen\" [iconName]=\"'Navigation_Control_More_16px'\"></moz-icon>\n\n            <moz-icon *ngIf=\"userCmp.localOpen\" [iconName]=\"'Navigation_Control_Less_16px'\"></moz-icon>\n          </span>\n        </div>\n      </button>\n\n      <ul *ngIf=\"userCmp.features?.length && userCmp.localOpen\" [ngClass]=\"userCmp.localOpen ? 'is-open' : 'is-close'\"\n        id=\"user-content\" ref=\"content\" class=\"mc-sidebar-user__content\">\n        <li *ngFor=\"let userFeature of userCmp.features\">\n          <button class=\"mc-sidebar-feature\" [ngClass]=\"{ 'is-open': localOpen, 'is-close': !localOpen }\">\n            <!-- <a href=\"#\"> -->\n              <span class=\"mc-sidebar-feature__container\">\n                <span class=\"mc-sidebar-feature__label\">\n                  <ng-container *ngTemplateOutlet=\"userFeature\"></ng-container>\n                </span>\n              </span>\n            <!-- </a> -->\n          </button>\n        </li>\n      </ul>\n  </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #separator>\n  <span role=\"separator\" class=\"mc-sidebar-separator\" [ngClass]=\"localOpen ? 'is-open' : 'is-close'\">\n  </span>\n</ng-template>\n", styles: ["a,a:hover,a:visited,a:focus,a:active{text-decoration:none;color:inherit}.mc-sidebar{position:absolute;top:0;left:0;z-index:10;font-size:14px;font-family:LeroyMerlin,sans-serif;color:#fff;box-sizing:border-box;fill:#fff;width:320px;background:#082435;display:block;height:100vh}.mc-sidebar__container{height:100%;display:flex;flex-direction:column}.mc-sidebar__container.has-bottom-panel{height:calc(100% - 88px)}.mc-sidebar__utilities{margin-bottom:24px}.mc-sidebar__utilities__item{margin:4px 0}.mc-sidebar__utilities__item:first-child{margin-top:0}.mc-sidebar__utilities__item:last-child{margin-bottom:0}.mc-sidebar__trigger{cursor:pointer;background:none;border:none;padding:0;min-height:92px;width:100%;font-size:inherit;font-family:inherit;position:relative;display:flex}.mc-sidebar__trigger__container{position:relative;margin:28px 20px;height:32px;width:100%}.mc-sidebar__trigger__container>*{position:absolute;top:0;right:0;width:24px;height:24px}.mc-sidebar__trigger:focus-visible{box-shadow:none;border:none;outline:none}.mc-sidebar__trigger:focus-visible .mc-sidebar__trigger__container{box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}.mc-sidebar.is-open{transition:width .3s ease-in-out}.mc-sidebar.is-close{transition:width .3s ease-in-out;width:64px;padding:0}.mc-sidebar ul{list-style-type:none;margin:0;padding:0}.mc-sidebar-segment{font-size:.875rem;line-height:1.5714285714;background:none;border:none;cursor:pointer;flex:0;font-family:inherit;text-decoration:none;color:#fff;display:flex;overflow:hidden;min-height:40px;padding:0;width:100%}.mc-sidebar-segment__container{display:flex;align-items:center;width:100%;padding:8px 0}.mc-sidebar-segment__icon{flex-shrink:0}.mc-sidebar-segment__label{margin-left:10px}.mc-sidebar-segment.is-selected{background:#007f8c}.mc-sidebar-segment:focus-visible{box-shadow:none;border:none;outline:none}.mc-sidebar-segment:focus-visible .mc-sidebar-segment__container{box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}.mc-sidebar-segment:hover{background:#405d68}.mc-sidebar-segment.is-close .mc-sidebar-segment__container{transition:margin .3s ease-in-out;margin:0 20px;width:24px}.mc-sidebar-segment.is-close .mc-sidebar-segment__label{opacity:0}.mc-sidebar-segment.is-open .mc-sidebar-segment__container{transition:margin .3s ease-in-out;margin:0 32px}.mc-sidebar-segment.is-open__label{opacity:1}.mc-sidebar-section{display:flex;flex-direction:row;flex:1;align-items:flex-start;min-height:38px;overflow-x:hidden;overflow-y:auto;overflow-y:overlay;padding:1px 0;scrollbar-color:#009eac #082435;scrollbar-width:thin}.mc-sidebar-section ul,.mc-sidebar-section li{list-style-type:none;margin:0;padding:0;display:flex;width:100%}.mc-sidebar-section ul{align-items:start;flex-direction:column;justify-content:center}.mc-sidebar-section ul li{flex-direction:column;box-sizing:border-box;margin:4px 0}.mc-sidebar-section ul li:first-child{margin-top:0}.mc-sidebar-section ul li:last-child{margin-bottom:0}.mc-sidebar-section ul.is-hidden{transition:margin-left .3s ease-in-out;margin-left:-320px;opacity:0}.mc-sidebar-section ul.is-visible{transition:margin-left .3s ease-in-out;margin-left:0}.mc-sidebar-section::-webkit-scrollbar{width:5px;height:10px;background:#082435}.mc-sidebar-section::-webkit-scrollbar-thumb{background:#009eac}.mc-sidebar-feature-group{background:none;border:none;color:#fff;cursor:pointer;font-size:inherit;font-family:inherit;text-align:initial;margin:0;padding:0;min-height:40px;overflow:hidden;text-decoration:none}.mc-sidebar-feature-group__container{display:flex;align-items:center;margin:5px 0;padding:8px 0;transition:margin .3s ease-in-out}.mc-sidebar-feature-group__label{font-size:.875rem;line-height:1.2857142857;margin:0 8px;width:200px;min-width:200px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}.mc-sidebar-feature-group__label__tooltip{opacity:0;transition:0s opacity;background-color:#5b737d;border:1px solid white;border-radius:4px;position:absolute;pointer-events:none;left:calc(100% - 16px);padding:8px 16px;width:188px}.mc-sidebar-feature-group__label__tooltip__pointer{position:absolute;top:50%;left:-8px;top:calc(50% - 6px);width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid white}.mc-sidebar-feature-group__label__tooltip__pointer div{position:relative;top:-6px;left:2px;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid #5b737d}.mc-sidebar-feature-group__label:hover+.mc-sidebar-feature-group__label__tooltip{opacity:1;transition-delay:1s}.mc-sidebar-feature-group__content{overflow:hidden;transition:height .3s ease-in-out}.mc-sidebar-feature-group__content.is-close{height:0}.mc-sidebar-feature-group__content.is-open{height:auto}.mc-sidebar-feature-group__content li#innerFeature{margin:0}.mc-sidebar-feature-group.is-selected{background:#007f8c}.mc-sidebar-feature-group.is-close .mc-sidebar-feature-group__container{margin:0 20px;width:24px}.mc-sidebar-feature-group.is-open .mc-sidebar-feature-group__container{margin:0 32px}.mc-sidebar-feature-group:hover{background:#405d68}.mc-sidebar-feature-group:focus-visible{box-shadow:none;border:none;outline:none}.mc-sidebar-feature-group:focus-visible .mc-sidebar-feature-group__container{box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}.mc-sidebar-feature-group ul,.mc-sidebar-feature-group li{list-style-type:none;margin:0;padding:0;display:flex;width:100%}.mc-sidebar-feature-group ul{align-items:start;flex-direction:column;justify-content:center}.mc-sidebar-feature-group ul li{flex-direction:column;box-sizing:border-box}.mc-sidebar-feature{font-size:16px;min-width:200px;cursor:pointer;flex:1;display:flex;color:#fff;line-height:22px;overflow:hidden;background:none;border:none;padding:0;text-align:left;font-family:inherit;text-decoration:none}.mc-sidebar-feature__container{display:flex;align-items:center;width:100%;padding-top:8px;padding-bottom:8px}.mc-sidebar-feature__container span{max-width:200px;min-width:200px}.mc-sidebar-feature__label{font-size:.875rem;line-height:1.2857142857;flex:1;margin-right:8px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}.mc-sidebar-feature__label__tooltip{opacity:0;transition:0s opacity;background-color:#5b737d;border:1px solid white;border-radius:4px;position:absolute;pointer-events:none;left:calc(100% - 16px);padding:8px 16px;width:188px}.mc-sidebar-feature__label__tooltip__pointer{position:absolute;top:50%;left:-8px;top:calc(50% - 6px);width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid white}.mc-sidebar-feature__label__tooltip__pointer div{position:relative;top:-6px;left:2px;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid #5b737d}.mc-sidebar-feature__label:hover+.mc-sidebar-feature__label__tooltip{opacity:1;transition-delay:1s}.mc-sidebar-feature__icon{margin-right:8px}.mc-sidebar-feature.is-selected{background:#007f8c}.mc-sidebar-feature.is-close{transition:padding .3s ease-in-out;padding:0}.mc-sidebar-feature.is-close .mc-sidebar-feature__container{transition:padding-left .3s ease-in-out;padding-left:20px;width:24px}.mc-sidebar-feature.is-open{transition:padding .3s ease-in-out;padding:0 32px}.mc-sidebar-feature.is-open .mc-sidebar-feature__container{transition:padding-left .3s ease-in-out;padding-left:32px}.mc-sidebar-feature.is-disabled{color:#92a2a9;fill:#92a2a9}.mc-sidebar-feature:hover{background:#405d68}.mc-sidebar-feature:focus-visible{box-shadow:none;border:none;outline:none}.mc-sidebar-feature:focus-visible .mc-sidebar-feature__container{box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}.mc-sidebar-sub-feature{width:320px}.mc-sidebar-sub-feature__trigger{background:none;border:none;cursor:pointer;display:flex;margin:0;font-size:inherit;font-family:inherit;width:100%;padding:0 32px}.mc-sidebar-sub-feature__trigger__label{font-size:16px;font-weight:700;margin-left:8px;color:#fff}.mc-sidebar-sub-feature__trigger__item{margin:-8px 0 24px}.mc-sidebar-sub-feature__trigger:focus-visible{box-shadow:none;border:none;outline:none}.mc-sidebar-sub-feature__trigger:focus-visible .mc-sidebar-sub-feature__container{box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}.mc-sidebar-sub-feature__container{display:flex;align-items:center;width:100%;height:24px;padding:8px 0}.mc-sidebar-sub-feature ul{list-style:none;margin:0;padding:0}.mc-sidebar-sub-feature ul li#sub-features{margin:0}.mc-sidebar-user{left:0;right:0;bottom:0;position:absolute;background:#264653}.mc-sidebar-user__header{display:flex;align-items:center;background:none;border:none;color:#fff;font-size:inherit;font-family:inherit;text-align:initial;margin:0;width:100%;overflow:hidden}.mc-sidebar-user__header:focus-visible{box-shadow:none;border:none;border-radius:12px;outline:1px solid #0b96cc;outline-offset:-5px}.mc-sidebar-user__header:hover{cursor:pointer}.mc-sidebar-user__header:hover .mc-sidebar-user__header__information__icon{background:#082435}.mc-sidebar-user__header__picture{display:flex;align-items:center;justify-content:center;background:#5b737d;border-radius:24px;width:48px;min-width:48px;height:48px;overflow:hidden}.mc-sidebar-user__header__picture img{display:block}.mc-sidebar-user__header__information{justify-content:space-around;display:flex;flex-direction:column;flex:1;margin:0 0 0 8px;height:40px}.mc-sidebar-user__header__information__icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:4px}.mc-sidebar-user__header__information__identity{font-size:16px;font-weight:700}.mc-sidebar-user__header__information__title,.mc-sidebar-user__header__information__identity{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:176px}.mc-sidebar-user__content#user-content{list-style-type:none;padding:0;overflow:hidden;margin:-8px 0 24px;transition:all .3s ease-in-out}.mc-sidebar-user__content#user-content.is-close{height:0;margin:0}.mc-sidebar-user__content#user-content .is-open{height:auto}.mc-sidebar-user.is-close .mc-sidebar-user__header{transition:padding .3s ease-in-out;padding:12px 8px;margin:8px 0}.mc-sidebar-user.is-open .mc-sidebar-user__header{transition:padding .3s ease-in-out;padding:12px 24px 12px 32px;margin:8px 0}.mc-sidebar-separator{border-bottom:1px solid #5b737d;display:flex}.mc-sidebar-separator.is-close{transition:margin .3s ease-in-out;margin:24px 0}.mc-sidebar-separator.is-open{transition:margin .3s ease-in-out;margin:24px 32px}\n"] }]
+            args: [{ selector: 'moz-sidebar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"mc-sidebar\" [ngClass]=\"localOpen ? 'is-open' : 'is-close'\">\n  <div class=\"mc-sidebar__container\" [ngClass]=\"{'has-bottom-panel': userCmp}\">\n    <button class=\"mc-sidebar__trigger\" type=\"button\" id=\"mc-sidebar__trigger\" (click)=\"toggleSidebar()\">\n      <span class=\"mc-sidebar__trigger__container\">\n        <moz-icon *ngIf=\"!localOpen\" [iconName]=\"'Navigation_Arrow_DoubleArrow--Right_24px'\"></moz-icon>\n        <moz-icon *ngIf=\"localOpen\" [iconName]=\"'Navigation_Arrow_DoubleArrow--Left_24px'\"></moz-icon>\n      </span>\n    </button>\n    <ng-container *ngTemplateOutlet=\"sidebarHome\"></ng-container>\n\n    <ng-container *ngTemplateOutlet=\"separator\"></ng-container>\n\n    <div class=\"mc-sidebar-section\">\n      <ul [ngClass]=\"{'is-hidden': activeSubFeature && localOpen,\n          'is-visible': !activeSubFeature || !localOpen}\">\n        <li *ngFor=\"let item of featuresCmp\">\n          <ng-container *ngTemplateOutlet=\"sidebarFeatures; context: {item: item}\"></ng-container>\n        </li>\n      </ul>\n      <ng-container *ngTemplateOutlet=\"tmplSubFeature; context: {feature: activeSubFeature}\"></ng-container>\n    </div>\n    <div class=\"mc-sidebar__utilities\">\n      <div *ngFor=\"let utility of utilitiesCmp\">\n        <ng-container *ngTemplateOutlet=\"separator\"></ng-container>\n          <ul>\n            <li class=\"mc-sidebar__utilities__item\">\n              <ng-container *ngTemplateOutlet=\"sidebarUtility; context: {utility: utility}\"></ng-container>\n            </li>\n          </ul>\n      </div>\n    </div>\n\n  </div>\n  <ng-container *ngTemplateOutlet=\"sidebarUser\"></ng-container>\n</nav>\n\n<ng-template #sidebarHome>\n  <ng-container *ngIf=\"homeCmp\">\n    <button class=\"mc-sidebar-feature-group\" [ngClass]=\"localOpen ? 'is-open' : 'is-close'\">\n      <a href=\"#\" [routerLink]=\"homeCmp.link\">\n        <span class=\"mc-sidebar-feature-group__container\" [ngClass]=\"localOpen ? 'is-open' : 'is-close'\" (click)=\"select(homeCmp)\">\n          <span class=\"mc-sidebar-feature-group__icon\">\n            <ng-container *ngTemplateOutlet=\"homeCmp.tmplIcon\"></ng-container>\n          </span>\n          <ng-container *ngIf=\"localOpen\">\n            <span class=\"mc-sidebar-feature-group__label\">\n              <ng-container *ngTemplateOutlet=\"homeCmp.tmplText\"></ng-container>\n            </span>\n          </ng-container>\n        </span>\n      </a>\n    </button >\n   </ng-container>\n</ng-template>\n\n<ng-template #sidebarFeatures let-item=\"item\">\n    <ng-container *ngTemplateOutlet=\"tmplFeatureGroup\"></ng-container>\n\n    <ul *ngIf=\"item?.category\" class=\"mc-sidebar-feature-group__content\" [ngClass]=\"{ 'is-open': localOpen && item.selected, 'is-close': !localOpen || !item.selected }\">\n      <li *ngFor=\"let innerItem of item.featuresCmp\" id=\"innerFeature\">\n            <ng-template *ngTemplateOutlet=\"tmplFeature; context: {feature: innerItem}\"></ng-template>\n      </li>\n    </ul>\n\n  <ng-template #tmplFeatureGroup>\n    <button class=\"mc-sidebar-feature-group\" (click)=\"select(item)\" [ngClass]=\"{ 'is-selected': item.selected && !item.category, 'is-open': localOpen, 'is-close': !localOpen }\">\n      <a href=\"#\" [routerLink]=\"item.link\">\n        <span class=\"mc-sidebar-feature-group__container\" [routerLink]=\"item.link\">\n          <span class=\"mc-sidebar-feature-group__icon\">\n          <ng-container *ngTemplateOutlet=\"item.tmplIcon\"></ng-container>\n        </span>\n        <div style=\"display:flex;\" *ngIf=\"localOpen\">\n          <span class=\"mc-sidebar-feature-group__label\">\n            <ng-container *ngTemplateOutlet=\"item.tmplText\"></ng-container>\n          </span>\n          <div *ngIf=\"localOpen && item?.category\">\n            <moz-icon *ngIf=\"!item.selected\" [iconName]=\"'Navigation_Control_More_16px'\"></moz-icon>\n\n            <moz-icon *ngIf=\"item.selected\" [iconName]=\"'Navigation_Control_Less_16px'\"></moz-icon>\n          </div>\n        </div>\n      </span>\n      </a>\n    </button>\n  </ng-template>\n\n</ng-template>\n\n<ng-template #tmplFeature let-feature=\"feature\">\n  <button class=\"mc-sidebar-feature\" [ngClass]=\"{ 'is-selected': feature.selected, 'is-open': localOpen, 'is-close': !localOpen }\">\n    <a href=\"#\" [routerLink]=\"feature.link\">\n      <span class=\"mc-sidebar-feature__container\" (click)=\"feature.subCategory ? selectSubFeature(feature) : select(feature)\">\n        <span class=\"mc-sidebar-feature__label\">\n          <ng-container *ngTemplateOutlet=\"feature.tmplText\"></ng-container>\n        </span>\n      </span>\n    </a>\n  </button>\n</ng-template>\n\n<ng-template #tmplSubFeature let-feature=\"feature\">\n  <div class=\"mc-sidebar-sub-feature\" *ngIf=\"!!feature\">\n    <button class=\"mc-sidebar-sub-feature__trigger\" (click)=\"closeSubFeature()\">\n      <span class=\"mc-sidebar-sub-feature__container\">\n        <moz-icon *ngIf=\"localOpen\" [iconName]=\"'Navigation_Arrow_Back_24px'\"></moz-icon>\n        <span class=\"mc-sidebar-sub-feature__trigger__label\">\n          <ng-container *ngTemplateOutlet=\"feature.tmplText\"></ng-container>\n        </span>\n      </span>\n    </button>\n    <ul>\n      <li *ngFor=\"let item of feature.featuresCmp\" class=\"mc-sidebar-sub-feature__item\" id=\"sub-features\">\n        <ng-template *ngTemplateOutlet=\"tmplFeature; context: {feature: item}\"></ng-template>\n      </li>\n    </ul>\n  </div>\n</ng-template>\n\n<ng-template #sidebarUtility let-utility=\"utility\">\n    <button class=\"mc-sidebar-segment\" [ngClass]=\"{ 'is-selected': utility.selected, 'is-open': localOpen, 'is-close': !localOpen }\">\n      <a href=\"#\" [routerLink]=\"utility.link\">\n        <span class=\"mc-sidebar-segment__container\" (click)=\"select(utility)\">\n            <span class=\"mc-sidebar-segment__icon\">\n            <ng-container *ngTemplateOutlet=\"utility.tmplIcon\"></ng-container>\n            </span>\n          <span class=\"mc-sidebar-segment__label\">\n            <ng-container *ngTemplateOutlet=\"utility.tmplText\"></ng-container>\n          </span>\n        </span>\n      </a>\n    </button>\n</ng-template>\n\n<ng-template #sidebarUser>\n  <ng-container *ngIf=\"userCmp && userCmp.templateRef\">\n    <div class=\"mc-sidebar-user\" [ngClass]=\"localOpen ? 'is-open' : 'is-close'\">\n      <button class=\"mc-sidebar-user__header\">\n        <span class=\"mc-sidebar-user__header__picture\">\n          <ng-template #tmplProfilPicture>\n            <ng-container *ngTemplateOutlet=\"userCmp.tmplPicture\"></ng-container>\n          </ng-template>\n          <moz-icon *ngIf=\"!userCmp.tmplPicture; else tmplProfilPicture\" [iconName]=\"'User_Account_Profile--View_24px'\"></moz-icon>\n        </span>\n        <div style=\"display:flex; width: 100%;\" *ngIf=\"localOpen\">\n          <p class=\"mc-sidebar-user__header__information\">\n            <ng-container *ngTemplateOutlet=\"userCmp.templateRef\"></ng-container>\n          </p>\n          <span (click)=\"toggleUser()\" *ngIf=\"userCmp?.features?.length\" class=\"mc-sidebar-user__header__information__icon\">\n            <moz-icon *ngIf=\"!userCmp.localOpen\" [iconName]=\"'Navigation_Control_More_16px'\"></moz-icon>\n\n            <moz-icon *ngIf=\"userCmp.localOpen\" [iconName]=\"'Navigation_Control_Less_16px'\"></moz-icon>\n          </span>\n        </div>\n      </button>\n\n      <ul *ngIf=\"userCmp.features?.length && userCmp.localOpen\" [ngClass]=\"userCmp.localOpen ? 'is-open' : 'is-close'\"\n        id=\"user-content\" ref=\"content\" class=\"mc-sidebar-user__content\">\n        <li *ngFor=\"let userFeature of userCmp.features\">\n          <button class=\"mc-sidebar-feature\" [ngClass]=\"{ 'is-open': localOpen, 'is-close': !localOpen }\">\n              <span class=\"mc-sidebar-feature__container\">\n                <span class=\"mc-sidebar-feature__label\">\n                  <ng-container *ngTemplateOutlet=\"userFeature\"></ng-container>\n                </span>\n              </span>\n          </button>\n        </li>\n      </ul>\n  </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #separator>\n  <span role=\"separator\" class=\"mc-sidebar-separator\" [ngClass]=\"localOpen ? 'is-open' : 'is-close'\">\n  </span>\n</ng-template>\n", styles: ["a,a:hover,a:visited,a:focus,a:active{text-decoration:none;color:inherit}.mc-sidebar{position:absolute;top:0;left:0;z-index:10;font-size:14px;font-family:LeroyMerlin,sans-serif;color:#fff;box-sizing:border-box;fill:#fff;width:320px;background:#082435;display:block;height:100vh}.mc-sidebar__container{height:100%;display:flex;flex-direction:column}.mc-sidebar__container.has-bottom-panel{height:calc(100% - 88px)}.mc-sidebar__utilities{margin-bottom:24px}.mc-sidebar__utilities__item{margin:4px 0}.mc-sidebar__utilities__item:first-child{margin-top:0}.mc-sidebar__utilities__item:last-child{margin-bottom:0}.mc-sidebar__trigger{cursor:pointer;background:none;border:none;padding:0;min-height:92px;width:100%;font-size:inherit;font-family:inherit;position:relative;display:flex}.mc-sidebar__trigger__container{position:relative;margin:28px 20px;height:32px;width:100%}.mc-sidebar__trigger__container>*{position:absolute;top:0;right:0;width:24px;height:24px}.mc-sidebar__trigger:focus-visible{box-shadow:none;border:none;outline:none}.mc-sidebar__trigger:focus-visible .mc-sidebar__trigger__container{box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}.mc-sidebar.is-open{transition:width .3s ease-in-out}.mc-sidebar.is-close{transition:width .3s ease-in-out;width:64px;padding:0}.mc-sidebar ul{list-style-type:none;margin:0;padding:0}.mc-sidebar-segment{font-size:.875rem;line-height:1.5714285714;background:none;border:none;cursor:pointer;flex:0;font-family:inherit;text-decoration:none;color:#fff;display:flex;overflow:hidden;min-height:40px;padding:0;width:100%}.mc-sidebar-segment__container{display:flex;align-items:center;width:100%;padding:8px 0}.mc-sidebar-segment__icon{flex-shrink:0}.mc-sidebar-segment__label{margin-left:10px}.mc-sidebar-segment.is-selected{background:#007f8c}.mc-sidebar-segment:focus-visible{box-shadow:none;border:none;outline:none}.mc-sidebar-segment:focus-visible .mc-sidebar-segment__container{box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}.mc-sidebar-segment:hover{background:#405d68}.mc-sidebar-segment.is-close .mc-sidebar-segment__container{transition:margin .3s ease-in-out;margin:0 20px;width:24px}.mc-sidebar-segment.is-close .mc-sidebar-segment__label{opacity:0}.mc-sidebar-segment.is-open .mc-sidebar-segment__container{transition:margin .3s ease-in-out;margin:0 32px}.mc-sidebar-segment.is-open__label{opacity:1}.mc-sidebar-section{display:flex;flex-direction:row;flex:1;align-items:flex-start;min-height:38px;overflow-x:hidden;overflow-y:auto;overflow-y:overlay;padding:1px 0;scrollbar-color:#009eac #082435;scrollbar-width:thin}.mc-sidebar-section ul,.mc-sidebar-section li{list-style-type:none;margin:0;padding:0;display:flex;width:100%}.mc-sidebar-section ul{align-items:start;flex-direction:column;justify-content:center}.mc-sidebar-section ul li{flex-direction:column;box-sizing:border-box;margin:4px 0}.mc-sidebar-section ul li:first-child{margin-top:0}.mc-sidebar-section ul li:last-child{margin-bottom:0}.mc-sidebar-section ul.is-hidden{transition:margin-left .3s ease-in-out;margin-left:-320px;opacity:0}.mc-sidebar-section ul.is-visible{transition:margin-left .3s ease-in-out;margin-left:0}.mc-sidebar-section::-webkit-scrollbar{width:5px;height:10px;background:#082435}.mc-sidebar-section::-webkit-scrollbar-thumb{background:#009eac}.mc-sidebar-feature-group{background:none;border:none;color:#fff;cursor:pointer;font-size:inherit;font-family:inherit;text-align:initial;margin:0;padding:0;min-height:40px;overflow:hidden;text-decoration:none}.mc-sidebar-feature-group__container{display:flex;align-items:center;margin:5px 0;padding:8px 0;transition:margin .3s ease-in-out}.mc-sidebar-feature-group__label{font-size:.875rem;line-height:1.2857142857;margin:0 8px;width:200px;min-width:200px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}.mc-sidebar-feature-group__label__tooltip{opacity:0;transition:0s opacity;background-color:#5b737d;border:1px solid white;border-radius:4px;position:absolute;pointer-events:none;left:calc(100% - 16px);padding:8px 16px;width:188px}.mc-sidebar-feature-group__label__tooltip__pointer{position:absolute;top:50%;left:-8px;top:calc(50% - 6px);width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid white}.mc-sidebar-feature-group__label__tooltip__pointer div{position:relative;top:-6px;left:2px;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid #5b737d}.mc-sidebar-feature-group__label:hover+.mc-sidebar-feature-group__label__tooltip{opacity:1;transition-delay:1s}.mc-sidebar-feature-group__content{overflow:hidden;transition:height .3s ease-in-out}.mc-sidebar-feature-group__content.is-close{height:0}.mc-sidebar-feature-group__content.is-open{height:auto}.mc-sidebar-feature-group__content li#innerFeature{margin:0}.mc-sidebar-feature-group.is-selected{background:#007f8c}.mc-sidebar-feature-group.is-close .mc-sidebar-feature-group__container{margin:0 20px;width:24px}.mc-sidebar-feature-group.is-open .mc-sidebar-feature-group__container{margin:0 32px}.mc-sidebar-feature-group:hover{background:#405d68}.mc-sidebar-feature-group:focus-visible{box-shadow:none;border:none;outline:none}.mc-sidebar-feature-group:focus-visible .mc-sidebar-feature-group__container{box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}.mc-sidebar-feature-group ul,.mc-sidebar-feature-group li{list-style-type:none;margin:0;padding:0;display:flex;width:100%}.mc-sidebar-feature-group ul{align-items:start;flex-direction:column;justify-content:center}.mc-sidebar-feature-group ul li{flex-direction:column;box-sizing:border-box}.mc-sidebar-feature{font-size:16px;min-width:200px;cursor:pointer;flex:1;display:flex;color:#fff;line-height:22px;overflow:hidden;background:none;border:none;padding:0;text-align:left;font-family:inherit;text-decoration:none}.mc-sidebar-feature__container{display:flex;align-items:center;width:100%;padding-top:8px;padding-bottom:8px}.mc-sidebar-feature__container span{max-width:200px;min-width:200px}.mc-sidebar-feature__label{font-size:.875rem;line-height:1.2857142857;flex:1;margin-right:8px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}.mc-sidebar-feature__label__tooltip{opacity:0;transition:0s opacity;background-color:#5b737d;border:1px solid white;border-radius:4px;position:absolute;pointer-events:none;left:calc(100% - 16px);padding:8px 16px;width:188px}.mc-sidebar-feature__label__tooltip__pointer{position:absolute;top:50%;left:-8px;top:calc(50% - 6px);width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid white}.mc-sidebar-feature__label__tooltip__pointer div{position:relative;top:-6px;left:2px;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid #5b737d}.mc-sidebar-feature__label:hover+.mc-sidebar-feature__label__tooltip{opacity:1;transition-delay:1s}.mc-sidebar-feature__icon{margin-right:8px}.mc-sidebar-feature.is-selected{background:#007f8c}.mc-sidebar-feature.is-close{transition:padding .3s ease-in-out;padding:0}.mc-sidebar-feature.is-close .mc-sidebar-feature__container{transition:padding-left .3s ease-in-out;padding-left:20px;width:24px}.mc-sidebar-feature.is-open{transition:padding .3s ease-in-out;padding:0 32px}.mc-sidebar-feature.is-open .mc-sidebar-feature__container{transition:padding-left .3s ease-in-out;padding-left:32px}.mc-sidebar-feature.is-disabled{color:#92a2a9;fill:#92a2a9}.mc-sidebar-feature:hover{background:#405d68}.mc-sidebar-feature:focus-visible{box-shadow:none;border:none;outline:none}.mc-sidebar-feature:focus-visible .mc-sidebar-feature__container{box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}.mc-sidebar-sub-feature{width:320px}.mc-sidebar-sub-feature__trigger{background:none;border:none;cursor:pointer;display:flex;margin:0;font-size:inherit;font-family:inherit;width:100%;padding:0 32px}.mc-sidebar-sub-feature__trigger__label{font-size:16px;font-weight:700;margin-left:8px;color:#fff}.mc-sidebar-sub-feature__trigger__item{margin:-8px 0 24px}.mc-sidebar-sub-feature__trigger:focus-visible{box-shadow:none;border:none;outline:none}.mc-sidebar-sub-feature__trigger:focus-visible .mc-sidebar-sub-feature__container{box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}.mc-sidebar-sub-feature__container{display:flex;align-items:center;width:100%;height:24px;padding:8px 0}.mc-sidebar-sub-feature ul{list-style:none;margin:0;padding:0}.mc-sidebar-sub-feature ul li#sub-features{margin:0}.mc-sidebar-user{left:0;right:0;bottom:0;position:absolute;background:#264653}.mc-sidebar-user__header{display:flex;align-items:center;background:none;border:none;color:#fff;font-size:inherit;font-family:inherit;text-align:initial;margin:0;width:100%;overflow:hidden}.mc-sidebar-user__header:focus-visible{box-shadow:none;border:none;border-radius:12px;outline:1px solid #0b96cc;outline-offset:-5px}.mc-sidebar-user__header:hover{cursor:pointer}.mc-sidebar-user__header:hover .mc-sidebar-user__header__information__icon{background:#082435}.mc-sidebar-user__header__picture{display:flex;align-items:center;justify-content:center;background:#5b737d;border-radius:24px;width:48px;min-width:48px;height:48px;overflow:hidden}.mc-sidebar-user__header__picture img{display:block}.mc-sidebar-user__header__information{justify-content:space-around;display:flex;flex-direction:column;flex:1;margin:0 0 0 8px;height:40px}.mc-sidebar-user__header__information__icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:4px}.mc-sidebar-user__header__information__identity{font-size:16px;font-weight:700}.mc-sidebar-user__header__information__title,.mc-sidebar-user__header__information__identity{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:176px}.mc-sidebar-user__content#user-content{list-style-type:none;padding:0;overflow:hidden;margin:-8px 0 24px;transition:all .3s ease-in-out}.mc-sidebar-user__content#user-content.is-close{height:0;margin:0}.mc-sidebar-user__content#user-content .is-open{height:auto}.mc-sidebar-user.is-close .mc-sidebar-user__header{transition:padding .3s ease-in-out;padding:12px 8px;margin:8px 0}.mc-sidebar-user.is-open .mc-sidebar-user__header{transition:padding .3s ease-in-out;padding:12px 24px 12px 32px;margin:8px 0}.mc-sidebar-separator{border-bottom:1px solid #5b737d;display:flex}.mc-sidebar-separator.is-close{transition:margin .3s ease-in-out;margin:24px 0}.mc-sidebar-separator.is-open{transition:margin .3s ease-in-out;margin:24px 32px}\n"] }]
         }], ctorParameters: function () { return [{ type: i3.RouterLinkActive, decorators: [{
                     type: Optional
                 }, {
@@ -4753,6 +4810,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 args: [MozSidebarUserComponent]
             }], options: [{
                 type: Input
+            }], opened: [{
+                type: Output
             }] } });
 
 class MozSidebarModule {