@volo/ngx-lepton-x.core 2.2.1 → 2.3.0-rc.1

package/{fesm2020 → fesm2022}/volo-ngx-lepton-x.core.mjs

@@ -10,1918 +10,1918 @@ import { FormsModule } from '@angular/forms';
 import PerfectScrollbar from 'perfect-scrollbar';
 import { DomSanitizer } from '@angular/platform-browser';
 
-class LpxPerfectScrollbar {
-    constructor() {
-        this.router = inject(Router);
-    }
+class LpxPerfectScrollbar {
+    constructor() {
+        this.router = inject(Router);
+    }
 }
 
 const LPX_LANGUAGE = new InjectionToken('LPX_LANGUAGE');
 
-class DataStore {
-    constructor(initialState) {
-        this.initialState = initialState;
-        this.state$ = new BehaviorSubject(this.initialState);
-        this.update$ = new Subject();
-        this.sliceState = (selector, compareFn = (s1, s2) => s1 === s2) => this.state$.pipe(map(selector), distinctUntilChanged(compareFn));
-        this.sliceUpdate = (selector, filterFn = (x) => x !== undefined) => this.update$.pipe(map(selector), filter(filterFn));
-    }
-    get state() {
-        return this.state$.value;
-    }
-    patch(state) {
-        let patchedState = state;
-        if (typeof state === 'object' && !Array.isArray(state)) {
-            patchedState = { ...this.state, ...state };
-        }
-        this.state$.next(patchedState);
-        this.update$.next(patchedState);
-    }
-    set(state) {
-        this.state$.next(state);
-        this.update$.next(state);
-    }
-    reset() {
-        this.set(this.initialState);
-    }
-}
-
-var LanguageTranslateKeys;
-(function (LanguageTranslateKeys) {
-    LanguageTranslateKeys["SettingsTitle"] = "language.settings.title";
-})(LanguageTranslateKeys || (LanguageTranslateKeys = {}));
-const LanguageTranslateDefaults = {
-    [LanguageTranslateKeys.SettingsTitle]: 'Language Options',
+class DataStore {
+    get state() {
+        return this.state$.value;
+    }
+    constructor(initialState) {
+        this.initialState = initialState;
+        this.state$ = new BehaviorSubject(this.initialState);
+        this.update$ = new Subject();
+        this.sliceState = (selector, compareFn = (s1, s2) => s1 === s2) => this.state$.pipe(map(selector), distinctUntilChanged(compareFn));
+        this.sliceUpdate = (selector, filterFn = (x) => x !== undefined) => this.update$.pipe(map(selector), filter(filterFn));
+    }
+    patch(state) {
+        let patchedState = state;
+        if (typeof state === 'object' && !Array.isArray(state)) {
+            patchedState = { ...this.state, ...state };
+        }
+        this.state$.next(patchedState);
+        this.update$.next(patchedState);
+    }
+    set(state) {
+        this.state$.next(state);
+        this.update$.next(state);
+    }
+    reset() {
+        this.set(this.initialState);
+    }
+}
+
+var LanguageTranslateKeys;
+(function (LanguageTranslateKeys) {
+    LanguageTranslateKeys["SettingsTitle"] = "language.settings.title";
+})(LanguageTranslateKeys || (LanguageTranslateKeys = {}));
+const LanguageTranslateDefaults = {
+    [LanguageTranslateKeys.SettingsTitle]: 'Language Options',
 };
 
-class LanguageService {
-    constructor(languages) {
-        this.languages = languages;
-        this.store = new DataStore({ languages: [] });
-        this.id = 'languages';
-        this.convertLanguageToNavbarItem = (languages) => {
-            return languages.map((lang) => ({
-                icon: '',
-                text: lang.displayName,
-                selected: lang.selected,
-                action: () => {
-                    this.setSelectedLanguage(lang);
-                    return true;
-                },
-            }));
-        };
-        this.selectedLanguage$ = this.store.sliceState(({ selectedLanguage }) => selectedLanguage);
-        this.languageChange$ = this.selectedLanguage$.pipe(
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        filter((lang) => lang !== undefined), distinctUntilChanged((a, b) => a?.cultureName === b?.cultureName));
-        this.languages$ = this.store.sliceState((state) => state.languages);
-        this.languagesAsNavbarItems$ = this.languages$.pipe(map(this.convertLanguageToNavbarItem));
-        //TODO: PROVIDE API
-        this.languagesAsSettingsGroup$ = this.languagesAsNavbarItems$.pipe(map((languages) => ({
-            text: LanguageTranslateKeys.SettingsTitle,
-            icon: 'bi bi-globe',
-            id: this.id,
-            children: languages,
-        })));
-        this.init(this.languages);
-    }
-    get selectedLanguage() {
-        return this.store.state.selectedLanguage;
-    }
-    setLanguages(languages) {
-        this.init(languages);
-    }
-    init(languages) {
-        this.store.patch({
-            languages,
-            selectedLanguage: languages.find((lang) => lang.selected),
-        });
-    }
-    setSelectedLanguage(lang) {
-        this.store.patch({
-            selectedLanguage: lang,
-        });
-    }
-}
-LanguageService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LanguageService, deps: [{ token: LPX_LANGUAGE }], target: i0.ɵɵFactoryTarget.Injectable });
-LanguageService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LanguageService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LanguageService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [LPX_LANGUAGE]
+class LanguageService {
+    get selectedLanguage() {
+        return this.store.state.selectedLanguage;
+    }
+    constructor(languages) {
+        this.languages = languages;
+        this.store = new DataStore({ languages: [] });
+        this.id = 'languages';
+        this.convertLanguageToNavbarItem = (languages) => {
+            return languages.map((lang) => ({
+                icon: '',
+                text: lang.displayName,
+                selected: lang.selected,
+                action: () => {
+                    this.setSelectedLanguage(lang);
+                    return true;
+                },
+            }));
+        };
+        this.selectedLanguage$ = this.store.sliceState(({ selectedLanguage }) => selectedLanguage);
+        this.languageChange$ = this.selectedLanguage$.pipe(
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        filter((lang) => lang !== undefined), distinctUntilChanged((a, b) => a?.cultureName === b?.cultureName));
+        this.languages$ = this.store.sliceState((state) => state.languages);
+        this.languagesAsNavbarItems$ = this.languages$.pipe(map(this.convertLanguageToNavbarItem));
+        //TODO: PROVIDE API
+        this.languagesAsSettingsGroup$ = this.languagesAsNavbarItems$.pipe(map((languages) => ({
+            text: LanguageTranslateKeys.SettingsTitle,
+            icon: 'bi bi-globe',
+            id: this.id,
+            children: languages,
+        })));
+        this.init(this.languages);
+    }
+    setLanguages(languages) {
+        this.init(languages);
+    }
+    init(languages) {
+        this.store.patch({
+            languages,
+            selectedLanguage: languages.find((lang) => lang.selected),
+        });
+    }
+    setSelectedLanguage(lang) {
+        this.store.patch({
+            selectedLanguage: lang,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: LanguageService, deps: [{ token: LPX_LANGUAGE }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: LanguageService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: LanguageService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LPX_LANGUAGE]
                 }] }]; } });
 
-const LPX_TRANSLATE_SERVICE_TOKEN = new InjectionToken('LPX_TRANSLATE_SERVICE_TOKEN');
+const LPX_TRANSLATE_SERVICE_TOKEN = new InjectionToken('LPX_TRANSLATE_SERVICE_TOKEN');
 const LPX_TRANSLATE_TOKEN = new InjectionToken('LPX_TRANSLATE_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,
-            ],
-        };
-    }
-}
-LpxLanguageModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LpxLanguageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-LpxLanguageModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: LpxLanguageModule, imports: [CommonModule] });
-LpxLanguageModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LpxLanguageModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LpxLanguageModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [],
-                    imports: [CommonModule],
-                }]
+class LpxLanguageModule {
+    static forRoot(options) {
+        return {
+            ngModule: LpxLanguageModule,
+            providers: [
+                {
+                    provide: LPX_LANGUAGE,
+                    useValue: options?.languages || [],
+                },
+                {
+                    provide: LPX_TRANSLATE_TOKEN,
+                    useValue: [LanguageTranslateDefaults],
+                    multi: true,
+                },
+                LanguageService,
+            ],
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: LpxLanguageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.4", ngImport: i0, type: LpxLanguageModule, imports: [CommonModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: LpxLanguageModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", 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 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(iconSet) {
-        this.iconSet = iconSet;
-    }
-    get styleClass() {
-        return this.iconSet[this.iconClass] || this.iconClass;
-    }
-}
-IconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: IconComponent, deps: [{ token: LEPTON_X_ICON_SET }], target: i0.ɵɵFactoryTarget.Component });
-IconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: IconComponent, 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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: IconComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'lpx-icon',
-                    template: ` <i class="lpx-icon" [ngClass]="styleClass" aria-hidden="true"></i> `,
-                    encapsulation: ViewEncapsulation.None,
-                }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [LEPTON_X_ICON_SET]
-                }] }]; }, propDecorators: { iconClass: [{
-                type: Input
+class IconComponent {
+    get styleClass() {
+        return this.iconSet[this.iconClass] || this.iconClass;
+    }
+    constructor(iconSet) {
+        this.iconSet = iconSet;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: IconComponent, deps: [{ token: LEPTON_X_ICON_SET }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.4", type: IconComponent, 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: IconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lpx-icon',
+                    template: ` <i class="lpx-icon" [ngClass]="styleClass" aria-hidden="true"></i> `,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LEPTON_X_ICON_SET]
+                }] }]; }, propDecorators: { iconClass: [{
+                type: Input
             }] } });
 
-class LpxIconModule {
-    static forRoot(options) {
-        return {
-            ngModule: LpxIconModule,
-            providers: [
-                {
-                    provide: LEPTON_X_ICON_SET,
-                    useValue: options?.iconSet || ICON_MAP,
-                },
-            ],
-        };
-    }
-}
-LpxIconModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LpxIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-LpxIconModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: LpxIconModule, declarations: [IconComponent], imports: [CommonModule], exports: [IconComponent] });
-LpxIconModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LpxIconModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LpxIconModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [IconComponent],
-                    imports: [CommonModule],
-                    exports: [IconComponent],
-                }]
+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: "16.0.4", ngImport: i0, type: LpxIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.4", ngImport: i0, type: LpxIconModule, declarations: [IconComponent], imports: [CommonModule], exports: [IconComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: LpxIconModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: LpxIconModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [IconComponent],
+                    imports: [CommonModule],
+                    exports: [IconComponent],
+                }]
         }] });
 
-class BrandLogoComponent {
-}
-BrandLogoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BrandLogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BrandLogoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: BrandLogoComponent, selector: "lpx-brand-logo", ngImport: i0, template: "<a href=\"/\">\r\n    <div class=\"lpx-brand-logo\"></div>\r\n</a>\r\n", encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BrandLogoComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lpx-brand-logo', encapsulation: ViewEncapsulation.None, template: "<a href=\"/\">\r\n    <div class=\"lpx-brand-logo\"></div>\r\n</a>\r\n" }]
+class BrandLogoComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: BrandLogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.4", type: BrandLogoComponent, selector: "lpx-brand-logo", ngImport: i0, template: "<a href=\"/\">\r\n    <div class=\"lpx-brand-logo\"></div>\r\n</a>\r\n", encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: BrandLogoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lpx-brand-logo', encapsulation: ViewEncapsulation.None, template: "<a href=\"/\">\r\n    <div class=\"lpx-brand-logo\"></div>\r\n</a>\r\n" }]
         }] });
 
-class LpxBrandLogoModule {
-}
-LpxBrandLogoModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LpxBrandLogoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-LpxBrandLogoModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: LpxBrandLogoModule, declarations: [BrandLogoComponent], imports: [CommonModule], exports: [BrandLogoComponent] });
-LpxBrandLogoModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LpxBrandLogoModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LpxBrandLogoModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [BrandLogoComponent],
-                    imports: [
-                        CommonModule
-                    ],
-                    exports: [BrandLogoComponent]
-                }]
+class LpxBrandLogoModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: LpxBrandLogoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.4", ngImport: i0, type: LpxBrandLogoModule, declarations: [BrandLogoComponent], imports: [CommonModule], exports: [BrandLogoComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: LpxBrandLogoModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: LpxBrandLogoModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [BrandLogoComponent],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [BrandLogoComponent]
+                }]
         }] });
 
