@tilde-nlp/ngx-menu 6.1.45 → 6.1.46

package/esm2022/lib/components/menu-item-list/menu-item-list.component.mjs

@@ -269,11 +269,11 @@ export class MenuItemListComponent {
             i0.ɵɵproperty("fxLayoutAlign", ctx.menuLayoutDirection);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngForOf", ctx.items);
-        } }, dependencies: [i1.DefaultLayoutDirective, i1.DefaultLayoutAlignDirective, i2.DefaultClassDirective, i3.RouterLink, i4.NgForOf, i4.NgIf, i4.NgTemplateOutlet, i5.MatTooltip, i6.MatIcon, i7.MatButton, i7.MatIconButton, MenuItemListComponent, i8.MenuIconComponent, i9.MenuItemLinkComponent, i10.MenuItemBtnComponent, i11.TranslatePipe], styles: ["[_nghost-%COMP%]{display:inline-block}.menu-item[_ngcontent-%COMP%]{width:100%}  .collapsed .menu-item-list{display:flex!important;justify-content:center!important;align-items:center!important}  .collapsed .menu-list-wrapper,   .collapsed tld-menu-item-link{display:flex!important;justify-content:center!important}  .collapsed .menu-item{display:flex!important;place-content:center center!important}  .collapsed tld-menu-item-link:not(:first-child){margin-top:16px!important}.menu-action-button[_ngcontent-%COMP%]{justify-content:flex-start;align-items:center;max-width:100%;width:-webkit-fill-available}[_nghost-%COMP%]     .menu-list-wrapper .menu-item{cursor:pointer;font-style:normal;color:var(--base-30);text-decoration:none;align-items:center!important;font-weight:400;background:none;border:none}[_nghost-%COMP%]     .menu-list-wrapper .menu-item:not(button):not(.active-menu-item):hover{background-color:var(--base-70)!important}[_nghost-%COMP%]     .menu-list-wrapper .menu-item.active-menu-item, [_nghost-%COMP%]     .menu-list-wrapper .menu-item.active-menu-item mat-icon, [_nghost-%COMP%]     .menu-list-wrapper .menu-item.active-menu-item:hover{font-weight:600}[_nghost-%COMP%]     .menu-list-wrapper .menu-item span{display:inline-block}[_nghost-%COMP%]     .menu-list-wrapper .menu-item .menu-item-title{display:flex;flex-direction:row;align-items:start;width:100%}[_nghost-%COMP%]     .menu-list-wrapper .menu-item .menu-item-title .title-content{width:100%;text-align:start;display:block}[_nghost-%COMP%]     .menu-list-wrapper .menu-item .menu-item-title .title-content:before{display:block;content:attr(content);font-weight:600;height:0;overflow:hidden;visibility:hidden}.child-list[_nghost-%COMP%]{margin-bottom:1rem}.child-list[_nghost-%COMP%]   .menu-item[_ngcontent-%COMP%] + .menu-item[_ngcontent-%COMP%]{margin-top:.5rem}  .menu-tooltip{left:.625rem;font-family:Roboto;font-style:normal;font-weight:400;font-size:.75rem;line-height:1.25rem;color:var(--base-70);border-radius:.25rem;position:relative}  .menu-tooltip:after{width:0;height:0;content:\"\";position:absolute;border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-bottom:.5rem solid var(--menu-border-dark-color);left:-.75rem;top:calc(50% - .25rem);transform:rotate(270deg);overflow:initial}.menu-item-list-title[_ngcontent-%COMP%]{padding:8px 0 24px;font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;margin-left:20px;height:56px}.menu-item-list-title[_ngcontent-%COMP%]:has(.menu-title-btn){margin-left:0}  lib-menu-lang-switcher, .menu-item-list[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_slide-in .3s forwards}  lib-menu-lang-switcher, .menu-title-btn[_ngcontent-%COMP%]{margin-right:2px;transition:opacity .3s}.spin[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_spinArrow .3s forwards}.arrow-icon[_ngcontent-%COMP%]{margin-right:-6px}@keyframes _ngcontent-%COMP%_slide-in{0%{opacity:0;margin-left:-100px}to{opacity:1;margin-left:0}}@keyframes _ngcontent-%COMP%_spinArrow{to{transform:rotate(180deg)}}"] }); }
+        } }, dependencies: [i1.DefaultLayoutDirective, i1.DefaultLayoutAlignDirective, i2.DefaultClassDirective, i3.RouterLink, i4.NgForOf, i4.NgIf, i4.NgTemplateOutlet, i5.MatTooltip, i6.MatIcon, i7.MatButton, i7.MatIconButton, MenuItemListComponent, i8.MenuIconComponent, i9.MenuItemLinkComponent, i10.MenuItemBtnComponent, i11.TranslatePipe], styles: [".spin[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_spinArrow .3s forwards}@keyframes _ngcontent-%COMP%_spinArrow{to{transform:rotate(180deg)}}[_nghost-%COMP%]{display:inline-block}.menu-item[_ngcontent-%COMP%]{width:100%}  .collapsed .menu-item-list{display:flex!important;justify-content:center!important;align-items:center!important}  .collapsed .menu-list-wrapper,   .collapsed tld-menu-item-link{display:flex!important;justify-content:center!important}  .collapsed .menu-item{display:flex!important;place-content:center center!important}  .collapsed tld-menu-item-link:not(:first-child){margin-top:16px!important}.menu-action-button[_ngcontent-%COMP%]{justify-content:flex-start;align-items:center;max-width:100%;width:-webkit-fill-available}[_nghost-%COMP%]     .menu-list-wrapper .menu-item{cursor:pointer;font-style:normal;color:var(--base-30);text-decoration:none;align-items:center!important;font-weight:400;background:none;border:none}[_nghost-%COMP%]     .menu-list-wrapper .menu-item:not(button):not(.active-menu-item):hover{background-color:var(--base-70)!important}[_nghost-%COMP%]     .menu-list-wrapper .menu-item.active-menu-item, [_nghost-%COMP%]     .menu-list-wrapper .menu-item.active-menu-item mat-icon, [_nghost-%COMP%]     .menu-list-wrapper .menu-item.active-menu-item:hover{font-weight:600}[_nghost-%COMP%]     .menu-list-wrapper .menu-item span{display:inline-block}[_nghost-%COMP%]     .menu-list-wrapper .menu-item .menu-item-title{display:flex;flex-direction:row;align-items:start;width:100%}[_nghost-%COMP%]     .menu-list-wrapper .menu-item .menu-item-title .title-content{width:100%;text-align:start;display:block}[_nghost-%COMP%]     .menu-list-wrapper .menu-item .menu-item-title .title-content:before{display:block;content:attr(content);font-weight:600;height:0;overflow:hidden;visibility:hidden}.child-list[_nghost-%COMP%]{margin-bottom:1rem}.child-list[_nghost-%COMP%]   .menu-item[_ngcontent-%COMP%] + .menu-item[_ngcontent-%COMP%]{margin-top:.5rem}  .menu-tooltip{left:.625rem;font-family:Roboto;font-style:normal;font-weight:400;font-size:.75rem;line-height:1.25rem;color:var(--base-70);border-radius:.25rem;position:relative}  .menu-tooltip:after{width:0;height:0;content:\"\";position:absolute;border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-bottom:.5rem solid var(--menu-border-dark-color);left:-.75rem;top:calc(50% - .25rem);transform:rotate(270deg);overflow:initial}.menu-item-list-title[_ngcontent-%COMP%]{padding:8px 0 24px;font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;margin-left:20px;height:56px}.menu-item-list-title[_ngcontent-%COMP%]:has(.menu-title-btn){margin-left:0}  lib-menu-lang-switcher, .menu-item-list[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_slide-in .3s forwards}  lib-menu-lang-switcher, .menu-title-btn[_ngcontent-%COMP%]{margin-right:2px;transition:opacity .3s}.arrow-icon[_ngcontent-%COMP%]{margin-right:-6px}@keyframes _ngcontent-%COMP%_slide-in{0%{opacity:0;margin-left:-100px}to{opacity:1;margin-left:0}}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuItemListComponent, [{
         type: Component,
-        args: [{ selector: 'menu-item-list', template: "<div class=\"menu-list-wrapper\">\r\n  @if (titleKey && showTitle && labelsVisible && !menuItemGroup.itemGroupClick) {\r\n    <div  fxLayoutAlign=\"start center\" class=\"menu-item-list-title\">\r\n      <mat-icon class=\"menu-title-btn\" *ngIf=\"menuItemGroup.titleIcon\">{{menuItemGroup.titleIcon}}</mat-icon>\r\n      \r\n      <button class=\"menu-title-btn\" *ngIf=\"menuItemGroup.titleNavigation\" mat-icon-button [routerLink]=\"menuItemGroup.titleNavigation.path\" [matTooltip]=\"menuItemGroup.titleNavigation?.tooltip ?? '' | translate\">\r\n        <mat-icon>{{menuItemGroup.titleNavigation.icon}}</mat-icon>\r\n      </button>\r\n      \r\n      {{ titleKey | translate }}\r\n    </div>\r\n  } @else if (menuItemGroup?.itemGroupClick) {\r\n    <ng-container *ngTemplateOutlet=\"itemGroupButton\">\r\n    </ng-container>\r\n  }\r\n    <div fxLayout=\"column\" [fxLayoutAlign]=\"menuLayoutDirection\" class=\"menu-item-list\">\r\n      <ng-container *ngFor=\"let menuItem of items\">\r\n      <ng-container\r\n        *ngTemplateOutlet=\"!menuItem.showChildren || !menuItem.children || menuItem?.children?.length === 0 ? (menuItem.clickAction ? menuItemBtn : menuItemLink) : itemWithChildren; context: {menuItem: menuItem}\">\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #itemWithChildren let-menuItem=\"menuItem\">\r\n  <button [attr.id]=\"menuItem.customId\" [ngClass.lt-md]=\"'mob-menu-item'\" [fxLayout]=\"menuItemLayout\" class=\"text-m menu-item\"\r\n    [matTooltip]=\"!labelsVisible ? (menuItem.title | translate) : ''\" matTooltipPosition=\"after\" [class.menu-labels-visible]=\"labelsVisible\"\r\n    [fxLayoutAlign]=\"menuLayoutDirection\" matTooltipClass=\"menu-tooltip\"\r\n    [class.active-menu-item]=\"activeItem?.link && menuItem === activeItem\" (click)=\"toggleItemExpand($event,menuItem)\">\r\n    <ng-container *ngIf=\"showIcons && menuItem.icon\">\r\n      <tld-menu-icon  [menuItem]=\"menuItem\"></tld-menu-icon>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"labelsVisible\">\r\n      <span class=\"menu-item-title\">\r\n        <span class=\"title-content\">{{ menuItem.title | translate }}</span></span>\r\n        <ng-container *ngIf=\"menuItem.showChildren && menuItem.children\">\r\n          <span *ngIf=\"menuItem.expanded; else iconDown\" class=\"material-icons spin arrow-icon\">\r\n            keyboard_arrow_down\r\n          </span>\r\n\r\n          <ng-template #iconDown>\r\n            <span class=\"material-icons spin arrow-icon\">\r\n              keyboard_arrow_up\r\n            </span>\r\n          </ng-template>\r\n        </ng-container>\r\n     \r\n    </ng-container>\r\n  </button>\r\n  <ng-container *ngIf=\"menuItem.showChildren && menuItem.expanded && labelsVisible\">\r\n    <menu-item-list class=\"child-list\" *ngIf=\"menuItem.children && menuItem.children.length\" [items]=\"menuItem.children\"\r\n      [direction]=\"direction\" [labelsVisible]=\"labelsVisible\" [activeItem]=\"activeItem\">\r\n    </menu-item-list>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #menuItemLink let-menuItem=\"menuItem\">\r\n  <tld-menu-item-link [ngClass.lt-md]=\"'mob-menu-item'\" [menuItem]=\"menuItem\" [direction]=\"direction\" [labelsVisible]=\"labelsVisible\"\r\n    [activeItem]=\"activeItem\" [showIcons]=\"showIcons\"></tld-menu-item-link>\r\n</ng-template>\r\n\r\n<ng-template #menuItemBtn let-menuItem=\"menuItem\">\r\n  <lib-menu-item-btn *ngIf=\"labelsVisible\" [ngClass.lt-md]=\"'mob-menu-item'\" [menuItem]=\"menuItem\" [direction]=\"direction\"\r\n    [activeItem]=\"activeItem\"></lib-menu-item-btn>\r\n</ng-template>\r\n\r\n<ng-template #itemGroupButton>\r\n  <button \r\n    class=\"menu-title-btn menu-action-button\"\r\n    mat-button\r\n    *ngIf=\"menuItemGroup && labelsVisible\"\r\n    (click)=\"menuItemGroup?.itemGroupClick()\"\r\n  >\r\n    <mat-icon>{{ menuItemGroup.itemGroupIcon }}</mat-icon>\r\n    <span class=\"btn-label\" *ngIf=\"titleKey\">\r\n      {{ titleKey | translate }}\r\n    </span>\r\n  </button>\r\n\r\n  <button \r\n    mat-icon-button\r\n    *ngIf=\"menuItemGroup && !labelsVisible && titleKey && menuItemGroup.itemGroupIcon\"\r\n    (click)=\"menuItemGroup?.itemGroupClick()\"\r\n    [matTooltip]=\"titleKey | translate\"\r\n    matTooltipPosition=\"after\"\r\n  >\r\n    <mat-icon>{{ menuItemGroup.itemGroupIcon }}</mat-icon>\r\n  </button>\r\n</ng-template>", styles: [":host{display:inline-block}.menu-item{width:100%}::ng-deep .collapsed .menu-item-list{display:flex!important;justify-content:center!important;align-items:center!important}::ng-deep .collapsed .menu-list-wrapper,::ng-deep .collapsed tld-menu-item-link{display:flex!important;justify-content:center!important}::ng-deep .collapsed .menu-item{display:flex!important;place-content:center center!important}::ng-deep .collapsed tld-menu-item-link:not(:first-child){margin-top:16px!important}.menu-action-button{justify-content:flex-start;align-items:center;max-width:100%;width:-webkit-fill-available}:host ::ng-deep .menu-list-wrapper .menu-item{cursor:pointer;font-style:normal;color:var(--base-30);text-decoration:none;align-items:center!important;font-weight:400;background:none;border:none}:host ::ng-deep .menu-list-wrapper .menu-item:not(button):not(.active-menu-item):hover{background-color:var(--base-70)!important}:host ::ng-deep .menu-list-wrapper .menu-item.active-menu-item,:host ::ng-deep .menu-list-wrapper .menu-item.active-menu-item mat-icon,:host ::ng-deep .menu-list-wrapper .menu-item.active-menu-item:hover{font-weight:600}:host ::ng-deep .menu-list-wrapper .menu-item span{display:inline-block}:host ::ng-deep .menu-list-wrapper .menu-item .menu-item-title{display:flex;flex-direction:row;align-items:start;width:100%}:host ::ng-deep .menu-list-wrapper .menu-item .menu-item-title .title-content{width:100%;text-align:start;display:block}:host ::ng-deep .menu-list-wrapper .menu-item .menu-item-title .title-content:before{display:block;content:attr(content);font-weight:600;height:0;overflow:hidden;visibility:hidden}:host.child-list{margin-bottom:1rem}:host.child-list .menu-item+.menu-item{margin-top:.5rem}::ng-deep .menu-tooltip{left:.625rem;font-family:Roboto;font-style:normal;font-weight:400;font-size:.75rem;line-height:1.25rem;color:var(--base-70);border-radius:.25rem;position:relative}::ng-deep .menu-tooltip:after{width:0;height:0;content:\"\";position:absolute;border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-bottom:.5rem solid var(--menu-border-dark-color);left:-.75rem;top:calc(50% - .25rem);transform:rotate(270deg);overflow:initial}.menu-item-list-title{padding:8px 0 24px;font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;margin-left:20px;height:56px}.menu-item-list-title:has(.menu-title-btn){margin-left:0}::ng-deep lib-menu-lang-switcher,.menu-item-list{animation:slide-in .3s forwards}::ng-deep lib-menu-lang-switcher,.menu-title-btn{margin-right:2px;transition:opacity .3s}.spin{animation:spinArrow .3s forwards}.arrow-icon{margin-right:-6px}@keyframes slide-in{0%{opacity:0;margin-left:-100px}to{opacity:1;margin-left:0}}@keyframes spinArrow{to{transform:rotate(180deg)}}\n"] }]
+        args: [{ selector: 'menu-item-list', template: "<div class=\"menu-list-wrapper\">\r\n  @if (titleKey && showTitle && labelsVisible && !menuItemGroup.itemGroupClick) {\r\n    <div  fxLayoutAlign=\"start center\" class=\"menu-item-list-title\">\r\n      <mat-icon class=\"menu-title-btn\" *ngIf=\"menuItemGroup.titleIcon\">{{menuItemGroup.titleIcon}}</mat-icon>\r\n      \r\n      <button class=\"menu-title-btn\" *ngIf=\"menuItemGroup.titleNavigation\" mat-icon-button [routerLink]=\"menuItemGroup.titleNavigation.path\" [matTooltip]=\"menuItemGroup.titleNavigation?.tooltip ?? '' | translate\">\r\n        <mat-icon>{{menuItemGroup.titleNavigation.icon}}</mat-icon>\r\n      </button>\r\n      \r\n      {{ titleKey | translate }}\r\n    </div>\r\n  } @else if (menuItemGroup?.itemGroupClick) {\r\n    <ng-container *ngTemplateOutlet=\"itemGroupButton\">\r\n    </ng-container>\r\n  }\r\n    <div fxLayout=\"column\" [fxLayoutAlign]=\"menuLayoutDirection\" class=\"menu-item-list\">\r\n      <ng-container *ngFor=\"let menuItem of items\">\r\n      <ng-container\r\n        *ngTemplateOutlet=\"!menuItem.showChildren || !menuItem.children || menuItem?.children?.length === 0 ? (menuItem.clickAction ? menuItemBtn : menuItemLink) : itemWithChildren; context: {menuItem: menuItem}\">\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #itemWithChildren let-menuItem=\"menuItem\">\r\n  <button [attr.id]=\"menuItem.customId\" [ngClass.lt-md]=\"'mob-menu-item'\" [fxLayout]=\"menuItemLayout\" class=\"text-m menu-item\"\r\n    [matTooltip]=\"!labelsVisible ? (menuItem.title | translate) : ''\" matTooltipPosition=\"after\" [class.menu-labels-visible]=\"labelsVisible\"\r\n    [fxLayoutAlign]=\"menuLayoutDirection\" matTooltipClass=\"menu-tooltip\"\r\n    [class.active-menu-item]=\"activeItem?.link && menuItem === activeItem\" (click)=\"toggleItemExpand($event,menuItem)\">\r\n    <ng-container *ngIf=\"showIcons && menuItem.icon\">\r\n      <tld-menu-icon  [menuItem]=\"menuItem\"></tld-menu-icon>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"labelsVisible\">\r\n      <span class=\"menu-item-title\">\r\n        <span class=\"title-content\">{{ menuItem.title | translate }}</span></span>\r\n        <ng-container *ngIf=\"menuItem.showChildren && menuItem.children\">\r\n          <span *ngIf=\"menuItem.expanded; else iconDown\" class=\"material-icons spin arrow-icon\">\r\n            keyboard_arrow_down\r\n          </span>\r\n\r\n          <ng-template #iconDown>\r\n            <span class=\"material-icons spin arrow-icon\">\r\n              keyboard_arrow_up\r\n            </span>\r\n          </ng-template>\r\n        </ng-container>\r\n     \r\n    </ng-container>\r\n  </button>\r\n  <ng-container *ngIf=\"menuItem.showChildren && menuItem.expanded && labelsVisible\">\r\n    <menu-item-list class=\"child-list\" *ngIf=\"menuItem.children && menuItem.children.length\" [items]=\"menuItem.children\"\r\n      [direction]=\"direction\" [labelsVisible]=\"labelsVisible\" [activeItem]=\"activeItem\">\r\n    </menu-item-list>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #menuItemLink let-menuItem=\"menuItem\">\r\n  <tld-menu-item-link [ngClass.lt-md]=\"'mob-menu-item'\" [menuItem]=\"menuItem\" [direction]=\"direction\" [labelsVisible]=\"labelsVisible\"\r\n    [activeItem]=\"activeItem\" [showIcons]=\"showIcons\"></tld-menu-item-link>\r\n</ng-template>\r\n\r\n<ng-template #menuItemBtn let-menuItem=\"menuItem\">\r\n  <lib-menu-item-btn *ngIf=\"labelsVisible\" [ngClass.lt-md]=\"'mob-menu-item'\" [menuItem]=\"menuItem\" [direction]=\"direction\"\r\n    [activeItem]=\"activeItem\"></lib-menu-item-btn>\r\n</ng-template>\r\n\r\n<ng-template #itemGroupButton>\r\n  <button \r\n    class=\"menu-title-btn menu-action-button\"\r\n    mat-button\r\n    *ngIf=\"menuItemGroup && labelsVisible\"\r\n    (click)=\"menuItemGroup?.itemGroupClick()\"\r\n  >\r\n    <mat-icon>{{ menuItemGroup.itemGroupIcon }}</mat-icon>\r\n    <span class=\"btn-label\" *ngIf=\"titleKey\">\r\n      {{ titleKey | translate }}\r\n    </span>\r\n  </button>\r\n\r\n  <button \r\n    mat-icon-button\r\n    *ngIf=\"menuItemGroup && !labelsVisible && titleKey && menuItemGroup.itemGroupIcon\"\r\n    (click)=\"menuItemGroup?.itemGroupClick()\"\r\n    [matTooltip]=\"titleKey | translate\"\r\n    matTooltipPosition=\"after\"\r\n  >\r\n    <mat-icon>{{ menuItemGroup.itemGroupIcon }}</mat-icon>\r\n  </button>\r\n</ng-template>", styles: [".spin{animation:spinArrow .3s forwards}@keyframes spinArrow{to{transform:rotate(180deg)}}:host{display:inline-block}.menu-item{width:100%}::ng-deep .collapsed .menu-item-list{display:flex!important;justify-content:center!important;align-items:center!important}::ng-deep .collapsed .menu-list-wrapper,::ng-deep .collapsed tld-menu-item-link{display:flex!important;justify-content:center!important}::ng-deep .collapsed .menu-item{display:flex!important;place-content:center center!important}::ng-deep .collapsed tld-menu-item-link:not(:first-child){margin-top:16px!important}.menu-action-button{justify-content:flex-start;align-items:center;max-width:100%;width:-webkit-fill-available}:host ::ng-deep .menu-list-wrapper .menu-item{cursor:pointer;font-style:normal;color:var(--base-30);text-decoration:none;align-items:center!important;font-weight:400;background:none;border:none}:host ::ng-deep .menu-list-wrapper .menu-item:not(button):not(.active-menu-item):hover{background-color:var(--base-70)!important}:host ::ng-deep .menu-list-wrapper .menu-item.active-menu-item,:host ::ng-deep .menu-list-wrapper .menu-item.active-menu-item mat-icon,:host ::ng-deep .menu-list-wrapper .menu-item.active-menu-item:hover{font-weight:600}:host ::ng-deep .menu-list-wrapper .menu-item span{display:inline-block}:host ::ng-deep .menu-list-wrapper .menu-item .menu-item-title{display:flex;flex-direction:row;align-items:start;width:100%}:host ::ng-deep .menu-list-wrapper .menu-item .menu-item-title .title-content{width:100%;text-align:start;display:block}:host ::ng-deep .menu-list-wrapper .menu-item .menu-item-title .title-content:before{display:block;content:attr(content);font-weight:600;height:0;overflow:hidden;visibility:hidden}:host.child-list{margin-bottom:1rem}:host.child-list .menu-item+.menu-item{margin-top:.5rem}::ng-deep .menu-tooltip{left:.625rem;font-family:Roboto;font-style:normal;font-weight:400;font-size:.75rem;line-height:1.25rem;color:var(--base-70);border-radius:.25rem;position:relative}::ng-deep .menu-tooltip:after{width:0;height:0;content:\"\";position:absolute;border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-bottom:.5rem solid var(--menu-border-dark-color);left:-.75rem;top:calc(50% - .25rem);transform:rotate(270deg);overflow:initial}.menu-item-list-title{padding:8px 0 24px;font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;margin-left:20px;height:56px}.menu-item-list-title:has(.menu-title-btn){margin-left:0}::ng-deep lib-menu-lang-switcher,.menu-item-list{animation:slide-in .3s forwards}::ng-deep lib-menu-lang-switcher,.menu-title-btn{margin-right:2px;transition:opacity .3s}.arrow-icon{margin-right:-6px}@keyframes slide-in{0%{opacity:0;margin-left:-100px}to{opacity:1;margin-left:0}}\n"] }]
     }], null, { direction: [{
             type: Input
         }], labelsVisible: [{

package/esm2022/lib/components/menu-lang-switcher/menu-lang-switcher.component.mjs

@@ -91,11 +91,11 @@ export class MenuLangSwitcherComponent {
             i0.ɵɵconditional(!ctx.isCollapsed ? 7 : -1);
             i0.ɵɵadvance(3);
             i0.ɵɵrepeater(ctx.languages);
-        } }, dependencies: [i1.MatTooltip, i2.MatIcon, i3.MatMenu, i3.MatMenuItem, i3.MatMenuTrigger, i4.TranslatePipe, i5.LanguageTranslatePipe], styles: ["span[_ngcontent-%COMP%]{font-size:14px}.lang-switcher[_ngcontent-%COMP%]{white-space:nowrap;overflow:hidden;display:flex;align-items:center;color:var(--base-40);background:none;width:100%;padding:16px 8px 16px 18px;border-radius:5px}.lang-switcher.active[_ngcontent-%COMP%], .lang-switcher[_ngcontent-%COMP%]:hover{background-color:var(--base-70)}.collapsed[_ngcontent-%COMP%]{padding:0;min-width:40px;height:40px;border-radius:50%;margin-top:10px;justify-content:center;width:100%;margin-left:-6px}.current-lang[_ngcontent-%COMP%]{display:flex;align-items:center;width:100%;gap:12px}.collapsed[_ngcontent-%COMP%]   .current-lang[_ngcontent-%COMP%]{justify-content:center;width:100%}.spin[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_spinArrow .3s forwards}@keyframes _ngcontent-%COMP%_spinArrow{to{transform:rotate(180deg)}}"] }); }
+        } }, dependencies: [i1.MatTooltip, i2.MatIcon, i3.MatMenu, i3.MatMenuItem, i3.MatMenuTrigger, i4.TranslatePipe, i5.LanguageTranslatePipe], styles: [".spin[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_spinArrow .3s forwards}@keyframes _ngcontent-%COMP%_spinArrow{to{transform:rotate(180deg)}}span[_ngcontent-%COMP%]{font-size:14px}.lang-switcher[_ngcontent-%COMP%]{white-space:nowrap;overflow:hidden;display:flex;align-items:center;color:var(--base-30);background:none;width:100%;padding:16px 8px 16px 18px;border-radius:5px}.lang-switcher.active[_ngcontent-%COMP%], .lang-switcher[_ngcontent-%COMP%]:hover{background-color:var(--base-70)}.collapsed[_ngcontent-%COMP%]{padding:0;min-width:40px;height:40px;border-radius:50%;margin-top:10px;justify-content:center;width:100%;margin-left:-6px}.current-lang[_ngcontent-%COMP%]{display:flex;align-items:center;width:100%;gap:12px}.collapsed[_ngcontent-%COMP%]   .current-lang[_ngcontent-%COMP%]{justify-content:center;width:100%}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuLangSwitcherComponent, [{
         type: Component,
-        args: [{ selector: 'lib-menu-lang-switcher', template: "<button\r\n  [class.collapsed]=\"isCollapsed\"\r\n  #state=\"matMenuTrigger\"\r\n  [matMenuTriggerFor]=\"menu\"\r\n  [matTooltip]=\"isCollapsed ? ('MENU.CHANGE_LANGUAGE' | translate) : ''\"\r\n  matTooltipPosition=\"after\"\r\n  matTooltipClass=\"menu-tooltip\" \r\n  class=\"lang-switcher\"\r\n  [class.active]=\"state.menuOpen\"\r\n>\r\n<div class=\"current-lang\">\r\n  <mat-icon class=\"lang-icon\">language</mat-icon>\r\n\r\n  @if (!isCollapsed) {\r\n    <span>\r\n      {{ currentLanguageCode | languageTranslate }}\r\n    </span>\r\n  }\r\n</div>\r\n\r\n  @if (!isCollapsed) {\r\n    @if (state.menuOpen) {\r\n      <mat-icon class=\"menu-arrow spin\">keyboard_arrow_down</mat-icon>\r\n      } @else {\r\n      <mat-icon class=\"menu-arrow spin\">keyboard_arrow_up</mat-icon>\r\n      }\r\n  }\r\n</button>\r\n\r\n<mat-menu #menu=\"matMenu\" class=\"lang-menu\">\r\n  @for (lang of languages; track lang) {\r\n    @if (lang !== currentLanguageCode) {\r\n      <button mat-menu-item class=\"profile-option\" (click)=\"changeLanguage(lang)\">\r\n        {{ lang | languageTranslate }}\r\n      </button>\r\n    }\r\n  }\r\n</mat-menu>\r\n", styles: ["span{font-size:14px}.lang-switcher{white-space:nowrap;overflow:hidden;display:flex;align-items:center;color:var(--base-40);background:none;width:100%;padding:16px 8px 16px 18px;border-radius:5px}.lang-switcher.active,.lang-switcher:hover{background-color:var(--base-70)}.collapsed{padding:0;min-width:40px;height:40px;border-radius:50%;margin-top:10px;justify-content:center;width:100%;margin-left:-6px}.current-lang{display:flex;align-items:center;width:100%;gap:12px}.collapsed .current-lang{justify-content:center;width:100%}.spin{animation:spinArrow .3s forwards}@keyframes spinArrow{to{transform:rotate(180deg)}}\n"] }]
+        args: [{ selector: 'lib-menu-lang-switcher', template: "<button\r\n  [class.collapsed]=\"isCollapsed\"\r\n  #state=\"matMenuTrigger\"\r\n  [matMenuTriggerFor]=\"menu\"\r\n  [matTooltip]=\"isCollapsed ? ('MENU.CHANGE_LANGUAGE' | translate) : ''\"\r\n  matTooltipPosition=\"after\"\r\n  matTooltipClass=\"menu-tooltip\" \r\n  class=\"lang-switcher\"\r\n  [class.active]=\"state.menuOpen\"\r\n>\r\n<div class=\"current-lang\">\r\n  <mat-icon class=\"lang-icon\">language</mat-icon>\r\n\r\n  @if (!isCollapsed) {\r\n    <span>\r\n      {{ currentLanguageCode | languageTranslate }}\r\n    </span>\r\n  }\r\n</div>\r\n\r\n  @if (!isCollapsed) {\r\n    @if (state.menuOpen) {\r\n      <mat-icon class=\"menu-arrow spin\">keyboard_arrow_down</mat-icon>\r\n      } @else {\r\n      <mat-icon class=\"menu-arrow spin\">keyboard_arrow_up</mat-icon>\r\n      }\r\n  }\r\n</button>\r\n\r\n<mat-menu #menu=\"matMenu\" class=\"lang-menu\">\r\n  @for (lang of languages; track lang) {\r\n    @if (lang !== currentLanguageCode) {\r\n      <button mat-menu-item class=\"profile-option\" (click)=\"changeLanguage(lang)\">\r\n        {{ lang | languageTranslate }}\r\n      </button>\r\n    }\r\n  }\r\n</mat-menu>\r\n", styles: [".spin{animation:spinArrow .3s forwards}@keyframes spinArrow{to{transform:rotate(180deg)}}span{font-size:14px}.lang-switcher{white-space:nowrap;overflow:hidden;display:flex;align-items:center;color:var(--base-30);background:none;width:100%;padding:16px 8px 16px 18px;border-radius:5px}.lang-switcher.active,.lang-switcher:hover{background-color:var(--base-70)}.collapsed{padding:0;min-width:40px;height:40px;border-radius:50%;margin-top:10px;justify-content:center;width:100%;margin-left:-6px}.current-lang{display:flex;align-items:center;width:100%;gap:12px}.collapsed .current-lang{justify-content:center;width:100%}\n"] }]
     }], null, { isCollapsed: [{
             type: Input
         }], languages: [{

package/esm2022/lib/components/menu-profile/menu-profile.component.mjs

@@ -186,11 +186,11 @@ export class MenuProfileComponent {
             i0.ɵɵproperty("ngIf", !ctx.collapsed);
             i0.ɵɵadvance(3);
             i0.ɵɵrepeater(ctx.userOptions);
-        } }, dependencies: [i1.RouterLink, i2.NgIf, i2.NgTemplateOutlet, i3.MatIcon, i4.MatMenu, i4.MatMenuItem, i4.MatMenuTrigger, i5.TranslatePipe], styles: ["a[_ngcontent-%COMP%]{text-decoration:none}.profile[_ngcontent-%COMP%]{position:relative;margin-top:100px}.profile-wrapper[_ngcontent-%COMP%]{background:none;color:var(--base-30);display:flex;align-items:center;justify-content:start;width:100%;position:absolute;bottom:0;margin:32px 0}.profile-icon[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;min-width:40px;height:40px;border-radius:100%;color:var(--base-0);background-color:var(--base-70);font-size:16px;font-weight:600}.profile-name[_ngcontent-%COMP%]{max-width:145px;overflow:hidden;margin-left:12px;text-overflow:ellipsis}.profile-option-icon[_ngcontent-%COMP%]{vertical-align:middle;margin:0 5px 5px 0}.profile-arrow[_ngcontent-%COMP%]{position:absolute;right:0;margin-right:8px}.mobile[_ngcontent-%COMP%]   .profile-arrow[_ngcontent-%COMP%]{margin-right:20px}.spin[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_spinArrow .3s forwards}  .profile-menu a{font-weight:400!important;display:flex;align-items:center;gap:5px}  .profile-menu a:hover{color:var(--mat-menu-item-label-text-color, var(--mat-app-on-surface))!important;text-decoration:inherit}@keyframes _ngcontent-%COMP%_spinArrow{to{transform:rotate(180deg)}}"] }); }
+        } }, dependencies: [i1.RouterLink, i2.NgIf, i2.NgTemplateOutlet, i3.MatIcon, i4.MatMenu, i4.MatMenuItem, i4.MatMenuTrigger, i5.TranslatePipe], styles: [".spin[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_spinArrow .3s forwards}@keyframes _ngcontent-%COMP%_spinArrow{to{transform:rotate(180deg)}}a[_ngcontent-%COMP%]{text-decoration:none}.profile[_ngcontent-%COMP%]{position:relative;margin-top:100px}.profile-wrapper[_ngcontent-%COMP%]{background:none;color:var(--base-30);display:flex;align-items:center;justify-content:start;width:100%;position:absolute;bottom:0;margin:32px 0}.profile-icon[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;min-width:40px;height:40px;border-radius:100%;color:var(--base-0);background-color:var(--base-70);font-size:16px;font-weight:600}.profile-name[_ngcontent-%COMP%]{max-width:145px;overflow:hidden;margin-left:12px;text-overflow:ellipsis}.profile-option-icon[_ngcontent-%COMP%]{vertical-align:middle;margin:0 5px 5px 0}.profile-arrow[_ngcontent-%COMP%]{position:absolute;right:0;margin-right:8px}.mobile[_ngcontent-%COMP%]   .profile-arrow[_ngcontent-%COMP%]{margin-right:20px}  .profile-menu a{font-weight:400!important;display:flex;align-items:center;gap:5px}  .profile-menu a:hover{color:var(--mat-menu-item-label-text-color, var(--mat-app-on-surface))!important;text-decoration:inherit}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuProfileComponent, [{
         type: Component,
-        args: [{ selector: 'lib-menu-profile', template: "<div class=\"profile\">\r\n  <button #state=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu\" class=\"profile-wrapper\">\r\n    <div class=\"profile-icon\">\r\n      @if (userInitials) {\r\n        {{userInitials}}\r\n      } @else {\r\n        <mat-icon>person</mat-icon>\r\n      }\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"!collapsed\">\r\n      <span class=\"profile-name\">\r\n        {{ username ?? 'MENU.ANONYMOUS' | translate }}\r\n      </span>\r\n\r\n      <mat-icon *ngIf=\"state.menuOpen; else iconDown\" class=\"profile-arrow spin\">keyboard_arrow_down</mat-icon>\r\n\r\n      <ng-template #iconDown>\r\n        <mat-icon class=\"profile-arrow spin\">keyboard_arrow_up</mat-icon>\r\n      </ng-template>\r\n    </ng-container>\r\n  </button>\r\n\r\n  <mat-menu #menu=\"matMenu\" class=\"profile-menu\">\r\n    @for (item of userOptions; track item.label) {\r\n      @if (item.link) {\r\n        @if (item.link.isExternal) {\r\n          <a class=\"mat-mdc-menu-item\" [href]=\"item.link.href\" target=\"_blank\" (click)=\"linkCallback(item.link)\">\r\n            <ng-container\r\n              *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, label: item.label }\">\r\n            </ng-container>\r\n          </a>\r\n        } @else {\r\n          <a class=\"mat-mdc-menu-item\" [routerLink]=\"item.link.href\" (click)=\"linkCallback(item.link)\">\r\n            <ng-container\r\n              *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, label: item.label }\">\r\n            </ng-container>\r\n          </a>\r\n        }\r\n      } @else {\r\n        <button\r\n          mat-menu-item\r\n          class=\"profile-option\"\r\n          (click)=\"item.button?.callback()\"\r\n      >\r\n        <ng-container\r\n          *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, label: item.label }\">\r\n        </ng-container>\r\n      </button>\r\n      }\r\n    }\r\n  </mat-menu>\r\n</div>\r\n\r\n<ng-template #profileMenuItem let-icon=\"icon\" let-label=\"label\">\r\n  @if (icon) {\r\n    @if (!icon?.isCustom) {\r\n      <span class=\"material-icons profile-option-icon\" [class.material-icons-outlined]=\"icon?.isOutlined\">\r\n        {{icon?.name}}\r\n      </span>\r\n    } @else {\r\n      <mat-icon class=\"profile-option-icon\" [svgIcon]=\"icon?.name\"></mat-icon>\r\n    }\r\n  }\r\n  {{ label | translate }}\r\n</ng-template>", styles: ["a{text-decoration:none}.profile{position:relative;margin-top:100px}.profile-wrapper{background:none;color:var(--base-30);display:flex;align-items:center;justify-content:start;width:100%;position:absolute;bottom:0;margin:32px 0}.profile-icon{display:flex;justify-content:center;align-items:center;min-width:40px;height:40px;border-radius:100%;color:var(--base-0);background-color:var(--base-70);font-size:16px;font-weight:600}.profile-name{max-width:145px;overflow:hidden;margin-left:12px;text-overflow:ellipsis}.profile-option-icon{vertical-align:middle;margin:0 5px 5px 0}.profile-arrow{position:absolute;right:0;margin-right:8px}.mobile .profile-arrow{margin-right:20px}.spin{animation:spinArrow .3s forwards}::ng-deep .profile-menu a{font-weight:400!important;display:flex;align-items:center;gap:5px}::ng-deep .profile-menu a:hover{color:var(--mat-menu-item-label-text-color, var(--mat-app-on-surface))!important;text-decoration:inherit}@keyframes spinArrow{to{transform:rotate(180deg)}}\n"] }]
+        args: [{ selector: 'lib-menu-profile', template: "<div class=\"profile\">\r\n  <button #state=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu\" class=\"profile-wrapper\">\r\n    <div class=\"profile-icon\">\r\n      @if (userInitials) {\r\n        {{userInitials}}\r\n      } @else {\r\n        <mat-icon>person</mat-icon>\r\n      }\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"!collapsed\">\r\n      <span class=\"profile-name\">\r\n        {{ username ?? 'MENU.ANONYMOUS' | translate }}\r\n      </span>\r\n\r\n      <mat-icon *ngIf=\"state.menuOpen; else iconDown\" class=\"profile-arrow spin\">keyboard_arrow_down</mat-icon>\r\n\r\n      <ng-template #iconDown>\r\n        <mat-icon class=\"profile-arrow spin\">keyboard_arrow_up</mat-icon>\r\n      </ng-template>\r\n    </ng-container>\r\n  </button>\r\n\r\n  <mat-menu #menu=\"matMenu\" class=\"profile-menu\">\r\n    @for (item of userOptions; track item.label) {\r\n      @if (item.link) {\r\n        @if (item.link.isExternal) {\r\n          <a class=\"mat-mdc-menu-item\" [href]=\"item.link.href\" target=\"_blank\" (click)=\"linkCallback(item.link)\">\r\n            <ng-container\r\n              *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, label: item.label }\">\r\n            </ng-container>\r\n          </a>\r\n        } @else {\r\n          <a class=\"mat-mdc-menu-item\" [routerLink]=\"item.link.href\" (click)=\"linkCallback(item.link)\">\r\n            <ng-container\r\n              *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, label: item.label }\">\r\n            </ng-container>\r\n          </a>\r\n        }\r\n      } @else {\r\n        <button\r\n          mat-menu-item\r\n          class=\"profile-option\"\r\n          (click)=\"item.button?.callback()\"\r\n      >\r\n        <ng-container\r\n          *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, label: item.label }\">\r\n        </ng-container>\r\n      </button>\r\n      }\r\n    }\r\n  </mat-menu>\r\n</div>\r\n\r\n<ng-template #profileMenuItem let-icon=\"icon\" let-label=\"label\">\r\n  @if (icon) {\r\n    @if (!icon?.isCustom) {\r\n      <span class=\"material-icons profile-option-icon\" [class.material-icons-outlined]=\"icon?.isOutlined\">\r\n        {{icon?.name}}\r\n      </span>\r\n    } @else {\r\n      <mat-icon class=\"profile-option-icon\" [svgIcon]=\"icon?.name\"></mat-icon>\r\n    }\r\n  }\r\n  {{ label | translate }}\r\n</ng-template>", styles: [".spin{animation:spinArrow .3s forwards}@keyframes spinArrow{to{transform:rotate(180deg)}}a{text-decoration:none}.profile{position:relative;margin-top:100px}.profile-wrapper{background:none;color:var(--base-30);display:flex;align-items:center;justify-content:start;width:100%;position:absolute;bottom:0;margin:32px 0}.profile-icon{display:flex;justify-content:center;align-items:center;min-width:40px;height:40px;border-radius:100%;color:var(--base-0);background-color:var(--base-70);font-size:16px;font-weight:600}.profile-name{max-width:145px;overflow:hidden;margin-left:12px;text-overflow:ellipsis}.profile-option-icon{vertical-align:middle;margin:0 5px 5px 0}.profile-arrow{position:absolute;right:0;margin-right:8px}.mobile .profile-arrow{margin-right:20px}::ng-deep .profile-menu a{font-weight:400!important;display:flex;align-items:center;gap:5px}::ng-deep .profile-menu a:hover{color:var(--mat-menu-item-label-text-color, var(--mat-app-on-surface))!important;text-decoration:inherit}\n"] }]
     }], null, { collapsed: [{
             type: Input
         }], username: [{

package/fesm2022/tilde-nlp-ngx-menu.mjs

@@ -939,11 +939,11 @@ class MenuItemListComponent {
             i0.ɵɵproperty("fxLayoutAlign", ctx.menuLayoutDirection);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngForOf", ctx.items);
-        } }, dependencies: [i1$2.DefaultLayoutDirective, i1$2.DefaultLayoutAlignDirective, i2$2.DefaultClassDirective, i1$1.RouterLink, i3.NgForOf, i3.NgIf, i3.NgTemplateOutlet, i5.MatTooltip, i2$1.MatIcon, i7.MatButton, i7.MatIconButton, MenuItemListComponent, MenuIconComponent, MenuItemLinkComponent, MenuItemBtnComponent, i8.TranslatePipe], styles: ["[_nghost-%COMP%]{display:inline-block}.menu-item[_ngcontent-%COMP%]{width:100%}  .collapsed .menu-item-list{display:flex!important;justify-content:center!important;align-items:center!important}  .collapsed .menu-list-wrapper,   .collapsed tld-menu-item-link{display:flex!important;justify-content:center!important}  .collapsed .menu-item{display:flex!important;place-content:center center!important}  .collapsed tld-menu-item-link:not(:first-child){margin-top:16px!important}.menu-action-button[_ngcontent-%COMP%]{justify-content:flex-start;align-items:center;max-width:100%;width:-webkit-fill-available}[_nghost-%COMP%]     .menu-list-wrapper .menu-item{cursor:pointer;font-style:normal;color:var(--base-30);text-decoration:none;align-items:center!important;font-weight:400;background:none;border:none}[_nghost-%COMP%]     .menu-list-wrapper .menu-item:not(button):not(.active-menu-item):hover{background-color:var(--base-70)!important}[_nghost-%COMP%]     .menu-list-wrapper .menu-item.active-menu-item, [_nghost-%COMP%]     .menu-list-wrapper .menu-item.active-menu-item mat-icon, [_nghost-%COMP%]     .menu-list-wrapper .menu-item.active-menu-item:hover{font-weight:600}[_nghost-%COMP%]     .menu-list-wrapper .menu-item span{display:inline-block}[_nghost-%COMP%]     .menu-list-wrapper .menu-item .menu-item-title{display:flex;flex-direction:row;align-items:start;width:100%}[_nghost-%COMP%]     .menu-list-wrapper .menu-item .menu-item-title .title-content{width:100%;text-align:start;display:block}[_nghost-%COMP%]     .menu-list-wrapper .menu-item .menu-item-title .title-content:before{display:block;content:attr(content);font-weight:600;height:0;overflow:hidden;visibility:hidden}.child-list[_nghost-%COMP%]{margin-bottom:1rem}.child-list[_nghost-%COMP%]   .menu-item[_ngcontent-%COMP%] + .menu-item[_ngcontent-%COMP%]{margin-top:.5rem}  .menu-tooltip{left:.625rem;font-family:Roboto;font-style:normal;font-weight:400;font-size:.75rem;line-height:1.25rem;color:var(--base-70);border-radius:.25rem;position:relative}  .menu-tooltip:after{width:0;height:0;content:\"\";position:absolute;border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-bottom:.5rem solid var(--menu-border-dark-color);left:-.75rem;top:calc(50% - .25rem);transform:rotate(270deg);overflow:initial}.menu-item-list-title[_ngcontent-%COMP%]{padding:8px 0 24px;font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;margin-left:20px;height:56px}.menu-item-list-title[_ngcontent-%COMP%]:has(.menu-title-btn){margin-left:0}  lib-menu-lang-switcher, .menu-item-list[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_slide-in .3s forwards}  lib-menu-lang-switcher, .menu-title-btn[_ngcontent-%COMP%]{margin-right:2px;transition:opacity .3s}.spin[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_spinArrow .3s forwards}.arrow-icon[_ngcontent-%COMP%]{margin-right:-6px}@keyframes _ngcontent-%COMP%_slide-in{0%{opacity:0;margin-left:-100px}to{opacity:1;margin-left:0}}@keyframes _ngcontent-%COMP%_spinArrow{to{transform:rotate(180deg)}}"] }); }
+        } }, dependencies: [i1$2.DefaultLayoutDirective, i1$2.DefaultLayoutAlignDirective, i2$2.DefaultClassDirective, i1$1.RouterLink, i3.NgForOf, i3.NgIf, i3.NgTemplateOutlet, i5.MatTooltip, i2$1.MatIcon, i7.MatButton, i7.MatIconButton, MenuItemListComponent, MenuIconComponent, MenuItemLinkComponent, MenuItemBtnComponent, i8.TranslatePipe], styles: [".spin[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_spinArrow .3s forwards}@keyframes _ngcontent-%COMP%_spinArrow{to{transform:rotate(180deg)}}[_nghost-%COMP%]{display:inline-block}.menu-item[_ngcontent-%COMP%]{width:100%}  .collapsed .menu-item-list{display:flex!important;justify-content:center!important;align-items:center!important}  .collapsed .menu-list-wrapper,   .collapsed tld-menu-item-link{display:flex!important;justify-content:center!important}  .collapsed .menu-item{display:flex!important;place-content:center center!important}  .collapsed tld-menu-item-link:not(:first-child){margin-top:16px!important}.menu-action-button[_ngcontent-%COMP%]{justify-content:flex-start;align-items:center;max-width:100%;width:-webkit-fill-available}[_nghost-%COMP%]     .menu-list-wrapper .menu-item{cursor:pointer;font-style:normal;color:var(--base-30);text-decoration:none;align-items:center!important;font-weight:400;background:none;border:none}[_nghost-%COMP%]     .menu-list-wrapper .menu-item:not(button):not(.active-menu-item):hover{background-color:var(--base-70)!important}[_nghost-%COMP%]     .menu-list-wrapper .menu-item.active-menu-item, [_nghost-%COMP%]     .menu-list-wrapper .menu-item.active-menu-item mat-icon, [_nghost-%COMP%]     .menu-list-wrapper .menu-item.active-menu-item:hover{font-weight:600}[_nghost-%COMP%]     .menu-list-wrapper .menu-item span{display:inline-block}[_nghost-%COMP%]     .menu-list-wrapper .menu-item .menu-item-title{display:flex;flex-direction:row;align-items:start;width:100%}[_nghost-%COMP%]     .menu-list-wrapper .menu-item .menu-item-title .title-content{width:100%;text-align:start;display:block}[_nghost-%COMP%]     .menu-list-wrapper .menu-item .menu-item-title .title-content:before{display:block;content:attr(content);font-weight:600;height:0;overflow:hidden;visibility:hidden}.child-list[_nghost-%COMP%]{margin-bottom:1rem}.child-list[_nghost-%COMP%]   .menu-item[_ngcontent-%COMP%] + .menu-item[_ngcontent-%COMP%]{margin-top:.5rem}  .menu-tooltip{left:.625rem;font-family:Roboto;font-style:normal;font-weight:400;font-size:.75rem;line-height:1.25rem;color:var(--base-70);border-radius:.25rem;position:relative}  .menu-tooltip:after{width:0;height:0;content:\"\";position:absolute;border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-bottom:.5rem solid var(--menu-border-dark-color);left:-.75rem;top:calc(50% - .25rem);transform:rotate(270deg);overflow:initial}.menu-item-list-title[_ngcontent-%COMP%]{padding:8px 0 24px;font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;margin-left:20px;height:56px}.menu-item-list-title[_ngcontent-%COMP%]:has(.menu-title-btn){margin-left:0}  lib-menu-lang-switcher, .menu-item-list[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_slide-in .3s forwards}  lib-menu-lang-switcher, .menu-title-btn[_ngcontent-%COMP%]{margin-right:2px;transition:opacity .3s}.arrow-icon[_ngcontent-%COMP%]{margin-right:-6px}@keyframes _ngcontent-%COMP%_slide-in{0%{opacity:0;margin-left:-100px}to{opacity:1;margin-left:0}}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuItemListComponent, [{
         type: Component,
-        args: [{ selector: 'menu-item-list', template: "<div class=\"menu-list-wrapper\">\r\n  @if (titleKey && showTitle && labelsVisible && !menuItemGroup.itemGroupClick) {\r\n    <div  fxLayoutAlign=\"start center\" class=\"menu-item-list-title\">\r\n      <mat-icon class=\"menu-title-btn\" *ngIf=\"menuItemGroup.titleIcon\">{{menuItemGroup.titleIcon}}</mat-icon>\r\n      \r\n      <button class=\"menu-title-btn\" *ngIf=\"menuItemGroup.titleNavigation\" mat-icon-button [routerLink]=\"menuItemGroup.titleNavigation.path\" [matTooltip]=\"menuItemGroup.titleNavigation?.tooltip ?? '' | translate\">\r\n        <mat-icon>{{menuItemGroup.titleNavigation.icon}}</mat-icon>\r\n      </button>\r\n      \r\n      {{ titleKey | translate }}\r\n    </div>\r\n  } @else if (menuItemGroup?.itemGroupClick) {\r\n    <ng-container *ngTemplateOutlet=\"itemGroupButton\">\r\n    </ng-container>\r\n  }\r\n    <div fxLayout=\"column\" [fxLayoutAlign]=\"menuLayoutDirection\" class=\"menu-item-list\">\r\n      <ng-container *ngFor=\"let menuItem of items\">\r\n      <ng-container\r\n        *ngTemplateOutlet=\"!menuItem.showChildren || !menuItem.children || menuItem?.children?.length === 0 ? (menuItem.clickAction ? menuItemBtn : menuItemLink) : itemWithChildren; context: {menuItem: menuItem}\">\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #itemWithChildren let-menuItem=\"menuItem\">\r\n  <button [attr.id]=\"menuItem.customId\" [ngClass.lt-md]=\"'mob-menu-item'\" [fxLayout]=\"menuItemLayout\" class=\"text-m menu-item\"\r\n    [matTooltip]=\"!labelsVisible ? (menuItem.title | translate) : ''\" matTooltipPosition=\"after\" [class.menu-labels-visible]=\"labelsVisible\"\r\n    [fxLayoutAlign]=\"menuLayoutDirection\" matTooltipClass=\"menu-tooltip\"\r\n    [class.active-menu-item]=\"activeItem?.link && menuItem === activeItem\" (click)=\"toggleItemExpand($event,menuItem)\">\r\n    <ng-container *ngIf=\"showIcons && menuItem.icon\">\r\n      <tld-menu-icon  [menuItem]=\"menuItem\"></tld-menu-icon>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"labelsVisible\">\r\n      <span class=\"menu-item-title\">\r\n        <span class=\"title-content\">{{ menuItem.title | translate }}</span></span>\r\n        <ng-container *ngIf=\"menuItem.showChildren && menuItem.children\">\r\n          <span *ngIf=\"menuItem.expanded; else iconDown\" class=\"material-icons spin arrow-icon\">\r\n            keyboard_arrow_down\r\n          </span>\r\n\r\n          <ng-template #iconDown>\r\n            <span class=\"material-icons spin arrow-icon\">\r\n              keyboard_arrow_up\r\n            </span>\r\n          </ng-template>\r\n        </ng-container>\r\n     \r\n    </ng-container>\r\n  </button>\r\n  <ng-container *ngIf=\"menuItem.showChildren && menuItem.expanded && labelsVisible\">\r\n    <menu-item-list class=\"child-list\" *ngIf=\"menuItem.children && menuItem.children.length\" [items]=\"menuItem.children\"\r\n      [direction]=\"direction\" [labelsVisible]=\"labelsVisible\" [activeItem]=\"activeItem\">\r\n    </menu-item-list>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #menuItemLink let-menuItem=\"menuItem\">\r\n  <tld-menu-item-link [ngClass.lt-md]=\"'mob-menu-item'\" [menuItem]=\"menuItem\" [direction]=\"direction\" [labelsVisible]=\"labelsVisible\"\r\n    [activeItem]=\"activeItem\" [showIcons]=\"showIcons\"></tld-menu-item-link>\r\n</ng-template>\r\n\r\n<ng-template #menuItemBtn let-menuItem=\"menuItem\">\r\n  <lib-menu-item-btn *ngIf=\"labelsVisible\" [ngClass.lt-md]=\"'mob-menu-item'\" [menuItem]=\"menuItem\" [direction]=\"direction\"\r\n    [activeItem]=\"activeItem\"></lib-menu-item-btn>\r\n</ng-template>\r\n\r\n<ng-template #itemGroupButton>\r\n  <button \r\n    class=\"menu-title-btn menu-action-button\"\r\n    mat-button\r\n    *ngIf=\"menuItemGroup && labelsVisible\"\r\n    (click)=\"menuItemGroup?.itemGroupClick()\"\r\n  >\r\n    <mat-icon>{{ menuItemGroup.itemGroupIcon }}</mat-icon>\r\n    <span class=\"btn-label\" *ngIf=\"titleKey\">\r\n      {{ titleKey | translate }}\r\n    </span>\r\n  </button>\r\n\r\n  <button \r\n    mat-icon-button\r\n    *ngIf=\"menuItemGroup && !labelsVisible && titleKey && menuItemGroup.itemGroupIcon\"\r\n    (click)=\"menuItemGroup?.itemGroupClick()\"\r\n    [matTooltip]=\"titleKey | translate\"\r\n    matTooltipPosition=\"after\"\r\n  >\r\n    <mat-icon>{{ menuItemGroup.itemGroupIcon }}</mat-icon>\r\n  </button>\r\n</ng-template>", styles: [":host{display:inline-block}.menu-item{width:100%}::ng-deep .collapsed .menu-item-list{display:flex!important;justify-content:center!important;align-items:center!important}::ng-deep .collapsed .menu-list-wrapper,::ng-deep .collapsed tld-menu-item-link{display:flex!important;justify-content:center!important}::ng-deep .collapsed .menu-item{display:flex!important;place-content:center center!important}::ng-deep .collapsed tld-menu-item-link:not(:first-child){margin-top:16px!important}.menu-action-button{justify-content:flex-start;align-items:center;max-width:100%;width:-webkit-fill-available}:host ::ng-deep .menu-list-wrapper .menu-item{cursor:pointer;font-style:normal;color:var(--base-30);text-decoration:none;align-items:center!important;font-weight:400;background:none;border:none}:host ::ng-deep .menu-list-wrapper .menu-item:not(button):not(.active-menu-item):hover{background-color:var(--base-70)!important}:host ::ng-deep .menu-list-wrapper .menu-item.active-menu-item,:host ::ng-deep .menu-list-wrapper .menu-item.active-menu-item mat-icon,:host ::ng-deep .menu-list-wrapper .menu-item.active-menu-item:hover{font-weight:600}:host ::ng-deep .menu-list-wrapper .menu-item span{display:inline-block}:host ::ng-deep .menu-list-wrapper .menu-item .menu-item-title{display:flex;flex-direction:row;align-items:start;width:100%}:host ::ng-deep .menu-list-wrapper .menu-item .menu-item-title .title-content{width:100%;text-align:start;display:block}:host ::ng-deep .menu-list-wrapper .menu-item .menu-item-title .title-content:before{display:block;content:attr(content);font-weight:600;height:0;overflow:hidden;visibility:hidden}:host.child-list{margin-bottom:1rem}:host.child-list .menu-item+.menu-item{margin-top:.5rem}::ng-deep .menu-tooltip{left:.625rem;font-family:Roboto;font-style:normal;font-weight:400;font-size:.75rem;line-height:1.25rem;color:var(--base-70);border-radius:.25rem;position:relative}::ng-deep .menu-tooltip:after{width:0;height:0;content:\"\";position:absolute;border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-bottom:.5rem solid var(--menu-border-dark-color);left:-.75rem;top:calc(50% - .25rem);transform:rotate(270deg);overflow:initial}.menu-item-list-title{padding:8px 0 24px;font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;margin-left:20px;height:56px}.menu-item-list-title:has(.menu-title-btn){margin-left:0}::ng-deep lib-menu-lang-switcher,.menu-item-list{animation:slide-in .3s forwards}::ng-deep lib-menu-lang-switcher,.menu-title-btn{margin-right:2px;transition:opacity .3s}.spin{animation:spinArrow .3s forwards}.arrow-icon{margin-right:-6px}@keyframes slide-in{0%{opacity:0;margin-left:-100px}to{opacity:1;margin-left:0}}@keyframes spinArrow{to{transform:rotate(180deg)}}\n"] }]
+        args: [{ selector: 'menu-item-list', template: "<div class=\"menu-list-wrapper\">\r\n  @if (titleKey && showTitle && labelsVisible && !menuItemGroup.itemGroupClick) {\r\n    <div  fxLayoutAlign=\"start center\" class=\"menu-item-list-title\">\r\n      <mat-icon class=\"menu-title-btn\" *ngIf=\"menuItemGroup.titleIcon\">{{menuItemGroup.titleIcon}}</mat-icon>\r\n      \r\n      <button class=\"menu-title-btn\" *ngIf=\"menuItemGroup.titleNavigation\" mat-icon-button [routerLink]=\"menuItemGroup.titleNavigation.path\" [matTooltip]=\"menuItemGroup.titleNavigation?.tooltip ?? '' | translate\">\r\n        <mat-icon>{{menuItemGroup.titleNavigation.icon}}</mat-icon>\r\n      </button>\r\n      \r\n      {{ titleKey | translate }}\r\n    </div>\r\n  } @else if (menuItemGroup?.itemGroupClick) {\r\n    <ng-container *ngTemplateOutlet=\"itemGroupButton\">\r\n    </ng-container>\r\n  }\r\n    <div fxLayout=\"column\" [fxLayoutAlign]=\"menuLayoutDirection\" class=\"menu-item-list\">\r\n      <ng-container *ngFor=\"let menuItem of items\">\r\n      <ng-container\r\n        *ngTemplateOutlet=\"!menuItem.showChildren || !menuItem.children || menuItem?.children?.length === 0 ? (menuItem.clickAction ? menuItemBtn : menuItemLink) : itemWithChildren; context: {menuItem: menuItem}\">\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #itemWithChildren let-menuItem=\"menuItem\">\r\n  <button [attr.id]=\"menuItem.customId\" [ngClass.lt-md]=\"'mob-menu-item'\" [fxLayout]=\"menuItemLayout\" class=\"text-m menu-item\"\r\n    [matTooltip]=\"!labelsVisible ? (menuItem.title | translate) : ''\" matTooltipPosition=\"after\" [class.menu-labels-visible]=\"labelsVisible\"\r\n    [fxLayoutAlign]=\"menuLayoutDirection\" matTooltipClass=\"menu-tooltip\"\r\n    [class.active-menu-item]=\"activeItem?.link && menuItem === activeItem\" (click)=\"toggleItemExpand($event,menuItem)\">\r\n    <ng-container *ngIf=\"showIcons && menuItem.icon\">\r\n      <tld-menu-icon  [menuItem]=\"menuItem\"></tld-menu-icon>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"labelsVisible\">\r\n      <span class=\"menu-item-title\">\r\n        <span class=\"title-content\">{{ menuItem.title | translate }}</span></span>\r\n        <ng-container *ngIf=\"menuItem.showChildren && menuItem.children\">\r\n          <span *ngIf=\"menuItem.expanded; else iconDown\" class=\"material-icons spin arrow-icon\">\r\n            keyboard_arrow_down\r\n          </span>\r\n\r\n          <ng-template #iconDown>\r\n            <span class=\"material-icons spin arrow-icon\">\r\n              keyboard_arrow_up\r\n            </span>\r\n          </ng-template>\r\n        </ng-container>\r\n     \r\n    </ng-container>\r\n  </button>\r\n  <ng-container *ngIf=\"menuItem.showChildren && menuItem.expanded && labelsVisible\">\r\n    <menu-item-list class=\"child-list\" *ngIf=\"menuItem.children && menuItem.children.length\" [items]=\"menuItem.children\"\r\n      [direction]=\"direction\" [labelsVisible]=\"labelsVisible\" [activeItem]=\"activeItem\">\r\n    </menu-item-list>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #menuItemLink let-menuItem=\"menuItem\">\r\n  <tld-menu-item-link [ngClass.lt-md]=\"'mob-menu-item'\" [menuItem]=\"menuItem\" [direction]=\"direction\" [labelsVisible]=\"labelsVisible\"\r\n    [activeItem]=\"activeItem\" [showIcons]=\"showIcons\"></tld-menu-item-link>\r\n</ng-template>\r\n\r\n<ng-template #menuItemBtn let-menuItem=\"menuItem\">\r\n  <lib-menu-item-btn *ngIf=\"labelsVisible\" [ngClass.lt-md]=\"'mob-menu-item'\" [menuItem]=\"menuItem\" [direction]=\"direction\"\r\n    [activeItem]=\"activeItem\"></lib-menu-item-btn>\r\n</ng-template>\r\n\r\n<ng-template #itemGroupButton>\r\n  <button \r\n    class=\"menu-title-btn menu-action-button\"\r\n    mat-button\r\n    *ngIf=\"menuItemGroup && labelsVisible\"\r\n    (click)=\"menuItemGroup?.itemGroupClick()\"\r\n  >\r\n    <mat-icon>{{ menuItemGroup.itemGroupIcon }}</mat-icon>\r\n    <span class=\"btn-label\" *ngIf=\"titleKey\">\r\n      {{ titleKey | translate }}\r\n    </span>\r\n  </button>\r\n\r\n  <button \r\n    mat-icon-button\r\n    *ngIf=\"menuItemGroup && !labelsVisible && titleKey && menuItemGroup.itemGroupIcon\"\r\n    (click)=\"menuItemGroup?.itemGroupClick()\"\r\n    [matTooltip]=\"titleKey | translate\"\r\n    matTooltipPosition=\"after\"\r\n  >\r\n    <mat-icon>{{ menuItemGroup.itemGroupIcon }}</mat-icon>\r\n  </button>\r\n</ng-template>", styles: [".spin{animation:spinArrow .3s forwards}@keyframes spinArrow{to{transform:rotate(180deg)}}:host{display:inline-block}.menu-item{width:100%}::ng-deep .collapsed .menu-item-list{display:flex!important;justify-content:center!important;align-items:center!important}::ng-deep .collapsed .menu-list-wrapper,::ng-deep .collapsed tld-menu-item-link{display:flex!important;justify-content:center!important}::ng-deep .collapsed .menu-item{display:flex!important;place-content:center center!important}::ng-deep .collapsed tld-menu-item-link:not(:first-child){margin-top:16px!important}.menu-action-button{justify-content:flex-start;align-items:center;max-width:100%;width:-webkit-fill-available}:host ::ng-deep .menu-list-wrapper .menu-item{cursor:pointer;font-style:normal;color:var(--base-30);text-decoration:none;align-items:center!important;font-weight:400;background:none;border:none}:host ::ng-deep .menu-list-wrapper .menu-item:not(button):not(.active-menu-item):hover{background-color:var(--base-70)!important}:host ::ng-deep .menu-list-wrapper .menu-item.active-menu-item,:host ::ng-deep .menu-list-wrapper .menu-item.active-menu-item mat-icon,:host ::ng-deep .menu-list-wrapper .menu-item.active-menu-item:hover{font-weight:600}:host ::ng-deep .menu-list-wrapper .menu-item span{display:inline-block}:host ::ng-deep .menu-list-wrapper .menu-item .menu-item-title{display:flex;flex-direction:row;align-items:start;width:100%}:host ::ng-deep .menu-list-wrapper .menu-item .menu-item-title .title-content{width:100%;text-align:start;display:block}:host ::ng-deep .menu-list-wrapper .menu-item .menu-item-title .title-content:before{display:block;content:attr(content);font-weight:600;height:0;overflow:hidden;visibility:hidden}:host.child-list{margin-bottom:1rem}:host.child-list .menu-item+.menu-item{margin-top:.5rem}::ng-deep .menu-tooltip{left:.625rem;font-family:Roboto;font-style:normal;font-weight:400;font-size:.75rem;line-height:1.25rem;color:var(--base-70);border-radius:.25rem;position:relative}::ng-deep .menu-tooltip:after{width:0;height:0;content:\"\";position:absolute;border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-bottom:.5rem solid var(--menu-border-dark-color);left:-.75rem;top:calc(50% - .25rem);transform:rotate(270deg);overflow:initial}.menu-item-list-title{padding:8px 0 24px;font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;margin-left:20px;height:56px}.menu-item-list-title:has(.menu-title-btn){margin-left:0}::ng-deep lib-menu-lang-switcher,.menu-item-list{animation:slide-in .3s forwards}::ng-deep lib-menu-lang-switcher,.menu-title-btn{margin-right:2px;transition:opacity .3s}.arrow-icon{margin-right:-6px}@keyframes slide-in{0%{opacity:0;margin-left:-100px}to{opacity:1;margin-left:0}}\n"] }]
     }], null, { direction: [{
             type: Input
         }], labelsVisible: [{
@@ -1238,11 +1238,11 @@ class MenuProfileComponent {
             i0.ɵɵproperty("ngIf", !ctx.collapsed);
             i0.ɵɵadvance(3);
             i0.ɵɵrepeater(ctx.userOptions);
-        } }, dependencies: [i1$1.RouterLink, i3.NgIf, i3.NgTemplateOutlet, i2$1.MatIcon, i6.MatMenu, i6.MatMenuItem, i6.MatMenuTrigger, i8.TranslatePipe], styles: ["a[_ngcontent-%COMP%]{text-decoration:none}.profile[_ngcontent-%COMP%]{position:relative;margin-top:100px}.profile-wrapper[_ngcontent-%COMP%]{background:none;color:var(--base-30);display:flex;align-items:center;justify-content:start;width:100%;position:absolute;bottom:0;margin:32px 0}.profile-icon[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;min-width:40px;height:40px;border-radius:100%;color:var(--base-0);background-color:var(--base-70);font-size:16px;font-weight:600}.profile-name[_ngcontent-%COMP%]{max-width:145px;overflow:hidden;margin-left:12px;text-overflow:ellipsis}.profile-option-icon[_ngcontent-%COMP%]{vertical-align:middle;margin:0 5px 5px 0}.profile-arrow[_ngcontent-%COMP%]{position:absolute;right:0;margin-right:8px}.mobile[_ngcontent-%COMP%]   .profile-arrow[_ngcontent-%COMP%]{margin-right:20px}.spin[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_spinArrow .3s forwards}  .profile-menu a{font-weight:400!important;display:flex;align-items:center;gap:5px}  .profile-menu a:hover{color:var(--mat-menu-item-label-text-color, var(--mat-app-on-surface))!important;text-decoration:inherit}@keyframes _ngcontent-%COMP%_spinArrow{to{transform:rotate(180deg)}}"] }); }
+        } }, dependencies: [i1$1.RouterLink, i3.NgIf, i3.NgTemplateOutlet, i2$1.MatIcon, i6.MatMenu, i6.MatMenuItem, i6.MatMenuTrigger, i8.TranslatePipe], styles: [".spin[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_spinArrow .3s forwards}@keyframes _ngcontent-%COMP%_spinArrow{to{transform:rotate(180deg)}}a[_ngcontent-%COMP%]{text-decoration:none}.profile[_ngcontent-%COMP%]{position:relative;margin-top:100px}.profile-wrapper[_ngcontent-%COMP%]{background:none;color:var(--base-30);display:flex;align-items:center;justify-content:start;width:100%;position:absolute;bottom:0;margin:32px 0}.profile-icon[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;min-width:40px;height:40px;border-radius:100%;color:var(--base-0);background-color:var(--base-70);font-size:16px;font-weight:600}.profile-name[_ngcontent-%COMP%]{max-width:145px;overflow:hidden;margin-left:12px;text-overflow:ellipsis}.profile-option-icon[_ngcontent-%COMP%]{vertical-align:middle;margin:0 5px 5px 0}.profile-arrow[_ngcontent-%COMP%]{position:absolute;right:0;margin-right:8px}.mobile[_ngcontent-%COMP%]   .profile-arrow[_ngcontent-%COMP%]{margin-right:20px}  .profile-menu a{font-weight:400!important;display:flex;align-items:center;gap:5px}  .profile-menu a:hover{color:var(--mat-menu-item-label-text-color, var(--mat-app-on-surface))!important;text-decoration:inherit}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuProfileComponent, [{
         type: Component,
-        args: [{ selector: 'lib-menu-profile', template: "<div class=\"profile\">\r\n  <button #state=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu\" class=\"profile-wrapper\">\r\n    <div class=\"profile-icon\">\r\n      @if (userInitials) {\r\n        {{userInitials}}\r\n      } @else {\r\n        <mat-icon>person</mat-icon>\r\n      }\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"!collapsed\">\r\n      <span class=\"profile-name\">\r\n        {{ username ?? 'MENU.ANONYMOUS' | translate }}\r\n      </span>\r\n\r\n      <mat-icon *ngIf=\"state.menuOpen; else iconDown\" class=\"profile-arrow spin\">keyboard_arrow_down</mat-icon>\r\n\r\n      <ng-template #iconDown>\r\n        <mat-icon class=\"profile-arrow spin\">keyboard_arrow_up</mat-icon>\r\n      </ng-template>\r\n    </ng-container>\r\n  </button>\r\n\r\n  <mat-menu #menu=\"matMenu\" class=\"profile-menu\">\r\n    @for (item of userOptions; track item.label) {\r\n      @if (item.link) {\r\n        @if (item.link.isExternal) {\r\n          <a class=\"mat-mdc-menu-item\" [href]=\"item.link.href\" target=\"_blank\" (click)=\"linkCallback(item.link)\">\r\n            <ng-container\r\n              *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, label: item.label }\">\r\n            </ng-container>\r\n          </a>\r\n        } @else {\r\n          <a class=\"mat-mdc-menu-item\" [routerLink]=\"item.link.href\" (click)=\"linkCallback(item.link)\">\r\n            <ng-container\r\n              *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, label: item.label }\">\r\n            </ng-container>\r\n          </a>\r\n        }\r\n      } @else {\r\n        <button\r\n          mat-menu-item\r\n          class=\"profile-option\"\r\n          (click)=\"item.button?.callback()\"\r\n      >\r\n        <ng-container\r\n          *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, label: item.label }\">\r\n        </ng-container>\r\n      </button>\r\n      }\r\n    }\r\n  </mat-menu>\r\n</div>\r\n\r\n<ng-template #profileMenuItem let-icon=\"icon\" let-label=\"label\">\r\n  @if (icon) {\r\n    @if (!icon?.isCustom) {\r\n      <span class=\"material-icons profile-option-icon\" [class.material-icons-outlined]=\"icon?.isOutlined\">\r\n        {{icon?.name}}\r\n      </span>\r\n    } @else {\r\n      <mat-icon class=\"profile-option-icon\" [svgIcon]=\"icon?.name\"></mat-icon>\r\n    }\r\n  }\r\n  {{ label | translate }}\r\n</ng-template>", styles: ["a{text-decoration:none}.profile{position:relative;margin-top:100px}.profile-wrapper{background:none;color:var(--base-30);display:flex;align-items:center;justify-content:start;width:100%;position:absolute;bottom:0;margin:32px 0}.profile-icon{display:flex;justify-content:center;align-items:center;min-width:40px;height:40px;border-radius:100%;color:var(--base-0);background-color:var(--base-70);font-size:16px;font-weight:600}.profile-name{max-width:145px;overflow:hidden;margin-left:12px;text-overflow:ellipsis}.profile-option-icon{vertical-align:middle;margin:0 5px 5px 0}.profile-arrow{position:absolute;right:0;margin-right:8px}.mobile .profile-arrow{margin-right:20px}.spin{animation:spinArrow .3s forwards}::ng-deep .profile-menu a{font-weight:400!important;display:flex;align-items:center;gap:5px}::ng-deep .profile-menu a:hover{color:var(--mat-menu-item-label-text-color, var(--mat-app-on-surface))!important;text-decoration:inherit}@keyframes spinArrow{to{transform:rotate(180deg)}}\n"] }]
+        args: [{ selector: 'lib-menu-profile', template: "<div class=\"profile\">\r\n  <button #state=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu\" class=\"profile-wrapper\">\r\n    <div class=\"profile-icon\">\r\n      @if (userInitials) {\r\n        {{userInitials}}\r\n      } @else {\r\n        <mat-icon>person</mat-icon>\r\n      }\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"!collapsed\">\r\n      <span class=\"profile-name\">\r\n        {{ username ?? 'MENU.ANONYMOUS' | translate }}\r\n      </span>\r\n\r\n      <mat-icon *ngIf=\"state.menuOpen; else iconDown\" class=\"profile-arrow spin\">keyboard_arrow_down</mat-icon>\r\n\r\n      <ng-template #iconDown>\r\n        <mat-icon class=\"profile-arrow spin\">keyboard_arrow_up</mat-icon>\r\n      </ng-template>\r\n    </ng-container>\r\n  </button>\r\n\r\n  <mat-menu #menu=\"matMenu\" class=\"profile-menu\">\r\n    @for (item of userOptions; track item.label) {\r\n      @if (item.link) {\r\n        @if (item.link.isExternal) {\r\n          <a class=\"mat-mdc-menu-item\" [href]=\"item.link.href\" target=\"_blank\" (click)=\"linkCallback(item.link)\">\r\n            <ng-container\r\n              *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, label: item.label }\">\r\n            </ng-container>\r\n          </a>\r\n        } @else {\r\n          <a class=\"mat-mdc-menu-item\" [routerLink]=\"item.link.href\" (click)=\"linkCallback(item.link)\">\r\n            <ng-container\r\n              *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, label: item.label }\">\r\n            </ng-container>\r\n          </a>\r\n        }\r\n      } @else {\r\n        <button\r\n          mat-menu-item\r\n          class=\"profile-option\"\r\n          (click)=\"item.button?.callback()\"\r\n      >\r\n        <ng-container\r\n          *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, label: item.label }\">\r\n        </ng-container>\r\n      </button>\r\n      }\r\n    }\r\n  </mat-menu>\r\n</div>\r\n\r\n<ng-template #profileMenuItem let-icon=\"icon\" let-label=\"label\">\r\n  @if (icon) {\r\n    @if (!icon?.isCustom) {\r\n      <span class=\"material-icons profile-option-icon\" [class.material-icons-outlined]=\"icon?.isOutlined\">\r\n        {{icon?.name}}\r\n      </span>\r\n    } @else {\r\n      <mat-icon class=\"profile-option-icon\" [svgIcon]=\"icon?.name\"></mat-icon>\r\n    }\r\n  }\r\n  {{ label | translate }}\r\n</ng-template>", styles: [".spin{animation:spinArrow .3s forwards}@keyframes spinArrow{to{transform:rotate(180deg)}}a{text-decoration:none}.profile{position:relative;margin-top:100px}.profile-wrapper{background:none;color:var(--base-30);display:flex;align-items:center;justify-content:start;width:100%;position:absolute;bottom:0;margin:32px 0}.profile-icon{display:flex;justify-content:center;align-items:center;min-width:40px;height:40px;border-radius:100%;color:var(--base-0);background-color:var(--base-70);font-size:16px;font-weight:600}.profile-name{max-width:145px;overflow:hidden;margin-left:12px;text-overflow:ellipsis}.profile-option-icon{vertical-align:middle;margin:0 5px 5px 0}.profile-arrow{position:absolute;right:0;margin-right:8px}.mobile .profile-arrow{margin-right:20px}::ng-deep .profile-menu a{font-weight:400!important;display:flex;align-items:center;gap:5px}::ng-deep .profile-menu a:hover{color:var(--mat-menu-item-label-text-color, var(--mat-app-on-surface))!important;text-decoration:inherit}\n"] }]
     }], null, { collapsed: [{
             type: Input
         }], username: [{
@@ -1339,11 +1339,11 @@ class MenuLangSwitcherComponent {
             i0.ɵɵconditional(!ctx.isCollapsed ? 7 : -1);
             i0.ɵɵadvance(3);
             i0.ɵɵrepeater(ctx.languages);
-        } }, dependencies: [i5.MatTooltip, i2$1.MatIcon, i6.MatMenu, i6.MatMenuItem, i6.MatMenuTrigger, i8.TranslatePipe, i2.LanguageTranslatePipe], styles: ["span[_ngcontent-%COMP%]{font-size:14px}.lang-switcher[_ngcontent-%COMP%]{white-space:nowrap;overflow:hidden;display:flex;align-items:center;color:var(--base-40);background:none;width:100%;padding:16px 8px 16px 18px;border-radius:5px}.lang-switcher.active[_ngcontent-%COMP%], .lang-switcher[_ngcontent-%COMP%]:hover{background-color:var(--base-70)}.collapsed[_ngcontent-%COMP%]{padding:0;min-width:40px;height:40px;border-radius:50%;margin-top:10px;justify-content:center;width:100%;margin-left:-6px}.current-lang[_ngcontent-%COMP%]{display:flex;align-items:center;width:100%;gap:12px}.collapsed[_ngcontent-%COMP%]   .current-lang[_ngcontent-%COMP%]{justify-content:center;width:100%}.spin[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_spinArrow .3s forwards}@keyframes _ngcontent-%COMP%_spinArrow{to{transform:rotate(180deg)}}"] }); }
+        } }, dependencies: [i5.MatTooltip, i2$1.MatIcon, i6.MatMenu, i6.MatMenuItem, i6.MatMenuTrigger, i8.TranslatePipe, i2.LanguageTranslatePipe], styles: [".spin[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_spinArrow .3s forwards}@keyframes _ngcontent-%COMP%_spinArrow{to{transform:rotate(180deg)}}span[_ngcontent-%COMP%]{font-size:14px}.lang-switcher[_ngcontent-%COMP%]{white-space:nowrap;overflow:hidden;display:flex;align-items:center;color:var(--base-30);background:none;width:100%;padding:16px 8px 16px 18px;border-radius:5px}.lang-switcher.active[_ngcontent-%COMP%], .lang-switcher[_ngcontent-%COMP%]:hover{background-color:var(--base-70)}.collapsed[_ngcontent-%COMP%]{padding:0;min-width:40px;height:40px;border-radius:50%;margin-top:10px;justify-content:center;width:100%;margin-left:-6px}.current-lang[_ngcontent-%COMP%]{display:flex;align-items:center;width:100%;gap:12px}.collapsed[_ngcontent-%COMP%]   .current-lang[_ngcontent-%COMP%]{justify-content:center;width:100%}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuLangSwitcherComponent, [{
         type: Component,
-        args: [{ selector: 'lib-menu-lang-switcher', template: "<button\r\n  [class.collapsed]=\"isCollapsed\"\r\n  #state=\"matMenuTrigger\"\r\n  [matMenuTriggerFor]=\"menu\"\r\n  [matTooltip]=\"isCollapsed ? ('MENU.CHANGE_LANGUAGE' | translate) : ''\"\r\n  matTooltipPosition=\"after\"\r\n  matTooltipClass=\"menu-tooltip\" \r\n  class=\"lang-switcher\"\r\n  [class.active]=\"state.menuOpen\"\r\n>\r\n<div class=\"current-lang\">\r\n  <mat-icon class=\"lang-icon\">language</mat-icon>\r\n\r\n  @if (!isCollapsed) {\r\n    <span>\r\n      {{ currentLanguageCode | languageTranslate }}\r\n    </span>\r\n  }\r\n</div>\r\n\r\n  @if (!isCollapsed) {\r\n    @if (state.menuOpen) {\r\n      <mat-icon class=\"menu-arrow spin\">keyboard_arrow_down</mat-icon>\r\n      } @else {\r\n      <mat-icon class=\"menu-arrow spin\">keyboard_arrow_up</mat-icon>\r\n      }\r\n  }\r\n</button>\r\n\r\n<mat-menu #menu=\"matMenu\" class=\"lang-menu\">\r\n  @for (lang of languages; track lang) {\r\n    @if (lang !== currentLanguageCode) {\r\n      <button mat-menu-item class=\"profile-option\" (click)=\"changeLanguage(lang)\">\r\n        {{ lang | languageTranslate }}\r\n      </button>\r\n    }\r\n  }\r\n</mat-menu>\r\n", styles: ["span{font-size:14px}.lang-switcher{white-space:nowrap;overflow:hidden;display:flex;align-items:center;color:var(--base-40);background:none;width:100%;padding:16px 8px 16px 18px;border-radius:5px}.lang-switcher.active,.lang-switcher:hover{background-color:var(--base-70)}.collapsed{padding:0;min-width:40px;height:40px;border-radius:50%;margin-top:10px;justify-content:center;width:100%;margin-left:-6px}.current-lang{display:flex;align-items:center;width:100%;gap:12px}.collapsed .current-lang{justify-content:center;width:100%}.spin{animation:spinArrow .3s forwards}@keyframes spinArrow{to{transform:rotate(180deg)}}\n"] }]
+        args: [{ selector: 'lib-menu-lang-switcher', template: "<button\r\n  [class.collapsed]=\"isCollapsed\"\r\n  #state=\"matMenuTrigger\"\r\n  [matMenuTriggerFor]=\"menu\"\r\n  [matTooltip]=\"isCollapsed ? ('MENU.CHANGE_LANGUAGE' | translate) : ''\"\r\n  matTooltipPosition=\"after\"\r\n  matTooltipClass=\"menu-tooltip\" \r\n  class=\"lang-switcher\"\r\n  [class.active]=\"state.menuOpen\"\r\n>\r\n<div class=\"current-lang\">\r\n  <mat-icon class=\"lang-icon\">language</mat-icon>\r\n\r\n  @if (!isCollapsed) {\r\n    <span>\r\n      {{ currentLanguageCode | languageTranslate }}\r\n    </span>\r\n  }\r\n</div>\r\n\r\n  @if (!isCollapsed) {\r\n    @if (state.menuOpen) {\r\n      <mat-icon class=\"menu-arrow spin\">keyboard_arrow_down</mat-icon>\r\n      } @else {\r\n      <mat-icon class=\"menu-arrow spin\">keyboard_arrow_up</mat-icon>\r\n      }\r\n  }\r\n</button>\r\n\r\n<mat-menu #menu=\"matMenu\" class=\"lang-menu\">\r\n  @for (lang of languages; track lang) {\r\n    @if (lang !== currentLanguageCode) {\r\n      <button mat-menu-item class=\"profile-option\" (click)=\"changeLanguage(lang)\">\r\n        {{ lang | languageTranslate }}\r\n      </button>\r\n    }\r\n  }\r\n</mat-menu>\r\n", styles: [".spin{animation:spinArrow .3s forwards}@keyframes spinArrow{to{transform:rotate(180deg)}}span{font-size:14px}.lang-switcher{white-space:nowrap;overflow:hidden;display:flex;align-items:center;color:var(--base-30);background:none;width:100%;padding:16px 8px 16px 18px;border-radius:5px}.lang-switcher.active,.lang-switcher:hover{background-color:var(--base-70)}.collapsed{padding:0;min-width:40px;height:40px;border-radius:50%;margin-top:10px;justify-content:center;width:100%;margin-left:-6px}.current-lang{display:flex;align-items:center;width:100%;gap:12px}.collapsed .current-lang{justify-content:center;width:100%}\n"] }]
     }], null, { isCollapsed: [{
             type: Input
         }], languages: [{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tilde-nlp/ngx-menu",
-  "version": "6.1.45",
+  "version": "6.1.46",
   "peerDependencies": {
     "@angular/common": "^18.0.0",
     "@angular/core": "^18.0.0",