@volo/ngx-lepton-x.core 4.3.0-rc.2 → 4.3.0-rc.4

package/fesm2022/volo-ngx-lepton-x.core.mjs

@@ -1,18 +1,105 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Inject, Injectable, NgModule, Input, ViewEncapsulation, Component, input, inject, Directive, Optional, Pipe, Injector, EventEmitter, Output, signal, computed, PLATFORM_ID, TemplateRef, ContentChild, SecurityContext, HostListener, provideAppInitializer, SkipSelf, makeEnvironmentProviders } from '@angular/core';
-import * as i1 from '@angular/common';
-import { CommonModule, Location, isPlatformBrowser, DOCUMENT } from '@angular/common';
-import { map, distinctUntilChanged, filter, take, tap, switchMap, startWith, distinctUntilKeyChanged } from 'rxjs/operators';
-import { BehaviorSubject, Subject, from, of, Observable, EMPTY, map as map$1, combineLatest, fromEvent, Subscription } from 'rxjs';
-import { FormsModule } from '@angular/forms';
-import * as i2 from '@angular/router';
-import { RouterModule, Router, NavigationEnd } from '@angular/router';
+import { Input, Directive, NgModule, InjectionToken, Inject, Injectable, DOCUMENT, provideAppInitializer, inject, Optional, SkipSelf, makeEnvironmentProviders, ViewEncapsulation, Component, input, ElementRef, EventEmitter, HostListener, Output, Pipe, Injector, signal, computed, PLATFORM_ID, TemplateRef, ContentChild, SecurityContext } from '@angular/core';
+import { CommonModule, Location, NgClass, NgTemplateOutlet, AsyncPipe, NgComponentOutlet, isPlatformBrowser } from '@angular/common';
+import { of, from, Observable, EMPTY, BehaviorSubject, Subject, fromEvent, Subscription, combineLatest, map as map$1 } from 'rxjs';
+import { Router, NavigationEnd, RouterLink, RouterModule } from '@angular/router';
+import { map, distinctUntilChanged, filter, take, switchMap, distinctUntilKeyChanged, startWith, tap } from 'rxjs/operators';
+import { RoutesService as RoutesService$1, LocalizationService, LocalizationPipe } from '@abp/ng.core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { animation, style, animate, trigger, state, transition, useAnimation } from '@angular/animations';
+import { FormsModule } from '@angular/forms';
 import { DomSanitizer } from '@angular/platform-browser';
-import { RoutesService as RoutesService$1, LocalizationService } from '@abp/ng.core';
 
-const LPX_LANGUAGE = new InjectionToken('LPX_LANGUAGE');
+class LpxVisibleDirective {
+    set lpxVisible(value) {
+        this.condition$ = checkType(value);
+        this.subscribeToCondition();
+    }
+    constructor(viewContainerRef, templateRef) {
+        this.viewContainerRef = viewContainerRef;
+        this.templateRef = templateRef;
+        this.condition$ = of(false);
+    }
+    ngOnInit() {
+        this.updateVisibility();
+    }
+    ngOnDestroy() {
+        this.conditionSubscription?.unsubscribe();
+    }
+    subscribeToCondition() {
+        this.conditionSubscription = this.condition$.subscribe((value) => {
+            this.isVisible = value;
+            this.updateVisibility();
+        });
+    }
+    updateVisibility() {
+        this.viewContainerRef.clear();
+        // it should be false not falsy
+        if (this.isVisible === false) {
+            return;
+        }
+        this.viewContainerRef.createEmbeddedView(this.templateRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LpxVisibleDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.7", type: LpxVisibleDirective, isStandalone: true, selector: "[lpxVisible]", inputs: { lpxVisible: "lpxVisible" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LpxVisibleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[lpxVisible]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }], propDecorators: { lpxVisible: [{
+                type: Input,
+                args: ['lpxVisible']
+            }] } });
+function checkType(value) {
+    if (value instanceof Promise) {
+        return from(value);
+    }
+    else if (value instanceof Observable) {
+        return value;
+    }
+    else if (typeof value === 'boolean') {
+        return of(value);
+    }
+    else if (value === undefined || value === null) {
+        return of(true);
+    }
+    else {
+        return EMPTY;
+    }
+}
+
+var LanguageTranslateKeys;
+(function (LanguageTranslateKeys) {
+    LanguageTranslateKeys["SettingsTitle"] = "language.settings.title";
+})(LanguageTranslateKeys || (LanguageTranslateKeys = {}));
+const LanguageTranslateDefaults = {
+    [LanguageTranslateKeys.SettingsTitle]: 'Language Options',
+};
+
+class LpxLanguageModule {
+    /**
+     * @deprecated `LpxLanguageModule.forRoot()` is deprecated. You can use `provideLpxCore` **function** instead.
+     */
+    static forRoot(options) {
+        return {
+            ngModule: LpxLanguageModule,
+            providers: [provideLpxCore(SKIP_DEFAULTS, withLanguage(options))],
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LpxLanguageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.7", ngImport: i0, type: LpxLanguageModule, imports: [CommonModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LpxLanguageModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LpxLanguageModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [CommonModule],
+                }]
+        }] });
 
 class DataStore {
     get state() {
@@ -42,13 +129,7 @@ class DataStore {
     }
 }
 
-var LanguageTranslateKeys;
-(function (LanguageTranslateKeys) {
-    LanguageTranslateKeys["SettingsTitle"] = "language.settings.title";
-})(LanguageTranslateKeys || (LanguageTranslateKeys = {}));
-const LanguageTranslateDefaults = {
-    [LanguageTranslateKeys.SettingsTitle]: 'Language Options',
-};
+const LPX_LANGUAGE = new InjectionToken('LPX_LANGUAGE');
 
 class LanguageService {
     get selectedLanguage() {
@@ -99,10 +180,10 @@ class LanguageService {
             selectedLanguage: lang,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LanguageService, deps: [{ token: LPX_LANGUAGE }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LanguageService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LanguageService, deps: [{ token: LPX_LANGUAGE }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LanguageService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LanguageService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LanguageService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -112,156 +193,313 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
                     args: [LPX_LANGUAGE]
                 }] }] });
 
-const LPX_TRANSLATE_SERVICE_TOKEN = new InjectionToken('LPX_TRANSLATE_SERVICE_TOKEN');
-const LPX_TRANSLATE_TOKEN = new InjectionToken('LPX_TRANSLATE_TOKEN');
+const LPX_INITIAL_STYLES = new InjectionToken('LPX_INITIAL_STYLES_TOKEN');
+const LPX_STYLE_FINAL = new InjectionToken('LPX_STYLE_FINAL_TOKEN');
+const LPX_LAYOUT_STYLE_FINAL = new InjectionToken('LPX_LAYOUT_STYLE_FINALIZE_TOKEN');
 
-class LpxLanguageModule {
-    static forRoot(options) {
-        return {
-            ngModule: LpxLanguageModule,
-            providers: [
-                {
-                    provide: LPX_LANGUAGE,
-                    useValue: options?.languages || [],
-                },
-                {
-                    provide: LPX_TRANSLATE_TOKEN,
-                    useValue: [LanguageTranslateDefaults],
-                    multi: true,
-                },
-                LanguageService,
-            ],
-        };
+class StyleService {
+    constructor(initialStyles, document) {
+        this.initialStyles = initialStyles;
+        this.document = document;
+        this.lastInjectedStyle = null;
+        this.initialized$ = new BehaviorSubject(false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LpxLanguageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: LpxLanguageModule, imports: [CommonModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LpxLanguageModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LpxLanguageModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [],
-                    imports: [CommonModule],
-                }]
-        }] });
-
-const ICON_MAP = {
-    bagFill: 'bi bi-bag-fill',
-    bellFill: 'bi bi-bell-fill',
-    calendarWeek: 'bi bi-calendar2-week',
-    chatDots: 'bi bi-chat-dots',
-    chevronDown: 'bi bi-chevron-down',
-    chevronUp: 'bi bi-chevron-up',
-    gearConnected: 'bi bi-gear-wide-connected',
-    filter: 'bi bi-filter',
-    filterFill: 'bi bi-filter-circle-fill',
-    layoutThreeColumns: 'bi bi-layout-three-columns',
-    moon: 'bi bi-moon',
-    square: 'bi bi-square',
-    sunset: 'bi bi-brightness-alt-high-fill',
-    sunup: 'bi bi-brightness-high-fill',
-    star: 'bi bi-star',
-    x: 'bi bi-x',
-    xCircleFill: 'bi bi-x-circle-fill',
-};
-const LEPTON_X_ICON_SET = new InjectionToken('LEPTON_X_ICON_SET');
-
-class IconComponent {
-    get styleClass() {
-        return (this.iconSet[this.iconClass] || this.iconClass);
+    async initStyles(direction) {
+        const cssExtension = direction === 'rtl' ? '.rtl' : '';
+        for (const style of this.initialStyles) {
+            const href = `${style.bundleName}${cssExtension}.css`;
+            const selector = `
+        link[rel="stylesheet"][href$="${href}"],
+        link[rel="stylesheet"]#${style.bundleName}
+      `;
+            const isAlreadyLoaded = !!this.document.querySelector(selector);
+            if (isAlreadyLoaded) {
+                continue;
+            }
+            await this.loadStyle(style, direction);
+        }
+        this.initialized$.next(true);
     }
-    constructor(iconSet) {
-        this.iconSet = iconSet;
+    async loadStyle(style, direction) {
+        return new Promise((resolve) => {
+            const linkElement = this.createLinkElem(style, direction, resolve);
+            const styleLinks = Array.from(this.document.head.querySelectorAll('link[rel="stylesheet"]'));
+            const lastStyleLink = styleLinks[styleLinks.length - 1];
+            if (lastStyleLink) {
+                lastStyleLink.insertAdjacentElement('afterend', linkElement);
+            }
+            else {
+                this.document.head.appendChild(linkElement);
+            }
+            this.lastInjectedStyle = linkElement;
+            resolve(linkElement);
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: IconComponent, deps: [{ token: LEPTON_X_ICON_SET }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: IconComponent, isStandalone: false, selector: "lpx-icon", inputs: { iconClass: "iconClass" }, ngImport: i0, template: `
-    <i class="lpx-icon" [ngClass]="styleClass" aria-hidden="true"></i>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    async replaceStyle(style, direction) {
+        const loaded = this.document.querySelector(`link#${style.bundleName}`);
+        if (loaded) {
+            loaded.remove();
+        }
+        return this.loadStyle(style, direction);
+    }
+    async reloadInitialStyles(direction) {
+        for (const style of this.initialStyles) {
+            await this.replaceStyle(style, direction);
+        }
+    }
+    createLinkElem(style, direction, resolve) {
+        const linkElem = document.createElement('link');
+        linkElem.rel = 'stylesheet';
+        linkElem.id = style.bundleName;
+        linkElem.href = `${style.bundleName}${direction === 'rtl' ? '.rtl' : ''}.css`;
+        linkElem.onload = () => {
+            resolve(linkElem);
+        };
+        return linkElem;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: StyleService, deps: [{ token: LPX_STYLE_FINAL }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: StyleService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: IconComponent, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: StyleService, decorators: [{
+            type: Injectable,
             args: [{
-                    standalone: false,
-                    selector: 'lpx-icon',
-                    template: `
-    <i class="lpx-icon" [ngClass]="styleClass" aria-hidden="true"></i>
-  `,
-                    encapsulation: ViewEncapsulation.None,
+                    providedIn: 'root',
                 }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
-                    args: [LEPTON_X_ICON_SET]
-                }] }], propDecorators: { iconClass: [{
-                type: Input
-            }] } });
+                    args: [LPX_STYLE_FINAL]
+                }] }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }] });
 
-class LpxIconModule {
-    static forRoot(options) {
-        return {
-            ngModule: LpxIconModule,
-            providers: [
-                {
-                    provide: LEPTON_X_ICON_SET,
-                    useValue: options?.iconSet || ICON_MAP,
-                },
-            ],
-        };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LpxIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: LpxIconModule, declarations: [IconComponent], imports: [CommonModule], exports: [IconComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LpxIconModule, imports: [CommonModule] }); }
+function createStyleFactory(handler) {
+    return handler || ((defaultValue) => defaultValue);
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LpxIconModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [IconComponent],
-                    imports: [CommonModule],
-                    exports: [IconComponent],
-                }]
-        }] });
 
-const LOGO_URL_TOKEN = new InjectionToken('LOGO_URL_TOKEN');
-const LOGO_APP_NAME_TOKEN = new InjectionToken('LOGO_APP_NAME_TOKEN');
-
-var layouts;
-(function (layouts) {
-    layouts["sideMenu"] = "side-menu";
-    layouts["topMenu"] = "top-menu";
-})(layouts || (layouts = {}));
+function styleLoadFactory(styleList, layoutStyles) {
+    styleList.push({
+        bundleName: 'ng-bundle',
+    });
+    styleList.push({
+        bundleName: 'font-bundle',
+    });
+    return [...styleList, ...layoutStyles];
+}
 
-class BrandLogoComponent {
-    constructor() {
-        this.layout = input(layouts.sideMenu);
-        this.layoutOptions = layouts;
-        this.logoUrl = inject(LOGO_URL_TOKEN, {
-            optional: true,
+function createDirectionProvider(listenDirection) {
+    return provideAppInitializer(() => {
+        if (listenDirection) {
+            listenDirectionChange();
+        }
+    });
+}
+// subscribe to direction from documentElement and load direction stylesheet
+function listenDirectionChange() {
+    const languageService = inject(LanguageService);
+    const styleService = inject(StyleService);
+    return new Promise((resolve) => {
+        styleService.initialized$
+            .pipe(filter(Boolean), take(1), switchMap(() => languageService.languageChange$), distinctUntilKeyChanged('isRTL'))
+            .subscribe(async (lang) => {
+            const direction = lang?.isRTL ? 'rtl' : 'ltr';
+            const documentElement = document.documentElement;
+            if (documentElement.dir !== direction) {
+                documentElement.dir = direction;
+            }
+            await styleService.reloadInitialStyles(direction);
+            resolve(null);
         });
-        this.appName = inject(LOGO_APP_NAME_TOKEN, {
-            optional: true,
-        }) ?? 'ProjectName';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: BrandLogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: BrandLogoComponent, isStandalone: false, selector: "lpx-brand-logo", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (logoUrl) {\r\n  @let logo = 'url(' + logoUrl + ')';\r\n  <a routerLink=\"/\">\r\n    <div\r\n      class=\"lpx-brand-logo\"\r\n      [style.background-image]=\"logo\"\r\n      role=\"img\"\r\n      aria-label=\"App Logo\"\r\n    ></div>\r\n  </a>\r\n} @else {\r\n  <a routerLink=\"/\" class=\"text-decoration-none\">\r\n    @switch (layout()) {\r\n      @case (layoutOptions.sideMenu) {\r\n        <div class=\"lpx-brand-logo\"></div>\r\n        <div class=\"lpx-brand-name\" style=\"left: 58px !important\">\r\n          {{ appName }}\r\n        </div>\r\n      }\r\n\r\n      @case (layoutOptions.topMenu) {\r\n        <div class=\"lpx-brand-name\" style=\"position: inherit\">\r\n          {{ appName }}\r\n        </div>\r\n      }\r\n    }\r\n  </a>\r\n}\r\n", dependencies: [{ kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: BrandLogoComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: false, selector: 'lpx-brand-logo', encapsulation: ViewEncapsulation.None, template: "@if (logoUrl) {\r\n  @let logo = 'url(' + logoUrl + ')';\r\n  <a routerLink=\"/\">\r\n    <div\r\n      class=\"lpx-brand-logo\"\r\n      [style.background-image]=\"logo\"\r\n      role=\"img\"\r\n      aria-label=\"App Logo\"\r\n    ></div>\r\n  </a>\r\n} @else {\r\n  <a routerLink=\"/\" class=\"text-decoration-none\">\r\n    @switch (layout()) {\r\n      @case (layoutOptions.sideMenu) {\r\n        <div class=\"lpx-brand-logo\"></div>\r\n        <div class=\"lpx-brand-name\" style=\"left: 58px !important\">\r\n          {{ appName }}\r\n        </div>\r\n      }\r\n\r\n      @case (layoutOptions.topMenu) {\r\n        <div class=\"lpx-brand-name\" style=\"position: inherit\">\r\n          {{ appName }}\r\n        </div>\r\n      }\r\n    }\r\n  </a>\r\n}\r\n" }]
-        }] });
 
-class LpxBrandLogoModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LpxBrandLogoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: LpxBrandLogoModule, declarations: [BrandLogoComponent], imports: [RouterModule], exports: [BrandLogoComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LpxBrandLogoModule, imports: [RouterModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LpxBrandLogoModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [BrandLogoComponent],
-                    imports: [
-                        RouterModule
-                    ],
-                    exports: [BrandLogoComponent]
-                }]
+const RESPONSIVE_BREAKPOINTS = new InjectionToken('RESPONSIVE_BREAKPOINTS');
+
+const WINDOW = new InjectionToken('WINDOW');
+
+class ResponsiveService {
+    constructor(providedBreakpoints, window) {
+        this.providedBreakpoints = providedBreakpoints;
+        this.window = window;
+        this.defaultBreakpoint = {
+            name: "all" /* ResponsiveTokens.all */,
+            width: 0,
+        };
+        this.breakpoints = this.buildBreakpoints(this.providedBreakpoints);
+        this.getCurrentSize = () => ({
+            height: this.window.innerHeight,
+            width: this.window.innerWidth,
+        });
+        this.mapSizeToBreakpoint = ({ width } = this.getCurrentSize()) => {
+            return this.breakpoints.find((s) => width >= s.width);
+        };
+        this.currentSize$ = new BehaviorSubject(this.mapSizeToBreakpoint());
+        this.shouldRenderWithCurrentSize = (query) => {
+            return this.matchQuery(query);
+        };
+        this.setupListener();
+    }
+    setupListener() {
+        this.currentResolution$ = fromEvent(this.window, 'resize')
+            .pipe(map(this.getCurrentSize))
+            .pipe(startWith(this.getCurrentSize()));
+        this.currentResolution$
+            .pipe(map(this.mapSizeToBreakpoint), distinctUntilChanged())
+            .subscribe((current) => {
+            this.currentSize$.next(current);
+        });
+    }
+    buildBreakpoints(breakpoints) {
+        return [
+            ...Object.keys(breakpoints)
+                .map((key) => ({
+                name: key,
+                width: breakpoints[key],
+            }))
+                .sort((a, b) => b.width - a.width),
+            this.defaultBreakpoint,
+        ];
+    }
+    matchQuery(query) {
+        const { width } = this.getCurrentSize();
+        const tokens = query.split(' ');
+        const findInTokens = (size) => tokens.find((token) => token.split("-" /* ResponsiveTokens.separator */)[0] === size);
+        const matchedBreakpoint = this.breakpoints.find((breakpoint) => width >= breakpoint.width && findInTokens(breakpoint.name));
+        if (matchedBreakpoint) {
+            const token = findInTokens(matchedBreakpoint.name);
+            const shouldBeBigger = !token?.includes("none" /* ResponsiveTokens.none */);
+            return shouldBeBigger === width >= matchedBreakpoint.width;
+        }
+        return false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: ResponsiveService, deps: [{ token: RESPONSIVE_BREAKPOINTS }, { token: WINDOW }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: ResponsiveService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: ResponsiveService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [RESPONSIVE_BREAKPOINTS]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [WINDOW]
+                }] }] });
+
+class ResponsiveDirective {
+    constructor(templateRef, viewContainer, service, parentCdr) {
+        this.templateRef = templateRef;
+        this.viewContainer = viewContainer;
+        this.service = service;
+        this.parentCdr = parentCdr;
+        this.hasRendered = false;
+        this.sub = new Subscription();
+        this.render = (shouldRender) => {
+            if (shouldRender && !this.hasRendered) {
+                this.viewContainer.createEmbeddedView(this.templateRef);
+                this.hasRendered = true;
+            }
+            else if (!shouldRender && this.hasRendered) {
+                this.viewContainer.clear();
+                this.hasRendered = false;
+            }
+            this.parentCdr.detectChanges();
+        };
+    }
+    ngOnInit() {
+        this.sub.add(this.service.currentSize$
+            .pipe(map((_) => this.service.shouldRenderWithCurrentSize(this.query)))
+            .subscribe(this.render));
+    }
+    ngOnDestroy() {
+        this.sub.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: ResponsiveDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: ResponsiveService }, { token: i0.ChangeDetectorRef, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.7", type: ResponsiveDirective, isStandalone: true, selector: "[lpxResponsive]", inputs: { query: ["lpxResponsive", "query"] }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: ResponsiveDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[lpxResponsive]' }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }, { type: ResponsiveService }, { type: i0.ChangeDetectorRef, decorators: [{
+                    type: Optional
+                }, {
+                    type: SkipSelf
+                }] }], propDecorators: { query: [{
+                type: Input,
+                args: ['lpxResponsive']
+            }] } });
+
+class LpxResponsiveModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LpxResponsiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.7", ngImport: i0, type: LpxResponsiveModule, imports: [CommonModule, ResponsiveDirective], exports: [ResponsiveDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LpxResponsiveModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LpxResponsiveModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, ResponsiveDirective],
+                    exports: [ResponsiveDirective],
+                }]
+        }] });
+
+const LPX_RESPONSIVE_BREAKPOINTS_DEFAULTS = {
+    sm: 480,
+    md: 768,
+    lg: 992,
+    xl: 1200,
+};
+
+function createResponsiveProvider(responsiveSettings) {
+    return {
+        provide: RESPONSIVE_BREAKPOINTS,
+        useValue: responsiveSettings || LPX_RESPONSIVE_BREAKPOINTS_DEFAULTS,
+    };
+}
+
+class UserProfileService {
+    constructor() {
+        this.store = new DataStore({});
+        this.user$ = this.store.sliceState((state) => state);
+    }
+    setUser(user) {
+        this.store.set(user);
+    }
+    patchUser(user) {
+        this.store.patch(user);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: UserProfileService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: UserProfileService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: UserProfileService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class BodyService {
+    constructor() {
+        this.body = document.querySelector('body');
+        this.classes = {
+            overflowYHidden: 'overflow-y-hidden',
+        };
+    }
+    disableScrollY() {
+        this.body?.classList.add(this.classes.overflowYHidden);
+    }
+    enableScrollY() {
+        this.body?.classList.remove(this.classes.overflowYHidden);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BodyService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BodyService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BodyService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
         }] });
 
 class LayoutService {
@@ -310,19 +548,18 @@ class LayoutService {
             containerClass,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LayoutService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LayoutService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LayoutService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LayoutService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
         }] });
 