-class LayoutService {
-    constructor() {
-        this.store = new DataStore({
-            containerClass: [''],
-        });
-        this.containerClass$ = this.store.sliceState(({ containerClass }) => containerClass || []);
-    }
-    setClass(cssClass) {
-        const containerClass = Array.isArray(cssClass) ? cssClass : [cssClass];
-        this.patchStore(containerClass);
-    }
-    addClass(cssClass) {
-        const { containerClass } = this.store.state;
-        this.patchStore([...containerClass, cssClass]);
-    }
-    removeClass(cssClass) {
-        const { containerClass } = this.store.state;
-        const index = containerClass.findIndex(item => item === cssClass);
-        if (index === -1)
-            return;
-        const update = [...containerClass.slice(0, index), ...containerClass.slice(index + 1)];
-        this.patchStore(update);
-    }
-    removeClasses(classlist) {
-        const { containerClass } = this.store.state;
-        const filteredClasslist = containerClass.filter(clss => !classlist.includes(clss));
-        this.patchStore(filteredClasslist);
-    }
-    toggleClass(cssClass) {
-        const { containerClass } = this.store.state;
-        const index = containerClass.findIndex(item => item === cssClass);
-        if (index === -1) {
-            this.addClass(cssClass);
-        }
-        else {
-            this.removeClass(cssClass);
-        }
-    }
-    patchStore(containerClass) {
-        this.store.patch({
-            containerClass,
-        });
-    }
-}
-LayoutService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-LayoutService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LayoutService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LayoutService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
+class LayoutService {
+    constructor() {
+        this.store = new DataStore({
+            containerClass: [''],
+        });
+        this.containerClass$ = this.store.sliceState(({ containerClass }) => containerClass || []);
+    }
+    setClass(cssClass) {
+        const containerClass = Array.isArray(cssClass) ? cssClass : [cssClass];
+        this.patchStore(containerClass);
+    }
+    addClass(cssClass) {
+        const { containerClass } = this.store.state;
+        this.patchStore([...containerClass, cssClass]);
+    }
+    removeClass(cssClass) {
+        const { containerClass } = this.store.state;
+        const index = containerClass.findIndex(item => item === cssClass);
+        if (index === -1)
+            return;
+        const update = [...containerClass.slice(0, index), ...containerClass.slice(index + 1)];
+        this.patchStore(update);
+    }
+    removeClasses(classlist) {
+        const { containerClass } = this.store.state;
+        const filteredClasslist = containerClass.filter(clss => !classlist.includes(clss));
+        this.patchStore(filteredClasslist);
+    }
+    toggleClass(cssClass) {
+        const { containerClass } = this.store.state;
+        const index = containerClass.findIndex(item => item === cssClass);
+        if (index === -1) {
+            this.addClass(cssClass);
+        }
+        else {
+            this.removeClass(cssClass);
+        }
+    }
+    patchStore(containerClass) {
+        this.store.patch({
+            containerClass,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: LayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: LayoutService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", 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 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 sortItems(a, b) {
-    if (!a.order) {
-        return 1;
-    }
-    if (!b.order) {
-        return -1;
-    }
-    return a.order - b.order;
-}
-function flatArrayDeepToObject(arr) {
-    return arr.reduce((acc, curr) => ({
-        ...acc,
-        ...(Array.isArray(curr) ? flatArrayDeepToObject(curr) : curr),
-    }), {});
-}
-function getStream$(source) {
-    return source instanceof Observable
-        ? source
-        : source instanceof Promise
-            ? from(source)
-            : of(source);
-}
-function isNullOrUndefined(obj) {
-    return obj === null || obj === undefined;
-}
-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);
-    }
-    return mapGroup;
-}
-function getItemsFromGroup(list, pred) {
-    return list?.reduce((acc, { items }) => [...acc, ...(pred ? items.filter(pred) : items)], []);
+function sortItems(a, b) {
+    if (!a.order) {
+        return 1;
+    }
+    if (!b.order) {
+        return -1;
+    }
+    return a.order - b.order;
+}
+function flatArrayDeepToObject(arr) {
+    return arr.reduce((acc, curr) => ({
+        ...acc,
+        ...(Array.isArray(curr) ? flatArrayDeepToObject(curr) : curr),
+    }), {});
+}
+function getStream$(source) {
+    return source instanceof Observable
+        ? source
+        : source instanceof Promise
+            ? from(source)
+            : of(source);
+}
+function isNullOrUndefined(obj) {
+    return obj === null || obj === undefined;
+}
+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);
+    }
+    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(menuItems, route, router) {
-        this.menuItems = menuItems;
-        this.route = route;
-        this.router = router;
-        this.store = new DataStore(this.addContainerLinks(this.menuItems));
-        this.navbarItems$ = this.store.sliceState((state) => state);
-        this.groupedNavbarItems$ = this.store
-            .sliceState((state) => state)
-            .pipe(filter((navItems) => navItems.some((f) => !!f.group)), map((items) => {
-            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)]);
-    }
-    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);
-        }
-    }
-    getRouteItem() {
-        return this.findByLink(this.router.url);
-    }
-    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 };
-    }
-    addContainerLinks(items, link = '') {
-        return items.map((item) => ({
-            ...item,
-            ...(item.link && link ? { link: `${link}/${item.link}` } : {}),
-            children: this.addContainerLinks(item.children || [], `${link ? link + '/' : ''}${item.containerLink || ''}`),
-        }));
-    }
-}
-NavbarService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NavbarService, deps: [{ token: LPX_MENU_ITEMS }, { token: i1$1.ActivatedRoute }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Injectable });
-NavbarService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NavbarService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NavbarService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [LPX_MENU_ITEMS]
+class NavbarService {
+    constructor(menuItems, route, router) {
+        this.menuItems = menuItems;
+        this.route = route;
+        this.router = router;
+        this.store = new DataStore(this.addContainerLinks(this.menuItems));
+        this.navbarItems$ = this.store.sliceState((state) => state);
+        this.groupedNavbarItems$ = this.store
+            .sliceState((state) => state)
+            .pipe(filter((navItems) => navItems.some((f) => !!f.group)), map((items) => {
+            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)]);
+    }
+    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);
+        }
+    }
+    getRouteItem() {
+        return this.findByLink(this.router.url);
+    }
+    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 };
+    }
+    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: "16.0.4", ngImport: i0, type: NavbarService, deps: [{ token: LPX_MENU_ITEMS }, { token: i1$1.ActivatedRoute }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: NavbarService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: NavbarService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LPX_MENU_ITEMS]
                 }] }, { type: i1$1.ActivatedRoute }, { type: i1$1.Router }]; } });
 
-class NavbarRoutesDirective {
-}
-NavbarRoutesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NavbarRoutesDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-NavbarRoutesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: NavbarRoutesDirective, selector: "[lpx-navbar-routes],[lpxNavbarRoutes]", exportAs: ["lpxNavbarRoutes"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NavbarRoutesDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[lpx-navbar-routes],[lpxNavbarRoutes]',
-                    exportAs: 'lpxNavbarRoutes',
-                }]
+class NavbarRoutesDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: NavbarRoutesDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.4", type: NavbarRoutesDirective, selector: "[lpx-navbar-routes],[lpxNavbarRoutes]", exportAs: ["lpxNavbarRoutes"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: NavbarRoutesDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[lpx-navbar-routes],[lpxNavbarRoutes]',
+                    exportAs: 'lpxNavbarRoutes',
+                }]
         }] });
 
-class LogoPanelDirective {
-    constructor(template) {
-        this.template = template;
-    }
-}
-LogoPanelDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LogoPanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-LogoPanelDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: LogoPanelDirective, selector: "ng-template[lpx-logo-panel]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LogoPanelDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'ng-template[lpx-logo-panel]',
-                }]
+class LogoPanelDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: LogoPanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.4", type: LogoPanelDirective, selector: "ng-template[lpx-logo-panel]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: LogoPanelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[lpx-logo-panel]',
+                }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
-class LpxVisibleDirective {
-    constructor(viewContainerRef, templateRef) {
-        this.viewContainerRef = viewContainerRef;
-        this.templateRef = templateRef;
-        this.condition$ = of(false);
-    }
-    set lpxVisible(value) {
-        this.condition$ = checkType(value);
-        this.subscribeToCondition();
-    }
-    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);
-    }
-}
-LpxVisibleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LpxVisibleDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-LpxVisibleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: LpxVisibleDirective, isStandalone: true, selector: "[lpxVisible]", inputs: { lpxVisible: "lpxVisible" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LpxVisibleDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[lpxVisible]',
-                    standalone: true,
-                }]
-        }], ctorParameters: function () { return [{ 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;
-    }
-}
-
-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);
-    }
-}
-UserProfileService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: UserProfileService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-UserProfileService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: UserProfileService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: UserProfileService, 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: "16.0.4", 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: "16.0.4", type: LpxVisibleDirective, isStandalone: true, selector: "[lpxVisible]", inputs: { lpxVisible: "lpxVisible" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: LpxVisibleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[lpxVisible]',
+                    standalone: true,
+                }]
+        }], ctorParameters: function () { return [{ 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;
+    }
+}
+
+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: "16.0.4", ngImport: i0, type: UserProfileService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: UserProfileService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", 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);
-    }
-}
-BodyService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BodyService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-BodyService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BodyService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BodyService, 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: "16.0.4", ngImport: i0, type: BodyService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: BodyService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: BodyService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
         }] });
 
-class DefaultTranslateService {
-    get$(key, defaultValue) {
-        return of(defaultValue || key || '');
-    }
-    get(key, defaultValue) {
-        return defaultValue || key || '';
-    }
-}
-DefaultTranslateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DefaultTranslateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-DefaultTranslateService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DefaultTranslateService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DefaultTranslateService, decorators: [{
-            type: Injectable
+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: "16.0.4", ngImport: i0, type: DefaultTranslateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: DefaultTranslateService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: DefaultTranslateService, decorators: [{
+            type: Injectable
         }] });
 
