@lukfel/ng-scaffold 21.0.7 → 21.1.2

package/fesm2022/lukfel-ng-scaffold.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, NgModule, inject, Input, Component, EventEmitter, Output, ChangeDetectorRef, ViewChild, Injectable, PLATFORM_ID, DOCUMENT, TemplateRef, Directive, ContentChild } from '@angular/core';
+import { InjectionToken, EventEmitter, Output, Input, Component, NgModule, inject, ChangeDetectorRef, ViewChild, Injectable, PLATFORM_ID, DOCUMENT, TemplateRef, Directive, ContentChild } from '@angular/core';
 import { Title, Meta, BrowserModule } from '@angular/platform-browser';
 import * as i2$2 from '@angular/router';
 import { Router, RouteConfigLoadStart, RouteConfigLoadEnd, NavigationEnd, ActivatedRoute, RouterModule } from '@angular/router';
@@ -12,178 +12,48 @@ import * as i4 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i4$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i9 from '@angular/cdk/drag-drop';
-import { DragDropModule, transferArrayItem } from '@angular/cdk/drag-drop';
+import * as i3 from '@angular/material/card';
+import { MatCardModule } from '@angular/material/card';
+import * as i2$1 from '@angular/material/sidenav';
+import { MatSidenavModule } from '@angular/material/sidenav';
 import * as i3$1 from '@angular/cdk/portal';
 import { PortalModule, ComponentPortal } from '@angular/cdk/portal';
+import * as i4$2 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i5 from '@angular/material/toolbar';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import * as i7 from '@angular/material/progress-bar';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import * as i2$3 from '@angular/material/dialog';
+import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
+import * as i9 from '@angular/cdk/drag-drop';
+import { DragDropModule, transferArrayItem } from '@angular/cdk/drag-drop';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import * as i3 from '@angular/material/card';
-import { MatCardModule } from '@angular/material/card';
 import * as i3$3 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i2$3 from '@angular/material/dialog';
-import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i3$2 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import * as i5$1 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
-import * as i4$2 from '@angular/material/menu';
-import { MatMenuModule } from '@angular/material/menu';
-import * as i7 from '@angular/material/progress-bar';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import * as i1$2 from '@angular/material/progress-spinner';
+import * as i2$4 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatSelectModule } from '@angular/material/select';
-import * as i2$1 from '@angular/material/sidenav';
-import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatSliderModule } from '@angular/material/slider';
 import { MatSnackBarModule, MatSnackBar } from '@angular/material/snack-bar';
-import * as i5 from '@angular/material/toolbar';
-import { MatToolbarModule } from '@angular/material/toolbar';
 import * as i8 from '@angular/material/core';
 import { MatRippleModule } from '@angular/material/core';
 import * as i1$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { distinctUntilChanged, firstValueFrom, BehaviorSubject, take, Subscription, fromEvent, debounceTime, finalize } from 'rxjs';
-import * as i2$4 from '@angular/cdk/scrolling';
+import { Overlay } from '@angular/cdk/overlay';
+import * as i2$5 from '@angular/cdk/scrolling';
 
 const CONFIG = new InjectionToken('config');
 