-const CONTENT_BEFORE_ROUTES = new InjectionToken('CONTENT_BEFORE_ROUTES');
-const CONTENT_AFTER_ROUTES = new InjectionToken('CONTENT_AFTER_ROUTES');
-const LPX_MENU_ITEMS = new InjectionToken('LPX_MENU_ITEMS');
+const LPX_TRANSLATE_SERVICE_TOKEN = new InjectionToken('LPX_TRANSLATE_SERVICE_TOKEN');
+const LPX_TRANSLATE_TOKEN = new InjectionToken('LPX_TRANSLATE_TOKEN');
 
 function sortItems(a, b) {
     if (!a.order) {
@@ -353,932 +590,635 @@ function isArray(obj) {
     return Array.isArray(obj);
 }
 
-function createGroupMap(list, othersGroupKey, skipGroupCheck = false) {
-    if (!skipGroupCheck &&
-        (!isArray(list) || !list.some((node) => Boolean(node.group))))
-        return undefined;
-    const mapGroup = new Map();
-    for (const node of list) {
-        const group = node?.group || othersGroupKey;
-        if (typeof group !== 'string') {
-            throw new Error(`Invalid group: ${group}`);
-        }
-        const items = mapGroup.get(group) || [];
-        items.push(node);
-        mapGroup.set(group, items);
+class LpxThemeTranslateService {
+    constructor(translateValues, translateService) {
+        this.translateValues = translateValues;
+        this.translateService = translateService;
+        this._content = flatArrayDeepToObject(this.translateValues);
     }
-    return mapGroup;
+    // TODO: PROVIDE API : Implement args
+    translate$(key, ...args) {
+        return this.translateService.get$(key, this._content[key]);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LpxThemeTranslateService, deps: [{ token: LPX_TRANSLATE_TOKEN, optional: true }, { token: LPX_TRANSLATE_SERVICE_TOKEN }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LpxThemeTranslateService, providedIn: 'root' }); }
 }
-function getItemsFromGroup(list, pred) {
-    return list?.reduce((acc, { items }) => [...acc, ...(pred ? items.filter(pred) : items)], []);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LpxThemeTranslateService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: Array, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [LPX_TRANSLATE_TOKEN]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LPX_TRANSLATE_SERVICE_TOKEN]
+                }] }] });
+
+class DefaultTranslateService {
+    get$(key, defaultValue) {
+        return of(defaultValue || key || '');
+    }
+    get(key, defaultValue) {
+        return defaultValue || key || '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: DefaultTranslateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: DefaultTranslateService }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: DefaultTranslateService, decorators: [{
+            type: Injectable
+        }] });
 
-const OTHERS_GROUP_KEY = 'AbpUi::OthersGroup';
+const LPX_TRANSLATE_SERVICE_PROVIDER = {
+    provide: LPX_TRANSLATE_SERVICE_TOKEN,
+    useClass: DefaultTranslateService,
+};
+const LPX_TRANSLATE_PROVIDERS = [
+    LPX_TRANSLATE_SERVICE_PROVIDER,
+];
 
-class NavbarService {
-    constructor() {
-        this.router = inject(Router);
-        this.menuItems = inject(LPX_MENU_ITEMS);
-        this.store = new DataStore(this.addContainerLinks(this.menuItems));
-        this.navbarItems$ = this.store.sliceState((state) => state);
-        this.groupedNavbarItems$ = this.store
-            .sliceState((state) => state)
-            .pipe(map((items) => {
-            if (!items.some((f) => !!f.group)) {
-                return;
-            }
-            const map = createGroupMap(items, OTHERS_GROUP_KEY) || [];
-            return Array.from(map, ([group, items]) => ({
-                group,
-                items,
-            }));
-        }));
-        this.expandItemByLink$().pipe(take(1)).subscribe();
-    }
-    addNavbarItems(...menuItems) {
-        this.store.set([...this.store.state, ...this.addContainerLinks(menuItems)]);
+class DefaultAuthService {
+    constructor(userProfileService) {
+        this.userProfileService = userProfileService;
+        this.isUserExists$ = this.userProfileService.user$.pipe(map((user) => !!user && Object.keys(user).length > 0));
     }
-    setNavbarItems(...menuItems) {
-        this.store.set([...this.addContainerLinks(menuItems)]);
-    }
-    // TODO: muhammed: refactor this method to be readable
-    addChildren(id, ...menuItems) {
-        const parent = this.findById(id, this.store.state);
-        const update = (items, location, link = '') => {
-            const i = location.shift();
-            return items.reduce((acc, item, index) => {
-                return [
-                    ...acc,
-                    ...(index === i
-                        ? [
-                            {
-                                ...item,
-                                children: !location.length
-                                    ? [
-                                        ...(item.children || []),
-                                        ...this.addContainerLinks(menuItems, `${link}/${item.containerLink}`),
-                                    ]
-                                    : update(item.children || [], location, `${link}/${item.containerLink}`),
-                            },
-                        ]
-                        : [item]),
-                ];
-            }, []);
-        };
-        const updated = update(this.store.state, parent.location);
-        this.store.patch(updated);
-    }
-    findByLink(link, items) {
-        return this.findByProp('link', link, items);
-    }
-    expandItemByLink$() {
-        return this.router.events.pipe(filter((e) => e instanceof NavigationEnd), tap(() => this.expandItems()));
-    }
-    expandItems() {
-        const route = this.getRouteItem();
-        if (route?.item) {
-            const expanded = this.calculateExpandState(this.store.state, route.location);
-            this.store.patch(expanded);
-        }
+    navigateToLogin() {
+        return;
     }
-    getRouteItem() {
-        return this.findByLink(this.router.url);
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: DefaultAuthService, deps: [{ token: UserProfileService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: DefaultAuthService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: DefaultAuthService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: UserProfileService }] });
+
+const LPX_AUTH_SERVICE_TOKEN = new InjectionToken('LPX_AUTH_SERVICE_TOKEN');
+
+const LPX_AUTH_SERVICE_PROVIDER = {
+    provide: LPX_AUTH_SERVICE_TOKEN,
+    useClass: DefaultAuthService,
+};
+
+class LpxLocalStorageService {
+    constructor() { }
+    get length() {
+        return localStorage.length;
     }
-    calculateExpandState(items, indexes) {
-        const matchIndex = indexes.shift();
-        return items.reduce((acc, item, index) => {
-            if (index === matchIndex) {
-                return [
-                    ...acc,
-                    {
-                        ...item,
-                        expanded: true,
-                        selected: true,
-                        children: this.calculateExpandState(item.children || [], indexes),
-                    },
-                ];
-            }
-            const newItem = {
-                ...item,
-                ...(item.children
-                    ? { children: this.collapseChildren(item.children) }
-                    : {}),
-            };
-            return [...acc, { ...newItem, expanded: false, selected: false }];
-        }, []);
+    clear() {
+        localStorage.clear();
     }
-    collapseChildren(children) {
-        return [
-            ...children.map((child) => ({
-                ...child,
-                expanded: false,
-                selected: false,
-                children: child.children ? this.collapseChildren(child.children) : [],
-            })),
-        ];
+    getItem(key) {
+        return localStorage.getItem(key);
     }
-    findById(id, items) {
-        return this.findByProp('id', id, items);
+    key(index) {
+        return localStorage.key(index);
     }
-    findByProp(prop, value, items, location = []) {
-        const navbarItems = items || this.store.state;
-        const itemIndex = navbarItems.findIndex((i) => i[prop] === value);
-        let item;
-        if (itemIndex === -1) {
-            navbarItems.forEach((i, index) => {
-                if (i.children) {
-                    const child = this.findByProp(prop, value, i.children, [
-                        ...location,
-                        index,
-                    ]);
-                    if (child?.item) {
-                        item = child.item;
-                        location = child.location;
-                    }
-                }
-            });
-        }
-        else {
-            item = navbarItems[itemIndex];
-            location.push(itemIndex);
-        }
-        return { item, location };
+    removeItem(key) {
+        localStorage.removeItem(key);
     }
-    addContainerLinks(items, link = '') {
-        return items.map((item) => ({
-            ...item,
-            ...(item.link && link ? { link: `${link}/${item.link}` } : {}),
-            children: this.addContainerLinks(item.children || [], `${link ? link + '/' : ''}${item.containerLink || ''}`),
-        }));
+    setItem(key, value) {
+        localStorage.setItem(key, value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: NavbarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: NavbarService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LpxLocalStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LpxLocalStorageService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: NavbarService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LpxLocalStorageService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root',
+                    providedIn: 'root'
                 }]
         }], ctorParameters: () => [] });
 
-class NavbarRoutesDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: NavbarRoutesDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.8", type: NavbarRoutesDirective, isStandalone: false, selector: "[lpx-navbar-routes],[lpxNavbarRoutes]", exportAs: ["lpxNavbarRoutes"], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: NavbarRoutesDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: false,
-                    selector: '[lpx-navbar-routes],[lpxNavbarRoutes]',
-                    exportAs: 'lpxNavbarRoutes',
-                }]
-        }] });
-
-class LogoPanelDirective {
-    constructor(template) {
-        this.template = template;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LogoPanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.8", type: LogoPanelDirective, isStandalone: false, selector: "ng-template[lpx-logo-panel]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LogoPanelDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: false,
-                    selector: 'ng-template[lpx-logo-panel]',
-                }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
-
 class RoutesService {
     constructor() {
         this.router = inject(Router);
         this.location = inject(Location);
         this.currentNavigation = toSignal(this.router.events.pipe(filter((e) => e instanceof NavigationEnd), map(() => this.location.path() || '/')), { initialValue: this.location.path() || '/' });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: RoutesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: RoutesService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: RoutesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: RoutesService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: RoutesService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: RoutesService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
         }] });
 
-class LpxVisibleDirective {
-    set lpxVisible(value) {
-        this.condition$ = checkType(value);
-        this.subscribeToCondition();
-    }
-    constructor(viewContainerRef, templateRef) {
-        this.viewContainerRef = viewContainerRef;
-        this.templateRef = templateRef;
-        this.condition$ = of(false);
-    }
-    ngOnInit() {
-        this.updateVisibility();
-    }
-    ngOnDestroy() {
-        this.conditionSubscription?.unsubscribe();
-    }
-    subscribeToCondition() {
-        this.conditionSubscription = this.condition$.subscribe((value) => {
-            this.isVisible = value;
-            this.updateVisibility();
-        });
-    }
-    updateVisibility() {
-        this.viewContainerRef.clear();
-        // it should be false not falsy
-        if (this.isVisible === false) {
-            return;
-        }
-        this.viewContainerRef.createEmbeddedView(this.templateRef);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LpxVisibleDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.8", type: LpxVisibleDirective, isStandalone: true, selector: "[lpxVisible]", inputs: { lpxVisible: "lpxVisible" }, ngImport: i0 }); }
+const LPX_STYLE_PROVIDERS = [
+    {
+        provide: LPX_INITIAL_STYLES,
+        useFactory: () => [],
+    },
+    provideAppInitializer(() => {
+        return loadInitialStyles();
+    }),
+];
+function loadInitialStyles() {
+    const styleService = inject(StyleService);
+    const languageService = inject(LanguageService);
+    return languageService.languageChange$.pipe(take(1), switchMap((lang) => from(styleService.initStyles(lang.isRTL ? 'rtl' : 'ltr'))));
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LpxVisibleDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[lpxVisible]',
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }], propDecorators: { lpxVisible: [{
-                type: Input,
-                args: ['lpxVisible']
-            }] } });
-function checkType(value) {
-    if (value instanceof Promise) {
-        return from(value);
-    }
-    else if (value instanceof Observable) {
-        return value;
-    }
-    else if (typeof value === 'boolean') {
-        return of(value);
-    }
-    else if (value === undefined || value === null) {
-        return of(true);
-    }
-    else {
-        return EMPTY;
-    }
+
+function createWindowProvider(windowObj) {
+    return { provide: WINDOW, useValue: windowObj || window };
 }
 
-const collapseY = animation([
-    style({ height: '*', overflow: 'hidden', 'box-sizing': 'border-box' }),
-    animate('{{ time }} {{ easing }}', style({ height: '0', padding: '0px' })),
-], { params: { time: '350ms', easing: 'ease' } });
-const collapseYWithMargin = animation([
-    style({ 'margin-top': '0' }),
-    animate('{{ time }} {{ easing }}', style({ 'margin-left': '-100%' })),
-], {
-    params: { time: '500ms', easing: 'ease' },
-});
-const collapseX = animation([
-    style({ width: '*', overflow: 'hidden', 'box-sizing': 'border-box' }),
-    animate('{{ time }} {{ easing }}', style({ width: '0', padding: '0px' })),
-], { params: { time: '350ms', easing: 'ease' } });
-const expandY = animation([
-    style({ height: '0', overflow: 'hidden', 'box-sizing': 'border-box' }),
-    animate('{{ time }} {{ easing }}', style({ height: '*', padding: '*' })),
-], { params: { time: '350ms', easing: 'ease' } });
-const expandYWithMargin = animation([
-    style({ 'margin-top': '-100%' }),
-    animate('{{ time }} {{ easing }}', style({ 'margin-top': '0' })),
-], {
-    params: { time: '500ms', easing: 'ease' },
-});
-const expandX = animation([
-    style({ width: '0', overflow: 'hidden', 'box-sizing': 'border-box' }),
-    animate('{{ time }} {{ easing }}', style({ width: '*', padding: '*' })),
-], { params: { time: '350ms', easing: 'ease' } });
-const collapse = trigger('collapse', [
-    state('collapsed', style({ height: '0', overflow: 'hidden' })),
-    state('expanded', style({ height: '*', overflow: 'hidden' })),
-    transition('expanded => collapsed', useAnimation(collapseY)),
-    transition('collapsed => expanded', useAnimation(expandY)),
-]);
-const collapseWithMargin = trigger('collapseWithMargin', [
-    state('collapsed', style({ 'margin-top': '-100%' })),
-    state('expanded', style({ 'margin-top': '0' })),
-    transition('expanded => collapsed', useAnimation(collapseYWithMargin), {
-        params: { time: '400ms', easing: 'linear' },
-    }),
-    transition('collapsed => expanded', useAnimation(expandYWithMargin)),
-]);
-const collapseLinearWithMargin = trigger('collapseLinearWithMargin', [
-    state('collapsed', style({ 'margin-top': '-100vh' })),
-    state('expanded', style({ 'margin-top': '0' })),
-    transition('expanded => collapsed', useAnimation(collapseYWithMargin, {
-        params: { time: '200ms', easing: 'linear' },
-    })),
-    transition('collapsed => expanded', useAnimation(expandYWithMargin, {
-        params: { time: '250ms', easing: 'linear' },
-    })),
-]);
+const LOGO_URL_TOKEN = new InjectionToken('LOGO_URL_TOKEN');
+const LOGO_APP_NAME_TOKEN = new InjectionToken('LOGO_APP_NAME_TOKEN');
 
-class UserProfileService {
+var LpxLogoFeatureKind;
+(function (LpxLogoFeatureKind) {
+    LpxLogoFeatureKind[LpxLogoFeatureKind["Options"] = 0] = "Options";
+})(LpxLogoFeatureKind || (LpxLogoFeatureKind = {}));
+function makeLpxLogoFeature(kind, providers) {
+    return {
+        ɵkind: kind,
+        ɵproviders: providers,
+    };
+}
+function withEnvironmentOptions(options = {}) {
+    const { name, logoUrl } = options.application || {};
+    return makeLpxLogoFeature(LpxLogoFeatureKind.Options, [
+        {
+            provide: LOGO_URL_TOKEN,
+            useValue: logoUrl || '',
+        },
+        {
+            provide: LOGO_APP_NAME_TOKEN,
+            useValue: name || 'ProjectName',
+        },
+    ]);
+}
+function provideLogo(...features) {
+    const providers = [];
+    features.forEach(({ ɵproviders }) => providers.push(...ɵproviders));
+    return makeEnvironmentProviders(providers);
+}
+
+const ICON_MAP = {
+    bagFill: 'bi bi-bag-fill',
+    bellFill: 'bi bi-bell-fill',
+    calendarWeek: 'bi bi-calendar2-week',
+    chatDots: 'bi bi-chat-dots',
+    chevronDown: 'bi bi-chevron-down',
+    chevronUp: 'bi bi-chevron-up',
+    gearConnected: 'bi bi-gear-wide-connected',
+    filter: 'bi bi-filter',
+    filterFill: 'bi bi-filter-circle-fill',
+    layoutThreeColumns: 'bi bi-layout-three-columns',
+    moon: 'bi bi-moon',
+    square: 'bi bi-square',
+    sunset: 'bi bi-brightness-alt-high-fill',
+    sunup: 'bi bi-brightness-high-fill',
+    star: 'bi bi-star',
+    x: 'bi bi-x',
+    xCircleFill: 'bi bi-x-circle-fill',
+};
+const LEPTON_X_ICON_SET = new InjectionToken('LEPTON_X_ICON_SET');
+
+class IconComponent {
     constructor() {
-        this.store = new DataStore({});
-        this.user$ = this.store.sliceState((state) => state);
-    }
-    setUser(user) {
-        this.store.set(user);
+        this.iconSet = inject(LEPTON_X_ICON_SET);
     }
-    patchUser(user) {
-        this.store.patch(user);
+    get styleClass() {
+        return (this.iconSet[this.iconClass] || this.iconClass);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: UserProfileService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: UserProfileService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.7", type: IconComponent, isStandalone: true, selector: "lpx-icon", inputs: { iconClass: "iconClass" }, ngImport: i0, template: `
+    <i class="lpx-icon" [ngClass]="styleClass" aria-hidden="true"></i>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: UserProfileService, decorators: [{
-            type: Injectable,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: IconComponent, decorators: [{
+            type: Component,
             args: [{
-                    providedIn: 'root',
+                    selector: 'lpx-icon',
+                    template: `
+    <i class="lpx-icon" [ngClass]="styleClass" aria-hidden="true"></i>
+  `,
+                    encapsulation: ViewEncapsulation.None,
+                    imports: [NgClass],
                 }]
-        }] });
+        }], propDecorators: { iconClass: [{
+                type: Input
+            }] } });
 
-class BodyService {
-    constructor() {
-        this.body = document.querySelector('body');
-        this.classes = {
-            overflowYHidden: 'overflow-y-hidden',
+class AvatarComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: AvatarComponent, isStandalone: true, selector: "lpx-avatar", inputs: { avatar: "avatar" }, ngImport: i0, template: "@if (avatar && avatar.source) {\r\n  <div class=\"lpx-avatar\">\r\n    @switch (avatar.type) {\r\n      @case ('icon') {\r\n        <lpx-icon\r\n          class=\"lpx-avatar-icon\"\r\n          [iconClass]=\"avatar.source\"\r\n        ></lpx-icon>\r\n      }\r\n      @case ('image') {\r\n        <img class=\"lpx-avatar-img\" [src]=\"avatar.source\" />\r\n      }\r\n    }\r\n  </div>\r\n}\r\n", dependencies: [{ kind: "component", type: IconComponent, selector: "lpx-icon", inputs: ["iconClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AvatarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lpx-avatar', encapsulation: ViewEncapsulation.None, imports: [IconComponent], template: "@if (avatar && avatar.source) {\r\n  <div class=\"lpx-avatar\">\r\n    @switch (avatar.type) {\r\n      @case ('icon') {\r\n        <lpx-icon\r\n          class=\"lpx-avatar-icon\"\r\n          [iconClass]=\"avatar.source\"\r\n        ></lpx-icon>\r\n      }\r\n      @case ('image') {\r\n        <img class=\"lpx-avatar-img\" [src]=\"avatar.source\" />\r\n      }\r\n    }\r\n  </div>\r\n}\r\n" }]
+        }], propDecorators: { avatar: [{
+                type: Input
+            }] } });
+
+class LpxIconModule {
+    /**
+     * @deprecated `LpxIconModule.forRoot()` is deprecated. You can use `provideLpxCore` **function** instead.
+     */
+    static forRoot(options) {
+        return {
+            ngModule: LpxIconModule,
+            providers: [provideLpxCore(SKIP_DEFAULTS, withIcon(options))],
         };
     }
-    disableScrollY() {
-        this.body?.classList.add(this.classes.overflowYHidden);
-    }
-    enableScrollY() {
-        this.body?.classList.remove(this.classes.overflowYHidden);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: BodyService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: BodyService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LpxIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.7", ngImport: i0, type: LpxIconModule, imports: [CommonModule, IconComponent], exports: [IconComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LpxIconModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: BodyService, decorators: [{
-            type: Injectable,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LpxIconModule, decorators: [{
+            type: NgModule,
             args: [{
-                    providedIn: 'root',
+                    imports: [CommonModule, IconComponent],
+                    exports: [IconComponent],
                 }]
         }] });
 
-class DefaultTranslateService {
-    get$(key, defaultValue) {
-        return of(defaultValue || key || '');
-    }
-    get(key, defaultValue) {
-        return defaultValue || key || '';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: DefaultTranslateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: DefaultTranslateService }); }
+class LpxAvatarModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LpxAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.7", ngImport: i0, type: LpxAvatarModule, imports: [CommonModule, LpxIconModule, AvatarComponent], exports: [AvatarComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LpxAvatarModule, imports: [CommonModule, LpxIconModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: DefaultTranslateService, decorators: [{
-            type: Injectable
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LpxAvatarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, LpxIconModule, AvatarComponent],
+                    exports: [AvatarComponent],
+                }]
         }] });
 