-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]);
-    }
-}
-LpxThemeTranslateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LpxThemeTranslateService, deps: [{ token: LPX_TRANSLATE_TOKEN, optional: true }, { token: LPX_TRANSLATE_SERVICE_TOKEN }], target: i0.ɵɵFactoryTarget.Injectable });
-LpxThemeTranslateService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LpxThemeTranslateService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LpxThemeTranslateService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return [{ type: Array, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [LPX_TRANSLATE_TOKEN]
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [LPX_TRANSLATE_SERVICE_TOKEN]
+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]);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", 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: "16.0.4", ngImport: i0, type: LpxThemeTranslateService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: LpxThemeTranslateService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ 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));
-    }
-    navigateToLogin() {
-        return;
-    }
-}
-DefaultAuthService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DefaultAuthService, deps: [{ token: UserProfileService }], target: i0.ɵɵFactoryTarget.Injectable });
-DefaultAuthService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DefaultAuthService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DefaultAuthService, decorators: [{
-            type: Injectable
+class DefaultAuthService {
+    constructor(userProfileService) {
+        this.userProfileService = userProfileService;
+        this.isUserExists$ = this.userProfileService.user$.pipe(map((user) => !!user && Object.keys(user).length > 0));
+    }
+    navigateToLogin() {
+        return;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: DefaultAuthService, deps: [{ token: UserProfileService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: DefaultAuthService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: DefaultAuthService, decorators: [{
+            type: Injectable
         }], ctorParameters: function () { return [{ 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,
+const LPX_AUTH_SERVICE_PROVIDER = {
+    provide: LPX_AUTH_SERVICE_TOKEN,
+    useClass: DefaultAuthService,
 };
 
-class LpxLocalStorageService {
-    constructor() { }
-    get length() {
-        return localStorage.length;
-    }
-    clear() {
-        localStorage.clear();
-    }
-    getItem(key) {
-        return localStorage.getItem(key);
-    }
-    key(index) {
-        return localStorage.key(index);
-    }
-    removeItem(key) {
-        localStorage.removeItem(key);
-    }
-    setItem(key, value) {
-        localStorage.setItem(key, value);
-    }
-}
-LpxLocalStorageService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LpxLocalStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-LpxLocalStorageService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LpxLocalStorageService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LpxLocalStorageService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
+class LpxLocalStorageService {
+    constructor() { }
+    get length() {
+        return localStorage.length;
+    }
+    clear() {
+        localStorage.clear();
+    }
+    getItem(key) {
+        return localStorage.getItem(key);
+    }
+    key(index) {
+        return localStorage.key(index);
+    }
+    removeItem(key) {
+        localStorage.removeItem(key);
+    }
+    setItem(key, value) {
+        localStorage.setItem(key, value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: LpxLocalStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: LpxLocalStorageService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: LpxLocalStorageService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
         }], ctorParameters: function () { return []; } });
 
-class LpxPerfectScrollbarService extends LpxPerfectScrollbar {
-    setElement(value) {
-        if (value) {
-            this.elementRef = value;
-        }
-    }
-    setOptions(value) {
-        if (value) {
-            this.options = value;
-        }
-    }
-    createScrollbar() {
-        this.perfectScrollbar = new PerfectScrollbar(this.elementRef.nativeElement, this.options);
-    }
-    onResize() {
-        this.perfectScrollbar.update();
-    }
-    afterViewInit() {
-        this.createScrollbar();
-        this.subscription?.unsubscribe();
-        this.subscription = this.router.events
-            .pipe(filter$1((event) => event instanceof NavigationEnd ||
-            event instanceof NavigationError ||
-            event instanceof NavigationCancel))
-            .subscribe(() => {
-            const { element } = this.perfectScrollbar;
-            const { topAfterNavigate, leftAfterNavigate } = this.options || {};
-            element.scrollTop = topAfterNavigate || 0;
-            element.scrollLeft = leftAfterNavigate || 0;
-        });
-    }
-    ngOnDestroy() {
-        this.subscription?.unsubscribe();
-    }
-}
-LpxPerfectScrollbarService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LpxPerfectScrollbarService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-LpxPerfectScrollbarService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LpxPerfectScrollbarService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LpxPerfectScrollbarService, decorators: [{
-            type: Injectable
+class LpxPerfectScrollbarService extends LpxPerfectScrollbar {
+    setElement(value) {
+        if (value) {
+            this.elementRef = value;
+        }
+    }
+    setOptions(value) {
+        if (value) {
+            this.options = value;
+        }
+    }
+    createScrollbar() {
+        this.perfectScrollbar = new PerfectScrollbar(this.elementRef.nativeElement, this.options);
+    }
+    onResize() {
+        this.perfectScrollbar.update();
+    }
+    afterViewInit() {
+        this.createScrollbar();
+        this.subscription?.unsubscribe();
+        this.subscription = this.router.events
+            .pipe(filter$1((event) => event instanceof NavigationEnd ||
+            event instanceof NavigationError ||
+            event instanceof NavigationCancel))
+            .subscribe(() => {
+            const { element } = this.perfectScrollbar;
+            const { topAfterNavigate, leftAfterNavigate } = this.options || {};
+            element.scrollTop = topAfterNavigate || 0;
+            element.scrollLeft = leftAfterNavigate || 0;
+        });
+    }
+    ngOnDestroy() {
+        this.subscription?.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: LpxPerfectScrollbarService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: LpxPerfectScrollbarService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: LpxPerfectScrollbarService, decorators: [{
+            type: Injectable
         }] });
 
-class TranslatePipe {
-    constructor(lpxThemeTranslateService) {
-        this.lpxThemeTranslateService = lpxThemeTranslateService;
-    }
-    transform(value, ...args) {
-        return this.lpxThemeTranslateService.translate$(value, args);
-    }
-}
-TranslatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TranslatePipe, deps: [{ token: LpxThemeTranslateService }], target: i0.ɵɵFactoryTarget.Pipe });
-TranslatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: TranslatePipe, name: "lpxTranslate" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TranslatePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'lpxTranslate',
-                }]
+class TranslatePipe {
+    constructor(lpxThemeTranslateService) {
+        this.lpxThemeTranslateService = lpxThemeTranslateService;
+    }
+    transform(value, ...args) {
+        return this.lpxThemeTranslateService.translate$(value, args);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: TranslatePipe, deps: [{ token: LpxThemeTranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.0.4", ngImport: i0, type: TranslatePipe, name: "lpxTranslate" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: TranslatePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'lpxTranslate',
+                }]
         }], ctorParameters: function () { return [{ type: LpxThemeTranslateService }]; } });
 
-class SubNavbarComponent {
-    constructor(injector) {
-        this.injector = injector;
-        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;
-        }
-    }
-}
-SubNavbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SubNavbarComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-SubNavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SubNavbarComponent, selector: "lpx-sub-navbar", inputs: { item: "item", routerItem: "routerItem" }, outputs: { routeClick: "routeClick", expand: "expand" }, ngImport: i0, template: "<ng-container *ngIf=\"item.component; else defaultTemplate\">\r\n  <ng-container\r\n    *ngComponentOutlet=\"item.component; injector: injector\"\r\n  ></ng-container>\r\n</ng-container>\r\n<ng-template #defaultTemplate>\r\n  <a\r\n    *ngIf=\"!item.component\"\r\n    class=\"lpx-menu-item-link\"\r\n    [routerLink]=\"item.link\"\r\n    [routerLinkActive]=\"item.link ? 'selected' : ''\"\r\n    [class.selected]=\"\r\n      (item.children?.length && item.expanded) || (!routerItem && item.selected)\r\n    \"\r\n    [routerLinkActiveOptions]=\"{ exact: true }\"\r\n    (click)=\"onItemClick(item)\"\r\n  >\r\n    <lpx-icon\r\n      class=\"lpx-menu-item-icon\"\r\n      *ngIf=\"item.icon\"\r\n      [iconClass]=\"item.icon\"\r\n    ></lpx-icon>\r\n    <ng-container\r\n      *ngTemplateOutlet=\"\r\n        item.template || textTmpl;\r\n        context: { $implicit: item }\r\n      \"\r\n    ></ng-container>\r\n    <ng-template #textTmpl>\r\n      <span\r\n        class=\"lpx-menu-item-text hidden-in-hover-trigger\"\r\n        *ngIf=\"item.text\"\r\n        >{{ item.text | lpxTranslate | async }}</span\r\n      >\r\n    </ng-template>\r\n\r\n    <lpx-icon\r\n      *ngIf=\"item.children && item.children.length\"\r\n      [iconClass]=\"item.expanded ? 'chevronUp' : 'chevronDown'\"\r\n      class=\"dd-icon hidden-in-hover-trigger\"\r\n    >\r\n    </lpx-icon>\r\n  </a>\r\n  <ul\r\n    class=\"lpx-inner-menu hidden-in-hover-trigger\"\r\n    [class.collapsed]=\"!item.expanded\"\r\n    *ngIf=\"item.children && item.children.length\"\r\n  >\r\n    <ng-container *ngFor=\"let child of item.children\">\r\n      <li\r\n        class=\"lpx-inner-menu-item\"\r\n        *lpxVisible=\"!child.visible || child.visible(child, injector)\">\r\n        <lpx-sub-navbar\r\n          [item]=\"child\"\r\n          (routeClick)=\"this.routeClick.emit($event)\"\r\n          (expand)=\"onChildExpand($event)\"\r\n        ></lpx-sub-navbar>\r\n      </li>\r\n    </ng-container>\r\n  </ul>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { 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" }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SubNavbarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lpx-sub-navbar', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"item.component; else defaultTemplate\">\r\n  <ng-container\r\n    *ngComponentOutlet=\"item.component; injector: injector\"\r\n  ></ng-container>\r\n</ng-container>\r\n<ng-template #defaultTemplate>\r\n  <a\r\n    *ngIf=\"!item.component\"\r\n    class=\"lpx-menu-item-link\"\r\n    [routerLink]=\"item.link\"\r\n    [routerLinkActive]=\"item.link ? 'selected' : ''\"\r\n    [class.selected]=\"\r\n      (item.children?.length && item.expanded) || (!routerItem && item.selected)\r\n    \"\r\n    [routerLinkActiveOptions]=\"{ exact: true }\"\r\n    (click)=\"onItemClick(item)\"\r\n  >\r\n    <lpx-icon\r\n      class=\"lpx-menu-item-icon\"\r\n      *ngIf=\"item.icon\"\r\n      [iconClass]=\"item.icon\"\r\n    ></lpx-icon>\r\n    <ng-container\r\n      *ngTemplateOutlet=\"\r\n        item.template || textTmpl;\r\n        context: { $implicit: item }\r\n      \"\r\n    ></ng-container>\r\n    <ng-template #textTmpl>\r\n      <span\r\n        class=\"lpx-menu-item-text hidden-in-hover-trigger\"\r\n        *ngIf=\"item.text\"\r\n        >{{ item.text | lpxTranslate | async }}</span\r\n      >\r\n    </ng-template>\r\n\r\n    <lpx-icon\r\n      *ngIf=\"item.children && item.children.length\"\r\n      [iconClass]=\"item.expanded ? 'chevronUp' : 'chevronDown'\"\r\n      class=\"dd-icon hidden-in-hover-trigger\"\r\n    >\r\n    </lpx-icon>\r\n  </a>\r\n  <ul\r\n    class=\"lpx-inner-menu hidden-in-hover-trigger\"\r\n    [class.collapsed]=\"!item.expanded\"\r\n    *ngIf=\"item.children && item.children.length\"\r\n  >\r\n    <ng-container *ngFor=\"let child of item.children\">\r\n      <li\r\n        class=\"lpx-inner-menu-item\"\r\n        *lpxVisible=\"!child.visible || child.visible(child, injector)\">\r\n        <lpx-sub-navbar\r\n          [item]=\"child\"\r\n          (routeClick)=\"this.routeClick.emit($event)\"\r\n          (expand)=\"onChildExpand($event)\"\r\n        ></lpx-sub-navbar>\r\n      </li>\r\n    </ng-container>\r\n  </ul>\r\n</ng-template>\r\n" }]
-        }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { item: [{
-                type: Input
-            }], routerItem: [{
-                type: Input
-            }], routeClick: [{
-                type: Output
-            }], expand: [{
-                type: Output
+class SubNavbarComponent {
+    constructor(injector) {
+        this.injector = injector;
+        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: "16.0.4", ngImport: i0, type: SubNavbarComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.4", type: SubNavbarComponent, selector: "lpx-sub-navbar", inputs: { item: "item", routerItem: "routerItem" }, outputs: { routeClick: "routeClick", expand: "expand" }, ngImport: i0, template: "<ng-container *ngIf=\"item.component; else defaultTemplate\">\r\n  <ng-container\r\n    *ngComponentOutlet=\"item.component; injector: injector\"\r\n  ></ng-container>\r\n</ng-container>\r\n<ng-template #defaultTemplate>\r\n  <a\r\n    *ngIf=\"!item.component\"\r\n    class=\"lpx-menu-item-link\"\r\n    [routerLink]=\"item.link\"\r\n    [routerLinkActive]=\"item.link ? 'selected' : ''\"\r\n    [class.selected]=\"\r\n      (item.children?.length && item.expanded) || (!routerItem && item.selected)\r\n    \"\r\n    [routerLinkActiveOptions]=\"{ exact: true }\"\r\n    (click)=\"onItemClick(item)\"\r\n  >\r\n    <lpx-icon\r\n      class=\"lpx-menu-item-icon\"\r\n      *ngIf=\"item.icon\"\r\n      [iconClass]=\"item.icon\"\r\n    ></lpx-icon>\r\n    <ng-container\r\n      *ngTemplateOutlet=\"\r\n        item.template || textTmpl;\r\n        context: { $implicit: item }\r\n      \"\r\n    ></ng-container>\r\n    <ng-template #textTmpl>\r\n      <span\r\n        class=\"lpx-menu-item-text hidden-in-hover-trigger\"\r\n        *ngIf=\"item.text\"\r\n        >{{ item.text | lpxTranslate | async }}</span\r\n      >\r\n    </ng-template>\r\n\r\n    <lpx-icon\r\n      *ngIf=\"item.children && item.children.length\"\r\n      [iconClass]=\"item.expanded ? 'chevronUp' : 'chevronDown'\"\r\n      class=\"dd-icon hidden-in-hover-trigger\"\r\n    >\r\n    </lpx-icon>\r\n  </a>\r\n  <ul\r\n    class=\"lpx-inner-menu hidden-in-hover-trigger\"\r\n    [class.collapsed]=\"!item.expanded\"\r\n    *ngIf=\"item.children && item.children.length\"\r\n  >\r\n    <ng-container *ngFor=\"let child of item.children\">\r\n      <li\r\n        class=\"lpx-inner-menu-item\"\r\n        *lpxVisible=\"!child.visible || child.visible(child, injector)\">\r\n        <lpx-sub-navbar\r\n          [item]=\"child\"\r\n          (routeClick)=\"this.routeClick.emit($event)\"\r\n          (expand)=\"onChildExpand($event)\"\r\n        ></lpx-sub-navbar>\r\n      </li>\r\n    </ng-container>\r\n  </ul>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { 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" }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: SubNavbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lpx-sub-navbar', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"item.component; else defaultTemplate\">\r\n  <ng-container\r\n    *ngComponentOutlet=\"item.component; injector: injector\"\r\n  ></ng-container>\r\n</ng-container>\r\n<ng-template #defaultTemplate>\r\n  <a\r\n    *ngIf=\"!item.component\"\r\n    class=\"lpx-menu-item-link\"\r\n    [routerLink]=\"item.link\"\r\n    [routerLinkActive]=\"item.link ? 'selected' : ''\"\r\n    [class.selected]=\"\r\n      (item.children?.length && item.expanded) || (!routerItem && item.selected)\r\n    \"\r\n    [routerLinkActiveOptions]=\"{ exact: true }\"\r\n    (click)=\"onItemClick(item)\"\r\n  >\r\n    <lpx-icon\r\n      class=\"lpx-menu-item-icon\"\r\n      *ngIf=\"item.icon\"\r\n      [iconClass]=\"item.icon\"\r\n    ></lpx-icon>\r\n    <ng-container\r\n      *ngTemplateOutlet=\"\r\n        item.template || textTmpl;\r\n        context: { $implicit: item }\r\n      \"\r\n    ></ng-container>\r\n    <ng-template #textTmpl>\r\n      <span\r\n        class=\"lpx-menu-item-text hidden-in-hover-trigger\"\r\n        *ngIf=\"item.text\"\r\n        >{{ item.text | lpxTranslate | async }}</span\r\n      >\r\n    </ng-template>\r\n\r\n    <lpx-icon\r\n      *ngIf=\"item.children && item.children.length\"\r\n      [iconClass]=\"item.expanded ? 'chevronUp' : 'chevronDown'\"\r\n      class=\"dd-icon hidden-in-hover-trigger\"\r\n    >\r\n    </lpx-icon>\r\n  </a>\r\n  <ul\r\n    class=\"lpx-inner-menu hidden-in-hover-trigger\"\r\n    [class.collapsed]=\"!item.expanded\"\r\n    *ngIf=\"item.children && item.children.length\"\r\n  >\r\n    <ng-container *ngFor=\"let child of item.children\">\r\n      <li\r\n        class=\"lpx-inner-menu-item\"\r\n        *lpxVisible=\"!child.visible || child.visible(child, injector)\">\r\n        <lpx-sub-navbar\r\n          [item]=\"child\"\r\n          (routeClick)=\"this.routeClick.emit($event)\"\r\n          (expand)=\"onChildExpand($event)\"\r\n        ></lpx-sub-navbar>\r\n      </li>\r\n    </ng-container>\r\n  </ul>\r\n</ng-template>\r\n" }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { item: [{
+                type: Input
+            }], routerItem: [{
+                type: Input
+            }], routeClick: [{
+                type: Output
+            }], expand: [{
+                type: Output
             }] } });
 
