@volo/ngx-lepton-x.lite 4.3.6 → 5.0.0-rc.2

package/assets/css/side-menu/layout-bundle.rtl.css

@@ -3,7 +3,7 @@
   --lpx-primary: #355dff;
   --lpx-secondary: #6c5dd3;
   --lpx-success: #4fbf67;
-  --lpx-light: #eeeeee;
+  --lpx-light: #bbb;
   --lpx-info: #438aa7;
   --lpx-danger: #c00d49;
   --lpx-warning: #ff9f38;
@@ -56,6 +56,54 @@ select:-webkit-autofill:focus {
   transition: background-color 5000s ease-in-out 0s;
 }
 
+.lpx-scroll-container::-webkit-scrollbar-thumb,
+.lpx-nav-menu::-webkit-scrollbar-thumb,
+body::-webkit-scrollbar-thumb,
+pre code::-webkit-scrollbar-thumb,
+.lpx-demo-scrollspy::-webkit-scrollbar-thumb,
+.card-body::-webkit-scrollbar-thumb,
+.modal-body::-webkit-scrollbar-thumb,
+.form-select::-webkit-scrollbar-thumb {
+  background-clip: content-box;
+  border: solid 2px transparent;
+  border-radius: 10px;
+}
+
+.lpx-scroll-container, .lpx-nav-menu {
+  scrollbar-color: #222 #161616;
+}
+.lpx-scroll-container::-webkit-scrollbar-thumb, .lpx-nav-menu::-webkit-scrollbar-thumb {
+  background-color: #161616;
+}
+.lpx-scroll-container::-webkit-scrollbar-track, .lpx-nav-menu::-webkit-scrollbar-track {
+  background-color: #222;
+}
+
+body,
+pre code,
+.lpx-demo-scrollspy,
+.card-body,
+.modal-body,
+.form-select {
+  scrollbar-color: #e7e9ec #ffffff;
+}
+body::-webkit-scrollbar-thumb,
+pre code::-webkit-scrollbar-thumb,
+.lpx-demo-scrollspy::-webkit-scrollbar-thumb,
+.card-body::-webkit-scrollbar-thumb,
+.modal-body::-webkit-scrollbar-thumb,
+.form-select::-webkit-scrollbar-thumb {
+  background-color: #ffffff;
+}
+body::-webkit-scrollbar-track,
+pre code::-webkit-scrollbar-track,
+.lpx-demo-scrollspy::-webkit-scrollbar-track,
+.card-body::-webkit-scrollbar-track,
+.modal-body::-webkit-scrollbar-track,
+.form-select::-webkit-scrollbar-track {
+  background-color: #e7e9ec;
+}
+
 #lpx-wrapper {
   margin: 0 auto;
   max-width: 100% !important;