-class LpxThemeTranslateService {
-    constructor(translateValues, translateService) {
-        this.translateValues = translateValues;
-        this.translateService = translateService;
-        this._content = flatArrayDeepToObject(this.translateValues);
-    }
-    // TODO: PROVIDE API : Implement args
-    translate$(key, ...args) {
-        return this.translateService.get$(key, this._content[key]);
+var Layouts;
+(function (Layouts) {
+    Layouts["sideMenu"] = "side-menu";
+    Layouts["topMenu"] = "top-menu";
+})(Layouts || (Layouts = {}));
+
+class BrandLogoComponent {
+    constructor() {
+        this.layout = input(Layouts.sideMenu);
+        this.layoutOptions = Layouts;
+        this.logoUrl = inject(LOGO_URL_TOKEN, {
+            optional: true,
+        });
+        this.appName = inject(LOGO_APP_NAME_TOKEN, {
+            optional: true,
+        }) ?? 'ProjectName';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LpxThemeTranslateService, deps: [{ token: LPX_TRANSLATE_TOKEN, optional: true }, { token: LPX_TRANSLATE_SERVICE_TOKEN }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LpxThemeTranslateService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BrandLogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: BrandLogoComponent, isStandalone: true, selector: "lpx-brand-logo", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (logoUrl) {\r\n  @let logo = 'url(' + logoUrl + ')';\r\n  <a routerLink=\"/\">\r\n    <div\r\n      class=\"lpx-brand-logo\"\r\n      [style.background-image]=\"logo\"\r\n      role=\"img\"\r\n      aria-label=\"App Logo\"\r\n    ></div>\r\n  </a>\r\n} @else {\r\n  <a routerLink=\"/\" class=\"text-decoration-none\">\r\n    @switch (layout()) {\r\n      @case (layoutOptions.sideMenu) {\r\n        <div class=\"lpx-brand-logo\"></div>\r\n        <div class=\"lpx-brand-name\" style=\"left: 58px !important\">\r\n          {{ appName }}\r\n        </div>\r\n      }\r\n\r\n      @case (layoutOptions.topMenu) {\r\n        <div class=\"lpx-brand-name\" style=\"position: inherit\">\r\n          {{ appName }}\r\n        </div>\r\n      }\r\n    }\r\n  </a>\r\n}\r\n", dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LpxThemeTranslateService, decorators: [{
-            type: Injectable,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BrandLogoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lpx-brand-logo', encapsulation: ViewEncapsulation.None, imports: [RouterLink], template: "@if (logoUrl) {\r\n  @let logo = 'url(' + logoUrl + ')';\r\n  <a routerLink=\"/\">\r\n    <div\r\n      class=\"lpx-brand-logo\"\r\n      [style.background-image]=\"logo\"\r\n      role=\"img\"\r\n      aria-label=\"App Logo\"\r\n    ></div>\r\n  </a>\r\n} @else {\r\n  <a routerLink=\"/\" class=\"text-decoration-none\">\r\n    @switch (layout()) {\r\n      @case (layoutOptions.sideMenu) {\r\n        <div class=\"lpx-brand-logo\"></div>\r\n        <div class=\"lpx-brand-name\" style=\"left: 58px !important\">\r\n          {{ appName }}\r\n        </div>\r\n      }\r\n\r\n      @case (layoutOptions.topMenu) {\r\n        <div class=\"lpx-brand-name\" style=\"position: inherit\">\r\n          {{ appName }}\r\n        </div>\r\n      }\r\n    }\r\n  </a>\r\n}\r\n" }]
+        }] });
+
+class LpxBrandLogoModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LpxBrandLogoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.7", ngImport: i0, type: LpxBrandLogoModule, imports: [RouterModule, BrandLogoComponent], exports: [BrandLogoComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LpxBrandLogoModule, imports: [RouterModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LpxBrandLogoModule, decorators: [{
+            type: NgModule,
             args: [{
-                    providedIn: 'root',
+                    imports: [RouterModule, BrandLogoComponent],
+                    exports: [BrandLogoComponent],
                 }]
-        }], ctorParameters: () => [{ type: Array, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [LPX_TRANSLATE_TOKEN]
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [LPX_TRANSLATE_SERVICE_TOKEN]
-                }] }] });
+        }] });
 