-class NavbarRoutesComponent {
-    constructor(injector) {
-        this.injector = injector;
-        this.routeClick = new EventEmitter();
-        this.isExpandedOrSelected = (item) => !!(item.expanded || item.selected);
-    }
-    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 || [])];
-        }, []) || []);
-    }
-}
-NavbarRoutesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NavbarRoutesComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-NavbarRoutesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: NavbarRoutesComponent, selector: "lpx-navbar-routes", inputs: { groupedItems: "groupedItems", navbarItems: "navbarItems", routerItem: "routerItem" }, outputs: { routeClick: "routeClick" }, ngImport: i0, template: "<ul class=\"lpx-nav-menu\">\r\n  <ng-container *ngIf=\"groupedItems; else defaultRoute\">\r\n    <ng-container *ngFor=\"let item of groupedItems\">\r\n      <ng-container\r\n        *ngTemplateOutlet=\"groupText; context: { $implicit: item }\"\r\n      ></ng-container>\r\n\r\n      <ng-container *ngFor=\"let navbarItem of item.items\">\r\n        <ng-container\r\n          *ngTemplateOutlet=\"itemTemplate; context: { $implicit: navbarItem }\"\r\n        ></ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n</ul>\r\n\r\n<ng-template #defaultRoute>\r\n  <ng-container *ngFor=\"let item of navbarItems\">\r\n    <ng-container\r\n      *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"\r\n    ></ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n<ng-template #groupText let-item>\r\n  <li\r\n    *ngIf=\"item.items.length > 0\"\r\n    class=\"group-menu-item hidden-in-hover-trigger\"\r\n  >\r\n    {{ item.group | lpxTranslate | async }}\r\n  </li>\r\n</ng-template>\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    ></lpx-sub-navbar>\r\n  </li>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "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: "15.0.4", ngImport: i0, type: NavbarRoutesComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lpx-navbar-routes', encapsulation: ViewEncapsulation.None, template: "<ul class=\"lpx-nav-menu\">\r\n  <ng-container *ngIf=\"groupedItems; else defaultRoute\">\r\n    <ng-container *ngFor=\"let item of groupedItems\">\r\n      <ng-container\r\n        *ngTemplateOutlet=\"groupText; context: { $implicit: item }\"\r\n      ></ng-container>\r\n\r\n      <ng-container *ngFor=\"let navbarItem of item.items\">\r\n        <ng-container\r\n          *ngTemplateOutlet=\"itemTemplate; context: { $implicit: navbarItem }\"\r\n        ></ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n</ul>\r\n\r\n<ng-template #defaultRoute>\r\n  <ng-container *ngFor=\"let item of navbarItems\">\r\n    <ng-container\r\n      *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"\r\n    ></ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n<ng-template #groupText let-item>\r\n  <li\r\n    *ngIf=\"item.items.length > 0\"\r\n    class=\"group-menu-item hidden-in-hover-trigger\"\r\n  >\r\n    {{ item.group | lpxTranslate | async }}\r\n  </li>\r\n</ng-template>\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    ></lpx-sub-navbar>\r\n  </li>\r\n</ng-template>\r\n" }]
-        }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { groupedItems: [{
-                type: Input
-            }], navbarItems: [{
-                type: Input
-            }], routerItem: [{
-                type: Input
-            }], routeClick: [{
-                type: Output
+class NavbarRoutesComponent {
+    get itemsFromGroup() {
+        if (!this.groupedItems) {
+            return undefined;
+        }
+        return getItemsFromGroup(this.groupedItems);
+    }
+    constructor(injector) {
+        this.injector = injector;
+        this.routeClick = new EventEmitter();
+        this.isExpandedOrSelected = (item) => !!(item.expanded || item.selected);
+    }
+    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 || [])];
+        }, []) || []);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: NavbarRoutesComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.4", type: NavbarRoutesComponent, selector: "lpx-navbar-routes", inputs: { groupedItems: "groupedItems", navbarItems: "navbarItems", routerItem: "routerItem" }, outputs: { routeClick: "routeClick" }, ngImport: i0, template: "<ul class=\"lpx-nav-menu\">\r\n  <ng-container *ngIf=\"groupedItems; else defaultRoute\">\r\n    <ng-container *ngFor=\"let item of groupedItems\">\r\n      <ng-container\r\n        *ngTemplateOutlet=\"groupText; context: { $implicit: item }\"\r\n      ></ng-container>\r\n\r\n      <ng-container *ngFor=\"let navbarItem of item.items\">\r\n        <ng-container\r\n          *ngTemplateOutlet=\"itemTemplate; context: { $implicit: navbarItem }\"\r\n        ></ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n</ul>\r\n\r\n<ng-template #defaultRoute>\r\n  <ng-container *ngFor=\"let item of navbarItems\">\r\n    <ng-container\r\n      *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"\r\n    ></ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n<ng-template #groupText let-item>\r\n  <li\r\n    *ngIf=\"item.items.length > 0\"\r\n    class=\"group-menu-item hidden-in-hover-trigger\"\r\n  >\r\n    {{ item.group | lpxTranslate | async }}\r\n  </li>\r\n</ng-template>\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    ></lpx-sub-navbar>\r\n  </li>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "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: "16.0.4", ngImport: i0, type: NavbarRoutesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lpx-navbar-routes', encapsulation: ViewEncapsulation.None, template: "<ul class=\"lpx-nav-menu\">\r\n  <ng-container *ngIf=\"groupedItems; else defaultRoute\">\r\n    <ng-container *ngFor=\"let item of groupedItems\">\r\n      <ng-container\r\n        *ngTemplateOutlet=\"groupText; context: { $implicit: item }\"\r\n      ></ng-container>\r\n\r\n      <ng-container *ngFor=\"let navbarItem of item.items\">\r\n        <ng-container\r\n          *ngTemplateOutlet=\"itemTemplate; context: { $implicit: navbarItem }\"\r\n        ></ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n</ul>\r\n\r\n<ng-template #defaultRoute>\r\n  <ng-container *ngFor=\"let item of navbarItems\">\r\n    <ng-container\r\n      *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"\r\n    ></ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n<ng-template #groupText let-item>\r\n  <li\r\n    *ngIf=\"item.items.length > 0\"\r\n    class=\"group-menu-item hidden-in-hover-trigger\"\r\n  >\r\n    {{ item.group | lpxTranslate | async }}\r\n  </li>\r\n</ng-template>\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    ></lpx-sub-navbar>\r\n  </li>\r\n</ng-template>\r\n" }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { groupedItems: [{
+                type: Input
+            }], navbarItems: [{
+                type: Input
+            }], routerItem: [{
+                type: Input
+            }], routeClick: [{
+                type: Output
             }] } });
 
-class NavbarComponent {
-    constructor(service, injector, layoutService) {
-        this.service = service;
-        this.injector = injector;
-        this.layoutService = layoutService;
-        this.contentBefore = this.flatContents(CONTENT_BEFORE_ROUTES);
-        this.contentAfter = this.flatContents(CONTENT_AFTER_ROUTES);
-    }
-    toggleSidebarHover() {
-        this.layoutService.toggleClass('hover-trigger');
-    }
-    flatContents(token) {
-        const contents = this.injector.get(token, []);
-        return contents.reduce((acc, val) => acc.concat(val), []);
-    }
-}
-NavbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NavbarComponent, deps: [{ token: NavbarService }, { token: i0.Injector }, { token: LayoutService }], target: i0.ɵɵFactoryTarget.Component });
-NavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: NavbarComponent, 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\">\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  <ng-container\r\n    *ngTemplateOutlet=\"\r\n      customContentTemplate;\r\n      context: { $implicit: contentBefore }\r\n    \"\r\n  ></ng-container>\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  <ng-container *ngFor=\"let component of contents\">\r\n    <ng-container\r\n      *ngComponentOutlet=\"component; injector: injector\"\r\n    ></ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #defaultLogo>\r\n  <lpx-brand-logo></lpx-brand-logo>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: BrandLogoComponent, selector: "lpx-brand-logo" }, { kind: "component", type: IconComponent, selector: "lpx-icon", inputs: ["iconClass"] }, { kind: "component", type: NavbarRoutesComponent, selector: "lpx-navbar-routes", inputs: ["groupedItems", "navbarItems", "routerItem"], outputs: ["routeClick"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NavbarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lpx-navbar', encapsulation: ViewEncapsulation.None, template: "<nav class=\"lpx-nav\">\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  <ng-container\r\n    *ngTemplateOutlet=\"\r\n      customContentTemplate;\r\n      context: { $implicit: contentBefore }\r\n    \"\r\n  ></ng-container>\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  <ng-container *ngFor=\"let component of contents\">\r\n    <ng-container\r\n      *ngComponentOutlet=\"component; injector: injector\"\r\n    ></ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #defaultLogo>\r\n  <lpx-brand-logo></lpx-brand-logo>\r\n</ng-template>\r\n" }]
-        }], ctorParameters: function () { return [{ type: NavbarService }, { type: i0.Injector }, { type: LayoutService }]; }, propDecorators: { routesTemplate: [{
-                type: ContentChild,
-                args: [NavbarRoutesDirective, { read: TemplateRef }]
-            }], logoPanel: [{
-                type: ContentChild,
-                args: [LogoPanelDirective]
+class NavbarComponent {
+    constructor(service, injector, layoutService) {
+        this.service = service;
+        this.injector = injector;
+        this.layoutService = layoutService;
+        this.contentBefore = this.flatContents(CONTENT_BEFORE_ROUTES);
+        this.contentAfter = this.flatContents(CONTENT_AFTER_ROUTES);
+    }
+    toggleSidebarHover() {
+        this.layoutService.toggleClass('hover-trigger');
+    }
+    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: "16.0.4", ngImport: i0, type: NavbarComponent, deps: [{ token: NavbarService }, { token: i0.Injector }, { token: LayoutService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.4", type: NavbarComponent, 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\">\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  <ng-container\r\n    *ngTemplateOutlet=\"\r\n      customContentTemplate;\r\n      context: { $implicit: contentBefore }\r\n    \"\r\n  ></ng-container>\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  <ng-container *ngFor=\"let component of contents\">\r\n    <ng-container\r\n      *ngComponentOutlet=\"component; injector: injector\"\r\n    ></ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #defaultLogo>\r\n  <lpx-brand-logo></lpx-brand-logo>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: BrandLogoComponent, selector: "lpx-brand-logo" }, { kind: "component", type: IconComponent, selector: "lpx-icon", inputs: ["iconClass"] }, { kind: "component", type: NavbarRoutesComponent, selector: "lpx-navbar-routes", inputs: ["groupedItems", "navbarItems", "routerItem"], outputs: ["routeClick"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: NavbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lpx-navbar', encapsulation: ViewEncapsulation.None, template: "<nav class=\"lpx-nav\">\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  <ng-container\r\n    *ngTemplateOutlet=\"\r\n      customContentTemplate;\r\n      context: { $implicit: contentBefore }\r\n    \"\r\n  ></ng-container>\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  <ng-container *ngFor=\"let component of contents\">\r\n    <ng-container\r\n      *ngComponentOutlet=\"component; injector: injector\"\r\n    ></ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #defaultLogo>\r\n  <lpx-brand-logo></lpx-brand-logo>\r\n</ng-template>\r\n" }]
+        }], ctorParameters: function () { return [{ type: NavbarService }, { type: i0.Injector }, { type: LayoutService }]; }, propDecorators: { routesTemplate: [{
+                type: ContentChild,
+                args: [NavbarRoutesDirective, { read: TemplateRef }]
+            }], logoPanel: [{
+                type: ContentChild,
+                args: [LogoPanelDirective]
             }] } });
 
