@lukfel/ng-scaffold 22.1.13 → 22.2.1

package/fesm2022/lukfel-ng-scaffold.mjs

@@ -1,6 +1,6 @@
 import { MediaMatcher, BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import * as i0 from '@angular/core';
-import { inject, PLATFORM_ID, REQUEST, Injectable, InjectionToken, makeEnvironmentProviders, DOCUMENT, signal, input, output, ChangeDetectionStrategy, Component, effect, DestroyRef, viewChild, computed, model, afterNextRender, linkedSignal, TemplateRef, Directive, contentChild } from '@angular/core';
+import { inject, PLATFORM_ID, REQUEST, Injectable, InjectionToken, makeEnvironmentProviders, DOCUMENT, signal, computed, input, output, ChangeDetectionStrategy, Component, effect, DestroyRef, viewChild, model, afterNextRender, linkedSignal, TemplateRef, Directive, contentChild } from '@angular/core';
 import { isPlatformBrowser, NgClass, NgTemplateOutlet, KeyValuePipe } from '@angular/common';
 import { toObservable, toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1$3 from '@angular/router';
@@ -686,16 +686,33 @@ class SnackbarService {
             horizontalPosition: this.SNACKBAR_POSITION_HORIZONTAL,
             verticalPosition: this.SNACKBAR_POSITION_VERTICAL,
         };
+        this.bottomOpenCount = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "bottomOpenCount" }] : /* istanbul ignore next */ []));
+        this.bottomSnackbarOpen = computed(() => this.bottomOpenCount() > 0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "bottomSnackbarOpen" }] : /* istanbul ignore next */ []));
     }
     // Opens a generic snackbar with a message
     openSnackbar(message, closeLabel, config) {
-        this.snackbar.open(message, closeLabel, config ? config : this.defaultConfig);
+        const snackbarConfig = config ? config : this.defaultConfig;
+        this.track(this.snackbar.open(message, closeLabel, snackbarConfig), snackbarConfig);
     }
     // Opens a snackbar with an action to wait for
     openSnackbarWithAction(message, action, config) {
-        const snackbarRef = this.snackbar.open(message, action, config ? config : this.actionConfig);
+        const snackbarConfig = config ? config : this.actionConfig;
+        const snackbarRef = this.snackbar.open(message, action, snackbarConfig);
+        this.track(snackbarRef, snackbarConfig);
         return firstValueFrom(snackbarRef.onAction());
     }
+    track(snackbarRef, config) {
+        // MatSnackBarConfig itself defaults to 'bottom', so an unset position is a bottom one
+        if ((config.verticalPosition ?? 'bottom') !== 'bottom')
+            return;
+        this.bottomOpenCount.update((count) => count + 1);
+        // afterDismissed completes once the snackbar is gone, so there is nothing to unsubscribe
+        snackbarRef
+            .afterDismissed()
+            .subscribe(() => this.bottomOpenCount.update((count) => Math.max(0, count - 1)));
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SnackbarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SnackbarService, providedIn: 'root' }); }
 }
@@ -1071,6 +1088,8 @@ class FloatingButtonComponent {
         ...(ngDevMode ? [{ debugName: "navbarEnabled" }] : /* istanbul ignore next */ []));
         this.bottomBarEnabled = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "bottomBarEnabled" }] : /* istanbul ignore next */ []));