-class MaterialModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: MaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: MaterialModule, exports: [MatCheckboxModule,
-            MatButtonModule,
-            MatInputModule,
-            MatAutocompleteModule,
-            MatFormFieldModule,
-            MatSelectModule,
-            MatSliderModule,
-            MatSlideToggleModule,
-            MatMenuModule,
-            MatSidenavModule,
-            MatToolbarModule,
-            MatListModule,
-            MatCardModule,
-            MatExpansionModule,
-            MatIconModule,
-            MatProgressSpinnerModule,
-            MatProgressBarModule,
-            MatDialogModule,
-            MatTooltipModule,
-            MatSnackBarModule,
-            MatRippleModule,
-            PortalModule,
-            DragDropModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: MaterialModule, imports: [MatCheckboxModule,
-            MatButtonModule,
-            MatInputModule,
-            MatAutocompleteModule,
-            MatFormFieldModule,
-            MatSelectModule,
-            MatSliderModule,
-            MatSlideToggleModule,
-            MatMenuModule,
-            MatSidenavModule,
-            MatToolbarModule,
-            MatListModule,
-            MatCardModule,
-            MatExpansionModule,
-            MatIconModule,
-            MatProgressSpinnerModule,
-            MatProgressBarModule,
-            MatDialogModule,
-            MatTooltipModule,
-            MatSnackBarModule,
-            MatRippleModule,
-            PortalModule,
-            DragDropModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: MaterialModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [],
-                    exports: [
-                        MatCheckboxModule,
-                        MatButtonModule,
-                        MatInputModule,
-                        MatAutocompleteModule,
-                        MatFormFieldModule,
-                        MatSelectModule,
-                        MatSliderModule,
-                        MatSlideToggleModule,
-                        MatMenuModule,
-                        MatSidenavModule,
-                        MatToolbarModule,
-                        MatListModule,
-                        MatCardModule,
-                        MatExpansionModule,
-                        MatIconModule,
-                        MatProgressSpinnerModule,
-                        MatProgressBarModule,
-                        MatDialogModule,
-                        MatTooltipModule,
-                        MatSnackBarModule,
-                        MatRippleModule,
-                        PortalModule,
-                        DragDropModule
-                    ],
-                    providers: [],
-                    bootstrap: []
-                }]
-        }] });
-
-class SharedModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: SharedModule, imports: [CommonModule,
-            FormsModule,
-            MaterialModule], exports: [CommonModule,
-            FormsModule,
-            MaterialModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SharedModule, imports: [CommonModule,
-            FormsModule,
-            MaterialModule, CommonModule,
-            FormsModule,
-            MaterialModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SharedModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        MaterialModule
-                    ],
-                    exports: [
-                        CommonModule,
-                        FormsModule,
-                        MaterialModule
-                    ]
-                }]
-        }] });
-
-class IconComponent {
-    constructor() {
-        this.libraryConfig = inject(CONFIG, { optional: true });
-        this.verticalAlign = null;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: IconComponent, isStandalone: true, selector: "lf-icon", inputs: { matIcon: "matIcon", svgIcon: "svgIcon", verticalAlign: "verticalAlign" }, ngImport: i0, template: "<!-- mat icon -->\r\n@if (matIcon) {\r\n  <mat-icon\r\n    class=\"lf-icon\"\r\n    [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\"\r\n    [style.vertical-align]=\"verticalAlign\">\r\n    {{ matIcon }}\r\n  </mat-icon>\r\n  <!-- svg icon -->\r\n} @else if (svgIcon) {\r\n  <mat-icon class=\"lf-icon\" [svgIcon]=\"svgIcon\" [style.vertical-align]=\"verticalAlign\"></mat-icon>\r\n}\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lf-icon', standalone: true, imports: [SharedModule], template: "<!-- mat icon -->\r\n@if (matIcon) {\r\n  <mat-icon\r\n    class=\"lf-icon\"\r\n    [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\"\r\n    [style.vertical-align]=\"verticalAlign\">\r\n    {{ matIcon }}\r\n  </mat-icon>\r\n  <!-- svg icon -->\r\n} @else if (svgIcon) {\r\n  <mat-icon class=\"lf-icon\" [svgIcon]=\"svgIcon\" [style.vertical-align]=\"verticalAlign\"></mat-icon>\r\n}\r\n", styles: [":host{display:contents}\n"] }]
-        }], propDecorators: { matIcon: [{
-                type: Input
-            }], svgIcon: [{
-                type: Input
-            }], verticalAlign: [{
-                type: Input
-            }] } });
-
 class BottomBarComponent {
     constructor() {
         this.libraryConfig = null;
@@ -202,8 +72,8 @@ class BottomBarComponent {
     closeClicked(closeButtonId) {
         this.bottomBarCloseClickEvent.emit(closeButtonId);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: BottomBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: BottomBarComponent, isStandalone: false, selector: "lf-bottom-bar", inputs: { libraryConfig: "libraryConfig", bottomBarConfig: "bottomBarConfig", isMobile: "isMobile", navbarEnabled: "navbarEnabled" }, outputs: { bottomBarCloseClickEvent: "bottomBarCloseClickEvent", bottomBarButtonClickEvent: "bottomBarButtonClickEvent" }, ngImport: i0, template: "@if (bottomBarConfig && bottomBarConfig.enable) {\r\n  <div\r\n    [@slideUpDown]\r\n    class=\"lf-bottom-bar lf-transitions px-4\"\r\n    [ngClass]=\"bottomBarConfig.cssClass\"\r\n    [class.lf-bottom-bar-show-navbar]=\"!isMobile && navbarEnabled\"\r\n    [class.lf-bottom-bar-show-navbar-mobile]=\"isMobile && navbarEnabled\">\r\n    @if (bottomBarConfig.closeButtonId) {\r\n      <button mat-icon-button (click)=\"closeClicked(bottomBarConfig.closeButtonId)\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    }\r\n    @if (bottomBarConfig.message) {\r\n      <span class=\"ml-2\">{{ bottomBarConfig.message }}</span>\r\n    }\r\n    @if (bottomBarConfig.buttons) {\r\n      <div class=\"lf-bottom-bar-buttons ml-4\">\r\n        @for (button of bottomBarConfig.buttons; track button.id) {\r\n          @if (button.label) {\r\n            <button\r\n              mat-button\r\n              class=\"lf-bottom-bar-button ml-2\"\r\n              [ngClass]=\"button.cssClass\"\r\n              (click)=\"buttonClicked(button.id)\"\r\n              [matTooltip]=\"button.tooltip\">\r\n              @if (button.matIcon || button.svgIcon) {\r\n                <lf-icon\r\n                  [matIcon]=\"button.matIcon\"\r\n                  [svgIcon]=\"button.svgIcon\"\r\n                  verticalAlign=\"bottom\"></lf-icon>\r\n              }\r\n              {{ button.label }}\r\n            </button>\r\n          } @else {\r\n            <button\r\n              mat-icon-button\r\n              color=\"accent\"\r\n              class=\"lf-bottom-bar-button-icon ml-2\"\r\n              [ngClass]=\"button.cssClass\"\r\n              (click)=\"buttonClicked(button.id)\"\r\n              [matTooltip]=\"button.tooltip\">\r\n              <lf-icon [matIcon]=\"button.matIcon\" [svgIcon]=\"button.svgIcon\"></lf-icon>\r\n            </button>\r\n          }\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".lf-bottom-bar{z-index:var(--bottom-bar-z-index);position:fixed;left:0;bottom:0;right:0;height:var(--bottom-bar-height);display:flex;align-items:center;box-sizing:border-box;background-color:var(--color-accent);color:#fff}.lf-bottom-bar.lf-bottom-bar-show-navbar-mobile{bottom:calc(var(--navbar-height-mobile) + 2 * var(--navbar-padding))!important}.lf-bottom-bar.lf-bottom-bar-show-navbar{left:calc(var(--navbar-width) + 2 * var(--navbar-padding))!important}.lf-bottom-bar .lf-bottom-bar-buttons{display:flex;align-items:center}.lf-bottom-bar .lf-bottom-bar-buttons .lf-bottom-bar-button{color:var(--color-accent)!important;background-color:#fff!important}.lf-bottom-bar .lf-bottom-bar-buttons .lf-bottom-bar-button-icon{color:#fff!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.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: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: IconComponent, selector: "lf-icon", inputs: ["matIcon", "svgIcon", "verticalAlign"] }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BottomBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: BottomBarComponent, isStandalone: false, selector: "lf-bottom-bar", inputs: { libraryConfig: "libraryConfig", bottomBarConfig: "bottomBarConfig", isMobile: "isMobile", navbarEnabled: "navbarEnabled" }, outputs: { bottomBarCloseClickEvent: "bottomBarCloseClickEvent", bottomBarButtonClickEvent: "bottomBarButtonClickEvent" }, ngImport: i0, template: "@if (bottomBarConfig && bottomBarConfig.enable) {\r\n  <div\r\n    [@slideUpDown]\r\n    class=\"lf-bottom-bar lf-transitions px-4\"\r\n    [ngClass]=\"bottomBarConfig.cssClass\"\r\n    [class.lf-bottom-bar-show-navbar]=\"!isMobile && navbarEnabled\"\r\n    [class.lf-bottom-bar-show-navbar-mobile]=\"isMobile && navbarEnabled\">\r\n    @if (bottomBarConfig.closeButtonId) {\r\n      <button mat-icon-button (click)=\"closeClicked(bottomBarConfig.closeButtonId)\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    }\r\n    @if (bottomBarConfig.message) {\r\n      <span class=\"ml-2\">{{ bottomBarConfig.message }}</span>\r\n    }\r\n    @if (bottomBarConfig.buttons) {\r\n      <div class=\"lf-bottom-bar-buttons ml-4\">\r\n        @for (button of bottomBarConfig.buttons; track button.id) {\r\n          <!-- label button -->\r\n          @if (button.label) {\r\n            <button\r\n              mat-button\r\n              class=\"lf-bottom-bar-button ml-2\"\r\n              [ngClass]=\"button.cssClass\"\r\n              (click)=\"buttonClicked(button.id)\"\r\n              [matTooltip]=\"button.tooltip\">\r\n              <!-- icon -->\r\n              <!-- icon -->\r\n              @if (button.matIcon) {\r\n                <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\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              {{ button.label }}\r\n            </button>\r\n            <!-- icon button -->\r\n          } @else {\r\n            <button\r\n              mat-icon-button\r\n              color=\"accent\"\r\n              class=\"lf-bottom-bar-button-icon ml-2\"\r\n              [ngClass]=\"button.cssClass\"\r\n              (click)=\"buttonClicked(button.id)\"\r\n              [matTooltip]=\"button.tooltip\">\r\n              <!-- icon -->\r\n              @if (button.matIcon) {\r\n                <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\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    }\r\n  </div>\r\n}\r\n", styles: [".lf-bottom-bar{z-index:var(--bottom-bar-z-index);position:fixed;left:0;bottom:0;right:0;height:var(--bottom-bar-height);display:flex;align-items:center;box-sizing:border-box;background-color:var(--color-accent);color:#fff}.lf-bottom-bar.lf-bottom-bar-show-navbar-mobile{bottom:calc(var(--navbar-height-mobile) + 2 * var(--navbar-padding))!important}.lf-bottom-bar.lf-bottom-bar-show-navbar{left:calc(var(--navbar-width) + 2 * var(--navbar-padding))!important}.lf-bottom-bar .lf-bottom-bar-buttons{display:flex;align-items:center}.lf-bottom-bar .lf-bottom-bar-buttons .lf-bottom-bar-button{color:var(--color-accent)!important;background-color:#fff!important}.lf-bottom-bar .lf-bottom-bar-buttons .lf-bottom-bar-button-icon{color:#fff!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.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: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], animations: [
             trigger('slideUpDown', [
                 state('void', style({ transform: 'translateY(100%)' })),
                 state('*', style({ transform: 'translateY(0)' })),
@@ -212,7 +82,7 @@ class BottomBarComponent {
             ])
         ] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: BottomBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BottomBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lf-bottom-bar', animations: [
                         trigger('slideUpDown', [
@@ -221,7 +91,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                             transition(':enter', [style({ transform: 'translateY(100%)' }), animate('200ms linear')]),
                             transition(':leave', [animate('200ms linear', style({ transform: 'translateY(100%)' }))])
                         ])
-                    ], standalone: false, template: "@if (bottomBarConfig && bottomBarConfig.enable) {\r\n  <div\r\n    [@slideUpDown]\r\n    class=\"lf-bottom-bar lf-transitions px-4\"\r\n    [ngClass]=\"bottomBarConfig.cssClass\"\r\n    [class.lf-bottom-bar-show-navbar]=\"!isMobile && navbarEnabled\"\r\n    [class.lf-bottom-bar-show-navbar-mobile]=\"isMobile && navbarEnabled\">\r\n    @if (bottomBarConfig.closeButtonId) {\r\n      <button mat-icon-button (click)=\"closeClicked(bottomBarConfig.closeButtonId)\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    }\r\n    @if (bottomBarConfig.message) {\r\n      <span class=\"ml-2\">{{ bottomBarConfig.message }}</span>\r\n    }\r\n    @if (bottomBarConfig.buttons) {\r\n      <div class=\"lf-bottom-bar-buttons ml-4\">\r\n        @for (button of bottomBarConfig.buttons; track button.id) {\r\n          @if (button.label) {\r\n            <button\r\n              mat-button\r\n              class=\"lf-bottom-bar-button ml-2\"\r\n              [ngClass]=\"button.cssClass\"\r\n              (click)=\"buttonClicked(button.id)\"\r\n              [matTooltip]=\"button.tooltip\">\r\n              @if (button.matIcon || button.svgIcon) {\r\n                <lf-icon\r\n                  [matIcon]=\"button.matIcon\"\r\n                  [svgIcon]=\"button.svgIcon\"\r\n                  verticalAlign=\"bottom\"></lf-icon>\r\n              }\r\n              {{ button.label }}\r\n            </button>\r\n          } @else {\r\n            <button\r\n              mat-icon-button\r\n              color=\"accent\"\r\n              class=\"lf-bottom-bar-button-icon ml-2\"\r\n              [ngClass]=\"button.cssClass\"\r\n              (click)=\"buttonClicked(button.id)\"\r\n              [matTooltip]=\"button.tooltip\">\r\n              <lf-icon [matIcon]=\"button.matIcon\" [svgIcon]=\"button.svgIcon\"></lf-icon>\r\n            </button>\r\n          }\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".lf-bottom-bar{z-index:var(--bottom-bar-z-index);position:fixed;left:0;bottom:0;right:0;height:var(--bottom-bar-height);display:flex;align-items:center;box-sizing:border-box;background-color:var(--color-accent);color:#fff}.lf-bottom-bar.lf-bottom-bar-show-navbar-mobile{bottom:calc(var(--navbar-height-mobile) + 2 * var(--navbar-padding))!important}.lf-bottom-bar.lf-bottom-bar-show-navbar{left:calc(var(--navbar-width) + 2 * var(--navbar-padding))!important}.lf-bottom-bar .lf-bottom-bar-buttons{display:flex;align-items:center}.lf-bottom-bar .lf-bottom-bar-buttons .lf-bottom-bar-button{color:var(--color-accent)!important;background-color:#fff!important}.lf-bottom-bar .lf-bottom-bar-buttons .lf-bottom-bar-button-icon{color:#fff!important}\n"] }]
+                    ], standalone: false, template: "@if (bottomBarConfig && bottomBarConfig.enable) {\r\n  <div\r\n    [@slideUpDown]\r\n    class=\"lf-bottom-bar lf-transitions px-4\"\r\n    [ngClass]=\"bottomBarConfig.cssClass\"\r\n    [class.lf-bottom-bar-show-navbar]=\"!isMobile && navbarEnabled\"\r\n    [class.lf-bottom-bar-show-navbar-mobile]=\"isMobile && navbarEnabled\">\r\n    @if (bottomBarConfig.closeButtonId) {\r\n      <button mat-icon-button (click)=\"closeClicked(bottomBarConfig.closeButtonId)\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    }\r\n    @if (bottomBarConfig.message) {\r\n      <span class=\"ml-2\">{{ bottomBarConfig.message }}</span>\r\n    }\r\n    @if (bottomBarConfig.buttons) {\r\n      <div class=\"lf-bottom-bar-buttons ml-4\">\r\n        @for (button of bottomBarConfig.buttons; track button.id) {\r\n          <!-- label button -->\r\n          @if (button.label) {\r\n            <button\r\n              mat-button\r\n              class=\"lf-bottom-bar-button ml-2\"\r\n              [ngClass]=\"button.cssClass\"\r\n              (click)=\"buttonClicked(button.id)\"\r\n              [matTooltip]=\"button.tooltip\">\r\n              <!-- icon -->\r\n              <!-- icon -->\r\n              @if (button.matIcon) {\r\n                <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\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              {{ button.label }}\r\n            </button>\r\n            <!-- icon button -->\r\n          } @else {\r\n            <button\r\n              mat-icon-button\r\n              color=\"accent\"\r\n              class=\"lf-bottom-bar-button-icon ml-2\"\r\n              [ngClass]=\"button.cssClass\"\r\n              (click)=\"buttonClicked(button.id)\"\r\n              [matTooltip]=\"button.tooltip\">\r\n              <!-- icon -->\r\n              @if (button.matIcon) {\r\n                <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\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    }\r\n  </div>\r\n}\r\n", styles: [".lf-bottom-bar{z-index:var(--bottom-bar-z-index);position:fixed;left:0;bottom:0;right:0;height:var(--bottom-bar-height);display:flex;align-items:center;box-sizing:border-box;background-color:var(--color-accent);color:#fff}.lf-bottom-bar.lf-bottom-bar-show-navbar-mobile{bottom:calc(var(--navbar-height-mobile) + 2 * var(--navbar-padding))!important}.lf-bottom-bar.lf-bottom-bar-show-navbar{left:calc(var(--navbar-width) + 2 * var(--navbar-padding))!important}.lf-bottom-bar .lf-bottom-bar-buttons{display:flex;align-items:center}.lf-bottom-bar .lf-bottom-bar-buttons .lf-bottom-bar-button{color:var(--color-accent)!important;background-color:#fff!important}.lf-bottom-bar .lf-bottom-bar-buttons .lf-bottom-bar-button-icon{color:#fff!important}\n"] }]
         }], propDecorators: { libraryConfig: [{
                 type: Input
             }], bottomBarConfig: [{
@@ -247,10 +117,10 @@ class ContentTitleCardComponent {
     backButtonClicked() {
         this.backButtonClickEvent.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ContentTitleCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: ContentTitleCardComponent, isStandalone: false, selector: "lf-content-title-card", inputs: { libraryConfig: "libraryConfig", contentTitleCardConfig: "contentTitleCardConfig", isMobile: "isMobile", routeHistory: "routeHistory" }, outputs: { backButtonClickEvent: "backButtonClickEvent" }, ngImport: i0, template: "@if (contentTitleCardConfig && contentTitleCardConfig.enable) {\r\n  <mat-card\r\n    class=\"lf-content-title-card mat-elevation-z2 px-4\"\r\n    [ngClass]=\"contentTitleCardConfig.cssClass\">\r\n    <!-- back button -->\r\n    @if (contentTitleCardConfig.showBackButton && routeHistory.length > 0) {\r\n      <button mat-icon-button color=\"accent\" (click)=\"backButtonClicked()\">\r\n        <mat-icon>arrow_back_ios</mat-icon>\r\n      </button>\r\n    }\r\n    <!-- spacer -->\r\n    <div style=\"flex: 1 1 auto\"></div>\r\n    <!-- label -->\r\n    <span class=\"lf-content-title-card-label\">\r\n      {{ contentTitleCardConfig.label || \"\" }}\r\n    </span>\r\n    <!-- spacer -->\r\n    <div style=\"flex: 1 1 auto\"></div>\r\n    <!-- empty button spacer -->\r\n    <div\r\n      [style.width]=\"\r\n        contentTitleCardConfig.showBackButton && routeHistory.length > 1 ? '48px' : '0px'\r\n      \"></div>\r\n  </mat-card>\r\n}\r\n", styles: [".lf-content-title-card{z-index:var(--content-title-card-z-index);height:var(--content-title-card-height);display:flex;flex-flow:row nowrap;align-items:center;border-radius:0}.lf-content-title-card .lf-content-title-card-label{font-size:var(--content-title-card-labe-font-size);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ContentTitleCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: ContentTitleCardComponent, isStandalone: false, selector: "lf-content-title-card", inputs: { libraryConfig: "libraryConfig", contentTitleCardConfig: "contentTitleCardConfig", isMobile: "isMobile", routeHistory: "routeHistory" }, outputs: { backButtonClickEvent: "backButtonClickEvent" }, ngImport: i0, template: "@if (contentTitleCardConfig && contentTitleCardConfig.enable) {\r\n  <mat-card\r\n    class=\"lf-content-title-card mat-elevation-z2 px-4\"\r\n    [ngClass]=\"contentTitleCardConfig.cssClass\">\r\n    <!-- back button -->\r\n    @if (contentTitleCardConfig.showBackButton && routeHistory.length > 0) {\r\n      <button mat-icon-button color=\"accent\" (click)=\"backButtonClicked()\">\r\n        <mat-icon>arrow_back_ios</mat-icon>\r\n      </button>\r\n    }\r\n    <!-- spacer -->\r\n    <div style=\"flex: 1 1 auto\"></div>\r\n    <!-- label -->\r\n    <span class=\"lf-content-title-card-label\">\r\n      {{ contentTitleCardConfig.label || \"\" }}\r\n    </span>\r\n    <!-- spacer -->\r\n    <div style=\"flex: 1 1 auto\"></div>\r\n    <!-- empty button spacer -->\r\n    <div\r\n      [style.width]=\"\r\n        contentTitleCardConfig.showBackButton && routeHistory.length > 1 ? '48px' : '0px'\r\n      \"></div>\r\n  </mat-card>\r\n}\r\n", styles: [".lf-content-title-card{z-index:var(--content-title-card-z-index);height:var(--content-title-card-height);display:flex;flex-flow:row nowrap;align-items:center;border-radius:0}.lf-content-title-card .lf-content-title-card-label{font-size:var(--content-title-card-labe-font-size);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ContentTitleCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ContentTitleCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lf-content-title-card', standalone: false, template: "@if (contentTitleCardConfig && contentTitleCardConfig.enable) {\r\n  <mat-card\r\n    class=\"lf-content-title-card mat-elevation-z2 px-4\"\r\n    [ngClass]=\"contentTitleCardConfig.cssClass\">\r\n    <!-- back button -->\r\n    @if (contentTitleCardConfig.showBackButton && routeHistory.length > 0) {\r\n      <button mat-icon-button color=\"accent\" (click)=\"backButtonClicked()\">\r\n        <mat-icon>arrow_back_ios</mat-icon>\r\n      </button>\r\n    }\r\n    <!-- spacer -->\r\n    <div style=\"flex: 1 1 auto\"></div>\r\n    <!-- label -->\r\n    <span class=\"lf-content-title-card-label\">\r\n      {{ contentTitleCardConfig.label || \"\" }}\r\n    </span>\r\n    <!-- spacer -->\r\n    <div style=\"flex: 1 1 auto\"></div>\r\n    <!-- empty button spacer -->\r\n    <div\r\n      [style.width]=\"\r\n        contentTitleCardConfig.showBackButton && routeHistory.length > 1 ? '48px' : '0px'\r\n      \"></div>\r\n  </mat-card>\r\n}\r\n", styles: [".lf-content-title-card{z-index:var(--content-title-card-z-index);height:var(--content-title-card-height);display:flex;flex-flow:row nowrap;align-items:center;border-radius:0}.lf-content-title-card .lf-content-title-card-label{font-size:var(--content-title-card-labe-font-size);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
         }], propDecorators: { libraryConfig: [{
@@ -273,25 +143,19 @@ class DrawerComponent {
         this.headerEnabled = false;
         this.drawerConfigUpdateEvent = new EventEmitter();
     }
-    ngOnInit() {
-        // Avoid initializing an open drawer on mobile
-        if (this.isMobile && this.drawerConfig?.enable && this.drawerConfig?.open) {
-            this.drawerConfigUpdateEvent.emit({ ...this.drawerConfig, open: false });
-        }
-    }
     // Detect when the drawer is closed without clicking a button
     drawerClosed() {
         if (this.drawerConfig) {
-            this.drawerConfigUpdateEvent.emit({ ...this.drawerConfig, open: false });
+            this.drawerConfigUpdateEvent.emit({ open: false });
         }
         ;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: DrawerComponent, isStandalone: false, selector: "lf-drawer", inputs: { libraryConfig: "libraryConfig", drawerConfig: "drawerConfig", isMobile: "isMobile", headerEnabled: "headerEnabled", drawerPortal: "drawerPortal" }, outputs: { drawerConfigUpdateEvent: "drawerConfigUpdateEvent" }, ngImport: i0, template: "@if (drawerConfig && drawerConfig.enable) {\r\n  <mat-sidenav-container\r\n    class=\"lf-drawer-container lf-transitions\"\r\n    [ngClass]=\"drawerConfig.cssClass\">\r\n    <!-- drawer -->\r\n    <mat-sidenav\r\n      class=\"lf-drawer mat-elevation-z2\"\r\n      [class.mobile]=\"isMobile\"\r\n      [mode]=\"isMobile ? 'over' : 'side'\"\r\n      [opened]=\"drawerConfig.open\"\r\n      [autoFocus]=\"false\"\r\n      [fixedInViewport]=\"drawerConfig.fixed\"\r\n      [class.lf-drawer-show-header]=\"headerEnabled && drawerConfig.fixed\"\r\n      (closed)=\"drawerClosed()\"\r\n      #drawer>\r\n      <!-- drawer content -->\r\n      <!-- <ng-content select=\"[drawerContent]\"></ng-content> -->\r\n      @if (drawerPortal) {\r\n        <ng-template [cdkPortalOutlet]=\"drawerPortal\"></ng-template>\r\n      } @else {\r\n        <ng-content select=\"[drawerContent]\"></ng-content>\r\n      }\r\n    </mat-sidenav>\r\n    <mat-sidenav-content>\r\n      <!-- main content -->\r\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n    </mat-sidenav-content>\r\n  </mat-sidenav-container>\r\n} @else {\r\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n}\r\n\r\n<!-- render content without drawer -->\r\n\r\n<!-- this template is required to allow multiple <ng-content></ng-content> -->\r\n<ng-template #content><ng-content></ng-content></ng-template>\r\n", styles: [".lf-drawer-container{z-index:unset!important}.lf-drawer-container .lf-drawer{z-index:var(--drawer-z-index);width:var(--drawer-width)}.lf-drawer-container .lf-drawer.mobile{z-index:var(--loading-overlay-z-index)}.lf-drawer-container .lf-drawer.lf-drawer-show-header{top:var(--header-height)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i2$1.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i2$1.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "directive", type: i3$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DrawerComponent, isStandalone: false, selector: "lf-drawer", inputs: { libraryConfig: "libraryConfig", drawerConfig: "drawerConfig", isMobile: "isMobile", headerEnabled: "headerEnabled", drawerPortal: "drawerPortal" }, outputs: { drawerConfigUpdateEvent: "drawerConfigUpdateEvent" }, ngImport: i0, template: "@if (drawerConfig && drawerConfig.enable) {\r\n  <mat-sidenav-container\r\n    class=\"lf-drawer-container lf-transitions\"\r\n    [ngClass]=\"drawerConfig.cssClass\">\r\n    <!-- drawer -->\r\n    <mat-sidenav\r\n      class=\"lf-drawer mat-elevation-z2\"\r\n      [class.mobile]=\"isMobile\"\r\n      [mode]=\"isMobile ? 'over' : 'side'\"\r\n      [opened]=\"drawerConfig.open\"\r\n      [autoFocus]=\"false\"\r\n      [fixedInViewport]=\"drawerConfig.fixed\"\r\n      [class.lf-drawer-show-header]=\"headerEnabled && drawerConfig.fixed\"\r\n      (closed)=\"drawerClosed()\"\r\n      #drawer>\r\n      <!-- drawer content -->\r\n      <!-- <ng-content select=\"[drawerContent]\"></ng-content> -->\r\n      @if (drawerPortal) {\r\n        <ng-template [cdkPortalOutlet]=\"drawerPortal\"></ng-template>\r\n      } @else {\r\n        <ng-content select=\"[drawerContent]\"></ng-content>\r\n      }\r\n    </mat-sidenav>\r\n    <mat-sidenav-content style=\"overflow: unset !important\">\r\n      <!-- main content -->\r\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n    </mat-sidenav-content>\r\n  </mat-sidenav-container>\r\n} @else {\r\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n}\r\n\r\n<!-- render content without drawer -->\r\n\r\n<!-- this template is required to allow multiple <ng-content></ng-content> -->\r\n<ng-template #content><ng-content></ng-content></ng-template>\r\n", styles: [".lf-drawer-container{z-index:unset!important;overflow:unset!important}.lf-drawer-container .lf-drawer{z-index:var(--drawer-z-index);width:var(--drawer-width)}.lf-drawer-container .lf-drawer.mobile{z-index:var(--drawer-z-index-mobile)}.lf-drawer-container .lf-drawer.lf-drawer-show-header{top:var(--header-height)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i2$1.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i2$1.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "directive", type: i3$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DrawerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DrawerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lf-drawer', standalone: false, template: "@if (drawerConfig && drawerConfig.enable) {\r\n  <mat-sidenav-container\r\n    class=\"lf-drawer-container lf-transitions\"\r\n    [ngClass]=\"drawerConfig.cssClass\">\r\n    <!-- drawer -->\r\n    <mat-sidenav\r\n      class=\"lf-drawer mat-elevation-z2\"\r\n      [class.mobile]=\"isMobile\"\r\n      [mode]=\"isMobile ? 'over' : 'side'\"\r\n      [opened]=\"drawerConfig.open\"\r\n      [autoFocus]=\"false\"\r\n      [fixedInViewport]=\"drawerConfig.fixed\"\r\n      [class.lf-drawer-show-header]=\"headerEnabled && drawerConfig.fixed\"\r\n      (closed)=\"drawerClosed()\"\r\n      #drawer>\r\n      <!-- drawer content -->\r\n      <!-- <ng-content select=\"[drawerContent]\"></ng-content> -->\r\n      @if (drawerPortal) {\r\n        <ng-template [cdkPortalOutlet]=\"drawerPortal\"></ng-template>\r\n      } @else {\r\n        <ng-content select=\"[drawerContent]\"></ng-content>\r\n      }\r\n    </mat-sidenav>\r\n    <mat-sidenav-content>\r\n      <!-- main content -->\r\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n    </mat-sidenav-content>\r\n  </mat-sidenav-container>\r\n} @else {\r\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n}\r\n\r\n<!-- render content without drawer -->\r\n\r\n<!-- this template is required to allow multiple <ng-content></ng-content> -->\r\n<ng-template #content><ng-content></ng-content></ng-template>\r\n", styles: [".lf-drawer-container{z-index:unset!important}.lf-drawer-container .lf-drawer{z-index:var(--drawer-z-index);width:var(--drawer-width)}.lf-drawer-container .lf-drawer.mobile{z-index:var(--loading-overlay-z-index)}.lf-drawer-container .lf-drawer.lf-drawer-show-header{top:var(--header-height)!important}\n"] }]
+            args: [{ selector: 'lf-drawer', standalone: false, template: "@if (drawerConfig && drawerConfig.enable) {\r\n  <mat-sidenav-container\r\n    class=\"lf-drawer-container lf-transitions\"\r\n    [ngClass]=\"drawerConfig.cssClass\">\r\n    <!-- drawer -->\r\n    <mat-sidenav\r\n      class=\"lf-drawer mat-elevation-z2\"\r\n      [class.mobile]=\"isMobile\"\r\n      [mode]=\"isMobile ? 'over' : 'side'\"\r\n      [opened]=\"drawerConfig.open\"\r\n      [autoFocus]=\"false\"\r\n      [fixedInViewport]=\"drawerConfig.fixed\"\r\n      [class.lf-drawer-show-header]=\"headerEnabled && drawerConfig.fixed\"\r\n      (closed)=\"drawerClosed()\"\r\n      #drawer>\r\n      <!-- drawer content -->\r\n      <!-- <ng-content select=\"[drawerContent]\"></ng-content> -->\r\n      @if (drawerPortal) {\r\n        <ng-template [cdkPortalOutlet]=\"drawerPortal\"></ng-template>\r\n      } @else {\r\n        <ng-content select=\"[drawerContent]\"></ng-content>\r\n      }\r\n    </mat-sidenav>\r\n    <mat-sidenav-content style=\"overflow: unset !important\">\r\n      <!-- main content -->\r\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n    </mat-sidenav-content>\r\n  </mat-sidenav-container>\r\n} @else {\r\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n}\r\n\r\n<!-- render content without drawer -->\r\n\r\n<!-- this template is required to allow multiple <ng-content></ng-content> -->\r\n<ng-template #content><ng-content></ng-content></ng-template>\r\n", styles: [".lf-drawer-container{z-index:unset!important;overflow:unset!important}.lf-drawer-container .lf-drawer{z-index:var(--drawer-z-index);width:var(--drawer-width)}.lf-drawer-container .lf-drawer.mobile{z-index:var(--drawer-z-index-mobile)}.lf-drawer-container .lf-drawer.lf-drawer-show-header{top:var(--header-height)!important}\n"] }]
         }], propDecorators: { libraryConfig: [{
                 type: Input
             }], drawerConfig: [{
@@ -319,7 +183,6 @@ class FloatingButtonComponent {
     ngOnInit() {
         if (this.floatingButtonConfig) {
             const updatedFloatingButtonConfigConfig = {
-                ...this.floatingButtonConfig,
                 matIcon: (!this.floatingButtonConfig.matIcon && !this.floatingButtonConfig.svgIcon) ? 'arrow_upward' : this.floatingButtonConfig.matIcon || this.floatingButtonConfig.svgIcon,
                 horizontalPosition: this.floatingButtonConfig.horizontalPosition ?? 'right'
             };
@@ -331,12 +194,12 @@ class FloatingButtonComponent {
     buttonClicked(id) {
         this.floatingButtonClickEvent.emit(id);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FloatingButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: FloatingButtonComponent, isStandalone: false, selector: "lf-floating-button", inputs: { libraryConfig: "libraryConfig", floatingButtonConfig: "floatingButtonConfig", onTop: "onTop", isMobile: "isMobile", bottomBarEnabled: "bottomBarEnabled" }, outputs: { floatingButtonConfigUpdateEvent: "floatingButtonConfigUpdateEvent", floatingButtonClickEvent: "floatingButtonClickEvent" }, ngImport: i0, template: "@if (\r\n  floatingButtonConfig && floatingButtonConfig.enable && (!floatingButtonConfig.autoHide || !onTop)\r\n) {\r\n  <button\r\n    mat-fab\r\n    color=\"accent\"\r\n    class=\"lf-floating-button lf-transitions\"\r\n    [ngClass]=\"floatingButtonConfig.cssClass\"\r\n    [ngClass]=\"floatingButtonConfig.horizontalPosition\"\r\n    [class.show-navbar]=\"isMobile && !bottomBarEnabled\"\r\n    [class.show-bottom-bar]=\"bottomBarEnabled && !isMobile\"\r\n    [class.show-navbar-and-bottom-bar]=\"isMobile && bottomBarEnabled\"\r\n    [extended]=\"!!floatingButtonConfig.label\"\r\n    (click)=\"buttonClicked(floatingButtonConfig.id)\"\r\n    [matTooltip]=\"floatingButtonConfig.tooltip!\">\r\n    <!-- mat icon -->\r\n    @if (floatingButtonConfig.matIcon) {\r\n      <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n        {{ floatingButtonConfig.matIcon }}\r\n      </mat-icon>\r\n    } @else if (floatingButtonConfig.svgIcon) {\r\n      <mat-icon [svgIcon]=\"floatingButtonConfig.svgIcon!\"></mat-icon>\r\n    }\r\n    <!-- svg icon -->\r\n    <!-- label -->\r\n    @if (floatingButtonConfig.label) {\r\n      <span class=\"lf-floating-button-label\">\r\n        {{ floatingButtonConfig.label }}\r\n      </span>\r\n    }\r\n  </button>\r\n}\r\n", styles: [".lf-floating-button{z-index:var(--floating-button-z-index);position:fixed;bottom:var(--floating-button-bottom)}.lf-floating-button.show-navbar{bottom:calc(var(--floating-button-bottom) + var(--navbar-height-mobile))}.lf-floating-button.show-bottom-bar{bottom:calc(var(--floating-button-bottom) + var(--bottom-bar-height))}.lf-floating-button.show-navbar-and-bottom-bar{bottom:calc(var(--floating-button-bottom) + var(--navbar-height-mobile) + var(--bottom-bar-height))}.lf-floating-button.left{left:var(--floating-button-right)}.lf-floating-button.center{left:50%;transform:translate(-50%)}.lf-floating-button.right{right:var(--floating-button-right)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: FloatingButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: FloatingButtonComponent, isStandalone: false, selector: "lf-floating-button", inputs: { libraryConfig: "libraryConfig", floatingButtonConfig: "floatingButtonConfig", onTop: "onTop", isMobile: "isMobile", bottomBarEnabled: "bottomBarEnabled" }, outputs: { floatingButtonConfigUpdateEvent: "floatingButtonConfigUpdateEvent", floatingButtonClickEvent: "floatingButtonClickEvent" }, ngImport: i0, template: "@if (\r\n  floatingButtonConfig && floatingButtonConfig.enable && (!floatingButtonConfig.autoHide || !onTop)\r\n) {\r\n  <button\r\n    mat-fab\r\n    color=\"accent\"\r\n    class=\"lf-floating-button lf-transitions\"\r\n    [ngClass]=\"floatingButtonConfig.cssClass\"\r\n    [ngClass]=\"floatingButtonConfig.horizontalPosition\"\r\n    [class.sticky]=\"floatingButtonConfig.sticky\"\r\n    [class.show-navbar]=\"isMobile && !bottomBarEnabled\"\r\n    [class.show-bottom-bar]=\"bottomBarEnabled && !isMobile\"\r\n    [class.show-navbar-and-bottom-bar]=\"isMobile && bottomBarEnabled\"\r\n    [extended]=\"!!floatingButtonConfig.label\"\r\n    (click)=\"buttonClicked(floatingButtonConfig.id)\"\r\n    [matTooltip]=\"floatingButtonConfig.tooltip!\">\r\n    <!-- icon -->\r\n    @if (floatingButtonConfig.matIcon) {\r\n      <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n        {{ floatingButtonConfig.matIcon }}\r\n      </mat-icon>\r\n    } @else if (floatingButtonConfig.svgIcon) {\r\n      <mat-icon [svgIcon]=\"floatingButtonConfig.svgIcon\"></mat-icon>\r\n    }\r\n    <!-- svg icon -->\r\n    <!-- label -->\r\n    @if (floatingButtonConfig.label) {\r\n      <span class=\"lf-floating-button-label\">\r\n        {{ floatingButtonConfig.label }}\r\n      </span>\r\n    }\r\n  </button>\r\n}\r\n", styles: [".lf-floating-button{z-index:var(--floating-button-z-index);position:fixed;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.right{left:100%}.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:50%;transform:translate(-50%)}.lf-floating-button:not(.sticky).right{left:calc(100% - var(--floating-button-right));transform:translate(-100%)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FloatingButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: FloatingButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lf-floating-button', standalone: false, template: "@if (\r\n  floatingButtonConfig && floatingButtonConfig.enable && (!floatingButtonConfig.autoHide || !onTop)\r\n) {\r\n  <button\r\n    mat-fab\r\n    color=\"accent\"\r\n    class=\"lf-floating-button lf-transitions\"\r\n    [ngClass]=\"floatingButtonConfig.cssClass\"\r\n    [ngClass]=\"floatingButtonConfig.horizontalPosition\"\r\n    [class.show-navbar]=\"isMobile && !bottomBarEnabled\"\r\n    [class.show-bottom-bar]=\"bottomBarEnabled && !isMobile\"\r\n    [class.show-navbar-and-bottom-bar]=\"isMobile && bottomBarEnabled\"\r\n    [extended]=\"!!floatingButtonConfig.label\"\r\n    (click)=\"buttonClicked(floatingButtonConfig.id)\"\r\n    [matTooltip]=\"floatingButtonConfig.tooltip!\">\r\n    <!-- mat icon -->\r\n    @if (floatingButtonConfig.matIcon) {\r\n      <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n        {{ floatingButtonConfig.matIcon }}\r\n      </mat-icon>\r\n    } @else if (floatingButtonConfig.svgIcon) {\r\n      <mat-icon [svgIcon]=\"floatingButtonConfig.svgIcon!\"></mat-icon>\r\n    }\r\n    <!-- svg icon -->\r\n    <!-- label -->\r\n    @if (floatingButtonConfig.label) {\r\n      <span class=\"lf-floating-button-label\">\r\n        {{ floatingButtonConfig.label }}\r\n      </span>\r\n    }\r\n  </button>\r\n}\r\n", styles: [".lf-floating-button{z-index:var(--floating-button-z-index);position:fixed;bottom:var(--floating-button-bottom)}.lf-floating-button.show-navbar{bottom:calc(var(--floating-button-bottom) + var(--navbar-height-mobile))}.lf-floating-button.show-bottom-bar{bottom:calc(var(--floating-button-bottom) + var(--bottom-bar-height))}.lf-floating-button.show-navbar-and-bottom-bar{bottom:calc(var(--floating-button-bottom) + var(--navbar-height-mobile) + var(--bottom-bar-height))}.lf-floating-button.left{left:var(--floating-button-right)}.lf-floating-button.center{left:50%;transform:translate(-50%)}.lf-floating-button.right{right:var(--floating-button-right)}\n"] }]
+            args: [{ selector: 'lf-floating-button', standalone: false, template: "@if (\r\n  floatingButtonConfig && floatingButtonConfig.enable && (!floatingButtonConfig.autoHide || !onTop)\r\n) {\r\n  <button\r\n    mat-fab\r\n    color=\"accent\"\r\n    class=\"lf-floating-button lf-transitions\"\r\n    [ngClass]=\"floatingButtonConfig.cssClass\"\r\n    [ngClass]=\"floatingButtonConfig.horizontalPosition\"\r\n    [class.sticky]=\"floatingButtonConfig.sticky\"\r\n    [class.show-navbar]=\"isMobile && !bottomBarEnabled\"\r\n    [class.show-bottom-bar]=\"bottomBarEnabled && !isMobile\"\r\n    [class.show-navbar-and-bottom-bar]=\"isMobile && bottomBarEnabled\"\r\n    [extended]=\"!!floatingButtonConfig.label\"\r\n    (click)=\"buttonClicked(floatingButtonConfig.id)\"\r\n    [matTooltip]=\"floatingButtonConfig.tooltip!\">\r\n    <!-- icon -->\r\n    @if (floatingButtonConfig.matIcon) {\r\n      <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n        {{ floatingButtonConfig.matIcon }}\r\n      </mat-icon>\r\n    } @else if (floatingButtonConfig.svgIcon) {\r\n      <mat-icon [svgIcon]=\"floatingButtonConfig.svgIcon\"></mat-icon>\r\n    }\r\n    <!-- svg icon -->\r\n    <!-- label -->\r\n    @if (floatingButtonConfig.label) {\r\n      <span class=\"lf-floating-button-label\">\r\n        {{ floatingButtonConfig.label }}\r\n      </span>\r\n    }\r\n  </button>\r\n}\r\n", styles: [".lf-floating-button{z-index:var(--floating-button-z-index);position:fixed;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.right{left:100%}.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:50%;transform:translate(-50%)}.lf-floating-button:not(.sticky).right{left:calc(100% - var(--floating-button-right));transform:translate(-100%)}\n"] }]
         }], propDecorators: { libraryConfig: [{
                 type: Input
             }], floatingButtonConfig: [{
@@ -358,10 +221,10 @@ class FooterComponent {
         this.libraryConfig = null;
         this.footerConfig = null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: FooterComponent, isStandalone: false, selector: "lf-footer", inputs: { libraryConfig: "libraryConfig", footerConfig: "footerConfig" }, ngImport: i0, template: "@if (footerConfig && footerConfig.enable) {\r\n  <mat-card class=\"lf-footer lf-transitions mat-elevation-z2 p-4\" [ngClass]=\"footerConfig.cssClass\">\r\n    <!-- svg logo -->\r\n    @if (footerConfig.svgLogo) {\r\n      <mat-icon\r\n        class=\"lf-footer-logo mb-4\"\r\n        color=\"primary\"\r\n        [svgIcon]=\"footerConfig.svgLogo!\"></mat-icon>\r\n    } @else {\r\n      @if (footerConfig.imgLogo) {\r\n        <img class=\"lf-footer-logo mb-4\" [src]=\"footerConfig.imgLogo\" alt=\"Logo\" />\r\n      }\r\n    }\r\n    <!-- img logo -->\r\n    <!-- links -->\r\n    @if (footerConfig.links) {\r\n      <div class=\"lf-footer-links mb-4\">\r\n        @for (link of footerConfig.links; track $index; let i = $index) {\r\n          <div class=\"lf-footer-link\" [class.mr-2]=\"i < footerConfig.links!.length - 1\">\r\n            @if (link.routerLink) {\r\n              <a [routerLink]=\"[link.routerLink]\">{{ link.label || \"\" }}</a>\r\n            } @else {\r\n              <a [href]=\"link.href\" [target]=\"link.externalTab ? '_blank' : null\">\r\n                {{ link.label }}\r\n              </a>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n    <!-- copyright -->\r\n    @if (footerConfig.copyright) {\r\n      <span class=\"lf-footer-copyright\">\r\n        {{ footerConfig.copyright }}\r\n      </span>\r\n    }\r\n  </mat-card>\r\n}\r\n", styles: [".lf-footer{overflow:hidden;flex-flow:column;align-items:center;justify-content:center;min-height:var(--footer-height);border-radius:0;border-top:solid 1px rgba(0,0,0,.12)}.lf-footer .lf-footer-logo{width:var(--footer-logo-size);height:var(--footer-logo-size)}.lf-footer .lf-footer-links{display:flex;flex-flow:row wrap;align-items:center;justify-content:center}.lf-footer .lf-footer-links .lf-footer-link a{text-decoration:none;color:unset;font-size:var(--footer-font-size)}.lf-footer .lf-footer-links .lf-footer-link a:hover{color:var(--color-primary)}.lf-footer .lf-footer-copyright{font-size:var(--footer-font-size)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: FooterComponent, isStandalone: false, selector: "lf-footer", inputs: { libraryConfig: "libraryConfig", footerConfig: "footerConfig" }, ngImport: i0, template: "@if (footerConfig && footerConfig.enable) {\r\n  <mat-card class=\"lf-footer lf-transitions mat-elevation-z2 p-4\" [ngClass]=\"footerConfig.cssClass\">\r\n    <!-- svg logo -->\r\n    @if (footerConfig.svgLogo) {\r\n      <mat-icon\r\n        class=\"lf-footer-logo mb-4\"\r\n        color=\"primary\"\r\n        [svgIcon]=\"footerConfig.svgLogo!\"></mat-icon>\r\n    } @else {\r\n      @if (footerConfig.imgLogo) {\r\n        <img class=\"lf-footer-logo mb-4\" [src]=\"footerConfig.imgLogo\" alt=\"Logo\" />\r\n      }\r\n    }\r\n    <!-- img logo -->\r\n    <!-- links -->\r\n    @if (footerConfig.links) {\r\n      <div class=\"lf-footer-links mb-4\">\r\n        @for (link of footerConfig.links; track $index; let i = $index) {\r\n          <div class=\"lf-footer-link\" [class.mr-2]=\"i < footerConfig.links!.length - 1\">\r\n            @if (link.routerLink) {\r\n              <a [routerLink]=\"[link.routerLink]\">{{ link.label || \"\" }}</a>\r\n            } @else {\r\n              <a [href]=\"link.href\" [target]=\"link.externalTab ? '_blank' : null\">\r\n                {{ link.label }}\r\n              </a>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n    <!-- copyright -->\r\n    @if (footerConfig.copyright) {\r\n      <span class=\"lf-footer-copyright\">\r\n        {{ footerConfig.copyright }}\r\n      </span>\r\n    }\r\n  </mat-card>\r\n}\r\n", styles: [".lf-footer{overflow:hidden;flex-flow:column;align-items:center;justify-content:center;min-height:var(--footer-height);border-radius:0;border-top:solid 1px rgba(0,0,0,.12)}.lf-footer .lf-footer-logo{width:var(--footer-logo-size);height:var(--footer-logo-size)}.lf-footer .lf-footer-links{display:flex;flex-flow:row wrap;align-items:center;justify-content:center}.lf-footer .lf-footer-links .lf-footer-link a{text-decoration:none;color:unset;font-size:var(--footer-font-size)}.lf-footer .lf-footer-links .lf-footer-link a:hover{color:var(--color-primary)}.lf-footer .lf-footer-copyright{font-size:var(--footer-font-size)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: FooterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lf-footer', standalone: false, template: "@if (footerConfig && footerConfig.enable) {\r\n  <mat-card class=\"lf-footer lf-transitions mat-elevation-z2 p-4\" [ngClass]=\"footerConfig.cssClass\">\r\n    <!-- svg logo -->\r\n    @if (footerConfig.svgLogo) {\r\n      <mat-icon\r\n        class=\"lf-footer-logo mb-4\"\r\n        color=\"primary\"\r\n        [svgIcon]=\"footerConfig.svgLogo!\"></mat-icon>\r\n    } @else {\r\n      @if (footerConfig.imgLogo) {\r\n        <img class=\"lf-footer-logo mb-4\" [src]=\"footerConfig.imgLogo\" alt=\"Logo\" />\r\n      }\r\n    }\r\n    <!-- img logo -->\r\n    <!-- links -->\r\n    @if (footerConfig.links) {\r\n      <div class=\"lf-footer-links mb-4\">\r\n        @for (link of footerConfig.links; track $index; let i = $index) {\r\n          <div class=\"lf-footer-link\" [class.mr-2]=\"i < footerConfig.links!.length - 1\">\r\n            @if (link.routerLink) {\r\n              <a [routerLink]=\"[link.routerLink]\">{{ link.label || \"\" }}</a>\r\n            } @else {\r\n              <a [href]=\"link.href\" [target]=\"link.externalTab ? '_blank' : null\">\r\n                {{ link.label }}\r\n              </a>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n    <!-- copyright -->\r\n    @if (footerConfig.copyright) {\r\n      <span class=\"lf-footer-copyright\">\r\n        {{ footerConfig.copyright }}\r\n      </span>\r\n    }\r\n  </mat-card>\r\n}\r\n", styles: [".lf-footer{overflow:hidden;flex-flow:column;align-items:center;justify-content:center;min-height:var(--footer-height);border-radius:0;border-top:solid 1px rgba(0,0,0,.12)}.lf-footer .lf-footer-logo{width:var(--footer-logo-size);height:var(--footer-logo-size)}.lf-footer .lf-footer-links{display:flex;flex-flow:row wrap;align-items:center;justify-content:center}.lf-footer .lf-footer-links .lf-footer-link a{text-decoration:none;color:unset;font-size:var(--footer-font-size)}.lf-footer .lf-footer-links .lf-footer-link a:hover{color:var(--color-primary)}.lf-footer .lf-footer-copyright{font-size:var(--footer-font-size)}\n"] }]
         }], propDecorators: { libraryConfig: [{
@@ -370,6 +233,118 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                 type: Input
             }] } });
 
+class MaterialModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.1", ngImport: i0, type: MaterialModule, exports: [MatCheckboxModule,
+            MatButtonModule,
+            MatInputModule,
+            MatAutocompleteModule,
+            MatFormFieldModule,
+            MatSelectModule,
+            MatSliderModule,
+            MatSlideToggleModule,
+            MatMenuModule,
+            MatSidenavModule,
+            MatToolbarModule,
+            MatListModule,
+            MatCardModule,
+            MatExpansionModule,
+            MatIconModule,
+            MatProgressSpinnerModule,
+            MatProgressBarModule,
+            MatDialogModule,
+            MatTooltipModule,
+            MatSnackBarModule,
+            MatRippleModule,
+            PortalModule,
+            DragDropModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MaterialModule, imports: [MatCheckboxModule,
+            MatButtonModule,
+            MatInputModule,
+            MatAutocompleteModule,
+            MatFormFieldModule,
+            MatSelectModule,
+            MatSliderModule,
+            MatSlideToggleModule,
+            MatMenuModule,
+            MatSidenavModule,
+            MatToolbarModule,
+            MatListModule,
+            MatCardModule,
+            MatExpansionModule,
+            MatIconModule,
+            MatProgressSpinnerModule,
+            MatProgressBarModule,
+            MatDialogModule,
+            MatTooltipModule,
+            MatSnackBarModule,
+            MatRippleModule,
+            PortalModule,
+            DragDropModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MaterialModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    exports: [
+                        MatCheckboxModule,
+                        MatButtonModule,
+                        MatInputModule,
+                        MatAutocompleteModule,
+                        MatFormFieldModule,
+                        MatSelectModule,
+                        MatSliderModule,
+                        MatSlideToggleModule,
+                        MatMenuModule,
+                        MatSidenavModule,
+                        MatToolbarModule,
+                        MatListModule,
+                        MatCardModule,
+                        MatExpansionModule,
+                        MatIconModule,
+                        MatProgressSpinnerModule,
+                        MatProgressBarModule,
+                        MatDialogModule,
+                        MatTooltipModule,
+                        MatSnackBarModule,
+                        MatRippleModule,
+                        PortalModule,
+                        DragDropModule
+                    ],
+                    providers: [],
+                    bootstrap: []
+                }]
+        }] });
+
+class SharedModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.1", ngImport: i0, type: SharedModule, imports: [CommonModule,
+            FormsModule,
+            MaterialModule], exports: [CommonModule,
+            FormsModule,
+            MaterialModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SharedModule, imports: [CommonModule,
+            FormsModule,
+            MaterialModule, CommonModule,
+            FormsModule,
+            MaterialModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SharedModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        MaterialModule
+                    ],
+                    exports: [
+                        CommonModule,
+                        FormsModule,
+                        MaterialModule
+                    ]
+                }]
+        }] });
+
 class InputComponent {
     constructor() {
         this.dialogRef = inject(MatDialogRef, { optional: true });
@@ -417,10 +392,10 @@ class InputComponent {
         this.inputValue = '';
         this.inputChangeEvent.emit(this.inputValue);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: InputComponent, isStandalone: true, selector: "lf-input", inputs: { inputConfig: "inputConfig", isMobile: "isMobile" }, outputs: { inputSubmitEvent: "inputSubmitEvent", inputChangeEvent: "inputChangeEvent", inputPrefixActionEvent: "inputPrefixActionEvent" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "@if (inputConfig) {\r\n  <mat-form-field class=\"lf-input\" appearance=\"fill\" [class.lf-hide-hint]=\"!inputConfig.hint\">\r\n    <mat-label>{{ inputConfig.label || \"Search\" }}</mat-label>\r\n    @if (inputConfig.hint) {\r\n      <mat-hint>{{ inputConfig.hint }}</mat-hint>\r\n    }\r\n    <input\r\n      matInput\r\n      type=\"text\"\r\n      [(ngModel)]=\"inputValue\"\r\n      [disabled]=\"inputConfig.disabled!\"\r\n      (keyup.enter)=\"inputSubmitted(inputValue)\"\r\n      (ngModelChange)=\"inputChanged($event)\"\r\n      #input />\r\n    @if (isMobile) {\r\n      <button mat-icon-button matPrefix color=\"accent\" (click)=\"inputPrefixAction()\">\r\n        <mat-icon>arrow_back</mat-icon>\r\n      </button>\r\n    }\r\n    @if (inputValue) {\r\n      <button class=\"lf-input-close-button\" mat-icon-button matSuffix (click)=\"clearInput()\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    }\r\n    @if (inputConfig.matIconSubmit) {\r\n      <button\r\n        mat-icon-button\r\n        matSuffix\r\n        color=\"accent\"\r\n        type=\"submit\"\r\n        (click)=\"inputSubmitted(inputValue)\">\r\n        <mat-icon>\r\n          {{ inputConfig.matIconSubmit }}\r\n        </mat-icon>\r\n      </button>\r\n    }\r\n  </mat-form-field>\r\n}\r\n", styles: [".lf-input{width:100%}.lf-input ::ng-deep .mdc-text-field{border-radius:var(--header-input-border-radius)!important}.lf-input ::ng-deep .mdc-line-ripple:after{border-bottom-width:0!important}.lf-input ::ng-deep .mdc-line-ripple:before{border-bottom-width:0!important}.lf-input .lf-input-close-button{color:var(--color-gray)}.lf-input.lf-hide-hint ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i3$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: InputComponent, isStandalone: true, selector: "lf-input", inputs: { inputConfig: "inputConfig", isMobile: "isMobile" }, outputs: { inputSubmitEvent: "inputSubmitEvent", inputChangeEvent: "inputChangeEvent", inputPrefixActionEvent: "inputPrefixActionEvent" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "@if (inputConfig) {\r\n  <mat-form-field class=\"lf-input\" appearance=\"fill\" [class.lf-hide-hint]=\"!inputConfig.hint\">\r\n    <mat-label>{{ inputConfig.label || \"Search\" }}</mat-label>\r\n    @if (inputConfig.hint) {\r\n      <mat-hint>{{ inputConfig.hint }}</mat-hint>\r\n    }\r\n    <input\r\n      matInput\r\n      type=\"text\"\r\n      [(ngModel)]=\"inputValue\"\r\n      [disabled]=\"inputConfig.disabled!\"\r\n      (keyup.enter)=\"inputSubmitted(inputValue)\"\r\n      (ngModelChange)=\"inputChanged($event)\"\r\n      #input />\r\n    @if (isMobile) {\r\n      <button mat-icon-button matPrefix color=\"accent\" (click)=\"inputPrefixAction()\">\r\n        <mat-icon>arrow_back</mat-icon>\r\n      </button>\r\n    }\r\n    @if (inputValue) {\r\n      <button class=\"lf-input-close-button\" mat-icon-button matSuffix (click)=\"clearInput()\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    }\r\n    @if (inputConfig.matIconSubmit) {\r\n      <button\r\n        mat-icon-button\r\n        matSuffix\r\n        color=\"accent\"\r\n        type=\"submit\"\r\n        (click)=\"inputSubmitted(inputValue)\">\r\n        <mat-icon>\r\n          {{ inputConfig.matIconSubmit }}\r\n        </mat-icon>\r\n      </button>\r\n    }\r\n  </mat-form-field>\r\n}\r\n", styles: [".lf-input{width:100%}.lf-input ::ng-deep .mdc-text-field{border-radius:var(--header-input-border-radius)!important}.lf-input ::ng-deep .mdc-line-ripple:after{border-bottom-width:0!important}.lf-input ::ng-deep .mdc-line-ripple:before{border-bottom-width:0!important}.lf-input .lf-input-close-button{color:var(--color-gray)}.lf-input.lf-hide-hint ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i3$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: InputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lf-input', standalone: true, imports: [SharedModule], template: "@if (inputConfig) {\r\n  <mat-form-field class=\"lf-input\" appearance=\"fill\" [class.lf-hide-hint]=\"!inputConfig.hint\">\r\n    <mat-label>{{ inputConfig.label || \"Search\" }}</mat-label>\r\n    @if (inputConfig.hint) {\r\n      <mat-hint>{{ inputConfig.hint }}</mat-hint>\r\n    }\r\n    <input\r\n      matInput\r\n      type=\"text\"\r\n      [(ngModel)]=\"inputValue\"\r\n      [disabled]=\"inputConfig.disabled!\"\r\n      (keyup.enter)=\"inputSubmitted(inputValue)\"\r\n      (ngModelChange)=\"inputChanged($event)\"\r\n      #input />\r\n    @if (isMobile) {\r\n      <button mat-icon-button matPrefix color=\"accent\" (click)=\"inputPrefixAction()\">\r\n        <mat-icon>arrow_back</mat-icon>\r\n      </button>\r\n    }\r\n    @if (inputValue) {\r\n      <button class=\"lf-input-close-button\" mat-icon-button matSuffix (click)=\"clearInput()\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    }\r\n    @if (inputConfig.matIconSubmit) {\r\n      <button\r\n        mat-icon-button\r\n        matSuffix\r\n        color=\"accent\"\r\n        type=\"submit\"\r\n        (click)=\"inputSubmitted(inputValue)\">\r\n        <mat-icon>\r\n          {{ inputConfig.matIconSubmit }}\r\n        </mat-icon>\r\n      </button>\r\n    }\r\n  </mat-form-field>\r\n}\r\n", styles: [".lf-input{width:100%}.lf-input ::ng-deep .mdc-text-field{border-radius:var(--header-input-border-radius)!important}.lf-input ::ng-deep .mdc-line-ripple:after{border-bottom-width:0!important}.lf-input ::ng-deep .mdc-line-ripple:before{border-bottom-width:0!important}.lf-input .lf-input-close-button{color:var(--color-gray)}.lf-input.lf-hide-hint ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}\n"] }]
         }], propDecorators: { input: [{
@@ -449,13 +424,6 @@ class HeaderComponent {
         this.headerInputSubmitEvent = new EventEmitter();
         this.headerInputChangeEvent = new EventEmitter();
     }
-    ngOnInit() {
-        // Avoid initializing the header with an open input field on mobile
-        if (this.isMobile && this.headerConfig?.inputConfig?.enable) {
-            const updatedHeaderConfig = { ...this.headerConfig, inputConfig: { ...this.headerConfig?.inputConfig, enable: false } };
-            this.headerConfigUpdateEvent.emit(updatedHeaderConfig);
-        }
-    }
     buttonClicked(id) {
         if (!id) {
             return;
@@ -469,8 +437,7 @@ class HeaderComponent {
         this.headerInputChangeEvent.emit(value);
     }
     inputClosed() {
-        const updatedHeaderConfig = { ...this.headerConfig, inputConfig: { ...this.headerConfig?.inputConfig, enable: false } };
-        this.headerConfigUpdateEvent.emit(updatedHeaderConfig);
+        this.headerConfigUpdateEvent.emit({ inputConfig: { enable: false } });
     }
     isActive(id) {
         if (!id || !this.currentRoute) {
@@ -489,7 +456,9 @@ class HeaderComponent {
         const includedButtons = rightMenuButtons.filter((button) => !config?.excludeButtonIds?.includes(button.id));
         return {
             id: '',
-            matIcon: ' more_vert',
+            matIcon: (!config.matIcon && !config.svgIcon && !config.label) ? 'more_vert' : config.matIcon,
+            svgIcon: config.svgIcon,
+            label: config.label,
             menuButtons: [...includedButtons]
         };
     }
@@ -503,8 +472,8 @@ class HeaderComponent {
         const excludedButtons = rightMenuButtons.filter((button) => config?.excludeButtonIds?.includes(button.id));
         return excludedButtons;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: HeaderComponent, isStandalone: false, selector: "lf-header", inputs: { libraryConfig: "libraryConfig", headerConfig: "headerConfig", isMobile: "isMobile", routeLoading: "routeLoading", currentRoute: "currentRoute" }, outputs: { headerConfigUpdateEvent: "headerConfigUpdateEvent", headerButtonClickEvent: "headerButtonClickEvent", headerInputSubmitEvent: "headerInputSubmitEvent", headerInputChangeEvent: "headerInputChangeEvent" }, ngImport: i0, template: "@if (headerConfig && headerConfig.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]=\"headerConfig.cssClass\"\r\n    [class.lf-gradient]=\"headerConfig.gradient\"\r\n    color=\"primary\">\r\n    <!-- left menu button -->\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n      [ngTemplateOutletContext]=\"{\r\n        menuButton: headerConfig.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]=\"headerConfig.leftMenuButton && !isMobile\">\r\n      <!-- link wrapper -->\r\n      <div\r\n        class=\"lf-header-logo-title-wrapper-link\"\r\n        [class.lf-clickable]=\"headerConfig.titleRouterLink\"\r\n        [routerLink]=\"headerConfig.titleRouterLink ? [headerConfig.titleRouterLink] : null\">\r\n        <!-- svg logo -->\r\n        @if (headerConfig.svgLogo) {\r\n          <mat-icon\r\n            class=\"lf-header-logo\"\r\n            [class.mr-3]=\"headerConfig.title\"\r\n            [svgIcon]=\"headerConfig.svgLogo!\"></mat-icon>\r\n        } @else {\r\n          @if (headerConfig.imgLogo) {\r\n            <img\r\n              class=\"lf-header-logo\"\r\n              [class.mr-3]=\"headerConfig.title\"\r\n              [src]=\"headerConfig.imgLogo\"\r\n              alt=\"Logo\" />\r\n          }\r\n        }\r\n        <!-- img logo -->\r\n        <!-- title -->\r\n        @if (headerConfig.title) {\r\n          <div class=\"lf-header-title-wrapper\">\r\n            @if (headerConfig.title) {\r\n              <span class=\"lf-header-title\">\r\n                {{ headerConfig.title }}\r\n              </span>\r\n            }\r\n            @if (headerConfig.subtitle) {\r\n              <span class=\"lf-header-subtitle\">\r\n                {{ headerConfig.subtitle }}\r\n              </span>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n    <!-- input -->\r\n    @if (headerConfig.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]=\"headerConfig.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 (headerConfig.responsiveConfig?.enable && isMobile) {\r\n      @let exludedButtons = getRightExcludedButtons();\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 = getRightMobileButton();\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 headerConfig.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 (headerConfig.loading || (headerConfig.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<!-- header menu button -->\r\n<ng-template #menuButtonTemplate let-menuButton=\"menuButton\" let-hideLabel=\"hideLabel\">\r\n  @if (menuButton) {\r\n    <!-- icon button -->\r\n    @if ((menuButton.matIcon || menuButton.svgIcon) && (!menuButton.label || hideLabel)) {\r\n      <button\r\n        mat-icon-button\r\n        class=\"lf-header-menu-button\"\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        [attr.aria-label]=\"menuButton.id\">\r\n        <!-- icon -->\r\n        <lf-icon [matIcon]=\"menuButton.matIcon\" [svgIcon]=\"menuButton.svgIcon\"></lf-icon>\r\n      </button>\r\n    } @else {\r\n      @if (!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)\"\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          <!-- label -->\r\n          {{ menuButton.label }}\r\n        </button>\r\n      }\r\n    }\r\n    <!-- text button -->\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            (click)=\"buttonClicked(button.id)\">\r\n            <!-- icon -->\r\n            <lf-icon\r\n              [matIcon]=\"button.matIcon\"\r\n              [svgIcon]=\"button.svgIcon\"\r\n              verticalAlign=\"bottom\"></lf-icon>\r\n            <!-- label -->\r\n            @if (button.label) {\r\n              <span>{{ button.label }}</span>\r\n            }\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              (click)=\"buttonClicked(button.id)\"\r\n              [matTooltip]=\"button.tooltip\"\r\n              tabindex=\"0\">\r\n              <!-- icon -->\r\n              <lf-icon\r\n                [matIcon]=\"button.matIcon\"\r\n                [svgIcon]=\"button.svgIcon\"\r\n                verticalAlign=\"top\"></lf-icon>\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-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}.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: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i2.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: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$2.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: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: InputComponent, selector: "lf-input", inputs: ["inputConfig", "isMobile"], outputs: ["inputSubmitEvent", "inputChangeEvent", "inputPrefixActionEvent"] }, { kind: "component", type: IconComponent, selector: "lf-icon", inputs: ["matIcon", "svgIcon", "verticalAlign"] }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: HeaderComponent, isStandalone: false, selector: "lf-header", inputs: { libraryConfig: "libraryConfig", headerConfig: "headerConfig", isMobile: "isMobile", routeLoading: "routeLoading", currentRoute: "currentRoute" }, outputs: { headerConfigUpdateEvent: "headerConfigUpdateEvent", headerButtonClickEvent: "headerButtonClickEvent", headerInputSubmitEvent: "headerInputSubmitEvent", headerInputChangeEvent: "headerInputChangeEvent" }, ngImport: i0, template: "@if (headerConfig && headerConfig.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]=\"headerConfig.cssClass\"\r\n    [class.lf-gradient]=\"headerConfig.gradient\"\r\n    color=\"primary\">\r\n    <!-- left menu button -->\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n      [ngTemplateOutletContext]=\"{\r\n        menuButton: headerConfig.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]=\"headerConfig.leftMenuButton && !isMobile\">\r\n      <!-- link wrapper -->\r\n      <div\r\n        class=\"lf-header-logo-title-wrapper-link\"\r\n        [class.lf-clickable]=\"headerConfig.titleRouterLink\"\r\n        [routerLink]=\"headerConfig.titleRouterLink ? [headerConfig.titleRouterLink] : null\">\r\n        <!-- svg logo -->\r\n        @if (headerConfig.svgLogo) {\r\n          <mat-icon\r\n            class=\"lf-header-logo\"\r\n            [class.mr-3]=\"headerConfig.title\"\r\n            [svgIcon]=\"headerConfig.svgLogo!\"></mat-icon>\r\n          <!-- img logo -->\r\n        } @else {\r\n          @if (headerConfig.imgLogo) {\r\n            <img\r\n              class=\"lf-header-logo\"\r\n              [class.mr-3]=\"headerConfig.title\"\r\n              [src]=\"headerConfig.imgLogo\"\r\n              alt=\"Logo\" />\r\n          }\r\n        }\r\n        <!-- title -->\r\n        @if (headerConfig.title) {\r\n          <div class=\"lf-header-title-wrapper\">\r\n            @if (headerConfig.title) {\r\n              <span class=\"lf-header-title\">\r\n                {{ headerConfig.title }}\r\n              </span>\r\n            }\r\n            @if (headerConfig.subtitle) {\r\n              <span class=\"lf-header-subtitle\">\r\n                {{ headerConfig.subtitle }}\r\n              </span>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n    <!-- input -->\r\n    @if (headerConfig.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]=\"headerConfig.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 (headerConfig.responsiveConfig?.enable && isMobile) {\r\n      @let exludedButtons = getRightExcludedButtons();\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 = getRightMobileButton();\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 headerConfig.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 (headerConfig.loading || (headerConfig.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<!-- 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)\"\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        <!-- icon -->\r\n        @if (menuButton.matIcon) {\r\n          <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\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        (click)=\"buttonClicked(menuButton.id)\"\r\n        [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n        [matTooltip]=\"menuButton.tooltip\"\r\n        [attr.aria-label]=\"menuButton.id\">\r\n        <!-- icon -->\r\n        @if (menuButton.matIcon) {\r\n          <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\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 px-1\"\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        [attr.aria-label]=\"menuButton.id\" />\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            (click)=\"buttonClicked(button.id)\"\r\n            [matTooltip]=\"button.tooltip\">\r\n            <!-- icon -->\r\n            @if (button.matIcon) {\r\n              <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\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              (click)=\"buttonClicked(button.id)\"\r\n              [matTooltip]=\"button.tooltip\"\r\n              tabindex=\"0\">\r\n              <!-- icon -->\r\n              @if (button.matIcon) {\r\n                <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\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;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}.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: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i2.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: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$2.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: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: InputComponent, selector: "lf-input", inputs: ["inputConfig", "isMobile"], outputs: ["inputSubmitEvent", "inputChangeEvent", "inputPrefixActionEvent"] }], animations: [
             trigger('slideDownUp', [
                 state('void', style({ transform: 'translateY(-100%)' })),
                 state('*', style({ transform: 'translateY(0)' })),
@@ -513,7 +482,7 @@ class HeaderComponent {
             ])
         ] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: HeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lf-header', animations: [
                         trigger('slideDownUp', [
@@ -522,7 +491,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                             transition(':enter', [style({ transform: 'translateY(-100%)' }), animate('200ms ease-out', style({ transform: 'translateY(0)' }))]),
                             transition(':leave', [animate('200ms ease-in', style({ transform: 'translateY(-100%)' }))])
                         ])
-                    ], standalone: false, template: "@if (headerConfig && headerConfig.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]=\"headerConfig.cssClass\"\r\n    [class.lf-gradient]=\"headerConfig.gradient\"\r\n    color=\"primary\">\r\n    <!-- left menu button -->\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n      [ngTemplateOutletContext]=\"{\r\n        menuButton: headerConfig.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]=\"headerConfig.leftMenuButton && !isMobile\">\r\n      <!-- link wrapper -->\r\n      <div\r\n        class=\"lf-header-logo-title-wrapper-link\"\r\n        [class.lf-clickable]=\"headerConfig.titleRouterLink\"\r\n        [routerLink]=\"headerConfig.titleRouterLink ? [headerConfig.titleRouterLink] : null\">\r\n        <!-- svg logo -->\r\n        @if (headerConfig.svgLogo) {\r\n          <mat-icon\r\n            class=\"lf-header-logo\"\r\n            [class.mr-3]=\"headerConfig.title\"\r\n            [svgIcon]=\"headerConfig.svgLogo!\"></mat-icon>\r\n        } @else {\r\n          @if (headerConfig.imgLogo) {\r\n            <img\r\n              class=\"lf-header-logo\"\r\n              [class.mr-3]=\"headerConfig.title\"\r\n              [src]=\"headerConfig.imgLogo\"\r\n              alt=\"Logo\" />\r\n          }\r\n        }\r\n        <!-- img logo -->\r\n        <!-- title -->\r\n        @if (headerConfig.title) {\r\n          <div class=\"lf-header-title-wrapper\">\r\n            @if (headerConfig.title) {\r\n              <span class=\"lf-header-title\">\r\n                {{ headerConfig.title }}\r\n              </span>\r\n            }\r\n            @if (headerConfig.subtitle) {\r\n              <span class=\"lf-header-subtitle\">\r\n                {{ headerConfig.subtitle }}\r\n              </span>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n    <!-- input -->\r\n    @if (headerConfig.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]=\"headerConfig.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 (headerConfig.responsiveConfig?.enable && isMobile) {\r\n      @let exludedButtons = getRightExcludedButtons();\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 = getRightMobileButton();\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 headerConfig.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 (headerConfig.loading || (headerConfig.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<!-- header menu button -->\r\n<ng-template #menuButtonTemplate let-menuButton=\"menuButton\" let-hideLabel=\"hideLabel\">\r\n  @if (menuButton) {\r\n    <!-- icon button -->\r\n    @if ((menuButton.matIcon || menuButton.svgIcon) && (!menuButton.label || hideLabel)) {\r\n      <button\r\n        mat-icon-button\r\n        class=\"lf-header-menu-button\"\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        [attr.aria-label]=\"menuButton.id\">\r\n        <!-- icon -->\r\n        <lf-icon [matIcon]=\"menuButton.matIcon\" [svgIcon]=\"menuButton.svgIcon\"></lf-icon>\r\n      </button>\r\n    } @else {\r\n      @if (!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)\"\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          <!-- label -->\r\n          {{ menuButton.label }}\r\n        </button>\r\n      }\r\n    }\r\n    <!-- text button -->\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            (click)=\"buttonClicked(button.id)\">\r\n            <!-- icon -->\r\n            <lf-icon\r\n              [matIcon]=\"button.matIcon\"\r\n              [svgIcon]=\"button.svgIcon\"\r\n              verticalAlign=\"bottom\"></lf-icon>\r\n            <!-- label -->\r\n            @if (button.label) {\r\n              <span>{{ button.label }}</span>\r\n            }\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              (click)=\"buttonClicked(button.id)\"\r\n              [matTooltip]=\"button.tooltip\"\r\n              tabindex=\"0\">\r\n              <!-- icon -->\r\n              <lf-icon\r\n                [matIcon]=\"button.matIcon\"\r\n                [svgIcon]=\"button.svgIcon\"\r\n                verticalAlign=\"top\"></lf-icon>\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-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}.lf-menu-icons:hover{background:transparent!important}.lf-header-progress-bar{z-index:var(--header-z-index);position:fixed;top:var(--header-height)}\n"] }]
+                    ], standalone: false, template: "@if (headerConfig && headerConfig.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]=\"headerConfig.cssClass\"\r\n    [class.lf-gradient]=\"headerConfig.gradient\"\r\n    color=\"primary\">\r\n    <!-- left menu button -->\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n      [ngTemplateOutletContext]=\"{\r\n        menuButton: headerConfig.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]=\"headerConfig.leftMenuButton && !isMobile\">\r\n      <!-- link wrapper -->\r\n      <div\r\n        class=\"lf-header-logo-title-wrapper-link\"\r\n        [class.lf-clickable]=\"headerConfig.titleRouterLink\"\r\n        [routerLink]=\"headerConfig.titleRouterLink ? [headerConfig.titleRouterLink] : null\">\r\n        <!-- svg logo -->\r\n        @if (headerConfig.svgLogo) {\r\n          <mat-icon\r\n            class=\"lf-header-logo\"\r\n            [class.mr-3]=\"headerConfig.title\"\r\n            [svgIcon]=\"headerConfig.svgLogo!\"></mat-icon>\r\n          <!-- img logo -->\r\n        } @else {\r\n          @if (headerConfig.imgLogo) {\r\n            <img\r\n              class=\"lf-header-logo\"\r\n              [class.mr-3]=\"headerConfig.title\"\r\n              [src]=\"headerConfig.imgLogo\"\r\n              alt=\"Logo\" />\r\n          }\r\n        }\r\n        <!-- title -->\r\n        @if (headerConfig.title) {\r\n          <div class=\"lf-header-title-wrapper\">\r\n            @if (headerConfig.title) {\r\n              <span class=\"lf-header-title\">\r\n                {{ headerConfig.title }}\r\n              </span>\r\n            }\r\n            @if (headerConfig.subtitle) {\r\n              <span class=\"lf-header-subtitle\">\r\n                {{ headerConfig.subtitle }}\r\n              </span>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n    <!-- input -->\r\n    @if (headerConfig.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]=\"headerConfig.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 (headerConfig.responsiveConfig?.enable && isMobile) {\r\n      @let exludedButtons = getRightExcludedButtons();\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 = getRightMobileButton();\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 headerConfig.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 (headerConfig.loading || (headerConfig.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<!-- 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)\"\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        <!-- icon -->\r\n        @if (menuButton.matIcon) {\r\n          <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\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        (click)=\"buttonClicked(menuButton.id)\"\r\n        [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n        [matTooltip]=\"menuButton.tooltip\"\r\n        [attr.aria-label]=\"menuButton.id\">\r\n        <!-- icon -->\r\n        @if (menuButton.matIcon) {\r\n          <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\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 px-1\"\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        [attr.aria-label]=\"menuButton.id\" />\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            (click)=\"buttonClicked(button.id)\"\r\n            [matTooltip]=\"button.tooltip\">\r\n            <!-- icon -->\r\n            @if (button.matIcon) {\r\n              <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\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              (click)=\"buttonClicked(button.id)\"\r\n              [matTooltip]=\"button.tooltip\"\r\n              tabindex=\"0\">\r\n              <!-- icon -->\r\n              @if (button.matIcon) {\r\n                <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\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;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}.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: Input
             }], headerConfig: [{
@@ -543,101 +512,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                 type: Output
             }] } });
 
-class LoadingOverlayComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: LoadingOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: LoadingOverlayComponent, isStandalone: false, selector: "lf-loading-overlay", ngImport: i0, template: "<div class=\"lf-loading-overlay\">\r\n  <mat-spinner class=\"lf-loading-spinner\" color=\"accent\" mode=\"indeterminate\"></mat-spinner>\r\n</div>\r\n", styles: [".lf-loading-overlay{z-index:var(--loading-overlay-z-index);position:fixed;inset:0;height:100%;width:100%;display:flex;align-items:center;justify-content:center;background-color:#00000029}\n"], dependencies: [{ kind: "component", type: i1$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: LoadingOverlayComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lf-loading-overlay', standalone: false, template: "<div class=\"lf-loading-overlay\">\r\n  <mat-spinner class=\"lf-loading-spinner\" color=\"accent\" mode=\"indeterminate\"></mat-spinner>\r\n</div>\r\n", styles: [".lf-loading-overlay{z-index:var(--loading-overlay-z-index);position:fixed;inset:0;height:100%;width:100%;display:flex;align-items:center;justify-content:center;background-color:#00000029}\n"] }]
-        }] });
-
-class NavbarComponent {
-    constructor() {
-        this.libraryConfig = null;
-        this.navbarConfig = null;
-        this.isMobile = false;
-        this.navbarButtonClickEvent = new EventEmitter();
-    }
-    buttonClicked(id) {
-        if (!id) {
-            return;
-        }
-        this.navbarButtonClickEvent.emit(id);
-    }
-    isActive(id) {
-        if (!id || !this.currentRoute) {
-            return false;
-        }
-        const route = this.currentRoute.substring(this.currentRoute.indexOf('/') + 1);
-        return route === id;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: NavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: NavbarComponent, isStandalone: false, selector: "lf-navbar", inputs: { libraryConfig: "libraryConfig", navbarConfig: "navbarConfig", isMobile: "isMobile", currentRoute: "currentRoute" }, outputs: { navbarButtonClickEvent: "navbarButtonClickEvent" }, ngImport: i0, template: "@if (navbarConfig && navbarConfig.enable) {\r\n  <div\r\n    [@responsiveSlide]=\"isMobile ? 'mobile' : 'desktop'\"\r\n    class=\"mat-app-background lf-transitions mat-elevation-z3\"\r\n    [class.lf-navbar]=\"!isMobile\"\r\n    [class.lf-navbar-mobile]=\"isMobile\"\r\n    [ngClass]=\"navbarConfig.cssClass\">\r\n    <!-- items -->\r\n    <div [class.lf-navbar-items]=\"!isMobile\" [class.lf-navbar-mobile-items]=\"isMobile\">\r\n      <!-- item -->\r\n      @for (button of navbarConfig.menuButtons; track button.id; let i = $index) {\r\n        @if (i < 5) {\r\n          <div\r\n            class=\"lf-navbar-item\"\r\n            [class.lf-navbar-item-active]=\"isActive(button.id)\"\r\n            [ngClass]=\"button.cssClass\"\r\n            (click)=\"buttonClicked(button.id)\"\r\n            tabindex=\"0\"\r\n            role=\"button\"\r\n            [matTooltip]=\"button.tooltip\">\r\n            <!-- icon -->\r\n            <lf-icon [matIcon]=\"button.matIcon!\" [svgIcon]=\"button.svgIcon!\"></lf-icon>\r\n            <!-- label -->\r\n            <!-- show a protected space on desktop so the icon doesn't move up and down -->\r\n            @if (button?.label) {\r\n              <span class=\"lf-navbar-item-label\">\r\n                {{\r\n                  isActive(button.id) || navbarConfig.showAllLabels\r\n                    ? button.label\r\n                    : isMobile\r\n                      ? \"\"\r\n                      : \"&nbsp;\"\r\n                }}\r\n              </span>\r\n            }\r\n          </div>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".lf-navbar{z-index:var(--navbar-z-index);position:fixed;left:0;top:0;height:100vh;padding:calc(var(--header-height) + 16px) var(--navbar-padding) 0 var(--navbar-padding);border-right:solid 1px rgba(0,0,0,.12)}.lf-navbar .lf-navbar-items{display:flex;flex-flow:column;align-items:center}.lf-navbar-mobile{z-index:var(--navbar-z-index);position:fixed;left:0;bottom:0;width:100vw;padding:var(--navbar-padding) 0;box-sizing:border-box;border-top:solid 1px rgba(0,0,0,.12)}.lf-navbar-mobile .lf-navbar-mobile-items{display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-evenly}.lf-navbar-mobile .lf-navbar-mobile-items .lf-navbar-item{height:var(--navbar-height-mobile)!important}.lf-navbar-item{width:var(--navbar-width);height:var(--navbar-height);display:flex;align-items:center;justify-content:center;flex-flow:column;border-radius:var(--navbar-item-border-radius);cursor:pointer}.lf-navbar-item.lf-navbar-item-active{color:var(--color-primary)}.lf-navbar-item .lf-navbar-item-icon{width:calc(var(--navbar-width) / 3);height:calc(var(--navbar-height) / 3);overflow:visible!important}.lf-navbar-item .lf-navbar-item-label{max-width:var(--navbar-width);white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;text-transform:none;vertical-align:top;font-size:var(--navbar-item-label-font-size);font-weight:500}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: IconComponent, selector: "lf-icon", inputs: ["matIcon", "svgIcon", "verticalAlign"] }], animations: [
-            trigger('responsiveSlide', [
-                // States for desktop and mobile
-                state('desktop', style({ transform: 'translateX(0)' })),
-                state('mobile', style({ transform: 'translateY(0)' })),
-                // Desktop enter (slide in from left)
-                transition('void => desktop', [
-                    style({ transform: 'translateX(-100%)' }),
-                    animate('200ms linear')
-                ]),
-                // Desktop leave (slide back to left)
-                transition('desktop => void', [
-                    animate('200ms linear', style({ transform: 'translateX(-100%)' }))
-                ]),
-                // Mobile enter (slide in from bottom)
-                transition('void => mobile', [
-                    style({ transform: 'translateY(100%)' }),
-                    animate('200ms linear')
-                ]),
-                // Mobile leave (slide back to bottom)
-                transition('mobile => void', [
-                    animate('200ms linear', style({ transform: 'translateY(100%)' }))
-                ]),
-            ])
-        ] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: NavbarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lf-navbar', animations: [
-                        trigger('responsiveSlide', [
-                            // States for desktop and mobile
-                            state('desktop', style({ transform: 'translateX(0)' })),
-                            state('mobile', style({ transform: 'translateY(0)' })),
-                            // Desktop enter (slide in from left)
-                            transition('void => desktop', [
-                                style({ transform: 'translateX(-100%)' }),
-                                animate('200ms linear')
-                            ]),
-                            // Desktop leave (slide back to left)
-                            transition('desktop => void', [
-                                animate('200ms linear', style({ transform: 'translateX(-100%)' }))
-                            ]),
-                            // Mobile enter (slide in from bottom)
-                            transition('void => mobile', [
-                                style({ transform: 'translateY(100%)' }),
-                                animate('200ms linear')
-                            ]),
-                            // Mobile leave (slide back to bottom)
-                            transition('mobile => void', [
-                                animate('200ms linear', style({ transform: 'translateY(100%)' }))
-                            ]),
-                        ])
-                    ], standalone: false, template: "@if (navbarConfig && navbarConfig.enable) {\r\n  <div\r\n    [@responsiveSlide]=\"isMobile ? 'mobile' : 'desktop'\"\r\n    class=\"mat-app-background lf-transitions mat-elevation-z3\"\r\n    [class.lf-navbar]=\"!isMobile\"\r\n    [class.lf-navbar-mobile]=\"isMobile\"\r\n    [ngClass]=\"navbarConfig.cssClass\">\r\n    <!-- items -->\r\n    <div [class.lf-navbar-items]=\"!isMobile\" [class.lf-navbar-mobile-items]=\"isMobile\">\r\n      <!-- item -->\r\n      @for (button of navbarConfig.menuButtons; track button.id; let i = $index) {\r\n        @if (i < 5) {\r\n          <div\r\n            class=\"lf-navbar-item\"\r\n            [class.lf-navbar-item-active]=\"isActive(button.id)\"\r\n            [ngClass]=\"button.cssClass\"\r\n            (click)=\"buttonClicked(button.id)\"\r\n            tabindex=\"0\"\r\n            role=\"button\"\r\n            [matTooltip]=\"button.tooltip\">\r\n            <!-- icon -->\r\n            <lf-icon [matIcon]=\"button.matIcon!\" [svgIcon]=\"button.svgIcon!\"></lf-icon>\r\n            <!-- label -->\r\n            <!-- show a protected space on desktop so the icon doesn't move up and down -->\r\n            @if (button?.label) {\r\n              <span class=\"lf-navbar-item-label\">\r\n                {{\r\n                  isActive(button.id) || navbarConfig.showAllLabels\r\n                    ? button.label\r\n                    : isMobile\r\n                      ? \"\"\r\n                      : \"&nbsp;\"\r\n                }}\r\n              </span>\r\n            }\r\n          </div>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".lf-navbar{z-index:var(--navbar-z-index);position:fixed;left:0;top:0;height:100vh;padding:calc(var(--header-height) + 16px) var(--navbar-padding) 0 var(--navbar-padding);border-right:solid 1px rgba(0,0,0,.12)}.lf-navbar .lf-navbar-items{display:flex;flex-flow:column;align-items:center}.lf-navbar-mobile{z-index:var(--navbar-z-index);position:fixed;left:0;bottom:0;width:100vw;padding:var(--navbar-padding) 0;box-sizing:border-box;border-top:solid 1px rgba(0,0,0,.12)}.lf-navbar-mobile .lf-navbar-mobile-items{display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-evenly}.lf-navbar-mobile .lf-navbar-mobile-items .lf-navbar-item{height:var(--navbar-height-mobile)!important}.lf-navbar-item{width:var(--navbar-width);height:var(--navbar-height);display:flex;align-items:center;justify-content:center;flex-flow:column;border-radius:var(--navbar-item-border-radius);cursor:pointer}.lf-navbar-item.lf-navbar-item-active{color:var(--color-primary)}.lf-navbar-item .lf-navbar-item-icon{width:calc(var(--navbar-width) / 3);height:calc(var(--navbar-height) / 3);overflow:visible!important}.lf-navbar-item .lf-navbar-item-label{max-width:var(--navbar-width);white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;text-transform:none;vertical-align:top;font-size:var(--navbar-item-label-font-size);font-weight:500}\n"] }]
-        }], propDecorators: { libraryConfig: [{
-                type: Input
-            }], navbarConfig: [{
-                type: Input
-            }], isMobile: [{
-                type: Input
-            }], currentRoute: [{
-                type: Input
-            }], navbarButtonClickEvent: [{
-                type: Output
-            }] } });
-
 class BreakpointService {
     constructor() {
         this.breakpointObserver = inject(BreakpointObserver);
@@ -645,10 +519,10 @@ class BreakpointService {
             .observe([Breakpoints.Large, Breakpoints.Medium, Breakpoints.Small, Breakpoints.XSmall])
             .pipe(distinctUntilChanged());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: BreakpointService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: BreakpointService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BreakpointService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BreakpointService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: BreakpointService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BreakpointService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -657,10 +531,10 @@ class ConfirmDialogComponent {
     constructor() {
         this.config = inject(MAT_DIALOG_DATA);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ConfirmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: ConfirmDialogComponent, isStandalone: false, selector: "lf-confirm-dialog", ngImport: i0, template: "@if (config) {\r\n  @if (config.title) {\r\n    <h2 mat-dialog-title>{{ config.title }}</h2>\r\n  }\r\n\r\n  <mat-dialog-content>\r\n    @if (config.message) {\r\n      <p>{{ config.message }}</p>\r\n    }\r\n  </mat-dialog-content>\r\n\r\n  <mat-dialog-actions align=\"end\">\r\n    @if (config.closeLabel) {\r\n      <button mat-button [mat-dialog-close]=\"false\">\r\n        {{ config.closeLabel }}\r\n      </button>\r\n    }\r\n    @if (config.confirmLabel) {\r\n      <button mat-button color=\"primary\" [mat-dialog-close]=\"true\">\r\n        {{ config.confirmLabel }}\r\n      </button>\r\n    }\r\n  </mat-dialog-actions>\r\n}\r\n", styles: [""], dependencies: [{ kind: "component", type: i2.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: "directive", type: i2$3.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i2$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ConfirmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: ConfirmDialogComponent, isStandalone: false, selector: "lf-confirm-dialog", ngImport: i0, template: "@if (config) {\r\n  @if (config.title) {\r\n    <h2 mat-dialog-title>{{ config.title }}</h2>\r\n  }\r\n\r\n  <mat-dialog-content>\r\n    @if (config.message) {\r\n      <p>{{ config.message }}</p>\r\n    }\r\n  </mat-dialog-content>\r\n\r\n  <mat-dialog-actions align=\"end\">\r\n    @if (config.closeLabel) {\r\n      <button mat-button [mat-dialog-close]=\"false\">\r\n        {{ config.closeLabel }}\r\n      </button>\r\n    }\r\n    @if (config.confirmLabel) {\r\n      <button mat-button color=\"primary\" [mat-dialog-close]=\"true\">\r\n        {{ config.confirmLabel }}\r\n      </button>\r\n    }\r\n  </mat-dialog-actions>\r\n}\r\n", styles: [""], dependencies: [{ kind: "component", type: i2.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: "directive", type: i2$3.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i2$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lf-confirm-dialog', standalone: false, template: "@if (config) {\r\n  @if (config.title) {\r\n    <h2 mat-dialog-title>{{ config.title }}</h2>\r\n  }\r\n\r\n  <mat-dialog-content>\r\n    @if (config.message) {\r\n      <p>{{ config.message }}</p>\r\n    }\r\n  </mat-dialog-content>\r\n\r\n  <mat-dialog-actions align=\"end\">\r\n    @if (config.closeLabel) {\r\n      <button mat-button [mat-dialog-close]=\"false\">\r\n        {{ config.closeLabel }}\r\n      </button>\r\n    }\r\n    @if (config.confirmLabel) {\r\n      <button mat-button color=\"primary\" [mat-dialog-close]=\"true\">\r\n        {{ config.confirmLabel }}\r\n      </button>\r\n    }\r\n  </mat-dialog-actions>\r\n}\r\n" }]
         }] });
@@ -709,10 +583,10 @@ class DialogService {
         });
         return firstValueFrom(dialogRef.afterClosed());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DialogService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DialogService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DialogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DialogService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -756,10 +630,10 @@ class Logger {
             console.error(message, ...args); // eslint-disable-line no-console
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: Logger, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: Logger, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: Logger, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: Logger, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: Logger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: Logger, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -885,10 +759,43 @@ class LocalStorageService {
         }
         return value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: LocalStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: LocalStorageService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LocalStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LocalStorageService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LocalStorageService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class OverlayService {
+    constructor() {
+        this.overlay = inject(Overlay);
+        this.overlayRef = null;
+    }
+    open(component) {
+        if (this.overlayRef)
+            return;
+        this.overlayRef = this.overlay.create({
+            hasBackdrop: true,
+            positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically(),
+            scrollStrategy: this.overlay.scrollStrategies.block(),
+        });
+        const portal = new ComponentPortal(component);
+        this.overlayRef.attach(portal);
+    }
+    close() {
+        if (!this.overlayRef)
+            return;
+        this.overlayRef.detach();
+        this.overlayRef.dispose();
+        this.overlayRef = null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: OverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: OverlayService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: LocalStorageService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: OverlayService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -976,10 +883,10 @@ class RouterService {
     clearRouteHistory() {
         this._routeHistory$.next([]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: RouterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: RouterService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RouterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RouterService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: RouterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RouterService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -1031,20 +938,27 @@ class ScaffoldService {
     // Update a specific property in the ScaffoldConfig
     updateScaffoldProperty(property, value) {
         const currentState = this._scaffoldConfig$.getValue();
-        if (currentState[property] === value) {
+        const currentValue = currentState[property];
+        let newValue;
+        if (currentValue && typeof currentValue === 'object' && value && typeof value === 'object') {
+            newValue = { ...currentValue, ...value };
+        }
+        else {
+            newValue = value;
+        }
+        if (newValue === currentValue) {
             if (this.libraryConfig?.debugging)
-                this.logger.log(`[UNCHANGED] ScaffoldConfig.${property}`, value);
+                this.logger.log(`[UNCHANGED] ScaffoldConfig.${property}`, newValue);
             return;
         }
-        const updatedState = { ...currentState, [property]: value };
         if (this.libraryConfig?.debugging)
-            this.logger.log(`[UPDATE] ScaffoldConfig.${property}`, value);
-        this._scaffoldConfig$.next(updatedState);
+            this.logger.log(`[UPDATE] ScaffoldConfig.${property}`, newValue);
+        this._scaffoldConfig$.next({ ...currentState, [property]: newValue });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ScaffoldService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ScaffoldService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ScaffoldService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ScaffoldService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ScaffoldService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ScaffoldService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -1055,6 +969,10 @@ class SeoService {
         this.metaTags = inject(Meta);
         this.document = inject(DOCUMENT);
         this.logger = inject(Logger);
+        this._config$ = new BehaviorSubject(null);
+    }
+    get config$() {
+        return this._config$.asObservable();
     }
     /**
      * Pass a configuration to set meta tags such as title, description and image for search results and social media
@@ -1063,6 +981,7 @@ class SeoService {
      *
      */
     setMetaTags(seoConfig) {
+        this._config$.next(seoConfig);
         const autoTrim = seoConfig.autoTrim || false;
         const title = seoConfig.metaPageTitle || '';
         const description = seoConfig.metaPageDescription || '';
@@ -1108,10 +1027,10 @@ class SeoService {
         this.metaTags.updateTag({ property: 'og:image', content: image });
         this.metaTags.updateTag({ name: 'twitter:image', content: image });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SeoService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SeoService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SeoService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SeoService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SeoService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SeoService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1143,10 +1062,10 @@ class SnackbarService {
         const snackbarRef = this.snackbar.open(message, action, config ? config : this.actionConfig);
         return firstValueFrom(snackbarRef.onAction());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SnackbarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SnackbarService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SnackbarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SnackbarService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SnackbarService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SnackbarService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1202,22 +1121,130 @@ class ThemeService {
         }
         this.setTheme(theme.replace(/"/g, ''));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ThemeService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ThemeService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ThemeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ThemeService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
         }], ctorParameters: () => [] });
 
+class LoadingOverlayComponent {
+    constructor() {
+        this.libraryConfig = inject(CONFIG, { optional: true });
+        this.scaffoldService = inject(ScaffoldService);
+        this.portal = null;
+        this.loadingOverlayConfig = null;
+    }
+    ngOnInit() {
+        this.loadingOverlayConfig = this.scaffoldService.scaffoldConfig?.loadingOverlayConfig || null;
+        if (this.loadingOverlayConfig?.customComponent) {
+            this.portal = new ComponentPortal(this.loadingOverlayConfig?.customComponent);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoadingOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: LoadingOverlayComponent, isStandalone: false, selector: "lf-loading-overlay", ngImport: i0, template: "@if (!portal) {\r\n  <div\r\n    [ngClass]=\"loadingOverlayConfig?.cssClass\"\r\n    [class.lf-gradient-spinner]=\"loadingOverlayConfig?.gradient\">\r\n    <mat-progress-spinner mode=\"indeterminate\"></mat-progress-spinner>\r\n  </div>\r\n} @else {\r\n  <ng-template [cdkPortalOutlet]=\"portal\"></ng-template>\r\n}\r\n", styles: [".lf-gradient-spinner{position:relative;display:inline-block}.lf-gradient-spinner mat-progress-spinner,.lf-gradient-spinner mat-spinner{opacity:0}.lf-gradient-spinner:before{content:\"\";position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--color-primary),var(--color-accent));mask:radial-gradient(farthest-side,transparent 77%,black 78%);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i3$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoadingOverlayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lf-loading-overlay', standalone: false, template: "@if (!portal) {\r\n  <div\r\n    [ngClass]=\"loadingOverlayConfig?.cssClass\"\r\n    [class.lf-gradient-spinner]=\"loadingOverlayConfig?.gradient\">\r\n    <mat-progress-spinner mode=\"indeterminate\"></mat-progress-spinner>\r\n  </div>\r\n} @else {\r\n  <ng-template [cdkPortalOutlet]=\"portal\"></ng-template>\r\n}\r\n", styles: [".lf-gradient-spinner{position:relative;display:inline-block}.lf-gradient-spinner mat-progress-spinner,.lf-gradient-spinner mat-spinner{opacity:0}.lf-gradient-spinner:before{content:\"\";position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--color-primary),var(--color-accent));mask:radial-gradient(farthest-side,transparent 77%,black 78%);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
+        }] });
+
+class NavbarComponent {
+    constructor() {
+        this.libraryConfig = null;
+        this.navbarConfig = null;
+        this.isMobile = false;
+        this.navbarButtonClickEvent = new EventEmitter();
+    }
+    buttonClicked(id) {
+        if (!id) {
+            return;
+        }
+        this.navbarButtonClickEvent.emit(id);
+    }
+    isActive(id) {
+        if (!id || !this.currentRoute) {
+            return false;
+        }
+        const route = this.currentRoute.substring(this.currentRoute.indexOf('/') + 1);
+        return route === id;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: NavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: NavbarComponent, isStandalone: false, selector: "lf-navbar", inputs: { libraryConfig: "libraryConfig", navbarConfig: "navbarConfig", isMobile: "isMobile", currentRoute: "currentRoute" }, outputs: { navbarButtonClickEvent: "navbarButtonClickEvent" }, ngImport: i0, template: "@if (navbarConfig && navbarConfig.enable) {\r\n  <div\r\n    [@responsiveSlide]=\"isMobile ? 'mobile' : 'desktop'\"\r\n    class=\"mat-app-background lf-transitions mat-elevation-z3\"\r\n    [class.lf-navbar]=\"!isMobile\"\r\n    [class.lf-navbar-mobile]=\"isMobile\"\r\n    [ngClass]=\"navbarConfig.cssClass\">\r\n    <!-- items -->\r\n    <div [class.lf-navbar-items]=\"!isMobile\" [class.lf-navbar-mobile-items]=\"isMobile\">\r\n      <!-- item -->\r\n      @for (button of navbarConfig.buttons; track button.id; let i = $index) {\r\n        @if (i < 5) {\r\n          <div\r\n            class=\"lf-navbar-item\"\r\n            [class.lf-navbar-item-active]=\"isActive(button.id)\"\r\n            [ngClass]=\"button.cssClass\"\r\n            (click)=\"buttonClicked(button.id)\"\r\n            tabindex=\"0\"\r\n            role=\"button\"\r\n            [matTooltip]=\"button.tooltip\">\r\n            <!-- icon -->\r\n            @if (button.matIcon) {\r\n              <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\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            <!-- show a protected space on desktop so the icon doesn't move up and down -->\r\n            @if (button?.label) {\r\n              <span class=\"lf-navbar-item-label\">\r\n                {{\r\n                  isActive(button.id) || navbarConfig.showAllLabels\r\n                    ? button.label\r\n                    : isMobile\r\n                      ? \"\"\r\n                      : \"&nbsp;\"\r\n                }}\r\n              </span>\r\n            }\r\n          </div>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".lf-navbar{z-index:var(--navbar-z-index);position:fixed;left:0;top:0;height:100vh;padding:calc(var(--header-height) + 16px) var(--navbar-padding) 0 var(--navbar-padding);border-right:solid 1px rgba(0,0,0,.12)}.lf-navbar .lf-navbar-items{display:flex;flex-flow:column;align-items:center}.lf-navbar-mobile{z-index:var(--navbar-z-index);position:fixed;left:0;bottom:0;width:100vw;padding:var(--navbar-padding) 0;box-sizing:border-box;border-top:solid 1px rgba(0,0,0,.12)}.lf-navbar-mobile .lf-navbar-mobile-items{display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-evenly}.lf-navbar-mobile .lf-navbar-mobile-items .lf-navbar-item{height:var(--navbar-height-mobile)!important}.lf-navbar-item{width:var(--navbar-width);height:var(--navbar-height);display:flex;align-items:center;justify-content:center;flex-flow:column;border-radius:var(--navbar-item-border-radius);cursor:pointer}.lf-navbar-item.lf-navbar-item-active{color:var(--color-primary)}.lf-navbar-item .lf-navbar-item-icon{width:calc(var(--navbar-width) / 3);height:calc(var(--navbar-height) / 3);overflow:visible!important}.lf-navbar-item .lf-navbar-item-label{max-width:var(--navbar-width);white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;text-transform:none;vertical-align:top;font-size:var(--navbar-item-label-font-size);font-weight:500}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], animations: [
+            trigger('responsiveSlide', [
+                // States for desktop and mobile
+                state('desktop', style({ transform: 'translateX(0)' })),
+                state('mobile', style({ transform: 'translateY(0)' })),
+                // Desktop enter (slide in from left)
+                transition('void => desktop', [
+                    style({ transform: 'translateX(-100%)' }),
+                    animate('200ms linear')
+                ]),
+                // Desktop leave (slide back to left)
+                transition('desktop => void', [
+                    animate('200ms linear', style({ transform: 'translateX(-100%)' }))
+                ]),
+                // Mobile enter (slide in from bottom)
+                transition('void => mobile', [
+                    style({ transform: 'translateY(100%)' }),
+                    animate('200ms linear')
+                ]),
+                // Mobile leave (slide back to bottom)
+                transition('mobile => void', [
+                    animate('200ms linear', style({ transform: 'translateY(100%)' }))
+                ]),
+            ])
+        ] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: NavbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lf-navbar', animations: [
+                        trigger('responsiveSlide', [
+                            // States for desktop and mobile
+                            state('desktop', style({ transform: 'translateX(0)' })),
+                            state('mobile', style({ transform: 'translateY(0)' })),
+                            // Desktop enter (slide in from left)
+                            transition('void => desktop', [
+                                style({ transform: 'translateX(-100%)' }),
+                                animate('200ms linear')
+                            ]),
+                            // Desktop leave (slide back to left)
+                            transition('desktop => void', [
+                                animate('200ms linear', style({ transform: 'translateX(-100%)' }))
+                            ]),
+                            // Mobile enter (slide in from bottom)
+                            transition('void => mobile', [
+                                style({ transform: 'translateY(100%)' }),
+                                animate('200ms linear')
+                            ]),
+                            // Mobile leave (slide back to bottom)
+                            transition('mobile => void', [
+                                animate('200ms linear', style({ transform: 'translateY(100%)' }))
+                            ]),
+                        ])
+                    ], standalone: false, template: "@if (navbarConfig && navbarConfig.enable) {\r\n  <div\r\n    [@responsiveSlide]=\"isMobile ? 'mobile' : 'desktop'\"\r\n    class=\"mat-app-background lf-transitions mat-elevation-z3\"\r\n    [class.lf-navbar]=\"!isMobile\"\r\n    [class.lf-navbar-mobile]=\"isMobile\"\r\n    [ngClass]=\"navbarConfig.cssClass\">\r\n    <!-- items -->\r\n    <div [class.lf-navbar-items]=\"!isMobile\" [class.lf-navbar-mobile-items]=\"isMobile\">\r\n      <!-- item -->\r\n      @for (button of navbarConfig.buttons; track button.id; let i = $index) {\r\n        @if (i < 5) {\r\n          <div\r\n            class=\"lf-navbar-item\"\r\n            [class.lf-navbar-item-active]=\"isActive(button.id)\"\r\n            [ngClass]=\"button.cssClass\"\r\n            (click)=\"buttonClicked(button.id)\"\r\n            tabindex=\"0\"\r\n            role=\"button\"\r\n            [matTooltip]=\"button.tooltip\">\r\n            <!-- icon -->\r\n            @if (button.matIcon) {\r\n              <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\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            <!-- show a protected space on desktop so the icon doesn't move up and down -->\r\n            @if (button?.label) {\r\n              <span class=\"lf-navbar-item-label\">\r\n                {{\r\n                  isActive(button.id) || navbarConfig.showAllLabels\r\n                    ? button.label\r\n                    : isMobile\r\n                      ? \"\"\r\n                      : \"&nbsp;\"\r\n                }}\r\n              </span>\r\n            }\r\n          </div>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".lf-navbar{z-index:var(--navbar-z-index);position:fixed;left:0;top:0;height:100vh;padding:calc(var(--header-height) + 16px) var(--navbar-padding) 0 var(--navbar-padding);border-right:solid 1px rgba(0,0,0,.12)}.lf-navbar .lf-navbar-items{display:flex;flex-flow:column;align-items:center}.lf-navbar-mobile{z-index:var(--navbar-z-index);position:fixed;left:0;bottom:0;width:100vw;padding:var(--navbar-padding) 0;box-sizing:border-box;border-top:solid 1px rgba(0,0,0,.12)}.lf-navbar-mobile .lf-navbar-mobile-items{display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-evenly}.lf-navbar-mobile .lf-navbar-mobile-items .lf-navbar-item{height:var(--navbar-height-mobile)!important}.lf-navbar-item{width:var(--navbar-width);height:var(--navbar-height);display:flex;align-items:center;justify-content:center;flex-flow:column;border-radius:var(--navbar-item-border-radius);cursor:pointer}.lf-navbar-item.lf-navbar-item-active{color:var(--color-primary)}.lf-navbar-item .lf-navbar-item-icon{width:calc(var(--navbar-width) / 3);height:calc(var(--navbar-height) / 3);overflow:visible!important}.lf-navbar-item .lf-navbar-item-label{max-width:var(--navbar-width);white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;text-transform:none;vertical-align:top;font-size:var(--navbar-item-label-font-size);font-weight:500}\n"] }]
+        }], propDecorators: { libraryConfig: [{
+                type: Input
+            }], navbarConfig: [{
+                type: Input
+            }], isMobile: [{
+                type: Input
+            }], currentRoute: [{
+                type: Input
+            }], navbarButtonClickEvent: [{
+                type: Output
+            }] } });
+
 class ScaffoldComponent {
     constructor() {
         this.libraryConfig = inject(CONFIG, { optional: true });
         this.scaffoldService = inject(ScaffoldService);
         this.breakpointService = inject(BreakpointService);
         this.routerService = inject(RouterService);
+        this.overlayService = inject(OverlayService);
         this.logger = inject(Logger);
         this.route = inject(ActivatedRoute);
         this.document = inject(DOCUMENT);
@@ -1247,6 +1274,12 @@ class ScaffoldComponent {
         this._subscription.add(this.scaffoldService.scaffoldConfig$.subscribe((scaffoldConfig) => {
             if (this.libraryConfig?.debugging)
                 this.logger.log('[ScaffoldConfig]', scaffoldConfig);
+            if (scaffoldConfig.loading) {
+                this.overlayService.open(LoadingOverlayComponent);
+            }
+            else {
+                this.overlayService.close();
+            }
             this.scaffoldConfig = scaffoldConfig;
             this.headerConfig = this.scaffoldConfig.headerConfig;
             this.navbarConfig = this.scaffoldConfig.navbarConfig;
@@ -1378,12 +1411,12 @@ class ScaffoldComponent {
         this.scaffoldService.buttonClickEventValue = id;
         this.bottomBarButtonClickEvent.emit(id);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ScaffoldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: ScaffoldComponent, isStandalone: false, 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, static: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }], ngImport: i0, template: "<!-- header-height: 64px; navbar-size: 80px; floating-button-bottom: 24px -->\r\n\r\n<div\r\n  class=\"lf-scaffold lf-transitions mat-app-background mat-typography\"\r\n  [ngClass]=\"scaffoldConfig?.cssClass\">\r\n  <!-- loading overlay -->\r\n  @if (scaffoldConfig?.loading) {\r\n    <lf-loading-overlay></lf-loading-overlay>\r\n  }\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      </div>\r\n      <!-- footer -->\r\n      <lf-footer [libraryConfig]=\"libraryConfig\" [footerConfig]=\"footerConfig\"></lf-footer>\r\n    </lf-drawer>\r\n  </div>\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 && navbarConfig?.enable!\"\r\n    [bottomBarEnabled]=\"bottomBarConfig?.enable!\"\r\n    (floatingButtonConfigUpdateEvent)=\"floatingButtonConfigUpdated($event)\"\r\n    (floatingButtonClickEvent)=\"floatingButtonClicked($event)\"></lf-floating-button>\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:100vh}.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(100vh - var(--header-height))}.lf-scaffold .lf-content-wrapper.lf-show-navbar-mobile{height:calc(100vh - var(--navbar-height-mobile))}.lf-scaffold .lf-content-wrapper.lf-show-header-and-navbar-mobile{top:var(--header-height);height:calc(100vh - var(--header-height) - var(--navbar-height-mobile))}.lf-scaffold .lf-content-wrapper .lf-content{padding-left:var(--content-padding);padding-right: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)}.lf-scaffold .lf-content-wrapper .lf-content.lf-show-footer{min-height:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$4.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: LoadingOverlayComponent, selector: "lf-loading-overlay" }, { 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", "bottomBarEnabled"], outputs: ["floatingButtonConfigUpdateEvent", "floatingButtonClickEvent"] }, { kind: "component", type: BottomBarComponent, selector: "lf-bottom-bar", inputs: ["libraryConfig", "bottomBarConfig", "isMobile", "navbarEnabled"], outputs: ["bottomBarCloseClickEvent", "bottomBarButtonClickEvent"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ScaffoldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: ScaffoldComponent, isStandalone: false, 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, static: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, static: 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 && 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:100vh}.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(100vh - var(--header-height))}.lf-scaffold .lf-content-wrapper.lf-show-navbar-mobile{height:calc(100vh - var(--navbar-height-mobile))}.lf-scaffold .lf-content-wrapper.lf-show-header-and-navbar-mobile{top:var(--header-height);height:calc(100vh - 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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$5.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { 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", "bottomBarEnabled"], outputs: ["floatingButtonConfigUpdateEvent", "floatingButtonClickEvent"] }, { kind: "component", type: BottomBarComponent, selector: "lf-bottom-bar", inputs: ["libraryConfig", "bottomBarConfig", "isMobile", "navbarEnabled"], outputs: ["bottomBarCloseClickEvent", "bottomBarButtonClickEvent"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ScaffoldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ScaffoldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lf-scaffold', standalone: false, template: "<!-- header-height: 64px; navbar-size: 80px; floating-button-bottom: 24px -->\r\n\r\n<div\r\n  class=\"lf-scaffold lf-transitions mat-app-background mat-typography\"\r\n  [ngClass]=\"scaffoldConfig?.cssClass\">\r\n  <!-- loading overlay -->\r\n  @if (scaffoldConfig?.loading) {\r\n    <lf-loading-overlay></lf-loading-overlay>\r\n  }\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      </div>\r\n      <!-- footer -->\r\n      <lf-footer [libraryConfig]=\"libraryConfig\" [footerConfig]=\"footerConfig\"></lf-footer>\r\n    </lf-drawer>\r\n  </div>\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 && navbarConfig?.enable!\"\r\n    [bottomBarEnabled]=\"bottomBarConfig?.enable!\"\r\n    (floatingButtonConfigUpdateEvent)=\"floatingButtonConfigUpdated($event)\"\r\n    (floatingButtonClickEvent)=\"floatingButtonClicked($event)\"></lf-floating-button>\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:100vh}.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(100vh - var(--header-height))}.lf-scaffold .lf-content-wrapper.lf-show-navbar-mobile{height:calc(100vh - var(--navbar-height-mobile))}.lf-scaffold .lf-content-wrapper.lf-show-header-and-navbar-mobile{top:var(--header-height);height:calc(100vh - var(--header-height) - var(--navbar-height-mobile))}.lf-scaffold .lf-content-wrapper .lf-content{padding-left:var(--content-padding);padding-right: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)}.lf-scaffold .lf-content-wrapper .lf-content.lf-show-footer{min-height:100%}\n"] }]
+            args: [{ selector: 'lf-scaffold', standalone: false, 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 && 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:100vh}.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(100vh - var(--header-height))}.lf-scaffold .lf-content-wrapper.lf-show-navbar-mobile{height:calc(100vh - var(--navbar-height-mobile))}.lf-scaffold .lf-content-wrapper.lf-show-header-and-navbar-mobile{top:var(--header-height);height:calc(100vh - 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"] }]
         }], propDecorators: { scrollContainer: [{
                 type: ViewChild,
                 args: ['scrollContainer', { static: true }]
@@ -1413,8 +1446,8 @@ class ScaffoldModule {
             ]
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ScaffoldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: ScaffoldModule, declarations: [ScaffoldComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ScaffoldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.1", ngImport: i0, type: ScaffoldModule, declarations: [ScaffoldComponent,
             LoadingOverlayComponent,
             HeaderComponent,
             NavbarComponent,
@@ -1426,15 +1459,13 @@ class ScaffoldModule {
             BottomBarComponent], imports: [BrowserModule,
             RouterModule,
             SharedModule,
-            InputComponent,
-            IconComponent], exports: [ScaffoldComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ScaffoldModule, imports: [BrowserModule,
+            InputComponent], exports: [ScaffoldComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ScaffoldModule, imports: [BrowserModule,
             RouterModule,
             SharedModule,
-            InputComponent,
-            IconComponent] }); }
+            InputComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ScaffoldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ScaffoldModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -1453,8 +1484,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                         BrowserModule,
                         RouterModule,
                         SharedModule,
-                        InputComponent,
-                        IconComponent
+                        InputComponent
                     ],
                     exports: [
                         ScaffoldComponent
@@ -1464,14 +1494,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
 
 class PlaceholderComponent {
     constructor() {
+        this.libraryConfig = inject(CONFIG, { optional: true });
         this.buttonClickEvent = new EventEmitter();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: PlaceholderComponent, isStandalone: true, selector: "lf-placeholder", inputs: { placeholderConfig: "placeholderConfig" }, outputs: { buttonClickEvent: "buttonClickEvent" }, ngImport: i0, template: "@if (placeholderConfig) {\r\n  <div class=\"lf-placeholder\" [ngClass]=\"placeholderConfig.cssClass\">\r\n    <!-- icon -->\r\n    <lf-icon\r\n      [matIcon]=\"placeholderConfig.matIcon!\"\r\n      [svgIcon]=\"placeholderConfig.svgIcon!\"></lf-icon>\r\n    <!-- heading -->\r\n    @if (placeholderConfig.title) {\r\n      <p class=\"lf-placeholder-title\">\r\n        {{ placeholderConfig.title }}\r\n      </p>\r\n    }\r\n    <!-- message -->\r\n    @if (placeholderConfig.message) {\r\n      <p class=\"lf-placeholder-message\">\r\n        {{ placeholderConfig.message }}\r\n      </p>\r\n    }\r\n    <!-- action -->\r\n    @if (placeholderConfig.button) {\r\n      <button\r\n        mat-button\r\n        class=\"mt-4\"\r\n        color=\"accent\"\r\n        [ngClass]=\"placeholderConfig.button.cssClass\"\r\n        (click)=\"buttonClickEvent.emit()\"\r\n        [matTooltip]=\"placeholderConfig.button.tooltip\">\r\n        @if (placeholderConfig.button.matIcon || placeholderConfig.button.svgIcon) {\r\n          <lf-icon\r\n            [matIcon]=\"placeholderConfig.button.matIcon\"\r\n            [svgIcon]=\"placeholderConfig.button.svgIcon\"\r\n            verticalAlign=\"bottom\"></lf-icon>\r\n        }\r\n        {{ placeholderConfig.button.label }}\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".lf-placeholder{display:flex;flex-flow:column;align-items:center;justify-content:center;text-align:center}.lf-placeholder ::ng-deep .lf-icon{width:var(--placeholder-icon-size);height:var(--placeholder-icon-size);font-size:var(--placeholder-icon-size);color:var(--color-gray)}.lf-placeholder .lf-placeholder-title{margin:0;font-size:var(--placeholder-title-font-size);color:var(--color-gray)}.lf-placeholder .lf-placeholder-message{margin:0;font-size:var(--placeholder-message-font-size);color:var(--color-gray)}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.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: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: IconComponent, selector: "lf-icon", inputs: ["matIcon", "svgIcon", "verticalAlign"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: PlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: PlaceholderComponent, isStandalone: true, selector: "lf-placeholder", inputs: { placeholderConfig: "placeholderConfig" }, outputs: { buttonClickEvent: "buttonClickEvent" }, ngImport: i0, template: "@if (placeholderConfig) {\r\n  <div class=\"lf-placeholder\" [ngClass]=\"placeholderConfig.cssClass\">\r\n    <!-- icon -->\r\n    @if (placeholderConfig.matIcon) {\r\n      <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n        {{ placeholderConfig.matIcon }}\r\n      </mat-icon>\r\n    } @else if (placeholderConfig.svgIcon) {\r\n      <mat-icon [svgIcon]=\"placeholderConfig.svgIcon\"></mat-icon>\r\n    }\r\n    <!-- heading -->\r\n    @if (placeholderConfig.title) {\r\n      <p class=\"lf-placeholder-title\">\r\n        {{ placeholderConfig.title }}\r\n      </p>\r\n    }\r\n    <!-- message -->\r\n    @if (placeholderConfig.message) {\r\n      <p class=\"lf-placeholder-message\">\r\n        {{ placeholderConfig.message }}\r\n      </p>\r\n    }\r\n    <!-- action -->\r\n    @if (placeholderConfig.button) {\r\n      <button\r\n        mat-button\r\n        class=\"mt-4\"\r\n        color=\"accent\"\r\n        [ngClass]=\"placeholderConfig.button.cssClass\"\r\n        (click)=\"buttonClickEvent.emit()\"\r\n        [matTooltip]=\"placeholderConfig.button.tooltip\">\r\n        <!-- icon -->\r\n        @if (placeholderConfig.button.matIcon) {\r\n          <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n            {{ placeholderConfig.button.matIcon }}\r\n          </mat-icon>\r\n        } @else if (placeholderConfig.button.svgIcon) {\r\n          <mat-icon [svgIcon]=\"placeholderConfig.button.svgIcon\"></mat-icon>\r\n        }\r\n        {{ placeholderConfig.button.label }}\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".lf-placeholder{display:flex;flex-flow:column;align-items:center;justify-content:center;text-align:center}.lf-placeholder ::ng-deep .mat-icon{width:var(--placeholder-icon-size);height:var(--placeholder-icon-size);font-size:var(--placeholder-icon-size);line-height:var(--placeholder-icon-size);color:var(--color-gray)}.lf-placeholder .lf-placeholder-title{margin:0;font-size:var(--placeholder-title-font-size);color:var(--color-gray)}.lf-placeholder .lf-placeholder-message{margin:0;font-size:var(--placeholder-message-font-size);color:var(--color-gray)}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.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: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PlaceholderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: PlaceholderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lf-placeholder', standalone: true, imports: [SharedModule, IconComponent], template: "@if (placeholderConfig) {\r\n  <div class=\"lf-placeholder\" [ngClass]=\"placeholderConfig.cssClass\">\r\n    <!-- icon -->\r\n    <lf-icon\r\n      [matIcon]=\"placeholderConfig.matIcon!\"\r\n      [svgIcon]=\"placeholderConfig.svgIcon!\"></lf-icon>\r\n    <!-- heading -->\r\n    @if (placeholderConfig.title) {\r\n      <p class=\"lf-placeholder-title\">\r\n        {{ placeholderConfig.title }}\r\n      </p>\r\n    }\r\n    <!-- message -->\r\n    @if (placeholderConfig.message) {\r\n      <p class=\"lf-placeholder-message\">\r\n        {{ placeholderConfig.message }}\r\n      </p>\r\n    }\r\n    <!-- action -->\r\n    @if (placeholderConfig.button) {\r\n      <button\r\n        mat-button\r\n        class=\"mt-4\"\r\n        color=\"accent\"\r\n        [ngClass]=\"placeholderConfig.button.cssClass\"\r\n        (click)=\"buttonClickEvent.emit()\"\r\n        [matTooltip]=\"placeholderConfig.button.tooltip\">\r\n        @if (placeholderConfig.button.matIcon || placeholderConfig.button.svgIcon) {\r\n          <lf-icon\r\n            [matIcon]=\"placeholderConfig.button.matIcon\"\r\n            [svgIcon]=\"placeholderConfig.button.svgIcon\"\r\n            verticalAlign=\"bottom\"></lf-icon>\r\n        }\r\n        {{ placeholderConfig.button.label }}\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".lf-placeholder{display:flex;flex-flow:column;align-items:center;justify-content:center;text-align:center}.lf-placeholder ::ng-deep .lf-icon{width:var(--placeholder-icon-size);height:var(--placeholder-icon-size);font-size:var(--placeholder-icon-size);color:var(--color-gray)}.lf-placeholder .lf-placeholder-title{margin:0;font-size:var(--placeholder-title-font-size);color:var(--color-gray)}.lf-placeholder .lf-placeholder-message{margin:0;font-size:var(--placeholder-message-font-size);color:var(--color-gray)}\n"] }]
+            args: [{ selector: 'lf-placeholder', standalone: true, imports: [SharedModule], template: "@if (placeholderConfig) {\r\n  <div class=\"lf-placeholder\" [ngClass]=\"placeholderConfig.cssClass\">\r\n    <!-- icon -->\r\n    @if (placeholderConfig.matIcon) {\r\n      <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n        {{ placeholderConfig.matIcon }}\r\n      </mat-icon>\r\n    } @else if (placeholderConfig.svgIcon) {\r\n      <mat-icon [svgIcon]=\"placeholderConfig.svgIcon\"></mat-icon>\r\n    }\r\n    <!-- heading -->\r\n    @if (placeholderConfig.title) {\r\n      <p class=\"lf-placeholder-title\">\r\n        {{ placeholderConfig.title }}\r\n      </p>\r\n    }\r\n    <!-- message -->\r\n    @if (placeholderConfig.message) {\r\n      <p class=\"lf-placeholder-message\">\r\n        {{ placeholderConfig.message }}\r\n      </p>\r\n    }\r\n    <!-- action -->\r\n    @if (placeholderConfig.button) {\r\n      <button\r\n        mat-button\r\n        class=\"mt-4\"\r\n        color=\"accent\"\r\n        [ngClass]=\"placeholderConfig.button.cssClass\"\r\n        (click)=\"buttonClickEvent.emit()\"\r\n        [matTooltip]=\"placeholderConfig.button.tooltip\">\r\n        <!-- icon -->\r\n        @if (placeholderConfig.button.matIcon) {\r\n          <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n            {{ placeholderConfig.button.matIcon }}\r\n          </mat-icon>\r\n        } @else if (placeholderConfig.button.svgIcon) {\r\n          <mat-icon [svgIcon]=\"placeholderConfig.button.svgIcon\"></mat-icon>\r\n        }\r\n        {{ placeholderConfig.button.label }}\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".lf-placeholder{display:flex;flex-flow:column;align-items:center;justify-content:center;text-align:center}.lf-placeholder ::ng-deep .mat-icon{width:var(--placeholder-icon-size);height:var(--placeholder-icon-size);font-size:var(--placeholder-icon-size);line-height:var(--placeholder-icon-size);color:var(--color-gray)}.lf-placeholder .lf-placeholder-title{margin:0;font-size:var(--placeholder-title-font-size);color:var(--color-gray)}.lf-placeholder .lf-placeholder-message{margin:0;font-size:var(--placeholder-message-font-size);color:var(--color-gray)}\n"] }]
         }], propDecorators: { placeholderConfig: [{
                 type: Input
             }], buttonClickEvent: [{
@@ -1480,6 +1511,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
 
 class FileUploadComponent {
     constructor() {
+        this.libraryConfig = inject(CONFIG, { optional: true });
         this.logger = inject(Logger);
         this.color = 'primary';
         this.disabled = false;
@@ -1498,12 +1530,12 @@ class FileUploadComponent {
     triggerInput() {
         this.fileElement.nativeElement.click();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: FileUploadComponent, isStandalone: true, selector: "lf-file-upload", inputs: { color: "color", label: "label", matIcon: "matIcon", disabled: "disabled", accept: "accept", tooltip: "tooltip" }, outputs: { fileChangeEvent: "fileChangeEvent" }, viewQueries: [{ propertyName: "fileElement", first: true, predicate: ["file"], descendants: true }], ngImport: i0, template: "<input\r\n  hidden\r\n  #file\r\n  type=\"file\"\r\n  [accept]=\"accept\"\r\n  onclick=\"this.value=null\"\r\n  (change)=\"selectFile($event)\" />\r\n\r\n<button\r\n  mat-flat-button\r\n  class=\"lf-button\"\r\n  type=\"button\"\r\n  [color]=\"color\"\r\n  [disabled]=\"disabled\"\r\n  (click)=\"triggerInput()\"\r\n  [matTooltip]=\"tooltip\">\r\n  @if (matIcon) {\r\n    <mat-icon>{{ matIcon }}</mat-icon>\r\n  }\r\n  {{ label }}\r\n</button>\r\n", styles: [".lf-button{width:inherit}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.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: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: FileUploadComponent, isStandalone: true, selector: "lf-file-upload", inputs: { color: "color", label: "label", matIcon: "matIcon", disabled: "disabled", accept: "accept", tooltip: "tooltip" }, outputs: { fileChangeEvent: "fileChangeEvent" }, viewQueries: [{ propertyName: "fileElement", first: true, predicate: ["file"], descendants: true }], ngImport: i0, template: "<input\r\n  hidden\r\n  #file\r\n  type=\"file\"\r\n  [accept]=\"accept\"\r\n  onclick=\"this.value = null\"\r\n  (change)=\"selectFile($event)\" />\r\n\r\n<button\r\n  mat-flat-button\r\n  class=\"lf-button\"\r\n  type=\"button\"\r\n  [color]=\"color\"\r\n  [disabled]=\"disabled\"\r\n  (click)=\"triggerInput()\"\r\n  [matTooltip]=\"tooltip\">\r\n  <!-- icon -->\r\n  @if (matIcon) {\r\n    <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n      {{ matIcon }}\r\n    </mat-icon>\r\n  }\r\n  <!-- @else if (svgIcon) {\r\n    <mat-icon [svgIcon]=\"svgIcon\"></mat-icon>\r\n  } -->\r\n  {{ label }}\r\n</button>\r\n", styles: [".lf-button{width:inherit}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.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: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FileUploadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: FileUploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lf-file-upload', standalone: true, imports: [SharedModule], template: "<input\r\n  hidden\r\n  #file\r\n  type=\"file\"\r\n  [accept]=\"accept\"\r\n  onclick=\"this.value=null\"\r\n  (change)=\"selectFile($event)\" />\r\n\r\n<button\r\n  mat-flat-button\r\n  class=\"lf-button\"\r\n  type=\"button\"\r\n  [color]=\"color\"\r\n  [disabled]=\"disabled\"\r\n  (click)=\"triggerInput()\"\r\n  [matTooltip]=\"tooltip\">\r\n  @if (matIcon) {\r\n    <mat-icon>{{ matIcon }}</mat-icon>\r\n  }\r\n  {{ label }}\r\n</button>\r\n", styles: [".lf-button{width:inherit}\n"] }]
+            args: [{ selector: 'lf-file-upload', standalone: true, imports: [SharedModule], template: "<input\r\n  hidden\r\n  #file\r\n  type=\"file\"\r\n  [accept]=\"accept\"\r\n  onclick=\"this.value = null\"\r\n  (change)=\"selectFile($event)\" />\r\n\r\n<button\r\n  mat-flat-button\r\n  class=\"lf-button\"\r\n  type=\"button\"\r\n  [color]=\"color\"\r\n  [disabled]=\"disabled\"\r\n  (click)=\"triggerInput()\"\r\n  [matTooltip]=\"tooltip\">\r\n  <!-- icon -->\r\n  @if (matIcon) {\r\n    <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n      {{ matIcon }}\r\n    </mat-icon>\r\n  }\r\n  <!-- @else if (svgIcon) {\r\n    <mat-icon [svgIcon]=\"svgIcon\"></mat-icon>\r\n  } -->\r\n  {{ label }}\r\n</button>\r\n", styles: [".lf-button{width:inherit}\n"] }]
         }], propDecorators: { fileElement: [{
                 type: ViewChild,
                 args: ['file']
@@ -1527,10 +1559,10 @@ class ListItemAvatarDirective {
     constructor() {
         this.templateRef = inject((TemplateRef));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ListItemAvatarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: ListItemAvatarDirective, isStandalone: true, selector: "[lfListItemAvatar]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ListItemAvatarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.1", type: ListItemAvatarDirective, isStandalone: true, selector: "[lfListItemAvatar]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ListItemAvatarDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ListItemAvatarDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[lfListItemAvatar]'
@@ -1541,10 +1573,10 @@ class ListItemButtonsDirective {
     constructor() {
         this.templateRef = inject((TemplateRef));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ListItemButtonsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: ListItemButtonsDirective, isStandalone: true, selector: "[lfListItemButtons]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ListItemButtonsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.1", type: ListItemButtonsDirective, isStandalone: true, selector: "[lfListItemButtons]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ListItemButtonsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ListItemButtonsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[lfListItemButtons]'
@@ -1555,10 +1587,10 @@ class ListItemSubtitleDirective {
     constructor() {
         this.templateRef = inject((TemplateRef));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ListItemSubtitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: ListItemSubtitleDirective, isStandalone: true, selector: "[lfListItemSubtitle]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ListItemSubtitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.1", type: ListItemSubtitleDirective, isStandalone: true, selector: "[lfListItemSubtitle]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ListItemSubtitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ListItemSubtitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[lfListItemSubtitle]'
@@ -1569,10 +1601,10 @@ class ListItemTitleDirective {
     constructor() {
         this.templateRef = inject((TemplateRef));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ListItemTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: ListItemTitleDirective, isStandalone: true, selector: "[lfListItemTitle]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ListItemTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.1", type: ListItemTitleDirective, isStandalone: true, selector: "[lfListItemTitle]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ListItemTitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ListItemTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[lfListItemTitle]'
@@ -1581,6 +1613,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
 
 class ListComponent {
     constructor() {
+        this.libraryConfig = inject(CONFIG, { optional: true });
         this.config = null;
         this.header = null;
         this.items = [];
@@ -1666,12 +1699,12 @@ class ListComponent {
         // click.stopPropagation();
         click.stopImmediatePropagation();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: ListComponent, isStandalone: true, selector: "lf-list", inputs: { config: "config", header: "header", items: "items", groupedItems: "groupedItems", buttons: "buttons", dropListId: "dropListId", connectedDropListIds: "connectedDropListIds" }, outputs: { sortChangeEvent: "sortChangeEvent", selectionChangeEvent: "selectionChangeEvent", itemClickEvent: "itemClickEvent", itemDropEvent: "itemDropEvent", buttonClickEvent: "buttonClickEvent" }, queries: [{ propertyName: "avatarTemplate", first: true, predicate: ListItemAvatarDirective, descendants: true }, { propertyName: "titleTemplate", first: true, predicate: ListItemTitleDirective, descendants: true }, { propertyName: "subtitleTemplate", first: true, predicate: ListItemSubtitleDirective, descendants: true }, { propertyName: "buttonsTemplate", first: true, predicate: ListItemButtonsDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"lf-list\" cdkDropListGroup>\r\n  <!-- Header -->\r\n  @if (header) {\r\n    <div class=\"lf-list-item lf-list-item-header\">\r\n      <!-- avatar -->\r\n      @if (header.avatar) {\r\n        <div class=\"lf-list-item-avatar px-2\">\r\n          <img [src]=\"header.avatar\" alt=\"Avatar of header\" (error)=\"onImageError($event)\" />\r\n        </div>\r\n      } @else if (header.matIcon || header.svgIcon) {\r\n        <div class=\"lf-list-item-avatar px-2\">\r\n          <lf-icon [matIcon]=\"header.matIcon\" [svgIcon]=\"header.svgIcon\"></lf-icon>\r\n        </div>\r\n      } @else if (hasAvatars) {\r\n        <div class=\"lf-list-item-avatar px-2\"></div>\r\n      }\r\n\r\n      <!-- title -->\r\n      <div class=\"lf-list-item-title-wrapper flex-row px-2\">\r\n        @for (item of header.items; track $index) {\r\n          <span [class.clickable]=\"item.sortToken\" (click)=\"updateSortToken(item.sortToken)\">\r\n            {{ item.title }}\r\n            @if (sortToken === item.sortToken) {\r\n              <mat-icon class=\"lf-list-item-sort-icon\">\r\n                {{ sortAsc ? \"arrow_downward\" : \"arrow_upward\" }}\r\n              </mat-icon>\r\n            }\r\n          </span>\r\n        }\r\n      </div>\r\n\r\n      <!-- buttons -->\r\n      <div class=\"lf-list-item-buttons\">\r\n        @for (button of header.buttons; track button.id) {\r\n          @if (button.label) {\r\n            <button\r\n              mat-button\r\n              class=\"lf-list-item-button ml-2\"\r\n              [class.disabled]=\"button.disabled\"\r\n              [ngClass]=\"button.cssClass\"\r\n              [disabled]=\"button.disabled\"\r\n              [matTooltip]=\"button.tooltip\"\r\n              (click)=\"clickButton({ buttonId: button.id, item: null! }, $event)\">\r\n              @if (button.matIcon || button.svgIcon) {\r\n                <lf-icon\r\n                  [matIcon]=\"button.matIcon\"\r\n                  [svgIcon]=\"button.svgIcon\"\r\n                  verticalAlign=\"bottom\"></lf-icon>\r\n              }\r\n              {{ button.label }}\r\n            </button>\r\n          } @else {\r\n            <button\r\n              mat-icon-button\r\n              class=\"lf-list-item-icon ml-2\"\r\n              [class.disabled]=\"button.disabled\"\r\n              [ngClass]=\"button.cssClass\"\r\n              [disabled]=\"button.disabled\"\r\n              [matTooltip]=\"button.tooltip\"\r\n              (click)=\"clickButton({ buttonId: button.id, item: null! }, $event)\">\r\n              <lf-icon [matIcon]=\"button.matIcon\" [svgIcon]=\"button.svgIcon\"></lf-icon>\r\n            </button>\r\n          }\r\n        }\r\n      </div>\r\n\r\n      <!-- checkbox -->\r\n      @if (config?.enableSelection) {\r\n        <div class=\"lf-list-item-checkbox ml-3\">\r\n          <mat-checkbox\r\n            [(ngModel)]=\"allSelected\"\r\n            [indeterminate]=\"someSelected\"\r\n            (change)=\"selectAll($event)\"></mat-checkbox>\r\n        </div>\r\n      }\r\n    </div>\r\n    <mat-divider></mat-divider>\r\n  }\r\n\r\n  <!-- Grouped Items -->\r\n  @if (config?.mode === \"group\" && groupedItems) {\r\n    @for (group of groupedItems | keyvalue; track group.key; let first = $first) {\r\n      <div class=\"lf-list-group\" [class.mt-4]=\"!first\">\r\n        @if (group.key) {\r\n          <div class=\"lf-list-item lf-list-group-header\">\r\n            <div class=\"lf-list-item-avatar px-2\"></div>\r\n            <div class=\"lf-list-item-title-wrapper flex-row px-2\">\r\n              <span>{{ group.key }}</span>\r\n            </div>\r\n          </div>\r\n        }\r\n        <div\r\n          [id]=\"group.key\"\r\n          cdkDropList\r\n          [cdkDropListData]=\"group.value\"\r\n          [cdkDropListDisabled]=\"!config?.enableDragging\"\r\n          [cdkDropListConnectedTo]=\"connectedDropListIds\"\r\n          (cdkDropListDropped)=\"dropItem($event, group.key)\"\r\n          [class.drop-zone]=\"config?.enableDragging && group.value.length <= 0\">\r\n          @for (item of group.value; track item.id; let last = $last) {\r\n            <div\r\n              cdkDrag\r\n              [cdkDragData]=\"item\"\r\n              [cdkDragDisabled]=\"item.disabled || !config?.enableDragging\">\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"listItemTemplate\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: item, last: last }\"></ng-container>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n    <!-- Flat Items -->\r\n  } @else {\r\n    <div\r\n      [id]=\"dropListId\"\r\n      cdkDropList\r\n      [cdkDropListData]=\"items\"\r\n      [cdkDropListDisabled]=\"!config?.enableDragging\"\r\n      [cdkDropListConnectedTo]=\"connectedDropListIds\"\r\n      (cdkDropListDropped)=\"dropItem($event, dropListId)\"\r\n      [class.drop-zone]=\"config?.enableDragging && items.length <= 0\">\r\n      @for (item of items; track item.id; let last = $last) {\r\n        <div\r\n          cdkDrag\r\n          [cdkDragData]=\"item\"\r\n          [cdkDragDisabled]=\"item.disabled || !config?.enableDragging\">\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"listItemTemplate\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: item, last: last }\"></ng-container>\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <!-- Item (template) -->\r\n  <ng-template #listItemTemplate let-item let-last=\"last\">\r\n    <div\r\n      class=\"lf-list-item lf-list-item-data\"\r\n      [class.active]=\"item.checked\"\r\n      [class.disabled]=\"item.disabled\"\r\n      [class.clickable]=\"item.clickable && !item.disabled\"\r\n      [ngClass]=\"item.cssClass\"\r\n      matRipple\r\n      [matRippleDisabled]=\"!item.clickable\"\r\n      (click)=\"item.clickable && !item.disabled ? clickItem(item, $event) : null\">\r\n      <!-- avatar -->\r\n      @if (avatarTemplate) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"avatarTemplate.templateRef\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n      } @else if (item.avatar) {\r\n        <div class=\"lf-list-item-avatar px-2\">\r\n          <img\r\n            [src]=\"item.avatar\"\r\n            [alt]=\"'Avatar of ' + item.title\"\r\n            (error)=\"onImageError($event)\" />\r\n        </div>\r\n      } @else if (item.matIcon || item.svgIcon) {\r\n        <div class=\"lf-list-item-avatar px-2\">\r\n          <lf-icon [matIcon]=\"item.matIcon\" [svgIcon]=\"item.svgIcon\"></lf-icon>\r\n        </div>\r\n      }\r\n\r\n      <!-- title -->\r\n      <div class=\"lf-list-item-title-wrapper px-2\">\r\n        <span class=\"lf-list-item-title\">\r\n          @if (titleTemplate) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"titleTemplate.templateRef\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n          } @else {\r\n            {{ item.title }}\r\n          }\r\n        </span>\r\n        @if (item.subtitle || subtitleTemplate) {\r\n          <span class=\"lf-list-item-subtitle\">\r\n            @if (subtitleTemplate) {\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"subtitleTemplate.templateRef\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n            } @else {\r\n              {{ item.subtitle }}\r\n            }\r\n          </span>\r\n        }\r\n      </div>\r\n\r\n      <!-- buttons -->\r\n      <div class=\"lf-list-item-buttons\">\r\n        @if (buttonsTemplate) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"buttonsTemplate.templateRef\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n        } @else {\r\n          @let combinedButtons = getCombinedButtons(item);\r\n          @for (button of combinedButtons; track button.id) {\r\n            @if (!item.hiddenButtonIds?.includes(button.id)) {\r\n              @let disabled =\r\n                button.disabled || item.disabled || item.disabledButtonIds?.includes(button.id);\r\n              @if (button.label) {\r\n                <button\r\n                  mat-button\r\n                  class=\"lf-list-item-button ml-2\"\r\n                  [class.disabled]=\"disabled\"\r\n                  [ngClass]=\"button.cssClass\"\r\n                  [disabled]=\"disabled\"\r\n                  [matTooltip]=\"button.tooltip\"\r\n                  (click)=\"clickButton({ buttonId: button.id, item }, $event)\">\r\n                  @if (button.matIcon || button.svgIcon) {\r\n                    <lf-icon\r\n                      [matIcon]=\"button.matIcon\"\r\n                      [svgIcon]=\"button.svgIcon\"\r\n                      verticalAlign=\"bottom\"></lf-icon>\r\n                  }\r\n                  {{ button.label }}\r\n                </button>\r\n              } @else {\r\n                <button\r\n                  mat-icon-button\r\n                  class=\"lf-list-item-icon ml-2\"\r\n                  [class.disabled]=\"disabled\"\r\n                  [ngClass]=\"button.cssClass\"\r\n                  [disabled]=\"disabled\"\r\n                  [matTooltip]=\"button.tooltip\"\r\n                  (click)=\"clickButton({ buttonId: button.id, item }, $event)\">\r\n                  <lf-icon [matIcon]=\"button.matIcon\" [svgIcon]=\"button.svgIcon\"></lf-icon>\r\n                </button>\r\n              }\r\n            }\r\n          }\r\n        }\r\n\r\n        <!-- drag -->\r\n        @if (config?.enableDragging) {\r\n          <button\r\n            mat-icon-button\r\n            class=\"lf-list-item-icon ml-2\"\r\n            [class.disabled]=\"item.disabled\"\r\n            [disabled]=\"item.disabled\"\r\n            (click)=\"stopPropagation($event)\"\r\n            cdkDragHandle>\r\n            <mat-icon>drag_indicator</mat-icon>\r\n          </button>\r\n        }\r\n      </div>\r\n\r\n      <!-- checkbox -->\r\n      @if (config?.enableSelection) {\r\n        <div class=\"lf-list-item-checkbox ml-3\">\r\n          <mat-checkbox\r\n            [(ngModel)]=\"item.checked\"\r\n            [disabled]=\"item.disabled!\"\r\n            (change)=\"selectItem(item, $event)\"\r\n            (click)=\"stopPropagation($event)\"></mat-checkbox>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    @if (config?.showDividers && !last) {\r\n      <mat-divider></mat-divider>\r\n    }\r\n  </ng-template>\r\n</div>\r\n", styles: [".lf-list,.lf-list .lf-list-group{width:100%}.lf-list .lf-list-group .lf-list-group-header{font-weight:500;height:calc(var(--list-item-height) - 16px)}.lf-list-item{width:100%;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;height:var(--list-item-height);border-radius:var(--list-item-border-radius);box-sizing:border-box;overflow:hidden}.lf-list-item.disabled .lf-list-item-title-wrapper{opacity:.64}.lf-list-item .lf-list-item-sort-icon{font-size:var(--list-item-sort-icon-size);width:var(--list-item-sort-icon-size);height:var(--list-item-sort-icon-size);vertical-align:text-top}.lf-list-item .lf-list-item-checkbox{flex:0 0 var(--list-item-checkbox-width)}.lf-list-item .lf-list-item-avatar{flex:0 0 var(--list-item-avatar-size);display:flex;align-items:center;justify-content:center}.lf-list-item .lf-list-item-avatar img{width:var(--list-item-avatar-size);height:var(--list-item-avatar-size);border-radius:50%;object-fit:cover}.lf-list-item .lf-list-item-title-wrapper{display:flex;flex-flow:column;align-items:flex-start;flex:1 1 var(--list-item-title-width);overflow:hidden}.lf-list-item .lf-list-item-title-wrapper .lf-list-item-title{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.lf-list-item .lf-list-item-title-wrapper .lf-list-item-subtitle{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.8rem}.lf-list-item .lf-list-item-buttons{flex:0 0 auto;display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between}.lf-list-item.lf-list-item-header{font-weight:500}.lf-list-item.lf-list-item-header .lf-list-item-title-wrapper span{width:var(--list-item-title-wrapper-width)}.lf-list-item.lf-list-item-data:hover{background-color:#00000014}.lf-list-item .flex-row{display:flex!important;flex-flow:row nowrap;align-items:center}.drop-zone{width:100%;height:var(--list-item-height);border:2px dashed var(--color-gray);border-radius:var(--list-item-border-radius);box-sizing:border-box}.clickable{cursor:pointer!important}.cdk-drag-preview{color:var(--mat-app-text-color, inherit)!important;background:var(--mat-app-background-color, inherit)!important;box-sizing:border-box;border-radius:var(--list-item-border-radius);opacity:.8;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.4}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$3.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i2.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: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i8.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: i9.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i9.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i9.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i9.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: IconComponent, selector: "lf-icon", inputs: ["matIcon", "svgIcon", "verticalAlign"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: ListComponent, isStandalone: true, selector: "lf-list", inputs: { config: "config", header: "header", items: "items", groupedItems: "groupedItems", buttons: "buttons", dropListId: "dropListId", connectedDropListIds: "connectedDropListIds" }, outputs: { sortChangeEvent: "sortChangeEvent", selectionChangeEvent: "selectionChangeEvent", itemClickEvent: "itemClickEvent", itemDropEvent: "itemDropEvent", buttonClickEvent: "buttonClickEvent" }, queries: [{ propertyName: "avatarTemplate", first: true, predicate: ListItemAvatarDirective, descendants: true }, { propertyName: "titleTemplate", first: true, predicate: ListItemTitleDirective, descendants: true }, { propertyName: "subtitleTemplate", first: true, predicate: ListItemSubtitleDirective, descendants: true }, { propertyName: "buttonsTemplate", first: true, predicate: ListItemButtonsDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"lf-list\" cdkDropListGroup>\r\n  <!-- Header -->\r\n  @if (header) {\r\n    <div class=\"lf-list-item lf-list-item-header\">\r\n      <!-- avatar -->\r\n      @if (header.avatar) {\r\n        <div class=\"lf-list-item-avatar px-2\">\r\n          <img [src]=\"header.avatar\" alt=\"Avatar of header\" (error)=\"onImageError($event)\" />\r\n        </div>\r\n      } @else if (header.matIcon || header.svgIcon) {\r\n        <div class=\"lf-list-item-avatar px-2\">\r\n          <!-- icon -->\r\n          @if (header.matIcon) {\r\n            <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n              {{ header.matIcon }}\r\n            </mat-icon>\r\n          } @else if (header.svgIcon) {\r\n            <mat-icon [svgIcon]=\"header.svgIcon\"></mat-icon>\r\n          }\r\n        </div>\r\n      } @else if (hasAvatars) {\r\n        <div class=\"lf-list-item-avatar px-2\"></div>\r\n      }\r\n\r\n      <!-- title -->\r\n      <div class=\"lf-list-item-title-wrapper flex-row px-2\">\r\n        @for (item of header.items; track $index) {\r\n          <span [class.clickable]=\"item.sortToken\" (click)=\"updateSortToken(item.sortToken)\">\r\n            {{ item.title }}\r\n            @if (sortToken === item.sortToken) {\r\n              <mat-icon class=\"lf-list-item-sort-icon\">\r\n                {{ sortAsc ? \"arrow_downward\" : \"arrow_upward\" }}\r\n              </mat-icon>\r\n            }\r\n          </span>\r\n        }\r\n      </div>\r\n\r\n      <!-- buttons -->\r\n      <div class=\"lf-list-item-buttons\">\r\n        @for (button of header.buttons; track button.id) {\r\n          @if (button.label) {\r\n            <button\r\n              mat-button\r\n              class=\"lf-list-item-button ml-2\"\r\n              [class.disabled]=\"button.disabled\"\r\n              [ngClass]=\"button.cssClass\"\r\n              [disabled]=\"button.disabled\"\r\n              [matTooltip]=\"button.tooltip\"\r\n              (click)=\"clickButton({ buttonId: button.id, item: null! }, $event)\">\r\n              <!-- icon -->\r\n              @if (button.matIcon) {\r\n                <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\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.label }}\r\n            </button>\r\n          } @else {\r\n            <button\r\n              mat-icon-button\r\n              class=\"lf-list-item-icon ml-2\"\r\n              [class.disabled]=\"button.disabled\"\r\n              [ngClass]=\"button.cssClass\"\r\n              [disabled]=\"button.disabled\"\r\n              [matTooltip]=\"button.tooltip\"\r\n              (click)=\"clickButton({ buttonId: button.id, item: null! }, $event)\">\r\n              <!-- icon -->\r\n              @if (button.matIcon) {\r\n                <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\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\r\n      <!-- checkbox -->\r\n      @if (config?.enableSelection) {\r\n        <div class=\"lf-list-item-checkbox ml-3\">\r\n          <mat-checkbox\r\n            [(ngModel)]=\"allSelected\"\r\n            [indeterminate]=\"someSelected\"\r\n            (change)=\"selectAll($event)\"></mat-checkbox>\r\n        </div>\r\n      }\r\n    </div>\r\n    <mat-divider></mat-divider>\r\n  }\r\n\r\n  <!-- Grouped Items -->\r\n  @if (config?.mode === \"group\" && groupedItems) {\r\n    @for (group of groupedItems | keyvalue; track group.key; let first = $first) {\r\n      <div class=\"lf-list-group\" [class.mt-4]=\"!first\">\r\n        @if (group.key) {\r\n          <div class=\"lf-list-item lf-list-group-header\">\r\n            <div class=\"lf-list-item-avatar px-2\"></div>\r\n            <div class=\"lf-list-item-title-wrapper flex-row px-2\">\r\n              <span>{{ group.key }}</span>\r\n            </div>\r\n          </div>\r\n        }\r\n        <div\r\n          [id]=\"group.key\"\r\n          cdkDropList\r\n          [cdkDropListData]=\"group.value\"\r\n          [cdkDropListDisabled]=\"!config?.enableDragging\"\r\n          [cdkDropListConnectedTo]=\"connectedDropListIds\"\r\n          (cdkDropListDropped)=\"dropItem($event, group.key)\"\r\n          [class.drop-zone]=\"config?.enableDragging && group.value.length <= 0\">\r\n          @for (item of group.value; track item.id; let last = $last) {\r\n            <div\r\n              cdkDrag\r\n              [cdkDragData]=\"item\"\r\n              [cdkDragDisabled]=\"item.disabled || !config?.enableDragging\">\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"listItemTemplate\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: item, last: last }\"></ng-container>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n    <!-- Flat Items -->\r\n  } @else {\r\n    <div\r\n      [id]=\"dropListId\"\r\n      cdkDropList\r\n      [cdkDropListData]=\"items\"\r\n      [cdkDropListDisabled]=\"!config?.enableDragging\"\r\n      [cdkDropListConnectedTo]=\"connectedDropListIds\"\r\n      (cdkDropListDropped)=\"dropItem($event, dropListId)\"\r\n      [class.drop-zone]=\"config?.enableDragging && items.length <= 0\">\r\n      @for (item of items; track item.id; let last = $last) {\r\n        <div\r\n          cdkDrag\r\n          [cdkDragData]=\"item\"\r\n          [cdkDragDisabled]=\"item.disabled || !config?.enableDragging\">\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"listItemTemplate\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: item, last: last }\"></ng-container>\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <!-- Item (template) -->\r\n  <ng-template #listItemTemplate let-item let-last=\"last\">\r\n    <div\r\n      class=\"lf-list-item lf-list-item-data\"\r\n      [class.active]=\"item.checked\"\r\n      [class.disabled]=\"item.disabled\"\r\n      [class.clickable]=\"item.clickable && !item.disabled\"\r\n      [ngClass]=\"item.cssClass\"\r\n      matRipple\r\n      [matRippleDisabled]=\"!item.clickable\"\r\n      (click)=\"item.clickable && !item.disabled ? clickItem(item, $event) : null\">\r\n      <!-- avatar -->\r\n      @if (avatarTemplate) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"avatarTemplate.templateRef\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n      } @else if (item.avatar) {\r\n        <div class=\"lf-list-item-avatar px-2\">\r\n          <img\r\n            [src]=\"item.avatar\"\r\n            [alt]=\"'Avatar of ' + item.title\"\r\n            (error)=\"onImageError($event)\" />\r\n        </div>\r\n      } @else if (item.matIcon || item.svgIcon) {\r\n        <div class=\"lf-list-item-avatar px-2\">\r\n          <!-- icon -->\r\n          @if (item.matIcon) {\r\n            <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n              {{ item.matIcon }}\r\n            </mat-icon>\r\n          } @else if (item.svgIcon) {\r\n            <mat-icon [svgIcon]=\"item.svgIcon\"></mat-icon>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      <!-- title -->\r\n      <div class=\"lf-list-item-title-wrapper px-2\">\r\n        <span class=\"lf-list-item-title\">\r\n          @if (titleTemplate) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"titleTemplate.templateRef\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n          } @else {\r\n            {{ item.title }}\r\n          }\r\n        </span>\r\n        @if (item.subtitle || subtitleTemplate) {\r\n          <span class=\"lf-list-item-subtitle\">\r\n            @if (subtitleTemplate) {\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"subtitleTemplate.templateRef\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n            } @else {\r\n              {{ item.subtitle }}\r\n            }\r\n          </span>\r\n        }\r\n      </div>\r\n\r\n      <!-- buttons -->\r\n      <div class=\"lf-list-item-buttons\">\r\n        @if (buttonsTemplate) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"buttonsTemplate.templateRef\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n        } @else {\r\n          @let combinedButtons = getCombinedButtons(item);\r\n          @for (button of combinedButtons; track button.id) {\r\n            @if (!item.hiddenButtonIds?.includes(button.id)) {\r\n              @let disabled =\r\n                button.disabled || item.disabled || item.disabledButtonIds?.includes(button.id);\r\n              @if (button.label) {\r\n                <button\r\n                  mat-button\r\n                  class=\"lf-list-item-button ml-2\"\r\n                  [class.disabled]=\"disabled\"\r\n                  [ngClass]=\"button.cssClass\"\r\n                  [disabled]=\"disabled\"\r\n                  [matTooltip]=\"button.tooltip\"\r\n                  (click)=\"clickButton({ buttonId: button.id, item }, $event)\">\r\n                  <!-- icon -->\r\n                  @if (button.matIcon) {\r\n                    <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\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.label }}\r\n                </button>\r\n              } @else {\r\n                <button\r\n                  mat-icon-button\r\n                  class=\"lf-list-item-icon ml-2\"\r\n                  [class.disabled]=\"disabled\"\r\n                  [ngClass]=\"button.cssClass\"\r\n                  [disabled]=\"disabled\"\r\n                  [matTooltip]=\"button.tooltip\"\r\n                  (click)=\"clickButton({ buttonId: button.id, item }, $event)\">\r\n                  <!-- icon -->\r\n                  @if (button.matIcon) {\r\n                    <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\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          }\r\n        }\r\n\r\n        <!-- drag -->\r\n        @if (config?.enableDragging) {\r\n          <button\r\n            mat-icon-button\r\n            class=\"lf-list-item-icon ml-2\"\r\n            [class.disabled]=\"item.disabled\"\r\n            [disabled]=\"item.disabled\"\r\n            (click)=\"stopPropagation($event)\"\r\n            cdkDragHandle>\r\n            <mat-icon>drag_indicator</mat-icon>\r\n          </button>\r\n        }\r\n      </div>\r\n\r\n      <!-- checkbox -->\r\n      @if (config?.enableSelection) {\r\n        <div class=\"lf-list-item-checkbox ml-3\">\r\n          <mat-checkbox\r\n            [(ngModel)]=\"item.checked\"\r\n            [disabled]=\"item.disabled!\"\r\n            (change)=\"selectItem(item, $event)\"\r\n            (click)=\"stopPropagation($event)\"></mat-checkbox>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    @if (config?.showDividers && !last) {\r\n      <mat-divider></mat-divider>\r\n    }\r\n  </ng-template>\r\n</div>\r\n", styles: [".lf-list,.lf-list .lf-list-group{width:100%}.lf-list .lf-list-group .lf-list-group-header{font-weight:500;height:calc(var(--list-item-height) - 16px)}.lf-list-item{width:100%;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;height:var(--list-item-height);border-radius:var(--list-item-border-radius);box-sizing:border-box;overflow:hidden}.lf-list-item.disabled .lf-list-item-title-wrapper{opacity:.64}.lf-list-item .lf-list-item-sort-icon{font-size:var(--list-item-sort-icon-size);width:var(--list-item-sort-icon-size);height:var(--list-item-sort-icon-size);vertical-align:text-top}.lf-list-item .lf-list-item-checkbox{flex:0 0 var(--list-item-checkbox-width)}.lf-list-item .lf-list-item-avatar{flex:0 0 var(--list-item-avatar-size);display:flex;align-items:center;justify-content:center}.lf-list-item .lf-list-item-avatar img{width:var(--list-item-avatar-size);height:var(--list-item-avatar-size);border-radius:50%;object-fit:cover}.lf-list-item .lf-list-item-title-wrapper{display:flex;flex-flow:column;align-items:flex-start;flex:1 1 var(--list-item-title-width);overflow:hidden}.lf-list-item .lf-list-item-title-wrapper .lf-list-item-title{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.lf-list-item .lf-list-item-title-wrapper .lf-list-item-subtitle{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.8rem}.lf-list-item .lf-list-item-buttons{flex:0 0 auto;display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between}.lf-list-item.lf-list-item-header{font-weight:500}.lf-list-item.lf-list-item-header .lf-list-item-title-wrapper span{width:var(--list-item-title-wrapper-width)}.lf-list-item.lf-list-item-data:hover{background-color:#00000014}.lf-list-item .flex-row{display:flex!important;flex-flow:row nowrap;align-items:center}.drop-zone{width:100%;height:var(--list-item-height);border:2px dashed var(--color-gray);border-radius:var(--list-item-border-radius);box-sizing:border-box}.clickable{cursor:pointer!important}.cdk-drag-preview{color:var(--mat-app-text-color, inherit)!important;background:var(--mat-app-background-color, inherit)!important;box-sizing:border-box;border-radius:var(--list-item-border-radius);opacity:.8;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.4}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$3.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i2.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: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i8.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: i9.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i9.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i9.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i9.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lf-list', standalone: true, imports: [SharedModule, IconComponent], template: "<div class=\"lf-list\" cdkDropListGroup>\r\n  <!-- Header -->\r\n  @if (header) {\r\n    <div class=\"lf-list-item lf-list-item-header\">\r\n      <!-- avatar -->\r\n      @if (header.avatar) {\r\n        <div class=\"lf-list-item-avatar px-2\">\r\n          <img [src]=\"header.avatar\" alt=\"Avatar of header\" (error)=\"onImageError($event)\" />\r\n        </div>\r\n      } @else if (header.matIcon || header.svgIcon) {\r\n        <div class=\"lf-list-item-avatar px-2\">\r\n          <lf-icon [matIcon]=\"header.matIcon\" [svgIcon]=\"header.svgIcon\"></lf-icon>\r\n        </div>\r\n      } @else if (hasAvatars) {\r\n        <div class=\"lf-list-item-avatar px-2\"></div>\r\n      }\r\n\r\n      <!-- title -->\r\n      <div class=\"lf-list-item-title-wrapper flex-row px-2\">\r\n        @for (item of header.items; track $index) {\r\n          <span [class.clickable]=\"item.sortToken\" (click)=\"updateSortToken(item.sortToken)\">\r\n            {{ item.title }}\r\n            @if (sortToken === item.sortToken) {\r\n              <mat-icon class=\"lf-list-item-sort-icon\">\r\n                {{ sortAsc ? \"arrow_downward\" : \"arrow_upward\" }}\r\n              </mat-icon>\r\n            }\r\n          </span>\r\n        }\r\n      </div>\r\n\r\n      <!-- buttons -->\r\n      <div class=\"lf-list-item-buttons\">\r\n        @for (button of header.buttons; track button.id) {\r\n          @if (button.label) {\r\n            <button\r\n              mat-button\r\n              class=\"lf-list-item-button ml-2\"\r\n              [class.disabled]=\"button.disabled\"\r\n              [ngClass]=\"button.cssClass\"\r\n              [disabled]=\"button.disabled\"\r\n              [matTooltip]=\"button.tooltip\"\r\n              (click)=\"clickButton({ buttonId: button.id, item: null! }, $event)\">\r\n              @if (button.matIcon || button.svgIcon) {\r\n                <lf-icon\r\n                  [matIcon]=\"button.matIcon\"\r\n                  [svgIcon]=\"button.svgIcon\"\r\n                  verticalAlign=\"bottom\"></lf-icon>\r\n              }\r\n              {{ button.label }}\r\n            </button>\r\n          } @else {\r\n            <button\r\n              mat-icon-button\r\n              class=\"lf-list-item-icon ml-2\"\r\n              [class.disabled]=\"button.disabled\"\r\n              [ngClass]=\"button.cssClass\"\r\n              [disabled]=\"button.disabled\"\r\n              [matTooltip]=\"button.tooltip\"\r\n              (click)=\"clickButton({ buttonId: button.id, item: null! }, $event)\">\r\n              <lf-icon [matIcon]=\"button.matIcon\" [svgIcon]=\"button.svgIcon\"></lf-icon>\r\n            </button>\r\n          }\r\n        }\r\n      </div>\r\n\r\n      <!-- checkbox -->\r\n      @if (config?.enableSelection) {\r\n        <div class=\"lf-list-item-checkbox ml-3\">\r\n          <mat-checkbox\r\n            [(ngModel)]=\"allSelected\"\r\n            [indeterminate]=\"someSelected\"\r\n            (change)=\"selectAll($event)\"></mat-checkbox>\r\n        </div>\r\n      }\r\n    </div>\r\n    <mat-divider></mat-divider>\r\n  }\r\n\r\n  <!-- Grouped Items -->\r\n  @if (config?.mode === \"group\" && groupedItems) {\r\n    @for (group of groupedItems | keyvalue; track group.key; let first = $first) {\r\n      <div class=\"lf-list-group\" [class.mt-4]=\"!first\">\r\n        @if (group.key) {\r\n          <div class=\"lf-list-item lf-list-group-header\">\r\n            <div class=\"lf-list-item-avatar px-2\"></div>\r\n            <div class=\"lf-list-item-title-wrapper flex-row px-2\">\r\n              <span>{{ group.key }}</span>\r\n            </div>\r\n          </div>\r\n        }\r\n        <div\r\n          [id]=\"group.key\"\r\n          cdkDropList\r\n          [cdkDropListData]=\"group.value\"\r\n          [cdkDropListDisabled]=\"!config?.enableDragging\"\r\n          [cdkDropListConnectedTo]=\"connectedDropListIds\"\r\n          (cdkDropListDropped)=\"dropItem($event, group.key)\"\r\n          [class.drop-zone]=\"config?.enableDragging && group.value.length <= 0\">\r\n          @for (item of group.value; track item.id; let last = $last) {\r\n            <div\r\n              cdkDrag\r\n              [cdkDragData]=\"item\"\r\n              [cdkDragDisabled]=\"item.disabled || !config?.enableDragging\">\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"listItemTemplate\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: item, last: last }\"></ng-container>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n    <!-- Flat Items -->\r\n  } @else {\r\n    <div\r\n      [id]=\"dropListId\"\r\n      cdkDropList\r\n      [cdkDropListData]=\"items\"\r\n      [cdkDropListDisabled]=\"!config?.enableDragging\"\r\n      [cdkDropListConnectedTo]=\"connectedDropListIds\"\r\n      (cdkDropListDropped)=\"dropItem($event, dropListId)\"\r\n      [class.drop-zone]=\"config?.enableDragging && items.length <= 0\">\r\n      @for (item of items; track item.id; let last = $last) {\r\n        <div\r\n          cdkDrag\r\n          [cdkDragData]=\"item\"\r\n          [cdkDragDisabled]=\"item.disabled || !config?.enableDragging\">\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"listItemTemplate\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: item, last: last }\"></ng-container>\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <!-- Item (template) -->\r\n  <ng-template #listItemTemplate let-item let-last=\"last\">\r\n    <div\r\n      class=\"lf-list-item lf-list-item-data\"\r\n      [class.active]=\"item.checked\"\r\n      [class.disabled]=\"item.disabled\"\r\n      [class.clickable]=\"item.clickable && !item.disabled\"\r\n      [ngClass]=\"item.cssClass\"\r\n      matRipple\r\n      [matRippleDisabled]=\"!item.clickable\"\r\n      (click)=\"item.clickable && !item.disabled ? clickItem(item, $event) : null\">\r\n      <!-- avatar -->\r\n      @if (avatarTemplate) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"avatarTemplate.templateRef\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n      } @else if (item.avatar) {\r\n        <div class=\"lf-list-item-avatar px-2\">\r\n          <img\r\n            [src]=\"item.avatar\"\r\n            [alt]=\"'Avatar of ' + item.title\"\r\n            (error)=\"onImageError($event)\" />\r\n        </div>\r\n      } @else if (item.matIcon || item.svgIcon) {\r\n        <div class=\"lf-list-item-avatar px-2\">\r\n          <lf-icon [matIcon]=\"item.matIcon\" [svgIcon]=\"item.svgIcon\"></lf-icon>\r\n        </div>\r\n      }\r\n\r\n      <!-- title -->\r\n      <div class=\"lf-list-item-title-wrapper px-2\">\r\n        <span class=\"lf-list-item-title\">\r\n          @if (titleTemplate) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"titleTemplate.templateRef\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n          } @else {\r\n            {{ item.title }}\r\n          }\r\n        </span>\r\n        @if (item.subtitle || subtitleTemplate) {\r\n          <span class=\"lf-list-item-subtitle\">\r\n            @if (subtitleTemplate) {\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"subtitleTemplate.templateRef\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n            } @else {\r\n              {{ item.subtitle }}\r\n            }\r\n          </span>\r\n        }\r\n      </div>\r\n\r\n      <!-- buttons -->\r\n      <div class=\"lf-list-item-buttons\">\r\n        @if (buttonsTemplate) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"buttonsTemplate.templateRef\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n        } @else {\r\n          @let combinedButtons = getCombinedButtons(item);\r\n          @for (button of combinedButtons; track button.id) {\r\n            @if (!item.hiddenButtonIds?.includes(button.id)) {\r\n              @let disabled =\r\n                button.disabled || item.disabled || item.disabledButtonIds?.includes(button.id);\r\n              @if (button.label) {\r\n                <button\r\n                  mat-button\r\n                  class=\"lf-list-item-button ml-2\"\r\n                  [class.disabled]=\"disabled\"\r\n                  [ngClass]=\"button.cssClass\"\r\n                  [disabled]=\"disabled\"\r\n                  [matTooltip]=\"button.tooltip\"\r\n                  (click)=\"clickButton({ buttonId: button.id, item }, $event)\">\r\n                  @if (button.matIcon || button.svgIcon) {\r\n                    <lf-icon\r\n                      [matIcon]=\"button.matIcon\"\r\n                      [svgIcon]=\"button.svgIcon\"\r\n                      verticalAlign=\"bottom\"></lf-icon>\r\n                  }\r\n                  {{ button.label }}\r\n                </button>\r\n              } @else {\r\n                <button\r\n                  mat-icon-button\r\n                  class=\"lf-list-item-icon ml-2\"\r\n                  [class.disabled]=\"disabled\"\r\n                  [ngClass]=\"button.cssClass\"\r\n                  [disabled]=\"disabled\"\r\n                  [matTooltip]=\"button.tooltip\"\r\n                  (click)=\"clickButton({ buttonId: button.id, item }, $event)\">\r\n                  <lf-icon [matIcon]=\"button.matIcon\" [svgIcon]=\"button.svgIcon\"></lf-icon>\r\n                </button>\r\n              }\r\n            }\r\n          }\r\n        }\r\n\r\n        <!-- drag -->\r\n        @if (config?.enableDragging) {\r\n          <button\r\n            mat-icon-button\r\n            class=\"lf-list-item-icon ml-2\"\r\n            [class.disabled]=\"item.disabled\"\r\n            [disabled]=\"item.disabled\"\r\n            (click)=\"stopPropagation($event)\"\r\n            cdkDragHandle>\r\n            <mat-icon>drag_indicator</mat-icon>\r\n          </button>\r\n        }\r\n      </div>\r\n\r\n      <!-- checkbox -->\r\n      @if (config?.enableSelection) {\r\n        <div class=\"lf-list-item-checkbox ml-3\">\r\n          <mat-checkbox\r\n            [(ngModel)]=\"item.checked\"\r\n            [disabled]=\"item.disabled!\"\r\n            (change)=\"selectItem(item, $event)\"\r\n            (click)=\"stopPropagation($event)\"></mat-checkbox>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    @if (config?.showDividers && !last) {\r\n      <mat-divider></mat-divider>\r\n    }\r\n  </ng-template>\r\n</div>\r\n", styles: [".lf-list,.lf-list .lf-list-group{width:100%}.lf-list .lf-list-group .lf-list-group-header{font-weight:500;height:calc(var(--list-item-height) - 16px)}.lf-list-item{width:100%;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;height:var(--list-item-height);border-radius:var(--list-item-border-radius);box-sizing:border-box;overflow:hidden}.lf-list-item.disabled .lf-list-item-title-wrapper{opacity:.64}.lf-list-item .lf-list-item-sort-icon{font-size:var(--list-item-sort-icon-size);width:var(--list-item-sort-icon-size);height:var(--list-item-sort-icon-size);vertical-align:text-top}.lf-list-item .lf-list-item-checkbox{flex:0 0 var(--list-item-checkbox-width)}.lf-list-item .lf-list-item-avatar{flex:0 0 var(--list-item-avatar-size);display:flex;align-items:center;justify-content:center}.lf-list-item .lf-list-item-avatar img{width:var(--list-item-avatar-size);height:var(--list-item-avatar-size);border-radius:50%;object-fit:cover}.lf-list-item .lf-list-item-title-wrapper{display:flex;flex-flow:column;align-items:flex-start;flex:1 1 var(--list-item-title-width);overflow:hidden}.lf-list-item .lf-list-item-title-wrapper .lf-list-item-title{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.lf-list-item .lf-list-item-title-wrapper .lf-list-item-subtitle{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.8rem}.lf-list-item .lf-list-item-buttons{flex:0 0 auto;display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between}.lf-list-item.lf-list-item-header{font-weight:500}.lf-list-item.lf-list-item-header .lf-list-item-title-wrapper span{width:var(--list-item-title-wrapper-width)}.lf-list-item.lf-list-item-data:hover{background-color:#00000014}.lf-list-item .flex-row{display:flex!important;flex-flow:row nowrap;align-items:center}.drop-zone{width:100%;height:var(--list-item-height);border:2px dashed var(--color-gray);border-radius:var(--list-item-border-radius);box-sizing:border-box}.clickable{cursor:pointer!important}.cdk-drag-preview{color:var(--mat-app-text-color, inherit)!important;background:var(--mat-app-background-color, inherit)!important;box-sizing:border-box;border-radius:var(--list-item-border-radius);opacity:.8;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.4}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}\n"] }]
+            args: [{ selector: 'lf-list', standalone: true, imports: [SharedModule], template: "<div class=\"lf-list\" cdkDropListGroup>\r\n  <!-- Header -->\r\n  @if (header) {\r\n    <div class=\"lf-list-item lf-list-item-header\">\r\n      <!-- avatar -->\r\n      @if (header.avatar) {\r\n        <div class=\"lf-list-item-avatar px-2\">\r\n          <img [src]=\"header.avatar\" alt=\"Avatar of header\" (error)=\"onImageError($event)\" />\r\n        </div>\r\n      } @else if (header.matIcon || header.svgIcon) {\r\n        <div class=\"lf-list-item-avatar px-2\">\r\n          <!-- icon -->\r\n          @if (header.matIcon) {\r\n            <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n              {{ header.matIcon }}\r\n            </mat-icon>\r\n          } @else if (header.svgIcon) {\r\n            <mat-icon [svgIcon]=\"header.svgIcon\"></mat-icon>\r\n          }\r\n        </div>\r\n      } @else if (hasAvatars) {\r\n        <div class=\"lf-list-item-avatar px-2\"></div>\r\n      }\r\n\r\n      <!-- title -->\r\n      <div class=\"lf-list-item-title-wrapper flex-row px-2\">\r\n        @for (item of header.items; track $index) {\r\n          <span [class.clickable]=\"item.sortToken\" (click)=\"updateSortToken(item.sortToken)\">\r\n            {{ item.title }}\r\n            @if (sortToken === item.sortToken) {\r\n              <mat-icon class=\"lf-list-item-sort-icon\">\r\n                {{ sortAsc ? \"arrow_downward\" : \"arrow_upward\" }}\r\n              </mat-icon>\r\n            }\r\n          </span>\r\n        }\r\n      </div>\r\n\r\n      <!-- buttons -->\r\n      <div class=\"lf-list-item-buttons\">\r\n        @for (button of header.buttons; track button.id) {\r\n          @if (button.label) {\r\n            <button\r\n              mat-button\r\n              class=\"lf-list-item-button ml-2\"\r\n              [class.disabled]=\"button.disabled\"\r\n              [ngClass]=\"button.cssClass\"\r\n              [disabled]=\"button.disabled\"\r\n              [matTooltip]=\"button.tooltip\"\r\n              (click)=\"clickButton({ buttonId: button.id, item: null! }, $event)\">\r\n              <!-- icon -->\r\n              @if (button.matIcon) {\r\n                <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\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.label }}\r\n            </button>\r\n          } @else {\r\n            <button\r\n              mat-icon-button\r\n              class=\"lf-list-item-icon ml-2\"\r\n              [class.disabled]=\"button.disabled\"\r\n              [ngClass]=\"button.cssClass\"\r\n              [disabled]=\"button.disabled\"\r\n              [matTooltip]=\"button.tooltip\"\r\n              (click)=\"clickButton({ buttonId: button.id, item: null! }, $event)\">\r\n              <!-- icon -->\r\n              @if (button.matIcon) {\r\n                <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\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\r\n      <!-- checkbox -->\r\n      @if (config?.enableSelection) {\r\n        <div class=\"lf-list-item-checkbox ml-3\">\r\n          <mat-checkbox\r\n            [(ngModel)]=\"allSelected\"\r\n            [indeterminate]=\"someSelected\"\r\n            (change)=\"selectAll($event)\"></mat-checkbox>\r\n        </div>\r\n      }\r\n    </div>\r\n    <mat-divider></mat-divider>\r\n  }\r\n\r\n  <!-- Grouped Items -->\r\n  @if (config?.mode === \"group\" && groupedItems) {\r\n    @for (group of groupedItems | keyvalue; track group.key; let first = $first) {\r\n      <div class=\"lf-list-group\" [class.mt-4]=\"!first\">\r\n        @if (group.key) {\r\n          <div class=\"lf-list-item lf-list-group-header\">\r\n            <div class=\"lf-list-item-avatar px-2\"></div>\r\n            <div class=\"lf-list-item-title-wrapper flex-row px-2\">\r\n              <span>{{ group.key }}</span>\r\n            </div>\r\n          </div>\r\n        }\r\n        <div\r\n          [id]=\"group.key\"\r\n          cdkDropList\r\n          [cdkDropListData]=\"group.value\"\r\n          [cdkDropListDisabled]=\"!config?.enableDragging\"\r\n          [cdkDropListConnectedTo]=\"connectedDropListIds\"\r\n          (cdkDropListDropped)=\"dropItem($event, group.key)\"\r\n          [class.drop-zone]=\"config?.enableDragging && group.value.length <= 0\">\r\n          @for (item of group.value; track item.id; let last = $last) {\r\n            <div\r\n              cdkDrag\r\n              [cdkDragData]=\"item\"\r\n              [cdkDragDisabled]=\"item.disabled || !config?.enableDragging\">\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"listItemTemplate\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: item, last: last }\"></ng-container>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n    <!-- Flat Items -->\r\n  } @else {\r\n    <div\r\n      [id]=\"dropListId\"\r\n      cdkDropList\r\n      [cdkDropListData]=\"items\"\r\n      [cdkDropListDisabled]=\"!config?.enableDragging\"\r\n      [cdkDropListConnectedTo]=\"connectedDropListIds\"\r\n      (cdkDropListDropped)=\"dropItem($event, dropListId)\"\r\n      [class.drop-zone]=\"config?.enableDragging && items.length <= 0\">\r\n      @for (item of items; track item.id; let last = $last) {\r\n        <div\r\n          cdkDrag\r\n          [cdkDragData]=\"item\"\r\n          [cdkDragDisabled]=\"item.disabled || !config?.enableDragging\">\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"listItemTemplate\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: item, last: last }\"></ng-container>\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <!-- Item (template) -->\r\n  <ng-template #listItemTemplate let-item let-last=\"last\">\r\n    <div\r\n      class=\"lf-list-item lf-list-item-data\"\r\n      [class.active]=\"item.checked\"\r\n      [class.disabled]=\"item.disabled\"\r\n      [class.clickable]=\"item.clickable && !item.disabled\"\r\n      [ngClass]=\"item.cssClass\"\r\n      matRipple\r\n      [matRippleDisabled]=\"!item.clickable\"\r\n      (click)=\"item.clickable && !item.disabled ? clickItem(item, $event) : null\">\r\n      <!-- avatar -->\r\n      @if (avatarTemplate) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"avatarTemplate.templateRef\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n      } @else if (item.avatar) {\r\n        <div class=\"lf-list-item-avatar px-2\">\r\n          <img\r\n            [src]=\"item.avatar\"\r\n            [alt]=\"'Avatar of ' + item.title\"\r\n            (error)=\"onImageError($event)\" />\r\n        </div>\r\n      } @else if (item.matIcon || item.svgIcon) {\r\n        <div class=\"lf-list-item-avatar px-2\">\r\n          <!-- icon -->\r\n          @if (item.matIcon) {\r\n            <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n              {{ item.matIcon }}\r\n            </mat-icon>\r\n          } @else if (item.svgIcon) {\r\n            <mat-icon [svgIcon]=\"item.svgIcon\"></mat-icon>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      <!-- title -->\r\n      <div class=\"lf-list-item-title-wrapper px-2\">\r\n        <span class=\"lf-list-item-title\">\r\n          @if (titleTemplate) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"titleTemplate.templateRef\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n          } @else {\r\n            {{ item.title }}\r\n          }\r\n        </span>\r\n        @if (item.subtitle || subtitleTemplate) {\r\n          <span class=\"lf-list-item-subtitle\">\r\n            @if (subtitleTemplate) {\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"subtitleTemplate.templateRef\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n            } @else {\r\n              {{ item.subtitle }}\r\n            }\r\n          </span>\r\n        }\r\n      </div>\r\n\r\n      <!-- buttons -->\r\n      <div class=\"lf-list-item-buttons\">\r\n        @if (buttonsTemplate) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"buttonsTemplate.templateRef\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n        } @else {\r\n          @let combinedButtons = getCombinedButtons(item);\r\n          @for (button of combinedButtons; track button.id) {\r\n            @if (!item.hiddenButtonIds?.includes(button.id)) {\r\n              @let disabled =\r\n                button.disabled || item.disabled || item.disabledButtonIds?.includes(button.id);\r\n              @if (button.label) {\r\n                <button\r\n                  mat-button\r\n                  class=\"lf-list-item-button ml-2\"\r\n                  [class.disabled]=\"disabled\"\r\n                  [ngClass]=\"button.cssClass\"\r\n                  [disabled]=\"disabled\"\r\n                  [matTooltip]=\"button.tooltip\"\r\n                  (click)=\"clickButton({ buttonId: button.id, item }, $event)\">\r\n                  <!-- icon -->\r\n                  @if (button.matIcon) {\r\n                    <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\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.label }}\r\n                </button>\r\n              } @else {\r\n                <button\r\n                  mat-icon-button\r\n                  class=\"lf-list-item-icon ml-2\"\r\n                  [class.disabled]=\"disabled\"\r\n                  [ngClass]=\"button.cssClass\"\r\n                  [disabled]=\"disabled\"\r\n                  [matTooltip]=\"button.tooltip\"\r\n                  (click)=\"clickButton({ buttonId: button.id, item }, $event)\">\r\n                  <!-- icon -->\r\n                  @if (button.matIcon) {\r\n                    <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\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          }\r\n        }\r\n\r\n        <!-- drag -->\r\n        @if (config?.enableDragging) {\r\n          <button\r\n            mat-icon-button\r\n            class=\"lf-list-item-icon ml-2\"\r\n            [class.disabled]=\"item.disabled\"\r\n            [disabled]=\"item.disabled\"\r\n            (click)=\"stopPropagation($event)\"\r\n            cdkDragHandle>\r\n            <mat-icon>drag_indicator</mat-icon>\r\n          </button>\r\n        }\r\n      </div>\r\n\r\n      <!-- checkbox -->\r\n      @if (config?.enableSelection) {\r\n        <div class=\"lf-list-item-checkbox ml-3\">\r\n          <mat-checkbox\r\n            [(ngModel)]=\"item.checked\"\r\n            [disabled]=\"item.disabled!\"\r\n            (change)=\"selectItem(item, $event)\"\r\n            (click)=\"stopPropagation($event)\"></mat-checkbox>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    @if (config?.showDividers && !last) {\r\n      <mat-divider></mat-divider>\r\n    }\r\n  </ng-template>\r\n</div>\r\n", styles: [".lf-list,.lf-list .lf-list-group{width:100%}.lf-list .lf-list-group .lf-list-group-header{font-weight:500;height:calc(var(--list-item-height) - 16px)}.lf-list-item{width:100%;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;height:var(--list-item-height);border-radius:var(--list-item-border-radius);box-sizing:border-box;overflow:hidden}.lf-list-item.disabled .lf-list-item-title-wrapper{opacity:.64}.lf-list-item .lf-list-item-sort-icon{font-size:var(--list-item-sort-icon-size);width:var(--list-item-sort-icon-size);height:var(--list-item-sort-icon-size);vertical-align:text-top}.lf-list-item .lf-list-item-checkbox{flex:0 0 var(--list-item-checkbox-width)}.lf-list-item .lf-list-item-avatar{flex:0 0 var(--list-item-avatar-size);display:flex;align-items:center;justify-content:center}.lf-list-item .lf-list-item-avatar img{width:var(--list-item-avatar-size);height:var(--list-item-avatar-size);border-radius:50%;object-fit:cover}.lf-list-item .lf-list-item-title-wrapper{display:flex;flex-flow:column;align-items:flex-start;flex:1 1 var(--list-item-title-width);overflow:hidden}.lf-list-item .lf-list-item-title-wrapper .lf-list-item-title{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.lf-list-item .lf-list-item-title-wrapper .lf-list-item-subtitle{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.8rem}.lf-list-item .lf-list-item-buttons{flex:0 0 auto;display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between}.lf-list-item.lf-list-item-header{font-weight:500}.lf-list-item.lf-list-item-header .lf-list-item-title-wrapper span{width:var(--list-item-title-wrapper-width)}.lf-list-item.lf-list-item-data:hover{background-color:#00000014}.lf-list-item .flex-row{display:flex!important;flex-flow:row nowrap;align-items:center}.drop-zone{width:100%;height:var(--list-item-height);border:2px dashed var(--color-gray);border-radius:var(--list-item-border-radius);box-sizing:border-box}.clickable{cursor:pointer!important}.cdk-drag-preview{color:var(--mat-app-text-color, inherit)!important;background:var(--mat-app-background-color, inherit)!important;box-sizing:border-box;border-radius:var(--list-item-border-radius);opacity:.8;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.4}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}\n"] }]
         }], propDecorators: { avatarTemplate: [{
                 type: ContentChild,
                 args: [ListItemAvatarDirective]
@@ -1744,10 +1777,10 @@ class ScaffoldLoadingInterceptor {
             }
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ScaffoldLoadingInterceptor, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ScaffoldLoadingInterceptor }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ScaffoldLoadingInterceptor, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ScaffoldLoadingInterceptor }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ScaffoldLoadingInterceptor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ScaffoldLoadingInterceptor, decorators: [{
             type: Injectable
         }] });
 
@@ -1760,5 +1793,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BreakpointService, CONFIG, DialogService, FileUploadComponent, ListComponent, ListItemAvatarDirective, ListItemButtonsDirective, ListItemSubtitleDirective, ListItemTitleDirective, LocalStorageService, Logger, PlaceholderComponent, RouterService, ScaffoldComponent, ScaffoldLoadingInterceptor, ScaffoldModule, ScaffoldService, SeoService, SnackbarService, ThemeService };
+export { BreakpointService, CONFIG, DialogService, FileUploadComponent, ListComponent, ListItemAvatarDirective, ListItemButtonsDirective, ListItemSubtitleDirective, ListItemTitleDirective, LocalStorageService, Logger, OverlayService, PlaceholderComponent, RouterService, ScaffoldComponent, ScaffoldLoadingInterceptor, ScaffoldModule, ScaffoldService, SeoService, SnackbarService, ThemeService };
 //# sourceMappingURL=lukfel-ng-scaffold.mjs.map