-class ToObservablePipe {
-    transform(value) {
-        return value ? getStream$(value) : of('');
-    }
-}
-ToObservablePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ToObservablePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-ToObservablePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: ToObservablePipe, name: "toObservable" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ToObservablePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'toObservable',
-                }]
+class ToObservablePipe {
+    transform(value) {
+        return value ? getStream$(value) : of('');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: ToObservablePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.0.4", ngImport: i0, type: ToObservablePipe, name: "toObservable" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: ToObservablePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'toObservable',
+                }]
         }] });
 
-class ToObservableModule {
-}
-ToObservableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ToObservableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ToObservableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: ToObservableModule, declarations: [ToObservablePipe], imports: [CommonModule], exports: [ToObservablePipe] });
-ToObservableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ToObservableModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ToObservableModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [ToObservablePipe],
-                    imports: [CommonModule],
-                    exports: [ToObservablePipe],
-                }]
+class ToObservableModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: ToObservableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.4", ngImport: i0, type: ToObservableModule, declarations: [ToObservablePipe], imports: [CommonModule], exports: [ToObservablePipe] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: ToObservableModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: ToObservableModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ToObservablePipe],
+                    imports: [CommonModule],
+                    exports: [ToObservablePipe],
+                }]
         }] });
 
-class SafeHtmlPipe {
-    constructor() {
-        this.sanitizer = inject(DomSanitizer);
-    }
-    transform(value) {
-        if (!value || typeof value !== 'string')
-            return '';
-        return this.sanitizer.sanitize(SecurityContext.HTML, value) || '';
-    }
-}
-SafeHtmlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SafeHtmlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-SafeHtmlPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: SafeHtmlPipe, isStandalone: true, name: "lpxSafeHtml" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SafeHtmlPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'lpxSafeHtml', standalone: 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: "16.0.4", ngImport: i0, type: SafeHtmlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.0.4", ngImport: i0, type: SafeHtmlPipe, isStandalone: true, name: "lpxSafeHtml" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: SafeHtmlPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'lpxSafeHtml', standalone: true }]
         }] });
 
-class LpxTranslateModule {
-}
-LpxTranslateModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LpxTranslateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-LpxTranslateModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: LpxTranslateModule, declarations: [TranslatePipe], imports: [CommonModule], exports: [TranslatePipe] });
-LpxTranslateModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LpxTranslateModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LpxTranslateModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [TranslatePipe],
-                    imports: [CommonModule],
-                    exports: [TranslatePipe],
-                }]
+class LpxTranslateModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: LpxTranslateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.4", ngImport: i0, type: LpxTranslateModule, declarations: [TranslatePipe], imports: [CommonModule], exports: [TranslatePipe] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: LpxTranslateModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: LpxTranslateModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [TranslatePipe],
+                    imports: [CommonModule],
+                    exports: [TranslatePipe],
+                }]
         }] });
 
-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 = {}) {
-        return {
-            ngModule: LpxNavbarModule,
-            providers: [
-                {
-                    provide: CONTENT_AFTER_ROUTES,
-                    useValue: options?.contentAfterRoutes || [],
-                    multi: true,
-                },
-                {
-                    provide: CONTENT_BEFORE_ROUTES,
-                    useValue: options?.contentBeforeRoutes || [],
-                    multi: true,
-                },
-            ],
-        };
-    }
-}
-LpxNavbarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LpxNavbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-LpxNavbarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: LpxNavbarModule, declarations: [NavbarComponent,
-        SubNavbarComponent,
-        NavbarRoutesComponent,
-        NavbarRoutesDirective], imports: [CommonModule,
-        FormsModule,
-        RouterModule,
-        LpxBrandLogoModule,
-        LpxIconModule,
-        ToObservableModule,
-        LpxTranslateModule,
-        LpxVisibleDirective], exports: [NavbarComponent,
-        SubNavbarComponent,
-        NavbarRoutesComponent,
-        NavbarRoutesDirective] });
-LpxNavbarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LpxNavbarModule, imports: [CommonModule,
-        FormsModule,
-        RouterModule,
-        LpxBrandLogoModule,
-        LpxIconModule,
-        ToObservableModule,
-        LpxTranslateModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LpxNavbarModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [...exportedDeclarations$1],
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        RouterModule,
-                        LpxBrandLogoModule,
-                        LpxIconModule,
-                        ToObservableModule,
-                        LpxTranslateModule,
-                        LpxVisibleDirective
-                    ],
-                    exports: [...exportedDeclarations$1],
-                }]
+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 = {}) {
+        return {
+            ngModule: LpxNavbarModule,
+            providers: [
+                {
+                    provide: CONTENT_AFTER_ROUTES,
+                    useValue: options?.contentAfterRoutes || [],
+                    multi: true,
+                },
+                {
+                    provide: CONTENT_BEFORE_ROUTES,
+                    useValue: options?.contentBeforeRoutes || [],
+                    multi: true,
+                },
+            ],
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: LpxNavbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.4", ngImport: i0, type: LpxNavbarModule, declarations: [NavbarComponent,
+            SubNavbarComponent,
+            NavbarRoutesComponent,
+            NavbarRoutesDirective], imports: [CommonModule,
+            FormsModule,
+            RouterModule,
+            LpxBrandLogoModule,
+            LpxIconModule,
+            ToObservableModule,
+            LpxTranslateModule,
+            LpxVisibleDirective], exports: [NavbarComponent,
+            SubNavbarComponent,
+            NavbarRoutesComponent,
+            NavbarRoutesDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: LpxNavbarModule, imports: [CommonModule,
+            FormsModule,
+            RouterModule,
+            LpxBrandLogoModule,
+            LpxIconModule,
+            ToObservableModule,
+            LpxTranslateModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: LpxNavbarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [...exportedDeclarations$1],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        RouterModule,
+                        LpxBrandLogoModule,
+                        LpxIconModule,
+                        ToObservableModule,
+                        LpxTranslateModule,
+                        LpxVisibleDirective
+                    ],
+                    exports: [...exportedDeclarations$1],
+                }]
         }] });
 
-class BreadcrumbService {
-    constructor() {
-        this.store = new DataStore([]);
-        this.items$ = this.store.sliceState((state) => state);
-    }
-    // TODO: generate id per item
-    add(item) {
-        const items = Array.isArray(item) ? item : [item];
-        this.store.set([...this.store.state, ...items]);
-    }
-    // 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)]);
-    }
-    // TODO: generate id per item
-    setItems(items) {
-        this.store.set(items);
-    }
-}
-BreadcrumbService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BreadcrumbService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-BreadcrumbService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BreadcrumbService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BreadcrumbService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
+class BreadcrumbService {
+    constructor() {
+        this.store = new DataStore([]);
+        this.items$ = this.store.sliceState((state) => state);
+    }
+    // TODO: generate id per item
+    add(item) {
+        const items = Array.isArray(item) ? item : [item];
+        this.store.set([...this.store.state, ...items]);
+    }
+    // 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)]);
+    }
+    // TODO: generate id per item
+    setItems(items) {
+        this.store.set(items);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: BreadcrumbService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: BreadcrumbService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: BreadcrumbService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
         }] });
 
-class ClickOutsideDirective {
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-        this.lpxClickOutside = new EventEmitter();
-        this.exceptedRefs = [];
-    }
-    onDocumentClick(event) {
-        if (!(this.elementRef.nativeElement.contains(event.target) ||
-            this.exceptedRefs.some(ref => ref.nativeElement.contains(event.target)))) {
-            this.lpxClickOutside.emit();
-        }
-    }
-}
-ClickOutsideDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-ClickOutsideDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: ClickOutsideDirective, selector: "[lpxClickOutside]", inputs: { exceptedRefs: "exceptedRefs" }, outputs: { lpxClickOutside: "lpxClickOutside" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ClickOutsideDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[lpxClickOutside]',
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { lpxClickOutside: [{
-                type: Output
-            }], exceptedRefs: [{
-                type: Input
-            }], onDocumentClick: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
+class ClickOutsideDirective {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this.lpxClickOutside = new EventEmitter();
+        this.exceptedRefs = [];
+    }
+    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: "16.0.4", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.4", type: ClickOutsideDirective, selector: "[lpxClickOutside]", inputs: { exceptedRefs: "exceptedRefs" }, outputs: { lpxClickOutside: "lpxClickOutside" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: ClickOutsideDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[lpxClickOutside]',
+                }]
+        }], ctorParameters: function () { return [{ 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;
-    }
-    onClick(item) {
-        if (item.children) {
-            item.expanded = !item.expanded;
-        }
-    }
-}
-BreadcrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: BreadcrumbService }], target: i0.ɵɵFactoryTarget.Component });
-BreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: BreadcrumbComponent, selector: "lpx-breadcrumb", ngImport: i0, template: "<nav aria-label=\"breadcrumb\">\r\n  <ol class=\"lpx-breadcrumb\">\r\n    <ng-container *ngFor=\"let item of service.items$ | async; last as 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        <lpx-icon\r\n          class=\"lpx-breadcrumb-item-icon\"\r\n          *ngIf=\"item.icon\"\r\n          [iconClass]=\"item.icon\"\r\n        ></lpx-icon>\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      <li *ngIf=\"!last\" class=\"lpx-breadcrumb-separator\">\r\n        <lpx-icon iconClass=\"bi bi-chevron-right\"></lpx-icon>\r\n      </li>\r\n    </ng-container>\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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "lpx-icon", inputs: ["iconClass"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "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: "15.0.4", ngImport: i0, type: BreadcrumbComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lpx-breadcrumb', encapsulation: ViewEncapsulation.None, template: "<nav aria-label=\"breadcrumb\">\r\n  <ol class=\"lpx-breadcrumb\">\r\n    <ng-container *ngFor=\"let item of service.items$ | async; last as 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        <lpx-icon\r\n          class=\"lpx-breadcrumb-item-icon\"\r\n          *ngIf=\"item.icon\"\r\n          [iconClass]=\"item.icon\"\r\n        ></lpx-icon>\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      <li *ngIf=\"!last\" class=\"lpx-breadcrumb-separator\">\r\n        <lpx-icon iconClass=\"bi bi-chevron-right\"></lpx-icon>\r\n      </li>\r\n    </ng-container>\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 BreadcrumbComponent {
+    constructor(service) {
+        this.service = service;
+        this.icon = ICON_MAP;
+    }
+    onClick(item) {
+        if (item.children) {
+            item.expanded = !item.expanded;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: BreadcrumbService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.4", type: BreadcrumbComponent, selector: "lpx-breadcrumb", ngImport: i0, template: "<nav aria-label=\"breadcrumb\">\r\n  <ol class=\"lpx-breadcrumb\">\r\n    <ng-container *ngFor=\"let item of service.items$ | async; last as 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        <lpx-icon\r\n          class=\"lpx-breadcrumb-item-icon\"\r\n          *ngIf=\"item.icon\"\r\n          [iconClass]=\"item.icon\"\r\n        ></lpx-icon>\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      <li *ngIf=\"!last\" class=\"lpx-breadcrumb-separator\">\r\n        <lpx-icon iconClass=\"bi bi-chevron-right\"></lpx-icon>\r\n      </li>\r\n    </ng-container>\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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "lpx-icon", inputs: ["iconClass"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "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: "16.0.4", ngImport: i0, type: BreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lpx-breadcrumb', encapsulation: ViewEncapsulation.None, template: "<nav aria-label=\"breadcrumb\">\r\n  <ol class=\"lpx-breadcrumb\">\r\n    <ng-container *ngFor=\"let item of service.items$ | async; last as 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        <lpx-icon\r\n          class=\"lpx-breadcrumb-item-icon\"\r\n          *ngIf=\"item.icon\"\r\n          [iconClass]=\"item.icon\"\r\n        ></lpx-icon>\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      <li *ngIf=\"!last\" class=\"lpx-breadcrumb-separator\">\r\n        <lpx-icon iconClass=\"bi bi-chevron-right\"></lpx-icon>\r\n      </li>\r\n    </ng-container>\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: function () { return [{ type: BreadcrumbService }]; } });
 
-class LpxClickOutsideModule {
-}
-LpxClickOutsideModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LpxClickOutsideModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-LpxClickOutsideModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: LpxClickOutsideModule, declarations: [ClickOutsideDirective], imports: [CommonModule], exports: [ClickOutsideDirective] });
-LpxClickOutsideModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LpxClickOutsideModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LpxClickOutsideModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [ClickOutsideDirective],
-                    imports: [CommonModule],
-                    exports: [ClickOutsideDirective],
-                }]
+class LpxClickOutsideModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: LpxClickOutsideModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.4", ngImport: i0, type: LpxClickOutsideModule, declarations: [ClickOutsideDirective], imports: [CommonModule], exports: [ClickOutsideDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: LpxClickOutsideModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: LpxClickOutsideModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ClickOutsideDirective],
+                    imports: [CommonModule],
+                    exports: [ClickOutsideDirective],
+                }]
         }] });
 
