@lukfel/ng-scaffold 20.0.23 → 20.0.25

package/README.md

@@ -5,7 +5,7 @@ This Angular library provides a foundational scaffold for modern web and mobile
 
 - **NPM**: [@lukfel/ng-scaffold](https://www.npmjs.com/package/@lukfel/ng-scaffold)
 - **Demo**: [lukfel.github.io/ng-scaffold](https://lukfel.github.io/ng-scaffold)
-- **Examples**: [Create a Tournament](https://www.create-a-tournament.com), [What a Waste](https://www.what-a-waste.at), [Uglygotchi](https://www.uglygotchi.at)
+- **Examples**: [Uglygotchi](https://www.uglygotchi.at), [What a Waste](https://www.what-a-waste.at), [Create a Tournament](https://www.create-a-tournament.com)
 
 
 
@@ -146,12 +146,11 @@ export class AppComponent {
 }
 ```
 
-### Update Configuration
-Define the `ScaffoldConfig` in `app.component.ts` and update the `scaffoldConfig` property in `ScaffoldService`.
+### Initialize Configuration
+Define the `ScaffoldConfig` in your `app.component.ts` and initialize the `scaffoldConfig` property in `ScaffoldService`.
 
 * **Notes:**
-    * If a sub-configuration (e.g., `headerConfig`) is missing or does not have `enable: true`, the corresponding UI element will not be displayed.
-    * Refer to the demo project for full configuration details.
+    * If a sub-configuration (e.g. `headerConfig`) is missing or does not have `enable: true`, the corresponding UI element will not be displayed.
 
 ```ts
 import { ScaffoldService, ScaffoldConfig } from '@lukfel/ng-scaffold';
@@ -162,7 +161,7 @@ export class AppComponent {
     scrollPositionRestoration: true,
     headerConfig: { enable: true, title: 'Scaffold', subtitle: 'by Lukas Felbinger' },
     navbarConfig: { enable: true },
-    footerConfig: { enable: true, copyright: '© Lukas Felbinger 2023' },
+    footerConfig: { enable: true, copyright: '© Lukas Felbinger 2025' },
     floatingButtonConfig: { enable: true }
   };
 
@@ -172,6 +171,26 @@ export class AppComponent {
 }
 ```
 
+### Update Configuration (immutable, partial)
+The `ScaffoldService` provides a method `updateScaffoldProperty()` to partially update the `ScaffoldConfig` in a type-safe way. It performs an immutable update, creating a new configuration object with the updated property and emits the new state.
+
+```ts
+import { ScaffoldService, DrawerConfig } from '@lukfel/ng-scaffold';
+
+export class AppComponent {
+
+  constructor(private scaffoldService: ScaffoldService) {
+    this.scaffoldService.scaffoldConfig = this.scaffoldConfig;
+  }
+
+  public toggleDrawer(): void {
+    const currentDrawerConfig: DrawerConfig = this.scaffoldService.scaffoldConfig.drawerConfig;
+    const updatedDrawerConfig: DrawerConfig = { ...currentDrawerConfig, open: !currentDrawerConfig.open };
+    this.scaffoldService.updateScaffoldProperty('drawerConfig', updatedDrawerConfig);
+  }
+}
+```
+
 
 
 

package/fesm2022/lukfel-ng-scaffold.mjs

@@ -265,7 +265,6 @@ class ContentTitleCardComponent {
         this.isMobile = false;
         this.routeHistory = [];
         this.backButtonClickEvent = new EventEmitter();
-        this.inputValue = '';
     }
     backButtonClicked() {
         this.backButtonClickEvent.emit();
@@ -294,24 +293,27 @@ class DrawerComponent {
         this.drawerConfig = null;
         this.isMobile = false;
         this.fixedOffset = 0;
+        this.drawerConfigUpdateEvent = new EventEmitter();
     }
     ngOnInit() {
         // Avoid initializing an open drawer on mobile
         if (this.isMobile && this.drawerConfig?.enable && this.drawerConfig?.open) {
-            this.drawerConfig.open = false;
+            this.drawerConfigUpdateEvent.emit({ ...this.drawerConfig, open: false });
         }
     }
     // Detect when the drawer is closed without clicking a button
-    onDrawerClosed() {
-        if (this.drawerConfig)
-            this.drawerConfig.open = false;
+    drawerClosed() {
+        if (this.drawerConfig) {
+            this.drawerConfigUpdateEvent.emit({ ...this.drawerConfig, open: false });
+        }
+        ;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: DrawerComponent, isStandalone: false, selector: "lf-drawer", inputs: { libraryConfig: "libraryConfig", drawerConfig: "drawerConfig", isMobile: "isMobile", fixedOffset: "fixedOffset", drawerPortal: "drawerPortal" }, ngImport: i0, template: "@if (drawerConfig && drawerConfig.enable) {\r\n  <mat-sidenav-container class=\"lf-drawer-container\" [ngClass]=\"drawerConfig.cssClass\">\r\n    <!-- drawer -->\r\n    <mat-sidenav\r\n      class=\"lf-drawer mat-elevation-z2\"\r\n      [mode]=\"isMobile ? 'over' : 'side'\"\r\n      [opened]=\"drawerConfig.open\"\r\n      [autoFocus]=\"false\"\r\n      [fixedInViewport]=\"drawerConfig.fixed\"\r\n      [fixedTopGap]=\"fixedOffset\"\r\n      (closed)=\"onDrawerClosed()\"\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{width:208px;z-index:98}\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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: DrawerComponent, isStandalone: false, selector: "lf-drawer", inputs: { libraryConfig: "libraryConfig", drawerConfig: "drawerConfig", isMobile: "isMobile", fixedOffset: "fixedOffset", drawerPortal: "drawerPortal" }, outputs: { drawerConfigUpdateEvent: "drawerConfigUpdateEvent" }, ngImport: i0, template: "@if (drawerConfig && drawerConfig.enable) {\r\n  <mat-sidenav-container class=\"lf-drawer-container\" [ngClass]=\"drawerConfig.cssClass\">\r\n    <!-- drawer -->\r\n    <mat-sidenav\r\n      class=\"lf-drawer mat-elevation-z2\"\r\n      [mode]=\"isMobile ? 'over' : 'side'\"\r\n      [opened]=\"drawerConfig.open\"\r\n      [autoFocus]=\"false\"\r\n      [fixedInViewport]=\"drawerConfig.fixed\"\r\n      [fixedTopGap]=\"fixedOffset\"\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{width:208px;z-index:98}\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: "20.0.5", ngImport: i0, type: DrawerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lf-drawer', standalone: false, template: "@if (drawerConfig && drawerConfig.enable) {\r\n  <mat-sidenav-container class=\"lf-drawer-container\" [ngClass]=\"drawerConfig.cssClass\">\r\n    <!-- drawer -->\r\n    <mat-sidenav\r\n      class=\"lf-drawer mat-elevation-z2\"\r\n      [mode]=\"isMobile ? 'over' : 'side'\"\r\n      [opened]=\"drawerConfig.open\"\r\n      [autoFocus]=\"false\"\r\n      [fixedInViewport]=\"drawerConfig.fixed\"\r\n      [fixedTopGap]=\"fixedOffset\"\r\n      (closed)=\"onDrawerClosed()\"\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{width:208px;z-index:98}\n"] }]
+            args: [{ selector: 'lf-drawer', standalone: false, template: "@if (drawerConfig && drawerConfig.enable) {\r\n  <mat-sidenav-container class=\"lf-drawer-container\" [ngClass]=\"drawerConfig.cssClass\">\r\n    <!-- drawer -->\r\n    <mat-sidenav\r\n      class=\"lf-drawer mat-elevation-z2\"\r\n      [mode]=\"isMobile ? 'over' : 'side'\"\r\n      [opened]=\"drawerConfig.open\"\r\n      [autoFocus]=\"false\"\r\n      [fixedInViewport]=\"drawerConfig.fixed\"\r\n      [fixedTopGap]=\"fixedOffset\"\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{width:208px;z-index:98}\n"] }]
         }], propDecorators: { libraryConfig: [{
                 type: Input
             }], drawerConfig: [{
@@ -322,6 +324,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
                 type: Input
             }], drawerPortal: [{
                 type: Input
+            }], drawerConfigUpdateEvent: [{
+                type: Output
             }] } });
 
 class FloatingButtonComponent {
@@ -331,6 +335,7 @@ class FloatingButtonComponent {
         this.onTop = false;
         this.isMobile = false;
         this.bottomBarEnabled = false;
+        this.floatingButtonConfigUpdateEvent = new EventEmitter();
         this.floatingButtonClickEvent = new EventEmitter();
         this.DEFAULT_OFFSET = 24;
         this.navbarOffset = 64;
@@ -338,14 +343,14 @@ class FloatingButtonComponent {
     }
     ngOnInit() {
         if (this.floatingButtonConfig) {
-            if (!this.floatingButtonConfig.horizontalPosition) {
-                this.floatingButtonConfig.horizontalPosition = 'right';
-            }
-            if (!this.floatingButtonConfig.matIcon && !this.floatingButtonConfig?.svgIcon) {
-                this.floatingButtonConfig.matIcon = 'arrow_upward';
-            }
-            if (!this.floatingButtonConfig.bottomPositionPx) {
-                this.floatingButtonConfig.bottomPositionPx = this.DEFAULT_OFFSET;
+            const updatedFloatingButtonConfigConfig = {
+                ...this.floatingButtonConfig,
+                matIcon: (!this.floatingButtonConfig.matIcon && !this.floatingButtonConfig.svgIcon) ? 'arrow_upward' : this.floatingButtonConfig.matIcon || this.floatingButtonConfig.svgIcon,
+                horizontalPosition: this.floatingButtonConfig.horizontalPosition ?? 'right',
+                bottomPositionPx: this.floatingButtonConfig.bottomPositionPx ?? this.DEFAULT_OFFSET,
+            };
+            if (JSON.stringify(updatedFloatingButtonConfigConfig) !== JSON.stringify(this.floatingButtonConfig)) {
+                this.floatingButtonConfigUpdateEvent.emit(updatedFloatingButtonConfigConfig);
             }
         }
     }
@@ -363,11 +368,11 @@ class FloatingButtonComponent {
         return bottomPosition;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: FloatingButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: FloatingButtonComponent, isStandalone: false, selector: "lf-floating-button", inputs: { libraryConfig: "libraryConfig", floatingButtonConfig: "floatingButtonConfig", onTop: "onTop", isMobile: "isMobile", bottomBarEnabled: "bottomBarEnabled" }, outputs: { 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\"\r\n    [style.bottom]=\"getBottomPosition() + 'px'\"\r\n    [ngClass]=\"floatingButtonConfig.cssClass\"\r\n    [ngClass]=\"floatingButtonConfig.horizontalPosition\"\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 {\r\n      @if (floatingButtonConfig.svgIcon) {\r\n        <mat-icon [svgIcon]=\"floatingButtonConfig.svgIcon!\"></mat-icon>\r\n      }\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{position:fixed;transition:bottom .3s;z-index:100}.lf-floating-button.left{left:24px}.lf-floating-button.center{left:50%;transform:translate(-50%)}.lf-floating-button.right{right:24px}\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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", 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\"\r\n    [style.bottom]=\"getBottomPosition() + 'px'\"\r\n    [ngClass]=\"floatingButtonConfig.cssClass\"\r\n    [ngClass]=\"floatingButtonConfig.horizontalPosition\"\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{position:fixed;transition:bottom .3s;z-index:100}.lf-floating-button.left{left:24px}.lf-floating-button.center{left:50%;transform:translate(-50%)}.lf-floating-button.right{right:24px}\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: "20.0.5", 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\"\r\n    [style.bottom]=\"getBottomPosition() + 'px'\"\r\n    [ngClass]=\"floatingButtonConfig.cssClass\"\r\n    [ngClass]=\"floatingButtonConfig.horizontalPosition\"\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 {\r\n      @if (floatingButtonConfig.svgIcon) {\r\n        <mat-icon [svgIcon]=\"floatingButtonConfig.svgIcon!\"></mat-icon>\r\n      }\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{position:fixed;transition:bottom .3s;z-index:100}.lf-floating-button.left{left:24px}.lf-floating-button.center{left:50%;transform:translate(-50%)}.lf-floating-button.right{right:24px}\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\"\r\n    [style.bottom]=\"getBottomPosition() + 'px'\"\r\n    [ngClass]=\"floatingButtonConfig.cssClass\"\r\n    [ngClass]=\"floatingButtonConfig.horizontalPosition\"\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{position:fixed;transition:bottom .3s;z-index:100}.lf-floating-button.left{left:24px}.lf-floating-button.center{left:50%;transform:translate(-50%)}.lf-floating-button.right{right:24px}\n"] }]
         }], propDecorators: { libraryConfig: [{
                 type: Input
             }], floatingButtonConfig: [{
@@ -378,6 +383,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
                 type: Input
             }], bottomBarEnabled: [{
                 type: Input
+            }], floatingButtonConfigUpdateEvent: [{
+                type: Output
             }], floatingButtonClickEvent: [{
                 type: Output
             }] } });
@@ -473,6 +480,7 @@ class HeaderComponent {
         this.headerConfig = null;
         this.isMobile = false;
         this.routeLoading = false;
+        this.headerConfigUpdateEvent = new EventEmitter();
         this.headerButtonClickEvent = new EventEmitter();
         this.headerInputSubmitEvent = new EventEmitter();
         this.headerInputChangeEvent = new EventEmitter();
@@ -480,7 +488,8 @@ class HeaderComponent {
     ngOnInit() {
         // Avoid initializing the header with an open input field on mobile
         if (this.isMobile && this.headerConfig?.inputConfig?.enable) {
-            this.headerConfig.inputConfig.enable = false;
+            const updatedHeaderConfig = { ...this.headerConfig, inputConfig: { ...this.headerConfig?.inputConfig, enable: false } };
+            this.headerConfigUpdateEvent.emit(updatedHeaderConfig);
         }
     }
     buttonClicked(id) {
@@ -495,6 +504,10 @@ class HeaderComponent {
     inputChanged(value) {
         this.headerInputChangeEvent.emit(value);
     }
+    inputClosed() {
+        const updatedHeaderConfig = { ...this.headerConfig, inputConfig: { ...this.headerConfig?.inputConfig, enable: false } };
+        this.headerConfigUpdateEvent.emit(updatedHeaderConfig);
+    }
     isActive(id) {
         if (!id || !this.currentRoute) {
             return false;
@@ -503,11 +516,11 @@ class HeaderComponent {
         return route === id;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: HeaderComponent, isStandalone: false, selector: "lf-header", inputs: { libraryConfig: "libraryConfig", headerConfig: "headerConfig", isMobile: "isMobile", routeLoading: "routeLoading", currentRoute: "currentRoute" }, outputs: { headerButtonClickEvent: "headerButtonClickEvent", headerInputSubmitEvent: "headerInputSubmitEvent", headerInputChangeEvent: "headerInputChangeEvent" }, ngImport: i0, template: "@if (headerConfig && headerConfig.enable) {\r\n  <mat-toolbar\r\n    class=\"lf-header mat-elevation-z3\"\r\n    [class.px-4]=\"!isMobile\"\r\n    [class.px-1]=\"isMobile\"\r\n    [ngClass]=\"headerConfig.cssClass\"\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)=\"headerConfig.inputConfig!.enable = false\"></lf-input>\r\n    }\r\n    <!-- spacer -->\r\n    <div class=\"spacer\"></div>\r\n    <!-- right menu buttons -->\r\n    @for (button of headerConfig.rightMenuButtons; track button) {\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n        [ngTemplateOutletContext]=\"{\r\n          menuButton: button,\r\n        }\"></ng-container>\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) {\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              [alignMiddle]=\"true\"></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 class=\"lf-menu-icons px-1\">\r\n        @for (button of menuButton.menuButtons; track button) {\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              <!-- icon -->\r\n              <lf-icon [matIcon]=\"button.matIcon\" [svgIcon]=\"button.svgIcon\"></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{transition:top .3s;z-index:100;position:fixed;top:0;height:64px}.lf-header .lf-header-menu-button{flex-shrink:0;max-width:144px}.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:480px;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:40px;height:40px;min-width:40px;min-height:40px}.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:20px;line-height:28px}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-subtitle{font-size:12px;line-height:12px}.lf-header lf-input{z-index:100;flex:1 1 480px}.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{display:flex;flex-flow:row wrap;align-items:center;justify-content:flex-start}.lf-header-progress-bar{z-index:100;position:fixed;top:64px}\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", "alignMiddle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", 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 mat-elevation-z3\"\r\n    [class.px-4]=\"!isMobile\"\r\n    [class.px-1]=\"isMobile\"\r\n    [ngClass]=\"headerConfig.cssClass\"\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    @for (button of headerConfig.rightMenuButtons; track button) {\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n        [ngTemplateOutletContext]=\"{\r\n          menuButton: button,\r\n        }\"></ng-container>\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) {\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              [alignMiddle]=\"true\"></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 class=\"lf-menu-icons px-1\">\r\n        @for (button of menuButton.menuButtons; track button) {\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              <!-- icon -->\r\n              <lf-icon [matIcon]=\"button.matIcon\" [svgIcon]=\"button.svgIcon\"></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{transition:top .3s;z-index:100;position:fixed;top:0;height:64px}.lf-header .lf-header-menu-button{flex-shrink:0;max-width:144px}.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:480px;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:40px;height:40px;min-width:40px;min-height:40px}.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:20px;line-height:28px}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-subtitle{font-size:12px;line-height:12px}.lf-header lf-input{z-index:100;flex:1 1 480px}.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{display:flex;flex-flow:row wrap;align-items:center;justify-content:flex-start}.lf-header-progress-bar{z-index:100;position:fixed;top:64px}\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", "alignMiddle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lf-header', standalone: false, template: "@if (headerConfig && headerConfig.enable) {\r\n  <mat-toolbar\r\n    class=\"lf-header mat-elevation-z3\"\r\n    [class.px-4]=\"!isMobile\"\r\n    [class.px-1]=\"isMobile\"\r\n    [ngClass]=\"headerConfig.cssClass\"\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)=\"headerConfig.inputConfig!.enable = false\"></lf-input>\r\n    }\r\n    <!-- spacer -->\r\n    <div class=\"spacer\"></div>\r\n    <!-- right menu buttons -->\r\n    @for (button of headerConfig.rightMenuButtons; track button) {\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n        [ngTemplateOutletContext]=\"{\r\n          menuButton: button,\r\n        }\"></ng-container>\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) {\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              [alignMiddle]=\"true\"></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 class=\"lf-menu-icons px-1\">\r\n        @for (button of menuButton.menuButtons; track button) {\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              <!-- icon -->\r\n              <lf-icon [matIcon]=\"button.matIcon\" [svgIcon]=\"button.svgIcon\"></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{transition:top .3s;z-index:100;position:fixed;top:0;height:64px}.lf-header .lf-header-menu-button{flex-shrink:0;max-width:144px}.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:480px;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:40px;height:40px;min-width:40px;min-height:40px}.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:20px;line-height:28px}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-subtitle{font-size:12px;line-height:12px}.lf-header lf-input{z-index:100;flex:1 1 480px}.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{display:flex;flex-flow:row wrap;align-items:center;justify-content:flex-start}.lf-header-progress-bar{z-index:100;position:fixed;top:64px}\n"] }]
+            args: [{ selector: 'lf-header', standalone: false, template: "@if (headerConfig && headerConfig.enable) {\r\n  <mat-toolbar\r\n    class=\"lf-header mat-elevation-z3\"\r\n    [class.px-4]=\"!isMobile\"\r\n    [class.px-1]=\"isMobile\"\r\n    [ngClass]=\"headerConfig.cssClass\"\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    @for (button of headerConfig.rightMenuButtons; track button) {\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n        [ngTemplateOutletContext]=\"{\r\n          menuButton: button,\r\n        }\"></ng-container>\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) {\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              [alignMiddle]=\"true\"></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 class=\"lf-menu-icons px-1\">\r\n        @for (button of menuButton.menuButtons; track button) {\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              <!-- icon -->\r\n              <lf-icon [matIcon]=\"button.matIcon\" [svgIcon]=\"button.svgIcon\"></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{transition:top .3s;z-index:100;position:fixed;top:0;height:64px}.lf-header .lf-header-menu-button{flex-shrink:0;max-width:144px}.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:480px;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:40px;height:40px;min-width:40px;min-height:40px}.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:20px;line-height:28px}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-subtitle{font-size:12px;line-height:12px}.lf-header lf-input{z-index:100;flex:1 1 480px}.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{display:flex;flex-flow:row wrap;align-items:center;justify-content:flex-start}.lf-header-progress-bar{z-index:100;position:fixed;top:64px}\n"] }]
         }], propDecorators: { libraryConfig: [{
                 type: Input
             }], headerConfig: [{
@@ -518,6 +531,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
                 type: Input
             }], currentRoute: [{
                 type: Input
+            }], headerConfigUpdateEvent: [{
+                type: Output
             }], headerButtonClickEvent: [{
                 type: Output
             }], headerInputSubmitEvent: [{
@@ -924,6 +939,8 @@ class ScaffoldService {
         return this._scaffoldConfig$.asObservable();
     }
     set scaffoldConfig(value) {
+        if (this.libraryConfig?.debugging)
+            this.logger.log('[UPDATE] ScaffoldConfig', value);
         this._scaffoldConfig$.next(value);
     }
     get scaffoldConfig() {
@@ -953,6 +970,8 @@ class ScaffoldService {
     updateScaffoldProperty(property, value) {
         const currentState = this._scaffoldConfig$.getValue();
         if (currentState[property] === value) {
+            if (this.libraryConfig?.debugging)
+                this.logger.log(`[UNCHANGED] ScaffoldConfig.${property}`, value);
             return;
         }
         const updatedState = { ...currentState, [property]: value };
@@ -1245,6 +1264,10 @@ class ScaffoldComponent {
             this._subscription.unsubscribe();
         }
     }
+    // Header
+    headerConfigUpdated(headerConfig) {
+        this.scaffoldService.updateScaffoldProperty('headerConfig', headerConfig);
+    }
     headerButtonClicked(id) {
         this.scaffoldService.buttonClickEventValue = id;
         this.headerButtonClickEvent.emit(id);
@@ -1256,13 +1279,23 @@ class ScaffoldComponent {
         this.scaffoldService.headerInputChangeValue = value;
         this.headerInputChangeEvent.emit(value);
     }
+    // Navbar
     navbarButtonClicked(id) {
         this.scaffoldService.buttonClickEventValue = id;
         this.navbarButtonClickEvent.emit(id);
     }
+    // Drawer
+    drawerConfigUpdated(drawerConfig) {
+        this.scaffoldService.updateScaffoldProperty('drawerConfig', drawerConfig);
+    }
+    // Content title card
     backButtonClicked() {
         this.routerService.navigateBack();
     }
+    // Floating button
+    floatingButtonConfigUpdated(floatingButtonConfig) {
+        this.scaffoldService.updateScaffoldProperty('floatingButtonConfig', floatingButtonConfig);
+    }
     floatingButtonClicked(id) {
         if (!id && this.scrollContainer) {
             this.scrollContainer.nativeElement.scrollTop = 0;
@@ -1272,6 +1305,7 @@ class ScaffoldComponent {
             this.floatingButtonClickEvent.emit(id);
         }
     }
+    // Bottom bar
     bottomBarCloseClicked(id) {
         this.scaffoldService.buttonClickEventValue = id;
         this.bottomBarButtonClickEvent.emit(id);
@@ -1281,11 +1315,11 @@ class ScaffoldComponent {
         this.bottomBarButtonClickEvent.emit(id);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ScaffoldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", 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 class=\"lf-scaffold mat-app-background mat-typography\" [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    (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    #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      [fixedOffset]=\"headerConfig?.enable ? 64 : 0\">\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    (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{transition:height .3s;position:absolute;inset:0;overflow-y:auto}.lf-scaffold .lf-content-wrapper.lf-show-navbar{left:80px}.lf-scaffold .lf-content-wrapper.lf-show-header{top:64px;height:calc(100vh - 64px)}.lf-scaffold .lf-content-wrapper.lf-show-navbar-mobile{height:calc(100vh - 56px)}.lf-scaffold .lf-content-wrapper.lf-show-header-and-navbar-mobile{top:64px;height:calc(100vh - 120px)}.lf-scaffold .lf-content-wrapper .lf-content{padding-left:24px;padding-right:24px}.lf-scaffold .lf-content-wrapper .lf-content.lf-content-mobile{padding-left:16px;padding-right:16px}.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: ["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", "fixedOffset", "drawerPortal"] }, { 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: ["floatingButtonClickEvent"] }, { kind: "component", type: BottomBarComponent, selector: "lf-bottom-bar", inputs: ["libraryConfig", "bottomBarConfig", "isMobile", "navbarEnabled"], outputs: ["bottomBarCloseClickEvent", "bottomBarButtonClickEvent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", 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 class=\"lf-scaffold mat-app-background mat-typography\" [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    #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      [fixedOffset]=\"headerConfig?.enable ? 64 : 0\"\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{transition:height .3s;position:absolute;inset:0;overflow-y:auto}.lf-scaffold .lf-content-wrapper.lf-show-navbar{left:80px}.lf-scaffold .lf-content-wrapper.lf-show-header{top:64px;height:calc(100vh - 64px)}.lf-scaffold .lf-content-wrapper.lf-show-navbar-mobile{height:calc(100vh - 56px)}.lf-scaffold .lf-content-wrapper.lf-show-header-and-navbar-mobile{top:64px;height:calc(100vh - 120px)}.lf-scaffold .lf-content-wrapper .lf-content{padding-left:24px;padding-right:24px}.lf-scaffold .lf-content-wrapper .lf-content.lf-content-mobile{padding-left:16px;padding-right:16px}.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", "fixedOffset", "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: "20.0.5", 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 class=\"lf-scaffold mat-app-background mat-typography\" [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    (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    #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      [fixedOffset]=\"headerConfig?.enable ? 64 : 0\">\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    (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{transition:height .3s;position:absolute;inset:0;overflow-y:auto}.lf-scaffold .lf-content-wrapper.lf-show-navbar{left:80px}.lf-scaffold .lf-content-wrapper.lf-show-header{top:64px;height:calc(100vh - 64px)}.lf-scaffold .lf-content-wrapper.lf-show-navbar-mobile{height:calc(100vh - 56px)}.lf-scaffold .lf-content-wrapper.lf-show-header-and-navbar-mobile{top:64px;height:calc(100vh - 120px)}.lf-scaffold .lf-content-wrapper .lf-content{padding-left:24px;padding-right:24px}.lf-scaffold .lf-content-wrapper .lf-content.lf-content-mobile{padding-left:16px;padding-right:16px}.lf-scaffold .lf-content-wrapper .lf-content.lf-show-footer{min-height:100%}\n"] }]
+            args: [{ selector: 'lf-scaffold', standalone: false, template: "<!-- header-height: 64px; navbar-size: 80px; floating-button-bottom: 24px -->\r\n\r\n<div class=\"lf-scaffold mat-app-background mat-typography\" [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    #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      [fixedOffset]=\"headerConfig?.enable ? 64 : 0\"\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{transition:height .3s;position:absolute;inset:0;overflow-y:auto}.lf-scaffold .lf-content-wrapper.lf-show-navbar{left:80px}.lf-scaffold .lf-content-wrapper.lf-show-header{top:64px;height:calc(100vh - 64px)}.lf-scaffold .lf-content-wrapper.lf-show-navbar-mobile{height:calc(100vh - 56px)}.lf-scaffold .lf-content-wrapper.lf-show-header-and-navbar-mobile{top:64px;height:calc(100vh - 120px)}.lf-scaffold .lf-content-wrapper .lf-content{padding-left:24px;padding-right:24px}.lf-scaffold .lf-content-wrapper .lf-content.lf-content-mobile{padding-left:16px;padding-right:16px}.lf-scaffold .lf-content-wrapper .lf-content.lf-show-footer{min-height:100%}\n"] }]
         }], propDecorators: { scrollContainer: [{
                 type: ViewChild,
                 args: ['scrollContainer', { static: true }]
@@ -1476,11 +1510,11 @@ class ListComponent {
         target.src = this.avatarFallbackPath || '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: ListComponent, isStandalone: true, selector: "lf-list", inputs: { header: "header", items: "items", buttons: "buttons", avatarFallbackPath: "avatarFallbackPath", showDividers: "showDividers" }, outputs: { sortChangeEvent: "sortChangeEvent", selectionChangeEvent: "selectionChangeEvent", itemClickEvent: "itemClickEvent", buttonClickEvent: "buttonClickEvent" }, ngImport: i0, template: "<!-- lf-list.component.html -->\r\n<div class=\"lf-table\">\r\n  <!-- Header -->\r\n  @if (header) {\r\n    <div class=\"lf-table-item lf-table-item-header\">\r\n      <!-- avatar -->\r\n      @if (header.avatar) {\r\n        <div class=\"lf-table-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-table-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-table-item-avatar px-2\"></div>\r\n      }\r\n\r\n      <!-- title -->\r\n      <div class=\"lf-table-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-table-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-table-item-buttons\"></div>\r\n\r\n      <!-- checkbox -->\r\n      @if (header.enableSelection) {\r\n        <div class=\"lf-table-item-checkbox ml-3\">\r\n          <mat-checkbox\r\n            [checked]=\"allSelected && !someSelected\"\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  <!-- Items -->\r\n  @for (item of items; track item.id) {\r\n    <div\r\n      class=\"lf-table-item lf-table-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      <!-- avatar -->\r\n      @if (item.avatar) {\r\n        <div class=\"lf-table-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-table-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-table-item-title-wrapper px-2\">\r\n        <span\r\n          class=\"lf-table-item-title\"\r\n          (click)=\"item.clickable && !item.disabled ? itemClickEvent.emit(item) : null\">\r\n          {{ item.title }}\r\n        </span>\r\n        @if (item.subtitle) {\r\n          <span class=\"lf-table-item-subtitle\">{{ item.subtitle }}</span>\r\n        }\r\n      </div>\r\n\r\n      <!-- buttons -->\r\n      <div class=\"lf-table-item-buttons\">\r\n        @let combinedButtons = getCombinedActions(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-bottom-bar-button ml-2\"\r\n                [class.disabled]=\"disabled\"\r\n                [ngClass]=\"button.cssClass\"\r\n                (click)=\"buttonClickEvent.emit({ buttonId: button.id, item })\"\r\n                [disabled]=\"disabled\"\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                    [alignMiddle]=\"true\"></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-bottom-bar-button-icon ml-2\"\r\n                [class.disabled]=\"disabled\"\r\n                [ngClass]=\"button.cssClass\"\r\n                (click)=\"buttonClickEvent.emit({ buttonId: button.id, item })\"\r\n                [disabled]=\"disabled\"\r\n                [matTooltip]=\"button.tooltip\">\r\n                <lf-icon [matIcon]=\"button.matIcon\" [svgIcon]=\"button.svgIcon\"></lf-icon>\r\n              </button>\r\n            }\r\n            <!-- [color]=\"button.color\" -->\r\n          }\r\n        }\r\n      </div>\r\n\r\n      <!-- checkbox -->\r\n      @if (header?.enableSelection) {\r\n        <div class=\"lf-table-item-checkbox ml-3\">\r\n          <mat-checkbox\r\n            [(ngModel)]=\"item.checked\"\r\n            (ngModelChange)=\"selectItem()\"\r\n            [disabled]=\"item.disabled!\"></mat-checkbox>\r\n        </div>\r\n      }\r\n    </div>\r\n    @if (showDividers) {\r\n      <mat-divider></mat-divider>\r\n    }\r\n  }\r\n</div>\r\n", styles: [".lf-table{width:100%}.lf-table-item{width:100%;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;height:72px;border-radius:4px;box-sizing:border-box}.lf-table-item.disabled .lf-table-item-title-wrapper{opacity:.64}.lf-table-item.clickable .lf-table-item-title{cursor:pointer}.lf-table-item .lf-table-item-sort-icon{font-size:16px;width:16px;height:16px;vertical-align:text-top}.lf-table-item .lf-table-item-checkbox{flex:0 0 40px}.lf-table-item .lf-table-item-avatar{flex:0 0 48px;display:flex;align-items:center;justify-content:center}.lf-table-item .lf-table-item-avatar img{width:48px;height:48px;border-radius:50%;object-fit:cover;background-color:#fff}.lf-table-item .lf-table-item-title-wrapper{display:flex;flex-flow:column;align-items:flex-start;flex:1 1 200px;overflow:hidden}.lf-table-item .lf-table-item-title-wrapper .lf-table-item-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lf-table-item .lf-table-item-title-wrapper .lf-table-item-subtitle{font-size:.8rem}.lf-table-item .lf-table-item-buttons{flex:0 0 auto;display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between}.lf-table-item.lf-table-item-header{font-weight:500}.lf-table-item.lf-table-item-header .lf-table-item-title-wrapper span{width:80px}.lf-table-item.lf-table-item-data:hover{background-color:#00000014}.lf-table-item .clickable{cursor:pointer}.lf-table-item .flex-row{display:flex!important;flex-flow:row nowrap;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "component", type: IconComponent, selector: "lf-icon", inputs: ["matIcon", "svgIcon", "alignMiddle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: ListComponent, isStandalone: true, selector: "lf-list", inputs: { header: "header", items: "items", buttons: "buttons", avatarFallbackPath: "avatarFallbackPath", showDividers: "showDividers" }, outputs: { sortChangeEvent: "sortChangeEvent", selectionChangeEvent: "selectionChangeEvent", itemClickEvent: "itemClickEvent", buttonClickEvent: "buttonClickEvent" }, ngImport: i0, template: "<!-- lf-list.component.html -->\r\n<div class=\"lf-table\">\r\n  <!-- Header -->\r\n  @if (header) {\r\n    <div class=\"lf-table-item lf-table-item-header\">\r\n      <!-- avatar -->\r\n      @if (header.avatar) {\r\n        <div class=\"lf-table-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-table-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-table-item-avatar px-2\"></div>\r\n      }\r\n\r\n      <!-- title -->\r\n      <div class=\"lf-table-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-table-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-table-item-buttons\"></div>\r\n\r\n      <!-- checkbox -->\r\n      @if (header.enableSelection) {\r\n        <div class=\"lf-table-item-checkbox ml-3\">\r\n          <mat-checkbox\r\n            [checked]=\"allSelected && !someSelected\"\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  <!-- Items -->\r\n  @for (item of items; track item.id; let last = $last) {\r\n    <div\r\n      class=\"lf-table-item lf-table-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      <!-- avatar -->\r\n      @if (item.avatar) {\r\n        <div class=\"lf-table-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-table-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-table-item-title-wrapper px-2\">\r\n        <span\r\n          class=\"lf-table-item-title\"\r\n          (click)=\"item.clickable && !item.disabled ? itemClickEvent.emit(item) : null\">\r\n          {{ item.title }}\r\n        </span>\r\n        @if (item.subtitle) {\r\n          <span class=\"lf-table-item-subtitle\">{{ item.subtitle }}</span>\r\n        }\r\n      </div>\r\n\r\n      <!-- buttons -->\r\n      <div class=\"lf-table-item-buttons\">\r\n        @let combinedButtons = getCombinedActions(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-bottom-bar-button ml-2\"\r\n                [class.disabled]=\"disabled\"\r\n                [ngClass]=\"button.cssClass\"\r\n                (click)=\"buttonClickEvent.emit({ buttonId: button.id, item })\"\r\n                [disabled]=\"disabled\"\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                    [alignMiddle]=\"true\"></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-bottom-bar-button-icon ml-2\"\r\n                [class.disabled]=\"disabled\"\r\n                [ngClass]=\"button.cssClass\"\r\n                (click)=\"buttonClickEvent.emit({ buttonId: button.id, item })\"\r\n                [disabled]=\"disabled\"\r\n                [matTooltip]=\"button.tooltip\">\r\n                <lf-icon [matIcon]=\"button.matIcon\" [svgIcon]=\"button.svgIcon\"></lf-icon>\r\n              </button>\r\n            }\r\n            <!-- [color]=\"button.color\" -->\r\n          }\r\n        }\r\n      </div>\r\n\r\n      <!-- checkbox -->\r\n      @if (header?.enableSelection) {\r\n        <div class=\"lf-table-item-checkbox ml-3\">\r\n          <mat-checkbox\r\n            [(ngModel)]=\"item.checked\"\r\n            (ngModelChange)=\"selectItem()\"\r\n            [disabled]=\"item.disabled!\"></mat-checkbox>\r\n        </div>\r\n      }\r\n    </div>\r\n    @if (showDividers && !last) {\r\n      <mat-divider></mat-divider>\r\n    }\r\n  }\r\n</div>\r\n", styles: [".lf-table{width:100%}.lf-table-item{width:100%;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;height:72px;border-radius:4px;box-sizing:border-box}.lf-table-item.disabled .lf-table-item-title-wrapper{opacity:.64}.lf-table-item.clickable .lf-table-item-title{cursor:pointer}.lf-table-item .lf-table-item-sort-icon{font-size:16px;width:16px;height:16px;vertical-align:text-top}.lf-table-item .lf-table-item-checkbox{flex:0 0 40px}.lf-table-item .lf-table-item-avatar{flex:0 0 48px;display:flex;align-items:center;justify-content:center}.lf-table-item .lf-table-item-avatar img{width:48px;height:48px;border-radius:50%;object-fit:cover;background-color:#fff}.lf-table-item .lf-table-item-title-wrapper{display:flex;flex-flow:column;align-items:flex-start;flex:1 1 200px;overflow:hidden}.lf-table-item .lf-table-item-title-wrapper .lf-table-item-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lf-table-item .lf-table-item-title-wrapper .lf-table-item-subtitle{font-size:.8rem}.lf-table-item .lf-table-item-buttons{flex:0 0 auto;display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between}.lf-table-item.lf-table-item-header{font-weight:500}.lf-table-item.lf-table-item-header .lf-table-item-title-wrapper span{width:80px}.lf-table-item.lf-table-item-data:hover{background-color:#00000014}.lf-table-item .clickable{cursor:pointer}.lf-table-item .flex-row{display:flex!important;flex-flow:row nowrap;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "component", type: IconComponent, selector: "lf-icon", inputs: ["matIcon", "svgIcon", "alignMiddle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lf-list', standalone: true, imports: [SharedModule, IconComponent], template: "<!-- lf-list.component.html -->\r\n<div class=\"lf-table\">\r\n  <!-- Header -->\r\n  @if (header) {\r\n    <div class=\"lf-table-item lf-table-item-header\">\r\n      <!-- avatar -->\r\n      @if (header.avatar) {\r\n        <div class=\"lf-table-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-table-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-table-item-avatar px-2\"></div>\r\n      }\r\n\r\n      <!-- title -->\r\n      <div class=\"lf-table-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-table-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-table-item-buttons\"></div>\r\n\r\n      <!-- checkbox -->\r\n      @if (header.enableSelection) {\r\n        <div class=\"lf-table-item-checkbox ml-3\">\r\n          <mat-checkbox\r\n            [checked]=\"allSelected && !someSelected\"\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  <!-- Items -->\r\n  @for (item of items; track item.id) {\r\n    <div\r\n      class=\"lf-table-item lf-table-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      <!-- avatar -->\r\n      @if (item.avatar) {\r\n        <div class=\"lf-table-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-table-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-table-item-title-wrapper px-2\">\r\n        <span\r\n          class=\"lf-table-item-title\"\r\n          (click)=\"item.clickable && !item.disabled ? itemClickEvent.emit(item) : null\">\r\n          {{ item.title }}\r\n        </span>\r\n        @if (item.subtitle) {\r\n          <span class=\"lf-table-item-subtitle\">{{ item.subtitle }}</span>\r\n        }\r\n      </div>\r\n\r\n      <!-- buttons -->\r\n      <div class=\"lf-table-item-buttons\">\r\n        @let combinedButtons = getCombinedActions(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-bottom-bar-button ml-2\"\r\n                [class.disabled]=\"disabled\"\r\n                [ngClass]=\"button.cssClass\"\r\n                (click)=\"buttonClickEvent.emit({ buttonId: button.id, item })\"\r\n                [disabled]=\"disabled\"\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                    [alignMiddle]=\"true\"></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-bottom-bar-button-icon ml-2\"\r\n                [class.disabled]=\"disabled\"\r\n                [ngClass]=\"button.cssClass\"\r\n                (click)=\"buttonClickEvent.emit({ buttonId: button.id, item })\"\r\n                [disabled]=\"disabled\"\r\n                [matTooltip]=\"button.tooltip\">\r\n                <lf-icon [matIcon]=\"button.matIcon\" [svgIcon]=\"button.svgIcon\"></lf-icon>\r\n              </button>\r\n            }\r\n            <!-- [color]=\"button.color\" -->\r\n          }\r\n        }\r\n      </div>\r\n\r\n      <!-- checkbox -->\r\n      @if (header?.enableSelection) {\r\n        <div class=\"lf-table-item-checkbox ml-3\">\r\n          <mat-checkbox\r\n            [(ngModel)]=\"item.checked\"\r\n            (ngModelChange)=\"selectItem()\"\r\n            [disabled]=\"item.disabled!\"></mat-checkbox>\r\n        </div>\r\n      }\r\n    </div>\r\n    @if (showDividers) {\r\n      <mat-divider></mat-divider>\r\n    }\r\n  }\r\n</div>\r\n", styles: [".lf-table{width:100%}.lf-table-item{width:100%;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;height:72px;border-radius:4px;box-sizing:border-box}.lf-table-item.disabled .lf-table-item-title-wrapper{opacity:.64}.lf-table-item.clickable .lf-table-item-title{cursor:pointer}.lf-table-item .lf-table-item-sort-icon{font-size:16px;width:16px;height:16px;vertical-align:text-top}.lf-table-item .lf-table-item-checkbox{flex:0 0 40px}.lf-table-item .lf-table-item-avatar{flex:0 0 48px;display:flex;align-items:center;justify-content:center}.lf-table-item .lf-table-item-avatar img{width:48px;height:48px;border-radius:50%;object-fit:cover;background-color:#fff}.lf-table-item .lf-table-item-title-wrapper{display:flex;flex-flow:column;align-items:flex-start;flex:1 1 200px;overflow:hidden}.lf-table-item .lf-table-item-title-wrapper .lf-table-item-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lf-table-item .lf-table-item-title-wrapper .lf-table-item-subtitle{font-size:.8rem}.lf-table-item .lf-table-item-buttons{flex:0 0 auto;display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between}.lf-table-item.lf-table-item-header{font-weight:500}.lf-table-item.lf-table-item-header .lf-table-item-title-wrapper span{width:80px}.lf-table-item.lf-table-item-data:hover{background-color:#00000014}.lf-table-item .clickable{cursor:pointer}.lf-table-item .flex-row{display:flex!important;flex-flow:row nowrap;align-items:center}\n"] }]
+            args: [{ selector: 'lf-list', standalone: true, imports: [SharedModule, IconComponent], template: "<!-- lf-list.component.html -->\r\n<div class=\"lf-table\">\r\n  <!-- Header -->\r\n  @if (header) {\r\n    <div class=\"lf-table-item lf-table-item-header\">\r\n      <!-- avatar -->\r\n      @if (header.avatar) {\r\n        <div class=\"lf-table-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-table-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-table-item-avatar px-2\"></div>\r\n      }\r\n\r\n      <!-- title -->\r\n      <div class=\"lf-table-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-table-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-table-item-buttons\"></div>\r\n\r\n      <!-- checkbox -->\r\n      @if (header.enableSelection) {\r\n        <div class=\"lf-table-item-checkbox ml-3\">\r\n          <mat-checkbox\r\n            [checked]=\"allSelected && !someSelected\"\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  <!-- Items -->\r\n  @for (item of items; track item.id; let last = $last) {\r\n    <div\r\n      class=\"lf-table-item lf-table-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      <!-- avatar -->\r\n      @if (item.avatar) {\r\n        <div class=\"lf-table-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-table-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-table-item-title-wrapper px-2\">\r\n        <span\r\n          class=\"lf-table-item-title\"\r\n          (click)=\"item.clickable && !item.disabled ? itemClickEvent.emit(item) : null\">\r\n          {{ item.title }}\r\n        </span>\r\n        @if (item.subtitle) {\r\n          <span class=\"lf-table-item-subtitle\">{{ item.subtitle }}</span>\r\n        }\r\n      </div>\r\n\r\n      <!-- buttons -->\r\n      <div class=\"lf-table-item-buttons\">\r\n        @let combinedButtons = getCombinedActions(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-bottom-bar-button ml-2\"\r\n                [class.disabled]=\"disabled\"\r\n                [ngClass]=\"button.cssClass\"\r\n                (click)=\"buttonClickEvent.emit({ buttonId: button.id, item })\"\r\n                [disabled]=\"disabled\"\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                    [alignMiddle]=\"true\"></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-bottom-bar-button-icon ml-2\"\r\n                [class.disabled]=\"disabled\"\r\n                [ngClass]=\"button.cssClass\"\r\n                (click)=\"buttonClickEvent.emit({ buttonId: button.id, item })\"\r\n                [disabled]=\"disabled\"\r\n                [matTooltip]=\"button.tooltip\">\r\n                <lf-icon [matIcon]=\"button.matIcon\" [svgIcon]=\"button.svgIcon\"></lf-icon>\r\n              </button>\r\n            }\r\n            <!-- [color]=\"button.color\" -->\r\n          }\r\n        }\r\n      </div>\r\n\r\n      <!-- checkbox -->\r\n      @if (header?.enableSelection) {\r\n        <div class=\"lf-table-item-checkbox ml-3\">\r\n          <mat-checkbox\r\n            [(ngModel)]=\"item.checked\"\r\n            (ngModelChange)=\"selectItem()\"\r\n            [disabled]=\"item.disabled!\"></mat-checkbox>\r\n        </div>\r\n      }\r\n    </div>\r\n    @if (showDividers && !last) {\r\n      <mat-divider></mat-divider>\r\n    }\r\n  }\r\n</div>\r\n", styles: [".lf-table{width:100%}.lf-table-item{width:100%;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;height:72px;border-radius:4px;box-sizing:border-box}.lf-table-item.disabled .lf-table-item-title-wrapper{opacity:.64}.lf-table-item.clickable .lf-table-item-title{cursor:pointer}.lf-table-item .lf-table-item-sort-icon{font-size:16px;width:16px;height:16px;vertical-align:text-top}.lf-table-item .lf-table-item-checkbox{flex:0 0 40px}.lf-table-item .lf-table-item-avatar{flex:0 0 48px;display:flex;align-items:center;justify-content:center}.lf-table-item .lf-table-item-avatar img{width:48px;height:48px;border-radius:50%;object-fit:cover;background-color:#fff}.lf-table-item .lf-table-item-title-wrapper{display:flex;flex-flow:column;align-items:flex-start;flex:1 1 200px;overflow:hidden}.lf-table-item .lf-table-item-title-wrapper .lf-table-item-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lf-table-item .lf-table-item-title-wrapper .lf-table-item-subtitle{font-size:.8rem}.lf-table-item .lf-table-item-buttons{flex:0 0 auto;display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between}.lf-table-item.lf-table-item-header{font-weight:500}.lf-table-item.lf-table-item-header .lf-table-item-title-wrapper span{width:80px}.lf-table-item.lf-table-item-data:hover{background-color:#00000014}.lf-table-item .clickable{cursor:pointer}.lf-table-item .flex-row{display:flex!important;flex-flow:row nowrap;align-items:center}\n"] }]
         }], propDecorators: { header: [{
                 type: Input
             }], items: [{