@tilde-nlp/ngx-menu 6.0.8 → 6.0.9

package/esm2022/lib/components/side-nav-menu/side-nav-menu.component.mjs

@@ -211,11 +211,11 @@ export class SideNavMenuComponent extends NavBaseComponent {
             i0.ɵɵproperty("ngIf", ctx.userInitials);
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngForOf", ctx.menuSettings.userOptions);
-        } }, dependencies: [i4.DefaultLayoutDirective, i4.DefaultLayoutAlignDirective, i4.FlexFillDirective, i4.DefaultFlexDirective, i5.NgForOf, i5.NgIf, i6.MatIcon, i7.MatIconButton, i8.MatMenu, i8.MatMenuItem, i8.MatMenuTrigger, i2.PlausibleEventDirective, i9.MenuColumnsComponent, i10.TranslatePipe], styles: [".menu-container[_ngcontent-%COMP%]{white-space:nowrap;height:100%;transition:width .2s ease;min-height:100vh;overflow:auto;background:var(--base-100);border-right:2px solid var(--base-95)}.menu-container[_ngcontent-%COMP%]   .menu-container-header[_ngcontent-%COMP%]{margin:24px 0;max-height:40px}.menu-container.collapsed[_ngcontent-%COMP%]   .menu-container-header[_ngcontent-%COMP%]{margin:24px 0 32px!important}.menu-container[_ngcontent-%COMP%]   .content[_ngcontent-%COMP%]:not(.collapsed){overflow-x:hidden;padding:0 12px}.menu-container[_ngcontent-%COMP%]   .content[_ngcontent-%COMP%]:not(.collapsed)   .menu-logo[_ngcontent-%COMP%]{margin-left:16px;max-width:100%}.menu-container[_ngcontent-%COMP%]   .divider[_ngcontent-%COMP%]{width:100%}.menu-container[_ngcontent-%COMP%]   .profile-wrapper[_ngcontent-%COMP%]{color:var(--base-30);display:flex;align-items:center;justify-content:center;margin:32px 0}.menu-container[_ngcontent-%COMP%]   .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}.menu-container[_ngcontent-%COMP%]   .profile-name[_ngcontent-%COMP%]{max-width:145px;overflow:hidden;margin-left:12px}.profile-option-icon[_ngcontent-%COMP%]{vertical-align:middle;margin:0 5px 5px 0}[_nghost-%COMP%]     .collapsed .profile-wrapper{left:8px!important}[_nghost-%COMP%]     .menu-item{display:flex;padding:16px!important;border-radius:4px!important}[_nghost-%COMP%]     .child-list .menu-item{padding:8px 16px!important}[_nghost-%COMP%]     .collapsed .menu-item{padding:0!important;width:40px;height:40px;border-radius:50%!important}[_nghost-%COMP%]     .active-menu-item{background-color:var(--base-95)!important}[_nghost-%COMP%]     .menu-item-title{margin-left:12px}tld-menu-icon[_ngcontent-%COMP%]{margin-right:10px}.spin[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_spinArrow .3s forwards}[_nghost-%COMP%]  button.collapse-btn .mat-mdc-button-persistent-ripple, [_nghost-%COMP%]  button.toggler .mat-mdc-button-persistent-ripple{display:none}  .cdk-overlay-container .profile-menu{margin:10px!important}@keyframes _ngcontent-%COMP%_spinArrow{to{transform:rotate(180deg)}}"] }); }
+        } }, dependencies: [i4.DefaultLayoutDirective, i4.DefaultLayoutAlignDirective, i4.FlexFillDirective, i4.DefaultFlexDirective, i5.NgForOf, i5.NgIf, i6.MatIcon, i7.MatIconButton, i8.MatMenu, i8.MatMenuItem, i8.MatMenuTrigger, i2.PlausibleEventDirective, i9.MenuColumnsComponent, i10.TranslatePipe], styles: [".menu-container[_ngcontent-%COMP%]{white-space:nowrap;height:100%;transition:width .2s ease;min-height:100vh;overflow:auto;background:var(--base-100);border-right:2px solid var(--base-95)}.menu-container[_ngcontent-%COMP%]   .menu-container-header[_ngcontent-%COMP%]{margin:24px 0;max-height:40px}.menu-container.collapsed[_ngcontent-%COMP%]   .menu-container-header[_ngcontent-%COMP%]{margin:24px 0 32px!important}.menu-container[_ngcontent-%COMP%]   .content[_ngcontent-%COMP%]:not(.collapsed){overflow-x:hidden;padding:0 12px}.menu-container[_ngcontent-%COMP%]   .content[_ngcontent-%COMP%]:not(.collapsed)   .menu-logo[_ngcontent-%COMP%]{margin-left:16px;max-width:100%}.menu-container[_ngcontent-%COMP%]   .divider[_ngcontent-%COMP%]{width:100%}.menu-container[_ngcontent-%COMP%]   .profile-wrapper[_ngcontent-%COMP%]{color:var(--base-30);display:flex;align-items:center;justify-content:center;margin:32px 0}.menu-container[_ngcontent-%COMP%]   .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}.menu-container[_ngcontent-%COMP%]   .profile-name[_ngcontent-%COMP%]{max-width:145px;overflow:hidden;margin-left:12px}.profile-option-icon[_ngcontent-%COMP%]{vertical-align:middle;margin:0 5px 5px 0}[_nghost-%COMP%]     .collapsed .profile-wrapper{left:8px!important}[_nghost-%COMP%]     .menu-item{display:flex;padding:16px!important;border-radius:4px!important}[_nghost-%COMP%]     .child-list .menu-item{padding:8px 46px!important}[_nghost-%COMP%]     .collapsed .menu-item{padding:0!important;width:40px;height:40px;border-radius:50%!important}[_nghost-%COMP%]     .active-menu-item{background-color:var(--base-95)!important}[_nghost-%COMP%]     .menu-item-title{margin-left:12px}tld-menu-icon[_ngcontent-%COMP%]{margin-right:10px}.spin[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_spinArrow .3s forwards}[_nghost-%COMP%]  button.collapse-btn .mat-mdc-button-persistent-ripple, [_nghost-%COMP%]  button.toggler .mat-mdc-button-persistent-ripple{display:none}  .cdk-overlay-container .profile-menu{margin:10px!important}@keyframes _ngcontent-%COMP%_spinArrow{to{transform:rotate(180deg)}}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SideNavMenuComponent, [{
         type: Component,
-        args: [{ selector: 'lib-side-nav-menu', template: "<div class=\"menu-container\" [style.width]=\"sideNavWidth\" fxLayout=\"column\" [class.collapsed]=\"collapsed\">\r\n  <div class=\"content\" fxLayout=\"column\" fxFlexFill>\r\n    <div class=\"menu-container-header\" fxLayout=\"row\" [fxLayoutAlign]=\"collapsed ? 'center center' : 'space-between center'\">\r\n      <a *ngIf=\"!collapsed\" [libPlausibleEvent]=\"LOGOCLICK_PLAUSIBLE_EVENT\" fxFlex=\"3.125em\" [href]=\"baseUrl\"\r\n        [attr.aria-label]=\"'MENU.ARIA_LABELS.LOGO' | translate\" (click)=\"logoClick($event)\" fxLayoutAlign=\"start center\"\r\n      >\r\n        <img height=\"40\" class=\"menu-logo\" [src]=\"menuLogoImage\" alt=\"logo\" />\r\n      </a>\r\n      \r\n      <button\r\n        mat-icon-button\r\n        class=\"toggler\"\r\n        [libPlausibleEvent]=\"collapsed ? EXPAND_PLAUSIBLE_EVENT : COLLAPSE_PLAUSIBLE_EVENT\"\r\n        (click)=\"toggleCollapse()\"\r\n      >\r\n        <mat-icon>{{ collapsed ? 'keyboard_double_arrow_right' : 'keyboard_double_arrow_left' }}</mat-icon>\r\n      </button>\r\n    </div>\r\n   \r\n    <div class=\"menu-wrapper\" fxLayout=\"column\" fxFlex>\r\n      <menu-columns (toggleCollapseEvent)=\"toggleCollapse()\" [direction]=\"direction\" role=\"navigation\" fxFlex [labelsVisible]=\"!collapsed\"\r\n        [active]=\"active\"></menu-columns>\r\n    </div>\r\n\r\n\r\n    <button *ngIf=\"userInitials\" #state=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu\" class=\"profile-wrapper\">\r\n      <div class=\"profile-icon\">\r\n        {{userInitials}}\r\n      </div>\r\n\r\n      <ng-container *ngIf=\"!collapsed\">\r\n        <span class=\"profile-name\">\r\n          {{ username }}\r\n        </span>\r\n  \r\n        <mat-icon *ngIf=\"state.menuOpen; else iconDown\" class=\"spin\">{{\"keyboard_arrow_down\"}}</mat-icon>\r\n\r\n        <ng-template #iconDown>\r\n          <mat-icon class=\"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      <button\r\n        mat-menu-item\r\n        class=\"profile-option\"\r\n        *ngFor=\"let item of menuSettings.userOptions\"\r\n        (click)=\"item.callback()\"\r\n      >\r\n        <span *ngIf=\"item.icon\" class=\"material-icons profile-option-icon\">{{item.icon}}</span>\r\n          {{ item.label | translate }}\r\n      </button>\r\n    </mat-menu>\r\n  </div>", styles: [".menu-container{white-space:nowrap;height:100%;transition:width .2s ease;min-height:100vh;overflow:auto;background:var(--base-100);border-right:2px solid var(--base-95)}.menu-container .menu-container-header{margin:24px 0;max-height:40px}.menu-container.collapsed .menu-container-header{margin:24px 0 32px!important}.menu-container .content:not(.collapsed){overflow-x:hidden;padding:0 12px}.menu-container .content:not(.collapsed) .menu-logo{margin-left:16px;max-width:100%}.menu-container .divider{width:100%}.menu-container .profile-wrapper{color:var(--base-30);display:flex;align-items:center;justify-content:center;margin:32px 0}.menu-container .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}.menu-container .profile-name{max-width:145px;overflow:hidden;margin-left:12px}.profile-option-icon{vertical-align:middle;margin:0 5px 5px 0}:host ::ng-deep .collapsed .profile-wrapper{left:8px!important}:host ::ng-deep .menu-item{display:flex;padding:16px!important;border-radius:4px!important}:host ::ng-deep .child-list .menu-item{padding:8px 16px!important}:host ::ng-deep .collapsed .menu-item{padding:0!important;width:40px;height:40px;border-radius:50%!important}:host ::ng-deep .active-menu-item{background-color:var(--base-95)!important}:host ::ng-deep .menu-item-title{margin-left:12px}tld-menu-icon{margin-right:10px}.spin{animation:spinArrow .3s forwards}:host::ng-deep button.collapse-btn .mat-mdc-button-persistent-ripple,:host::ng-deep button.toggler .mat-mdc-button-persistent-ripple{display:none}::ng-deep .cdk-overlay-container .profile-menu{margin:10px!important}@keyframes spinArrow{to{transform:rotate(180deg)}}\n"] }]
+        args: [{ selector: 'lib-side-nav-menu', template: "<div class=\"menu-container\" [style.width]=\"sideNavWidth\" fxLayout=\"column\" [class.collapsed]=\"collapsed\">\r\n  <div class=\"content\" fxLayout=\"column\" fxFlexFill>\r\n    <div class=\"menu-container-header\" fxLayout=\"row\" [fxLayoutAlign]=\"collapsed ? 'center center' : 'space-between center'\">\r\n      <a *ngIf=\"!collapsed\" [libPlausibleEvent]=\"LOGOCLICK_PLAUSIBLE_EVENT\" fxFlex=\"3.125em\" [href]=\"baseUrl\"\r\n        [attr.aria-label]=\"'MENU.ARIA_LABELS.LOGO' | translate\" (click)=\"logoClick($event)\" fxLayoutAlign=\"start center\"\r\n      >\r\n        <img height=\"40\" class=\"menu-logo\" [src]=\"menuLogoImage\" alt=\"logo\" />\r\n      </a>\r\n      \r\n      <button\r\n        mat-icon-button\r\n        class=\"toggler\"\r\n        [libPlausibleEvent]=\"collapsed ? EXPAND_PLAUSIBLE_EVENT : COLLAPSE_PLAUSIBLE_EVENT\"\r\n        (click)=\"toggleCollapse()\"\r\n      >\r\n        <mat-icon>{{ collapsed ? 'keyboard_double_arrow_right' : 'keyboard_double_arrow_left' }}</mat-icon>\r\n      </button>\r\n    </div>\r\n   \r\n    <div class=\"menu-wrapper\" fxLayout=\"column\" fxFlex>\r\n      <menu-columns (toggleCollapseEvent)=\"toggleCollapse()\" [direction]=\"direction\" role=\"navigation\" fxFlex [labelsVisible]=\"!collapsed\"\r\n        [active]=\"active\"></menu-columns>\r\n    </div>\r\n\r\n\r\n    <button *ngIf=\"userInitials\" #state=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu\" class=\"profile-wrapper\">\r\n      <div class=\"profile-icon\">\r\n        {{userInitials}}\r\n      </div>\r\n\r\n      <ng-container *ngIf=\"!collapsed\">\r\n        <span class=\"profile-name\">\r\n          {{ username }}\r\n        </span>\r\n  \r\n        <mat-icon *ngIf=\"state.menuOpen; else iconDown\" class=\"spin\">{{\"keyboard_arrow_down\"}}</mat-icon>\r\n\r\n        <ng-template #iconDown>\r\n          <mat-icon class=\"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      <button\r\n        mat-menu-item\r\n        class=\"profile-option\"\r\n        *ngFor=\"let item of menuSettings.userOptions\"\r\n        (click)=\"item.callback()\"\r\n      >\r\n        <span *ngIf=\"item.icon\" class=\"material-icons profile-option-icon\">{{item.icon}}</span>\r\n          {{ item.label | translate }}\r\n      </button>\r\n    </mat-menu>\r\n  </div>", styles: [".menu-container{white-space:nowrap;height:100%;transition:width .2s ease;min-height:100vh;overflow:auto;background:var(--base-100);border-right:2px solid var(--base-95)}.menu-container .menu-container-header{margin:24px 0;max-height:40px}.menu-container.collapsed .menu-container-header{margin:24px 0 32px!important}.menu-container .content:not(.collapsed){overflow-x:hidden;padding:0 12px}.menu-container .content:not(.collapsed) .menu-logo{margin-left:16px;max-width:100%}.menu-container .divider{width:100%}.menu-container .profile-wrapper{color:var(--base-30);display:flex;align-items:center;justify-content:center;margin:32px 0}.menu-container .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}.menu-container .profile-name{max-width:145px;overflow:hidden;margin-left:12px}.profile-option-icon{vertical-align:middle;margin:0 5px 5px 0}:host ::ng-deep .collapsed .profile-wrapper{left:8px!important}:host ::ng-deep .menu-item{display:flex;padding:16px!important;border-radius:4px!important}:host ::ng-deep .child-list .menu-item{padding:8px 46px!important}:host ::ng-deep .collapsed .menu-item{padding:0!important;width:40px;height:40px;border-radius:50%!important}:host ::ng-deep .active-menu-item{background-color:var(--base-95)!important}:host ::ng-deep .menu-item-title{margin-left:12px}tld-menu-icon{margin-right:10px}.spin{animation:spinArrow .3s forwards}:host::ng-deep button.collapse-btn .mat-mdc-button-persistent-ripple,:host::ng-deep button.toggler .mat-mdc-button-persistent-ripple{display:none}::ng-deep .cdk-overlay-container .profile-menu{margin:10px!important}@keyframes spinArrow{to{transform:rotate(180deg)}}\n"] }]
     }], () => [{ type: i1.StrapiLinkService }, { type: i2.DOMService }, { type: i3.MenuItemsService }, { type: undefined, decorators: [{
                 type: Optional
             }, {

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

@@ -865,11 +865,11 @@ class SideNavMenuComponent extends NavBaseComponent {
             i0.ɵɵproperty("ngIf", ctx.userInitials);
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngForOf", ctx.menuSettings.userOptions);
-        } }, dependencies: [i2$2.DefaultLayoutDirective, i2$2.DefaultLayoutAlignDirective, i2$2.FlexFillDirective, i2$2.DefaultFlexDirective, i3.NgForOf, i3.NgIf, i2$1.MatIcon, i7.MatIconButton, i8$1.MatMenu, i8$1.MatMenuItem, i8$1.MatMenuTrigger, i2.PlausibleEventDirective, MenuColumnsComponent, i8.TranslatePipe], styles: [".menu-container[_ngcontent-%COMP%]{white-space:nowrap;height:100%;transition:width .2s ease;min-height:100vh;overflow:auto;background:var(--base-100);border-right:2px solid var(--base-95)}.menu-container[_ngcontent-%COMP%]   .menu-container-header[_ngcontent-%COMP%]{margin:24px 0;max-height:40px}.menu-container.collapsed[_ngcontent-%COMP%]   .menu-container-header[_ngcontent-%COMP%]{margin:24px 0 32px!important}.menu-container[_ngcontent-%COMP%]   .content[_ngcontent-%COMP%]:not(.collapsed){overflow-x:hidden;padding:0 12px}.menu-container[_ngcontent-%COMP%]   .content[_ngcontent-%COMP%]:not(.collapsed)   .menu-logo[_ngcontent-%COMP%]{margin-left:16px;max-width:100%}.menu-container[_ngcontent-%COMP%]   .divider[_ngcontent-%COMP%]{width:100%}.menu-container[_ngcontent-%COMP%]   .profile-wrapper[_ngcontent-%COMP%]{color:var(--base-30);display:flex;align-items:center;justify-content:center;margin:32px 0}.menu-container[_ngcontent-%COMP%]   .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}.menu-container[_ngcontent-%COMP%]   .profile-name[_ngcontent-%COMP%]{max-width:145px;overflow:hidden;margin-left:12px}.profile-option-icon[_ngcontent-%COMP%]{vertical-align:middle;margin:0 5px 5px 0}[_nghost-%COMP%]     .collapsed .profile-wrapper{left:8px!important}[_nghost-%COMP%]     .menu-item{display:flex;padding:16px!important;border-radius:4px!important}[_nghost-%COMP%]     .child-list .menu-item{padding:8px 16px!important}[_nghost-%COMP%]     .collapsed .menu-item{padding:0!important;width:40px;height:40px;border-radius:50%!important}[_nghost-%COMP%]     .active-menu-item{background-color:var(--base-95)!important}[_nghost-%COMP%]     .menu-item-title{margin-left:12px}tld-menu-icon[_ngcontent-%COMP%]{margin-right:10px}.spin[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_spinArrow .3s forwards}[_nghost-%COMP%]  button.collapse-btn .mat-mdc-button-persistent-ripple, [_nghost-%COMP%]  button.toggler .mat-mdc-button-persistent-ripple{display:none}  .cdk-overlay-container .profile-menu{margin:10px!important}@keyframes _ngcontent-%COMP%_spinArrow{to{transform:rotate(180deg)}}"] }); }
+        } }, dependencies: [i2$2.DefaultLayoutDirective, i2$2.DefaultLayoutAlignDirective, i2$2.FlexFillDirective, i2$2.DefaultFlexDirective, i3.NgForOf, i3.NgIf, i2$1.MatIcon, i7.MatIconButton, i8$1.MatMenu, i8$1.MatMenuItem, i8$1.MatMenuTrigger, i2.PlausibleEventDirective, MenuColumnsComponent, i8.TranslatePipe], styles: [".menu-container[_ngcontent-%COMP%]{white-space:nowrap;height:100%;transition:width .2s ease;min-height:100vh;overflow:auto;background:var(--base-100);border-right:2px solid var(--base-95)}.menu-container[_ngcontent-%COMP%]   .menu-container-header[_ngcontent-%COMP%]{margin:24px 0;max-height:40px}.menu-container.collapsed[_ngcontent-%COMP%]   .menu-container-header[_ngcontent-%COMP%]{margin:24px 0 32px!important}.menu-container[_ngcontent-%COMP%]   .content[_ngcontent-%COMP%]:not(.collapsed){overflow-x:hidden;padding:0 12px}.menu-container[_ngcontent-%COMP%]   .content[_ngcontent-%COMP%]:not(.collapsed)   .menu-logo[_ngcontent-%COMP%]{margin-left:16px;max-width:100%}.menu-container[_ngcontent-%COMP%]   .divider[_ngcontent-%COMP%]{width:100%}.menu-container[_ngcontent-%COMP%]   .profile-wrapper[_ngcontent-%COMP%]{color:var(--base-30);display:flex;align-items:center;justify-content:center;margin:32px 0}.menu-container[_ngcontent-%COMP%]   .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}.menu-container[_ngcontent-%COMP%]   .profile-name[_ngcontent-%COMP%]{max-width:145px;overflow:hidden;margin-left:12px}.profile-option-icon[_ngcontent-%COMP%]{vertical-align:middle;margin:0 5px 5px 0}[_nghost-%COMP%]     .collapsed .profile-wrapper{left:8px!important}[_nghost-%COMP%]     .menu-item{display:flex;padding:16px!important;border-radius:4px!important}[_nghost-%COMP%]     .child-list .menu-item{padding:8px 46px!important}[_nghost-%COMP%]     .collapsed .menu-item{padding:0!important;width:40px;height:40px;border-radius:50%!important}[_nghost-%COMP%]     .active-menu-item{background-color:var(--base-95)!important}[_nghost-%COMP%]     .menu-item-title{margin-left:12px}tld-menu-icon[_ngcontent-%COMP%]{margin-right:10px}.spin[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_spinArrow .3s forwards}[_nghost-%COMP%]  button.collapse-btn .mat-mdc-button-persistent-ripple, [_nghost-%COMP%]  button.toggler .mat-mdc-button-persistent-ripple{display:none}  .cdk-overlay-container .profile-menu{margin:10px!important}@keyframes _ngcontent-%COMP%_spinArrow{to{transform:rotate(180deg)}}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SideNavMenuComponent, [{
         type: Component,
-        args: [{ selector: 'lib-side-nav-menu', template: "<div class=\"menu-container\" [style.width]=\"sideNavWidth\" fxLayout=\"column\" [class.collapsed]=\"collapsed\">\r\n  <div class=\"content\" fxLayout=\"column\" fxFlexFill>\r\n    <div class=\"menu-container-header\" fxLayout=\"row\" [fxLayoutAlign]=\"collapsed ? 'center center' : 'space-between center'\">\r\n      <a *ngIf=\"!collapsed\" [libPlausibleEvent]=\"LOGOCLICK_PLAUSIBLE_EVENT\" fxFlex=\"3.125em\" [href]=\"baseUrl\"\r\n        [attr.aria-label]=\"'MENU.ARIA_LABELS.LOGO' | translate\" (click)=\"logoClick($event)\" fxLayoutAlign=\"start center\"\r\n      >\r\n        <img height=\"40\" class=\"menu-logo\" [src]=\"menuLogoImage\" alt=\"logo\" />\r\n      </a>\r\n      \r\n      <button\r\n        mat-icon-button\r\n        class=\"toggler\"\r\n        [libPlausibleEvent]=\"collapsed ? EXPAND_PLAUSIBLE_EVENT : COLLAPSE_PLAUSIBLE_EVENT\"\r\n        (click)=\"toggleCollapse()\"\r\n      >\r\n        <mat-icon>{{ collapsed ? 'keyboard_double_arrow_right' : 'keyboard_double_arrow_left' }}</mat-icon>\r\n      </button>\r\n    </div>\r\n   \r\n    <div class=\"menu-wrapper\" fxLayout=\"column\" fxFlex>\r\n      <menu-columns (toggleCollapseEvent)=\"toggleCollapse()\" [direction]=\"direction\" role=\"navigation\" fxFlex [labelsVisible]=\"!collapsed\"\r\n        [active]=\"active\"></menu-columns>\r\n    </div>\r\n\r\n\r\n    <button *ngIf=\"userInitials\" #state=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu\" class=\"profile-wrapper\">\r\n      <div class=\"profile-icon\">\r\n        {{userInitials}}\r\n      </div>\r\n\r\n      <ng-container *ngIf=\"!collapsed\">\r\n        <span class=\"profile-name\">\r\n          {{ username }}\r\n        </span>\r\n  \r\n        <mat-icon *ngIf=\"state.menuOpen; else iconDown\" class=\"spin\">{{\"keyboard_arrow_down\"}}</mat-icon>\r\n\r\n        <ng-template #iconDown>\r\n          <mat-icon class=\"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      <button\r\n        mat-menu-item\r\n        class=\"profile-option\"\r\n        *ngFor=\"let item of menuSettings.userOptions\"\r\n        (click)=\"item.callback()\"\r\n      >\r\n        <span *ngIf=\"item.icon\" class=\"material-icons profile-option-icon\">{{item.icon}}</span>\r\n          {{ item.label | translate }}\r\n      </button>\r\n    </mat-menu>\r\n  </div>", styles: [".menu-container{white-space:nowrap;height:100%;transition:width .2s ease;min-height:100vh;overflow:auto;background:var(--base-100);border-right:2px solid var(--base-95)}.menu-container .menu-container-header{margin:24px 0;max-height:40px}.menu-container.collapsed .menu-container-header{margin:24px 0 32px!important}.menu-container .content:not(.collapsed){overflow-x:hidden;padding:0 12px}.menu-container .content:not(.collapsed) .menu-logo{margin-left:16px;max-width:100%}.menu-container .divider{width:100%}.menu-container .profile-wrapper{color:var(--base-30);display:flex;align-items:center;justify-content:center;margin:32px 0}.menu-container .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}.menu-container .profile-name{max-width:145px;overflow:hidden;margin-left:12px}.profile-option-icon{vertical-align:middle;margin:0 5px 5px 0}:host ::ng-deep .collapsed .profile-wrapper{left:8px!important}:host ::ng-deep .menu-item{display:flex;padding:16px!important;border-radius:4px!important}:host ::ng-deep .child-list .menu-item{padding:8px 16px!important}:host ::ng-deep .collapsed .menu-item{padding:0!important;width:40px;height:40px;border-radius:50%!important}:host ::ng-deep .active-menu-item{background-color:var(--base-95)!important}:host ::ng-deep .menu-item-title{margin-left:12px}tld-menu-icon{margin-right:10px}.spin{animation:spinArrow .3s forwards}:host::ng-deep button.collapse-btn .mat-mdc-button-persistent-ripple,:host::ng-deep button.toggler .mat-mdc-button-persistent-ripple{display:none}::ng-deep .cdk-overlay-container .profile-menu{margin:10px!important}@keyframes spinArrow{to{transform:rotate(180deg)}}\n"] }]
+        args: [{ selector: 'lib-side-nav-menu', template: "<div class=\"menu-container\" [style.width]=\"sideNavWidth\" fxLayout=\"column\" [class.collapsed]=\"collapsed\">\r\n  <div class=\"content\" fxLayout=\"column\" fxFlexFill>\r\n    <div class=\"menu-container-header\" fxLayout=\"row\" [fxLayoutAlign]=\"collapsed ? 'center center' : 'space-between center'\">\r\n      <a *ngIf=\"!collapsed\" [libPlausibleEvent]=\"LOGOCLICK_PLAUSIBLE_EVENT\" fxFlex=\"3.125em\" [href]=\"baseUrl\"\r\n        [attr.aria-label]=\"'MENU.ARIA_LABELS.LOGO' | translate\" (click)=\"logoClick($event)\" fxLayoutAlign=\"start center\"\r\n      >\r\n        <img height=\"40\" class=\"menu-logo\" [src]=\"menuLogoImage\" alt=\"logo\" />\r\n      </a>\r\n      \r\n      <button\r\n        mat-icon-button\r\n        class=\"toggler\"\r\n        [libPlausibleEvent]=\"collapsed ? EXPAND_PLAUSIBLE_EVENT : COLLAPSE_PLAUSIBLE_EVENT\"\r\n        (click)=\"toggleCollapse()\"\r\n      >\r\n        <mat-icon>{{ collapsed ? 'keyboard_double_arrow_right' : 'keyboard_double_arrow_left' }}</mat-icon>\r\n      </button>\r\n    </div>\r\n   \r\n    <div class=\"menu-wrapper\" fxLayout=\"column\" fxFlex>\r\n      <menu-columns (toggleCollapseEvent)=\"toggleCollapse()\" [direction]=\"direction\" role=\"navigation\" fxFlex [labelsVisible]=\"!collapsed\"\r\n        [active]=\"active\"></menu-columns>\r\n    </div>\r\n\r\n\r\n    <button *ngIf=\"userInitials\" #state=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu\" class=\"profile-wrapper\">\r\n      <div class=\"profile-icon\">\r\n        {{userInitials}}\r\n      </div>\r\n\r\n      <ng-container *ngIf=\"!collapsed\">\r\n        <span class=\"profile-name\">\r\n          {{ username }}\r\n        </span>\r\n  \r\n        <mat-icon *ngIf=\"state.menuOpen; else iconDown\" class=\"spin\">{{\"keyboard_arrow_down\"}}</mat-icon>\r\n\r\n        <ng-template #iconDown>\r\n          <mat-icon class=\"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      <button\r\n        mat-menu-item\r\n        class=\"profile-option\"\r\n        *ngFor=\"let item of menuSettings.userOptions\"\r\n        (click)=\"item.callback()\"\r\n      >\r\n        <span *ngIf=\"item.icon\" class=\"material-icons profile-option-icon\">{{item.icon}}</span>\r\n          {{ item.label | translate }}\r\n      </button>\r\n    </mat-menu>\r\n  </div>", styles: [".menu-container{white-space:nowrap;height:100%;transition:width .2s ease;min-height:100vh;overflow:auto;background:var(--base-100);border-right:2px solid var(--base-95)}.menu-container .menu-container-header{margin:24px 0;max-height:40px}.menu-container.collapsed .menu-container-header{margin:24px 0 32px!important}.menu-container .content:not(.collapsed){overflow-x:hidden;padding:0 12px}.menu-container .content:not(.collapsed) .menu-logo{margin-left:16px;max-width:100%}.menu-container .divider{width:100%}.menu-container .profile-wrapper{color:var(--base-30);display:flex;align-items:center;justify-content:center;margin:32px 0}.menu-container .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}.menu-container .profile-name{max-width:145px;overflow:hidden;margin-left:12px}.profile-option-icon{vertical-align:middle;margin:0 5px 5px 0}:host ::ng-deep .collapsed .profile-wrapper{left:8px!important}:host ::ng-deep .menu-item{display:flex;padding:16px!important;border-radius:4px!important}:host ::ng-deep .child-list .menu-item{padding:8px 46px!important}:host ::ng-deep .collapsed .menu-item{padding:0!important;width:40px;height:40px;border-radius:50%!important}:host ::ng-deep .active-menu-item{background-color:var(--base-95)!important}:host ::ng-deep .menu-item-title{margin-left:12px}tld-menu-icon{margin-right:10px}.spin{animation:spinArrow .3s forwards}:host::ng-deep button.collapse-btn .mat-mdc-button-persistent-ripple,:host::ng-deep button.toggler .mat-mdc-button-persistent-ripple{display:none}::ng-deep .cdk-overlay-container .profile-menu{margin:10px!important}@keyframes spinArrow{to{transform:rotate(180deg)}}\n"] }]
     }], () => [{ type: i1.StrapiLinkService }, { type: i2.DOMService }, { type: MenuItemsService }, { type: undefined, decorators: [{
                 type: Optional
             }, {

package/package.json

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