-class BreadcrumbRouteListenerService {
-    constructor(navbarService, router, breadcrumbService) {
-        this.navbarService = navbarService;
-        this.router = router;
-        this.breadcrumbService = breadcrumbService;
-    }
-    subscribeRoute() {
-        combineLatest([
-            this.router.events.pipe(filter((event) => event instanceof NavigationEnd)),
-            this.navbarService.navbarItems$.pipe(filter((items) => !!items.length)),
-        ]).subscribe(([event, items]) => {
-            let activeItem = this.navbarService.findByLink(event.url);
-            if (!activeItem.item) {
-                activeItem = this.navbarService.findByLink('/');
-            }
-            const breadCrumbItems = activeItem.location.reduce((acc, itemIndex) => {
-                const parent = acc[acc.length - 1]?.children || items;
-                const item = parent[itemIndex];
-                return [
-                    ...acc,
-                    { ...item, siblings: parent },
-                ];
-            }, []);
-            this.breadcrumbService.setItems(this.mapNavbarItemToBreadcrumbItem(breadCrumbItems));
-        });
-    }
-    mapNavbarItemToBreadcrumbItem(items) {
-        return items.map(({ text, link, icon, siblings }) => ({
-            text: text || '',
-            link,
-            icon,
-            children: this.mapNavbarItemToBreadcrumbItem(siblings || []),
-        }));
-    }
-}
-BreadcrumbRouteListenerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BreadcrumbRouteListenerService, deps: [{ token: NavbarService }, { token: i1$1.Router }, { token: BreadcrumbService }], target: i0.ɵɵFactoryTarget.Injectable });
-BreadcrumbRouteListenerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BreadcrumbRouteListenerService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BreadcrumbRouteListenerService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
+class BreadcrumbRouteListenerService {
+    constructor(navbarService, router, breadcrumbService) {
+        this.navbarService = navbarService;
+        this.router = router;
+        this.breadcrumbService = breadcrumbService;
+    }
+    subscribeRoute() {
+        combineLatest([
+            this.router.events.pipe(filter((event) => event instanceof NavigationEnd)),
+            this.navbarService.navbarItems$.pipe(filter((items) => !!items.length)),
+        ]).subscribe(([event, items]) => {
+            let activeItem = this.navbarService.findByLink(event.url);
+            if (!activeItem.item) {
+                activeItem = this.navbarService.findByLink('/');
+            }
+            const breadCrumbItems = activeItem.location.reduce((acc, itemIndex) => {
+                const parent = acc[acc.length - 1]?.children || items;
+                const item = parent[itemIndex];
+                return [
+                    ...acc,
+                    { ...item, siblings: parent },
+                ];
+            }, []);
+            this.breadcrumbService.setItems(this.mapNavbarItemToBreadcrumbItem(breadCrumbItems));
+        });
+    }
+    mapNavbarItemToBreadcrumbItem(items) {
+        return items.map(({ text, link, icon, siblings }) => ({
+            text: text || '',
+            link,
+            icon,
+            children: this.mapNavbarItemToBreadcrumbItem(siblings || []),
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: BreadcrumbRouteListenerService, deps: [{ token: NavbarService }, { token: i1$1.Router }, { token: BreadcrumbService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: BreadcrumbRouteListenerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: BreadcrumbRouteListenerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
         }], ctorParameters: function () { return [{ type: NavbarService }, { type: i1$1.Router }, { type: BreadcrumbService }]; } });
 
-const exportedDeclarations = [BreadcrumbComponent];
-class LpxBreadcrumbModule {
-    static forRoot() {
-        return {
-            ngModule: LpxBreadcrumbModule,
-            providers: [
-                {
-                    provide: APP_INITIALIZER,
-                    useFactory: breadCrumbInit,
-                    multi: true,
-                    deps: [Injector],
-                },
-            ],
-        };
-    }
-}
-LpxBreadcrumbModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LpxBreadcrumbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-LpxBreadcrumbModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: LpxBreadcrumbModule, declarations: [BreadcrumbComponent], imports: [CommonModule,
-        LpxIconModule,
-        ToObservableModule,
-        RouterModule,
-        LpxClickOutsideModule], exports: [BreadcrumbComponent] });
-LpxBreadcrumbModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LpxBreadcrumbModule, imports: [CommonModule,
-        LpxIconModule,
-        ToObservableModule,
-        RouterModule,
-        LpxClickOutsideModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LpxBreadcrumbModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [...exportedDeclarations],
-                    imports: [
-                        CommonModule,
-                        LpxIconModule,
-                        ToObservableModule,
-                        RouterModule,
-                        LpxClickOutsideModule,
-                    ],
-                    exports: [...exportedDeclarations],
-                }]
-        }] });
-function breadCrumbInit(injector) {
-    const subs = () => {
-        const service = injector.get(BreadcrumbRouteListenerService);
-        service.subscribeRoute();
-    };
-    return subs;
-}
-
-const LPX_TRANSLATE_SERVICE_PROVIDER = {
-    provide: LPX_TRANSLATE_SERVICE_TOKEN,
-    useClass: DefaultTranslateService,
-};
-const LPX_TRANSLATE_PROVIDERS = [
-    LPX_TRANSLATE_SERVICE_PROVIDER,
+const exportedDeclarations = [BreadcrumbComponent];
+class LpxBreadcrumbModule {
+    static forRoot() {
+        return {
+            ngModule: LpxBreadcrumbModule,
+            providers: [
+                {
+                    provide: APP_INITIALIZER,
+                    useFactory: breadCrumbInit,
+                    multi: true,
+                    deps: [Injector],
+                },
+            ],
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: LpxBreadcrumbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.4", ngImport: i0, type: LpxBreadcrumbModule, declarations: [BreadcrumbComponent], imports: [CommonModule,
+            LpxIconModule,
+            ToObservableModule,
+            RouterModule,
+            LpxClickOutsideModule], exports: [BreadcrumbComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: LpxBreadcrumbModule, imports: [CommonModule,
+            LpxIconModule,
+            ToObservableModule,
+            RouterModule,
+            LpxClickOutsideModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: LpxBreadcrumbModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [...exportedDeclarations],
+                    imports: [
+                        CommonModule,
+                        LpxIconModule,
+                        ToObservableModule,
+                        RouterModule,
+                        LpxClickOutsideModule,
+                    ],
+                    exports: [...exportedDeclarations],
+                }]
+        }] });
+function breadCrumbInit(injector) {
+    const subs = () => {
+        const service = injector.get(BreadcrumbRouteListenerService);
+        service.subscribeRoute();
+    };
+    return subs;
+}
+
+const LPX_TRANSLATE_SERVICE_PROVIDER = {
+    provide: LPX_TRANSLATE_SERVICE_TOKEN,
+    useClass: DefaultTranslateService,
+};
+const LPX_TRANSLATE_PROVIDERS = [
+    LPX_TRANSLATE_SERVICE_PROVIDER,
 ];
 
-const LPX_INITIAL_STYLES = new InjectionToken('LPX_INITIAL_STYLES_TOKEN');
-const LPX_STYLE_FINAL = new InjectionToken('LPX_STYLE_FINAL_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 StyleService {
-    constructor(initialStyles, document) {
-        this.initialStyles = initialStyles;
-        this.document = document;
-        this.lastInjectedStyle = null;
-        this.initialized$ = new BehaviorSubject(false);
-    }
-    async initStyles(direction) {
-        for (const style of this.initialStyles) {
-            await this.loadStyle(style, direction);
-        }
-        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);
-            }
-            this.lastInjectedStyle = linkElem;
-            return Promise.resolve(linkElem);
-        });
-    }
-    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;
-    }
-}
-StyleService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: StyleService, deps: [{ token: LPX_STYLE_FINAL }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
-StyleService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: StyleService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: StyleService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [LPX_STYLE_FINAL]
-                }] }, { type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
+class StyleService {
+    constructor(initialStyles, document) {
+        this.initialStyles = initialStyles;
+        this.document = document;
+        this.lastInjectedStyle = null;
+        this.initialized$ = new BehaviorSubject(false);
+    }
+    async initStyles(direction) {
+        for (const style of this.initialStyles) {
+            await this.loadStyle(style, direction);
+        }
+        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);
+            }
+            this.lastInjectedStyle = linkElem;
+            return Promise.resolve(linkElem);
+        });
+    }
+    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: "16.0.4", 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: "16.0.4", ngImport: i0, type: StyleService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: StyleService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ 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];
-}
-
-const LPX_STYLE_PROVIDERS = [
-    {
-        provide: LPX_INITIAL_STYLES,
-        useFactory: () => [],
-    },
-    {
-        provide: APP_INITIALIZER,
-        deps: [StyleService, LanguageService],
-        useFactory: loadInitialStyles,
-        multi: true,
-    },
-];
-function loadInitialStyles(styleService, languageService) {
-    return () => {
-        return languageService.languageChange$.pipe(take(1), switchMap((lang) => from(styleService.initStyles(lang.isRTL ? 'rtl' : 'ltr'))));
-    };
+function createStyleFactory(handler) {
+    return handler || ((defaultValue) => defaultValue);
+}
+
+function styleLoadFactory(styleList, layoutStyles) {
+    styleList.push({
+        bundleName: 'ng-bundle',
+    });
+    styleList.push({
+        bundleName: 'font-bundle',
+    });
+    return [...styleList, ...layoutStyles];
+}
+
+const LPX_STYLE_PROVIDERS = [
+    {
+        provide: LPX_INITIAL_STYLES,
+        useFactory: () => [],
+    },
+    {
+        provide: APP_INITIALIZER,
+        deps: [StyleService, LanguageService],
+        useFactory: loadInitialStyles,
+        multi: true,
+    },
+];
+function loadInitialStyles(styleService, languageService) {
+    return () => {
+        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 };
+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,
-        });
-        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;
-    }
-}
-ResponsiveService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ResponsiveService, deps: [{ token: RESPONSIVE_BREAKPOINTS }, { token: WINDOW }], target: i0.ɵɵFactoryTarget.Injectable });
-ResponsiveService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ResponsiveService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ResponsiveService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [RESPONSIVE_BREAKPOINTS]
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [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: "16.0.4", ngImport: i0, type: ResponsiveService, deps: [{ token: RESPONSIVE_BREAKPOINTS }, { token: WINDOW }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: ResponsiveService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: ResponsiveService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ 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();
-    }
-}
-ResponsiveDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ResponsiveDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: ResponsiveService }, { token: i0.ChangeDetectorRef, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive });
-ResponsiveDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: ResponsiveDirective, selector: "[lpxResponsive]", inputs: { query: ["lpxResponsive", "query"] }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ResponsiveDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[lpxResponsive]',
-                }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }, { type: ResponsiveService }, { type: i0.ChangeDetectorRef, decorators: [{
-                    type: Optional
-                }, {
-                    type: SkipSelf
-                }] }]; }, propDecorators: { query: [{
-                type: Input,
-                args: ['lpxResponsive']
+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: "16.0.4", 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: "16.0.4", type: ResponsiveDirective, selector: "[lpxResponsive]", inputs: { query: ["lpxResponsive", "query"] }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: ResponsiveDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[lpxResponsive]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }, { type: ResponsiveService }, { type: i0.ChangeDetectorRef, decorators: [{
+                    type: Optional
+                }, {
+                    type: SkipSelf
+                }] }]; }, propDecorators: { query: [{
+                type: Input,
+                args: ['lpxResponsive']
             }] } });
 
-class LpxResponsiveModule {
-}
-LpxResponsiveModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LpxResponsiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-LpxResponsiveModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: LpxResponsiveModule, declarations: [ResponsiveDirective], imports: [CommonModule], exports: [ResponsiveDirective] });
-LpxResponsiveModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LpxResponsiveModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LpxResponsiveModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [ResponsiveDirective],
-                    imports: [CommonModule],
-                    exports: [ResponsiveDirective],
-                }]
+class LpxResponsiveModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: LpxResponsiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.4", ngImport: i0, type: LpxResponsiveModule, declarations: [ResponsiveDirective], imports: [CommonModule], exports: [ResponsiveDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: LpxResponsiveModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: LpxResponsiveModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ResponsiveDirective],
+                    imports: [CommonModule],
+                    exports: [ResponsiveDirective],
+                }]
         }] });
 