+        this.bottomSnackbarOpen = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "bottomSnackbarOpen" }] : /* istanbul ignore next */ []));
         this.floatingButtonConfigUpdateEvent = output();
         this.floatingButtonClickEvent = output();
         this.initialized = signal(false, /* @ts-ignore */
@@ -1095,12 +1114,12 @@ class FloatingButtonComponent {
         this.floatingButtonClickEvent.emit(id || '');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FloatingButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FloatingButtonComponent, isStandalone: true, selector: "lf-floating-button", inputs: { libraryConfig: { classPropertyName: "libraryConfig", publicName: "libraryConfig", isSignal: true, isRequired: false, transformFunction: null }, floatingButtonConfig: { classPropertyName: "floatingButtonConfig", publicName: "floatingButtonConfig", isSignal: true, isRequired: false, transformFunction: null }, onTop: { classPropertyName: "onTop", publicName: "onTop", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, drawerEnabled: { classPropertyName: "drawerEnabled", publicName: "drawerEnabled", isSignal: true, isRequired: false, transformFunction: null }, navbarEnabled: { classPropertyName: "navbarEnabled", publicName: "navbarEnabled", isSignal: true, isRequired: false, transformFunction: null }, bottomBarEnabled: { classPropertyName: "bottomBarEnabled", publicName: "bottomBarEnabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { floatingButtonConfigUpdateEvent: "floatingButtonConfigUpdateEvent", floatingButtonClickEvent: "floatingButtonClickEvent" }, ngImport: i0, template: "@if (floatingButtonConfig(); as config) {\r\n  @if (config.enable && (!config.autoHide || !onTop())) {\r\n    <button\r\n      mat-fab\r\n      color=\"accent\"\r\n      class=\"lf-floating-button lf-transitions\"\r\n      [ngClass]=\"config.cssClass + ' ' + config.horizontalPosition\"\r\n      [class.sticky]=\"config.sticky\"\r\n      [class.show-navbar]=\"isMobile() && navbarEnabled() && !bottomBarEnabled()\"\r\n      [class.show-bottom-bar]=\"bottomBarEnabled() && !(isMobile() && navbarEnabled())\"\r\n      [class.show-navbar-and-bottom-bar]=\"isMobile() && navbarEnabled() && bottomBarEnabled()\"\r\n      [class.show-drawer]=\"!isMobile() && drawerEnabled()\"\r\n      [extended]=\"!!config.label\"\r\n      [disabled]=\"config.disabled\"\r\n      (click)=\"buttonClicked(config.id)\"\r\n      [matTooltip]=\"config.tooltip!\">\r\n      <!-- icon -->\r\n      @if (config.matIcon) {\r\n        <mat-icon>\r\n          {{ config.matIcon }}\r\n        </mat-icon>\r\n      } @else if (config.svgIcon) {\r\n        <mat-icon [svgIcon]=\"config.svgIcon\"></mat-icon>\r\n      }\r\n      <!-- svg icon -->\r\n      <!-- label -->\r\n      @if (config.label) {\r\n        <span class=\"lf-floating-button-label\">\r\n          {{ config.label }}\r\n        </span>\r\n      }\r\n    </button>\r\n  }\r\n}\r\n", styles: [".lf-floating-button{z-index:var(--floating-button-z-index);bottom:var(--floating-button-bottom)}.lf-floating-button.sticky{position:sticky!important}.lf-floating-button.sticky.show-bottom-bar,.lf-floating-button.sticky.show-navbar-and-bottom-bar{bottom:calc(var(--floating-button-bottom) + var(--bottom-bar-height))}.lf-floating-button.sticky.center{left:50%;transform:translate(-50%)}.lf-floating-button.sticky.center.show-drawer{left:calc(50% + var(--drawer-width) / 2)!important}.lf-floating-button.sticky.right{left:100%}.lf-floating-button:not(.sticky){position:fixed!important}.lf-floating-button:not(.sticky).show-navbar{bottom:calc(var(--floating-button-bottom) + var(--navbar-height-mobile))}.lf-floating-button:not(.sticky).show-bottom-bar{bottom:calc(var(--floating-button-bottom) + var(--bottom-bar-height))}.lf-floating-button:not(.sticky).show-navbar-and-bottom-bar{bottom:calc(var(--floating-button-bottom) + var(--navbar-height-mobile) + var(--bottom-bar-height))}.lf-floating-button:not(.sticky).center{left:calc(50% - 4px);transform:translate(-50%)}.lf-floating-button:not(.sticky).center.show-drawer{left:calc(50% + var(--drawer-width) / 2 - 4px)!important}.lf-floating-button:not(.sticky).right{left:calc(100% - (var(--floating-button-right) + 8px));transform:translate(-100%)}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FloatingButtonComponent, isStandalone: true, selector: "lf-floating-button", inputs: { libraryConfig: { classPropertyName: "libraryConfig", publicName: "libraryConfig", isSignal: true, isRequired: false, transformFunction: null }, floatingButtonConfig: { classPropertyName: "floatingButtonConfig", publicName: "floatingButtonConfig", isSignal: true, isRequired: false, transformFunction: null }, onTop: { classPropertyName: "onTop", publicName: "onTop", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, drawerEnabled: { classPropertyName: "drawerEnabled", publicName: "drawerEnabled", isSignal: true, isRequired: false, transformFunction: null }, navbarEnabled: { classPropertyName: "navbarEnabled", publicName: "navbarEnabled", isSignal: true, isRequired: false, transformFunction: null }, bottomBarEnabled: { classPropertyName: "bottomBarEnabled", publicName: "bottomBarEnabled", isSignal: true, isRequired: false, transformFunction: null }, bottomSnackbarOpen: { classPropertyName: "bottomSnackbarOpen", publicName: "bottomSnackbarOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { floatingButtonConfigUpdateEvent: "floatingButtonConfigUpdateEvent", floatingButtonClickEvent: "floatingButtonClickEvent" }, ngImport: i0, template: "@if (floatingButtonConfig(); as config) {\r\n  @if (config.enable && (!config.autoHide || !onTop())) {\r\n    <button\r\n      mat-fab\r\n      color=\"accent\"\r\n      class=\"lf-floating-button lf-transitions\"\r\n      [ngClass]=\"config.cssClass + ' ' + config.horizontalPosition\"\r\n      [class.sticky]=\"config.sticky\"\r\n      [class.show-navbar]=\"isMobile() && navbarEnabled() && !bottomBarEnabled()\"\r\n      [class.show-bottom-bar]=\"bottomBarEnabled() && !(isMobile() && navbarEnabled())\"\r\n      [class.show-navbar-and-bottom-bar]=\"isMobile() && navbarEnabled() && bottomBarEnabled()\"\r\n      [class.show-snackbar]=\"bottomSnackbarOpen()\"\r\n      [class.show-drawer]=\"!isMobile() && drawerEnabled()\"\r\n      [extended]=\"!!config.label\"\r\n      [disabled]=\"config.disabled\"\r\n      (click)=\"buttonClicked(config.id)\"\r\n      [matTooltip]=\"config.tooltip!\">\r\n      <!-- icon -->\r\n      @if (config.matIcon) {\r\n        <mat-icon>\r\n          {{ config.matIcon }}\r\n        </mat-icon>\r\n      } @else if (config.svgIcon) {\r\n        <mat-icon [svgIcon]=\"config.svgIcon\"></mat-icon>\r\n      }\r\n      <!-- svg icon -->\r\n      <!-- label -->\r\n      @if (config.label) {\r\n        <span class=\"lf-floating-button-label\">\r\n          {{ config.label }}\r\n        </span>\r\n      }\r\n    </button>\r\n  }\r\n}\r\n", styles: [".lf-floating-button{z-index:var(--floating-button-z-index);bottom:calc(var(--floating-button-bottom) + var(--lf-fab-snackbar-offset, 0px))}.lf-floating-button.show-snackbar{--lf-fab-snackbar-offset: var(--floating-button-snackbar-offset)}.lf-floating-button.sticky{position:sticky!important}.lf-floating-button.sticky.show-bottom-bar,.lf-floating-button.sticky.show-navbar-and-bottom-bar{bottom:calc(var(--floating-button-bottom) + var(--bottom-bar-height) + var(--lf-fab-snackbar-offset, 0px))}.lf-floating-button.sticky.center{left:50%;transform:translate(-50%)}.lf-floating-button.sticky.center.show-drawer{left:calc(50% + var(--drawer-width) / 2)!important}.lf-floating-button.sticky.right{left:100%}.lf-floating-button:not(.sticky){position:fixed!important}.lf-floating-button:not(.sticky).show-navbar{bottom:calc(var(--floating-button-bottom) + var(--navbar-height-mobile) + var(--lf-fab-snackbar-offset, 0px))}.lf-floating-button:not(.sticky).show-bottom-bar{bottom:calc(var(--floating-button-bottom) + var(--bottom-bar-height) + var(--lf-fab-snackbar-offset, 0px))}.lf-floating-button:not(.sticky).show-navbar-and-bottom-bar{bottom:calc(var(--floating-button-bottom) + var(--navbar-height-mobile) + var(--bottom-bar-height) + var(--lf-fab-snackbar-offset, 0px))}.lf-floating-button:not(.sticky).center{left:calc(50% - 4px);transform:translate(-50%)}.lf-floating-button:not(.sticky).center.show-drawer{left:calc(50% + var(--drawer-width) / 2 - 4px)!important}.lf-floating-button:not(.sticky).right{left:calc(100% - (var(--floating-button-right) + 8px));transform:translate(-100%)}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FloatingButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lf-floating-button', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatButtonModule, MatIconModule, MatTooltipModule, NgClass], template: "@if (floatingButtonConfig(); as config) {\r\n  @if (config.enable && (!config.autoHide || !onTop())) {\r\n    <button\r\n      mat-fab\r\n      color=\"accent\"\r\n      class=\"lf-floating-button lf-transitions\"\r\n      [ngClass]=\"config.cssClass + ' ' + config.horizontalPosition\"\r\n      [class.sticky]=\"config.sticky\"\r\n      [class.show-navbar]=\"isMobile() && navbarEnabled() && !bottomBarEnabled()\"\r\n      [class.show-bottom-bar]=\"bottomBarEnabled() && !(isMobile() && navbarEnabled())\"\r\n      [class.show-navbar-and-bottom-bar]=\"isMobile() && navbarEnabled() && bottomBarEnabled()\"\r\n      [class.show-drawer]=\"!isMobile() && drawerEnabled()\"\r\n      [extended]=\"!!config.label\"\r\n      [disabled]=\"config.disabled\"\r\n      (click)=\"buttonClicked(config.id)\"\r\n      [matTooltip]=\"config.tooltip!\">\r\n      <!-- icon -->\r\n      @if (config.matIcon) {\r\n        <mat-icon>\r\n          {{ config.matIcon }}\r\n        </mat-icon>\r\n      } @else if (config.svgIcon) {\r\n        <mat-icon [svgIcon]=\"config.svgIcon\"></mat-icon>\r\n      }\r\n      <!-- svg icon -->\r\n      <!-- label -->\r\n      @if (config.label) {\r\n        <span class=\"lf-floating-button-label\">\r\n          {{ config.label }}\r\n        </span>\r\n      }\r\n    </button>\r\n  }\r\n}\r\n", styles: [".lf-floating-button{z-index:var(--floating-button-z-index);bottom:var(--floating-button-bottom)}.lf-floating-button.sticky{position:sticky!important}.lf-floating-button.sticky.show-bottom-bar,.lf-floating-button.sticky.show-navbar-and-bottom-bar{bottom:calc(var(--floating-button-bottom) + var(--bottom-bar-height))}.lf-floating-button.sticky.center{left:50%;transform:translate(-50%)}.lf-floating-button.sticky.center.show-drawer{left:calc(50% + var(--drawer-width) / 2)!important}.lf-floating-button.sticky.right{left:100%}.lf-floating-button:not(.sticky){position:fixed!important}.lf-floating-button:not(.sticky).show-navbar{bottom:calc(var(--floating-button-bottom) + var(--navbar-height-mobile))}.lf-floating-button:not(.sticky).show-bottom-bar{bottom:calc(var(--floating-button-bottom) + var(--bottom-bar-height))}.lf-floating-button:not(.sticky).show-navbar-and-bottom-bar{bottom:calc(var(--floating-button-bottom) + var(--navbar-height-mobile) + var(--bottom-bar-height))}.lf-floating-button:not(.sticky).center{left:calc(50% - 4px);transform:translate(-50%)}.lf-floating-button:not(.sticky).center.show-drawer{left:calc(50% + var(--drawer-width) / 2 - 4px)!important}.lf-floating-button:not(.sticky).right{left:calc(100% - (var(--floating-button-right) + 8px));transform:translate(-100%)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { libraryConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "libraryConfig", required: false }] }], floatingButtonConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatingButtonConfig", required: false }] }], onTop: [{ type: i0.Input, args: [{ isSignal: true, alias: "onTop", required: false }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], drawerEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerEnabled", required: false }] }], navbarEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "navbarEnabled", required: false }] }], bottomBarEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "bottomBarEnabled", required: false }] }], floatingButtonConfigUpdateEvent: [{ type: i0.Output, args: ["floatingButtonConfigUpdateEvent"] }], floatingButtonClickEvent: [{ type: i0.Output, args: ["floatingButtonClickEvent"] }] } });
+            args: [{ selector: 'lf-floating-button', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatButtonModule, MatIconModule, MatTooltipModule, NgClass], template: "@if (floatingButtonConfig(); as config) {\r\n  @if (config.enable && (!config.autoHide || !onTop())) {\r\n    <button\r\n      mat-fab\r\n      color=\"accent\"\r\n      class=\"lf-floating-button lf-transitions\"\r\n      [ngClass]=\"config.cssClass + ' ' + config.horizontalPosition\"\r\n      [class.sticky]=\"config.sticky\"\r\n      [class.show-navbar]=\"isMobile() && navbarEnabled() && !bottomBarEnabled()\"\r\n      [class.show-bottom-bar]=\"bottomBarEnabled() && !(isMobile() && navbarEnabled())\"\r\n      [class.show-navbar-and-bottom-bar]=\"isMobile() && navbarEnabled() && bottomBarEnabled()\"\r\n      [class.show-snackbar]=\"bottomSnackbarOpen()\"\r\n      [class.show-drawer]=\"!isMobile() && drawerEnabled()\"\r\n      [extended]=\"!!config.label\"\r\n      [disabled]=\"config.disabled\"\r\n      (click)=\"buttonClicked(config.id)\"\r\n      [matTooltip]=\"config.tooltip!\">\r\n      <!-- icon -->\r\n      @if (config.matIcon) {\r\n        <mat-icon>\r\n          {{ config.matIcon }}\r\n        </mat-icon>\r\n      } @else if (config.svgIcon) {\r\n        <mat-icon [svgIcon]=\"config.svgIcon\"></mat-icon>\r\n      }\r\n      <!-- svg icon -->\r\n      <!-- label -->\r\n      @if (config.label) {\r\n        <span class=\"lf-floating-button-label\">\r\n          {{ config.label }}\r\n        </span>\r\n      }\r\n    </button>\r\n  }\r\n}\r\n", styles: [".lf-floating-button{z-index:var(--floating-button-z-index);bottom:calc(var(--floating-button-bottom) + var(--lf-fab-snackbar-offset, 0px))}.lf-floating-button.show-snackbar{--lf-fab-snackbar-offset: var(--floating-button-snackbar-offset)}.lf-floating-button.sticky{position:sticky!important}.lf-floating-button.sticky.show-bottom-bar,.lf-floating-button.sticky.show-navbar-and-bottom-bar{bottom:calc(var(--floating-button-bottom) + var(--bottom-bar-height) + var(--lf-fab-snackbar-offset, 0px))}.lf-floating-button.sticky.center{left:50%;transform:translate(-50%)}.lf-floating-button.sticky.center.show-drawer{left:calc(50% + var(--drawer-width) / 2)!important}.lf-floating-button.sticky.right{left:100%}.lf-floating-button:not(.sticky){position:fixed!important}.lf-floating-button:not(.sticky).show-navbar{bottom:calc(var(--floating-button-bottom) + var(--navbar-height-mobile) + var(--lf-fab-snackbar-offset, 0px))}.lf-floating-button:not(.sticky).show-bottom-bar{bottom:calc(var(--floating-button-bottom) + var(--bottom-bar-height) + var(--lf-fab-snackbar-offset, 0px))}.lf-floating-button:not(.sticky).show-navbar-and-bottom-bar{bottom:calc(var(--floating-button-bottom) + var(--navbar-height-mobile) + var(--bottom-bar-height) + var(--lf-fab-snackbar-offset, 0px))}.lf-floating-button:not(.sticky).center{left:calc(50% - 4px);transform:translate(-50%)}.lf-floating-button:not(.sticky).center.show-drawer{left:calc(50% + var(--drawer-width) / 2 - 4px)!important}.lf-floating-button:not(.sticky).right{left:calc(100% - (var(--floating-button-right) + 8px));transform:translate(-100%)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { libraryConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "libraryConfig", required: false }] }], floatingButtonConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatingButtonConfig", required: false }] }], onTop: [{ type: i0.Input, args: [{ isSignal: true, alias: "onTop", required: false }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], drawerEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerEnabled", required: false }] }], navbarEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "navbarEnabled", required: false }] }], bottomBarEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "bottomBarEnabled", required: false }] }], bottomSnackbarOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "bottomSnackbarOpen", required: false }] }], floatingButtonConfigUpdateEvent: [{ type: i0.Output, args: ["floatingButtonConfigUpdateEvent"] }], floatingButtonClickEvent: [{ type: i0.Output, args: ["floatingButtonClickEvent"] }] } });
 
 class FooterComponent {
     constructor() {
@@ -1253,7 +1272,7 @@ class HeaderComponent {
         this.headerConfigUpdateEvent.emit({ inputConfig: { enable: false } });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: HeaderComponent, isStandalone: true, selector: "lf-header", inputs: { libraryConfig: { classPropertyName: "libraryConfig", publicName: "libraryConfig", isSignal: true, isRequired: false, transformFunction: null }, headerConfig: { classPropertyName: "headerConfig", publicName: "headerConfig", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, routeLoading: { classPropertyName: "routeLoading", publicName: "routeLoading", isSignal: true, isRequired: false, transformFunction: null }, currentRoute: { classPropertyName: "currentRoute", publicName: "currentRoute", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { headerConfigUpdateEvent: "headerConfigUpdateEvent", headerButtonClickEvent: "headerButtonClickEvent", headerInputSubmitEvent: "headerInputSubmitEvent", headerInputChangeEvent: "headerInputChangeEvent" }, ngImport: i0, template: "@if (headerConfig(); as config) {\r\n  @if (config.enable) {\r\n    <mat-toolbar\r\n      class=\"lf-header lf-transitions mat-elevation-z3\"\r\n      [class.px-4]=\"!isMobile()\"\r\n      [class.px-1]=\"isMobile()\"\r\n      [ngClass]=\"config.cssClass\"\r\n      [class.lf-gradient]=\"config.gradient\"\r\n      color=\"primary\">\r\n      <!-- left menu button -->\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n        [ngTemplateOutletContext]=\"{\r\n          menuButton: config.leftMenuButton!,\r\n          hideLabel: true,\r\n        }\"></ng-container>\r\n      <!-- logo & title -->\r\n      <div\r\n        class=\"lf-header-logo-title-wrapper ml-1 mr-2\"\r\n        [class.ml-10]=\"config.leftMenuButton && !isMobile()\">\r\n        <!-- link wrapper -->\r\n        <div\r\n          class=\"lf-header-logo-title-wrapper-link\"\r\n          [class.lf-clickable]=\"config.titleRouterLink\"\r\n          [routerLink]=\"config.titleRouterLink ? [config.titleRouterLink] : null\">\r\n          <!-- svg logo -->\r\n          @if (config.svgLogo) {\r\n            <mat-icon\r\n              class=\"lf-header-logo\"\r\n              [class.mr-3]=\"config.title\"\r\n              [svgIcon]=\"config.svgLogo!\"></mat-icon>\r\n            <!-- img logo -->\r\n          } @else {\r\n            @if (config.imgLogo) {\r\n              <img\r\n                class=\"lf-header-logo\"\r\n                [class.mr-3]=\"config.title\"\r\n                [src]=\"config.imgLogo\"\r\n                alt=\"Logo\" />\r\n            }\r\n          }\r\n          <!-- title -->\r\n          @if (config.title) {\r\n            <div class=\"lf-header-title-wrapper\">\r\n              @if (config.title) {\r\n                <span class=\"lf-header-title\">\r\n                  {{ config.title }}\r\n                </span>\r\n              }\r\n              @if (config.subtitle) {\r\n                <span class=\"lf-header-subtitle\">\r\n                  {{ config.subtitle }}\r\n                </span>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n      <!-- input -->\r\n      @if (config.inputConfig?.enable) {\r\n        <div class=\"spacer\"></div>\r\n        <lf-input\r\n          [class.lf-header-input-mobile]=\"isMobile()\"\r\n          [class.mx-3]=\"!isMobile()\"\r\n          [inputConfig]=\"config.inputConfig!\"\r\n          [isMobile]=\"isMobile()\"\r\n          (inputSubmitEvent)=\"inputSubmitted($event)\"\r\n          (inputChangeEvent)=\"inputChanged($event)\"\r\n          (inputPrefixActionEvent)=\"inputClosed()\"></lf-input>\r\n      }\r\n      <!-- spacer -->\r\n      <div class=\"spacer\"></div>\r\n      <!-- right menu buttons -->\r\n      @if (config.responsiveConfig?.enable && isMobile()) {\r\n        @let exludedButtons = rightExcludedButtons();\r\n        @for (button of exludedButtons; track button.id) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n            [ngTemplateOutletContext]=\"{\r\n              menuButton: button,\r\n            }\"></ng-container>\r\n        }\r\n        @let mobileButton = rightMobileButton();\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n          [ngTemplateOutletContext]=\"{\r\n            menuButton: mobileButton,\r\n          }\"></ng-container>\r\n      } @else {\r\n        @for (button of config.rightMenuButtons; track button.id) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n            [ngTemplateOutletContext]=\"{\r\n              menuButton: button,\r\n            }\"></ng-container>\r\n        }\r\n      }\r\n    </mat-toolbar>\r\n    <!-- loading bar -->\r\n    @if (config.loading || (config.showRouteLoading && routeLoading())) {\r\n      <mat-progress-bar\r\n        class=\"lf-header-progress-bar\"\r\n        color=\"accent\"\r\n        mode=\"indeterminate\"></mat-progress-bar>\r\n    }\r\n  }\r\n}\r\n\r\n<!-- header menu button -->\r\n<ng-template #menuButtonTemplate let-menuButton=\"menuButton\" let-hideLabel=\"hideLabel\">\r\n  @if (menuButton) {\r\n    <!-- label button -->\r\n    @if (menuButton.label && !hideLabel) {\r\n      <button\r\n        mat-button\r\n        class=\"lf-header-menu-button\"\r\n        [class.lf-header-menu-button-active]=\"isActive()(menuButton.id) && !menuButton.disabled\"\r\n        [ngClass]=\"menuButton.cssClass\"\r\n        [disabled]=\"menuButton.disabled\"\r\n        (click)=\"buttonClicked(menuButton.id)\"\r\n        [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n        [aria-label]=\"menuButton.label || menuButton.tooltip\"\r\n        [matTooltip]=\"menuButton.tooltip\">\r\n        <!-- icon -->\r\n        @if (menuButton.matIcon) {\r\n          <mat-icon>\r\n            {{ menuButton.matIcon }}\r\n          </mat-icon>\r\n        } @else if (menuButton.svgIcon) {\r\n          <mat-icon [svgIcon]=\"menuButton.svgIcon\"></mat-icon>\r\n        }\r\n        <!-- label -->\r\n        {{ menuButton.label }}\r\n      </button>\r\n      <!-- icon button -->\r\n    } @else if (menuButton.matIcon || menuButton.svgIcon) {\r\n      <button\r\n        mat-icon-button\r\n        class=\"lf-header-menu-button\"\r\n        [ngClass]=\"menuButton.cssClass\"\r\n        [disabled]=\"menuButton.disabled\"\r\n        (click)=\"buttonClicked(menuButton.id)\"\r\n        [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n        [matTooltip]=\"menuButton.tooltip\"\r\n        [aria-label]=\"menuButton.id || menuButton.tooltip\">\r\n        <!-- icon -->\r\n        @if (menuButton.matIcon) {\r\n          <mat-icon>\r\n            {{ menuButton.matIcon }}\r\n          </mat-icon>\r\n        } @else if (menuButton.svgIcon) {\r\n          <mat-icon [svgIcon]=\"menuButton.svgIcon\"></mat-icon>\r\n        }\r\n      </button>\r\n      <!-- img button -->\r\n    } @else if (menuButton.imgIcon) {\r\n      <img\r\n        class=\"lf-header-menu-img\"\r\n        [src]=\"menuButton.imgIcon\"\r\n        width=\"48\"\r\n        height=\"48\"\r\n        [ngClass]=\"menuButton.cssClass\"\r\n        (click)=\"buttonClicked(menuButton.id)\"\r\n        [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n        [matTooltip]=\"menuButton.tooltip\"\r\n        [aria-label]=\"menuButton.id || menuButton.tooltip\" />\r\n    }\r\n    <!-- menu -->\r\n    <mat-menu #menu=\"matMenu\">\r\n      <!-- label menu buttons -->\r\n      @for (button of menuButton.menuButtons; track button.id) {\r\n        <!-- menu button -->\r\n        @if (button.label) {\r\n          <button\r\n            mat-menu-item\r\n            [class.lf-header-menu-button-active]=\"isActive()(button.id)\"\r\n            [ngClass]=\"button.cssClass\"\r\n            [disabled]=\"button.disabled\"\r\n            (click)=\"buttonClicked(button.id)\"\r\n            [matTooltip]=\"button.tooltip\"\r\n            [aria-label]=\"button.label\">\r\n            <!-- icon -->\r\n            @if (button.matIcon) {\r\n              <mat-icon>\r\n                {{ button.matIcon }}\r\n              </mat-icon>\r\n            } @else if (button.svgIcon) {\r\n              <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n            }\r\n            <!-- label -->\r\n            <span>{{ button.label }}</span>\r\n          </button>\r\n        }\r\n      }\r\n      <!-- icon menu buttons -->\r\n      <div mat-menu-item class=\"lf-menu-icons px-1\" [disableRipple]=\"true\">\r\n        @for (button of menuButton.menuButtons; track button.id) {\r\n          <!-- icon button -->\r\n          @if (!button.label && (button.matIcon || button.svgIcon)) {\r\n            <button\r\n              mat-icon-button\r\n              class=\"lf-menu-icon-button\"\r\n              [ngClass]=\"button.cssClass\"\r\n              [disabled]=\"button.disabled\"\r\n              (click)=\"buttonClicked(button.id)\"\r\n              [matTooltip]=\"button.tooltip\"\r\n              [aria-label]=\"button.id || button.tooltip\"\r\n              tabindex=\"0\">\r\n              <!-- icon -->\r\n              @if (button.matIcon) {\r\n                <mat-icon>\r\n                  {{ button.matIcon }}\r\n                </mat-icon>\r\n              } @else if (button.svgIcon) {\r\n                <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n              }\r\n            </button>\r\n          }\r\n        }\r\n      </div>\r\n    </mat-menu>\r\n  }\r\n</ng-template>\r\n", styles: [".lf-header{z-index:var(--header-z-index);position:fixed;top:0;height:var(--header-height)}.lf-header .lf-header-menu-button{flex-shrink:0;max-width:var(--header-menu-button-max-width)}.lf-header .lf-header-menu-button ::ng-deep .mdc-button__label{overflow:hidden;text-overflow:ellipsis}.lf-header .lf-header-menu-button.lf-header-menu-button-active{background-color:#fff}.lf-header .lf-header-menu-img{width:var(--header-menu-img-size);height:var(--header-menu-img-size);border-radius:50%;flex-shrink:0;object-fit:cover;box-sizing:border-box;cursor:pointer}.lf-header .lf-header-logo-title-wrapper{flex:0 0 auto;max-width:var(--header-logo-title-wrapper-max-width);overflow:hidden;display:flex}.lf-header .lf-header-logo-title-wrapper .lf-header-logo-title-wrapper-link{display:flex;flex-flow:row nowrap;align-items:center;flex:0}.lf-header .lf-header-logo-title-wrapper .lf-header-logo-title-wrapper-link.lf-clickable{cursor:pointer}.lf-header .lf-header-logo-title-wrapper .lf-header-logo{width:var(--header-logo-size);height:var(--header-logo-size);min-width:var(--header-logo-size);min-height:var(--header-logo-size)}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper{display:flex;flex-flow:column}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-title{font-size:var(--header-title-font-size);line-height:calc(var(--header-title-font-size) + 8px)}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-subtitle{font-size:var(--header-subtitle-font-size);line-height:var(--header-subtitle-font-size)}.lf-header lf-input{z-index:var(--header-z-index);flex:1 1 var(--header-input-max-width)}.lf-header lf-input.lf-header-input-mobile{position:fixed!important;left:4px!important;right:4px!important;width:unset!important;max-width:unset!important}.lf-header .spacer{flex:1 0 auto}.lf-menu-icons{min-height:unset!important;cursor:unset!important}.lf-menu-icons:hover{background:transparent!important}.lf-header-progress-bar{z-index:var(--header-z-index);position:fixed;top:var(--header-height)}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputComponent, selector: "lf-input", inputs: ["inputConfig", "isMobile", "inputValue"], outputs: ["inputSubmitEvent", "inputChangeEvent", "inputPrefixActionEvent", "inputValueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: HeaderComponent, isStandalone: true, selector: "lf-header", inputs: { libraryConfig: { classPropertyName: "libraryConfig", publicName: "libraryConfig", isSignal: true, isRequired: false, transformFunction: null }, headerConfig: { classPropertyName: "headerConfig", publicName: "headerConfig", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, routeLoading: { classPropertyName: "routeLoading", publicName: "routeLoading", isSignal: true, isRequired: false, transformFunction: null }, currentRoute: { classPropertyName: "currentRoute", publicName: "currentRoute", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { headerConfigUpdateEvent: "headerConfigUpdateEvent", headerButtonClickEvent: "headerButtonClickEvent", headerInputSubmitEvent: "headerInputSubmitEvent", headerInputChangeEvent: "headerInputChangeEvent" }, ngImport: i0, template: "@if (headerConfig(); as config) {\r\n  @if (config.enable) {\r\n    <mat-toolbar\r\n      class=\"lf-header lf-transitions mat-elevation-z3\"\r\n      [class.px-4]=\"!isMobile()\"\r\n      [class.px-1]=\"isMobile()\"\r\n      [ngClass]=\"config.cssClass\"\r\n      [class.lf-gradient]=\"config.gradient\"\r\n      color=\"primary\">\r\n      <!-- left menu button -->\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n        [ngTemplateOutletContext]=\"{\r\n          menuButton: config.leftMenuButton!,\r\n          hideLabel: true,\r\n        }\"></ng-container>\r\n      <!-- logo & title -->\r\n      <div\r\n        class=\"lf-header-logo-title-wrapper ml-1 mr-2\"\r\n        [class.ml-10]=\"config.leftMenuButton && !isMobile()\">\r\n        <!-- link wrapper -->\r\n        <div\r\n          class=\"lf-header-logo-title-wrapper-link\"\r\n          [class.lf-clickable]=\"config.titleRouterLink\"\r\n          [routerLink]=\"config.titleRouterLink ? [config.titleRouterLink] : null\">\r\n          <!-- svg logo -->\r\n          @if (config.svgLogo) {\r\n            <mat-icon\r\n              class=\"lf-header-logo\"\r\n              [class.mr-3]=\"config.title\"\r\n              [svgIcon]=\"config.svgLogo!\"></mat-icon>\r\n            <!-- img logo -->\r\n          } @else {\r\n            @if (config.imgLogo) {\r\n              <img\r\n                class=\"lf-header-logo\"\r\n                [class.mr-3]=\"config.title\"\r\n                [src]=\"config.imgLogo\"\r\n                alt=\"Logo\" />\r\n            }\r\n          }\r\n          <!-- title -->\r\n          @if (config.title) {\r\n            <div class=\"lf-header-title-wrapper\">\r\n              @if (config.title) {\r\n                <span class=\"lf-header-title\">\r\n                  {{ config.title }}\r\n                </span>\r\n              }\r\n              @if (config.subtitle) {\r\n                <span class=\"lf-header-subtitle\">\r\n                  {{ config.subtitle }}\r\n                </span>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n      <!-- input -->\r\n      @if (config.inputConfig?.enable) {\r\n        <div class=\"spacer\"></div>\r\n        <lf-input\r\n          [class.lf-header-input-mobile]=\"isMobile()\"\r\n          [class.mx-3]=\"!isMobile()\"\r\n          [inputConfig]=\"config.inputConfig!\"\r\n          [isMobile]=\"isMobile()\"\r\n          (inputSubmitEvent)=\"inputSubmitted($event)\"\r\n          (inputChangeEvent)=\"inputChanged($event)\"\r\n          (inputPrefixActionEvent)=\"inputClosed()\"></lf-input>\r\n      }\r\n      <!-- spacer -->\r\n      <div class=\"spacer\"></div>\r\n      <!-- right menu buttons -->\r\n      @if (config.responsiveConfig?.enable && isMobile()) {\r\n        @let exludedButtons = rightExcludedButtons();\r\n        @for (button of exludedButtons; track button.id) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n            [ngTemplateOutletContext]=\"{\r\n              menuButton: button,\r\n            }\"></ng-container>\r\n        }\r\n        @let mobileButton = rightMobileButton();\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n          [ngTemplateOutletContext]=\"{\r\n            menuButton: mobileButton,\r\n          }\"></ng-container>\r\n      } @else {\r\n        @for (button of config.rightMenuButtons; track button.id) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n            [ngTemplateOutletContext]=\"{\r\n              menuButton: button,\r\n            }\"></ng-container>\r\n        }\r\n      }\r\n    </mat-toolbar>\r\n    <!-- loading bar -->\r\n    @if (config.loading || (config.showRouteLoading && routeLoading())) {\r\n      <mat-progress-bar\r\n        class=\"lf-header-progress-bar\"\r\n        color=\"accent\"\r\n        mode=\"indeterminate\"></mat-progress-bar>\r\n    }\r\n  }\r\n}\r\n\r\n<!-- header menu button -->\r\n<ng-template #menuButtonTemplate let-menuButton=\"menuButton\" let-hideLabel=\"hideLabel\">\r\n  @if (menuButton) {\r\n    <!-- label button -->\r\n    @if (menuButton.label && !hideLabel) {\r\n      <button\r\n        mat-button\r\n        class=\"lf-header-menu-button\"\r\n        [class.lf-header-menu-button-active]=\"isActive()(menuButton.id) && !menuButton.disabled\"\r\n        [ngClass]=\"menuButton.cssClass\"\r\n        [disabled]=\"menuButton.disabled\"\r\n        (click)=\"buttonClicked(menuButton.id)\"\r\n        [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n        [aria-label]=\"menuButton.label || menuButton.tooltip\"\r\n        [matTooltip]=\"menuButton.tooltip\">\r\n        <!-- icon -->\r\n        @if (menuButton.matIcon) {\r\n          <mat-icon>\r\n            {{ menuButton.matIcon }}\r\n          </mat-icon>\r\n        } @else if (menuButton.svgIcon) {\r\n          <mat-icon [svgIcon]=\"menuButton.svgIcon\"></mat-icon>\r\n        }\r\n        <!-- label -->\r\n        {{ menuButton.label }}\r\n      </button>\r\n      <!-- icon button -->\r\n    } @else if (menuButton.matIcon || menuButton.svgIcon) {\r\n      <button\r\n        mat-icon-button\r\n        class=\"lf-header-menu-button\"\r\n        [ngClass]=\"menuButton.cssClass\"\r\n        [disabled]=\"menuButton.disabled\"\r\n        (click)=\"buttonClicked(menuButton.id)\"\r\n        [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n        [matTooltip]=\"menuButton.tooltip\"\r\n        [aria-label]=\"menuButton.id || menuButton.tooltip\">\r\n        <!-- icon -->\r\n        @if (menuButton.matIcon) {\r\n          <mat-icon>\r\n            {{ menuButton.matIcon }}\r\n          </mat-icon>\r\n        } @else if (menuButton.svgIcon) {\r\n          <mat-icon [svgIcon]=\"menuButton.svgIcon\"></mat-icon>\r\n        }\r\n      </button>\r\n      <!-- img button -->\r\n    } @else if (menuButton.imgIcon) {\r\n      <img\r\n        class=\"lf-header-menu-img\"\r\n        [src]=\"menuButton.imgIcon\"\r\n        width=\"48\"\r\n        height=\"48\"\r\n        [ngClass]=\"menuButton.cssClass\"\r\n        (click)=\"buttonClicked(menuButton.id)\"\r\n        [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n        [matTooltip]=\"menuButton.tooltip\"\r\n        [aria-label]=\"menuButton.id || menuButton.tooltip\" />\r\n    }\r\n    <!-- menu -->\r\n    <mat-menu #menu=\"matMenu\">\r\n      <!-- label menu buttons -->\r\n      @for (button of menuButton.menuButtons; track button.id) {\r\n        <!-- menu button -->\r\n        @if (button.label) {\r\n          <button\r\n            mat-menu-item\r\n            [class.lf-header-menu-button-active]=\"isActive()(button.id)\"\r\n            [ngClass]=\"button.cssClass\"\r\n            [disabled]=\"button.disabled\"\r\n            (click)=\"buttonClicked(button.id)\"\r\n            [matTooltip]=\"button.tooltip\"\r\n            [aria-label]=\"button.label\">\r\n            <!-- icon -->\r\n            @if (button.matIcon) {\r\n              <mat-icon>\r\n                {{ button.matIcon }}\r\n              </mat-icon>\r\n            } @else if (button.svgIcon) {\r\n              <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n            }\r\n            <!-- label -->\r\n            <span>{{ button.label }}</span>\r\n          </button>\r\n        }\r\n      }\r\n      <!-- icon menu buttons -->\r\n      <div mat-menu-item class=\"lf-menu-icons px-1\" [disableRipple]=\"true\">\r\n        @for (button of menuButton.menuButtons; track button.id) {\r\n          <!-- icon button -->\r\n          @if (!button.label && (button.matIcon || button.svgIcon)) {\r\n            <button\r\n              mat-icon-button\r\n              class=\"lf-menu-icon-button\"\r\n              [ngClass]=\"button.cssClass\"\r\n              [disabled]=\"button.disabled\"\r\n              (click)=\"buttonClicked(button.id)\"\r\n              [matTooltip]=\"button.tooltip\"\r\n              [aria-label]=\"button.id || button.tooltip\"\r\n              tabindex=\"0\">\r\n              <!-- icon -->\r\n              @if (button.matIcon) {\r\n                <mat-icon>\r\n                  {{ button.matIcon }}\r\n                </mat-icon>\r\n              } @else if (button.svgIcon) {\r\n                <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n              }\r\n            </button>\r\n          }\r\n        }\r\n      </div>\r\n    </mat-menu>\r\n  }\r\n</ng-template>\r\n", styles: [".lf-header{z-index:var(--header-z-index);position:fixed;top:0;height:var(--header-height)}.lf-header .lf-header-menu-button{flex-shrink:0;max-width:var(--header-menu-button-max-width)}.lf-header .lf-header-menu-button ::ng-deep .mdc-button__label{overflow:hidden;text-overflow:ellipsis}.lf-header .lf-header-menu-button.lf-header-menu-button-active{background-color:var(--mat-sys-on-primary, white);color:var(--color-primary)!important}.lf-header .lf-header-menu-img{width:var(--header-menu-img-size);height:var(--header-menu-img-size);border-radius:50%;flex-shrink:0;object-fit:cover;box-sizing:border-box;cursor:pointer}.lf-header .lf-header-logo-title-wrapper{flex:0 0 auto;max-width:var(--header-logo-title-wrapper-max-width);overflow:hidden;display:flex}.lf-header .lf-header-logo-title-wrapper .lf-header-logo-title-wrapper-link{display:flex;flex-flow:row nowrap;align-items:center;flex:0}.lf-header .lf-header-logo-title-wrapper .lf-header-logo-title-wrapper-link.lf-clickable{cursor:pointer}.lf-header .lf-header-logo-title-wrapper .lf-header-logo{width:var(--header-logo-size);height:var(--header-logo-size);min-width:var(--header-logo-size);min-height:var(--header-logo-size)}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper{display:flex;flex-flow:column}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-title{font-size:var(--header-title-font-size);line-height:calc(var(--header-title-font-size) + 8px)}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-subtitle{font-size:var(--header-subtitle-font-size);line-height:var(--header-subtitle-font-size)}.lf-header lf-input{z-index:var(--header-z-index);flex:1 1 var(--header-input-max-width)}.lf-header lf-input.lf-header-input-mobile{position:fixed!important;left:4px!important;right:4px!important;width:unset!important;max-width:unset!important}.lf-header .spacer{flex:1 0 auto}.lf-menu-icons{min-height:unset!important;cursor:unset!important}.lf-menu-icons:hover{background:transparent!important}.lf-header-progress-bar{z-index:var(--header-z-index);position:fixed;top:var(--header-height)}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputComponent, selector: "lf-input", inputs: ["inputConfig", "isMobile", "inputValue"], outputs: ["inputSubmitEvent", "inputChangeEvent", "inputPrefixActionEvent", "inputValueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
@@ -1268,7 +1287,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         NgClass,
                         NgTemplateOutlet,
                         InputComponent,
-                    ], template: "@if (headerConfig(); as config) {\r\n  @if (config.enable) {\r\n    <mat-toolbar\r\n      class=\"lf-header lf-transitions mat-elevation-z3\"\r\n      [class.px-4]=\"!isMobile()\"\r\n      [class.px-1]=\"isMobile()\"\r\n      [ngClass]=\"config.cssClass\"\r\n      [class.lf-gradient]=\"config.gradient\"\r\n      color=\"primary\">\r\n      <!-- left menu button -->\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n        [ngTemplateOutletContext]=\"{\r\n          menuButton: config.leftMenuButton!,\r\n          hideLabel: true,\r\n        }\"></ng-container>\r\n      <!-- logo & title -->\r\n      <div\r\n        class=\"lf-header-logo-title-wrapper ml-1 mr-2\"\r\n        [class.ml-10]=\"config.leftMenuButton && !isMobile()\">\r\n        <!-- link wrapper -->\r\n        <div\r\n          class=\"lf-header-logo-title-wrapper-link\"\r\n          [class.lf-clickable]=\"config.titleRouterLink\"\r\n          [routerLink]=\"config.titleRouterLink ? [config.titleRouterLink] : null\">\r\n          <!-- svg logo -->\r\n          @if (config.svgLogo) {\r\n            <mat-icon\r\n              class=\"lf-header-logo\"\r\n              [class.mr-3]=\"config.title\"\r\n              [svgIcon]=\"config.svgLogo!\"></mat-icon>\r\n            <!-- img logo -->\r\n          } @else {\r\n            @if (config.imgLogo) {\r\n              <img\r\n                class=\"lf-header-logo\"\r\n                [class.mr-3]=\"config.title\"\r\n                [src]=\"config.imgLogo\"\r\n                alt=\"Logo\" />\r\n            }\r\n          }\r\n          <!-- title -->\r\n          @if (config.title) {\r\n            <div class=\"lf-header-title-wrapper\">\r\n              @if (config.title) {\r\n                <span class=\"lf-header-title\">\r\n                  {{ config.title }}\r\n                </span>\r\n              }\r\n              @if (config.subtitle) {\r\n                <span class=\"lf-header-subtitle\">\r\n                  {{ config.subtitle }}\r\n                </span>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n      <!-- input -->\r\n      @if (config.inputConfig?.enable) {\r\n        <div class=\"spacer\"></div>\r\n        <lf-input\r\n          [class.lf-header-input-mobile]=\"isMobile()\"\r\n          [class.mx-3]=\"!isMobile()\"\r\n          [inputConfig]=\"config.inputConfig!\"\r\n          [isMobile]=\"isMobile()\"\r\n          (inputSubmitEvent)=\"inputSubmitted($event)\"\r\n          (inputChangeEvent)=\"inputChanged($event)\"\r\n          (inputPrefixActionEvent)=\"inputClosed()\"></lf-input>\r\n      }\r\n      <!-- spacer -->\r\n      <div class=\"spacer\"></div>\r\n      <!-- right menu buttons -->\r\n      @if (config.responsiveConfig?.enable && isMobile()) {\r\n        @let exludedButtons = rightExcludedButtons();\r\n        @for (button of exludedButtons; track button.id) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n            [ngTemplateOutletContext]=\"{\r\n              menuButton: button,\r\n            }\"></ng-container>\r\n        }\r\n        @let mobileButton = rightMobileButton();\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n          [ngTemplateOutletContext]=\"{\r\n            menuButton: mobileButton,\r\n          }\"></ng-container>\r\n      } @else {\r\n        @for (button of config.rightMenuButtons; track button.id) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n            [ngTemplateOutletContext]=\"{\r\n              menuButton: button,\r\n            }\"></ng-container>\r\n        }\r\n      }\r\n    </mat-toolbar>\r\n    <!-- loading bar -->\r\n    @if (config.loading || (config.showRouteLoading && routeLoading())) {\r\n      <mat-progress-bar\r\n        class=\"lf-header-progress-bar\"\r\n        color=\"accent\"\r\n        mode=\"indeterminate\"></mat-progress-bar>\r\n    }\r\n  }\r\n}\r\n\r\n<!-- header menu button -->\r\n<ng-template #menuButtonTemplate let-menuButton=\"menuButton\" let-hideLabel=\"hideLabel\">\r\n  @if (menuButton) {\r\n    <!-- label button -->\r\n    @if (menuButton.label && !hideLabel) {\r\n      <button\r\n        mat-button\r\n        class=\"lf-header-menu-button\"\r\n        [class.lf-header-menu-button-active]=\"isActive()(menuButton.id) && !menuButton.disabled\"\r\n        [ngClass]=\"menuButton.cssClass\"\r\n        [disabled]=\"menuButton.disabled\"\r\n        (click)=\"buttonClicked(menuButton.id)\"\r\n        [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n        [aria-label]=\"menuButton.label || menuButton.tooltip\"\r\n        [matTooltip]=\"menuButton.tooltip\">\r\n        <!-- icon -->\r\n        @if (menuButton.matIcon) {\r\n          <mat-icon>\r\n            {{ menuButton.matIcon }}\r\n          </mat-icon>\r\n        } @else if (menuButton.svgIcon) {\r\n          <mat-icon [svgIcon]=\"menuButton.svgIcon\"></mat-icon>\r\n        }\r\n        <!-- label -->\r\n        {{ menuButton.label }}\r\n      </button>\r\n      <!-- icon button -->\r\n    } @else if (menuButton.matIcon || menuButton.svgIcon) {\r\n      <button\r\n        mat-icon-button\r\n        class=\"lf-header-menu-button\"\r\n        [ngClass]=\"menuButton.cssClass\"\r\n        [disabled]=\"menuButton.disabled\"\r\n        (click)=\"buttonClicked(menuButton.id)\"\r\n        [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n        [matTooltip]=\"menuButton.tooltip\"\r\n        [aria-label]=\"menuButton.id || menuButton.tooltip\">\r\n        <!-- icon -->\r\n        @if (menuButton.matIcon) {\r\n          <mat-icon>\r\n            {{ menuButton.matIcon }}\r\n          </mat-icon>\r\n        } @else if (menuButton.svgIcon) {\r\n          <mat-icon [svgIcon]=\"menuButton.svgIcon\"></mat-icon>\r\n        }\r\n      </button>\r\n      <!-- img button -->\r\n    } @else if (menuButton.imgIcon) {\r\n      <img\r\n        class=\"lf-header-menu-img\"\r\n        [src]=\"menuButton.imgIcon\"\r\n        width=\"48\"\r\n        height=\"48\"\r\n        [ngClass]=\"menuButton.cssClass\"\r\n        (click)=\"buttonClicked(menuButton.id)\"\r\n        [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n        [matTooltip]=\"menuButton.tooltip\"\r\n        [aria-label]=\"menuButton.id || menuButton.tooltip\" />\r\n    }\r\n    <!-- menu -->\r\n    <mat-menu #menu=\"matMenu\">\r\n      <!-- label menu buttons -->\r\n      @for (button of menuButton.menuButtons; track button.id) {\r\n        <!-- menu button -->\r\n        @if (button.label) {\r\n          <button\r\n            mat-menu-item\r\n            [class.lf-header-menu-button-active]=\"isActive()(button.id)\"\r\n            [ngClass]=\"button.cssClass\"\r\n            [disabled]=\"button.disabled\"\r\n            (click)=\"buttonClicked(button.id)\"\r\n            [matTooltip]=\"button.tooltip\"\r\n            [aria-label]=\"button.label\">\r\n            <!-- icon -->\r\n            @if (button.matIcon) {\r\n              <mat-icon>\r\n                {{ button.matIcon }}\r\n              </mat-icon>\r\n            } @else if (button.svgIcon) {\r\n              <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n            }\r\n            <!-- label -->\r\n            <span>{{ button.label }}</span>\r\n          </button>\r\n        }\r\n      }\r\n      <!-- icon menu buttons -->\r\n      <div mat-menu-item class=\"lf-menu-icons px-1\" [disableRipple]=\"true\">\r\n        @for (button of menuButton.menuButtons; track button.id) {\r\n          <!-- icon button -->\r\n          @if (!button.label && (button.matIcon || button.svgIcon)) {\r\n            <button\r\n              mat-icon-button\r\n              class=\"lf-menu-icon-button\"\r\n              [ngClass]=\"button.cssClass\"\r\n              [disabled]=\"button.disabled\"\r\n              (click)=\"buttonClicked(button.id)\"\r\n              [matTooltip]=\"button.tooltip\"\r\n              [aria-label]=\"button.id || button.tooltip\"\r\n              tabindex=\"0\">\r\n              <!-- icon -->\r\n              @if (button.matIcon) {\r\n                <mat-icon>\r\n                  {{ button.matIcon }}\r\n                </mat-icon>\r\n              } @else if (button.svgIcon) {\r\n                <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n              }\r\n            </button>\r\n          }\r\n        }\r\n      </div>\r\n    </mat-menu>\r\n  }\r\n</ng-template>\r\n", styles: [".lf-header{z-index:var(--header-z-index);position:fixed;top:0;height:var(--header-height)}.lf-header .lf-header-menu-button{flex-shrink:0;max-width:var(--header-menu-button-max-width)}.lf-header .lf-header-menu-button ::ng-deep .mdc-button__label{overflow:hidden;text-overflow:ellipsis}.lf-header .lf-header-menu-button.lf-header-menu-button-active{background-color:#fff}.lf-header .lf-header-menu-img{width:var(--header-menu-img-size);height:var(--header-menu-img-size);border-radius:50%;flex-shrink:0;object-fit:cover;box-sizing:border-box;cursor:pointer}.lf-header .lf-header-logo-title-wrapper{flex:0 0 auto;max-width:var(--header-logo-title-wrapper-max-width);overflow:hidden;display:flex}.lf-header .lf-header-logo-title-wrapper .lf-header-logo-title-wrapper-link{display:flex;flex-flow:row nowrap;align-items:center;flex:0}.lf-header .lf-header-logo-title-wrapper .lf-header-logo-title-wrapper-link.lf-clickable{cursor:pointer}.lf-header .lf-header-logo-title-wrapper .lf-header-logo{width:var(--header-logo-size);height:var(--header-logo-size);min-width:var(--header-logo-size);min-height:var(--header-logo-size)}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper{display:flex;flex-flow:column}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-title{font-size:var(--header-title-font-size);line-height:calc(var(--header-title-font-size) + 8px)}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-subtitle{font-size:var(--header-subtitle-font-size);line-height:var(--header-subtitle-font-size)}.lf-header lf-input{z-index:var(--header-z-index);flex:1 1 var(--header-input-max-width)}.lf-header lf-input.lf-header-input-mobile{position:fixed!important;left:4px!important;right:4px!important;width:unset!important;max-width:unset!important}.lf-header .spacer{flex:1 0 auto}.lf-menu-icons{min-height:unset!important;cursor:unset!important}.lf-menu-icons:hover{background:transparent!important}.lf-header-progress-bar{z-index:var(--header-z-index);position:fixed;top:var(--header-height)}\n"] }]
+                    ], template: "@if (headerConfig(); as config) {\r\n  @if (config.enable) {\r\n    <mat-toolbar\r\n      class=\"lf-header lf-transitions mat-elevation-z3\"\r\n      [class.px-4]=\"!isMobile()\"\r\n      [class.px-1]=\"isMobile()\"\r\n      [ngClass]=\"config.cssClass\"\r\n      [class.lf-gradient]=\"config.gradient\"\r\n      color=\"primary\">\r\n      <!-- left menu button -->\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n        [ngTemplateOutletContext]=\"{\r\n          menuButton: config.leftMenuButton!,\r\n          hideLabel: true,\r\n        }\"></ng-container>\r\n      <!-- logo & title -->\r\n      <div\r\n        class=\"lf-header-logo-title-wrapper ml-1 mr-2\"\r\n        [class.ml-10]=\"config.leftMenuButton && !isMobile()\">\r\n        <!-- link wrapper -->\r\n        <div\r\n          class=\"lf-header-logo-title-wrapper-link\"\r\n          [class.lf-clickable]=\"config.titleRouterLink\"\r\n          [routerLink]=\"config.titleRouterLink ? [config.titleRouterLink] : null\">\r\n          <!-- svg logo -->\r\n          @if (config.svgLogo) {\r\n            <mat-icon\r\n              class=\"lf-header-logo\"\r\n              [class.mr-3]=\"config.title\"\r\n              [svgIcon]=\"config.svgLogo!\"></mat-icon>\r\n            <!-- img logo -->\r\n          } @else {\r\n            @if (config.imgLogo) {\r\n              <img\r\n                class=\"lf-header-logo\"\r\n                [class.mr-3]=\"config.title\"\r\n                [src]=\"config.imgLogo\"\r\n                alt=\"Logo\" />\r\n            }\r\n          }\r\n          <!-- title -->\r\n          @if (config.title) {\r\n            <div class=\"lf-header-title-wrapper\">\r\n              @if (config.title) {\r\n                <span class=\"lf-header-title\">\r\n                  {{ config.title }}\r\n                </span>\r\n              }\r\n              @if (config.subtitle) {\r\n                <span class=\"lf-header-subtitle\">\r\n                  {{ config.subtitle }}\r\n                </span>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n      <!-- input -->\r\n      @if (config.inputConfig?.enable) {\r\n        <div class=\"spacer\"></div>\r\n        <lf-input\r\n          [class.lf-header-input-mobile]=\"isMobile()\"\r\n          [class.mx-3]=\"!isMobile()\"\r\n          [inputConfig]=\"config.inputConfig!\"\r\n          [isMobile]=\"isMobile()\"\r\n          (inputSubmitEvent)=\"inputSubmitted($event)\"\r\n          (inputChangeEvent)=\"inputChanged($event)\"\r\n          (inputPrefixActionEvent)=\"inputClosed()\"></lf-input>\r\n      }\r\n      <!-- spacer -->\r\n      <div class=\"spacer\"></div>\r\n      <!-- right menu buttons -->\r\n      @if (config.responsiveConfig?.enable && isMobile()) {\r\n        @let exludedButtons = rightExcludedButtons();\r\n        @for (button of exludedButtons; track button.id) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n            [ngTemplateOutletContext]=\"{\r\n              menuButton: button,\r\n            }\"></ng-container>\r\n        }\r\n        @let mobileButton = rightMobileButton();\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n          [ngTemplateOutletContext]=\"{\r\n            menuButton: mobileButton,\r\n          }\"></ng-container>\r\n      } @else {\r\n        @for (button of config.rightMenuButtons; track button.id) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n            [ngTemplateOutletContext]=\"{\r\n              menuButton: button,\r\n            }\"></ng-container>\r\n        }\r\n      }\r\n    </mat-toolbar>\r\n    <!-- loading bar -->\r\n    @if (config.loading || (config.showRouteLoading && routeLoading())) {\r\n      <mat-progress-bar\r\n        class=\"lf-header-progress-bar\"\r\n        color=\"accent\"\r\n        mode=\"indeterminate\"></mat-progress-bar>\r\n    }\r\n  }\r\n}\r\n\r\n<!-- header menu button -->\r\n<ng-template #menuButtonTemplate let-menuButton=\"menuButton\" let-hideLabel=\"hideLabel\">\r\n  @if (menuButton) {\r\n    <!-- label button -->\r\n    @if (menuButton.label && !hideLabel) {\r\n      <button\r\n        mat-button\r\n        class=\"lf-header-menu-button\"\r\n        [class.lf-header-menu-button-active]=\"isActive()(menuButton.id) && !menuButton.disabled\"\r\n        [ngClass]=\"menuButton.cssClass\"\r\n        [disabled]=\"menuButton.disabled\"\r\n        (click)=\"buttonClicked(menuButton.id)\"\r\n        [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n        [aria-label]=\"menuButton.label || menuButton.tooltip\"\r\n        [matTooltip]=\"menuButton.tooltip\">\r\n        <!-- icon -->\r\n        @if (menuButton.matIcon) {\r\n          <mat-icon>\r\n            {{ menuButton.matIcon }}\r\n          </mat-icon>\r\n        } @else if (menuButton.svgIcon) {\r\n          <mat-icon [svgIcon]=\"menuButton.svgIcon\"></mat-icon>\r\n        }\r\n        <!-- label -->\r\n        {{ menuButton.label }}\r\n      </button>\r\n      <!-- icon button -->\r\n    } @else if (menuButton.matIcon || menuButton.svgIcon) {\r\n      <button\r\n        mat-icon-button\r\n        class=\"lf-header-menu-button\"\r\n        [ngClass]=\"menuButton.cssClass\"\r\n        [disabled]=\"menuButton.disabled\"\r\n        (click)=\"buttonClicked(menuButton.id)\"\r\n        [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n        [matTooltip]=\"menuButton.tooltip\"\r\n        [aria-label]=\"menuButton.id || menuButton.tooltip\">\r\n        <!-- icon -->\r\n        @if (menuButton.matIcon) {\r\n          <mat-icon>\r\n            {{ menuButton.matIcon }}\r\n          </mat-icon>\r\n        } @else if (menuButton.svgIcon) {\r\n          <mat-icon [svgIcon]=\"menuButton.svgIcon\"></mat-icon>\r\n        }\r\n      </button>\r\n      <!-- img button -->\r\n    } @else if (menuButton.imgIcon) {\r\n      <img\r\n        class=\"lf-header-menu-img\"\r\n        [src]=\"menuButton.imgIcon\"\r\n        width=\"48\"\r\n        height=\"48\"\r\n        [ngClass]=\"menuButton.cssClass\"\r\n        (click)=\"buttonClicked(menuButton.id)\"\r\n        [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n        [matTooltip]=\"menuButton.tooltip\"\r\n        [aria-label]=\"menuButton.id || menuButton.tooltip\" />\r\n    }\r\n    <!-- menu -->\r\n    <mat-menu #menu=\"matMenu\">\r\n      <!-- label menu buttons -->\r\n      @for (button of menuButton.menuButtons; track button.id) {\r\n        <!-- menu button -->\r\n        @if (button.label) {\r\n          <button\r\n            mat-menu-item\r\n            [class.lf-header-menu-button-active]=\"isActive()(button.id)\"\r\n            [ngClass]=\"button.cssClass\"\r\n            [disabled]=\"button.disabled\"\r\n            (click)=\"buttonClicked(button.id)\"\r\n            [matTooltip]=\"button.tooltip\"\r\n            [aria-label]=\"button.label\">\r\n            <!-- icon -->\r\n            @if (button.matIcon) {\r\n              <mat-icon>\r\n                {{ button.matIcon }}\r\n              </mat-icon>\r\n            } @else if (button.svgIcon) {\r\n              <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n            }\r\n            <!-- label -->\r\n            <span>{{ button.label }}</span>\r\n          </button>\r\n        }\r\n      }\r\n      <!-- icon menu buttons -->\r\n      <div mat-menu-item class=\"lf-menu-icons px-1\" [disableRipple]=\"true\">\r\n        @for (button of menuButton.menuButtons; track button.id) {\r\n          <!-- icon button -->\r\n          @if (!button.label && (button.matIcon || button.svgIcon)) {\r\n            <button\r\n              mat-icon-button\r\n              class=\"lf-menu-icon-button\"\r\n              [ngClass]=\"button.cssClass\"\r\n              [disabled]=\"button.disabled\"\r\n              (click)=\"buttonClicked(button.id)\"\r\n              [matTooltip]=\"button.tooltip\"\r\n              [aria-label]=\"button.id || button.tooltip\"\r\n              tabindex=\"0\">\r\n              <!-- icon -->\r\n              @if (button.matIcon) {\r\n                <mat-icon>\r\n                  {{ button.matIcon }}\r\n                </mat-icon>\r\n              } @else if (button.svgIcon) {\r\n                <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n              }\r\n            </button>\r\n          }\r\n        }\r\n      </div>\r\n    </mat-menu>\r\n  }\r\n</ng-template>\r\n", styles: [".lf-header{z-index:var(--header-z-index);position:fixed;top:0;height:var(--header-height)}.lf-header .lf-header-menu-button{flex-shrink:0;max-width:var(--header-menu-button-max-width)}.lf-header .lf-header-menu-button ::ng-deep .mdc-button__label{overflow:hidden;text-overflow:ellipsis}.lf-header .lf-header-menu-button.lf-header-menu-button-active{background-color:var(--mat-sys-on-primary, white);color:var(--color-primary)!important}.lf-header .lf-header-menu-img{width:var(--header-menu-img-size);height:var(--header-menu-img-size);border-radius:50%;flex-shrink:0;object-fit:cover;box-sizing:border-box;cursor:pointer}.lf-header .lf-header-logo-title-wrapper{flex:0 0 auto;max-width:var(--header-logo-title-wrapper-max-width);overflow:hidden;display:flex}.lf-header .lf-header-logo-title-wrapper .lf-header-logo-title-wrapper-link{display:flex;flex-flow:row nowrap;align-items:center;flex:0}.lf-header .lf-header-logo-title-wrapper .lf-header-logo-title-wrapper-link.lf-clickable{cursor:pointer}.lf-header .lf-header-logo-title-wrapper .lf-header-logo{width:var(--header-logo-size);height:var(--header-logo-size);min-width:var(--header-logo-size);min-height:var(--header-logo-size)}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper{display:flex;flex-flow:column}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-title{font-size:var(--header-title-font-size);line-height:calc(var(--header-title-font-size) + 8px)}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-subtitle{font-size:var(--header-subtitle-font-size);line-height:var(--header-subtitle-font-size)}.lf-header lf-input{z-index:var(--header-z-index);flex:1 1 var(--header-input-max-width)}.lf-header lf-input.lf-header-input-mobile{position:fixed!important;left:4px!important;right:4px!important;width:unset!important;max-width:unset!important}.lf-header .spacer{flex:1 0 auto}.lf-menu-icons{min-height:unset!important;cursor:unset!important}.lf-menu-icons:hover{background:transparent!important}.lf-header-progress-bar{z-index:var(--header-z-index);position:fixed;top:var(--header-height)}\n"] }]
         }], propDecorators: { libraryConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "libraryConfig", required: false }] }], headerConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerConfig", required: false }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], routeLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "routeLoading", required: false }] }], currentRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentRoute", required: false }] }], headerConfigUpdateEvent: [{ type: i0.Output, args: ["headerConfigUpdateEvent"] }], headerButtonClickEvent: [{ type: i0.Output, args: ["headerButtonClickEvent"] }], headerInputSubmitEvent: [{ type: i0.Output, args: ["headerInputSubmitEvent"] }], headerInputChangeEvent: [{ type: i0.Output, args: ["headerInputChangeEvent"] }] } });
 
 class LoadingOverlayComponent {
@@ -1330,6 +1349,7 @@ class ScaffoldComponent {
         this.libraryConfig = inject(CONFIG, { optional: true });
         this.scaffoldService = inject(ScaffoldService);
         this.breakpointService = inject(BreakpointService);
+        this.snackbarService = inject(SnackbarService);
         this.routerService = inject(RouterService);
         this.overlayService = inject(OverlayService);
         this.route = inject(ActivatedRoute);
@@ -1364,6 +1384,8 @@ class ScaffoldComponent {
         ...(ngDevMode ? [{ debugName: "floatingButtonConfig" }] : /* istanbul ignore next */ []));
         this.bottomBarConfig = computed(() => this.scaffoldConfig()?.bottomBarConfig || null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "bottomBarConfig" }] : /* istanbul ignore next */ []));
+        // The floating button lifts itself clear of a snackbar along the bottom edge
+        this.bottomSnackbarOpen = this.snackbarService.bottomSnackbarOpen;
         this.routeHistory = toSignal(this.routerService.routeHistory$.pipe(tap((routeHistory) => {
             if (this.libraryConfig?.debugging)
                 this.logger.log('[RouteHistory]', routeHistory);
@@ -1522,7 +1544,7 @@ class ScaffoldComponent {
         this.fragmentAnimationFrameId = null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ScaffoldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.5", type: ScaffoldComponent, isStandalone: true, selector: "lf-scaffold", outputs: { headerButtonClickEvent: "headerButtonClickEvent", headerInputSubmitEvent: "headerInputSubmitEvent", headerInputChangeEvent: "headerInputChangeEvent", navbarButtonClickEvent: "navbarButtonClickEvent", floatingButtonClickEvent: "floatingButtonClickEvent", bottomBarButtonClickEvent: "bottomBarButtonClickEvent" }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"lf-scaffold lf-transitions mat-app-background mat-typography\"\r\n  [ngClass]=\"scaffoldConfig()?.cssClass\">\r\n  <!-- header -->\r\n  <lf-header\r\n    [libraryConfig]=\"libraryConfig\"\r\n    [headerConfig]=\"headerConfig()\"\r\n    [isMobile]=\"isMobile()!\"\r\n    [routeLoading]=\"routeLoading()!\"\r\n    [currentRoute]=\"currentRoute()\"\r\n    (headerConfigUpdateEvent)=\"headerConfigUpdated($event)\"\r\n    (headerButtonClickEvent)=\"headerButtonClicked($event)\"\r\n    (headerInputSubmitEvent)=\"headerInputSubmitted($event)\"\r\n    (headerInputChangeEvent)=\"headerInputChanged($event)\"></lf-header>\r\n  <!-- navbar -->\r\n  <lf-navbar\r\n    [libraryConfig]=\"libraryConfig\"\r\n    [navbarConfig]=\"navbarConfig()\"\r\n    [isMobile]=\"isMobile()!\"\r\n    [currentRoute]=\"currentRoute()\"\r\n    (navbarButtonClickEvent)=\"navbarButtonClicked($event)\"></lf-navbar>\r\n  <!-- content wrapper -->\r\n  <div\r\n    class=\"lf-content-wrapper\"\r\n    [class.lf-show-navbar]=\"navbarConfig()?.enable && !isMobile()\"\r\n    [class.lf-show-header]=\"headerConfig()?.enable && !(navbarConfig()?.enable && isMobile())\"\r\n    [class.lf-show-navbar-mobile]=\"navbarConfig()?.enable && isMobile() && !headerConfig()?.enable\"\r\n    [class.lf-show-header-and-navbar-mobile]=\"\r\n      headerConfig()?.enable && navbarConfig()?.enable && isMobile()\r\n    \"\r\n    [class.lf-transitions]=\"initialized()\"\r\n    #scrollContainer\r\n    cdkScrollable>\r\n    <!-- drawer -->\r\n    <lf-drawer\r\n      [libraryConfig]=\"libraryConfig\"\r\n      [drawerConfig]=\"drawerConfig()\"\r\n      [drawerPortal]=\"drawerPortal()\"\r\n      [isMobile]=\"isMobile()!\"\r\n      [headerEnabled]=\"headerConfig()?.enable!\"\r\n      (drawerConfigUpdateEvent)=\"drawerConfigUpdated($event)\">\r\n      <!-- drawer content -->\r\n      <ng-content select=\"[drawerContent]\" drawerContent></ng-content>\r\n      <!-- content title card -->\r\n      <lf-content-title-card\r\n        [libraryConfig]=\"libraryConfig\"\r\n        [contentTitleCardConfig]=\"contentTitleCardConfig()\"\r\n        [isMobile]=\"isMobile()!\"\r\n        [routeHistory]=\"routeHistory()!\"\r\n        (backButtonClickEvent)=\"backButtonClicked()\"></lf-content-title-card>\r\n      <!-- main content -->\r\n      <div\r\n        class=\"lf-content\"\r\n        [class.lf-content-mobile]=\"isMobile()\"\r\n        [class.lf-show-footer]=\"footerConfig()?.enable\"\r\n        #content>\r\n        <ng-content></ng-content>\r\n        <!-- to top button -->\r\n        <lf-floating-button\r\n          [libraryConfig]=\"libraryConfig\"\r\n          [floatingButtonConfig]=\"floatingButtonConfig()\"\r\n          [onTop]=\"scrollTopPosition() <= 0\"\r\n          [isMobile]=\"isMobile()!\"\r\n          [drawerEnabled]=\"drawerConfig()?.enable! && drawerConfig()?.open!\"\r\n          [navbarEnabled]=\"navbarConfig()?.enable!\"\r\n          [bottomBarEnabled]=\"bottomBarConfig()?.enable!\"\r\n          (floatingButtonConfigUpdateEvent)=\"floatingButtonConfigUpdated($event)\"\r\n          (floatingButtonClickEvent)=\"floatingButtonClicked($event)\"></lf-floating-button>\r\n      </div>\r\n      <!-- footer -->\r\n      <lf-footer [libraryConfig]=\"libraryConfig\" [footerConfig]=\"footerConfig()\"></lf-footer>\r\n    </lf-drawer>\r\n  </div>\r\n  <!-- bottom bar -->\r\n  <lf-bottom-bar\r\n    [libraryConfig]=\"libraryConfig\"\r\n    [bottomBarConfig]=\"bottomBarConfig()\"\r\n    [isMobile]=\"isMobile()! && navbarConfig()?.enable!\"\r\n    [navbarEnabled]=\"navbarConfig()?.enable!\"\r\n    (bottomBarCloseClickEvent)=\"bottomBarCloseClicked($event)\"\r\n    (bottomBarButtonClickEvent)=\"bottomBarButtonClicked($event)\"></lf-bottom-bar>\r\n</div>\r\n", styles: [".lf-scaffold{height:100dvh}.lf-scaffold .lf-content-wrapper{position:absolute;inset:0;overflow-y:auto}.lf-scaffold .lf-content-wrapper.lf-show-navbar{left:calc(var(--navbar-height) + 2 * var(--navbar-padding))}.lf-scaffold .lf-content-wrapper.lf-show-header{top:var(--header-height);height:calc(100dvh - var(--header-height))}.lf-scaffold .lf-content-wrapper.lf-show-navbar-mobile{height:calc(100dvh - var(--navbar-height-mobile))}.lf-scaffold .lf-content-wrapper.lf-show-header-and-navbar-mobile{top:var(--header-height);height:calc(100dvh - var(--header-height) - var(--navbar-height-mobile))}.lf-scaffold .lf-content-wrapper .lf-content{padding-left:var(--content-padding);padding-right:var(--content-padding);padding-bottom:var(--content-padding)}.lf-scaffold .lf-content-wrapper .lf-content.lf-content-mobile{padding-left:var(--content-padding-mobile);padding-right:var(--content-padding-mobile);padding-bottom:var(--content-padding-mobile)}.lf-scaffold .lf-content-wrapper .lf-content.lf-show-footer{min-height:100%}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: HeaderComponent, selector: "lf-header", inputs: ["libraryConfig", "headerConfig", "isMobile", "routeLoading", "currentRoute"], outputs: ["headerConfigUpdateEvent", "headerButtonClickEvent", "headerInputSubmitEvent", "headerInputChangeEvent"] }, { kind: "component", type: NavbarComponent, selector: "lf-navbar", inputs: ["libraryConfig", "navbarConfig", "isMobile", "currentRoute"], outputs: ["navbarButtonClickEvent"] }, { kind: "component", type: DrawerComponent, selector: "lf-drawer", inputs: ["libraryConfig", "drawerConfig", "isMobile", "headerEnabled", "drawerPortal"], outputs: ["drawerConfigUpdateEvent"] }, { kind: "component", type: FooterComponent, selector: "lf-footer", inputs: ["libraryConfig", "footerConfig"] }, { kind: "component", type: ContentTitleCardComponent, selector: "lf-content-title-card", inputs: ["libraryConfig", "contentTitleCardConfig", "isMobile", "routeHistory"], outputs: ["backButtonClickEvent"] }, { kind: "component", type: FloatingButtonComponent, selector: "lf-floating-button", inputs: ["libraryConfig", "floatingButtonConfig", "onTop", "isMobile", "drawerEnabled", "navbarEnabled", "bottomBarEnabled"], outputs: ["floatingButtonConfigUpdateEvent", "floatingButtonClickEvent"] }, { kind: "component", type: BottomBarComponent, selector: "lf-bottom-bar", inputs: ["libraryConfig", "bottomBarConfig", "isMobile", "navbarEnabled"], outputs: ["bottomBarCloseClickEvent", "bottomBarButtonClickEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.5", type: ScaffoldComponent, isStandalone: true, selector: "lf-scaffold", outputs: { headerButtonClickEvent: "headerButtonClickEvent", headerInputSubmitEvent: "headerInputSubmitEvent", headerInputChangeEvent: "headerInputChangeEvent", navbarButtonClickEvent: "navbarButtonClickEvent", floatingButtonClickEvent: "floatingButtonClickEvent", bottomBarButtonClickEvent: "bottomBarButtonClickEvent" }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"lf-scaffold lf-transitions mat-app-background mat-typography\"\r\n  [ngClass]=\"scaffoldConfig()?.cssClass\">\r\n  <!-- header -->\r\n  <lf-header\r\n    [libraryConfig]=\"libraryConfig\"\r\n    [headerConfig]=\"headerConfig()\"\r\n    [isMobile]=\"isMobile()!\"\r\n    [routeLoading]=\"routeLoading()!\"\r\n    [currentRoute]=\"currentRoute()\"\r\n    (headerConfigUpdateEvent)=\"headerConfigUpdated($event)\"\r\n    (headerButtonClickEvent)=\"headerButtonClicked($event)\"\r\n    (headerInputSubmitEvent)=\"headerInputSubmitted($event)\"\r\n    (headerInputChangeEvent)=\"headerInputChanged($event)\"></lf-header>\r\n  <!-- navbar -->\r\n  <lf-navbar\r\n    [libraryConfig]=\"libraryConfig\"\r\n    [navbarConfig]=\"navbarConfig()\"\r\n    [isMobile]=\"isMobile()!\"\r\n    [currentRoute]=\"currentRoute()\"\r\n    (navbarButtonClickEvent)=\"navbarButtonClicked($event)\"></lf-navbar>\r\n  <!-- content wrapper -->\r\n  <div\r\n    class=\"lf-content-wrapper\"\r\n    [class.lf-show-navbar]=\"navbarConfig()?.enable && !isMobile()\"\r\n    [class.lf-show-header]=\"headerConfig()?.enable && !(navbarConfig()?.enable && isMobile())\"\r\n    [class.lf-show-navbar-mobile]=\"navbarConfig()?.enable && isMobile() && !headerConfig()?.enable\"\r\n    [class.lf-show-header-and-navbar-mobile]=\"\r\n      headerConfig()?.enable && navbarConfig()?.enable && isMobile()\r\n    \"\r\n    [class.lf-transitions]=\"initialized()\"\r\n    #scrollContainer\r\n    cdkScrollable>\r\n    <!-- drawer -->\r\n    <lf-drawer\r\n      [libraryConfig]=\"libraryConfig\"\r\n      [drawerConfig]=\"drawerConfig()\"\r\n      [drawerPortal]=\"drawerPortal()\"\r\n      [isMobile]=\"isMobile()!\"\r\n      [headerEnabled]=\"headerConfig()?.enable!\"\r\n      (drawerConfigUpdateEvent)=\"drawerConfigUpdated($event)\">\r\n      <!-- drawer content -->\r\n      <ng-content select=\"[drawerContent]\" drawerContent></ng-content>\r\n      <!-- content title card -->\r\n      <lf-content-title-card\r\n        [libraryConfig]=\"libraryConfig\"\r\n        [contentTitleCardConfig]=\"contentTitleCardConfig()\"\r\n        [isMobile]=\"isMobile()!\"\r\n        [routeHistory]=\"routeHistory()!\"\r\n        (backButtonClickEvent)=\"backButtonClicked()\"></lf-content-title-card>\r\n      <!-- main content -->\r\n      <div\r\n        class=\"lf-content\"\r\n        [class.lf-content-mobile]=\"isMobile()\"\r\n        [class.lf-show-footer]=\"footerConfig()?.enable\"\r\n        #content>\r\n        <ng-content></ng-content>\r\n        <!-- to top button -->\r\n        <lf-floating-button\r\n          [libraryConfig]=\"libraryConfig\"\r\n          [floatingButtonConfig]=\"floatingButtonConfig()\"\r\n          [onTop]=\"scrollTopPosition() <= 0\"\r\n          [isMobile]=\"isMobile()!\"\r\n          [drawerEnabled]=\"drawerConfig()?.enable! && drawerConfig()?.open!\"\r\n          [navbarEnabled]=\"navbarConfig()?.enable!\"\r\n          [bottomBarEnabled]=\"bottomBarConfig()?.enable!\"\r\n          [bottomSnackbarOpen]=\"bottomSnackbarOpen()\"\r\n          (floatingButtonConfigUpdateEvent)=\"floatingButtonConfigUpdated($event)\"\r\n          (floatingButtonClickEvent)=\"floatingButtonClicked($event)\"></lf-floating-button>\r\n      </div>\r\n      <!-- footer -->\r\n      <lf-footer [libraryConfig]=\"libraryConfig\" [footerConfig]=\"footerConfig()\"></lf-footer>\r\n    </lf-drawer>\r\n  </div>\r\n  <!-- bottom bar -->\r\n  <lf-bottom-bar\r\n    [libraryConfig]=\"libraryConfig\"\r\n    [bottomBarConfig]=\"bottomBarConfig()\"\r\n    [isMobile]=\"isMobile()! && navbarConfig()?.enable!\"\r\n    [navbarEnabled]=\"navbarConfig()?.enable!\"\r\n    (bottomBarCloseClickEvent)=\"bottomBarCloseClicked($event)\"\r\n    (bottomBarButtonClickEvent)=\"bottomBarButtonClicked($event)\"></lf-bottom-bar>\r\n</div>\r\n", styles: [".lf-scaffold{height:100dvh}.lf-scaffold .lf-content-wrapper{position:absolute;inset:0;overflow-y:auto}.lf-scaffold .lf-content-wrapper.lf-show-navbar{left:calc(var(--navbar-height) + 2 * var(--navbar-padding))}.lf-scaffold .lf-content-wrapper.lf-show-header{top:var(--header-height);height:calc(100dvh - var(--header-height))}.lf-scaffold .lf-content-wrapper.lf-show-navbar-mobile{height:calc(100dvh - var(--navbar-height-mobile))}.lf-scaffold .lf-content-wrapper.lf-show-header-and-navbar-mobile{top:var(--header-height);height:calc(100dvh - var(--header-height) - var(--navbar-height-mobile))}.lf-scaffold .lf-content-wrapper .lf-content{padding-left:var(--content-padding);padding-right:var(--content-padding);padding-bottom:var(--content-padding)}.lf-scaffold .lf-content-wrapper .lf-content.lf-content-mobile{padding-left:var(--content-padding-mobile);padding-right:var(--content-padding-mobile);padding-bottom:var(--content-padding-mobile)}.lf-scaffold .lf-content-wrapper .lf-content.lf-show-footer{min-height:100%}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: HeaderComponent, selector: "lf-header", inputs: ["libraryConfig", "headerConfig", "isMobile", "routeLoading", "currentRoute"], outputs: ["headerConfigUpdateEvent", "headerButtonClickEvent", "headerInputSubmitEvent", "headerInputChangeEvent"] }, { kind: "component", type: NavbarComponent, selector: "lf-navbar", inputs: ["libraryConfig", "navbarConfig", "isMobile", "currentRoute"], outputs: ["navbarButtonClickEvent"] }, { kind: "component", type: DrawerComponent, selector: "lf-drawer", inputs: ["libraryConfig", "drawerConfig", "isMobile", "headerEnabled", "drawerPortal"], outputs: ["drawerConfigUpdateEvent"] }, { kind: "component", type: FooterComponent, selector: "lf-footer", inputs: ["libraryConfig", "footerConfig"] }, { kind: "component", type: ContentTitleCardComponent, selector: "lf-content-title-card", inputs: ["libraryConfig", "contentTitleCardConfig", "isMobile", "routeHistory"], outputs: ["backButtonClickEvent"] }, { kind: "component", type: FloatingButtonComponent, selector: "lf-floating-button", inputs: ["libraryConfig", "floatingButtonConfig", "onTop", "isMobile", "drawerEnabled", "navbarEnabled", "bottomBarEnabled", "bottomSnackbarOpen"], outputs: ["floatingButtonConfigUpdateEvent", "floatingButtonClickEvent"] }, { kind: "component", type: BottomBarComponent, selector: "lf-bottom-bar", inputs: ["libraryConfig", "bottomBarConfig", "isMobile", "navbarEnabled"], outputs: ["bottomBarCloseClickEvent", "bottomBarButtonClickEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ScaffoldComponent, decorators: [{
             type: Component,
@@ -1535,7 +1557,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         ContentTitleCardComponent,
                         FloatingButtonComponent,
                         BottomBarComponent,
-                    ], template: "<div\r\n  class=\"lf-scaffold lf-transitions mat-app-background mat-typography\"\r\n  [ngClass]=\"scaffoldConfig()?.cssClass\">\r\n  <!-- header -->\r\n  <lf-header\r\n    [libraryConfig]=\"libraryConfig\"\r\n    [headerConfig]=\"headerConfig()\"\r\n    [isMobile]=\"isMobile()!\"\r\n    [routeLoading]=\"routeLoading()!\"\r\n    [currentRoute]=\"currentRoute()\"\r\n    (headerConfigUpdateEvent)=\"headerConfigUpdated($event)\"\r\n    (headerButtonClickEvent)=\"headerButtonClicked($event)\"\r\n    (headerInputSubmitEvent)=\"headerInputSubmitted($event)\"\r\n    (headerInputChangeEvent)=\"headerInputChanged($event)\"></lf-header>\r\n  <!-- navbar -->\r\n  <lf-navbar\r\n    [libraryConfig]=\"libraryConfig\"\r\n    [navbarConfig]=\"navbarConfig()\"\r\n    [isMobile]=\"isMobile()!\"\r\n    [currentRoute]=\"currentRoute()\"\r\n    (navbarButtonClickEvent)=\"navbarButtonClicked($event)\"></lf-navbar>\r\n  <!-- content wrapper -->\r\n  <div\r\n    class=\"lf-content-wrapper\"\r\n    [class.lf-show-navbar]=\"navbarConfig()?.enable && !isMobile()\"\r\n    [class.lf-show-header]=\"headerConfig()?.enable && !(navbarConfig()?.enable && isMobile())\"\r\n    [class.lf-show-navbar-mobile]=\"navbarConfig()?.enable && isMobile() && !headerConfig()?.enable\"\r\n    [class.lf-show-header-and-navbar-mobile]=\"\r\n      headerConfig()?.enable && navbarConfig()?.enable && isMobile()\r\n    \"\r\n    [class.lf-transitions]=\"initialized()\"\r\n    #scrollContainer\r\n    cdkScrollable>\r\n    <!-- drawer -->\r\n    <lf-drawer\r\n      [libraryConfig]=\"libraryConfig\"\r\n      [drawerConfig]=\"drawerConfig()\"\r\n      [drawerPortal]=\"drawerPortal()\"\r\n      [isMobile]=\"isMobile()!\"\r\n      [headerEnabled]=\"headerConfig()?.enable!\"\r\n      (drawerConfigUpdateEvent)=\"drawerConfigUpdated($event)\">\r\n      <!-- drawer content -->\r\n      <ng-content select=\"[drawerContent]\" drawerContent></ng-content>\r\n      <!-- content title card -->\r\n      <lf-content-title-card\r\n        [libraryConfig]=\"libraryConfig\"\r\n        [contentTitleCardConfig]=\"contentTitleCardConfig()\"\r\n        [isMobile]=\"isMobile()!\"\r\n        [routeHistory]=\"routeHistory()!\"\r\n        (backButtonClickEvent)=\"backButtonClicked()\"></lf-content-title-card>\r\n      <!-- main content -->\r\n      <div\r\n        class=\"lf-content\"\r\n        [class.lf-content-mobile]=\"isMobile()\"\r\n        [class.lf-show-footer]=\"footerConfig()?.enable\"\r\n        #content>\r\n        <ng-content></ng-content>\r\n        <!-- to top button -->\r\n        <lf-floating-button\r\n          [libraryConfig]=\"libraryConfig\"\r\n          [floatingButtonConfig]=\"floatingButtonConfig()\"\r\n          [onTop]=\"scrollTopPosition() <= 0\"\r\n          [isMobile]=\"isMobile()!\"\r\n          [drawerEnabled]=\"drawerConfig()?.enable! && drawerConfig()?.open!\"\r\n          [navbarEnabled]=\"navbarConfig()?.enable!\"\r\n          [bottomBarEnabled]=\"bottomBarConfig()?.enable!\"\r\n          (floatingButtonConfigUpdateEvent)=\"floatingButtonConfigUpdated($event)\"\r\n          (floatingButtonClickEvent)=\"floatingButtonClicked($event)\"></lf-floating-button>\r\n      </div>\r\n      <!-- footer -->\r\n      <lf-footer [libraryConfig]=\"libraryConfig\" [footerConfig]=\"footerConfig()\"></lf-footer>\r\n    </lf-drawer>\r\n  </div>\r\n  <!-- bottom bar -->\r\n  <lf-bottom-bar\r\n    [libraryConfig]=\"libraryConfig\"\r\n    [bottomBarConfig]=\"bottomBarConfig()\"\r\n    [isMobile]=\"isMobile()! && navbarConfig()?.enable!\"\r\n    [navbarEnabled]=\"navbarConfig()?.enable!\"\r\n    (bottomBarCloseClickEvent)=\"bottomBarCloseClicked($event)\"\r\n    (bottomBarButtonClickEvent)=\"bottomBarButtonClicked($event)\"></lf-bottom-bar>\r\n</div>\r\n", styles: [".lf-scaffold{height:100dvh}.lf-scaffold .lf-content-wrapper{position:absolute;inset:0;overflow-y:auto}.lf-scaffold .lf-content-wrapper.lf-show-navbar{left:calc(var(--navbar-height) + 2 * var(--navbar-padding))}.lf-scaffold .lf-content-wrapper.lf-show-header{top:var(--header-height);height:calc(100dvh - var(--header-height))}.lf-scaffold .lf-content-wrapper.lf-show-navbar-mobile{height:calc(100dvh - var(--navbar-height-mobile))}.lf-scaffold .lf-content-wrapper.lf-show-header-and-navbar-mobile{top:var(--header-height);height:calc(100dvh - var(--header-height) - var(--navbar-height-mobile))}.lf-scaffold .lf-content-wrapper .lf-content{padding-left:var(--content-padding);padding-right:var(--content-padding);padding-bottom:var(--content-padding)}.lf-scaffold .lf-content-wrapper .lf-content.lf-content-mobile{padding-left:var(--content-padding-mobile);padding-right:var(--content-padding-mobile);padding-bottom:var(--content-padding-mobile)}.lf-scaffold .lf-content-wrapper .lf-content.lf-show-footer{min-height:100%}\n"] }]
+                    ], template: "<div\r\n  class=\"lf-scaffold lf-transitions mat-app-background mat-typography\"\r\n  [ngClass]=\"scaffoldConfig()?.cssClass\">\r\n  <!-- header -->\r\n  <lf-header\r\n    [libraryConfig]=\"libraryConfig\"\r\n    [headerConfig]=\"headerConfig()\"\r\n    [isMobile]=\"isMobile()!\"\r\n    [routeLoading]=\"routeLoading()!\"\r\n    [currentRoute]=\"currentRoute()\"\r\n    (headerConfigUpdateEvent)=\"headerConfigUpdated($event)\"\r\n    (headerButtonClickEvent)=\"headerButtonClicked($event)\"\r\n    (headerInputSubmitEvent)=\"headerInputSubmitted($event)\"\r\n    (headerInputChangeEvent)=\"headerInputChanged($event)\"></lf-header>\r\n  <!-- navbar -->\r\n  <lf-navbar\r\n    [libraryConfig]=\"libraryConfig\"\r\n    [navbarConfig]=\"navbarConfig()\"\r\n    [isMobile]=\"isMobile()!\"\r\n    [currentRoute]=\"currentRoute()\"\r\n    (navbarButtonClickEvent)=\"navbarButtonClicked($event)\"></lf-navbar>\r\n  <!-- content wrapper -->\r\n  <div\r\n    class=\"lf-content-wrapper\"\r\n    [class.lf-show-navbar]=\"navbarConfig()?.enable && !isMobile()\"\r\n    [class.lf-show-header]=\"headerConfig()?.enable && !(navbarConfig()?.enable && isMobile())\"\r\n    [class.lf-show-navbar-mobile]=\"navbarConfig()?.enable && isMobile() && !headerConfig()?.enable\"\r\n    [class.lf-show-header-and-navbar-mobile]=\"\r\n      headerConfig()?.enable && navbarConfig()?.enable && isMobile()\r\n    \"\r\n    [class.lf-transitions]=\"initialized()\"\r\n    #scrollContainer\r\n    cdkScrollable>\r\n    <!-- drawer -->\r\n    <lf-drawer\r\n      [libraryConfig]=\"libraryConfig\"\r\n      [drawerConfig]=\"drawerConfig()\"\r\n      [drawerPortal]=\"drawerPortal()\"\r\n      [isMobile]=\"isMobile()!\"\r\n      [headerEnabled]=\"headerConfig()?.enable!\"\r\n      (drawerConfigUpdateEvent)=\"drawerConfigUpdated($event)\">\r\n      <!-- drawer content -->\r\n      <ng-content select=\"[drawerContent]\" drawerContent></ng-content>\r\n      <!-- content title card -->\r\n      <lf-content-title-card\r\n        [libraryConfig]=\"libraryConfig\"\r\n        [contentTitleCardConfig]=\"contentTitleCardConfig()\"\r\n        [isMobile]=\"isMobile()!\"\r\n        [routeHistory]=\"routeHistory()!\"\r\n        (backButtonClickEvent)=\"backButtonClicked()\"></lf-content-title-card>\r\n      <!-- main content -->\r\n      <div\r\n        class=\"lf-content\"\r\n        [class.lf-content-mobile]=\"isMobile()\"\r\n        [class.lf-show-footer]=\"footerConfig()?.enable\"\r\n        #content>\r\n        <ng-content></ng-content>\r\n        <!-- to top button -->\r\n        <lf-floating-button\r\n          [libraryConfig]=\"libraryConfig\"\r\n          [floatingButtonConfig]=\"floatingButtonConfig()\"\r\n          [onTop]=\"scrollTopPosition() <= 0\"\r\n          [isMobile]=\"isMobile()!\"\r\n          [drawerEnabled]=\"drawerConfig()?.enable! && drawerConfig()?.open!\"\r\n          [navbarEnabled]=\"navbarConfig()?.enable!\"\r\n          [bottomBarEnabled]=\"bottomBarConfig()?.enable!\"\r\n          [bottomSnackbarOpen]=\"bottomSnackbarOpen()\"\r\n          (floatingButtonConfigUpdateEvent)=\"floatingButtonConfigUpdated($event)\"\r\n          (floatingButtonClickEvent)=\"floatingButtonClicked($event)\"></lf-floating-button>\r\n      </div>\r\n      <!-- footer -->\r\n      <lf-footer [libraryConfig]=\"libraryConfig\" [footerConfig]=\"footerConfig()\"></lf-footer>\r\n    </lf-drawer>\r\n  </div>\r\n  <!-- bottom bar -->\r\n  <lf-bottom-bar\r\n    [libraryConfig]=\"libraryConfig\"\r\n    [bottomBarConfig]=\"bottomBarConfig()\"\r\n    [isMobile]=\"isMobile()! && navbarConfig()?.enable!\"\r\n    [navbarEnabled]=\"navbarConfig()?.enable!\"\r\n    (bottomBarCloseClickEvent)=\"bottomBarCloseClicked($event)\"\r\n    (bottomBarButtonClickEvent)=\"bottomBarButtonClicked($event)\"></lf-bottom-bar>\r\n</div>\r\n", styles: [".lf-scaffold{height:100dvh}.lf-scaffold .lf-content-wrapper{position:absolute;inset:0;overflow-y:auto}.lf-scaffold .lf-content-wrapper.lf-show-navbar{left:calc(var(--navbar-height) + 2 * var(--navbar-padding))}.lf-scaffold .lf-content-wrapper.lf-show-header{top:var(--header-height);height:calc(100dvh - var(--header-height))}.lf-scaffold .lf-content-wrapper.lf-show-navbar-mobile{height:calc(100dvh - var(--navbar-height-mobile))}.lf-scaffold .lf-content-wrapper.lf-show-header-and-navbar-mobile{top:var(--header-height);height:calc(100dvh - var(--header-height) - var(--navbar-height-mobile))}.lf-scaffold .lf-content-wrapper .lf-content{padding-left:var(--content-padding);padding-right:var(--content-padding);padding-bottom:var(--content-padding)}.lf-scaffold .lf-content-wrapper .lf-content.lf-content-mobile{padding-left:var(--content-padding-mobile);padding-right:var(--content-padding-mobile);padding-bottom:var(--content-padding-mobile)}.lf-scaffold .lf-content-wrapper .lf-content.lf-show-footer{min-height:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { scrollContainer: [{ type: i0.ViewChild, args: ['scrollContainer', { isSignal: true }] }], content: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }], headerButtonClickEvent: [{ type: i0.Output, args: ["headerButtonClickEvent"] }], headerInputSubmitEvent: [{ type: i0.Output, args: ["headerInputSubmitEvent"] }], headerInputChangeEvent: [{ type: i0.Output, args: ["headerInputChangeEvent"] }], navbarButtonClickEvent: [{ type: i0.Output, args: ["navbarButtonClickEvent"] }], floatingButtonClickEvent: [{ type: i0.Output, args: ["floatingButtonClickEvent"] }], bottomBarButtonClickEvent: [{ type: i0.Output, args: ["bottomBarButtonClickEvent"] }] } });
 
 class ColorPickerComponent {