@@ -276,7 +324,7 @@ select:-webkit-autofill:focus {
 }
 .lpx-sidebar .lpx-logo-container .menu-collapse-icon {
   position: absolute;
-  left: 30px;
+  right: 235px;
   top: 50%;
   transform: translateY(-50%);
   font-size: 1.5em;
@@ -288,6 +336,8 @@ select:-webkit-autofill:focus {
 
 .lpx-sidebar-container {
   min-width: 280px;
+  max-width: 280px;
+  overflow: hidden;
   z-index: 1000;
   position: fixed;
   top: 0;
@@ -295,6 +345,7 @@ select:-webkit-autofill:focus {
 }
 .lpx-sidebar-container .lpx-sidebar {
   min-height: 100vh;
+  margin-top: 72px;
 }
 .lpx-sidebar-container .lpx-sidebar .lpx-nav {
   min-width: 280px;
@@ -305,6 +356,9 @@ select:-webkit-autofill:focus {
   max-width: 280px;
 }
 
+.hover-trigger .lpx-sidebar-container {
+  transition: box-shadow 0.25s ease;
+}
 .hover-trigger .lpx-sidebar-container:not(:hover) .hidden-in-hover-trigger {
   display: none;
 }
@@ -314,6 +368,9 @@ select:-webkit-autofill:focus {
 .hover-trigger .lpx-sidebar-container:not(:hover) .lpx-brand-logo {
   background-image: var(--lpx-logo-icon);
 }
+.hover-trigger .lpx-sidebar-container:hover {
+  box-shadow: 0 0 30px rgba(3, 19, 33, 0.1), 0 0 0 1px #e7e9ec;
+}
 .hover-trigger .lpx-sidebar-container {
   min-width: 72px;
 }
@@ -328,6 +385,9 @@ select:-webkit-autofill:focus {
 }
 
 @media only screen and (min-width: 768px) and (max-width: 1199px) {
+  .lpx-sidebar-container {
+    transition: box-shadow 0.25s ease;
+  }
   .lpx-sidebar-container:not(:hover) .hidden-in-hover-trigger {
     display: none;
   }
@@ -337,6 +397,9 @@ select:-webkit-autofill:focus {
   .lpx-sidebar-container:not(:hover) .lpx-brand-logo {
     background-image: var(--lpx-logo-icon);
   }
+  .lpx-sidebar-container:hover {
+    box-shadow: 0 0 30px rgba(3, 19, 33, 0.1), 0 0 0 1px #e7e9ec;
+  }
   .lpx-sidebar-container {
     min-width: 72px;
   }
@@ -350,6 +413,75 @@ select:-webkit-autofill:focus {
     min-width: 280px;
   }
 }
+#lpx-wrapper .lpx-sidebar.lpx-scroll-container.lpx-has-scrollbar .lpx-nav {
+  min-width: 265px;
+}
+#lpx-wrapper .lpx-sidebar.lpx-scroll-container.lpx-has-scrollbar .lpx-nav .lpx-nav-menu .lpx-menu-item-link .dd-icon {
+  left: 9px;
+}
+#lpx-wrapper .lpx-sidebar.lpx-scroll-container.lpx-has-scrollbar .lpx-logo-container {
+  width: 280px !important;
+}
+#lpx-wrapper .lpx-sidebar.lpx-scroll-container.lpx-has-scrollbar .lpx-logo-container .menu-collapse-icon {
+  right: 235px;
+}
+#lpx-wrapper .lpx-sidebar.lpx-scroll-container.lpx-has-scrollbar .lpx-menu-filter {
+  margin-left: 1px;
+}
+#lpx-wrapper .lpx-sidebar.lpx-scroll-container.lpx-has-scrollbar .lpx-nav-menu {
+  max-width: 265px;
+}
+
+.select2-container--default .select2-selection--single {
+  border-radius: 8px;
+  height: 42px;
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  border: 1px solid #d1d5db;
+  background-color: #f5f5f7;
+  transition: all 0.2s ease-in-out;
+}
+
+.select2-container--default .select2-search--dropdown .select2-search__field {
+  outline-color: transparent;
+  border-radius: 4px;
+}
+
+.select2-container--default .select2-results > .select2-results__options {
+  max-height: 200px;
+  overflow-y: auto;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  margin-top: 4px;
+  background-color: #fff;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
+}
+
+.select2-container--default .select2-results__option {
+  padding: 8px 12px;
+  transition: background-color 0.15s;
+}
+
+.select2-container--default .select2-results__option--highlighted {
+  color: #fff;
+}
+
+.select2-container--default .select2-selection--single .select2-selection__arrow {
+  left: 13px;
+}
+.select2-container--default .select2-selection--single .select2-selection__arrow b {
+  border: none;
+  width: 12px;
+  height: 12px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23111827' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2 4 7 9 12 4'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 12px 12px;
+  display: inline-block;
+  transition: transform 0.25s ease;
+}
+
 @media only screen and (min-width: 1200px) {
   .lpx-content-container {
     margin-right: 280px;
@@ -381,10 +513,6 @@ select:-webkit-autofill:focus {
   min-height: calc(100vh - 64px);
 }
 
-.lpx-nav {
-  padding-top: 72px;
-}
-
 .lpx-topbar-content {
   display: flex;
   align-items: center;
@@ -817,6 +945,10 @@ select:-webkit-autofill:focus {
   padding: 0 0 15px 0;
 }
 
+.lpx-right-menu .lpx-nav .lpx-nav-menu {
+  padding: 0;
+}
+
 .lpx-nav-menu {
   margin: 0;
   padding: 0;
@@ -978,6 +1110,65 @@ select:-webkit-autofill:focus {
   text-decoration: none;
 }
 
+.lpx-menu-filter {
+  font-size: 1em;
+  margin: 1px 16px 9px;
+  padding: 0px 9px;
+  position: relative;
+  background: #222;
+  border-radius: 0.5rem;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+}
+.lpx-menu-filter .menu-filter-icon {
+  width: 18px;
+  line-height: 32px;
+  text-align: center;
+  display: inline-block;
+}
+.lpx-menu-filter .menu-filter-input {
+  padding: 0;
+  opacity: 1;
+  color: #fff;
+  height: 30px;
+  width: 170px;
+  border-radius: 0.5rem;
+  transition: padding 0.2s ease;
+  border: 0;
+  outline: 0;
+  background: #222;
+  padding-right: 8px;
+  position: absolute;
+  top: 0;
+}
+.lpx-menu-filter .menu-filter-input::-moz-placeholder {
+  color: #9198a5;
+}
+.lpx-menu-filter .menu-filter-input::placeholder {
+  color: #9198a5;
+}
+.lpx-menu-filter .menu-filter-input:focus, .lpx-menu-filter .menu-filter-input:active {
+  border: 0;
+  outline: 0;
+  background: #222;
+}
+.lpx-menu-filter .menu-filter-clear {
+  position: absolute;
+  top: 1px;
+  left: 9px;
+  cursor: pointer;
+  opacity: 0.65;
+}
+.lpx-menu-filter .menu-filter-clear .clear-icon {
+  font-size: 20px;
+}
+.lpx-menu-filter .menu-filter-clear.hidden {
+  opacity: 0;
+}
+
+.hover-trigger .lpx-sidebar:not(:hover) .menu-filter-clear {
+  opacity: 0;
+}
+
 .lpx-user-profile.dropdown-toggle::after {
   content: none;
 }

package/fesm2022/volo-ngx-lepton-x.lite-layouts.mjs

@@ -1,17 +1,16 @@
 import * as i0 from '@angular/core';
-import { ContentChild, Component, NgModule, Directive, inject, ViewEncapsulation, Input, ChangeDetectionStrategy, InjectionToken, provideAppInitializer, makeEnvironmentProviders } from '@angular/core';
-import * as i1$1 from '@angular/common';
+import { inject, ContentChild, Component, NgModule, TemplateRef, Directive, ViewEncapsulation, Input, ChangeDetectionStrategy, InjectionToken, provideAppInitializer, makeEnvironmentProviders } from '@angular/core';
+import * as i1 from '@angular/common';
 import { NgTemplateOutlet, AsyncPipe, CommonModule, NgClass } from '@angular/common';
-import * as i1 from '@volo/ngx-lepton-x.core';
-import { IconComponent, NavbarRoutesComponent, BrandLogoComponent, LogoPanelDirective, LpxBrandLogoModule, LpxIconModule, LpxNavbarModule, UserProfileService, AvatarComponent, TranslatePipe, LpxAvatarModule, LpxTranslateModule, LanguageService, LpxVisibleDirective, ToolbarService, LayoutService, ResponsiveDirective, NavbarComponent, BreadcrumbComponent, FooterComponent, NavbarPanelDirective, MobileNavbarPanelDirective, BreadcrumbPanelDirective, FooterPanelDirective, NavitemPanelDirective, ContentPanelDirective, createStyleFactory, LPX_LAYOUT_STYLE_FINAL, LpxBreadcrumbModule, LpxResponsiveModule, LpxFooterModule, PanelsModule } from '@volo/ngx-lepton-x.core';
+import { NavbarService, LayoutService, IconComponent, NavbarRoutesComponent, BrandLogoComponent, LogoPanelDirective, LpxBrandLogoModule, LpxIconModule, LpxNavbarModule, UserProfileService, AvatarComponent, TranslatePipe, LpxAvatarModule, LpxTranslateModule, LanguageService, LpxVisibleDirective, ToolbarService, ResponsiveDirective, NavbarComponent, BreadcrumbComponent, FooterComponent, NavbarPanelDirective, MobileNavbarPanelDirective, BreadcrumbPanelDirective, FooterPanelDirective, NavitemPanelDirective, ContentPanelDirective, createStyleFactory, LPX_LAYOUT_STYLE_FINAL, LpxBreadcrumbModule, LpxResponsiveModule, LpxFooterModule, PanelsModule } from '@volo/ngx-lepton-x.core';
 import { LanguageSelectionModule, UserProfileComponent, LanguageSelectionComponent, UserProfileModule } from '@volo/ngx-lepton-x.lite';
 import { ɵEmptyOutletComponent as _EmptyOutletComponent, RouterLink, RouterModule } from '@angular/router';
 import { Observable, of } from 'rxjs';
 
 class MobileNavbarComponent {
-    constructor(navService, layoutService) {
-        this.navService = navService;
-        this.layoutService = layoutService;
+    constructor() {
+        this.navService = inject(NavbarService);
+        this.layoutService = inject(LayoutService);
         this.userMenuHidden = true;
         this.navItemsHidden = true;
         this.mobileMenuOpened = 'mobile-menu-opened';
@@ -34,7 +33,7 @@ class MobileNavbarComponent {
             this.layoutService.addClass(this.mobileMenuOpened);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: MobileNavbarComponent, deps: [{ token: i1.NavbarService }, { token: i1.LayoutService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: MobileNavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.7", type: MobileNavbarComponent, isStandalone: true, selector: "lpx-mobile-navbar", queries: [{ propertyName: "logoPanel", first: true, predicate: LogoPanelDirective, descendants: true }], ngImport: i0, template: "<div class=\"lpx-mobile-navbar-container\">\r\n  <header class=\"lpx-mobile-navbar\">\r\n    <div class=\"lpx-logo-container\">\r\n      <ng-container\r\n        *ngTemplateOutlet=\"logoPanel?.template || defaultLogo\"\r\n      ></ng-container>\r\n    </div>\r\n    <div class=\"user-menu\">\r\n      <lpx-icon\r\n        iconClass=\"bi bi-person\"\r\n        role=\"button\"\r\n        (click)=\"toggleUserMenu()\"\r\n      ></lpx-icon>\r\n      <lpx-icon\r\n        iconClass=\"bi bi-list\"\r\n        role=\"button\"\r\n        (click)=\"toggleNavbar()\"\r\n      ></lpx-icon>\r\n    </div>\r\n  </header>\r\n\r\n  <div class=\"user-menu-groups\" [class.d-none]=\"userMenuHidden\">\r\n    <ng-content> </ng-content>\r\n  </div>\r\n\r\n  <nav class=\"lpx-mobile-nav-items\" [class.d-none]=\"navItemsHidden\">\r\n    <lpx-navbar-routes\r\n      [navbarItems]=\"navService.navbarItems$ | async\"\r\n      [routerItem]=\"true\"\r\n      (routeClick)=\"toggleNavbar()\"\r\n    ></lpx-navbar-routes>\r\n  </nav>\r\n</div>\r\n\r\n<ng-template #defaultLogo>\r\n  <lpx-brand-logo />\r\n</ng-template>\r\n", styles: [".mobile-menu-opened :host{height:100vh;display:block}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "lpx-icon", inputs: ["iconClass"] }, { kind: "component", type: NavbarRoutesComponent, selector: "lpx-navbar-routes", inputs: ["navbarItems", "groupedItems", "routerItem"], outputs: ["routeClick"] }, { kind: "component", type: BrandLogoComponent, selector: "lpx-brand-logo", inputs: ["layout"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: MobileNavbarComponent, decorators: [{
@@ -46,7 +45,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
                         BrandLogoComponent,
                         AsyncPipe,
                     ], template: "<div class=\"lpx-mobile-navbar-container\">\r\n  <header class=\"lpx-mobile-navbar\">\r\n    <div class=\"lpx-logo-container\">\r\n      <ng-container\r\n        *ngTemplateOutlet=\"logoPanel?.template || defaultLogo\"\r\n      ></ng-container>\r\n    </div>\r\n    <div class=\"user-menu\">\r\n      <lpx-icon\r\n        iconClass=\"bi bi-person\"\r\n        role=\"button\"\r\n        (click)=\"toggleUserMenu()\"\r\n      ></lpx-icon>\r\n      <lpx-icon\r\n        iconClass=\"bi bi-list\"\r\n        role=\"button\"\r\n        (click)=\"toggleNavbar()\"\r\n      ></lpx-icon>\r\n    </div>\r\n  </header>\r\n\r\n  <div class=\"user-menu-groups\" [class.d-none]=\"userMenuHidden\">\r\n    <ng-content> </ng-content>\r\n  </div>\r\n\r\n  <nav class=\"lpx-mobile-nav-items\" [class.d-none]=\"navItemsHidden\">\r\n    <lpx-navbar-routes\r\n      [navbarItems]=\"navService.navbarItems$ | async\"\r\n      [routerItem]=\"true\"\r\n      (routeClick)=\"toggleNavbar()\"\r\n    ></lpx-navbar-routes>\r\n  </nav>\r\n</div>\r\n\r\n<ng-template #defaultLogo>\r\n  <lpx-brand-logo />\r\n</ng-template>\r\n", styles: [".mobile-menu-opened :host{height:100vh;display:block}\n"] }]
-        }], ctorParameters: () => [{ type: i1.NavbarService }, { type: i1.LayoutService }], propDecorators: { logoPanel: [{
+        }], propDecorators: { logoPanel: [{
                 type: ContentChild,
                 args: [LogoPanelDirective]
             }] } });
@@ -82,16 +81,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
         }] });
 
 class SettingsPanelDirective {
-    constructor(template) {
-        this.template = template;
+    constructor() {
+        this.template = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: SettingsPanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: SettingsPanelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.7", type: SettingsPanelDirective, isStandalone: true, selector: "ng-template[lpx-settings-panel]", ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: SettingsPanelDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[lpx-settings-panel]' }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+        }] });
 
 class MnUserProfileComponent {
     constructor() {
@@ -193,7 +192,7 @@ class ToolbarItemComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: ToolbarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: ToolbarItemComponent, isStandalone: true, selector: "lpx-toolbar-item", inputs: { component: "component", template: "template", icon: "icon", badge: "badge", html: "html", action: "action" }, ngImport: i0, template: "@if (component) {\r\n  <div class=\"lpx-menu-item-link\" (click)=\"actionClick()\">\r\n    <div class=\"lpx-menu-item-icon\">\r\n      <div class=\"lpx-icon\">\r\n        <ng-container *ngComponentOutlet=\"component\"></ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n} @else {\r\n  @if (template) {\r\n    <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\r\n  } @else {\r\n    @if (html) {\r\n      <div [innerHtml]=\"html\" (click)=\"actionClick()\"></div>\r\n    } @else {\r\n      <a class=\"lpx-menu-item-link active-menu-item\" (click)=\"actionClick()\">\r\n        <span class=\"lpx-menu-item-icon\">\r\n          @if (badge$ | async; as badge) {\r\n            <small class=\"menu-item-badge\">{{ badge }}</small>\r\n          }\r\n          @if (icon) {\r\n            <lpx-icon class=\"action-icon\" [iconClass]=\"icon\"></lpx-icon>\r\n          }\r\n        </span>\r\n      </a>\r\n    }\r\n  }\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "component", type: IconComponent, selector: "lpx-icon", inputs: ["iconClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: ToolbarItemComponent, isStandalone: true, selector: "lpx-toolbar-item", inputs: { component: "component", template: "template", icon: "icon", badge: "badge", html: "html", action: "action" }, ngImport: i0, template: "@if (component) {\r\n  <div class=\"lpx-menu-item-link\" (click)=\"actionClick()\">\r\n    <div class=\"lpx-menu-item-icon\">\r\n      <div class=\"lpx-icon\">\r\n        <ng-container *ngComponentOutlet=\"component\"></ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n} @else {\r\n  @if (template) {\r\n    <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\r\n  } @else {\r\n    @if (html) {\r\n      <div [innerHtml]=\"html\" (click)=\"actionClick()\"></div>\r\n    } @else {\r\n      <a class=\"lpx-menu-item-link active-menu-item\" (click)=\"actionClick()\">\r\n        <span class=\"lpx-menu-item-icon\">\r\n          @if (badge$ | async; as badge) {\r\n            <small class=\"menu-item-badge\">{{ badge }}</small>\r\n          }\r\n          @if (icon) {\r\n            <lpx-icon class=\"action-icon\" [iconClass]=\"icon\"></lpx-icon>\r\n          }\r\n        </span>\r\n      </a>\r\n    }\r\n  }\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: IconComponent, selector: "lpx-icon", inputs: ["iconClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: ToolbarItemComponent, decorators: [{
             type: Component,
@@ -245,64 +244,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
         }] });
 
 class LanguageSelectionPanelDirective {
-    constructor(template) {
-        this.template = template;
+    constructor() {
+        this.template = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LanguageSelectionPanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LanguageSelectionPanelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.7", type: LanguageSelectionPanelDirective, isStandalone: true, selector: "ng-template[lpx-language-selection]", ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LanguageSelectionPanelDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[lpx-language-selection]' }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+        }] });
 
 class MobileLanguageSelectionDirective {
-    constructor(template) {
-        this.template = template;
+    constructor() {
+        this.template = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: MobileLanguageSelectionDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: MobileLanguageSelectionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.7", type: MobileLanguageSelectionDirective, isStandalone: true, selector: "ng-template[lpx-mn-language-selection]", ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: MobileLanguageSelectionDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[lpx-mn-language-selection]' }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+        }] });
 
 class MobileUserProfilePanelDirective {
-    constructor(template) {
-        this.template = template;
+    constructor() {
+        this.template = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: MobileUserProfilePanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: MobileUserProfilePanelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.7", type: MobileUserProfilePanelDirective, isStandalone: true, selector: "ng-template[lpx-mn-user-profile-panel]", ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: MobileUserProfilePanelDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[lpx-mn-user-profile-panel]' }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+        }] });
 
 class TopbarContentPanelDirective {
-    constructor(template) {
-        this.template = template;
+    constructor() {
+        this.template = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: TopbarContentPanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: TopbarContentPanelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.7", type: TopbarContentPanelDirective, isStandalone: true, selector: "ng-template[lpx-topbar-content]", ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: TopbarContentPanelDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[lpx-topbar-content]' }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+        }] });
 
 class UserProfilePanelDirective {
-    constructor(template) {
-        this.template = template;
+    constructor() {
+        this.template = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: UserProfilePanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: UserProfilePanelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.7", type: UserProfilePanelDirective, isStandalone: true, selector: "ng-template[lpx-user-profile]", ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: UserProfilePanelDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[lpx-user-profile]' }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+        }] });
 
 class SideMenuLayoutComponent {
     constructor() {