-class DefaultAuthService {
-    constructor(userProfileService) {
-        this.userProfileService = userProfileService;
-        this.isUserExists$ = this.userProfileService.user$.pipe(map((user) => !!user && Object.keys(user).length > 0));
+class ClickOutsideDirective {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.lpxClickOutside = new EventEmitter();
+        this.exceptedRefs = [];
     }
-    navigateToLogin() {
-        return;
+    onDocumentClick(event) {
+        if (!(this.elementRef.nativeElement.contains(event.target) ||
+            this.exceptedRefs.some((ref) => ref.nativeElement.contains(event.target)))) {
+            this.lpxClickOutside.emit();
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: DefaultAuthService, deps: [{ token: UserProfileService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: DefaultAuthService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: ClickOutsideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.7", type: ClickOutsideDirective, isStandalone: true, selector: "[lpxClickOutside]", inputs: { exceptedRefs: "exceptedRefs" }, outputs: { lpxClickOutside: "lpxClickOutside" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: DefaultAuthService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: UserProfileService }] });
-
-const LPX_AUTH_SERVICE_TOKEN = new InjectionToken('LPX_AUTH_SERVICE_TOKEN');
-
-const LPX_AUTH_SERVICE_PROVIDER = {
-    provide: LPX_AUTH_SERVICE_TOKEN,
-    useClass: DefaultAuthService,
-};
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: ClickOutsideDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[lpxClickOutside]' }]
+        }], propDecorators: { lpxClickOutside: [{
+                type: Output
+            }], exceptedRefs: [{
+                type: Input
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
 
-class LpxLocalStorageService {
-    constructor() { }
-    get length() {
-        return localStorage.length;
-    }
-    clear() {
-        localStorage.clear();
+class ToObservablePipe {
+    transform(value) {
+        return value ? getStream$(value) : of('');
     }
-    getItem(key) {
-        return localStorage.getItem(key);
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: ToObservablePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.0.7", ngImport: i0, type: ToObservablePipe, isStandalone: true, name: "toObservable" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: ToObservablePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'toObservable' }]
+        }] });
+
+class BreadcrumbService {
+    constructor() {
+        this.store = new DataStore([]);
+        this.items$ = this.store.sliceState((state) => state);
     }
-    key(index) {
-        return localStorage.key(index);
+    // TODO: generate id per item
+    add(item) {
+        const items = Array.isArray(item) ? item : [item];
+        this.store.set([...this.store.state, ...items]);
     }
-    removeItem(key) {
-        localStorage.removeItem(key);
+    // TODO: generate id per item
+    insert(item, index) {
+        const state = this.store.state;
+        const items = Array.isArray(item) ? item : [item];
+        this.store.set([...state.slice(0, index), ...items, ...state.slice(index)]);
     }
-    setItem(key, value) {
-        localStorage.setItem(key, value);
+    // TODO: generate id per item
+    setItems(items) {
+        this.store.set(items);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LpxLocalStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LpxLocalStorageService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BreadcrumbService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BreadcrumbService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LpxLocalStorageService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BreadcrumbService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 }]
-        }], ctorParameters: () => [] });
+        }] });
 
-class TranslatePipe {
-    constructor(lpxThemeTranslateService) {
-        this.lpxThemeTranslateService = lpxThemeTranslateService;
+class BreadcrumbComponent {
+    constructor() {
+        this.service = inject(BreadcrumbService);
+        this.icon = ICON_MAP;
     }
-    transform(value, ...args) {
-        return this.lpxThemeTranslateService.translate$(value, args);
+    onClick(item) {
+        if (item.children) {
+            item.expanded = !item.expanded;
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: TranslatePipe, deps: [{ token: LpxThemeTranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: TranslatePipe, isStandalone: false, name: "lpxTranslate" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: BreadcrumbComponent, isStandalone: true, selector: "lpx-breadcrumb", ngImport: i0, template: "<nav aria-label=\"breadcrumb\">\r\n  <ol class=\"lpx-breadcrumb\">\r\n    @for (item of service.items$ | async; track $index; let last = $last) {\r\n      <li\r\n        class=\"lpx-breadcrumb-item\"\r\n        (click)=\"onClick(item)\"\r\n        [class.expanded]=\"item.expanded\"\r\n        (lpxClickOutside)=\"item.expanded = false\"\r\n      >\r\n        @if (item.icon) {\r\n          <lpx-icon\r\n            class=\"lpx-breadcrumb-item-icon\"\r\n            [iconClass]=\"item.icon\"\r\n          ></lpx-icon>\r\n        }\r\n        <ng-container\r\n          *ngTemplateOutlet=\"\r\n            item.children?.length ? textTemplate : linkTemplate;\r\n            context: { $implicit: item }\r\n          \"\r\n        ></ng-container>\r\n      </li>\r\n      @if (!last) {\r\n        <li class=\"lpx-breadcrumb-separator\">\r\n          <lpx-icon iconClass=\"bi bi-chevron-right\"></lpx-icon>\r\n        </li>\r\n      }\r\n    }\r\n  </ol>\r\n</nav>\r\n\r\n<ng-template #linkTemplate let-item>\r\n  <a [routerLink]=\"item.link\"> {{ item.text | toObservable | async }} </a>\r\n</ng-template>\r\n<ng-template #textTemplate let-item>\r\n  <span class=\"lpx-breadcrumb-item-text\">\r\n    {{ item.text | toObservable | async }}\r\n  </span>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: ClickOutsideDirective, selector: "[lpxClickOutside]", inputs: ["exceptedRefs"], outputs: ["lpxClickOutside"] }, { kind: "component", type: IconComponent, selector: "lpx-icon", inputs: ["iconClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: ToObservablePipe, name: "toObservable" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: TranslatePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    standalone: false,
-                    name: 'lpxTranslate',
-                }]
-        }], ctorParameters: () => [{ type: LpxThemeTranslateService }] });
-
-class SubNavbarComponent {
-    constructor() {
-        this.injector = inject(Injector);
-        this.routerItem = input();
-        this.routeClick = new EventEmitter();
-        this.expand = new EventEmitter();
-    }
-    onItemClick(menuItem) {
-        let action$ = of(true);
-        if (menuItem.action) {
-            const result = menuItem.action();
-            action$ = getStream$(result);
-        }
-        action$.pipe(take(1)).subscribe((result) => {
-            if (result) {
-                this.processItemClick(menuItem);
-            }
-        });
-    }
-    onChildExpand(child) {
-        if (child.expanded) {
-            this.item?.children
-                ?.filter((otherChild) => otherChild !== child)
-                .forEach((otherChild) => {
-                otherChild.expanded = false;
-                otherChild.selected = false;
-            });
-        }
-    }
-    processItemClick(menuItem) {
-        if (menuItem.children?.length) {
-            menuItem.expanded = !menuItem.expanded;
-            this.expand.emit(menuItem);
-            return;
-        }
-        this.routeClick.emit(menuItem);
-        if (!this.routerItem()) {
-            menuItem.selected = true;
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: SubNavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: SubNavbarComponent, isStandalone: false, selector: "lpx-sub-navbar", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: false, isRequired: false, transformFunction: null }, routerItem: { classPropertyName: "routerItem", publicName: "routerItem", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { routeClick: "routeClick", expand: "expand" }, ngImport: i0, template: "@if (item.component) {\r\n  <ng-container *ngComponentOutlet=\"item.component; injector: injector\" />\r\n} @else {\r\n  <ng-container *ngTemplateOutlet=\"defaultTemplate\" />\r\n}\r\n\r\n<ng-template #defaultTemplate>\r\n  <a\r\n    class=\"lpx-menu-item-link\"\r\n    [routerLink]=\"item.link\"\r\n    [class.selected]=\"item.selected\"\r\n    [class.expanded]=\"item.children?.length && item.expanded\"\r\n    (click)=\"onItemClick(item)\"\r\n  >\r\n    @if (item.icon) {\r\n      <lpx-icon class=\"lpx-menu-item-icon\" [iconClass]=\"item.icon\" />\r\n    }\r\n\r\n    <ng-container\r\n      *ngTemplateOutlet=\"\r\n        item.template || textTmpl;\r\n        context: { $implicit: item }\r\n      \"\r\n    />\r\n\r\n    <ng-template #textTmpl>\r\n      @if (item.text) {\r\n        <span class=\"lpx-menu-item-text hidden-in-hover-trigger\">{{\r\n          item.text | lpxTranslate | async\r\n        }}</span>\r\n      }\r\n    </ng-template>\r\n\r\n    @if (item.children?.length) {\r\n      <lpx-icon\r\n        [iconClass]=\"item.expanded ? 'chevronUp' : 'chevronDown'\"\r\n        class=\"dd-icon hidden-in-hover-trigger\"\r\n      />\r\n    }\r\n  </a>\r\n\r\n  @if (item.children?.length) {\r\n    <ul\r\n      class=\"lpx-inner-menu hidden-in-hover-trigger\"\r\n      [class.collapsed]=\"!item.expanded\"\r\n    >\r\n      @for (child of item.children; track $index) {\r\n        <li\r\n          class=\"lpx-inner-menu-item\"\r\n          *lpxVisible=\"!child.visible || child.visible(child, injector)\"\r\n        >\r\n          <lpx-sub-navbar\r\n            [item]=\"child\"\r\n            (routeClick)=\"this.routeClick.emit($event)\"\r\n            (expand)=\"onChildExpand($event)\"\r\n          />\r\n        </li>\r\n      }\r\n    </ul>\r\n  }\r\n</ng-template>\r\n", dependencies: [{ 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: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: IconComponent, selector: "lpx-icon", inputs: ["iconClass"] }, { kind: "directive", type: LpxVisibleDirective, selector: "[lpxVisible]", inputs: ["lpxVisible"] }, { kind: "component", type: SubNavbarComponent, selector: "lpx-sub-navbar", inputs: ["item", "routerItem"], outputs: ["routeClick", "expand"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "lpxTranslate" }], animations: [collapse], encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: SubNavbarComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: false, selector: 'lpx-sub-navbar', encapsulation: ViewEncapsulation.None, animations: [collapse], template: "@if (item.component) {\r\n  <ng-container *ngComponentOutlet=\"item.component; injector: injector\" />\r\n} @else {\r\n  <ng-container *ngTemplateOutlet=\"defaultTemplate\" />\r\n}\r\n\r\n<ng-template #defaultTemplate>\r\n  <a\r\n    class=\"lpx-menu-item-link\"\r\n    [routerLink]=\"item.link\"\r\n    [class.selected]=\"item.selected\"\r\n    [class.expanded]=\"item.children?.length && item.expanded\"\r\n    (click)=\"onItemClick(item)\"\r\n  >\r\n    @if (item.icon) {\r\n      <lpx-icon class=\"lpx-menu-item-icon\" [iconClass]=\"item.icon\" />\r\n    }\r\n\r\n    <ng-container\r\n      *ngTemplateOutlet=\"\r\n        item.template || textTmpl;\r\n        context: { $implicit: item }\r\n      \"\r\n    />\r\n\r\n    <ng-template #textTmpl>\r\n      @if (item.text) {\r\n        <span class=\"lpx-menu-item-text hidden-in-hover-trigger\">{{\r\n          item.text | lpxTranslate | async\r\n        }}</span>\r\n      }\r\n    </ng-template>\r\n\r\n    @if (item.children?.length) {\r\n      <lpx-icon\r\n        [iconClass]=\"item.expanded ? 'chevronUp' : 'chevronDown'\"\r\n        class=\"dd-icon hidden-in-hover-trigger\"\r\n      />\r\n    }\r\n  </a>\r\n\r\n  @if (item.children?.length) {\r\n    <ul\r\n      class=\"lpx-inner-menu hidden-in-hover-trigger\"\r\n      [class.collapsed]=\"!item.expanded\"\r\n    >\r\n      @for (child of item.children; track $index) {\r\n        <li\r\n          class=\"lpx-inner-menu-item\"\r\n          *lpxVisible=\"!child.visible || child.visible(child, injector)\"\r\n        >\r\n          <lpx-sub-navbar\r\n            [item]=\"child\"\r\n            (routeClick)=\"this.routeClick.emit($event)\"\r\n            (expand)=\"onChildExpand($event)\"\r\n          />\r\n        </li>\r\n      }\r\n    </ul>\r\n  }\r\n</ng-template>\r\n" }]
-        }], propDecorators: { item: [{
-                type: Input
-            }], routeClick: [{
-                type: Output
-            }], expand: [{
-                type: Output
-            }] } });
-
-class NavbarRoutesComponent {
-    constructor() {
-        this.injector = inject(Injector);
-        this.routesService = inject(RoutesService);
-        this._sourceItems = signal([]);
-        this._processedItems = computed(() => {
-            const url = this.routesService.currentNavigation().split('?')[0];
-            const items = this._sourceItems();
-            if (!items?.length || !url) {
-                return items;
-            }
-            const updated = [...items];
-            this.fixNavbarItems(url, items);
-            return updated;
-        });
-        this.routerItem = input();
-        this.routeClick = new EventEmitter();
-        this.isExpandedOrSelected = (item) => !!(item.expanded || item.selected);
-    }
-    set navbarItems(value) {
-        this._sourceItems.set(value);
-    }
-    get navbarItems() {
-        return this._processedItems();
-    }
-    get itemsFromGroup() {
-        if (!this.groupedItems) {
-            return undefined;
-        }
-        return getItemsFromGroup(this.groupedItems);
-    }
-    onSubnavbarExpand(menuItem, menuItems) {
-        if (menuItem.expanded) {
-            const items = this.itemsFromGroup || menuItems;
-            if (!items) {
-                return;
-            }
-            items
-                .filter((item) => item !== menuItem)
-                .forEach((item) => (item.expanded = false));
-        }
-    }
-    onRouteClick(menuItem, menuItems) {
-        const expandedItems = menuItems?.filter(this.isExpandedOrSelected);
-        const expandedGroupItems = this.itemsFromGroup?.filter(this.isExpandedOrSelected);
-        const items = expandedGroupItems || expandedItems;
-        if (items) {
-            items
-                .filter((item) => item !== menuItem)
-                .reduce((acc, item) => {
-                return [...acc, item, ...this.flatChildren(item.children || [])];
-            }, [])
-                ?.filter((item) => !this.checkChildrenIncludesItem(item, menuItem) &&
-                item !== menuItem)
-                .forEach((item) => {
-                item.selected = false;
-                item.expanded = false;
-            });
-        }
-        this.routeClick.emit(menuItem);
-    }
-    checkChildrenIncludesItem(item, menuItem) {
-        return (item.children?.reduce((acc, child) => acc ||
-            child === menuItem ||
-            this.checkChildrenIncludesItem(child, menuItem), false) || false);
-    }
-    flatChildren(menuItems) {
-        return (menuItems?.reduce((acc, item) => {
-            return [...acc, item, ...this.flatChildren(item.children || [])];
-        }, []) || []);
-    }
-    fixNavbarItems(currentUrl, items) {
-        items.forEach((item) => {
-            const { link, children } = item;
-            if (children?.length) {
-                this.fixNavbarItems(currentUrl, children);
-                const hasActiveChild = children.some((child) => child.selected || child.expanded || child.link === currentUrl);
-                item.expanded ||= hasActiveChild || link === currentUrl;
-            }
-            else {
-                item.selected = link === currentUrl;
-            }
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: NavbarRoutesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: NavbarRoutesComponent, isStandalone: false, selector: "lpx-navbar-routes", inputs: { navbarItems: { classPropertyName: "navbarItems", publicName: "navbarItems", isSignal: false, isRequired: false, transformFunction: null }, groupedItems: { classPropertyName: "groupedItems", publicName: "groupedItems", isSignal: false, isRequired: false, transformFunction: null }, routerItem: { classPropertyName: "routerItem", publicName: "routerItem", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { routeClick: "routeClick" }, ngImport: i0, template: "<ul class=\"lpx-nav-menu\">\r\n  @if (groupedItems && groupedItems.length) {\r\n    @for (item of groupedItems; track $index) {\r\n      <ng-container\r\n        *ngTemplateOutlet=\"groupText; context: { $implicit: item }\"\r\n      />\r\n\r\n      @for (navbarItem of item.items; track $index) {\r\n        <ng-container\r\n          *ngTemplateOutlet=\"itemTemplate; context: { $implicit: navbarItem }\"\r\n        />\r\n      }\r\n    }\r\n  } @else {\r\n    <ng-container *ngTemplateOutlet=\"defaultRoute\" />\r\n  }\r\n</ul>\r\n\r\n<ng-template #defaultRoute>\r\n  @for (item of navbarItems; track $index) {\r\n    <ng-container\r\n      *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"\r\n    />\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #groupText let-item>\r\n  @if (item.items.length) {\r\n    <li class=\"group-menu-item hidden-in-hover-trigger\">\r\n      {{ item.group | lpxTranslate | async }}\r\n    </li>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #itemTemplate let-item>\r\n  <li\r\n    class=\"outer-menu-item\"\r\n    *lpxVisible=\"!item.visible || item.visible(item, injector)\"\r\n  >\r\n    <lpx-sub-navbar\r\n      [item]=\"item\"\r\n      (expand)=\"onSubnavbarExpand($event, navbarItems)\"\r\n      (routeClick)=\"onRouteClick($event, navbarItems)\"\r\n      [routerItem]=\"routerItem()\"\r\n    />\r\n  </li>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: LpxVisibleDirective, selector: "[lpxVisible]", inputs: ["lpxVisible"] }, { kind: "component", type: SubNavbarComponent, selector: "lpx-sub-navbar", inputs: ["item", "routerItem"], outputs: ["routeClick", "expand"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "lpxTranslate" }], encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: NavbarRoutesComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: false, selector: 'lpx-navbar-routes', encapsulation: ViewEncapsulation.None, template: "<ul class=\"lpx-nav-menu\">\r\n  @if (groupedItems && groupedItems.length) {\r\n    @for (item of groupedItems; track $index) {\r\n      <ng-container\r\n        *ngTemplateOutlet=\"groupText; context: { $implicit: item }\"\r\n      />\r\n\r\n      @for (navbarItem of item.items; track $index) {\r\n        <ng-container\r\n          *ngTemplateOutlet=\"itemTemplate; context: { $implicit: navbarItem }\"\r\n        />\r\n      }\r\n    }\r\n  } @else {\r\n    <ng-container *ngTemplateOutlet=\"defaultRoute\" />\r\n  }\r\n</ul>\r\n\r\n<ng-template #defaultRoute>\r\n  @for (item of navbarItems; track $index) {\r\n    <ng-container\r\n      *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"\r\n    />\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #groupText let-item>\r\n  @if (item.items.length) {\r\n    <li class=\"group-menu-item hidden-in-hover-trigger\">\r\n      {{ item.group | lpxTranslate | async }}\r\n    </li>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #itemTemplate let-item>\r\n  <li\r\n    class=\"outer-menu-item\"\r\n    *lpxVisible=\"!item.visible || item.visible(item, injector)\"\r\n  >\r\n    <lpx-sub-navbar\r\n      [item]=\"item\"\r\n      (expand)=\"onSubnavbarExpand($event, navbarItems)\"\r\n      (routeClick)=\"onRouteClick($event, navbarItems)\"\r\n      [routerItem]=\"routerItem()\"\r\n    />\r\n  </li>\r\n</ng-template>\r\n" }]
-        }], propDecorators: { navbarItems: [{
-                type: Input
-            }], groupedItems: [{
-                type: Input
-            }], routeClick: [{
-                type: Output
-            }] } });
-
-class NavbarComponent {
-    constructor() {
-        this.layoutService = inject(LayoutService);
-        this.platformId = inject(PLATFORM_ID);
-        this.service = inject(NavbarService);
-        this.injector = inject(Injector);
-        this.didResized = false;
-        this.initialHover = false;
-        this.showFilterMenu$ = this.service.navbarItems$.pipe(map$1((items) => !!items.length));
-        this.contentBefore = this.flatContents(CONTENT_BEFORE_ROUTES);
-        this.contentAfter = this.flatContents(CONTENT_AFTER_ROUTES);
-    }
-    toggleSidebarHover() {
-        this.didResized = true;
-        this.layoutService.toggleClass('hover-trigger');
-        this.initialHover = !this.initialHover;
-        if (this.initialHover) {
-            this.layoutService.addClass('initial-hover');
-        }
-        else {
-            this.layoutService.removeClass('initial-hover');
-        }
-    }
-    handleInitialHover() {
-        if (this.initialHover) {
-            this.layoutService.removeClass('initial-hover');
-        }
-    }
-    ngAfterViewChecked() {
-        if (!isPlatformBrowser(this.platformId)) {
-            return;
-        }
-        if (this.didResized) {
-            this.didResized = false;
-            window.dispatchEvent(new Event('resize'));
-        }
-    }
-    flatContents(token) {
-        const contents = this.injector.get(token, []);
-        return contents.reduce((acc, val) => acc.concat(val), []);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: NavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: NavbarComponent, isStandalone: false, selector: "lpx-navbar", queries: [{ propertyName: "routesTemplate", first: true, predicate: NavbarRoutesDirective, descendants: true, read: TemplateRef }, { propertyName: "logoPanel", first: true, predicate: LogoPanelDirective, descendants: true }], ngImport: i0, template: "<nav class=\"lpx-nav\" (mouseenter)=\"handleInitialHover()\">\r\n  <div class=\"lpx-logo-container\">\r\n    <ng-container\r\n      *ngTemplateOutlet=\"logoPanel?.template || defaultLogo\"\r\n    ></ng-container>\r\n    <lpx-icon\r\n      class=\"menu-collapse-icon hidden-in-hover-trigger\"\r\n      iconClass=\"bi bi-filter-left\"\r\n      (click)=\"toggleSidebarHover()\"\r\n    ></lpx-icon>\r\n  </div>\r\n\r\n  @if (showFilterMenu$ | async) {\r\n    <ng-container\r\n      *ngTemplateOutlet=\"\r\n        customContentTemplate;\r\n        context: { $implicit: contentBefore }\r\n      \"\r\n    ></ng-container>\r\n  }\r\n\r\n  <ng-container\r\n    *ngTemplateOutlet=\"\r\n      routesTemplate || defaultRouteTemplate;\r\n      context: {\r\n        $implicit: service.navbarItems$ | async,\r\n        groupItems: service.groupedNavbarItems$ | async,\r\n      }\r\n    \"\r\n  ></ng-container>\r\n\r\n  <ng-container\r\n    *ngTemplateOutlet=\"\r\n      customContentTemplate;\r\n      context: { $implicit: contentAfter }\r\n    \"\r\n  ></ng-container>\r\n</nav>\r\n\r\n<ng-template #defaultRouteTemplate let-items let-groupItems=\"groupItems\">\r\n  <lpx-navbar-routes\r\n    [navbarItems]=\"items\"\r\n    [groupedItems]=\"groupItems\"\r\n    [routerItem]=\"true\"\r\n  ></lpx-navbar-routes>\r\n</ng-template>\r\n\r\n<ng-template #customContentTemplate let-contents>\r\n  @for (component of contents; track $index) {\r\n    <ng-container\r\n      *ngComponentOutlet=\"component; injector: injector\"\r\n    ></ng-container>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #defaultLogo>\r\n  <lpx-brand-logo />\r\n</ng-template>\r\n", dependencies: [{ 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: "component", type: BrandLogoComponent, selector: "lpx-brand-logo", inputs: ["layout"] }, { kind: "component", type: IconComponent, selector: "lpx-icon", inputs: ["iconClass"] }, { kind: "component", type: NavbarRoutesComponent, selector: "lpx-navbar-routes", inputs: ["navbarItems", "groupedItems", "routerItem"], outputs: ["routeClick"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: NavbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BreadcrumbComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'lpx-navbar', encapsulation: ViewEncapsulation.None, template: "<nav class=\"lpx-nav\" (mouseenter)=\"handleInitialHover()\">\r\n  <div class=\"lpx-logo-container\">\r\n    <ng-container\r\n      *ngTemplateOutlet=\"logoPanel?.template || defaultLogo\"\r\n    ></ng-container>\r\n    <lpx-icon\r\n      class=\"menu-collapse-icon hidden-in-hover-trigger\"\r\n      iconClass=\"bi bi-filter-left\"\r\n      (click)=\"toggleSidebarHover()\"\r\n    ></lpx-icon>\r\n  </div>\r\n\r\n  @if (showFilterMenu$ | async) {\r\n    <ng-container\r\n      *ngTemplateOutlet=\"\r\n        customContentTemplate;\r\n        context: { $implicit: contentBefore }\r\n      \"\r\n    ></ng-container>\r\n  }\r\n\r\n  <ng-container\r\n    *ngTemplateOutlet=\"\r\n      routesTemplate || defaultRouteTemplate;\r\n      context: {\r\n        $implicit: service.navbarItems$ | async,\r\n        groupItems: service.groupedNavbarItems$ | async,\r\n      }\r\n    \"\r\n  ></ng-container>\r\n\r\n  <ng-container\r\n    *ngTemplateOutlet=\"\r\n      customContentTemplate;\r\n      context: { $implicit: contentAfter }\r\n    \"\r\n  ></ng-container>\r\n</nav>\r\n\r\n<ng-template #defaultRouteTemplate let-items let-groupItems=\"groupItems\">\r\n  <lpx-navbar-routes\r\n    [navbarItems]=\"items\"\r\n    [groupedItems]=\"groupItems\"\r\n    [routerItem]=\"true\"\r\n  ></lpx-navbar-routes>\r\n</ng-template>\r\n\r\n<ng-template #customContentTemplate let-contents>\r\n  @for (component of contents; track $index) {\r\n    <ng-container\r\n      *ngComponentOutlet=\"component; injector: injector\"\r\n    ></ng-container>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #defaultLogo>\r\n  <lpx-brand-logo />\r\n</ng-template>\r\n" }]
-        }], ctorParameters: () => [], propDecorators: { routesTemplate: [{
-                type: ContentChild,
-                args: [NavbarRoutesDirective, { read: TemplateRef }]
-            }], logoPanel: [{
-                type: ContentChild,
-                args: [LogoPanelDirective]
-            }] } });
-
-class ToObservablePipe {
-    transform(value) {
-        return value ? getStream$(value) : of('');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ToObservablePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: ToObservablePipe, isStandalone: false, name: "toObservable" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ToObservablePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    standalone: false,
-                    name: 'toObservable',
-                }]
+            args: [{ selector: 'lpx-breadcrumb', encapsulation: ViewEncapsulation.None, imports: [
+                        ClickOutsideDirective,
+                        IconComponent,
+                        NgTemplateOutlet,
+                        RouterLink,
+                        AsyncPipe,
+                        ToObservablePipe,
+                    ], template: "<nav aria-label=\"breadcrumb\">\r\n  <ol class=\"lpx-breadcrumb\">\r\n    @for (item of service.items$ | async; track $index; let last = $last) {\r\n      <li\r\n        class=\"lpx-breadcrumb-item\"\r\n        (click)=\"onClick(item)\"\r\n        [class.expanded]=\"item.expanded\"\r\n        (lpxClickOutside)=\"item.expanded = false\"\r\n      >\r\n        @if (item.icon) {\r\n          <lpx-icon\r\n            class=\"lpx-breadcrumb-item-icon\"\r\n            [iconClass]=\"item.icon\"\r\n          ></lpx-icon>\r\n        }\r\n        <ng-container\r\n          *ngTemplateOutlet=\"\r\n            item.children?.length ? textTemplate : linkTemplate;\r\n            context: { $implicit: item }\r\n          \"\r\n        ></ng-container>\r\n      </li>\r\n      @if (!last) {\r\n        <li class=\"lpx-breadcrumb-separator\">\r\n          <lpx-icon iconClass=\"bi bi-chevron-right\"></lpx-icon>\r\n        </li>\r\n      }\r\n    }\r\n  </ol>\r\n</nav>\r\n\r\n<ng-template #linkTemplate let-item>\r\n  <a [routerLink]=\"item.link\"> {{ item.text | toObservable | async }} </a>\r\n</ng-template>\r\n<ng-template #textTemplate let-item>\r\n  <span class=\"lpx-breadcrumb-item-text\">\r\n    {{ item.text | toObservable | async }}\r\n  </span>\r\n</ng-template>\r\n" }]
         }] });
 
 class ToObservableModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ToObservableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: ToObservableModule, declarations: [ToObservablePipe], imports: [CommonModule], exports: [ToObservablePipe] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ToObservableModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: ToObservableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.7", ngImport: i0, type: ToObservableModule, imports: [CommonModule, ToObservablePipe], exports: [ToObservablePipe] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: ToObservableModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ToObservableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: ToObservableModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [ToObservablePipe],
-                    imports: [CommonModule],
+                    imports: [CommonModule, ToObservablePipe],
                     exports: [ToObservablePipe],
                 }]
         }] });
 
-class SafeHtmlPipe {
-    constructor() {
-        this.sanitizer = inject(DomSanitizer);
-    }
-    transform(value) {
-        if (!value || typeof value !== 'string')
-            return '';
-        return this.sanitizer.sanitize(SecurityContext.HTML, value) || '';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: SafeHtmlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: SafeHtmlPipe, isStandalone: true, name: "lpxSafeHtml" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: SafeHtmlPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'lpxSafeHtml', standalone: true }]
-        }] });
-
-class LpxTranslateModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LpxTranslateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: LpxTranslateModule, declarations: [TranslatePipe], imports: [CommonModule], exports: [TranslatePipe] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LpxTranslateModule, imports: [CommonModule] }); }
+class LpxClickOutsideModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LpxClickOutsideModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.7", ngImport: i0, type: LpxClickOutsideModule, imports: [CommonModule, ClickOutsideDirective], exports: [ClickOutsideDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LpxClickOutsideModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LpxTranslateModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LpxClickOutsideModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [TranslatePipe],
-                    imports: [CommonModule],
-                    exports: [TranslatePipe],
+                    imports: [CommonModule, ClickOutsideDirective],
+                    exports: [ClickOutsideDirective],
                 }]
         }] });
 
-const exportedDeclarations$1 = [
-    NavbarComponent,
-    SubNavbarComponent,
-    NavbarRoutesComponent,
-    NavbarRoutesDirective,
-];
-class LpxNavbarModule {
-    static forRoot(options = {}) {
-        return {
-            ngModule: LpxNavbarModule,
-            providers: [
-                {
-                    provide: LPX_MENU_ITEMS,
-                    useValue: options?.menuItems || [],
-                },
-                {
-                    provide: CONTENT_AFTER_ROUTES,
-                    useValue: options?.contentAfterRoutes || [],
-                    multi: true,
-                },
-                {
-                    provide: CONTENT_BEFORE_ROUTES,
-                    useValue: options?.contentBeforeRoutes || [],
-                    multi: true,
-                },
-            ],
-        };
-    }
-    static forChild(options = {}) {
+const exportedDeclarations$1 = [BreadcrumbComponent];
+/**
+ * @deprecated `LpxBreadcrumbModule.forRoot()` is deprecated. You can use `provideLpxBreadcrumb` **function** instead.
+ */
+class LpxBreadcrumbModule {
+    static forRoot() {
         return {
-            ngModule: LpxNavbarModule,
-            providers: [
-                {
-                    provide: CONTENT_AFTER_ROUTES,
-                    useValue: options?.contentAfterRoutes || [],
-                    multi: true,
-                },
-                {
-                    provide: CONTENT_BEFORE_ROUTES,
-                    useValue: options?.contentBeforeRoutes || [],
-                    multi: true,
-                },
-            ],
+            ngModule: LpxBreadcrumbModule,
+            providers: [provideLpxBreadcrumb()],
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LpxNavbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: LpxNavbarModule, declarations: [NavbarComponent,
-            SubNavbarComponent,
-            NavbarRoutesComponent,
-            NavbarRoutesDirective], imports: [CommonModule,
-            FormsModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LpxBreadcrumbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.7", ngImport: i0, type: LpxBreadcrumbModule, imports: [CommonModule,
+            LpxIconModule,
+            ToObservableModule,
             RouterModule,
-            LpxBrandLogoModule,
+            LpxClickOutsideModule, BreadcrumbComponent], exports: [BreadcrumbComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LpxBreadcrumbModule, imports: [CommonModule,
             LpxIconModule,
             ToObservableModule,
-            LpxTranslateModule,
-            LpxVisibleDirective], exports: [NavbarComponent,
-            SubNavbarComponent,
-            NavbarRoutesComponent,
-            NavbarRoutesDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LpxNavbarModule, imports: [CommonModule,
-            FormsModule,
             RouterModule,
-            LpxBrandLogoModule,
-            LpxIconModule,
-            ToObservableModule,
-            LpxTranslateModule] }); }
+            LpxClickOutsideModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LpxNavbarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LpxBreadcrumbModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...exportedDeclarations$1],
                     imports: [
                         CommonModule,
-                        FormsModule,
-                        RouterModule,
-                        LpxBrandLogoModule,
                         LpxIconModule,
                         ToObservableModule,
-                        LpxTranslateModule,
-                        LpxVisibleDirective,
+                        RouterModule,
+                        LpxClickOutsideModule,
+                        ...exportedDeclarations$1,
                     ],
                     exports: [...exportedDeclarations$1],
                 }]
         }] });
 