-const LPX_RESPONSIVE_BREAKPOINTS_DEFAULTS = {
-    sm: 480,
-    md: 768,
-    lg: 992,
-    xl: 1200,
+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 {
-        provide: APP_INITIALIZER,
-        multi: true,
-        deps: [LanguageService, StyleService],
-        useFactory: listenDirection ? listenDirectionChange : () => () => null,
-    };
-}
-// subscribe to direction from documentElement and load direction stylesheet
-function listenDirectionChange(languageService, styleService) {
-    return () => {
-        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);
-            });
-        });
-    };
+function createResponsiveProvider(responsiveSettings) {
+    return {
+        provide: RESPONSIVE_BREAKPOINTS,
+        useValue: responsiveSettings || LPX_RESPONSIVE_BREAKPOINTS_DEFAULTS,
+    };
+}
+
+function createDirectionProvider(listenDirection) {
+    return {
+        provide: APP_INITIALIZER,
+        multi: true,
+        deps: [LanguageService, StyleService],
+        useFactory: listenDirection ? listenDirectionChange : () => () => null,
+    };
+}
+// subscribe to direction from documentElement and load direction stylesheet
+function listenDirectionChange(languageService, styleService) {
+    return () => {
+        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);
+            });
+        });
+    };
 }
 
 const LPX_PERFECT_SCROLLBAR = new InjectionToken('LPX_PERFECT_SCROLLBAR');
 
-class LpxCoreModule {
-    static forRoot(options) {
-        return {
-            ngModule: LpxCoreModule,
-            providers: [
-                {
-                    provide: LPX_PERFECT_SCROLLBAR,
-                    useClass: LpxPerfectScrollbarService,
-                },
-                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),
-            ],
-        };
-    }
-}
-LpxCoreModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LpxCoreModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-LpxCoreModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: LpxCoreModule, imports: [CommonModule, LpxVisibleDirective] });
-LpxCoreModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LpxCoreModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LpxCoreModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, LpxVisibleDirective],
-                }]
+class LpxCoreModule {
+    static forRoot(options) {
+        return {
+            ngModule: LpxCoreModule,
+            providers: [
+                {
+                    provide: LPX_PERFECT_SCROLLBAR,
+                    useClass: LpxPerfectScrollbarService,
+                },
+                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),
+            ],
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: LpxCoreModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.4", ngImport: i0, type: LpxCoreModule, imports: [CommonModule, LpxVisibleDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: LpxCoreModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: LpxCoreModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, LpxVisibleDirective],
+                }]
         }] });
 
-class AvatarComponent {
-}
-AvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: AvatarComponent, selector: "lpx-avatar", inputs: { avatar: "avatar" }, ngImport: i0, template: "<div class=\"lpx-avatar\" *ngIf=\"avatar && avatar?.source\">\r\n  <ng-container [ngSwitch]=\"avatar.type\">\r\n    <ng-container *ngSwitchCase=\"'icon'\">\r\n      <lpx-icon class=\"lpx-avatar-icon\" [iconClass]=\"avatar.source\"></lpx-icon>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'image'\">\r\n      <img class=\"lpx-avatar-img\" [src]=\"avatar.source\" />\r\n    </ng-container>\r\n  </ng-container>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: IconComponent, selector: "lpx-icon", inputs: ["iconClass"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AvatarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lpx-avatar', encapsulation: ViewEncapsulation.None, template: "<div class=\"lpx-avatar\" *ngIf=\"avatar && avatar?.source\">\r\n  <ng-container [ngSwitch]=\"avatar.type\">\r\n    <ng-container *ngSwitchCase=\"'icon'\">\r\n      <lpx-icon class=\"lpx-avatar-icon\" [iconClass]=\"avatar.source\"></lpx-icon>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'image'\">\r\n      <img class=\"lpx-avatar-img\" [src]=\"avatar.source\" />\r\n    </ng-container>\r\n  </ng-container>\r\n</div>\r\n" }]
-        }], propDecorators: { avatar: [{
-                type: Input
+class AvatarComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.4", type: AvatarComponent, selector: "lpx-avatar", inputs: { avatar: "avatar" }, ngImport: i0, template: "<div class=\"lpx-avatar\" *ngIf=\"avatar && avatar?.source\">\r\n  <ng-container [ngSwitch]=\"avatar.type\">\r\n    <ng-container *ngSwitchCase=\"'icon'\">\r\n      <lpx-icon class=\"lpx-avatar-icon\" [iconClass]=\"avatar.source\"></lpx-icon>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'image'\">\r\n      <img class=\"lpx-avatar-img\" [src]=\"avatar.source\" />\r\n    </ng-container>\r\n  </ng-container>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: IconComponent, selector: "lpx-icon", inputs: ["iconClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: AvatarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lpx-avatar', encapsulation: ViewEncapsulation.None, template: "<div class=\"lpx-avatar\" *ngIf=\"avatar && avatar?.source\">\r\n  <ng-container [ngSwitch]=\"avatar.type\">\r\n    <ng-container *ngSwitchCase=\"'icon'\">\r\n      <lpx-icon class=\"lpx-avatar-icon\" [iconClass]=\"avatar.source\"></lpx-icon>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'image'\">\r\n      <img class=\"lpx-avatar-img\" [src]=\"avatar.source\" />\r\n    </ng-container>\r\n  </ng-container>\r\n</div>\r\n" }]
+        }], propDecorators: { avatar: [{
+                type: Input
             }] } });
 
-class LpxAvatarModule {
-}
-LpxAvatarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LpxAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-LpxAvatarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: LpxAvatarModule, declarations: [AvatarComponent], imports: [CommonModule, LpxIconModule], exports: [AvatarComponent] });
-LpxAvatarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LpxAvatarModule, imports: [CommonModule, LpxIconModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LpxAvatarModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [AvatarComponent],
-                    imports: [CommonModule, LpxIconModule],
-                    exports: [AvatarComponent],
-                }]
+class LpxAvatarModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: LpxAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.4", ngImport: i0, type: LpxAvatarModule, declarations: [AvatarComponent], imports: [CommonModule, LpxIconModule], exports: [AvatarComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: LpxAvatarModule, imports: [CommonModule, LpxIconModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: LpxAvatarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [AvatarComponent],
+                    imports: [CommonModule, LpxIconModule],
+                    exports: [AvatarComponent],
+                }]
         }] });
 
-class FooterLinksService {
-    constructor() {
-        this.store = new DataStore({});
-        this.footerInfo$ = this.store.sliceState((state) => state);
-    }
-    setFooterInfo(links) {
-        this.store.set(links);
-    }
-}
-FooterLinksService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FooterLinksService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-FooterLinksService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FooterLinksService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FooterLinksService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
+class FooterLinksService {
+    constructor() {
+        this.store = new DataStore({});
+        this.footerInfo$ = this.store.sliceState((state) => state);
+    }
+    setFooterInfo(links) {
+        this.store.set(links);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: FooterLinksService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: FooterLinksService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: FooterLinksService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
         }] });
 
-class FooterComponent {
-    constructor(service) {
-        this.service = service;
-        this.footerValues$ = this.service.footerInfo$;
-        this.currentYear = new Date().getFullYear();
-    }
-}
-FooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FooterComponent, deps: [{ token: FooterLinksService }], target: i0.ɵɵFactoryTarget.Component });
-FooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: FooterComponent, selector: "lpx-footer", ngImport: i0, template: "<ng-container *ngIf=\"footerValues$ | async as footerValues\">\r\n\r\n    <div class=\"lpx-footbar\">\r\n      <div class=\"lpx-footbar-copyright\">\r\n        <span>{{ currentYear }} \u00A9</span>\r\n        <a\r\n          *ngIf=\"footerValues.descUrl; else footerDesc\"\r\n          [routerLink]=\"[footerValues.descUrl]\"\r\n        >\r\n          {{ footerValues.desc }}</a\r\n        >\r\n        <ng-template #footerDesc>\r\n          <a> {{ footerValues.desc }}</a>\r\n        </ng-template>\r\n      </div>\r\n      <div class=\"lpx-footbar-solo-links\">\r\n        <ng-container *ngFor=\"let footerLink of footerValues.footerLinks\">\r\n          <a *ngIf=\"footerLink\" [routerLink]=\"[footerLink.link]\">{{\r\n            footerLink.text\r\n          }}</a>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n\r\n</ng-container>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FooterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lpx-footer', template: "<ng-container *ngIf=\"footerValues$ | async as footerValues\">\r\n\r\n    <div class=\"lpx-footbar\">\r\n      <div class=\"lpx-footbar-copyright\">\r\n        <span>{{ currentYear }} \u00A9</span>\r\n        <a\r\n          *ngIf=\"footerValues.descUrl; else footerDesc\"\r\n          [routerLink]=\"[footerValues.descUrl]\"\r\n        >\r\n          {{ footerValues.desc }}</a\r\n        >\r\n        <ng-template #footerDesc>\r\n          <a> {{ footerValues.desc }}</a>\r\n        </ng-template>\r\n      </div>\r\n      <div class=\"lpx-footbar-solo-links\">\r\n        <ng-container *ngFor=\"let footerLink of footerValues.footerLinks\">\r\n          <a *ngIf=\"footerLink\" [routerLink]=\"[footerLink.link]\">{{\r\n            footerLink.text\r\n          }}</a>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n\r\n</ng-container>\r\n" }]
+class FooterComponent {
+    constructor(service) {
+        this.service = service;
+        this.footerValues$ = this.service.footerInfo$;
+        this.currentYear = new Date().getFullYear();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: FooterComponent, deps: [{ token: FooterLinksService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.4", type: FooterComponent, selector: "lpx-footer", ngImport: i0, template: "<ng-container *ngIf=\"footerValues$ | async as footerValues\">\r\n\r\n    <div class=\"lpx-footbar\">\r\n      <div class=\"lpx-footbar-copyright\">\r\n        <span>{{ currentYear }} \u00A9</span>\r\n        <a\r\n          *ngIf=\"footerValues.descUrl; else footerDesc\"\r\n          [routerLink]=\"[footerValues.descUrl]\"\r\n        >\r\n          {{ footerValues.desc }}</a\r\n        >\r\n        <ng-template #footerDesc>\r\n          <a> {{ footerValues.desc }}</a>\r\n        </ng-template>\r\n      </div>\r\n      <div class=\"lpx-footbar-solo-links\">\r\n        <ng-container *ngFor=\"let footerLink of footerValues.footerLinks\">\r\n          <a *ngIf=\"footerLink\" [routerLink]=\"[footerLink.link]\">{{\r\n            footerLink.text\r\n          }}</a>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n\r\n</ng-container>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: FooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lpx-footer', template: "<ng-container *ngIf=\"footerValues$ | async as footerValues\">\r\n\r\n    <div class=\"lpx-footbar\">\r\n      <div class=\"lpx-footbar-copyright\">\r\n        <span>{{ currentYear }} \u00A9</span>\r\n        <a\r\n          *ngIf=\"footerValues.descUrl; else footerDesc\"\r\n          [routerLink]=\"[footerValues.descUrl]\"\r\n        >\r\n          {{ footerValues.desc }}</a\r\n        >\r\n        <ng-template #footerDesc>\r\n          <a> {{ footerValues.desc }}</a>\r\n        </ng-template>\r\n      </div>\r\n      <div class=\"lpx-footbar-solo-links\">\r\n        <ng-container *ngFor=\"let footerLink of footerValues.footerLinks\">\r\n          <a *ngIf=\"footerLink\" [routerLink]=\"[footerLink.link]\">{{\r\n            footerLink.text\r\n          }}</a>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n\r\n</ng-container>\r\n" }]
         }], ctorParameters: function () { return [{ type: FooterLinksService }]; } });
 
-class LpxFooterModule {
-    static forRoot() {
-        return {
-            ngModule: LpxFooterModule,
-            providers: [],
-        };
-    }
-}
-LpxFooterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LpxFooterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-LpxFooterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: LpxFooterModule, declarations: [FooterComponent], imports: [CommonModule, RouterModule], exports: [FooterComponent] });
-LpxFooterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LpxFooterModule, imports: [CommonModule, RouterModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LpxFooterModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [FooterComponent],
-                    exports: [FooterComponent],
-                    imports: [CommonModule, RouterModule],
-                }]
+class LpxFooterModule {
+    static forRoot() {
+        return {
+            ngModule: LpxFooterModule,
+            providers: [],
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: LpxFooterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.4", ngImport: i0, type: LpxFooterModule, declarations: [FooterComponent], imports: [CommonModule, RouterModule], exports: [FooterComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: LpxFooterModule, imports: [CommonModule, RouterModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: LpxFooterModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [FooterComponent],
+                    exports: [FooterComponent],
+                    imports: [CommonModule, RouterModule],
+                }]
         }] });
 
