@mozaic-ds/angular 0.31.0-rc.0 → 0.31.0-rc.2

package/bricoman/components/listbox/index.d.ts

@@ -0,0 +1,3 @@
+export * from './listbox.component';
+export * from './model/listbox-item';
+export * from './listbox.module';

package/bricoman/components/listbox/public-api.d.ts

@@ -1,2 +1 @@
-export * from './listbox.component';
-export * from './model/listbox-item';
+export * from './index';

package/bricoman/components/sidebar/model/models.d.ts

@@ -1,4 +1,5 @@
 export interface SidebarOptions {
     opened?: boolean;
+    openOnHover?: boolean;
     closeOnSelect?: boolean;
 }

package/bricoman/components/sidebar/moz-sidebar.component.d.ts

@@ -15,16 +15,21 @@ export declare class MozSidebarComponent implements OnInit {
     userCmp?: MozSidebarUserComponent;
     options?: SidebarOptions;
     opened: EventEmitter<boolean>;
+    hovered: EventEmitter<boolean>;
     localOpen: boolean;
+    isHover: boolean;
     activeSubFeature?: MozSidebarFeatureComponent;
     defaultOptions: SidebarOptions;
     constructor(routerLinkActive: RouterLinkActive | null, routerLink: RouterLinkWithHref | null);
     ngOnInit(): void;
     toggleSidebar(): void;
     toggleUser(): void;
+    setIsHover(isHover: boolean): void;
+    shouldBeOpen(): boolean;
     select(item: MozSidebarFeatureComponent | MozSidebarHomeComponent | MozSidebarUtilityComponent): void;
     selectSubFeature(item: MozSidebarFeatureComponent): void;
     closeSubFeature(): void;
+    emitOpened(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MozSidebarComponent, [{ optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MozSidebarComponent, "moz-sidebar", never, { "options": { "alias": "options"; "required": false; }; }, { "opened": "opened"; }, ["homeCmp", "userCmp", "featuresCmp", "utilitiesCmp"], never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MozSidebarComponent, "moz-sidebar", never, { "options": { "alias": "options"; "required": false; }; }, { "opened": "opened"; "hovered": "hovered"; }, ["homeCmp", "userCmp", "featuresCmp", "utilitiesCmp"], never, false, never>;
 }

package/bricoman/fesm2022/mozaic-ds-angular.mjs

@@ -5552,8 +5552,14 @@ class MozSidebarComponent {
         this.routerLinkActive = routerLinkActive;
         this.routerLink = routerLink;
         this.opened = new EventEmitter();
+        this.hovered = new EventEmitter();
         this.localOpen = false;
-        this.defaultOptions = { opened: true, closeOnSelect: true };
+        this.isHover = false;
+        this.defaultOptions = {
+            openOnHover: false,
+            opened: true,
+            closeOnSelect: true,
+        };
     }
     ngOnInit() {
         this.options = { ...this.defaultOptions, ...this.options };
@@ -5561,21 +5567,28 @@ class MozSidebarComponent {
     }
     toggleSidebar() {
         this.localOpen = !this.localOpen;
-        this.opened.emit(this.localOpen);
+        this.emitOpened();
     }
     toggleUser() {
         if (!this.userCmp)
             return;
-        if (!this.localOpen) {
+        this.userCmp.localOpen = this.shouldBeOpen() ? !this.userCmp.localOpen : true;
+        if (!this.shouldBeOpen())
             this.toggleSidebar();
-            this.userCmp.localOpen = true;
-        }
-        else {
-            this.userCmp.localOpen = !this.userCmp?.localOpen;
-        }
+    }
+    setIsHover(isHover) {
+        if (!this.options?.openOnHover)
+            return;
+        this.isHover = isHover;
+        this.hovered.emit(this.isHover);
+        this.emitOpened();
+    }
+    shouldBeOpen() {
+        if (this.options?.openOnHover)
+            return this.localOpen || this.isHover;
+        return this.localOpen;
     }
     select(item) {
-        const bufferValue = item.selected;
         const clearAndHanddleCat = (elem) => {
             if (elem !== item && !elem.featuresCmp.some((it) => it === item)) {
                 elem.selected = false;
@@ -5588,16 +5601,17 @@ class MozSidebarComponent {
         this.utilitiesCmp?.forEach((it) => {
             clearAndHanddleCat(it);
         });
-        item.selected = !bufferValue;
-        if (item instanceof MozSidebarFeatureComponent) {
-            if (item._category) {
-                this.localOpen = true;
-                this.opened.emit(this.localOpen);
-                return;
-            }
+        item.selected = this.shouldBeOpen() ? !item.selected : true;
+        if (this.options?.openOnHover)
+            return;
+        if (item instanceof MozSidebarFeatureComponent && item._category) {
+            this.localOpen = true;
+            this.emitOpened();
+        }
+        else {
             if (this.options?.closeOnSelect) {
                 this.localOpen = false;
-                this.opened.emit(this.localOpen);
+                this.emitOpened();
             }
         }
     }
@@ -5607,12 +5621,15 @@ class MozSidebarComponent {
     closeSubFeature() {
         this.activeSubFeature = undefined;
     }
+    emitOpened() {
+        this.opened.emit(this.shouldBeOpen());
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: MozSidebarComponent, deps: [{ token: RouterLinkActive, optional: true }, { token: RouterLinkWithHref, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: MozSidebarComponent, isStandalone: false, 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(() => 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\" (click)=\"toggleUser()\">\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 *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]=\"localOpen && 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{-moz-transition:width .3s ease-in-out;-o-transition:width .3s ease-in-out;-webkit-transition:width .3s ease-in-out;transition:width .3s ease-in-out}.mc-sidebar.is-close{-moz-transition:width .3s ease-in-out;-o-transition:width .3s ease-in-out;-webkit-transition:width .3s ease-in-out;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:#0058db}.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{-moz-transition:margin .3s ease-in-out;-o-transition:margin .3s ease-in-out;-webkit-transition:margin .3s ease-in-out;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{-moz-transition:margin .3s ease-in-out;-o-transition:margin .3s ease-in-out;-webkit-transition:margin .3s ease-in-out;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: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{-moz-transition:margin-left .3s ease-in-out;-o-transition:margin-left .3s ease-in-out;-webkit-transition:margin-left .3s ease-in-out;transition:margin-left .3s ease-in-out;margin-left:-320px;opacity:0}.mc-sidebar-section ul.is-visible{-moz-transition:margin-left .3s ease-in-out;-o-transition:margin-left .3s ease-in-out;-webkit-transition:margin-left .3s ease-in-out;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;-moz-transition:margin .3s ease-in-out;-o-transition:margin .3s ease-in-out;-webkit-transition:margin .3s ease-in-out;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;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;-moz-transition:height .3s ease-in-out;-o-transition:height .3s ease-in-out;-webkit-transition:height .3s ease-in-out;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:#0058db}.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;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:#0058db}.mc-sidebar-feature.is-close{-moz-transition:padding .3s ease-in-out;-o-transition:padding .3s ease-in-out;-webkit-transition:padding .3s ease-in-out;transition:padding .3s ease-in-out;padding:0}.mc-sidebar-feature.is-close .mc-sidebar-feature__container{-moz-transition:padding-left .3s ease-in-out;-o-transition:padding-left .3s ease-in-out;-webkit-transition:padding-left .3s ease-in-out;transition:padding-left .3s ease-in-out;padding-left:20px;width:24px}.mc-sidebar-feature.is-open{-moz-transition:padding .3s ease-in-out;-o-transition:padding .3s ease-in-out;-webkit-transition:padding .3s ease-in-out;transition:padding .3s ease-in-out;padding:0 32px}.mc-sidebar-feature.is-open .mc-sidebar-feature__container{-moz-transition:padding-left .3s ease-in-out;-o-transition:padding-left .3s ease-in-out;-webkit-transition:padding-left .3s ease-in-out;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:#007bb4;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;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;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{-moz-transition:padding .3s ease-in-out;-o-transition:padding .3s ease-in-out;-webkit-transition:padding .3s ease-in-out;transition:padding .3s ease-in-out;padding:12px 8px;margin:8px 0}.mc-sidebar-user.is-open .mc-sidebar-user__header{-moz-transition:padding .3s ease-in-out;-o-transition:padding .3s ease-in-out;-webkit-transition:padding .3s ease-in-out;transition:padding .3s ease-in-out;padding:12px 24px 12px 32px;margin:8px 0}.mc-sidebar-separator{border-bottom:1px solid #007bb4;display:flex}.mc-sidebar-separator.is-close{-moz-transition:margin .3s ease-in-out;-o-transition:margin .3s ease-in-out;-webkit-transition:margin .3s ease-in-out;transition:margin .3s ease-in-out;margin:24px 0}.mc-sidebar-separator.is-open{-moz-transition:margin .3s ease-in-out;-o-transition:margin .3s ease-in-out;-webkit-transition:margin .3s ease-in-out;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", "size"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: MozSidebarComponent, isStandalone: false, selector: "moz-sidebar", inputs: { options: "options" }, outputs: { opened: "opened", hovered: "hovered" }, queries: [{ propertyName: "homeCmp", first: true, predicate: MozSidebarHomeComponent, descendants: true }, { propertyName: "userCmp", first: true, predicate: MozSidebarUserComponent, descendants: true }, { propertyName: "featuresCmp", predicate: i0.forwardRef(() => MozSidebarFeatureComponent) }, { propertyName: "utilitiesCmp", predicate: MozSidebarUtilityComponent }], ngImport: i0, template: "<nav class=\"mc-sidebar\" (mouseenter)=\"setIsHover(true)\" (mouseleave)=\"setIsHover(false)\" [ngClass]=\"shouldBeOpen() ? '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]=\"shouldBeOpen() ? 'is-open' : 'is-close'\">\n      <a href=\"#\" [routerLink]=\"homeCmp.link\">\n        <span class=\"mc-sidebar-feature-group__container\" [ngClass]=\"shouldBeOpen() ? '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=\"shouldBeOpen()\">\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': shouldBeOpen() && item.selected, 'is-close': !shouldBeOpen() || !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': shouldBeOpen(), 'is-close': !shouldBeOpen() }\">\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=\"shouldBeOpen()\">\n          <span class=\"mc-sidebar-feature-group__label\">\n            <ng-container *ngTemplateOutlet=\"item.tmplText\"></ng-container>\n          </span>\n          <div *ngIf=\"shouldBeOpen() && 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': shouldBeOpen(), 'is-close': !shouldBeOpen() }\">\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=\"shouldBeOpen()\" [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': shouldBeOpen(), 'is-close': !shouldBeOpen() }\">\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]=\"shouldBeOpen() ? 'is-open' : 'is-close'\">\n      <button class=\"mc-sidebar-user__header\" (click)=\"toggleUser()\">\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=\"shouldBeOpen()\">\n          <p class=\"mc-sidebar-user__header__information\">\n            <ng-container *ngTemplateOutlet=\"userCmp.templateRef\"></ng-container>\n          </p>\n          <span *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\n      <ul *ngIf=\"userCmp.features?.length && userCmp.localOpen && shouldBeOpen()\" [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': shouldBeOpen(), 'is-close': !shouldBeOpen() }\">\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]=\"shouldBeOpen() ? '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{-moz-transition:width .3s ease-in-out;-o-transition:width .3s ease-in-out;-webkit-transition:width .3s ease-in-out;transition:width .3s ease-in-out}.mc-sidebar.is-close{-moz-transition:width .3s ease-in-out;-o-transition:width .3s ease-in-out;-webkit-transition:width .3s ease-in-out;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:#0058db}.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{-moz-transition:margin .3s ease-in-out;-o-transition:margin .3s ease-in-out;-webkit-transition:margin .3s ease-in-out;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{-moz-transition:margin .3s ease-in-out;-o-transition:margin .3s ease-in-out;-webkit-transition:margin .3s ease-in-out;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: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{-moz-transition:margin-left .3s ease-in-out;-o-transition:margin-left .3s ease-in-out;-webkit-transition:margin-left .3s ease-in-out;transition:margin-left .3s ease-in-out;margin-left:-320px;opacity:0}.mc-sidebar-section ul.is-visible{-moz-transition:margin-left .3s ease-in-out;-o-transition:margin-left .3s ease-in-out;-webkit-transition:margin-left .3s ease-in-out;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;-moz-transition:margin .3s ease-in-out;-o-transition:margin .3s ease-in-out;-webkit-transition:margin .3s ease-in-out;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;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;-moz-transition:height .3s ease-in-out;-o-transition:height .3s ease-in-out;-webkit-transition:height .3s ease-in-out;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:#0058db}.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;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:#0058db}.mc-sidebar-feature.is-close{-moz-transition:padding .3s ease-in-out;-o-transition:padding .3s ease-in-out;-webkit-transition:padding .3s ease-in-out;transition:padding .3s ease-in-out;padding:0}.mc-sidebar-feature.is-close .mc-sidebar-feature__container{-moz-transition:padding-left .3s ease-in-out;-o-transition:padding-left .3s ease-in-out;-webkit-transition:padding-left .3s ease-in-out;transition:padding-left .3s ease-in-out;padding-left:20px;width:24px}.mc-sidebar-feature.is-open{-moz-transition:padding .3s ease-in-out;-o-transition:padding .3s ease-in-out;-webkit-transition:padding .3s ease-in-out;transition:padding .3s ease-in-out;padding:0 32px}.mc-sidebar-feature.is-open .mc-sidebar-feature__container{-moz-transition:padding-left .3s ease-in-out;-o-transition:padding-left .3s ease-in-out;-webkit-transition:padding-left .3s ease-in-out;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:#007bb4;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;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;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{-moz-transition:padding .3s ease-in-out;-o-transition:padding .3s ease-in-out;-webkit-transition:padding .3s ease-in-out;transition:padding .3s ease-in-out;padding:12px 8px;margin:8px 0}.mc-sidebar-user.is-open .mc-sidebar-user__header{-moz-transition:padding .3s ease-in-out;-o-transition:padding .3s ease-in-out;-webkit-transition:padding .3s ease-in-out;transition:padding .3s ease-in-out;padding:12px 24px 12px 32px;margin:8px 0}.mc-sidebar-separator{border-bottom:1px solid #007bb4;display:flex}.mc-sidebar-separator.is-close{-moz-transition:margin .3s ease-in-out;-o-transition:margin .3s ease-in-out;-webkit-transition:margin .3s ease-in-out;transition:margin .3s ease-in-out;margin:24px 0}.mc-sidebar-separator.is-open{-moz-transition:margin .3s ease-in-out;-o-transition:margin .3s ease-in-out;-webkit-transition:margin .3s ease-in-out;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", "size"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: MozSidebarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'moz-sidebar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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\" (click)=\"toggleUser()\">\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 *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]=\"localOpen && 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{-moz-transition:width .3s ease-in-out;-o-transition:width .3s ease-in-out;-webkit-transition:width .3s ease-in-out;transition:width .3s ease-in-out}.mc-sidebar.is-close{-moz-transition:width .3s ease-in-out;-o-transition:width .3s ease-in-out;-webkit-transition:width .3s ease-in-out;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:#0058db}.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{-moz-transition:margin .3s ease-in-out;-o-transition:margin .3s ease-in-out;-webkit-transition:margin .3s ease-in-out;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{-moz-transition:margin .3s ease-in-out;-o-transition:margin .3s ease-in-out;-webkit-transition:margin .3s ease-in-out;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: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{-moz-transition:margin-left .3s ease-in-out;-o-transition:margin-left .3s ease-in-out;-webkit-transition:margin-left .3s ease-in-out;transition:margin-left .3s ease-in-out;margin-left:-320px;opacity:0}.mc-sidebar-section ul.is-visible{-moz-transition:margin-left .3s ease-in-out;-o-transition:margin-left .3s ease-in-out;-webkit-transition:margin-left .3s ease-in-out;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;-moz-transition:margin .3s ease-in-out;-o-transition:margin .3s ease-in-out;-webkit-transition:margin .3s ease-in-out;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;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;-moz-transition:height .3s ease-in-out;-o-transition:height .3s ease-in-out;-webkit-transition:height .3s ease-in-out;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:#0058db}.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;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:#0058db}.mc-sidebar-feature.is-close{-moz-transition:padding .3s ease-in-out;-o-transition:padding .3s ease-in-out;-webkit-transition:padding .3s ease-in-out;transition:padding .3s ease-in-out;padding:0}.mc-sidebar-feature.is-close .mc-sidebar-feature__container{-moz-transition:padding-left .3s ease-in-out;-o-transition:padding-left .3s ease-in-out;-webkit-transition:padding-left .3s ease-in-out;transition:padding-left .3s ease-in-out;padding-left:20px;width:24px}.mc-sidebar-feature.is-open{-moz-transition:padding .3s ease-in-out;-o-transition:padding .3s ease-in-out;-webkit-transition:padding .3s ease-in-out;transition:padding .3s ease-in-out;padding:0 32px}.mc-sidebar-feature.is-open .mc-sidebar-feature__container{-moz-transition:padding-left .3s ease-in-out;-o-transition:padding-left .3s ease-in-out;-webkit-transition:padding-left .3s ease-in-out;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:#007bb4;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;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;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{-moz-transition:padding .3s ease-in-out;-o-transition:padding .3s ease-in-out;-webkit-transition:padding .3s ease-in-out;transition:padding .3s ease-in-out;padding:12px 8px;margin:8px 0}.mc-sidebar-user.is-open .mc-sidebar-user__header{-moz-transition:padding .3s ease-in-out;-o-transition:padding .3s ease-in-out;-webkit-transition:padding .3s ease-in-out;transition:padding .3s ease-in-out;padding:12px 24px 12px 32px;margin:8px 0}.mc-sidebar-separator{border-bottom:1px solid #007bb4;display:flex}.mc-sidebar-separator.is-close{-moz-transition:margin .3s ease-in-out;-o-transition:margin .3s ease-in-out;-webkit-transition:margin .3s ease-in-out;transition:margin .3s ease-in-out;margin:24px 0}.mc-sidebar-separator.is-open{-moz-transition:margin .3s ease-in-out;-o-transition:margin .3s ease-in-out;-webkit-transition:margin .3s ease-in-out;transition:margin .3s ease-in-out;margin:24px 32px}\n"] }]
+            args: [{ selector: 'moz-sidebar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<nav class=\"mc-sidebar\" (mouseenter)=\"setIsHover(true)\" (mouseleave)=\"setIsHover(false)\" [ngClass]=\"shouldBeOpen() ? '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]=\"shouldBeOpen() ? 'is-open' : 'is-close'\">\n      <a href=\"#\" [routerLink]=\"homeCmp.link\">\n        <span class=\"mc-sidebar-feature-group__container\" [ngClass]=\"shouldBeOpen() ? '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=\"shouldBeOpen()\">\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': shouldBeOpen() && item.selected, 'is-close': !shouldBeOpen() || !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': shouldBeOpen(), 'is-close': !shouldBeOpen() }\">\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=\"shouldBeOpen()\">\n          <span class=\"mc-sidebar-feature-group__label\">\n            <ng-container *ngTemplateOutlet=\"item.tmplText\"></ng-container>\n          </span>\n          <div *ngIf=\"shouldBeOpen() && 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': shouldBeOpen(), 'is-close': !shouldBeOpen() }\">\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=\"shouldBeOpen()\" [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': shouldBeOpen(), 'is-close': !shouldBeOpen() }\">\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]=\"shouldBeOpen() ? 'is-open' : 'is-close'\">\n      <button class=\"mc-sidebar-user__header\" (click)=\"toggleUser()\">\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=\"shouldBeOpen()\">\n          <p class=\"mc-sidebar-user__header__information\">\n            <ng-container *ngTemplateOutlet=\"userCmp.templateRef\"></ng-container>\n          </p>\n          <span *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\n      <ul *ngIf=\"userCmp.features?.length && userCmp.localOpen && shouldBeOpen()\" [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': shouldBeOpen(), 'is-close': !shouldBeOpen() }\">\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]=\"shouldBeOpen() ? '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{-moz-transition:width .3s ease-in-out;-o-transition:width .3s ease-in-out;-webkit-transition:width .3s ease-in-out;transition:width .3s ease-in-out}.mc-sidebar.is-close{-moz-transition:width .3s ease-in-out;-o-transition:width .3s ease-in-out;-webkit-transition:width .3s ease-in-out;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:#0058db}.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{-moz-transition:margin .3s ease-in-out;-o-transition:margin .3s ease-in-out;-webkit-transition:margin .3s ease-in-out;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{-moz-transition:margin .3s ease-in-out;-o-transition:margin .3s ease-in-out;-webkit-transition:margin .3s ease-in-out;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: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{-moz-transition:margin-left .3s ease-in-out;-o-transition:margin-left .3s ease-in-out;-webkit-transition:margin-left .3s ease-in-out;transition:margin-left .3s ease-in-out;margin-left:-320px;opacity:0}.mc-sidebar-section ul.is-visible{-moz-transition:margin-left .3s ease-in-out;-o-transition:margin-left .3s ease-in-out;-webkit-transition:margin-left .3s ease-in-out;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;-moz-transition:margin .3s ease-in-out;-o-transition:margin .3s ease-in-out;-webkit-transition:margin .3s ease-in-out;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;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;-moz-transition:height .3s ease-in-out;-o-transition:height .3s ease-in-out;-webkit-transition:height .3s ease-in-out;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:#0058db}.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;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:#0058db}.mc-sidebar-feature.is-close{-moz-transition:padding .3s ease-in-out;-o-transition:padding .3s ease-in-out;-webkit-transition:padding .3s ease-in-out;transition:padding .3s ease-in-out;padding:0}.mc-sidebar-feature.is-close .mc-sidebar-feature__container{-moz-transition:padding-left .3s ease-in-out;-o-transition:padding-left .3s ease-in-out;-webkit-transition:padding-left .3s ease-in-out;transition:padding-left .3s ease-in-out;padding-left:20px;width:24px}.mc-sidebar-feature.is-open{-moz-transition:padding .3s ease-in-out;-o-transition:padding .3s ease-in-out;-webkit-transition:padding .3s ease-in-out;transition:padding .3s ease-in-out;padding:0 32px}.mc-sidebar-feature.is-open .mc-sidebar-feature__container{-moz-transition:padding-left .3s ease-in-out;-o-transition:padding-left .3s ease-in-out;-webkit-transition:padding-left .3s ease-in-out;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:#007bb4;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;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;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{-moz-transition:padding .3s ease-in-out;-o-transition:padding .3s ease-in-out;-webkit-transition:padding .3s ease-in-out;transition:padding .3s ease-in-out;padding:12px 8px;margin:8px 0}.mc-sidebar-user.is-open .mc-sidebar-user__header{-moz-transition:padding .3s ease-in-out;-o-transition:padding .3s ease-in-out;-webkit-transition:padding .3s ease-in-out;transition:padding .3s ease-in-out;padding:12px 24px 12px 32px;margin:8px 0}.mc-sidebar-separator{border-bottom:1px solid #007bb4;display:flex}.mc-sidebar-separator.is-close{-moz-transition:margin .3s ease-in-out;-o-transition:margin .3s ease-in-out;-webkit-transition:margin .3s ease-in-out;transition:margin .3s ease-in-out;margin:24px 0}.mc-sidebar-separator.is-open{-moz-transition:margin .3s ease-in-out;-o-transition:margin .3s ease-in-out;-webkit-transition:margin .3s ease-in-out;transition:margin .3s ease-in-out;margin:24px 32px}\n"] }]
         }], ctorParameters: () => [{ type: i3.RouterLinkActive, decorators: [{
                     type: Optional
                 }, {
@@ -5639,6 +5656,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                 type: Input
             }], opened: [{
                 type: Output
+            }], hovered: [{
+                type: Output
             }] } });
 
 class MozSidebarModule {
@@ -6348,5 +6367,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AccordionModule, ActionBarComponent, ActionBarModule, AutocompleteComponent, AutocompleteModule, BadgeComponent, BadgeModule, BottomBarComponent, BottomBarModule, BreadcrumbComponent, BreadcrumbModule, BuiltItMenuComponent, BuiltItMenuModule, ButtonComponent, ButtonModule, CHECKBOX_CONTROL_VALUE_ACCESSOR, CardComponent, CardModule, CheckboxComponent, CheckboxGroupComponent, CheckboxGroupModule, CheckboxModule, ContainerComponent, ContainerModule, Direction, DividerComponent, DividerModule, DropdownComponent, DropdownModule, FieldComponent, FieldErrorComponent, FieldModule, FileUploaderComponent, FileUploaderModule, HeaderComponent, HeaderModule, HeadingComponent, HeadingModule, IconComponent, IconModule, IconService, InputIconDirective, KpiComponent, KpiModule, KpiSize, LAYER_CONFIG, LAYER_DATA, LAYER_REF, LayerComponent, LayerModule, LayerService, LinkComponent, LinkModule, ListboxComponent, LoaderComponent, LoaderModule, LoaderService, MODAL_CONFIG, MODAL_DATA, MODAL_REF, MOZ_INPUT_ICON, ModalComponent, ModalModule, ModalService, MozDatatableCaptionComponent, MozDatatableComponent, MozDatatableContentCellComponent, MozDatatableFooterComponent, MozDatatableHeaderCellComponent, MozDatatableManagementComponent, MozDatatableManagementContentComponent, MozDatatableManagementModule, MozDatatableModule, MozDatatableRowExpansionContentComponent, MozDatatableSelectionComponent, MozDatatableSortDirective, MozDragNDropDirective, MozSidebarComponent, MozSidebarFeatureComponent, MozSidebarHomeComponent, MozSidebarModule, MozSidebarUserComponent, MozSidebarUtilityComponent, NOTIFICATION_CONFIG, NotificationComponent, NotificationConfigFactory, NotificationContainerComponent, NotificationFooterComponent, NotificationMessageComponent, NotificationModule, NotificationService, NotificationTitleComponent, OptionButtonComponent, OptionButtonsComponent, OptionButtonsModule, OptionCardComponent, OptionCardsComponent, OptionCardsModule, OverlayComponent, OverlayModule, PAGINATION_CONTROL_VALUE_ACCESSOR, PaginationComponent, PaginationModule, PasswordInputComponent, PasswordInputModule, PhoneNumberComponent, PhoneNumberModule, ProgressBarComponent, ProgressBarModule, QuantitySelectorComponent, QuantitySelectorModule, RadioComponent, RadioModule, RatingMap, SegmentedControlButtonComponent, SegmentedControlComponent, SegmentedControlModule, SelectComponent, SelectModule, StarsInputComponent, StarsInputModule, StarsResultComponent, StarsResultModule, Status, StepComponent, StepperBarComponent, StepperBarModule, StepperComponent, StepperModule, TOGGLE_CONTROL_VALUE_ACCESSOR, TabComponent, TabsComponent, TabsModule, TagComponent, TagModule, TaglistComponent, TaglistLayerContentComponent, TaglistModule, TextAreaComponent, TextAreaModule, TextInputComponent, TextInputModule, ToggleComponent, ToggleModule, TooltipComponent, TooltipDirective, TooltipModule, UploadedFilesComponent, castBooleanProperty, generateId, getRandomNumber, overwriteStyle, segmentedControlSizeDefault, statusesString };
+export { AccordionComponent, AccordionModule, ActionBarComponent, ActionBarModule, AutocompleteComponent, AutocompleteModule, BadgeComponent, BadgeModule, BottomBarComponent, BottomBarModule, BreadcrumbComponent, BreadcrumbModule, BuiltItMenuComponent, BuiltItMenuModule, ButtonComponent, ButtonModule, CHECKBOX_CONTROL_VALUE_ACCESSOR, CardComponent, CardModule, CheckboxComponent, CheckboxGroupComponent, CheckboxGroupModule, CheckboxModule, ContainerComponent, ContainerModule, Direction, DividerComponent, DividerModule, DropdownComponent, DropdownModule, FieldComponent, FieldErrorComponent, FieldModule, FileUploaderComponent, FileUploaderModule, HeaderComponent, HeaderModule, HeadingComponent, HeadingModule, IconComponent, IconModule, IconService, InputIconDirective, KpiComponent, KpiModule, KpiSize, LAYER_CONFIG, LAYER_DATA, LAYER_REF, LayerComponent, LayerModule, LayerService, LinkComponent, LinkModule, ListboxComponent, ListboxModule, LoaderComponent, LoaderModule, LoaderService, MODAL_CONFIG, MODAL_DATA, MODAL_REF, MOZ_INPUT_ICON, ModalComponent, ModalModule, ModalService, MozDatatableCaptionComponent, MozDatatableComponent, MozDatatableContentCellComponent, MozDatatableFooterComponent, MozDatatableHeaderCellComponent, MozDatatableManagementComponent, MozDatatableManagementContentComponent, MozDatatableManagementModule, MozDatatableModule, MozDatatableRowExpansionContentComponent, MozDatatableSelectionComponent, MozDatatableSortDirective, MozDragNDropDirective, MozSidebarComponent, MozSidebarFeatureComponent, MozSidebarHomeComponent, MozSidebarModule, MozSidebarUserComponent, MozSidebarUtilityComponent, NOTIFICATION_CONFIG, NotificationComponent, NotificationConfigFactory, NotificationContainerComponent, NotificationFooterComponent, NotificationMessageComponent, NotificationModule, NotificationService, NotificationTitleComponent, OptionButtonComponent, OptionButtonsComponent, OptionButtonsModule, OptionCardComponent, OptionCardsComponent, OptionCardsModule, OverlayComponent, OverlayModule, PAGINATION_CONTROL_VALUE_ACCESSOR, PaginationComponent, PaginationModule, PasswordInputComponent, PasswordInputModule, PhoneNumberComponent, PhoneNumberModule, ProgressBarComponent, ProgressBarModule, QuantitySelectorComponent, QuantitySelectorModule, RadioComponent, RadioModule, RatingMap, SegmentedControlButtonComponent, SegmentedControlComponent, SegmentedControlModule, SelectComponent, SelectModule, StarsInputComponent, StarsInputModule, StarsResultComponent, StarsResultModule, Status, StepComponent, StepperBarComponent, StepperBarModule, StepperComponent, StepperModule, TOGGLE_CONTROL_VALUE_ACCESSOR, TabComponent, TabsComponent, TabsModule, TagComponent, TagModule, TaglistComponent, TaglistLayerContentComponent, TaglistModule, TextAreaComponent, TextAreaModule, TextInputComponent, TextInputModule, ToggleComponent, ToggleModule, TooltipComponent, TooltipDirective, TooltipModule, UploadedFilesComponent, castBooleanProperty, generateId, getRandomNumber, overwriteStyle, segmentedControlSizeDefault, statusesString };
 //# sourceMappingURL=mozaic-ds-angular.mjs.map