-class BreadcrumbService {
+const CONTENT_BEFORE_ROUTES = new InjectionToken('CONTENT_BEFORE_ROUTES');
+const CONTENT_AFTER_ROUTES = new InjectionToken('CONTENT_AFTER_ROUTES');
+const LPX_MENU_ITEMS = new InjectionToken('LPX_MENU_ITEMS');
+
+function createGroupMap(list, othersGroupKey, skipGroupCheck = false) {
+    if (!skipGroupCheck &&
+        (!isArray(list) || !list.some((node) => Boolean(node.group))))
+        return undefined;
+    const mapGroup = new Map();
+    for (const node of list) {
+        const group = node?.group || othersGroupKey;
+        if (typeof group !== 'string') {
+            throw new Error(`Invalid group: ${group}`);
+        }
+        const items = mapGroup.get(group) || [];
+        items.push(node);
+        mapGroup.set(group, items);
+    }
+    return mapGroup;
+}
+function getItemsFromGroup(list, pred) {
+    return list?.reduce((acc, { items }) => [...acc, ...(pred ? items.filter(pred) : items)], []);
+}
+
+const OTHERS_GROUP_KEY = 'AbpUi::OthersGroup';
+
+class NavbarService {
     constructor() {
-        this.store = new DataStore([]);
-        this.items$ = this.store.sliceState((state) => state);
+        this.router = inject(Router);
+        this.menuItems = inject(LPX_MENU_ITEMS);
+        this.store = new DataStore(this.addContainerLinks(this.menuItems));
+        this.navbarItems$ = this.store.sliceState((state) => state);
+        this.groupedNavbarItems$ = this.store
+            .sliceState((state) => state)
+            .pipe(map((items) => {
+            if (!items.some((f) => !!f.group)) {
+                return;
+            }
+            const map = createGroupMap(items, OTHERS_GROUP_KEY) || [];
+            return Array.from(map, ([group, items]) => ({
+                group,
+                items,
+            }));
+        }));
+        this.expandItemByLink$().pipe(take(1)).subscribe();
     }
-    // TODO: generate id per item
-    add(item) {
-        const items = Array.isArray(item) ? item : [item];
-        this.store.set([...this.store.state, ...items]);
+    addNavbarItems(...menuItems) {
+        this.store.set([...this.store.state, ...this.addContainerLinks(menuItems)]);
     }
-    // TODO: generate id per item
-    insert(item, index) {
-        const state = this.store.state;
-        const items = Array.isArray(item) ? item : [item];
-        this.store.set([...state.slice(0, index), ...items, ...state.slice(index)]);
+    setNavbarItems(...menuItems) {
+        this.store.set([...this.addContainerLinks(menuItems)]);
     }
-    // TODO: generate id per item
-    setItems(items) {
-        this.store.set(items);
+    // TODO: muhammed: refactor this method to be readable
+    addChildren(id, ...menuItems) {
+        const parent = this.findById(id, this.store.state);
+        const update = (items, location, link = '') => {
+            const i = location.shift();
+            return items.reduce((acc, item, index) => {
+                return [
+                    ...acc,
+                    ...(index === i
+                        ? [
+                            {
+                                ...item,
+                                children: !location.length
+                                    ? [
+                                        ...(item.children || []),
+                                        ...this.addContainerLinks(menuItems, `${link}/${item.containerLink}`),
+                                    ]
+                                    : update(item.children || [], location, `${link}/${item.containerLink}`),
+                            },
+                        ]
+                        : [item]),
+                ];
+            }, []);
+        };
+        const updated = update(this.store.state, parent.location);
+        this.store.patch(updated);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: BreadcrumbService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: BreadcrumbService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: BreadcrumbService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-class ClickOutsideDirective {
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-        this.lpxClickOutside = new EventEmitter();
-        this.exceptedRefs = [];
+    findByLink(link, items) {
+        return this.findByProp('link', link, items);
     }
-    onDocumentClick(event) {
-        if (!(this.elementRef.nativeElement.contains(event.target) ||
-            this.exceptedRefs.some((ref) => ref.nativeElement.contains(event.target)))) {
-            this.lpxClickOutside.emit();
+    expandItemByLink$() {
+        return this.router.events.pipe(filter((e) => e instanceof NavigationEnd), tap(() => this.expandItems()));
+    }
+    expandItems() {
+        const route = this.getRouteItem();
+        if (route?.item) {
+            const expanded = this.calculateExpandState(this.store.state, route.location);
+            this.store.patch(expanded);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.8", type: ClickOutsideDirective, isStandalone: false, selector: "[lpxClickOutside]", inputs: { exceptedRefs: "exceptedRefs" }, outputs: { lpxClickOutside: "lpxClickOutside" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ClickOutsideDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: false,
-                    selector: '[lpxClickOutside]',
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { lpxClickOutside: [{
-                type: Output
-            }], exceptedRefs: [{
-                type: Input
-            }], onDocumentClick: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
-            }] } });
-
-class BreadcrumbComponent {
-    constructor(service) {
-        this.service = service;
-        this.icon = ICON_MAP;
+    getRouteItem() {
+        return this.findByLink(this.router.url);
     }
-    onClick(item) {
-        if (item.children) {
-            item.expanded = !item.expanded;
+    calculateExpandState(items, indexes) {
+        const matchIndex = indexes.shift();
+        return items.reduce((acc, item, index) => {
+            if (index === matchIndex) {
+                return [
+                    ...acc,
+                    {
+                        ...item,
+                        expanded: true,
+                        selected: true,
+                        children: this.calculateExpandState(item.children || [], indexes),
+                    },
+                ];
+            }
+            const newItem = {
+                ...item,
+                ...(item.children
+                    ? { children: this.collapseChildren(item.children) }
+                    : {}),
+            };
+            return [...acc, { ...newItem, expanded: false, selected: false }];
+        }, []);
+    }
+    collapseChildren(children) {
+        return [
+            ...children.map((child) => ({
+                ...child,
+                expanded: false,
+                selected: false,
+                children: child.children ? this.collapseChildren(child.children) : [],
+            })),
+        ];
+    }
+    findById(id, items) {
+        return this.findByProp('id', id, items);
+    }
+    findByProp(prop, value, items, location = []) {
+        const navbarItems = items || this.store.state;
+        const itemIndex = navbarItems.findIndex((i) => i[prop] === value);
+        let item;
+        if (itemIndex === -1) {
+            navbarItems.forEach((i, index) => {
+                if (i.children) {
+                    const child = this.findByProp(prop, value, i.children, [
+                        ...location,
+                        index,
+                    ]);
+                    if (child?.item) {
+                        item = child.item;
+                        location = child.location;
+                    }
+                }
+            });
+        }
+        else {
+            item = navbarItems[itemIndex];
+            location.push(itemIndex);
         }
+        return { item, location };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: BreadcrumbService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: BreadcrumbComponent, isStandalone: false, selector: "lpx-breadcrumb", ngImport: i0, template: "<nav aria-label=\"breadcrumb\">\r\n  <ol class=\"lpx-breadcrumb\">\r\n    @for (item of service.items$ | async; track $index; let last = $last) {\r\n      <li\r\n        class=\"lpx-breadcrumb-item\"\r\n        (click)=\"onClick(item)\"\r\n        [class.expanded]=\"item.expanded\"\r\n        (lpxClickOutside)=\"item.expanded = false\"\r\n      >\r\n        @if (item.icon) {\r\n          <lpx-icon\r\n            class=\"lpx-breadcrumb-item-icon\"\r\n            [iconClass]=\"item.icon\"\r\n          ></lpx-icon>\r\n        }\r\n        <ng-container\r\n          *ngTemplateOutlet=\"\r\n            item.children?.length ? textTemplate : linkTemplate;\r\n            context: { $implicit: item }\r\n          \"\r\n        ></ng-container>\r\n      </li>\r\n      @if (!last) {\r\n        <li class=\"lpx-breadcrumb-separator\">\r\n          <lpx-icon iconClass=\"bi bi-chevron-right\"></lpx-icon>\r\n        </li>\r\n      }\r\n    }\r\n  </ol>\r\n</nav>\r\n\r\n<ng-template #linkTemplate let-item>\r\n  <a [routerLink]=\"item.link\"> {{ item.text | toObservable | async }} </a>\r\n</ng-template>\r\n<ng-template #textTemplate let-item>\r\n  <span class=\"lpx-breadcrumb-item-text\">\r\n    {{ item.text | toObservable | async }}\r\n  </span>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "lpx-icon", inputs: ["iconClass"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[lpxClickOutside]", inputs: ["exceptedRefs"], outputs: ["lpxClickOutside"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: ToObservablePipe, name: "toObservable" }], encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: BreadcrumbComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: false, selector: 'lpx-breadcrumb', encapsulation: ViewEncapsulation.None, template: "<nav aria-label=\"breadcrumb\">\r\n  <ol class=\"lpx-breadcrumb\">\r\n    @for (item of service.items$ | async; track $index; let last = $last) {\r\n      <li\r\n        class=\"lpx-breadcrumb-item\"\r\n        (click)=\"onClick(item)\"\r\n        [class.expanded]=\"item.expanded\"\r\n        (lpxClickOutside)=\"item.expanded = false\"\r\n      >\r\n        @if (item.icon) {\r\n          <lpx-icon\r\n            class=\"lpx-breadcrumb-item-icon\"\r\n            [iconClass]=\"item.icon\"\r\n          ></lpx-icon>\r\n        }\r\n        <ng-container\r\n          *ngTemplateOutlet=\"\r\n            item.children?.length ? textTemplate : linkTemplate;\r\n            context: { $implicit: item }\r\n          \"\r\n        ></ng-container>\r\n      </li>\r\n      @if (!last) {\r\n        <li class=\"lpx-breadcrumb-separator\">\r\n          <lpx-icon iconClass=\"bi bi-chevron-right\"></lpx-icon>\r\n        </li>\r\n      }\r\n    }\r\n  </ol>\r\n</nav>\r\n\r\n<ng-template #linkTemplate let-item>\r\n  <a [routerLink]=\"item.link\"> {{ item.text | toObservable | async }} </a>\r\n</ng-template>\r\n<ng-template #textTemplate let-item>\r\n  <span class=\"lpx-breadcrumb-item-text\">\r\n    {{ item.text | toObservable | async }}\r\n  </span>\r\n</ng-template>\r\n" }]
-        }], ctorParameters: () => [{ type: BreadcrumbService }] });
-
-class LpxClickOutsideModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LpxClickOutsideModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: LpxClickOutsideModule, declarations: [ClickOutsideDirective], imports: [CommonModule], exports: [ClickOutsideDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LpxClickOutsideModule, imports: [CommonModule] }); }
+    addContainerLinks(items, link = '') {
+        return items.map((item) => ({
+            ...item,
+            ...(item.link && link ? { link: `${link}/${item.link}` } : {}),
+            children: this.addContainerLinks(item.children || [], `${link ? link + '/' : ''}${item.containerLink || ''}`),
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: NavbarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: NavbarService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LpxClickOutsideModule, decorators: [{
-            type: NgModule,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: NavbarService, decorators: [{
+            type: Injectable,
             args: [{
-                    declarations: [ClickOutsideDirective],
-                    imports: [CommonModule],
-                    exports: [ClickOutsideDirective],
+                    providedIn: 'root',
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 class BreadcrumbRouteListenerService {
     constructor() {
@@ -1346,401 +1286,430 @@ class BreadcrumbRouteListenerService {
         }
         return trail.reverse();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: BreadcrumbRouteListenerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: BreadcrumbRouteListenerService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BreadcrumbRouteListenerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BreadcrumbRouteListenerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: BreadcrumbRouteListenerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BreadcrumbRouteListenerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
         }] });
 
-const exportedDeclarations = [BreadcrumbComponent];
-class LpxBreadcrumbModule {
-    static forRoot() {
-        return {
-            ngModule: LpxBreadcrumbModule,
-            providers: [
-                provideAppInitializer(() => {
-                    breadCrumbInit();
-                }),
-            ],
-        };
+class LogoPanelDirective {
+    constructor(template) {
+        this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LpxBreadcrumbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: LpxBreadcrumbModule, declarations: [BreadcrumbComponent], imports: [CommonModule,
-            LpxIconModule,
-            ToObservableModule,
-            RouterModule,
-            LpxClickOutsideModule], exports: [BreadcrumbComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LpxBreadcrumbModule, imports: [CommonModule,
-            LpxIconModule,
-            ToObservableModule,
-            RouterModule,
-            LpxClickOutsideModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LpxBreadcrumbModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [...exportedDeclarations],
-                    imports: [
-                        CommonModule,
-                        LpxIconModule,
-                        ToObservableModule,
-                        RouterModule,
-                        LpxClickOutsideModule,
-                    ],
-                    exports: [...exportedDeclarations],
-                }]
-        }] });
-function breadCrumbInit() {
-    const service = inject(BreadcrumbRouteListenerService);
-    service.subscribeRoute();
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LogoPanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.7", type: LogoPanelDirective, isStandalone: true, selector: "ng-template[lpx-logo-panel]", ngImport: i0 }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LogoPanelDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[lpx-logo-panel]' }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 
-const LPX_TRANSLATE_SERVICE_PROVIDER = {
-    provide: LPX_TRANSLATE_SERVICE_TOKEN,
-    useClass: DefaultTranslateService,
-};
-const LPX_TRANSLATE_PROVIDERS = [
-    LPX_TRANSLATE_SERVICE_PROVIDER,
-];
+class TranslatePipe {
+    constructor() {
+        this.lpxThemeTranslateService = inject(LpxThemeTranslateService);
+    }
+    transform(value, ...args) {
+        return this.lpxThemeTranslateService.translate$(value, args);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: TranslatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.0.7", ngImport: i0, type: TranslatePipe, isStandalone: true, name: "lpxTranslate" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: TranslatePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'lpxTranslate' }]
+        }] });
 
-const LPX_INITIAL_STYLES = new InjectionToken('LPX_INITIAL_STYLES_TOKEN');
-const LPX_STYLE_FINAL = new InjectionToken('LPX_STYLE_FINAL_TOKEN');
-const LPX_LAYOUT_STYLE_FINAL = new InjectionToken('LPX_LAYOUT_STYLE_FINALIZE_TOKEN');
+const collapseY = animation([
+    style({ height: '*', overflow: 'hidden', 'box-sizing': 'border-box' }),
+    animate('{{ time }} {{ easing }}', style({ height: '0', padding: '0px' })),
+], { params: { time: '350ms', easing: 'ease' } });
+const collapseYWithMargin = animation([
+    style({ 'margin-top': '0' }),
+    animate('{{ time }} {{ easing }}', style({ 'margin-left': '-100%' })),
+], {
+    params: { time: '500ms', easing: 'ease' },
+});
+const collapseX = animation([
+    style({ width: '*', overflow: 'hidden', 'box-sizing': 'border-box' }),
+    animate('{{ time }} {{ easing }}', style({ width: '0', padding: '0px' })),
+], { params: { time: '350ms', easing: 'ease' } });
+const expandY = animation([
+    style({ height: '0', overflow: 'hidden', 'box-sizing': 'border-box' }),
+    animate('{{ time }} {{ easing }}', style({ height: '*', padding: '*' })),
+], { params: { time: '350ms', easing: 'ease' } });
+const expandYWithMargin = animation([
+    style({ 'margin-top': '-100%' }),
+    animate('{{ time }} {{ easing }}', style({ 'margin-top': '0' })),
+], {
+    params: { time: '500ms', easing: 'ease' },
+});
+const expandX = animation([
+    style({ width: '0', overflow: 'hidden', 'box-sizing': 'border-box' }),
+    animate('{{ time }} {{ easing }}', style({ width: '*', padding: '*' })),
+], { params: { time: '350ms', easing: 'ease' } });
+const collapse = trigger('collapse', [
+    state('collapsed', style({ height: '0', overflow: 'hidden' })),
+    state('expanded', style({ height: '*', overflow: 'hidden' })),
+    transition('expanded => collapsed', useAnimation(collapseY)),
+    transition('collapsed => expanded', useAnimation(expandY)),
+]);
+const collapseWithMargin = trigger('collapseWithMargin', [
+    state('collapsed', style({ 'margin-top': '-100%' })),
+    state('expanded', style({ 'margin-top': '0' })),
+    transition('expanded => collapsed', useAnimation(collapseYWithMargin), {
+        params: { time: '400ms', easing: 'linear' },
+    }),
+    transition('collapsed => expanded', useAnimation(expandYWithMargin)),
+]);
+const collapseLinearWithMargin = trigger('collapseLinearWithMargin', [
+    state('collapsed', style({ 'margin-top': '-100vh' })),
+    state('expanded', style({ 'margin-top': '0' })),
+    transition('expanded => collapsed', useAnimation(collapseYWithMargin, {
+        params: { time: '200ms', easing: 'linear' },
+    })),
+    transition('collapsed => expanded', useAnimation(expandYWithMargin, {
+        params: { time: '250ms', easing: 'linear' },
+    })),
+]);
 
-class StyleService {
-    constructor(initialStyles, document) {
-        this.initialStyles = initialStyles;
-        this.document = document;
-        this.lastInjectedStyle = null;
-        this.initialized$ = new BehaviorSubject(false);
+class SubNavbarComponent {
+    constructor() {
+        this.injector = inject(Injector);
+        this.routerItem = input();
+        this.routeClick = new EventEmitter();
+        this.expand = new EventEmitter();
     }
-    async initStyles(direction) {
-        for (const style of this.initialStyles) {
-            await this.loadStyle(style, direction);
+    onItemClick(menuItem) {
+        let action$ = of(true);
+        if (menuItem.action) {
+            const result = menuItem.action();
+            action$ = getStream$(result);
         }
-        this.initialized$.next(true);
-    }
-    async loadStyle(style, direction) {
-        return new Promise((resolve, reject) => {
-            const linkElem = this.createLinkElem(style, direction, resolve);
-            //TODO: find a better way for understand style laaded by angular json
-            const appStyles = document.querySelector('link[rel="stylesheet"][href*="styles"]');
-            if (appStyles) {
-                if (this.lastInjectedStyle && this.lastInjectedStyle.isConnected) {
-                    this.lastInjectedStyle.insertAdjacentElement('afterend', linkElem);
-                }
-                else {
-                    appStyles.insertAdjacentElement('beforebegin', linkElem);
-                }
-            }
-            else {
-                this.document.head.appendChild(linkElem);
+        action$.pipe(take(1)).subscribe((result) => {
+            if (result) {
+                this.processItemClick(menuItem);
             }
-            this.lastInjectedStyle = linkElem;
-            return Promise.resolve(linkElem);
         });
     }
-    async replaceStyle(style, direction) {
-        const loaded = this.document.querySelector(`link#${style.bundleName}`);
-        if (loaded) {
-            loaded.remove();
+    onChildExpand(child) {
+        if (child.expanded) {
+            this.item?.children
+                ?.filter((otherChild) => otherChild !== child)
+                .forEach((otherChild) => {
+                otherChild.expanded = false;
+                otherChild.selected = false;
+            });
         }
-        return this.loadStyle(style, direction);
     }
-    async reloadInitialStyles(direction) {
-        for (const style of this.initialStyles) {
-            await this.replaceStyle(style, direction);
+    processItemClick(menuItem) {
+        if (menuItem.children?.length) {
+            menuItem.expanded = !menuItem.expanded;
+            this.expand.emit(menuItem);
+            return;
+        }
+        this.routeClick.emit(menuItem);
+        if (!this.routerItem()) {
+            menuItem.selected = true;
         }
     }
-    createLinkElem(style, direction, resolve) {
-        const linkElem = document.createElement('link');
-        linkElem.rel = 'stylesheet';
-        linkElem.id = style.bundleName;
-        linkElem.href = `${style.bundleName}${direction === 'rtl' ? '.rtl' : ''}.css`;
-        linkElem.onload = () => {
-            resolve(linkElem);
-        };
-        return linkElem;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: StyleService, deps: [{ token: LPX_STYLE_FINAL }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: StyleService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: StyleService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [LPX_STYLE_FINAL]
-                }] }, { type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }] });
-
-function createStyleFactory(handler) {
-    return handler || ((defaultValue) => defaultValue);
-}
-
-function styleLoadFactory(styleList, layoutStyles) {
-    styleList.push({
-        bundleName: 'ng-bundle',
-    });
-    styleList.push({
-        bundleName: 'font-bundle',
-    });
-    return [...styleList, ...layoutStyles];
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: SubNavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: SubNavbarComponent, isStandalone: true, selector: "lpx-sub-navbar", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: false, isRequired: false, transformFunction: null }, routerItem: { classPropertyName: "routerItem", publicName: "routerItem", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { routeClick: "routeClick", expand: "expand" }, ngImport: i0, template: "@if (item.component) {\r\n  <ng-container *ngComponentOutlet=\"item.component; injector: injector\" />\r\n} @else {\r\n  <ng-container *ngTemplateOutlet=\"defaultTemplate\" />\r\n}\r\n\r\n<ng-template #defaultTemplate>\r\n  <a\r\n    class=\"lpx-menu-item-link\"\r\n    [routerLink]=\"item.link\"\r\n    [class.selected]=\"item.selected\"\r\n    [class.expanded]=\"item.children?.length && item.expanded\"\r\n    (click)=\"onItemClick(item)\"\r\n  >\r\n    @if (item.icon) {\r\n      <lpx-icon class=\"lpx-menu-item-icon\" [iconClass]=\"item.icon\" />\r\n    }\r\n\r\n    <ng-container\r\n      *ngTemplateOutlet=\"\r\n        item.template || textTmpl;\r\n        context: { $implicit: item }\r\n      \"\r\n    />\r\n\r\n    <ng-template #textTmpl>\r\n      @if (item.text) {\r\n        @let isToolbarItem = item.text.split('::').length > 1;\r\n        <span class=\"lpx-menu-item-text hidden-in-hover-trigger\">\r\n          @if (isToolbarItem) {\r\n            {{ item.text | abpLocalization }}\r\n          } @else {\r\n            {{ item.text | lpxTranslate | async }}\r\n          }\r\n        </span>\r\n      }\r\n    </ng-template>\r\n\r\n    @if (item.children?.length) {\r\n      <lpx-icon\r\n        [iconClass]=\"item.expanded ? 'chevronUp' : 'chevronDown'\"\r\n        class=\"dd-icon hidden-in-hover-trigger\"\r\n      />\r\n    }\r\n  </a>\r\n\r\n  @if (item.children?.length) {\r\n    <ul\r\n      class=\"lpx-inner-menu hidden-in-hover-trigger\"\r\n      [class.collapsed]=\"!item.expanded\"\r\n    >\r\n      @for (child of item.children; track $index) {\r\n        <li\r\n          class=\"lpx-inner-menu-item\"\r\n          *lpxVisible=\"!child.visible || child.visible(child, injector)\"\r\n        >\r\n          <lpx-sub-navbar\r\n            [item]=\"child\"\r\n            (routeClick)=\"this.routeClick.emit($event)\"\r\n            (expand)=\"onChildExpand($event)\"\r\n          />\r\n        </li>\r\n      }\r\n    </ul>\r\n  }\r\n</ng-template>\r\n", dependencies: [{ kind: "component", type: SubNavbarComponent, selector: "lpx-sub-navbar", inputs: ["item", "routerItem"], outputs: ["routeClick", "expand"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: IconComponent, selector: "lpx-icon", inputs: ["iconClass"] }, { kind: "directive", type: LpxVisibleDirective, selector: "[lpxVisible]", inputs: ["lpxVisible"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "lpxTranslate" }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }], animations: [collapse], encapsulation: i0.ViewEncapsulation.None }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: SubNavbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lpx-sub-navbar', encapsulation: ViewEncapsulation.None, animations: [collapse], imports: [
+                        NgComponentOutlet,
+                        NgTemplateOutlet,
+                        RouterLink,
+                        IconComponent,
+                        LpxVisibleDirective,
+                        AsyncPipe,
+                        TranslatePipe,
+                        LocalizationPipe,
+                    ], template: "@if (item.component) {\r\n  <ng-container *ngComponentOutlet=\"item.component; injector: injector\" />\r\n} @else {\r\n  <ng-container *ngTemplateOutlet=\"defaultTemplate\" />\r\n}\r\n\r\n<ng-template #defaultTemplate>\r\n  <a\r\n    class=\"lpx-menu-item-link\"\r\n    [routerLink]=\"item.link\"\r\n    [class.selected]=\"item.selected\"\r\n    [class.expanded]=\"item.children?.length && item.expanded\"\r\n    (click)=\"onItemClick(item)\"\r\n  >\r\n    @if (item.icon) {\r\n      <lpx-icon class=\"lpx-menu-item-icon\" [iconClass]=\"item.icon\" />\r\n    }\r\n\r\n    <ng-container\r\n      *ngTemplateOutlet=\"\r\n        item.template || textTmpl;\r\n        context: { $implicit: item }\r\n      \"\r\n    />\r\n\r\n    <ng-template #textTmpl>\r\n      @if (item.text) {\r\n        @let isToolbarItem = item.text.split('::').length > 1;\r\n        <span class=\"lpx-menu-item-text hidden-in-hover-trigger\">\r\n          @if (isToolbarItem) {\r\n            {{ item.text | abpLocalization }}\r\n          } @else {\r\n            {{ item.text | lpxTranslate | async }}\r\n          }\r\n        </span>\r\n      }\r\n    </ng-template>\r\n\r\n    @if (item.children?.length) {\r\n      <lpx-icon\r\n        [iconClass]=\"item.expanded ? 'chevronUp' : 'chevronDown'\"\r\n        class=\"dd-icon hidden-in-hover-trigger\"\r\n      />\r\n    }\r\n  </a>\r\n\r\n  @if (item.children?.length) {\r\n    <ul\r\n      class=\"lpx-inner-menu hidden-in-hover-trigger\"\r\n      [class.collapsed]=\"!item.expanded\"\r\n    >\r\n      @for (child of item.children; track $index) {\r\n        <li\r\n          class=\"lpx-inner-menu-item\"\r\n          *lpxVisible=\"!child.visible || child.visible(child, injector)\"\r\n        >\r\n          <lpx-sub-navbar\r\n            [item]=\"child\"\r\n            (routeClick)=\"this.routeClick.emit($event)\"\r\n            (expand)=\"onChildExpand($event)\"\r\n          />\r\n        </li>\r\n      }\r\n    </ul>\r\n  }\r\n</ng-template>\r\n" }]
+        }], propDecorators: { item: [{
+                type: Input
+            }], routeClick: [{
+                type: Output
+            }], expand: [{
+                type: Output
+            }] } });
 
-const LPX_STYLE_PROVIDERS = [
-    {
-        provide: LPX_INITIAL_STYLES,
-        useFactory: () => [],
-    },
-    provideAppInitializer(() => {
-        return loadInitialStyles();
-    }),
-];
-function loadInitialStyles() {
-    const styleService = inject(StyleService);
-    const languageService = inject(LanguageService);
-    return languageService.languageChange$.pipe(take(1), switchMap((lang) => from(styleService.initStyles(lang.isRTL ? 'rtl' : 'ltr'))));
-}
-
-const WINDOW = new InjectionToken('WINDOW');
-
-function createWindowProvider(windowObj) {
-    return { provide: WINDOW, useValue: windowObj || window };
-}
-
-const RESPONSIVE_BREAKPOINTS = new InjectionToken('RESPONSIVE_BREAKPOINTS');
-
-class ResponsiveService {
-    constructor(providedBreakpoints, window) {
-        this.providedBreakpoints = providedBreakpoints;
-        this.window = window;
-        this.defaultBreakpoint = {
-            name: "all" /* ResponsiveTokens.all */,
-            width: 0,
-        };
-        this.breakpoints = this.buildBreakpoints(this.providedBreakpoints);
-        this.getCurrentSize = () => ({
-            height: this.window.innerHeight,
-            width: this.window.innerWidth,
+class NavbarRoutesComponent {
+    constructor() {
+        this.injector = inject(Injector);
+        this.routesService = inject(RoutesService);
+        this._sourceItems = signal([]);
+        this._processedItems = computed(() => {
+            const url = this.routesService.currentNavigation().split('?')[0];
+            const items = this._sourceItems();
+            if (!items?.length || !url) {
+                return items;
+            }
+            const updated = [...items];
+            this.fixNavbarItems(url, items);
+            return updated;
         });
-        this.mapSizeToBreakpoint = ({ width } = this.getCurrentSize()) => {
-            return this.breakpoints.find((s) => width >= s.width);
-        };
-        this.currentSize$ = new BehaviorSubject(this.mapSizeToBreakpoint());
-        this.shouldRenderWithCurrentSize = (query) => {
-            return this.matchQuery(query);
-        };
-        this.setupListener();
+        this.routerItem = input();
+        this.routeClick = new EventEmitter();
+        this.isExpandedOrSelected = (item) => !!(item.expanded || item.selected);
     }
-    setupListener() {
-        this.currentResolution$ = fromEvent(this.window, 'resize')
-            .pipe(map(this.getCurrentSize))
-            .pipe(startWith(this.getCurrentSize()));
-        this.currentResolution$
-            .pipe(map(this.mapSizeToBreakpoint), distinctUntilChanged())
-            .subscribe((current) => {
-            this.currentSize$.next(current);
-        });
+    set navbarItems(value) {
+        this._sourceItems.set(value);
     }
-    buildBreakpoints(breakpoints) {
-        return [
-            ...Object.keys(breakpoints)
-                .map((key) => ({
-                name: key,
-                width: breakpoints[key],
-            }))
-                .sort((a, b) => b.width - a.width),
-            this.defaultBreakpoint,
-        ];
+    get navbarItems() {
+        return this._processedItems();
     }
-    matchQuery(query) {
-        const { width } = this.getCurrentSize();
-        const tokens = query.split(' ');
-        const findInTokens = (size) => tokens.find((token) => token.split("-" /* ResponsiveTokens.separator */)[0] === size);
-        const matchedBreakpoint = this.breakpoints.find((breakpoint) => width >= breakpoint.width && findInTokens(breakpoint.name));
-        if (matchedBreakpoint) {
-            const token = findInTokens(matchedBreakpoint.name);
-            const shouldBeBigger = !token?.includes("none" /* ResponsiveTokens.none */);
-            return shouldBeBigger === width >= matchedBreakpoint.width;
+    get itemsFromGroup() {
+        if (!this.groupedItems) {
+            return undefined;
         }
-        return false;
+        return getItemsFromGroup(this.groupedItems);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ResponsiveService, deps: [{ token: RESPONSIVE_BREAKPOINTS }, { token: WINDOW }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ResponsiveService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ResponsiveService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [RESPONSIVE_BREAKPOINTS]
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [WINDOW]
-                }] }] });
-
-class ResponsiveDirective {
-    constructor(templateRef, viewContainer, service, parentCdr) {
-        this.templateRef = templateRef;
-        this.viewContainer = viewContainer;
-        this.service = service;
-        this.parentCdr = parentCdr;
-        this.hasRendered = false;
-        this.sub = new Subscription();
-        this.render = (shouldRender) => {
-            if (shouldRender && !this.hasRendered) {
-                this.viewContainer.createEmbeddedView(this.templateRef);
-                this.hasRendered = true;
-            }
-            else if (!shouldRender && this.hasRendered) {
-                this.viewContainer.clear();
-                this.hasRendered = false;
+    onSubnavbarExpand(menuItem, menuItems) {
+        if (menuItem.expanded) {
+            const items = this.itemsFromGroup || menuItems;
+            if (!items) {
+                return;
             }
-            this.parentCdr.detectChanges();
-        };
+            items
+                .filter((item) => item !== menuItem)
+                .forEach((item) => (item.expanded = false));
+        }
     }
-    ngOnInit() {
-        this.sub.add(this.service.currentSize$
-            .pipe(map((_) => this.service.shouldRenderWithCurrentSize(this.query)))
-            .subscribe(this.render));
+    onRouteClick(menuItem, menuItems) {
+        const expandedItems = menuItems?.filter(this.isExpandedOrSelected);
+        const expandedGroupItems = this.itemsFromGroup?.filter(this.isExpandedOrSelected);
+        const items = expandedGroupItems || expandedItems;
+        if (items) {
+            items
+                .filter((item) => item !== menuItem)
+                .reduce((acc, item) => {
+                return [...acc, item, ...this.flatChildren(item.children || [])];
+            }, [])
+                ?.filter((item) => !this.checkChildrenIncludesItem(item, menuItem) &&
+                item !== menuItem)
+                .forEach((item) => {
+                item.selected = false;
+                item.expanded = false;
+            });
+        }
+        this.routeClick.emit(menuItem);
     }
-    ngOnDestroy() {
-        this.sub.unsubscribe();
+    checkChildrenIncludesItem(item, menuItem) {
+        return (item.children?.reduce((acc, child) => acc ||
+            child === menuItem ||
+            this.checkChildrenIncludesItem(child, menuItem), false) || false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ResponsiveDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: ResponsiveService }, { token: i0.ChangeDetectorRef, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.8", type: ResponsiveDirective, isStandalone: false, selector: "[lpxResponsive]", inputs: { query: ["lpxResponsive", "query"] }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ResponsiveDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: false,
-                    selector: '[lpxResponsive]',
-                }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }, { type: ResponsiveService }, { type: i0.ChangeDetectorRef, decorators: [{
-                    type: Optional
-                }, {
-                    type: SkipSelf
-                }] }], propDecorators: { query: [{
-                type: Input,
-                args: ['lpxResponsive']
+    flatChildren(menuItems) {
+        return (menuItems?.reduce((acc, item) => {
+            return [...acc, item, ...this.flatChildren(item.children || [])];
+        }, []) || []);
+    }
+    fixNavbarItems(currentUrl, items) {
+        items.forEach((item) => {
+            const { link, children } = item;
+            if (children?.length) {
+                this.fixNavbarItems(currentUrl, children);
+                const hasActiveChild = children.some((child) => child.selected || child.expanded || child.link === currentUrl);
+                item.expanded ||= hasActiveChild || link === currentUrl;
+            }
+            else {
+                item.selected = link === currentUrl;
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: NavbarRoutesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: NavbarRoutesComponent, isStandalone: true, selector: "lpx-navbar-routes", inputs: { navbarItems: { classPropertyName: "navbarItems", publicName: "navbarItems", isSignal: false, isRequired: false, transformFunction: null }, groupedItems: { classPropertyName: "groupedItems", publicName: "groupedItems", isSignal: false, isRequired: false, transformFunction: null }, routerItem: { classPropertyName: "routerItem", publicName: "routerItem", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { routeClick: "routeClick" }, ngImport: i0, template: "<ul class=\"lpx-nav-menu\">\r\n  @if (groupedItems && groupedItems.length) {\r\n    @for (item of groupedItems; track $index) {\r\n      <ng-container\r\n        *ngTemplateOutlet=\"groupText; context: { $implicit: item }\"\r\n      />\r\n\r\n      @for (navbarItem of item.items; track $index) {\r\n        <ng-container\r\n          *ngTemplateOutlet=\"itemTemplate; context: { $implicit: navbarItem }\"\r\n        />\r\n      }\r\n    }\r\n  } @else {\r\n    <ng-container *ngTemplateOutlet=\"defaultRoute\" />\r\n  }\r\n</ul>\r\n\r\n<ng-template #defaultRoute>\r\n  @for (item of navbarItems; track $index) {\r\n    <ng-container\r\n      *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"\r\n    />\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #groupText let-item>\r\n  @if (item.items.length) {\r\n    <li class=\"group-menu-item hidden-in-hover-trigger\">\r\n      {{ item.group | lpxTranslate | async }}\r\n    </li>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #itemTemplate let-item>\r\n  <li\r\n    class=\"outer-menu-item\"\r\n    *lpxVisible=\"!item.visible || item.visible(item, injector)\"\r\n  >\r\n    <lpx-sub-navbar\r\n      [item]=\"item\"\r\n      (expand)=\"onSubnavbarExpand($event, navbarItems)\"\r\n      (routeClick)=\"onRouteClick($event, navbarItems)\"\r\n      [routerItem]=\"routerItem()\"\r\n    />\r\n  </li>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: LpxVisibleDirective, selector: "[lpxVisible]", inputs: ["lpxVisible"] }, { kind: "component", type: SubNavbarComponent, selector: "lpx-sub-navbar", inputs: ["item", "routerItem"], outputs: ["routeClick", "expand"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "lpxTranslate" }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: NavbarRoutesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lpx-navbar-routes', encapsulation: ViewEncapsulation.None, imports: [
+                        NgTemplateOutlet,
+                        LpxVisibleDirective,
+                        SubNavbarComponent,
+                        AsyncPipe,
+                        TranslatePipe,
+                    ], template: "<ul class=\"lpx-nav-menu\">\r\n  @if (groupedItems && groupedItems.length) {\r\n    @for (item of groupedItems; track $index) {\r\n      <ng-container\r\n        *ngTemplateOutlet=\"groupText; context: { $implicit: item }\"\r\n      />\r\n\r\n      @for (navbarItem of item.items; track $index) {\r\n        <ng-container\r\n          *ngTemplateOutlet=\"itemTemplate; context: { $implicit: navbarItem }\"\r\n        />\r\n      }\r\n    }\r\n  } @else {\r\n    <ng-container *ngTemplateOutlet=\"defaultRoute\" />\r\n  }\r\n</ul>\r\n\r\n<ng-template #defaultRoute>\r\n  @for (item of navbarItems; track $index) {\r\n    <ng-container\r\n      *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"\r\n    />\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #groupText let-item>\r\n  @if (item.items.length) {\r\n    <li class=\"group-menu-item hidden-in-hover-trigger\">\r\n      {{ item.group | lpxTranslate | async }}\r\n    </li>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #itemTemplate let-item>\r\n  <li\r\n    class=\"outer-menu-item\"\r\n    *lpxVisible=\"!item.visible || item.visible(item, injector)\"\r\n  >\r\n    <lpx-sub-navbar\r\n      [item]=\"item\"\r\n      (expand)=\"onSubnavbarExpand($event, navbarItems)\"\r\n      (routeClick)=\"onRouteClick($event, navbarItems)\"\r\n      [routerItem]=\"routerItem()\"\r\n    />\r\n  </li>\r\n</ng-template>\r\n" }]
+        }], propDecorators: { navbarItems: [{
+                type: Input
+            }], groupedItems: [{
+                type: Input
+            }], routeClick: [{
+                type: Output
             }] } });
 
-class LpxResponsiveModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LpxResponsiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: LpxResponsiveModule, declarations: [ResponsiveDirective], imports: [CommonModule], exports: [ResponsiveDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LpxResponsiveModule, imports: [CommonModule] }); }
+class NavbarRoutesDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: NavbarRoutesDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.7", type: NavbarRoutesDirective, isStandalone: true, selector: "[lpx-navbar-routes],[lpxNavbarRoutes]", exportAs: ["lpxNavbarRoutes"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LpxResponsiveModule, decorators: [{
-            type: NgModule,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: NavbarRoutesDirective, decorators: [{
+            type: Directive,
             args: [{
-                    declarations: [ResponsiveDirective],
-                    imports: [CommonModule],
-                    exports: [ResponsiveDirective],
+                    selector: '[lpx-navbar-routes],[lpxNavbarRoutes]',
+                    exportAs: 'lpxNavbarRoutes',
                 }]
         }] });
 
-const LPX_RESPONSIVE_BREAKPOINTS_DEFAULTS = {
-    sm: 480,
-    md: 768,
-    lg: 992,
-    xl: 1200,
-};
-
-function createResponsiveProvider(responsiveSettings) {
-    return {
-        provide: RESPONSIVE_BREAKPOINTS,
-        useValue: responsiveSettings || LPX_RESPONSIVE_BREAKPOINTS_DEFAULTS,
-    };
-}
-
-function createDirectionProvider(listenDirection) {
-    return provideAppInitializer(() => {
-        if (listenDirection) {
-            listenDirectionChange();
+class NavbarComponent {
+    constructor() {
+        this.layoutService = inject(LayoutService);
+        this.platformId = inject(PLATFORM_ID);
+        this.service = inject(NavbarService);
+        this.injector = inject(Injector);
+        this.didResized = false;
+        this.initialHover = false;
+        this.showFilterMenu$ = this.service.navbarItems$.pipe(map$1((items) => !!items.length));
+        this.contentBefore = this.flatContents(CONTENT_BEFORE_ROUTES);
+        this.contentAfter = this.flatContents(CONTENT_AFTER_ROUTES);
+    }
+    toggleSidebarHover() {
+        this.didResized = true;
+        this.layoutService.toggleClass('hover-trigger');
+        this.initialHover = !this.initialHover;
+        if (this.initialHover) {
+            this.layoutService.addClass('initial-hover');
         }
-    });
-}
-// subscribe to direction from documentElement and load direction stylesheet
-function listenDirectionChange() {
-    const languageService = inject(LanguageService);
-    const styleService = inject(StyleService);
-    return new Promise((resolve) => {
-        styleService.initialized$
-            .pipe(filter(Boolean), take(1), switchMap(() => languageService.languageChange$), distinctUntilKeyChanged('isRTL'))
-            .subscribe(async (lang) => {
-            const direction = lang?.isRTL ? 'rtl' : 'ltr';
-            const documentElement = document.documentElement;
-            if (documentElement.dir !== direction) {
-                documentElement.dir = direction;
-            }
-            await styleService.reloadInitialStyles(direction);
-            resolve(null);
-        });
-    });
+        else {
+            this.layoutService.removeClass('initial-hover');
+        }
+    }
+    handleInitialHover() {
+        if (this.initialHover) {
+            this.layoutService.removeClass('initial-hover');
+        }
+    }
+    ngAfterViewChecked() {
+        if (!isPlatformBrowser(this.platformId)) {
+            return;
+        }
+        if (this.didResized) {
+            this.didResized = false;
+            window.dispatchEvent(new Event('resize'));
+        }
+    }
+    flatContents(token) {
+        const contents = this.injector.get(token, []);
+        return contents.reduce((acc, val) => acc.concat(val), []);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: NavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: NavbarComponent, isStandalone: true, selector: "lpx-navbar", queries: [{ propertyName: "routesTemplate", first: true, predicate: NavbarRoutesDirective, descendants: true, read: TemplateRef }, { propertyName: "logoPanel", first: true, predicate: LogoPanelDirective, descendants: true }], ngImport: i0, template: "<nav class=\"lpx-nav\" (mouseenter)=\"handleInitialHover()\">\r\n  <div class=\"lpx-logo-container\">\r\n    <ng-container\r\n      *ngTemplateOutlet=\"logoPanel?.template || defaultLogo\"\r\n    ></ng-container>\r\n    <lpx-icon\r\n      class=\"menu-collapse-icon hidden-in-hover-trigger\"\r\n      iconClass=\"bi bi-filter-left\"\r\n      (click)=\"toggleSidebarHover()\"\r\n    ></lpx-icon>\r\n  </div>\r\n\r\n  @if (showFilterMenu$ | async) {\r\n    <ng-container\r\n      *ngTemplateOutlet=\"\r\n        customContentTemplate;\r\n        context: { $implicit: contentBefore }\r\n      \"\r\n    ></ng-container>\r\n  }\r\n\r\n  <ng-container\r\n    *ngTemplateOutlet=\"\r\n      routesTemplate || defaultRouteTemplate;\r\n      context: {\r\n        $implicit: service.navbarItems$ | async,\r\n        groupItems: service.groupedNavbarItems$ | async,\r\n      }\r\n    \"\r\n  ></ng-container>\r\n\r\n  <ng-container\r\n    *ngTemplateOutlet=\"\r\n      customContentTemplate;\r\n      context: { $implicit: contentAfter }\r\n    \"\r\n  ></ng-container>\r\n</nav>\r\n\r\n<ng-template #defaultRouteTemplate let-items let-groupItems=\"groupItems\">\r\n  <lpx-navbar-routes\r\n    [navbarItems]=\"items\"\r\n    [groupedItems]=\"groupItems\"\r\n    [routerItem]=\"true\"\r\n  ></lpx-navbar-routes>\r\n</ng-template>\r\n\r\n<ng-template #customContentTemplate let-contents>\r\n  @for (component of contents; track $index) {\r\n    <ng-container\r\n      *ngComponentOutlet=\"component; injector: injector\"\r\n    ></ng-container>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #defaultLogo>\r\n  <lpx-brand-logo />\r\n</ng-template>\r\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: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: BrandLogoComponent, selector: "lpx-brand-logo", inputs: ["layout"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: NavbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lpx-navbar', encapsulation: ViewEncapsulation.None, imports: [
+                        NgTemplateOutlet,
+                        IconComponent,
+                        NavbarRoutesComponent,
+                        NgComponentOutlet,
+                        BrandLogoComponent,
+                        AsyncPipe,
+                    ], template: "<nav class=\"lpx-nav\" (mouseenter)=\"handleInitialHover()\">\r\n  <div class=\"lpx-logo-container\">\r\n    <ng-container\r\n      *ngTemplateOutlet=\"logoPanel?.template || defaultLogo\"\r\n    ></ng-container>\r\n    <lpx-icon\r\n      class=\"menu-collapse-icon hidden-in-hover-trigger\"\r\n      iconClass=\"bi bi-filter-left\"\r\n      (click)=\"toggleSidebarHover()\"\r\n    ></lpx-icon>\r\n  </div>\r\n\r\n  @if (showFilterMenu$ | async) {\r\n    <ng-container\r\n      *ngTemplateOutlet=\"\r\n        customContentTemplate;\r\n        context: { $implicit: contentBefore }\r\n      \"\r\n    ></ng-container>\r\n  }\r\n\r\n  <ng-container\r\n    *ngTemplateOutlet=\"\r\n      routesTemplate || defaultRouteTemplate;\r\n      context: {\r\n        $implicit: service.navbarItems$ | async,\r\n        groupItems: service.groupedNavbarItems$ | async,\r\n      }\r\n    \"\r\n  ></ng-container>\r\n\r\n  <ng-container\r\n    *ngTemplateOutlet=\"\r\n      customContentTemplate;\r\n      context: { $implicit: contentAfter }\r\n    \"\r\n  ></ng-container>\r\n</nav>\r\n\r\n<ng-template #defaultRouteTemplate let-items let-groupItems=\"groupItems\">\r\n  <lpx-navbar-routes\r\n    [navbarItems]=\"items\"\r\n    [groupedItems]=\"groupItems\"\r\n    [routerItem]=\"true\"\r\n  ></lpx-navbar-routes>\r\n</ng-template>\r\n\r\n<ng-template #customContentTemplate let-contents>\r\n  @for (component of contents; track $index) {\r\n    <ng-container\r\n      *ngComponentOutlet=\"component; injector: injector\"\r\n    ></ng-container>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #defaultLogo>\r\n  <lpx-brand-logo />\r\n</ng-template>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { routesTemplate: [{
+                type: ContentChild,
+                args: [NavbarRoutesDirective, { read: TemplateRef }]
+            }], logoPanel: [{
+                type: ContentChild,
+                args: [LogoPanelDirective]
+            }] } });
 
-class LpxCoreModule {
-    static forRoot(options) {
-        return {
-            ngModule: LpxCoreModule,
-            providers: [
-                createResponsiveProvider(options?.responsiveSettings),
-                createWindowProvider(options?.window),
-                LpxIconModule.forRoot(options?.iconSettings).providers,
-                LpxLanguageModule.forRoot(options?.languageSettings)
-                    .providers,
-                LpxNavbarModule.forRoot(options?.navbarSettings).providers,
-                LpxBreadcrumbModule.forRoot().providers,
-                LPX_TRANSLATE_PROVIDERS,
-                ...LPX_STYLE_PROVIDERS,
-                createDirectionProvider(options?.listenDirectionChanges || true),
-            ],
-        };
+class SafeHtmlPipe {
+    constructor() {
+        this.sanitizer = inject(DomSanitizer);
+    }
+    transform(value) {
+        if (!value || typeof value !== 'string')
+            return '';
+        return this.sanitizer.sanitize(SecurityContext.HTML, value) || '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LpxCoreModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: LpxCoreModule, imports: [CommonModule, LpxVisibleDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LpxCoreModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: SafeHtmlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.0.7", ngImport: i0, type: SafeHtmlPipe, isStandalone: true, name: "lpxSafeHtml" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: SafeHtmlPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'lpxSafeHtml', standalone: true }]
+        }] });
+
+class LpxTranslateModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LpxTranslateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.7", ngImport: i0, type: LpxTranslateModule, imports: [CommonModule, TranslatePipe], exports: [TranslatePipe] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LpxTranslateModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LpxCoreModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LpxTranslateModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, LpxVisibleDirective],
+                    imports: [CommonModule, TranslatePipe],
+                    exports: [TranslatePipe],
                 }]
         }] });
 
-class AvatarComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: AvatarComponent, isStandalone: false, selector: "lpx-avatar", inputs: { avatar: "avatar" }, ngImport: i0, template: "@if (avatar && avatar.source) {\r\n  <div class=\"lpx-avatar\">\r\n    @switch (avatar.type) {\r\n      @case ('icon') {\r\n        <lpx-icon\r\n          class=\"lpx-avatar-icon\"\r\n          [iconClass]=\"avatar.source\"\r\n        ></lpx-icon>\r\n      }\r\n      @case ('image') {\r\n        <img class=\"lpx-avatar-img\" [src]=\"avatar.source\" />\r\n      }\r\n    }\r\n  </div>\r\n}\r\n", dependencies: [{ kind: "component", type: IconComponent, selector: "lpx-icon", inputs: ["iconClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AvatarComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: false, selector: 'lpx-avatar', encapsulation: ViewEncapsulation.None, template: "@if (avatar && avatar.source) {\r\n  <div class=\"lpx-avatar\">\r\n    @switch (avatar.type) {\r\n      @case ('icon') {\r\n        <lpx-icon\r\n          class=\"lpx-avatar-icon\"\r\n          [iconClass]=\"avatar.source\"\r\n        ></lpx-icon>\r\n      }\r\n      @case ('image') {\r\n        <img class=\"lpx-avatar-img\" [src]=\"avatar.source\" />\r\n      }\r\n    }\r\n  </div>\r\n}\r\n" }]
-        }], propDecorators: { avatar: [{
-                type: Input
-            }] } });
-
-class LpxAvatarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LpxAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: LpxAvatarModule, declarations: [AvatarComponent], imports: [CommonModule, LpxIconModule], exports: [AvatarComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LpxAvatarModule, imports: [CommonModule, LpxIconModule] }); }
+const exportedDeclarations = [
+    NavbarComponent,
+    SubNavbarComponent,
+    NavbarRoutesComponent,
+    NavbarRoutesDirective,
+];
+class LpxNavbarModule {
+    /**
+     * @deprecated `LpxNavbarModule.forRoot()` is deprecated. You can use `provideLpxCore` **function** instead.
+     */
+    static forRoot(options = {}) {
+        return {
+            ngModule: LpxNavbarModule,
+            providers: [provideLpxCore(SKIP_DEFAULTS, withNavbar(options))],
+        };
+    }
+    /**
+     * @deprecated `LpxNavbarModule.forChild()` is deprecated. You can use `provideLpxCore` **function** instead.
+     */
+    static forChild(options = {}) {
+        return {
+            ngModule: LpxNavbarModule,
+            providers: [provideLpxCore(SKIP_DEFAULTS, withNavbarChild(options))],
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LpxNavbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.7", ngImport: i0, type: LpxNavbarModule, imports: [CommonModule,
+            FormsModule,
+            RouterModule,
+            LpxBrandLogoModule,
+            LpxIconModule,
+            ToObservableModule,
+            LpxTranslateModule,
+            LpxVisibleDirective, NavbarComponent,
+            SubNavbarComponent,
+            NavbarRoutesComponent,
+            NavbarRoutesDirective], exports: [NavbarComponent,
+            SubNavbarComponent,
+            NavbarRoutesComponent,
+            NavbarRoutesDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LpxNavbarModule, imports: [CommonModule,
+            FormsModule,
+            RouterModule,
+            LpxBrandLogoModule,
+            LpxIconModule,
+            ToObservableModule,
+            LpxTranslateModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LpxAvatarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LpxNavbarModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [AvatarComponent],
-                    imports: [CommonModule, LpxIconModule],
-                    exports: [AvatarComponent],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        RouterModule,
+                        LpxBrandLogoModule,
+                        LpxIconModule,
+                        ToObservableModule,
+                        LpxTranslateModule,
+                        LpxVisibleDirective,
+                        ...exportedDeclarations,
+                    ],
+                    exports: [...exportedDeclarations],
                 }]
         }] });
 
@@ -1752,10 +1721,10 @@ class FooterLinksService {
     setFooterInfo(links) {
         this.store.set(links);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: FooterLinksService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: FooterLinksService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: FooterLinksService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: FooterLinksService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: FooterLinksService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: FooterLinksService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1763,17 +1732,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
         }] });
 
 class FooterComponent {
-    constructor(service) {
-        this.service = service;
+    constructor() {
+        this.service = inject(FooterLinksService);
         this.footerValues$ = this.service.footerInfo$;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: FooterComponent, deps: [{ token: FooterLinksService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: FooterComponent, isStandalone: false, selector: "lpx-footer", ngImport: i0, template: "@if (footerValues$ | async; as footerValues) {\r\n  <div class=\"lpx-footbar\">\r\n    <div class=\"lpx-footbar-copyright\">\r\n      @if (footerValues.descUrl) {\r\n        <a [routerLink]=\"[footerValues.descUrl]\"> {{ footerValues.desc }}</a>\r\n      } @else {\r\n        <a> {{ footerValues.desc }}</a>\r\n      }\r\n    </div>\r\n    <div class=\"lpx-footbar-solo-links\">\r\n      @for (footerLink of footerValues.footerLinks; track $index) {\r\n        @if (footerLink) {\r\n          <a [routerLink]=\"[footerLink.link]\">{{ footerLink.text }}</a>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", dependencies: [{ kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: FooterComponent, isStandalone: true, selector: "lpx-footer", ngImport: i0, template: "@if (footerValues$ | async; as footerValues) {\r\n  <div class=\"lpx-footbar\">\r\n    <div class=\"lpx-footbar-copyright\">\r\n      @if (footerValues.descUrl) {\r\n        <a [routerLink]=\"[footerValues.descUrl]\"> {{ footerValues.desc }}</a>\r\n      } @else {\r\n        <a> {{ footerValues.desc }}</a>\r\n      }\r\n    </div>\r\n    <div class=\"lpx-footbar-solo-links\">\r\n      @for (footerLink of footerValues.footerLinks; track $index) {\r\n        @if (footerLink) {\r\n          <a [routerLink]=\"[footerLink.link]\">{{ footerLink.text }}</a>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: FooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: FooterComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'lpx-footer', template: "@if (footerValues$ | async; as footerValues) {\r\n  <div class=\"lpx-footbar\">\r\n    <div class=\"lpx-footbar-copyright\">\r\n      @if (footerValues.descUrl) {\r\n        <a [routerLink]=\"[footerValues.descUrl]\"> {{ footerValues.desc }}</a>\r\n      } @else {\r\n        <a> {{ footerValues.desc }}</a>\r\n      }\r\n    </div>\r\n    <div class=\"lpx-footbar-solo-links\">\r\n      @for (footerLink of footerValues.footerLinks; track $index) {\r\n        @if (footerLink) {\r\n          <a [routerLink]=\"[footerLink.link]\">{{ footerLink.text }}</a>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n" }]
-        }], ctorParameters: () => [{ type: FooterLinksService }] });
+            args: [{ selector: 'lpx-footer', imports: [RouterLink, AsyncPipe], template: "@if (footerValues$ | async; as footerValues) {\r\n  <div class=\"lpx-footbar\">\r\n    <div class=\"lpx-footbar-copyright\">\r\n      @if (footerValues.descUrl) {\r\n        <a [routerLink]=\"[footerValues.descUrl]\"> {{ footerValues.desc }}</a>\r\n      } @else {\r\n        <a> {{ footerValues.desc }}</a>\r\n      }\r\n    </div>\r\n    <div class=\"lpx-footbar-solo-links\">\r\n      @for (footerLink of footerValues.footerLinks; track $index) {\r\n        @if (footerLink) {\r\n          <a [routerLink]=\"[footerLink.link]\">{{ footerLink.text }}</a>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n" }]
+        }] });
 
 class LpxFooterModule {
     static forRoot() {
@@ -1782,256 +1751,308 @@ class LpxFooterModule {
             providers: [],
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LpxFooterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: LpxFooterModule, declarations: [FooterComponent], imports: [CommonModule, RouterModule], exports: [FooterComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LpxFooterModule, imports: [CommonModule, RouterModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LpxFooterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.7", ngImport: i0, type: LpxFooterModule, imports: [CommonModule, RouterModule, FooterComponent], exports: [FooterComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LpxFooterModule, imports: [CommonModule, RouterModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LpxFooterModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LpxFooterModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [FooterComponent],
                     exports: [FooterComponent],
-                    imports: [CommonModule, RouterModule],
+                    imports: [CommonModule, RouterModule, FooterComponent],
                 }]
         }] });
 
-var LpxLogoFeatureKind;
-(function (LpxLogoFeatureKind) {
-    LpxLogoFeatureKind[LpxLogoFeatureKind["Options"] = 0] = "Options";
-})(LpxLogoFeatureKind || (LpxLogoFeatureKind = {}));
-function makeLpxLogoFeature(kind, providers) {
+var LpxCoreFeatureKind;
+(function (LpxCoreFeatureKind) {
+    LpxCoreFeatureKind[LpxCoreFeatureKind["Options"] = 0] = "Options";
+    LpxCoreFeatureKind[LpxCoreFeatureKind["Icon"] = 1] = "Icon";
+    LpxCoreFeatureKind[LpxCoreFeatureKind["Language"] = 2] = "Language";
+    LpxCoreFeatureKind[LpxCoreFeatureKind["Navbar"] = 3] = "Navbar";
+    LpxCoreFeatureKind[LpxCoreFeatureKind["NavbarChild"] = 4] = "NavbarChild";
+    LpxCoreFeatureKind[LpxCoreFeatureKind["SkipDefaults"] = 5] = "SkipDefaults";
+})(LpxCoreFeatureKind || (LpxCoreFeatureKind = {}));
+function makeLpxCoreFeature(kind, providers) {
     return {
         ɵkind: kind,
         ɵproviders: providers,
     };
 }
-function withEnvironmentOptions(options = {}) {
-    const { name, logoUrl } = options.application || {};
-    return makeLpxLogoFeature(LpxLogoFeatureKind.Options, [
+const SKIP_DEFAULTS = makeLpxCoreFeature(LpxCoreFeatureKind.SkipDefaults, []);
+function withIcon(iconSettings = {}) {
+    return makeLpxCoreFeature(LpxCoreFeatureKind.Icon, [
         {
-            provide: LOGO_URL_TOKEN,
-            useValue: logoUrl || '',
+            provide: LEPTON_X_ICON_SET,
+            useValue: iconSettings.iconSet || ICON_MAP,
         },
+    ]);
+}
+function withLanguage(languageOptions = {}) {
+    return makeLpxCoreFeature(LpxCoreFeatureKind.Language, [
         {
-            provide: LOGO_APP_NAME_TOKEN,
-            useValue: name || 'ProjectName',
+            provide: LPX_LANGUAGE,
+            useValue: languageOptions.languages || [],
+        },
+        {
+            provide: LPX_TRANSLATE_TOKEN,
+            useValue: [LanguageTranslateDefaults],
+            multi: true,
         },
+        LanguageService,
     ]);
 }
-function provideLogo(...features) {
+function withNavbar(navbarOptions = {}) {
+    const { menuItems, contentBeforeRoutes, contentAfterRoutes } = navbarOptions;
+    return makeLpxCoreFeature(LpxCoreFeatureKind.Navbar, [
+        {
+            provide: LPX_MENU_ITEMS,
+            useValue: menuItems || [],
+        },
+        {
+            provide: CONTENT_AFTER_ROUTES,
+            useValue: contentAfterRoutes || [],
+            multi: true,
+        },
+        {
+            provide: CONTENT_BEFORE_ROUTES,
+            useValue: contentBeforeRoutes || [],
+            multi: true,
+        },
+    ]);
+}
+function withNavbarChild(navbarChildOptions = {}) {
+    return makeLpxCoreFeature(LpxCoreFeatureKind.NavbarChild, [
+        {
+            provide: CONTENT_AFTER_ROUTES,
+            useValue: navbarChildOptions.contentAfterRoutes || [],
+            multi: true,
+        },
+        {
+            provide: CONTENT_BEFORE_ROUTES,
+            useValue: navbarChildOptions.contentBeforeRoutes || [],
+            multi: true,
+        },
+    ]);
+}
+function withLpxCoreOptions(options = {}) {
+    const { responsiveSettings, window, iconSettings, languageSettings, navbarSettings, listenDirectionChanges, } = options;
+    const iconOptions = withIcon(iconSettings);
+    const languageOptions = withLanguage(languageSettings);
+    const navbarOptions = withNavbar(navbarSettings);
+    return [
+        iconOptions,
+        languageOptions,
+        navbarOptions,
+        makeLpxCoreFeature(LpxCoreFeatureKind.Options, [
+            createDirectionProvider(listenDirectionChanges || true),
+            createResponsiveProvider(responsiveSettings),
+            createWindowProvider(window),
+        ]),
+    ];
+}
+function provideLpxBreadcrumb() {
+    return provideAppInitializer(() => {
+        const breadcrumb = inject(BreadcrumbRouteListenerService);
+        breadcrumb.subscribeRoute();
+    });
+}
+function provideLpxCore(...features) {
     const providers = [];
+    const skipDefaults = features.some((feature) => feature.ɵkind === LpxCoreFeatureKind.SkipDefaults);
+    if (!skipDefaults) {
+        providers.push(provideLpxBreadcrumb(), ...LPX_STYLE_PROVIDERS, ...LPX_TRANSLATE_PROVIDERS);
+    }
     features.forEach(({ ɵproviders }) => providers.push(...ɵproviders));
     return makeEnvironmentProviders(providers);
 }
 
+class LpxCoreModule {
+    /**
+     * @deprecated `LpxCoreModule.forRoot()` is deprecated. You can use `provideLpxCore` **function** instead.
+     */
+    static forRoot(options) {
+        return {
+            ngModule: LpxCoreModule,
+            providers: [provideLpxCore(...withLpxCoreOptions(options))],
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LpxCoreModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.7", ngImport: i0, type: LpxCoreModule, imports: [CommonModule, LpxVisibleDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LpxCoreModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LpxCoreModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, LpxVisibleDirective],
+                }]
+        }] });
+
 class BreadcrumbPanelDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: BreadcrumbPanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.8", type: BreadcrumbPanelDirective, isStandalone: false, selector: "ng-template[lpx-breadcrumb-panel]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BreadcrumbPanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.7", type: BreadcrumbPanelDirective, isStandalone: true, selector: "ng-template[lpx-breadcrumb-panel]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: BreadcrumbPanelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BreadcrumbPanelDirective, decorators: [{
             type: Directive,
-            args: [{
-                    standalone: false,
-                    selector: 'ng-template[lpx-breadcrumb-panel]',
-                }]
+            args: [{ selector: 'ng-template[lpx-breadcrumb-panel]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 
 class ContentPanelDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ContentPanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.8", type: ContentPanelDirective, isStandalone: false, selector: "ng-template[lpx-content]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: ContentPanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.7", type: ContentPanelDirective, isStandalone: true, selector: "ng-template[lpx-content]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ContentPanelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: ContentPanelDirective, decorators: [{
             type: Directive,
-            args: [{
-                    standalone: false,
-                    selector: 'ng-template[lpx-content]',
-                }]
+            args: [{ selector: 'ng-template[lpx-content]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 
 class CurrentUserImagePanelDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: CurrentUserImagePanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.8", type: CurrentUserImagePanelDirective, isStandalone: false, selector: "ng-template[lpx-current-user-image-panel]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: CurrentUserImagePanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.7", type: CurrentUserImagePanelDirective, isStandalone: true, selector: "ng-template[lpx-current-user-image-panel]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: CurrentUserImagePanelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: CurrentUserImagePanelDirective, decorators: [{
             type: Directive,
-            args: [{
-                    standalone: false,
-                    selector: 'ng-template[lpx-current-user-image-panel]',
-                }]
+            args: [{ selector: 'ng-template[lpx-current-user-image-panel]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 
 class CurrentUserPanelDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: CurrentUserPanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.8", type: CurrentUserPanelDirective, isStandalone: false, selector: "ng-template[lpx-current-user-panel]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: CurrentUserPanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.7", type: CurrentUserPanelDirective, isStandalone: true, selector: "ng-template[lpx-current-user-panel]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: CurrentUserPanelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: CurrentUserPanelDirective, decorators: [{
             type: Directive,
-            args: [{
-                    standalone: false,
-                    selector: 'ng-template[lpx-current-user-panel]',
-                }]
+            args: [{ selector: 'ng-template[lpx-current-user-panel]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 
 class FooterPanelDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: FooterPanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.8", type: FooterPanelDirective, isStandalone: false, selector: "ng-template[lpx-footer-panel]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: FooterPanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.7", type: FooterPanelDirective, isStandalone: true, selector: "ng-template[lpx-footer-panel]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: FooterPanelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: FooterPanelDirective, decorators: [{
             type: Directive,
-            args: [{
-                    standalone: false,
-                    selector: 'ng-template[lpx-footer-panel]',
-                }]
+            args: [{ selector: 'ng-template[lpx-footer-panel]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 
 class LanguagePanelDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LanguagePanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.8", type: LanguagePanelDirective, isStandalone: false, selector: "ng-template[lpx-language-panel]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LanguagePanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.7", type: LanguagePanelDirective, isStandalone: true, selector: "ng-template[lpx-language-panel]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LanguagePanelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LanguagePanelDirective, decorators: [{
             type: Directive,
-            args: [{
-                    standalone: false,
-                    selector: 'ng-template[lpx-language-panel]',
-                }]
+            args: [{ selector: 'ng-template[lpx-language-panel]', }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 
 class MobileNavbarPanelDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: MobileNavbarPanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.8", type: MobileNavbarPanelDirective, isStandalone: false, selector: "ng-template[lpx-mobile-navbar-panel]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: MobileNavbarPanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.7", type: MobileNavbarPanelDirective, isStandalone: true, selector: "ng-template[lpx-mobile-navbar-panel]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: MobileNavbarPanelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: MobileNavbarPanelDirective, decorators: [{
             type: Directive,
-            args: [{
-                    standalone: false,
-                    selector: 'ng-template[lpx-mobile-navbar-panel]',
-                }]
+            args: [{ selector: 'ng-template[lpx-mobile-navbar-panel]', }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 
 class MobileNavbarSettingsPanelDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: MobileNavbarSettingsPanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.8", type: MobileNavbarSettingsPanelDirective, isStandalone: false, selector: "ng-template[lpx-mobile-navbar-settings-panel]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: MobileNavbarSettingsPanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.7", type: MobileNavbarSettingsPanelDirective, isStandalone: true, selector: "ng-template[lpx-mobile-navbar-settings-panel]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: MobileNavbarSettingsPanelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: MobileNavbarSettingsPanelDirective, decorators: [{
             type: Directive,
-            args: [{
-                    standalone: false,
-                    selector: 'ng-template[lpx-mobile-navbar-settings-panel]',
-                }]
+            args: [{ selector: 'ng-template[lpx-mobile-navbar-settings-panel]', }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 
 class MobileNavbarProfilePanelDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: MobileNavbarProfilePanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.8", type: MobileNavbarProfilePanelDirective, isStandalone: false, selector: "ng-template[lpx-mobile-navbar-profile-panel]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: MobileNavbarProfilePanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.7", type: MobileNavbarProfilePanelDirective, isStandalone: true, selector: "ng-template[lpx-mobile-navbar-profile-panel]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: MobileNavbarProfilePanelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: MobileNavbarProfilePanelDirective, decorators: [{
             type: Directive,
-            args: [{
-                    standalone: false,
-                    selector: 'ng-template[lpx-mobile-navbar-profile-panel]',
-                }]
+            args: [{ selector: 'ng-template[lpx-mobile-navbar-profile-panel]', }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 
 class NavbarPanelDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: NavbarPanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.8", type: NavbarPanelDirective, isStandalone: false, selector: "ng-template[lpx-navbar-panel]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: NavbarPanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.7", type: NavbarPanelDirective, isStandalone: true, selector: "ng-template[lpx-navbar-panel]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: NavbarPanelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: NavbarPanelDirective, decorators: [{
             type: Directive,
-            args: [{
-                    standalone: false,
-                    selector: 'ng-template[lpx-navbar-panel]',
-                }]
+            args: [{ selector: 'ng-template[lpx-navbar-panel]', }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 
 class NavitemPanelDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: NavitemPanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.8", type: NavitemPanelDirective, isStandalone: false, selector: "ng-template[lpx-navitem-panel]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: NavitemPanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.7", type: NavitemPanelDirective, isStandalone: true, selector: "ng-template[lpx-navitem-panel]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: NavitemPanelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: NavitemPanelDirective, decorators: [{
             type: Directive,
-            args: [{
-                    standalone: false,
-                    selector: 'ng-template[lpx-navitem-panel]',
-                }]
+            args: [{ selector: 'ng-template[lpx-navitem-panel]', }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 
 class ToolbarPanelDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ToolbarPanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.8", type: ToolbarPanelDirective, isStandalone: false, selector: "ng-template[lpx-toolbar-panel]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: ToolbarPanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.7", type: ToolbarPanelDirective, isStandalone: true, selector: "ng-template[lpx-toolbar-panel]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ToolbarPanelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: ToolbarPanelDirective, decorators: [{
             type: Directive,
-            args: [{
-                    standalone: false,
-                    selector: 'ng-template[lpx-toolbar-panel]',
-                }]
+            args: [{ selector: 'ng-template[lpx-toolbar-panel]', }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 
 class TopNavbarPanelDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: TopNavbarPanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.8", type: TopNavbarPanelDirective, isStandalone: false, selector: "ng-template[lpx-top-navbar-panel]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: TopNavbarPanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.7", type: TopNavbarPanelDirective, isStandalone: true, selector: "ng-template[lpx-top-navbar-panel]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: TopNavbarPanelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: TopNavbarPanelDirective, decorators: [{
             type: Directive,
-            args: [{
-                    standalone: false,
-                    selector: 'ng-template[lpx-top-navbar-panel]',
-                }]
+            args: [{ selector: 'ng-template[lpx-top-navbar-panel]', }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 
 class SettingsPanelDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: SettingsPanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.8", type: SettingsPanelDirective, isStandalone: false, selector: "ng-template[lpx-settings-panel]", ngImport: i0 }); }
+    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.ɵ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: "19.1.8", ngImport: i0, type: SettingsPanelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: SettingsPanelDirective, decorators: [{
             type: Directive,
-            args: [{
-                    standalone: false,
-                    selector: 'ng-template[lpx-settings-panel]',
-                }]
+            args: [{ selector: 'ng-template[lpx-settings-panel]', }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 
 const declarationsAndExports = [
@@ -2052,8 +2073,8 @@ const declarationsAndExports = [
     ToolbarPanelDirective,
 ];
 class PanelsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: PanelsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: PanelsModule, declarations: [BreadcrumbPanelDirective,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PanelsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.7", ngImport: i0, type: PanelsModule, imports: [CommonModule, BreadcrumbPanelDirective,
             ContentPanelDirective,
             CurrentUserImagePanelDirective,
             CurrentUserPanelDirective,
@@ -2067,7 +2088,7 @@ class PanelsModule {
             NavitemPanelDirective,
             SettingsPanelDirective,
             TopNavbarPanelDirective,
-            ToolbarPanelDirective], imports: [CommonModule], exports: [BreadcrumbPanelDirective,
+            ToolbarPanelDirective], exports: [BreadcrumbPanelDirective,
             ContentPanelDirective,
             CurrentUserImagePanelDirective,
             CurrentUserPanelDirective,
@@ -2082,13 +2103,12 @@ class PanelsModule {
             SettingsPanelDirective,
             TopNavbarPanelDirective,
             ToolbarPanelDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: PanelsModule, imports: [CommonModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PanelsModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: PanelsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PanelsModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...declarationsAndExports],
-                    imports: [CommonModule],
+                    imports: [CommonModule, ...declarationsAndExports],
                     exports: [...declarationsAndExports],
                 }]
         }] });
@@ -2123,10 +2143,10 @@ class ToolbarService {
         const updateItems = [...items.slice(0, index), ...items.slice(index + 1)];
         this.store.patch({ items: updateItems });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ToolbarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ToolbarService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: ToolbarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: ToolbarService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ToolbarService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: ToolbarService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -2135,5 +2155,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AvatarComponent, BodyService, BrandLogoComponent, BreadcrumbComponent, BreadcrumbPanelDirective, BreadcrumbRouteListenerService, BreadcrumbService, CONTENT_AFTER_ROUTES, CONTENT_BEFORE_ROUTES, ClickOutsideDirective, ContentPanelDirective, CurrentUserImagePanelDirective, CurrentUserPanelDirective, DataStore, DefaultAuthService, DefaultTranslateService, FooterComponent, FooterLinksService, FooterPanelDirective, ICON_MAP, IconComponent, LEPTON_X_ICON_SET, LOGO_APP_NAME_TOKEN, LOGO_URL_TOKEN, LPX_AUTH_SERVICE_PROVIDER, LPX_AUTH_SERVICE_TOKEN, LPX_INITIAL_STYLES, LPX_LANGUAGE, LPX_LAYOUT_STYLE_FINAL, LPX_MENU_ITEMS, LPX_RESPONSIVE_BREAKPOINTS_DEFAULTS, LPX_STYLE_FINAL, LPX_STYLE_PROVIDERS, LPX_TRANSLATE_SERVICE_TOKEN, LPX_TRANSLATE_TOKEN, LanguagePanelDirective, LanguageService, LanguageTranslateDefaults, LanguageTranslateKeys, LayoutService, LogoPanelDirective, LpxAvatarModule, LpxBrandLogoModule, LpxBreadcrumbModule, LpxClickOutsideModule, LpxCoreModule, LpxFooterModule, LpxIconModule, LpxLanguageModule, LpxLocalStorageService, LpxLogoFeatureKind, LpxNavbarModule, LpxResponsiveModule, LpxThemeTranslateService, LpxTranslateModule, LpxVisibleDirective, MobileNavbarPanelDirective, MobileNavbarProfilePanelDirective, MobileNavbarSettingsPanelDirective, NavbarComponent, NavbarPanelDirective, NavbarRoutesComponent, NavbarRoutesDirective, NavbarService, NavitemPanelDirective, OTHERS_GROUP_KEY, PanelsModule, RESPONSIVE_BREAKPOINTS, ResponsiveDirective, ResponsiveService, RoutesService, SafeHtmlPipe, SettingsPanelDirective, StyleService, SubNavbarComponent, ToObservableModule, ToObservablePipe, ToolbarPanelDirective, ToolbarService, TopNavbarPanelDirective, TranslatePipe, UserProfileService, WINDOW, breadCrumbInit, createDirectionProvider, createGroupMap, createResponsiveProvider, createStyleFactory, createWindowProvider, exportedDeclarations, flatArrayDeepToObject, getItemsFromGroup, getStream$, isArray, isNullOrUndefined, layouts, listenDirectionChange, loadInitialStyles, provideLogo, sortItems, styleLoadFactory, withEnvironmentOptions };
+export { AvatarComponent, BodyService, BrandLogoComponent, BreadcrumbComponent, BreadcrumbPanelDirective, BreadcrumbRouteListenerService, BreadcrumbService, CONTENT_AFTER_ROUTES, CONTENT_BEFORE_ROUTES, ClickOutsideDirective, ContentPanelDirective, CurrentUserImagePanelDirective, CurrentUserPanelDirective, DataStore, DefaultAuthService, DefaultTranslateService, FooterComponent, FooterLinksService, FooterPanelDirective, ICON_MAP, IconComponent, LEPTON_X_ICON_SET, LOGO_APP_NAME_TOKEN, LOGO_URL_TOKEN, LPX_AUTH_SERVICE_PROVIDER, LPX_AUTH_SERVICE_TOKEN, LPX_INITIAL_STYLES, LPX_LANGUAGE, LPX_LAYOUT_STYLE_FINAL, LPX_MENU_ITEMS, LPX_RESPONSIVE_BREAKPOINTS_DEFAULTS, LPX_STYLE_FINAL, LPX_STYLE_PROVIDERS, LPX_TRANSLATE_PROVIDERS, LPX_TRANSLATE_SERVICE_PROVIDER, LPX_TRANSLATE_SERVICE_TOKEN, LPX_TRANSLATE_TOKEN, LanguagePanelDirective, LanguageService, LanguageTranslateDefaults, LanguageTranslateKeys, LayoutService, Layouts, LogoPanelDirective, LpxAvatarModule, LpxBrandLogoModule, LpxBreadcrumbModule, LpxClickOutsideModule, LpxCoreFeatureKind, LpxCoreModule, LpxFooterModule, LpxIconModule, LpxLanguageModule, LpxLocalStorageService, LpxLogoFeatureKind, LpxNavbarModule, LpxResponsiveModule, LpxThemeTranslateService, LpxTranslateModule, LpxVisibleDirective, MobileNavbarPanelDirective, MobileNavbarProfilePanelDirective, MobileNavbarSettingsPanelDirective, NavbarComponent, NavbarPanelDirective, NavbarRoutesComponent, NavbarRoutesDirective, NavbarService, NavitemPanelDirective, OTHERS_GROUP_KEY, PanelsModule, RESPONSIVE_BREAKPOINTS, ResponsiveDirective, ResponsiveService, RoutesService, SKIP_DEFAULTS, SafeHtmlPipe, SettingsPanelDirective, StyleService, SubNavbarComponent, ToObservableModule, ToObservablePipe, ToolbarPanelDirective, ToolbarService, TopNavbarPanelDirective, TranslatePipe, UserProfileService, WINDOW, createDirectionProvider, createGroupMap, createResponsiveProvider, createStyleFactory, createWindowProvider, exportedDeclarations$1 as exportedDeclarations, flatArrayDeepToObject, getItemsFromGroup, getStream$, isArray, isNullOrUndefined, listenDirectionChange, loadInitialStyles, provideLogo, provideLpxBreadcrumb, provideLpxCore, sortItems, styleLoadFactory, withEnvironmentOptions, withIcon, withLanguage, withLpxCoreOptions, withNavbar, withNavbarChild };
 //# sourceMappingURL=volo-ngx-lepton-x.core.mjs.map