-class PerfectScrollbarDirective {
-    constructor() {
-        this.elementRef = inject(ElementRef);
-        this.lpxPerfectService = inject(LPX_PERFECT_SCROLLBAR);
-    }
-    set lpxPerfectScrollbarOptions(value) {
-        this.lpxPerfectService.setOptions(value);
-    }
-    onResize() {
-        this.lpxPerfectService.onResize();
-    }
-    ngAfterViewInit() {
-        this.lpxPerfectService.setElement(this.elementRef);
-        this.lpxPerfectService.afterViewInit();
-    }
-}
-PerfectScrollbarDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PerfectScrollbarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-PerfectScrollbarDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: PerfectScrollbarDirective, isStandalone: true, selector: "[lpxPerfectScrollbar]", inputs: { lpxPerfectScrollbarOptions: "lpxPerfectScrollbarOptions" }, host: { listeners: { "window:resize": "onResize()" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PerfectScrollbarDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[lpxPerfectScrollbar]',
-                    standalone: true,
-                }]
-        }], propDecorators: { lpxPerfectScrollbarOptions: [{
-                type: Input
-            }], onResize: [{
-                type: HostListener,
-                args: ['window:resize']
+class PerfectScrollbarDirective {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.lpxPerfectService = inject(LPX_PERFECT_SCROLLBAR);
+    }
+    set lpxPerfectScrollbarOptions(value) {
+        this.lpxPerfectService.setOptions(value);
+    }
+    onResize() {
+        this.lpxPerfectService.onResize();
+    }
+    ngAfterViewInit() {
+        this.lpxPerfectService.setElement(this.elementRef);
+        this.lpxPerfectService.afterViewInit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: PerfectScrollbarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.4", type: PerfectScrollbarDirective, isStandalone: true, selector: "[lpxPerfectScrollbar]", inputs: { lpxPerfectScrollbarOptions: "lpxPerfectScrollbarOptions" }, host: { listeners: { "window:resize": "onResize()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: PerfectScrollbarDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[lpxPerfectScrollbar]',
+                    standalone: true,
+                }]
+        }], propDecorators: { lpxPerfectScrollbarOptions: [{
+                type: Input
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize']
             }] } });
 
-class BreadcrumbPanelDirective {
-    constructor(template) {
-        this.template = template;
-    }
-}
-BreadcrumbPanelDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BreadcrumbPanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-BreadcrumbPanelDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: BreadcrumbPanelDirective, selector: "ng-template[lpx-breadcrumb-panel]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BreadcrumbPanelDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'ng-template[lpx-breadcrumb-panel]',
-                }]
+class BreadcrumbPanelDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: BreadcrumbPanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.4", type: BreadcrumbPanelDirective, selector: "ng-template[lpx-breadcrumb-panel]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: BreadcrumbPanelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[lpx-breadcrumb-panel]',
+                }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
-class ContentPanelDirective {
-    constructor(template) {
-        this.template = template;
-    }
-}
-ContentPanelDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ContentPanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-ContentPanelDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: ContentPanelDirective, selector: "ng-template[lpx-content]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ContentPanelDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'ng-template[lpx-content]',
-                }]
+class ContentPanelDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: ContentPanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.4", type: ContentPanelDirective, selector: "ng-template[lpx-content]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: ContentPanelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[lpx-content]',
+                }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
-class CurrentUserImagePanelDirective {
-    constructor(template) {
-        this.template = template;
-    }
-}
-CurrentUserImagePanelDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CurrentUserImagePanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-CurrentUserImagePanelDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: CurrentUserImagePanelDirective, selector: "ng-template[lpx-current-user-image-panel]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CurrentUserImagePanelDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'ng-template[lpx-current-user-image-panel]',
-                }]
+class CurrentUserImagePanelDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: CurrentUserImagePanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.4", type: CurrentUserImagePanelDirective, selector: "ng-template[lpx-current-user-image-panel]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: CurrentUserImagePanelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[lpx-current-user-image-panel]',
+                }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
-class CurrentUserPanelDirective {
-    constructor(template) {
-        this.template = template;
-    }
-}
-CurrentUserPanelDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CurrentUserPanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-CurrentUserPanelDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: CurrentUserPanelDirective, selector: "ng-template[lpx-current-user-panel]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CurrentUserPanelDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'ng-template[lpx-current-user-panel]',
-                }]
+class CurrentUserPanelDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: CurrentUserPanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.4", type: CurrentUserPanelDirective, selector: "ng-template[lpx-current-user-panel]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: CurrentUserPanelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[lpx-current-user-panel]',
+                }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
-class FooterPanelDirective {
-    constructor(template) {
-        this.template = template;
-    }
-}
-FooterPanelDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FooterPanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-FooterPanelDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: FooterPanelDirective, selector: "ng-template[lpx-footer-panel]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FooterPanelDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'ng-template[lpx-footer-panel]',
-                }]
+class FooterPanelDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: FooterPanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.4", type: FooterPanelDirective, selector: "ng-template[lpx-footer-panel]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: FooterPanelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[lpx-footer-panel]',
+                }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
-class LanguagePanelDirective {
-    constructor(template) {
-        this.template = template;
-    }
-}
-LanguagePanelDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LanguagePanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-LanguagePanelDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: LanguagePanelDirective, selector: "ng-template[lpx-language-panel]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LanguagePanelDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'ng-template[lpx-language-panel]',
-                }]
+class LanguagePanelDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: LanguagePanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.4", type: LanguagePanelDirective, selector: "ng-template[lpx-language-panel]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: LanguagePanelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[lpx-language-panel]',
+                }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
-class MobileNavbarPanelDirective {
-    constructor(template) {
-        this.template = template;
-    }
-}
-MobileNavbarPanelDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MobileNavbarPanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-MobileNavbarPanelDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: MobileNavbarPanelDirective, selector: "ng-template[lpx-mobile-navbar-panel]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MobileNavbarPanelDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'ng-template[lpx-mobile-navbar-panel]',
-                }]
+class MobileNavbarPanelDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: MobileNavbarPanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.4", type: MobileNavbarPanelDirective, selector: "ng-template[lpx-mobile-navbar-panel]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: MobileNavbarPanelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[lpx-mobile-navbar-panel]',
+                }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
-class NavbarPanelDirective {
-    constructor(template) {
-        this.template = template;
-    }
-}
-NavbarPanelDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NavbarPanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-NavbarPanelDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: NavbarPanelDirective, selector: "ng-template[lpx-navbar-panel]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NavbarPanelDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'ng-template[lpx-navbar-panel]',
-                }]
+class NavbarPanelDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: NavbarPanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.4", type: NavbarPanelDirective, selector: "ng-template[lpx-navbar-panel]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: NavbarPanelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[lpx-navbar-panel]',
+                }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
-class NavitemPanelDirective {
-    constructor(template) {
-        this.template = template;
-    }
-}
-NavitemPanelDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NavitemPanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-NavitemPanelDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: NavitemPanelDirective, selector: "ng-template[lpx-navitem-panel]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NavitemPanelDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'ng-template[lpx-navitem-panel]',
-                }]
+class NavitemPanelDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: NavitemPanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.4", type: NavitemPanelDirective, selector: "ng-template[lpx-navitem-panel]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: NavitemPanelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[lpx-navitem-panel]',
+                }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
-class ToolbarPanelDirective {
-    constructor(template) {
-        this.template = template;
-    }
-}
-ToolbarPanelDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ToolbarPanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-ToolbarPanelDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: ToolbarPanelDirective, selector: "ng-template[lpx-toolbar-panel]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ToolbarPanelDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'ng-template[lpx-toolbar-panel]',
-                }]
+class ToolbarPanelDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: ToolbarPanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.4", type: ToolbarPanelDirective, selector: "ng-template[lpx-toolbar-panel]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: ToolbarPanelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[lpx-toolbar-panel]',
+                }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
-class TopNavbarPanelDirective {
-    constructor(template) {
-        this.template = template;
-    }
-}
-TopNavbarPanelDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TopNavbarPanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-TopNavbarPanelDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: TopNavbarPanelDirective, selector: "ng-template[lpx-top-navbar-panel]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TopNavbarPanelDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'ng-template[lpx-top-navbar-panel]',
-                }]
+class TopNavbarPanelDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: TopNavbarPanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.4", type: TopNavbarPanelDirective, selector: "ng-template[lpx-top-navbar-panel]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: TopNavbarPanelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[lpx-top-navbar-panel]',
+                }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
-class SettingsPanelDirective {
-    constructor(template) {
-        this.template = template;
-    }
-}
-SettingsPanelDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SettingsPanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-SettingsPanelDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: SettingsPanelDirective, selector: "ng-template[lpx-settings-panel]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SettingsPanelDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'ng-template[lpx-settings-panel]',
-                }]
+class SettingsPanelDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: SettingsPanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.4", type: SettingsPanelDirective, selector: "ng-template[lpx-settings-panel]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: SettingsPanelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[lpx-settings-panel]',
+                }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
-const declarationsAndExports = [
-    BreadcrumbPanelDirective,
-    ContentPanelDirective,
-    CurrentUserImagePanelDirective,
-    CurrentUserPanelDirective,
-    FooterPanelDirective,
-    LanguagePanelDirective,
-    LogoPanelDirective,
-    MobileNavbarPanelDirective,
-    NavbarPanelDirective,
-    NavitemPanelDirective,
-    SettingsPanelDirective,
-    TopNavbarPanelDirective,
-    ToolbarPanelDirective,
-];
-class PanelsModule {
-}
-PanelsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PanelsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PanelsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: PanelsModule, declarations: [BreadcrumbPanelDirective,
-        ContentPanelDirective,
-        CurrentUserImagePanelDirective,
-        CurrentUserPanelDirective,
-        FooterPanelDirective,
-        LanguagePanelDirective,
-        LogoPanelDirective,
-        MobileNavbarPanelDirective,
-        NavbarPanelDirective,
-        NavitemPanelDirective,
-        SettingsPanelDirective,
-        TopNavbarPanelDirective,
-        ToolbarPanelDirective], imports: [CommonModule], exports: [BreadcrumbPanelDirective,
-        ContentPanelDirective,
-        CurrentUserImagePanelDirective,
-        CurrentUserPanelDirective,
-        FooterPanelDirective,
-        LanguagePanelDirective,
-        LogoPanelDirective,
-        MobileNavbarPanelDirective,
-        NavbarPanelDirective,
-        NavitemPanelDirective,
-        SettingsPanelDirective,
-        TopNavbarPanelDirective,
-        ToolbarPanelDirective] });
-PanelsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PanelsModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PanelsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [...declarationsAndExports],
-                    imports: [CommonModule],
-                    exports: [...declarationsAndExports],
-                }]
+const declarationsAndExports = [
+    BreadcrumbPanelDirective,
+    ContentPanelDirective,
+    CurrentUserImagePanelDirective,
+    CurrentUserPanelDirective,
+    FooterPanelDirective,
+    LanguagePanelDirective,
+    LogoPanelDirective,
+    MobileNavbarPanelDirective,
+    NavbarPanelDirective,
+    NavitemPanelDirective,
+    SettingsPanelDirective,
+    TopNavbarPanelDirective,
+    ToolbarPanelDirective,
+];
+class PanelsModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: PanelsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.4", ngImport: i0, type: PanelsModule, declarations: [BreadcrumbPanelDirective,
+            ContentPanelDirective,
+            CurrentUserImagePanelDirective,
+            CurrentUserPanelDirective,
+            FooterPanelDirective,
+            LanguagePanelDirective,
+            LogoPanelDirective,
+            MobileNavbarPanelDirective,
+            NavbarPanelDirective,
+            NavitemPanelDirective,
+            SettingsPanelDirective,
+            TopNavbarPanelDirective,
+            ToolbarPanelDirective], imports: [CommonModule], exports: [BreadcrumbPanelDirective,
+            ContentPanelDirective,
+            CurrentUserImagePanelDirective,
+            CurrentUserPanelDirective,
+            FooterPanelDirective,
+            LanguagePanelDirective,
+            LogoPanelDirective,
+            MobileNavbarPanelDirective,
+            NavbarPanelDirective,
+            NavitemPanelDirective,
+            SettingsPanelDirective,
+            TopNavbarPanelDirective,
+            ToolbarPanelDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: PanelsModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: PanelsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [...declarationsAndExports],
+                    imports: [CommonModule],
+                    exports: [...declarationsAndExports],
+                }]
         }] });
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * 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, LPX_AUTH_SERVICE_PROVIDER, LPX_AUTH_SERVICE_TOKEN, LPX_INITIAL_STYLES, LPX_LANGUAGE, LPX_LAYOUT_STYLE_FINAL, LPX_MENU_ITEMS, LPX_PERFECT_SCROLLBAR, 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, LpxNavbarModule, LpxPerfectScrollbar, LpxPerfectScrollbarService, LpxResponsiveModule, LpxThemeTranslateService, LpxTranslateModule, LpxVisibleDirective, MobileNavbarPanelDirective, NavbarComponent, NavbarPanelDirective, NavbarRoutesComponent, NavbarRoutesDirective, NavbarService, NavitemPanelDirective, OTHERS_GROUP_KEY, PanelsModule, PerfectScrollbarDirective, RESPONSIVE_BREAKPOINTS, ResponsiveDirective, ResponsiveService, SafeHtmlPipe, SettingsPanelDirective, StyleService, SubNavbarComponent, ToObservableModule, ToObservablePipe, ToolbarPanelDirective, TopNavbarPanelDirective, TranslatePipe, UserProfileService, WINDOW, breadCrumbInit, createDirectionProvider, createGroupMap, createResponsiveProvider, createStyleFactory, createWindowProvider, exportedDeclarations, flatArrayDeepToObject, getItemsFromGroup, getStream$, isArray, isNullOrUndefined, listenDirectionChange, loadInitialStyles, sortItems, styleLoadFactory };