@lukfel/ng-scaffold 21.1.54 → 21.1.56

package/fesm2022/lukfel-ng-scaffold.mjs

@@ -46,9 +46,7 @@ import { MatDividerModule } from '@angular/material/divider';
 
 const CONFIG = new InjectionToken('config');
 function provideScaffold(config = {}) {
-    return makeEnvironmentProviders([
-        { provide: CONFIG, useValue: config }
-    ]);
+    return makeEnvironmentProviders([{ provide: CONFIG, useValue: config }]);
 }
 
 class BreakpointService {
@@ -77,11 +75,11 @@ class DialogService {
      * @returns an asynchronous boolean response
      */
     async openConfirmDialog(config) {
-        const { ConfirmDialogComponent } = await import('./lukfel-ng-scaffold-confirm-dialog.component-DXfQ5moR.mjs');
+        const { ConfirmDialogComponent } = await import('./lukfel-ng-scaffold-confirm-dialog.component-DAl-XH0n.mjs');
         const dialogRef = this.matDialog.open(ConfirmDialogComponent, {
             autoFocus: false,
             maxWidth: '368px',
-            data: config
+            data: config,
         });
         return firstValueFrom(dialogRef.afterClosed());
     }
@@ -108,7 +106,7 @@ class DialogService {
             autoFocus: false,
             width: '100vw',
             data: config,
-            panelClass: 'lf-input-dialog'
+            panelClass: 'lf-input-dialog',
         });
         return firstValueFrom(dialogRef.afterClosed());
     }
@@ -118,7 +116,7 @@ class DialogService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DialogService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 }]
         }] });
 
@@ -309,7 +307,7 @@ class LocalStorageService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: LocalStorageService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 }]
         }] });
 
@@ -348,7 +346,7 @@ class OverlayService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: OverlayService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 }]
         }] });
 
@@ -381,7 +379,7 @@ class RouterService {
         if (isPlatformBrowser(this.platformId)) {
             history.replaceState({ ...history.state, back: false }, '');
         }
-        this.router.events.subscribe(event => {
+        this.router.events.subscribe((event) => {
             let asyncLoadCount = 0;
             if (event instanceof RouteConfigLoadStart) {
                 asyncLoadCount++;
@@ -411,11 +409,11 @@ class RouterService {
      * @param fallbackRoute fallback in case there is no previous route
      */
     navigateBack(fallbackRoute) {
-        this._routeHistory$.pipe(take(1)).subscribe(routeHistory => {
+        this._routeHistory$.pipe(take(1)).subscribe((routeHistory) => {
             if (routeHistory.length > 0) {
                 const previousRoute = routeHistory[routeHistory.length - 1];
                 if (previousRoute) {
-                    this.router.navigateByUrl(previousRoute, { state: { back: true } }).then(result => {
+                    this.router.navigateByUrl(previousRoute, { state: { back: true } }).then((result) => {
                         if (result) {
                             routeHistory.pop();
                         }
@@ -544,7 +542,7 @@ class SeoService {
             if (autoTrim && title.length > titleLimit) {
                 this.logger.error(`[SeoService] The set meta title is too long. Recommended length is ${titleLimit}. The title will be trimmed.`);
             }
-            const titleTrim = (title.length > titleLimit) ? title.substring(0, titleLimit - 3) + '...' : title;
+            const titleTrim = title.length > titleLimit ? title.substring(0, titleLimit - 3) + '...' : title;
             this._setMetaTitle(autoTrim ? titleTrim : title);
         }
         // Set meta description
@@ -552,7 +550,9 @@ class SeoService {
             if (autoTrim && description.length > descriptionLimit) {
                 this.logger.error(`[SeoService] The set meta description is too long. Recommended length is ${descriptionLimit}. The description will be trimmed.`);
             }
-            const descriptionTrim = (description.length > descriptionLimit) ? description.substring(0, descriptionLimit - 3) + '...' : description;
+            const descriptionTrim = description.length > descriptionLimit
+                ? description.substring(0, descriptionLimit - 3) + '...'
+                : description;
             this._setMetaDescription(autoTrim ? descriptionTrim : description);
         }
         // Set meta image
@@ -584,7 +584,7 @@ class SeoService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SeoService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 }]
         }] });
 
@@ -597,12 +597,12 @@ class SnackbarService {
         this.actionConfig = {
             duration: this.SNACKBAR_DURATION,
             horizontalPosition: this.SNACKBAR_POSITION_HORIZONTAL,
-            verticalPosition: this.SNACKBAR_POSITION_VERTICAL
+            verticalPosition: this.SNACKBAR_POSITION_VERTICAL,
         };
         this.defaultConfig = {
-            duration: (this.SNACKBAR_DURATION / 2),
+            duration: this.SNACKBAR_DURATION / 2,
             horizontalPosition: this.SNACKBAR_POSITION_HORIZONTAL,
-            verticalPosition: this.SNACKBAR_POSITION_VERTICAL
+            verticalPosition: this.SNACKBAR_POSITION_VERTICAL,
         };
     }
     // Opens a generic snackbar with a message
@@ -620,7 +620,7 @@ class SnackbarService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnackbarService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 }]
         }] });
 
@@ -679,7 +679,7 @@ class ThemeService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ThemeService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 }]
         }], ctorParameters: () => [] });
 
@@ -706,13 +706,7 @@ class BottomBarComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: BottomBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lf-bottom-bar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        MatButtonModule,
-                        MatIconModule,
-                        MatToolbarModule,
-                        MatTooltipModule,
-                        NgClass
-                    ], template: "@if (bottomBarConfig(); as config) {\r\n  @if (config.enable) {\r\n    <mat-toolbar\r\n      animate.enter=\"lf-anim-slide-up-enter\"\r\n      animate.leave=\"lf-anim-slide-up-leave\"\r\n      class=\"lf-bottom-bar lf-transitions px-4\"\r\n      color=\"accent\"\r\n      [ngClass]=\"config.cssClass\"\r\n      [class.lf-bottom-bar-show-navbar]=\"!isMobile() && navbarEnabled()\"\r\n      [class.lf-bottom-bar-show-navbar-mobile]=\"isMobile() && navbarEnabled()\">\r\n      @if (config.closeButtonId) {\r\n        <button mat-icon-button (click)=\"closeClicked(config.closeButtonId)\">\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      }\r\n      @if (config.message) {\r\n        <span class=\"ml-2\">{{ config.message }}</span>\r\n      }\r\n      @if (config.buttons) {\r\n        <div class=\"lf-bottom-bar-buttons ml-4\">\r\n          @for (button of config.buttons; track button.id) {\r\n            <!-- label button -->\r\n            @if (button.label) {\r\n              <button\r\n                mat-button\r\n                class=\"lf-bottom-bar-button ml-2\"\r\n                [ngClass]=\"button.cssClass\"\r\n                [disabled]=\"button.disabled\"\r\n                (click)=\"buttonClicked(button.id)\"\r\n                [matTooltip]=\"button.tooltip\">\r\n                <!-- icon -->\r\n                <!-- icon -->\r\n                @if (button.matIcon) {\r\n                  <mat-icon>\r\n                    {{ button.matIcon }}\r\n                  </mat-icon>\r\n                } @else if (button.svgIcon) {\r\n                  <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n                }\r\n                <!-- label -->\r\n                {{ button.label }}\r\n              </button>\r\n              <!-- icon button -->\r\n            } @else {\r\n              <button\r\n                mat-icon-button\r\n                color=\"accent\"\r\n                class=\"lf-bottom-bar-button-icon ml-2\"\r\n                [ngClass]=\"button.cssClass\"\r\n                [disabled]=\"button.disabled\"\r\n                (click)=\"buttonClicked(button.id)\"\r\n                [matTooltip]=\"button.tooltip\">\r\n                <!-- icon -->\r\n                @if (button.matIcon) {\r\n                  <mat-icon>\r\n                    {{ button.matIcon }}\r\n                  </mat-icon>\r\n                } @else if (button.svgIcon) {\r\n                  <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n                }\r\n              </button>\r\n            }\r\n          }\r\n        </div>\r\n      }\r\n    </mat-toolbar>\r\n  }\r\n}\r\n", styles: [".lf-bottom-bar{z-index:var(--bottom-bar-z-index);position:fixed;left:0;bottom:0;right:0;height:var(--bottom-bar-height);font-size:var(--bottom-bar-font-size)}.lf-bottom-bar.lf-bottom-bar-show-navbar-mobile{bottom:calc(var(--navbar-height-mobile) + 2 * var(--navbar-padding))!important}.lf-bottom-bar.lf-bottom-bar-show-navbar{left:calc(var(--navbar-width) + 2 * var(--navbar-padding))!important}.lf-bottom-bar .lf-bottom-bar-buttons{display:flex;align-items:center}.lf-bottom-bar .lf-bottom-bar-buttons .lf-bottom-bar-button{color:var(--color-accent)!important;background-color:#fff!important}\n"] }]
+            args: [{ selector: 'lf-bottom-bar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatButtonModule, MatIconModule, MatToolbarModule, MatTooltipModule, NgClass], template: "@if (bottomBarConfig(); as config) {\r\n  @if (config.enable) {\r\n    <mat-toolbar\r\n      animate.enter=\"lf-anim-slide-up-enter\"\r\n      animate.leave=\"lf-anim-slide-up-leave\"\r\n      class=\"lf-bottom-bar lf-transitions px-4\"\r\n      color=\"accent\"\r\n      [ngClass]=\"config.cssClass\"\r\n      [class.lf-bottom-bar-show-navbar]=\"!isMobile() && navbarEnabled()\"\r\n      [class.lf-bottom-bar-show-navbar-mobile]=\"isMobile() && navbarEnabled()\">\r\n      @if (config.closeButtonId) {\r\n        <button mat-icon-button (click)=\"closeClicked(config.closeButtonId)\">\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      }\r\n      @if (config.message) {\r\n        <span class=\"ml-2\">{{ config.message }}</span>\r\n      }\r\n      @if (config.buttons) {\r\n        <div class=\"lf-bottom-bar-buttons ml-4\">\r\n          @for (button of config.buttons; track button.id) {\r\n            <!-- label button -->\r\n            @if (button.label) {\r\n              <button\r\n                mat-button\r\n                class=\"lf-bottom-bar-button ml-2\"\r\n                [ngClass]=\"button.cssClass\"\r\n                [disabled]=\"button.disabled\"\r\n                (click)=\"buttonClicked(button.id)\"\r\n                [matTooltip]=\"button.tooltip\">\r\n                <!-- icon -->\r\n                <!-- icon -->\r\n                @if (button.matIcon) {\r\n                  <mat-icon>\r\n                    {{ button.matIcon }}\r\n                  </mat-icon>\r\n                } @else if (button.svgIcon) {\r\n                  <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n                }\r\n                <!-- label -->\r\n                {{ button.label }}\r\n              </button>\r\n              <!-- icon button -->\r\n            } @else {\r\n              <button\r\n                mat-icon-button\r\n                color=\"accent\"\r\n                class=\"lf-bottom-bar-button-icon ml-2\"\r\n                [ngClass]=\"button.cssClass\"\r\n                [disabled]=\"button.disabled\"\r\n                (click)=\"buttonClicked(button.id)\"\r\n                [matTooltip]=\"button.tooltip\">\r\n                <!-- icon -->\r\n                @if (button.matIcon) {\r\n                  <mat-icon>\r\n                    {{ button.matIcon }}\r\n                  </mat-icon>\r\n                } @else if (button.svgIcon) {\r\n                  <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n                }\r\n              </button>\r\n            }\r\n          }\r\n        </div>\r\n      }\r\n    </mat-toolbar>\r\n  }\r\n}\r\n", styles: [".lf-bottom-bar{z-index:var(--bottom-bar-z-index);position:fixed;left:0;bottom:0;right:0;height:var(--bottom-bar-height);font-size:var(--bottom-bar-font-size)}.lf-bottom-bar.lf-bottom-bar-show-navbar-mobile{bottom:calc(var(--navbar-height-mobile) + 2 * var(--navbar-padding))!important}.lf-bottom-bar.lf-bottom-bar-show-navbar{left:calc(var(--navbar-width) + 2 * var(--navbar-padding))!important}.lf-bottom-bar .lf-bottom-bar-buttons{display:flex;align-items:center}.lf-bottom-bar .lf-bottom-bar-buttons .lf-bottom-bar-button{color:var(--color-accent)!important;background-color:#fff!important}\n"] }]
         }], propDecorators: { libraryConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "libraryConfig", required: false }] }], bottomBarConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "bottomBarConfig", required: false }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], navbarEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "navbarEnabled", required: false }] }], bottomBarCloseClickEvent: [{ type: i0.Output, args: ["bottomBarCloseClickEvent"] }], bottomBarButtonClickEvent: [{ type: i0.Output, args: ["bottomBarButtonClickEvent"] }] } });
 
 class ContentTitleCardComponent {
@@ -727,16 +721,11 @@ class ContentTitleCardComponent {
         this.backButtonClickEvent.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ContentTitleCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ContentTitleCardComponent, isStandalone: true, selector: "lf-content-title-card", inputs: { libraryConfig: { classPropertyName: "libraryConfig", publicName: "libraryConfig", isSignal: true, isRequired: false, transformFunction: null }, contentTitleCardConfig: { classPropertyName: "contentTitleCardConfig", publicName: "contentTitleCardConfig", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, routeHistory: { classPropertyName: "routeHistory", publicName: "routeHistory", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { backButtonClickEvent: "backButtonClickEvent" }, ngImport: i0, template: "@if (contentTitleCardConfig(); as config) {\r\n  @if (config.enable) {\r\n    <mat-card\r\n      class=\"lf-content-title-card mat-elevation-z2\"\r\n      [class.lf-content-title-card-mobile]=\"isMobile()\"\r\n      [class.px-4]=\"!isMobile()\"\r\n      [class.px-2]=\"isMobile()\"\r\n      [ngClass]=\"config.cssClass\">\r\n      <!-- back button -->\r\n      @if (config.showBackButton && routeHistory().length > 0) {\r\n        <button mat-icon-button color=\"accent\" (click)=\"backButtonClicked()\">\r\n          <mat-icon>arrow_back_ios</mat-icon>\r\n        </button>\r\n      }\r\n      <!-- spacer -->\r\n      <div class=\"flex-auto\"></div>\r\n      <!-- label -->\r\n      <span class=\"lf-content-title-card-label\">\r\n        {{ config.label || \"\" }}\r\n      </span>\r\n      <!-- spacer -->\r\n      <div class=\"flex-auto\"></div>\r\n      <!-- empty button spacer -->\r\n      <div\r\n        [style.width]=\"config.showBackButton && routeHistory().length > 1 ? '48px' : '0px'\"></div>\r\n    </mat-card>\r\n  }\r\n}\r\n", styles: [".lf-content-title-card{z-index:var(--content-title-card-z-index);height:var(--content-title-card-height);display:flex;flex-flow:row nowrap;align-items:center;border-radius:0}.lf-content-title-card.lf-content-title-card-mobile .lf-content-title-card-label{font-size:var(--content-title-card-label-font-size-mobile)}.lf-content-title-card .lf-content-title-card-label{font-size:var(--content-title-card-label-font-size);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ContentTitleCardComponent, isStandalone: true, selector: "lf-content-title-card", inputs: { libraryConfig: { classPropertyName: "libraryConfig", publicName: "libraryConfig", isSignal: true, isRequired: false, transformFunction: null }, contentTitleCardConfig: { classPropertyName: "contentTitleCardConfig", publicName: "contentTitleCardConfig", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, routeHistory: { classPropertyName: "routeHistory", publicName: "routeHistory", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { backButtonClickEvent: "backButtonClickEvent" }, ngImport: i0, template: "@if (contentTitleCardConfig(); as config) {\r\n  @if (config.enable) {\r\n    <mat-card\r\n      class=\"lf-content-title-card mat-elevation-z2\"\r\n      [class.lf-content-title-card-mobile]=\"isMobile()\"\r\n      [class.px-4]=\"!isMobile()\"\r\n      [class.px-2]=\"isMobile()\"\r\n      [ngClass]=\"config.cssClass\">\r\n      <!-- back button -->\r\n      @if (config.showBackButton && routeHistory().length > 0) {\r\n        <button mat-icon-button color=\"accent\" (click)=\"backButtonClicked()\">\r\n          <mat-icon>arrow_back_ios</mat-icon>\r\n        </button>\r\n      }\r\n      <!-- spacer -->\r\n      <div class=\"flex-auto\"></div>\r\n      <!-- label -->\r\n      <span class=\"lf-content-title-card-label\">\r\n        {{ config.label || '' }}\r\n      </span>\r\n      <!-- spacer -->\r\n      <div class=\"flex-auto\"></div>\r\n      <!-- empty button spacer -->\r\n      <div\r\n        [style.width]=\"config.showBackButton && routeHistory().length > 1 ? '48px' : '0px'\"></div>\r\n    </mat-card>\r\n  }\r\n}\r\n", styles: [".lf-content-title-card{z-index:var(--content-title-card-z-index);height:var(--content-title-card-height);display:flex;flex-flow:row nowrap;align-items:center;border-radius:0}.lf-content-title-card.lf-content-title-card-mobile .lf-content-title-card-label{font-size:var(--content-title-card-label-font-size-mobile)}.lf-content-title-card .lf-content-title-card-label{font-size:var(--content-title-card-label-font-size);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ContentTitleCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lf-content-title-card', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        MatCardModule,
-                        MatButtonModule,
-                        MatIconModule,
-                        NgClass
-                    ], template: "@if (contentTitleCardConfig(); as config) {\r\n  @if (config.enable) {\r\n    <mat-card\r\n      class=\"lf-content-title-card mat-elevation-z2\"\r\n      [class.lf-content-title-card-mobile]=\"isMobile()\"\r\n      [class.px-4]=\"!isMobile()\"\r\n      [class.px-2]=\"isMobile()\"\r\n      [ngClass]=\"config.cssClass\">\r\n      <!-- back button -->\r\n      @if (config.showBackButton && routeHistory().length > 0) {\r\n        <button mat-icon-button color=\"accent\" (click)=\"backButtonClicked()\">\r\n          <mat-icon>arrow_back_ios</mat-icon>\r\n        </button>\r\n      }\r\n      <!-- spacer -->\r\n      <div class=\"flex-auto\"></div>\r\n      <!-- label -->\r\n      <span class=\"lf-content-title-card-label\">\r\n        {{ config.label || \"\" }}\r\n      </span>\r\n      <!-- spacer -->\r\n      <div class=\"flex-auto\"></div>\r\n      <!-- empty button spacer -->\r\n      <div\r\n        [style.width]=\"config.showBackButton && routeHistory().length > 1 ? '48px' : '0px'\"></div>\r\n    </mat-card>\r\n  }\r\n}\r\n", styles: [".lf-content-title-card{z-index:var(--content-title-card-z-index);height:var(--content-title-card-height);display:flex;flex-flow:row nowrap;align-items:center;border-radius:0}.lf-content-title-card.lf-content-title-card-mobile .lf-content-title-card-label{font-size:var(--content-title-card-label-font-size-mobile)}.lf-content-title-card .lf-content-title-card-label{font-size:var(--content-title-card-label-font-size);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}\n"] }]
+            args: [{ selector: 'lf-content-title-card', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatCardModule, MatButtonModule, MatIconModule, NgClass], template: "@if (contentTitleCardConfig(); as config) {\r\n  @if (config.enable) {\r\n    <mat-card\r\n      class=\"lf-content-title-card mat-elevation-z2\"\r\n      [class.lf-content-title-card-mobile]=\"isMobile()\"\r\n      [class.px-4]=\"!isMobile()\"\r\n      [class.px-2]=\"isMobile()\"\r\n      [ngClass]=\"config.cssClass\">\r\n      <!-- back button -->\r\n      @if (config.showBackButton && routeHistory().length > 0) {\r\n        <button mat-icon-button color=\"accent\" (click)=\"backButtonClicked()\">\r\n          <mat-icon>arrow_back_ios</mat-icon>\r\n        </button>\r\n      }\r\n      <!-- spacer -->\r\n      <div class=\"flex-auto\"></div>\r\n      <!-- label -->\r\n      <span class=\"lf-content-title-card-label\">\r\n        {{ config.label || '' }}\r\n      </span>\r\n      <!-- spacer -->\r\n      <div class=\"flex-auto\"></div>\r\n      <!-- empty button spacer -->\r\n      <div\r\n        [style.width]=\"config.showBackButton && routeHistory().length > 1 ? '48px' : '0px'\"></div>\r\n    </mat-card>\r\n  }\r\n}\r\n", styles: [".lf-content-title-card{z-index:var(--content-title-card-z-index);height:var(--content-title-card-height);display:flex;flex-flow:row nowrap;align-items:center;border-radius:0}.lf-content-title-card.lf-content-title-card-mobile .lf-content-title-card-label{font-size:var(--content-title-card-label-font-size-mobile)}.lf-content-title-card .lf-content-title-card-label{font-size:var(--content-title-card-label-font-size);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}\n"] }]
         }], propDecorators: { libraryConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "libraryConfig", required: false }] }], contentTitleCardConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentTitleCardConfig", required: false }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], routeHistory: [{ type: i0.Input, args: [{ isSignal: true, alias: "routeHistory", required: false }] }], backButtonClickEvent: [{ type: i0.Output, args: ["backButtonClickEvent"] }] } });
 
 class DrawerComponent {
@@ -763,19 +752,13 @@ class DrawerComponent {
         if (this.drawerConfig()) {
             this.drawerConfigUpdateEvent.emit({ open: false });
         }
-        ;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: DrawerComponent, isStandalone: true, selector: "lf-drawer", inputs: { libraryConfig: { classPropertyName: "libraryConfig", publicName: "libraryConfig", isSignal: true, isRequired: false, transformFunction: null }, drawerConfig: { classPropertyName: "drawerConfig", publicName: "drawerConfig", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, headerEnabled: { classPropertyName: "headerEnabled", publicName: "headerEnabled", isSignal: true, isRequired: false, transformFunction: null }, drawerPortal: { classPropertyName: "drawerPortal", publicName: "drawerPortal", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { drawerConfigUpdateEvent: "drawerConfigUpdateEvent" }, ngImport: i0, template: "@if (drawerConfig(); as config) {\r\n  @if (config.enable) {\r\n    <mat-sidenav-container class=\"lf-drawer-container lf-transitions\" [ngClass]=\"config.cssClass\">\r\n      <!-- drawer -->\r\n      <mat-sidenav\r\n        #drawer\r\n        class=\"lf-drawer mat-elevation-z2\"\r\n        [class.mobile]=\"isMobile()\"\r\n        [mode]=\"isMobile() ? 'over' : 'side'\"\r\n        [opened]=\"config.open\"\r\n        [autoFocus]=\"false\"\r\n        [fixedInViewport]=\"config.fixed\"\r\n        [class.lf-drawer-show-header]=\"headerEnabled() && config.fixed\"\r\n        (closed)=\"drawerClosed()\">\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 class=\"overflow-unset\">\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} @else {\r\n  <!-- render content without drawer -->\r\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n}\r\n\r\n<!-- this template is required to allow multiple <ng-content></ng-content> -->\r\n<ng-template #content><ng-content></ng-content></ng-template>\r\n", styles: [".lf-drawer-container{z-index:unset!important;overflow:unset!important}.lf-drawer-container .lf-drawer{z-index:var(--drawer-z-index);width:var(--drawer-width);border-right:1px solid var(--mat-sys-outline-variant, rgba(0, 0, 0, .12))}.lf-drawer-container .lf-drawer.mobile{z-index:var(--drawer-z-index-mobile)}.lf-drawer-container .lf-drawer.lf-drawer-show-header{top:var(--header-height)!important}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "ngmodule", type: MatSidenavModule }, { 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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DrawerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lf-drawer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        PortalModule,
-                        MatSidenavModule,
-                        NgClass,
-                        NgTemplateOutlet
-                    ], template: "@if (drawerConfig(); as config) {\r\n  @if (config.enable) {\r\n    <mat-sidenav-container class=\"lf-drawer-container lf-transitions\" [ngClass]=\"config.cssClass\">\r\n      <!-- drawer -->\r\n      <mat-sidenav\r\n        #drawer\r\n        class=\"lf-drawer mat-elevation-z2\"\r\n        [class.mobile]=\"isMobile()\"\r\n        [mode]=\"isMobile() ? 'over' : 'side'\"\r\n        [opened]=\"config.open\"\r\n        [autoFocus]=\"false\"\r\n        [fixedInViewport]=\"config.fixed\"\r\n        [class.lf-drawer-show-header]=\"headerEnabled() && config.fixed\"\r\n        (closed)=\"drawerClosed()\">\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 class=\"overflow-unset\">\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} @else {\r\n  <!-- render content without drawer -->\r\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n}\r\n\r\n<!-- this template is required to allow multiple <ng-content></ng-content> -->\r\n<ng-template #content><ng-content></ng-content></ng-template>\r\n", styles: [".lf-drawer-container{z-index:unset!important;overflow:unset!important}.lf-drawer-container .lf-drawer{z-index:var(--drawer-z-index);width:var(--drawer-width);border-right:1px solid var(--mat-sys-outline-variant, rgba(0, 0, 0, .12))}.lf-drawer-container .lf-drawer.mobile{z-index:var(--drawer-z-index-mobile)}.lf-drawer-container .lf-drawer.lf-drawer-show-header{top:var(--header-height)!important}\n"] }]
+            args: [{ selector: 'lf-drawer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [PortalModule, MatSidenavModule, NgClass, NgTemplateOutlet], template: "@if (drawerConfig(); as config) {\r\n  @if (config.enable) {\r\n    <mat-sidenav-container class=\"lf-drawer-container lf-transitions\" [ngClass]=\"config.cssClass\">\r\n      <!-- drawer -->\r\n      <mat-sidenav\r\n        #drawer\r\n        class=\"lf-drawer mat-elevation-z2\"\r\n        [class.mobile]=\"isMobile()\"\r\n        [mode]=\"isMobile() ? 'over' : 'side'\"\r\n        [opened]=\"config.open\"\r\n        [autoFocus]=\"false\"\r\n        [fixedInViewport]=\"config.fixed\"\r\n        [class.lf-drawer-show-header]=\"headerEnabled() && config.fixed\"\r\n        (closed)=\"drawerClosed()\">\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 class=\"overflow-unset\">\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} @else {\r\n  <!-- render content without drawer -->\r\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n}\r\n\r\n<!-- this template is required to allow multiple <ng-content></ng-content> -->\r\n<ng-template #content><ng-content></ng-content></ng-template>\r\n", styles: [".lf-drawer-container{z-index:unset!important;overflow:unset!important}.lf-drawer-container .lf-drawer{z-index:var(--drawer-z-index);width:var(--drawer-width);border-right:1px solid var(--mat-sys-outline-variant, rgba(0, 0, 0, .12))}.lf-drawer-container .lf-drawer.mobile{z-index:var(--drawer-z-index-mobile)}.lf-drawer-container .lf-drawer.lf-drawer-show-header{top:var(--header-height)!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { libraryConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "libraryConfig", required: false }] }], drawerConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerConfig", required: false }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], headerEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerEnabled", required: false }] }], drawerPortal: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerPortal", required: false }] }], drawerConfigUpdateEvent: [{ type: i0.Output, args: ["drawerConfigUpdateEvent"] }] } });
 
 class FloatingButtonComponent {
@@ -796,8 +779,10 @@ class FloatingButtonComponent {
                 return;
             this.initialized.set(true);
             const updatedFloatingButtonConfigConfig = {
-                matIcon: (!floatingButtonConfig.matIcon && !floatingButtonConfig.svgIcon) ? 'arrow_upward' : floatingButtonConfig.matIcon || floatingButtonConfig.svgIcon,
-                horizontalPosition: floatingButtonConfig.horizontalPosition ?? 'right'
+                matIcon: !floatingButtonConfig.matIcon && !floatingButtonConfig.svgIcon
+                    ? 'arrow_upward'
+                    : floatingButtonConfig.matIcon || floatingButtonConfig.svgIcon,
+                horizontalPosition: floatingButtonConfig.horizontalPosition ?? 'right',
             };
             if (JSON.stringify(updatedFloatingButtonConfigConfig) !== JSON.stringify(floatingButtonConfig)) {
                 this.floatingButtonConfigUpdateEvent.emit(updatedFloatingButtonConfigConfig);
@@ -812,12 +797,7 @@ class FloatingButtonComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FloatingButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lf-floating-button', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        MatButtonModule,
-                        MatIconModule,
-                        MatTooltipModule,
-                        NgClass
-                    ], template: "@if (floatingButtonConfig(); as config) {\r\n  @if (config.enable && (!config.autoHide || !onTop())) {\r\n    <button\r\n      mat-fab\r\n      color=\"accent\"\r\n      class=\"lf-floating-button lf-transitions\"\r\n      [ngClass]=\"config.cssClass + ' ' + config.horizontalPosition\"\r\n      [class.sticky]=\"config.sticky\"\r\n      [class.show-navbar]=\"isMobile() && navbarEnabled() && !bottomBarEnabled()\"\r\n      [class.show-bottom-bar]=\"bottomBarEnabled() && !(isMobile() && navbarEnabled())\"\r\n      [class.show-navbar-and-bottom-bar]=\"isMobile() && navbarEnabled() && bottomBarEnabled()\"\r\n      [class.show-drawer]=\"!isMobile() && drawerEnabled()\"\r\n      [extended]=\"!!config.label\"\r\n      [disabled]=\"config.disabled\"\r\n      (click)=\"buttonClicked(config.id)\"\r\n      [matTooltip]=\"config.tooltip!\">\r\n      <!-- icon -->\r\n      @if (config.matIcon) {\r\n        <mat-icon>\r\n          {{ config.matIcon }}\r\n        </mat-icon>\r\n      } @else if (config.svgIcon) {\r\n        <mat-icon [svgIcon]=\"config.svgIcon\"></mat-icon>\r\n      }\r\n      <!-- svg icon -->\r\n      <!-- label -->\r\n      @if (config.label) {\r\n        <span class=\"lf-floating-button-label\">\r\n          {{ config.label }}\r\n        </span>\r\n      }\r\n    </button>\r\n  }\r\n}\r\n", styles: [".lf-floating-button{z-index:var(--floating-button-z-index);bottom:var(--floating-button-bottom)}.lf-floating-button.sticky{position:sticky!important}.lf-floating-button.sticky.show-bottom-bar,.lf-floating-button.sticky.show-navbar-and-bottom-bar{bottom:calc(var(--floating-button-bottom) + var(--bottom-bar-height))}.lf-floating-button.sticky.center{left:50%;transform:translate(-50%)}.lf-floating-button.sticky.center.show-drawer{left:calc(50% + var(--drawer-width) / 2)!important}.lf-floating-button.sticky.right{left:100%}.lf-floating-button:not(.sticky){position:fixed!important}.lf-floating-button:not(.sticky).show-navbar{bottom:calc(var(--floating-button-bottom) + var(--navbar-height-mobile))}.lf-floating-button:not(.sticky).show-bottom-bar{bottom:calc(var(--floating-button-bottom) + var(--bottom-bar-height))}.lf-floating-button:not(.sticky).show-navbar-and-bottom-bar{bottom:calc(var(--floating-button-bottom) + var(--navbar-height-mobile) + var(--bottom-bar-height))}.lf-floating-button:not(.sticky).center{left:calc(50% - 4px);transform:translate(-50%)}.lf-floating-button:not(.sticky).center.show-drawer{left:calc(50% + var(--drawer-width) / 2 - 4px)!important}.lf-floating-button:not(.sticky).right{left:calc(100% - (var(--floating-button-right) + 8px));transform:translate(-100%)}\n"] }]
+            args: [{ selector: 'lf-floating-button', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatButtonModule, MatIconModule, MatTooltipModule, NgClass], template: "@if (floatingButtonConfig(); as config) {\r\n  @if (config.enable && (!config.autoHide || !onTop())) {\r\n    <button\r\n      mat-fab\r\n      color=\"accent\"\r\n      class=\"lf-floating-button lf-transitions\"\r\n      [ngClass]=\"config.cssClass + ' ' + config.horizontalPosition\"\r\n      [class.sticky]=\"config.sticky\"\r\n      [class.show-navbar]=\"isMobile() && navbarEnabled() && !bottomBarEnabled()\"\r\n      [class.show-bottom-bar]=\"bottomBarEnabled() && !(isMobile() && navbarEnabled())\"\r\n      [class.show-navbar-and-bottom-bar]=\"isMobile() && navbarEnabled() && bottomBarEnabled()\"\r\n      [class.show-drawer]=\"!isMobile() && drawerEnabled()\"\r\n      [extended]=\"!!config.label\"\r\n      [disabled]=\"config.disabled\"\r\n      (click)=\"buttonClicked(config.id)\"\r\n      [matTooltip]=\"config.tooltip!\">\r\n      <!-- icon -->\r\n      @if (config.matIcon) {\r\n        <mat-icon>\r\n          {{ config.matIcon }}\r\n        </mat-icon>\r\n      } @else if (config.svgIcon) {\r\n        <mat-icon [svgIcon]=\"config.svgIcon\"></mat-icon>\r\n      }\r\n      <!-- svg icon -->\r\n      <!-- label -->\r\n      @if (config.label) {\r\n        <span class=\"lf-floating-button-label\">\r\n          {{ config.label }}\r\n        </span>\r\n      }\r\n    </button>\r\n  }\r\n}\r\n", styles: [".lf-floating-button{z-index:var(--floating-button-z-index);bottom:var(--floating-button-bottom)}.lf-floating-button.sticky{position:sticky!important}.lf-floating-button.sticky.show-bottom-bar,.lf-floating-button.sticky.show-navbar-and-bottom-bar{bottom:calc(var(--floating-button-bottom) + var(--bottom-bar-height))}.lf-floating-button.sticky.center{left:50%;transform:translate(-50%)}.lf-floating-button.sticky.center.show-drawer{left:calc(50% + var(--drawer-width) / 2)!important}.lf-floating-button.sticky.right{left:100%}.lf-floating-button:not(.sticky){position:fixed!important}.lf-floating-button:not(.sticky).show-navbar{bottom:calc(var(--floating-button-bottom) + var(--navbar-height-mobile))}.lf-floating-button:not(.sticky).show-bottom-bar{bottom:calc(var(--floating-button-bottom) + var(--bottom-bar-height))}.lf-floating-button:not(.sticky).show-navbar-and-bottom-bar{bottom:calc(var(--floating-button-bottom) + var(--navbar-height-mobile) + var(--bottom-bar-height))}.lf-floating-button:not(.sticky).center{left:calc(50% - 4px);transform:translate(-50%)}.lf-floating-button:not(.sticky).center.show-drawer{left:calc(50% + var(--drawer-width) / 2 - 4px)!important}.lf-floating-button:not(.sticky).right{left:calc(100% - (var(--floating-button-right) + 8px));transform:translate(-100%)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { libraryConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "libraryConfig", required: false }] }], floatingButtonConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatingButtonConfig", required: false }] }], onTop: [{ type: i0.Input, args: [{ isSignal: true, alias: "onTop", required: false }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], drawerEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerEnabled", required: false }] }], navbarEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "navbarEnabled", required: false }] }], bottomBarEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "bottomBarEnabled", required: false }] }], floatingButtonConfigUpdateEvent: [{ type: i0.Output, args: ["floatingButtonConfigUpdateEvent"] }], floatingButtonClickEvent: [{ type: i0.Output, args: ["floatingButtonClickEvent"] }] } });
 
 class FooterComponent {
@@ -826,16 +806,11 @@ class FooterComponent {
         this.footerConfig = input(null, ...(ngDevMode ? [{ debugName: "footerConfig" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: FooterComponent, isStandalone: true, selector: "lf-footer", inputs: { libraryConfig: { classPropertyName: "libraryConfig", publicName: "libraryConfig", isSignal: true, isRequired: false, transformFunction: null }, footerConfig: { classPropertyName: "footerConfig", publicName: "footerConfig", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (footerConfig(); as config) {\r\n  @if (config.enable) {\r\n    <mat-card class=\"lf-footer lf-transitions mat-elevation-z2 p-4\" [ngClass]=\"config.cssClass\">\r\n      <!-- svg logo -->\r\n      @if (config.svgLogo) {\r\n        <mat-icon\r\n          class=\"lf-footer-logo mb-4\"\r\n          color=\"primary\"\r\n          [svgIcon]=\"config.svgLogo!\"></mat-icon>\r\n      } @else {\r\n        @if (config.imgLogo) {\r\n          <img class=\"lf-footer-logo mb-4\" [src]=\"config.imgLogo\" alt=\"Logo\" />\r\n        }\r\n      }\r\n      <!-- img logo -->\r\n      <!-- links -->\r\n      @if (config.links) {\r\n        <div class=\"lf-footer-links mb-4\">\r\n          @for (link of config.links; track $index; let i = $index) {\r\n            <div class=\"lf-footer-link\" [class.mr-2]=\"i < config.links!.length - 1\">\r\n              @if (link.routerLink) {\r\n                <a [routerLink]=\"[link.routerLink]\">{{ link.label || \"\" }}</a>\r\n              } @else {\r\n                <a [href]=\"link.href\" [target]=\"link.externalTab ? '_blank' : null\">\r\n                  {{ link.label }}\r\n                </a>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n      <!-- copyright -->\r\n      @if (config.copyright) {\r\n        <span class=\"lf-footer-copyright\">\r\n          {{ config.copyright }}\r\n        </span>\r\n      }\r\n    </mat-card>\r\n  }\r\n}\r\n", styles: [".lf-footer{overflow:hidden;flex-flow:column;align-items:center;justify-content:center;min-height:var(--footer-height);border-radius:0;border-top:1px solid var(--mat-sys-outline-variant, rgba(0, 0, 0, .12))}.lf-footer .lf-footer-logo{width:var(--footer-logo-size);height:var(--footer-logo-size)}.lf-footer .lf-footer-links{display:flex;flex-flow:row wrap;align-items:center;justify-content:center}.lf-footer .lf-footer-links .lf-footer-link a{text-decoration:none;color:unset;font-size:var(--footer-font-size)}.lf-footer .lf-footer-links .lf-footer-link a:hover{color:var(--color-primary)}.lf-footer .lf-footer-copyright{font-size:var(--footer-font-size)}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: FooterComponent, isStandalone: true, selector: "lf-footer", inputs: { libraryConfig: { classPropertyName: "libraryConfig", publicName: "libraryConfig", isSignal: true, isRequired: false, transformFunction: null }, footerConfig: { classPropertyName: "footerConfig", publicName: "footerConfig", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (footerConfig(); as config) {\r\n  @if (config.enable) {\r\n    <mat-card class=\"lf-footer lf-transitions mat-elevation-z2 p-4\" [ngClass]=\"config.cssClass\">\r\n      <!-- svg logo -->\r\n      @if (config.svgLogo) {\r\n        <mat-icon\r\n          class=\"lf-footer-logo mb-4\"\r\n          color=\"primary\"\r\n          [svgIcon]=\"config.svgLogo!\"></mat-icon>\r\n      } @else {\r\n        @if (config.imgLogo) {\r\n          <img class=\"lf-footer-logo mb-4\" [src]=\"config.imgLogo\" alt=\"Logo\" />\r\n        }\r\n      }\r\n      <!-- img logo -->\r\n      <!-- links -->\r\n      @if (config.links) {\r\n        <div class=\"lf-footer-links mb-4\">\r\n          @for (link of config.links; track $index; let i = $index) {\r\n            <div class=\"lf-footer-link\" [class.mr-2]=\"i < config.links!.length - 1\">\r\n              @if (link.routerLink) {\r\n                <a [routerLink]=\"[link.routerLink]\">{{ link.label || '' }}</a>\r\n              } @else {\r\n                <a [href]=\"link.href\" [target]=\"link.externalTab ? '_blank' : null\">\r\n                  {{ link.label }}\r\n                </a>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n      <!-- copyright -->\r\n      @if (config.copyright) {\r\n        <span class=\"lf-footer-copyright\">\r\n          {{ config.copyright }}\r\n        </span>\r\n      }\r\n    </mat-card>\r\n  }\r\n}\r\n", styles: [".lf-footer{overflow:hidden;flex-flow:column;align-items:center;justify-content:center;min-height:var(--footer-height);border-radius:0;border-top:1px solid var(--mat-sys-outline-variant, rgba(0, 0, 0, .12))}.lf-footer .lf-footer-logo{width:var(--footer-logo-size);height:var(--footer-logo-size)}.lf-footer .lf-footer-links{display:flex;flex-flow:row wrap;align-items:center;justify-content:center}.lf-footer .lf-footer-links .lf-footer-link a{text-decoration:none;color:unset;font-size:var(--footer-font-size)}.lf-footer .lf-footer-links .lf-footer-link a:hover{color:var(--color-primary)}.lf-footer .lf-footer-copyright{font-size:var(--footer-font-size)}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FooterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lf-footer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        RouterModule,
-                        MatCardModule,
-                        MatIconModule,
-                        NgClass
-                    ], template: "@if (footerConfig(); as config) {\r\n  @if (config.enable) {\r\n    <mat-card class=\"lf-footer lf-transitions mat-elevation-z2 p-4\" [ngClass]=\"config.cssClass\">\r\n      <!-- svg logo -->\r\n      @if (config.svgLogo) {\r\n        <mat-icon\r\n          class=\"lf-footer-logo mb-4\"\r\n          color=\"primary\"\r\n          [svgIcon]=\"config.svgLogo!\"></mat-icon>\r\n      } @else {\r\n        @if (config.imgLogo) {\r\n          <img class=\"lf-footer-logo mb-4\" [src]=\"config.imgLogo\" alt=\"Logo\" />\r\n        }\r\n      }\r\n      <!-- img logo -->\r\n      <!-- links -->\r\n      @if (config.links) {\r\n        <div class=\"lf-footer-links mb-4\">\r\n          @for (link of config.links; track $index; let i = $index) {\r\n            <div class=\"lf-footer-link\" [class.mr-2]=\"i < config.links!.length - 1\">\r\n              @if (link.routerLink) {\r\n                <a [routerLink]=\"[link.routerLink]\">{{ link.label || \"\" }}</a>\r\n              } @else {\r\n                <a [href]=\"link.href\" [target]=\"link.externalTab ? '_blank' : null\">\r\n                  {{ link.label }}\r\n                </a>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n      <!-- copyright -->\r\n      @if (config.copyright) {\r\n        <span class=\"lf-footer-copyright\">\r\n          {{ config.copyright }}\r\n        </span>\r\n      }\r\n    </mat-card>\r\n  }\r\n}\r\n", styles: [".lf-footer{overflow:hidden;flex-flow:column;align-items:center;justify-content:center;min-height:var(--footer-height);border-radius:0;border-top:1px solid var(--mat-sys-outline-variant, rgba(0, 0, 0, .12))}.lf-footer .lf-footer-logo{width:var(--footer-logo-size);height:var(--footer-logo-size)}.lf-footer .lf-footer-links{display:flex;flex-flow:row wrap;align-items:center;justify-content:center}.lf-footer .lf-footer-links .lf-footer-link a{text-decoration:none;color:unset;font-size:var(--footer-font-size)}.lf-footer .lf-footer-links .lf-footer-link a:hover{color:var(--color-primary)}.lf-footer .lf-footer-copyright{font-size:var(--footer-font-size)}\n"] }]
+            args: [{ selector: 'lf-footer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [RouterModule, MatCardModule, MatIconModule, NgClass], template: "@if (footerConfig(); as config) {\r\n  @if (config.enable) {\r\n    <mat-card class=\"lf-footer lf-transitions mat-elevation-z2 p-4\" [ngClass]=\"config.cssClass\">\r\n      <!-- svg logo -->\r\n      @if (config.svgLogo) {\r\n        <mat-icon\r\n          class=\"lf-footer-logo mb-4\"\r\n          color=\"primary\"\r\n          [svgIcon]=\"config.svgLogo!\"></mat-icon>\r\n      } @else {\r\n        @if (config.imgLogo) {\r\n          <img class=\"lf-footer-logo mb-4\" [src]=\"config.imgLogo\" alt=\"Logo\" />\r\n        }\r\n      }\r\n      <!-- img logo -->\r\n      <!-- links -->\r\n      @if (config.links) {\r\n        <div class=\"lf-footer-links mb-4\">\r\n          @for (link of config.links; track $index; let i = $index) {\r\n            <div class=\"lf-footer-link\" [class.mr-2]=\"i < config.links!.length - 1\">\r\n              @if (link.routerLink) {\r\n                <a [routerLink]=\"[link.routerLink]\">{{ link.label || '' }}</a>\r\n              } @else {\r\n                <a [href]=\"link.href\" [target]=\"link.externalTab ? '_blank' : null\">\r\n                  {{ link.label }}\r\n                </a>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n      <!-- copyright -->\r\n      @if (config.copyright) {\r\n        <span class=\"lf-footer-copyright\">\r\n          {{ config.copyright }}\r\n        </span>\r\n      }\r\n    </mat-card>\r\n  }\r\n}\r\n", styles: [".lf-footer{overflow:hidden;flex-flow:column;align-items:center;justify-content:center;min-height:var(--footer-height);border-radius:0;border-top:1px solid var(--mat-sys-outline-variant, rgba(0, 0, 0, .12))}.lf-footer .lf-footer-logo{width:var(--footer-logo-size);height:var(--footer-logo-size)}.lf-footer .lf-footer-links{display:flex;flex-flow:row wrap;align-items:center;justify-content:center}.lf-footer .lf-footer-links .lf-footer-link a{text-decoration:none;color:unset;font-size:var(--footer-font-size)}.lf-footer .lf-footer-links .lf-footer-link a:hover{color:var(--color-primary)}.lf-footer .lf-footer-copyright{font-size:var(--footer-font-size)}\n"] }]
         }], propDecorators: { libraryConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "libraryConfig", required: false }] }], footerConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerConfig", required: false }] }] } });
 
 class InputComponent {
@@ -889,17 +864,11 @@ class InputComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: InputComponent, isStandalone: true, selector: "lf-input", inputs: { inputConfig: { classPropertyName: "inputConfig", publicName: "inputConfig", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, inputValue: { classPropertyName: "inputValue", publicName: "inputValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputSubmitEvent: "inputSubmitEvent", inputChangeEvent: "inputChangeEvent", inputPrefixActionEvent: "inputPrefixActionEvent", inputValue: "inputValueChange" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (inputConfigComputed(); as config) {\r\n  @if (config) {\r\n    <mat-form-field class=\"lf-input\" appearance=\"fill\" [class.lf-hide-hint]=\"!config.hint\">\r\n      <mat-label>{{ config.label || \"Search\" }}</mat-label>\r\n      @if (config.hint) {\r\n        <mat-hint>{{ config.hint }}</mat-hint>\r\n      }\r\n      <input\r\n        matInput\r\n        type=\"text\"\r\n        [(ngModel)]=\"inputValue\"\r\n        [disabled]=\"config.disabled!\"\r\n        (keyup.enter)=\"inputSubmitted(inputValue())\"\r\n        (ngModelChange)=\"inputChanged($event)\"\r\n        #input />\r\n      @if (isMobile()) {\r\n        <button mat-icon-button matPrefix color=\"accent\" (click)=\"inputPrefixAction()\">\r\n          <mat-icon>arrow_back</mat-icon>\r\n        </button>\r\n      }\r\n      @if (inputValue()) {\r\n        <button class=\"lf-input-close-button\" mat-icon-button matSuffix (click)=\"clearInput()\">\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      }\r\n      @if (config.matIconSubmit) {\r\n        <button\r\n          mat-icon-button\r\n          matSuffix\r\n          color=\"accent\"\r\n          type=\"submit\"\r\n          (click)=\"inputSubmitted(inputValue())\">\r\n          <mat-icon>\r\n            {{ config.matIconSubmit }}\r\n          </mat-icon>\r\n        </button>\r\n      }\r\n    </mat-form-field>\r\n  }\r\n}\r\n", styles: [".lf-input{width:100%}.lf-input ::ng-deep .mdc-text-field{border-radius:var(--header-input-border-radius)!important}.lf-input ::ng-deep .mdc-line-ripple:after{border-bottom-width:0!important}.lf-input ::ng-deep .mdc-line-ripple:before{border-bottom-width:0!important}.lf-input .lf-input-close-button{color:var(--color-gray)}.lf-input.lf-hide-hint ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: InputComponent, isStandalone: true, selector: "lf-input", inputs: { inputConfig: { classPropertyName: "inputConfig", publicName: "inputConfig", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, inputValue: { classPropertyName: "inputValue", publicName: "inputValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputSubmitEvent: "inputSubmitEvent", inputChangeEvent: "inputChangeEvent", inputPrefixActionEvent: "inputPrefixActionEvent", inputValue: "inputValueChange" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (inputConfigComputed(); as config) {\r\n  @if (config) {\r\n    <mat-form-field class=\"lf-input\" appearance=\"fill\" [class.lf-hide-hint]=\"!config.hint\">\r\n      <mat-label>{{ config.label || 'Search' }}</mat-label>\r\n      @if (config.hint) {\r\n        <mat-hint>{{ config.hint }}</mat-hint>\r\n      }\r\n      <input\r\n        matInput\r\n        type=\"text\"\r\n        [(ngModel)]=\"inputValue\"\r\n        [disabled]=\"config.disabled!\"\r\n        (keyup.enter)=\"inputSubmitted(inputValue())\"\r\n        (ngModelChange)=\"inputChanged($event)\"\r\n        #input />\r\n      @if (isMobile()) {\r\n        <button mat-icon-button matPrefix color=\"accent\" (click)=\"inputPrefixAction()\">\r\n          <mat-icon>arrow_back</mat-icon>\r\n        </button>\r\n      }\r\n      @if (inputValue()) {\r\n        <button class=\"lf-input-close-button\" mat-icon-button matSuffix (click)=\"clearInput()\">\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      }\r\n      @if (config.matIconSubmit) {\r\n        <button\r\n          mat-icon-button\r\n          matSuffix\r\n          color=\"accent\"\r\n          type=\"submit\"\r\n          (click)=\"inputSubmitted(inputValue())\">\r\n          <mat-icon>\r\n            {{ config.matIconSubmit }}\r\n          </mat-icon>\r\n        </button>\r\n      }\r\n    </mat-form-field>\r\n  }\r\n}\r\n", styles: [".lf-input{width:100%}.lf-input ::ng-deep .mdc-text-field{border-radius:var(--header-input-border-radius)!important}.lf-input ::ng-deep .mdc-line-ripple:after{border-bottom-width:0!important}.lf-input ::ng-deep .mdc-line-ripple:before{border-bottom-width:0!important}.lf-input .lf-input-close-button{color:var(--color-gray)}.lf-input.lf-hide-hint ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lf-input', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        FormsModule,
-                        MatFormFieldModule,
-                        MatInputModule,
-                        MatButtonModule,
-                        MatIconModule
-                    ], template: "@if (inputConfigComputed(); as config) {\r\n  @if (config) {\r\n    <mat-form-field class=\"lf-input\" appearance=\"fill\" [class.lf-hide-hint]=\"!config.hint\">\r\n      <mat-label>{{ config.label || \"Search\" }}</mat-label>\r\n      @if (config.hint) {\r\n        <mat-hint>{{ config.hint }}</mat-hint>\r\n      }\r\n      <input\r\n        matInput\r\n        type=\"text\"\r\n        [(ngModel)]=\"inputValue\"\r\n        [disabled]=\"config.disabled!\"\r\n        (keyup.enter)=\"inputSubmitted(inputValue())\"\r\n        (ngModelChange)=\"inputChanged($event)\"\r\n        #input />\r\n      @if (isMobile()) {\r\n        <button mat-icon-button matPrefix color=\"accent\" (click)=\"inputPrefixAction()\">\r\n          <mat-icon>arrow_back</mat-icon>\r\n        </button>\r\n      }\r\n      @if (inputValue()) {\r\n        <button class=\"lf-input-close-button\" mat-icon-button matSuffix (click)=\"clearInput()\">\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      }\r\n      @if (config.matIconSubmit) {\r\n        <button\r\n          mat-icon-button\r\n          matSuffix\r\n          color=\"accent\"\r\n          type=\"submit\"\r\n          (click)=\"inputSubmitted(inputValue())\">\r\n          <mat-icon>\r\n            {{ config.matIconSubmit }}\r\n          </mat-icon>\r\n        </button>\r\n      }\r\n    </mat-form-field>\r\n  }\r\n}\r\n", styles: [".lf-input{width:100%}.lf-input ::ng-deep .mdc-text-field{border-radius:var(--header-input-border-radius)!important}.lf-input ::ng-deep .mdc-line-ripple:after{border-bottom-width:0!important}.lf-input ::ng-deep .mdc-line-ripple:before{border-bottom-width:0!important}.lf-input .lf-input-close-button{color:var(--color-gray)}.lf-input.lf-hide-hint ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}\n"] }]
+            args: [{ selector: 'lf-input', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [FormsModule, MatFormFieldModule, MatInputModule, MatButtonModule, MatIconModule], template: "@if (inputConfigComputed(); as config) {\r\n  @if (config) {\r\n    <mat-form-field class=\"lf-input\" appearance=\"fill\" [class.lf-hide-hint]=\"!config.hint\">\r\n      <mat-label>{{ config.label || 'Search' }}</mat-label>\r\n      @if (config.hint) {\r\n        <mat-hint>{{ config.hint }}</mat-hint>\r\n      }\r\n      <input\r\n        matInput\r\n        type=\"text\"\r\n        [(ngModel)]=\"inputValue\"\r\n        [disabled]=\"config.disabled!\"\r\n        (keyup.enter)=\"inputSubmitted(inputValue())\"\r\n        (ngModelChange)=\"inputChanged($event)\"\r\n        #input />\r\n      @if (isMobile()) {\r\n        <button mat-icon-button matPrefix color=\"accent\" (click)=\"inputPrefixAction()\">\r\n          <mat-icon>arrow_back</mat-icon>\r\n        </button>\r\n      }\r\n      @if (inputValue()) {\r\n        <button class=\"lf-input-close-button\" mat-icon-button matSuffix (click)=\"clearInput()\">\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      }\r\n      @if (config.matIconSubmit) {\r\n        <button\r\n          mat-icon-button\r\n          matSuffix\r\n          color=\"accent\"\r\n          type=\"submit\"\r\n          (click)=\"inputSubmitted(inputValue())\">\r\n          <mat-icon>\r\n            {{ config.matIconSubmit }}\r\n          </mat-icon>\r\n        </button>\r\n      }\r\n    </mat-form-field>\r\n  }\r\n}\r\n", styles: [".lf-input{width:100%}.lf-input ::ng-deep .mdc-text-field{border-radius:var(--header-input-border-radius)!important}.lf-input ::ng-deep .mdc-line-ripple:after{border-bottom-width:0!important}.lf-input ::ng-deep .mdc-line-ripple:before{border-bottom-width:0!important}.lf-input .lf-input-close-button{color:var(--color-gray)}.lf-input.lf-hide-hint ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { input: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], inputConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputConfig", required: false }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], inputSubmitEvent: [{ type: i0.Output, args: ["inputSubmitEvent"] }], inputChangeEvent: [{ type: i0.Output, args: ["inputChangeEvent"] }], inputPrefixActionEvent: [{ type: i0.Output, args: ["inputPrefixActionEvent"] }], inputValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputValue", required: false }] }, { type: i0.Output, args: ["inputValueChange"] }] } });
 
 var input_component = /*#__PURE__*/Object.freeze({
@@ -931,15 +900,13 @@ class HeaderComponent {
             const config = headerConfig?.responsiveConfig;
             if (!config?.enable)
                 return null;
-            const includedButtons = rightMenuButtons.filter(button => !config.excludeButtonIds?.includes(button.id));
+            const includedButtons = rightMenuButtons.filter((button) => !config.excludeButtonIds?.includes(button.id));
             return {
                 id: '',
-                matIcon: !config.matIcon && !config.svgIcon && !config.label
-                    ? 'more_vert'
-                    : config.matIcon,
+                matIcon: !config.matIcon && !config.svgIcon && !config.label ? 'more_vert' : config.matIcon,
                 svgIcon: config.svgIcon,
                 label: config.label,
-                menuButtons: includedButtons
+                menuButtons: includedButtons,
             };
         }, ...(ngDevMode ? [{ debugName: "rightMobileButton" }] : /* istanbul ignore next */ []));
         this.rightExcludedButtons = computed(() => {
@@ -950,7 +917,7 @@ class HeaderComponent {
             const config = headerConfig?.responsiveConfig;
             if (!config?.enable)
                 return null;
-            return rightMenuButtons.filter(button => config.excludeButtonIds?.includes(button.id));
+            return rightMenuButtons.filter((button) => config.excludeButtonIds?.includes(button.id));
         }, ...(ngDevMode ? [{ debugName: "rightExcludedButtons" }] : /* istanbul ignore next */ []));
     }
     buttonClicked(id) {
@@ -969,7 +936,7 @@ class HeaderComponent {
         this.headerConfigUpdateEvent.emit({ inputConfig: { enable: false } });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: HeaderComponent, isStandalone: true, selector: "lf-header", inputs: { libraryConfig: { classPropertyName: "libraryConfig", publicName: "libraryConfig", isSignal: true, isRequired: false, transformFunction: null }, headerConfig: { classPropertyName: "headerConfig", publicName: "headerConfig", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, routeLoading: { classPropertyName: "routeLoading", publicName: "routeLoading", isSignal: true, isRequired: false, transformFunction: null }, currentRoute: { classPropertyName: "currentRoute", publicName: "currentRoute", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { headerConfigUpdateEvent: "headerConfigUpdateEvent", headerButtonClickEvent: "headerButtonClickEvent", headerInputSubmitEvent: "headerInputSubmitEvent", headerInputChangeEvent: "headerInputChangeEvent" }, ngImport: i0, template: "@if (headerConfig(); as config) {\r\n  @if (config.enable) {\r\n    <mat-toolbar\r\n      class=\"lf-header lf-transitions mat-elevation-z3\"\r\n      [class.px-4]=\"!isMobile()\"\r\n      [class.px-1]=\"isMobile()\"\r\n      [ngClass]=\"config.cssClass\"\r\n      [class.lf-gradient]=\"config.gradient\"\r\n      color=\"primary\">\r\n      <!-- left menu button -->\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n        [ngTemplateOutletContext]=\"{\r\n          menuButton: config.leftMenuButton!,\r\n          hideLabel: true,\r\n        }\"></ng-container>\r\n      <!-- logo & title -->\r\n      <div\r\n        class=\"lf-header-logo-title-wrapper ml-1 mr-2\"\r\n        [class.ml-10]=\"config.leftMenuButton && !isMobile()\">\r\n        <!-- link wrapper -->\r\n        <div\r\n          class=\"lf-header-logo-title-wrapper-link\"\r\n          [class.lf-clickable]=\"config.titleRouterLink\"\r\n          [routerLink]=\"config.titleRouterLink ? [config.titleRouterLink] : null\">\r\n          <!-- svg logo -->\r\n          @if (config.svgLogo) {\r\n            <mat-icon\r\n              class=\"lf-header-logo\"\r\n              [class.mr-3]=\"config.title\"\r\n              [svgIcon]=\"config.svgLogo!\"></mat-icon>\r\n            <!-- img logo -->\r\n          } @else {\r\n            @if (config.imgLogo) {\r\n              <img\r\n                class=\"lf-header-logo\"\r\n                [class.mr-3]=\"config.title\"\r\n                [src]=\"config.imgLogo\"\r\n                alt=\"Logo\" />\r\n            }\r\n          }\r\n          <!-- title -->\r\n          @if (config.title) {\r\n            <div class=\"lf-header-title-wrapper\">\r\n              @if (config.title) {\r\n                <span class=\"lf-header-title\">\r\n                  {{ config.title }}\r\n                </span>\r\n              }\r\n              @if (config.subtitle) {\r\n                <span class=\"lf-header-subtitle\">\r\n                  {{ config.subtitle }}\r\n                </span>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n      <!-- input -->\r\n      @if (config.inputConfig?.enable) {\r\n        <div class=\"spacer\"></div>\r\n        <lf-input\r\n          [class.lf-header-input-mobile]=\"isMobile()\"\r\n          [class.mx-3]=\"!isMobile()\"\r\n          [inputConfig]=\"config.inputConfig!\"\r\n          [isMobile]=\"isMobile()\"\r\n          (inputSubmitEvent)=\"inputSubmitted($event)\"\r\n          (inputChangeEvent)=\"inputChanged($event)\"\r\n          (inputPrefixActionEvent)=\"inputClosed()\"></lf-input>\r\n      }\r\n      <!-- spacer -->\r\n      <div class=\"spacer\"></div>\r\n      <!-- right menu buttons -->\r\n      @if (config.responsiveConfig?.enable && isMobile()) {\r\n        @let exludedButtons = rightExcludedButtons();\r\n        @for (button of exludedButtons; track button.id) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n            [ngTemplateOutletContext]=\"{\r\n              menuButton: button,\r\n            }\"></ng-container>\r\n        }\r\n        @let mobileButton = rightMobileButton();\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n          [ngTemplateOutletContext]=\"{\r\n            menuButton: mobileButton,\r\n          }\"></ng-container>\r\n      } @else {\r\n        @for (button of config.rightMenuButtons; track button.id) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n            [ngTemplateOutletContext]=\"{\r\n              menuButton: button,\r\n            }\"></ng-container>\r\n        }\r\n      }\r\n    </mat-toolbar>\r\n    <!-- loading bar -->\r\n    @if (config.loading || (config.showRouteLoading && routeLoading())) {\r\n      <mat-progress-bar\r\n        class=\"lf-header-progress-bar\"\r\n        color=\"accent\"\r\n        mode=\"indeterminate\"></mat-progress-bar>\r\n    }\r\n  }\r\n}\r\n\r\n<!-- header menu button -->\r\n<ng-template #menuButtonTemplate let-menuButton=\"menuButton\" let-hideLabel=\"hideLabel\">\r\n  @if (menuButton) {\r\n    <!-- label button -->\r\n    @if (menuButton.label && !hideLabel) {\r\n      <button\r\n        mat-button\r\n        class=\"lf-header-menu-button\"\r\n        [class.lf-header-menu-button-active]=\"isActive()(menuButton.id) && !menuButton.disabled\"\r\n        [ngClass]=\"menuButton.cssClass\"\r\n        [disabled]=\"menuButton.disabled\"\r\n        (click)=\"buttonClicked(menuButton.id)\"\r\n        [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n        [aria-label]=\"menuButton.label || menuButton.tooltip\"\r\n        [matTooltip]=\"menuButton.tooltip\">\r\n        <!-- icon -->\r\n        @if (menuButton.matIcon) {\r\n          <mat-icon>\r\n            {{ menuButton.matIcon }}\r\n          </mat-icon>\r\n        } @else if (menuButton.svgIcon) {\r\n          <mat-icon [svgIcon]=\"menuButton.svgIcon\"></mat-icon>\r\n        }\r\n        <!-- label -->\r\n        {{ menuButton.label }}\r\n      </button>\r\n      <!-- icon button -->\r\n    } @else if (menuButton.matIcon || menuButton.svgIcon) {\r\n      <button\r\n        mat-icon-button\r\n        class=\"lf-header-menu-button\"\r\n        [ngClass]=\"menuButton.cssClass\"\r\n        [disabled]=\"menuButton.disabled\"\r\n        (click)=\"buttonClicked(menuButton.id)\"\r\n        [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n        [matTooltip]=\"menuButton.tooltip\"\r\n        [aria-label]=\"menuButton.id || menuButton.tooltip\">\r\n        <!-- icon -->\r\n        @if (menuButton.matIcon) {\r\n          <mat-icon>\r\n            {{ menuButton.matIcon }}\r\n          </mat-icon>\r\n        } @else if (menuButton.svgIcon) {\r\n          <mat-icon [svgIcon]=\"menuButton.svgIcon\"></mat-icon>\r\n        }\r\n      </button>\r\n      <!-- img button -->\r\n    } @else if (menuButton.imgIcon) {\r\n      <img\r\n        class=\"lf-header-menu-img px-1\"\r\n        [src]=\"menuButton.imgIcon\"\r\n        width=\"48\"\r\n        height=\"48\"\r\n        [ngClass]=\"menuButton.cssClass\"\r\n        (click)=\"buttonClicked(menuButton.id)\"\r\n        [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n        [matTooltip]=\"menuButton.tooltip\"\r\n        [aria-label]=\"menuButton.id || menuButton.tooltip\" />\r\n    }\r\n    <!-- menu -->\r\n    <mat-menu #menu=\"matMenu\">\r\n      <!-- label menu buttons -->\r\n      @for (button of menuButton.menuButtons; track button.id) {\r\n        <!-- menu button -->\r\n        @if (button.label) {\r\n          <button\r\n            mat-menu-item\r\n            [class.lf-header-menu-button-active]=\"isActive()(button.id)\"\r\n            [ngClass]=\"button.cssClass\"\r\n            [disabled]=\"button.disabled\"\r\n            (click)=\"buttonClicked(button.id)\"\r\n            [matTooltip]=\"button.tooltip\"\r\n            [aria-label]=\"button.label\">\r\n            <!-- icon -->\r\n            @if (button.matIcon) {\r\n              <mat-icon>\r\n                {{ button.matIcon }}\r\n              </mat-icon>\r\n            } @else if (button.svgIcon) {\r\n              <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n            }\r\n            <!-- label -->\r\n            <span>{{ button.label }}</span>\r\n          </button>\r\n        }\r\n      }\r\n      <!-- icon menu buttons -->\r\n      <div mat-menu-item class=\"lf-menu-icons px-1\" [disableRipple]=\"true\">\r\n        @for (button of menuButton.menuButtons; track button.id) {\r\n          <!-- icon button -->\r\n          @if (!button.label && (button.matIcon || button.svgIcon)) {\r\n            <button\r\n              mat-icon-button\r\n              class=\"lf-menu-icon-button\"\r\n              [ngClass]=\"button.cssClass\"\r\n              [disabled]=\"button.disabled\"\r\n              (click)=\"buttonClicked(button.id)\"\r\n              [matTooltip]=\"button.tooltip\"\r\n              [aria-label]=\"button.id || button.tooltip\"\r\n              tabindex=\"0\">\r\n              <!-- icon -->\r\n              @if (button.matIcon) {\r\n                <mat-icon>\r\n                  {{ button.matIcon }}\r\n                </mat-icon>\r\n              } @else if (button.svgIcon) {\r\n                <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n              }\r\n            </button>\r\n          }\r\n        }\r\n      </div>\r\n    </mat-menu>\r\n  }\r\n</ng-template>\r\n", styles: [".lf-header{z-index:var(--header-z-index);position:fixed;top:0;height:var(--header-height)}.lf-header .lf-header-menu-button{flex-shrink:0;max-width:var(--header-menu-button-max-width)}.lf-header .lf-header-menu-button ::ng-deep .mdc-button__label{overflow:hidden;text-overflow:ellipsis}.lf-header .lf-header-menu-button.lf-header-menu-button-active{background-color:#fff}.lf-header .lf-header-menu-img{width:var(--header-menu-img-size);height:var(--header-menu-img-size);border-radius:50%;flex-shrink:0;object-fit:cover;cursor:pointer}.lf-header .lf-header-logo-title-wrapper{flex:0 0 auto;max-width:var(--header-logo-title-wrapper-max-width);overflow:hidden;display:flex}.lf-header .lf-header-logo-title-wrapper .lf-header-logo-title-wrapper-link{display:flex;flex-flow:row nowrap;align-items:center;flex:0}.lf-header .lf-header-logo-title-wrapper .lf-header-logo-title-wrapper-link.lf-clickable{cursor:pointer}.lf-header .lf-header-logo-title-wrapper .lf-header-logo{width:var(--header-logo-size);height:var(--header-logo-size);min-width:var(--header-logo-size);min-height:var(--header-logo-size)}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper{display:flex;flex-flow:column}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-title{font-size:var(--header-title-font-size);line-height:calc(var(--header-title-font-size) + 8px)}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-subtitle{font-size:var(--header-subtitle-font-size);line-height:var(--header-subtitle-font-size)}.lf-header lf-input{z-index:var(--header-z-index);flex:1 1 var(--header-input-max-width)}.lf-header lf-input.lf-header-input-mobile{position:fixed!important;left:4px!important;right:4px!important;width:unset!important;max-width:unset!important}.lf-header .spacer{flex:1 0 auto}.lf-menu-icons{min-height:unset!important;cursor:unset!important}.lf-menu-icons:hover{background:transparent!important}.lf-header-progress-bar{z-index:var(--header-z-index);position:fixed;top:var(--header-height)}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputComponent, selector: "lf-input", inputs: ["inputConfig", "isMobile", "inputValue"], outputs: ["inputSubmitEvent", "inputChangeEvent", "inputPrefixActionEvent", "inputValueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: HeaderComponent, isStandalone: true, selector: "lf-header", inputs: { libraryConfig: { classPropertyName: "libraryConfig", publicName: "libraryConfig", isSignal: true, isRequired: false, transformFunction: null }, headerConfig: { classPropertyName: "headerConfig", publicName: "headerConfig", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, routeLoading: { classPropertyName: "routeLoading", publicName: "routeLoading", isSignal: true, isRequired: false, transformFunction: null }, currentRoute: { classPropertyName: "currentRoute", publicName: "currentRoute", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { headerConfigUpdateEvent: "headerConfigUpdateEvent", headerButtonClickEvent: "headerButtonClickEvent", headerInputSubmitEvent: "headerInputSubmitEvent", headerInputChangeEvent: "headerInputChangeEvent" }, ngImport: i0, template: "@if (headerConfig(); as config) {\r\n  @if (config.enable) {\r\n    <mat-toolbar\r\n      class=\"lf-header lf-transitions mat-elevation-z3\"\r\n      [class.px-4]=\"!isMobile()\"\r\n      [class.px-1]=\"isMobile()\"\r\n      [ngClass]=\"config.cssClass\"\r\n      [class.lf-gradient]=\"config.gradient\"\r\n      color=\"primary\">\r\n      <!-- left menu button -->\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n        [ngTemplateOutletContext]=\"{\r\n          menuButton: config.leftMenuButton!,\r\n          hideLabel: true,\r\n        }\"></ng-container>\r\n      <!-- logo & title -->\r\n      <div\r\n        class=\"lf-header-logo-title-wrapper ml-1 mr-2\"\r\n        [class.ml-10]=\"config.leftMenuButton && !isMobile()\">\r\n        <!-- link wrapper -->\r\n        <div\r\n          class=\"lf-header-logo-title-wrapper-link\"\r\n          [class.lf-clickable]=\"config.titleRouterLink\"\r\n          [routerLink]=\"config.titleRouterLink ? [config.titleRouterLink] : null\">\r\n          <!-- svg logo -->\r\n          @if (config.svgLogo) {\r\n            <mat-icon\r\n              class=\"lf-header-logo\"\r\n              [class.mr-3]=\"config.title\"\r\n              [svgIcon]=\"config.svgLogo!\"></mat-icon>\r\n            <!-- img logo -->\r\n          } @else {\r\n            @if (config.imgLogo) {\r\n              <img\r\n                class=\"lf-header-logo\"\r\n                [class.mr-3]=\"config.title\"\r\n                [src]=\"config.imgLogo\"\r\n                alt=\"Logo\" />\r\n            }\r\n          }\r\n          <!-- title -->\r\n          @if (config.title) {\r\n            <div class=\"lf-header-title-wrapper\">\r\n              @if (config.title) {\r\n                <span class=\"lf-header-title\">\r\n                  {{ config.title }}\r\n                </span>\r\n              }\r\n              @if (config.subtitle) {\r\n                <span class=\"lf-header-subtitle\">\r\n                  {{ config.subtitle }}\r\n                </span>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n      <!-- input -->\r\n      @if (config.inputConfig?.enable) {\r\n        <div class=\"spacer\"></div>\r\n        <lf-input\r\n          [class.lf-header-input-mobile]=\"isMobile()\"\r\n          [class.mx-3]=\"!isMobile()\"\r\n          [inputConfig]=\"config.inputConfig!\"\r\n          [isMobile]=\"isMobile()\"\r\n          (inputSubmitEvent)=\"inputSubmitted($event)\"\r\n          (inputChangeEvent)=\"inputChanged($event)\"\r\n          (inputPrefixActionEvent)=\"inputClosed()\"></lf-input>\r\n      }\r\n      <!-- spacer -->\r\n      <div class=\"spacer\"></div>\r\n      <!-- right menu buttons -->\r\n      @if (config.responsiveConfig?.enable && isMobile()) {\r\n        @let exludedButtons = rightExcludedButtons();\r\n        @for (button of exludedButtons; track button.id) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n            [ngTemplateOutletContext]=\"{\r\n              menuButton: button,\r\n            }\"></ng-container>\r\n        }\r\n        @let mobileButton = rightMobileButton();\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n          [ngTemplateOutletContext]=\"{\r\n            menuButton: mobileButton,\r\n          }\"></ng-container>\r\n      } @else {\r\n        @for (button of config.rightMenuButtons; track button.id) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n            [ngTemplateOutletContext]=\"{\r\n              menuButton: button,\r\n            }\"></ng-container>\r\n        }\r\n      }\r\n    </mat-toolbar>\r\n    <!-- loading bar -->\r\n    @if (config.loading || (config.showRouteLoading && routeLoading())) {\r\n      <mat-progress-bar\r\n        class=\"lf-header-progress-bar\"\r\n        color=\"accent\"\r\n        mode=\"indeterminate\"></mat-progress-bar>\r\n    }\r\n  }\r\n}\r\n\r\n<!-- header menu button -->\r\n<ng-template #menuButtonTemplate let-menuButton=\"menuButton\" let-hideLabel=\"hideLabel\">\r\n  @if (menuButton) {\r\n    <!-- label button -->\r\n    @if (menuButton.label && !hideLabel) {\r\n      <button\r\n        mat-button\r\n        class=\"lf-header-menu-button\"\r\n        [class.lf-header-menu-button-active]=\"isActive()(menuButton.id) && !menuButton.disabled\"\r\n        [ngClass]=\"menuButton.cssClass\"\r\n        [disabled]=\"menuButton.disabled\"\r\n        (click)=\"buttonClicked(menuButton.id)\"\r\n        [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n        [aria-label]=\"menuButton.label || menuButton.tooltip\"\r\n        [matTooltip]=\"menuButton.tooltip\">\r\n        <!-- icon -->\r\n        @if (menuButton.matIcon) {\r\n          <mat-icon>\r\n            {{ menuButton.matIcon }}\r\n          </mat-icon>\r\n        } @else if (menuButton.svgIcon) {\r\n          <mat-icon [svgIcon]=\"menuButton.svgIcon\"></mat-icon>\r\n        }\r\n        <!-- label -->\r\n        {{ menuButton.label }}\r\n      </button>\r\n      <!-- icon button -->\r\n    } @else if (menuButton.matIcon || menuButton.svgIcon) {\r\n      <button\r\n        mat-icon-button\r\n        class=\"lf-header-menu-button\"\r\n        [ngClass]=\"menuButton.cssClass\"\r\n        [disabled]=\"menuButton.disabled\"\r\n        (click)=\"buttonClicked(menuButton.id)\"\r\n        [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n        [matTooltip]=\"menuButton.tooltip\"\r\n        [aria-label]=\"menuButton.id || menuButton.tooltip\">\r\n        <!-- icon -->\r\n        @if (menuButton.matIcon) {\r\n          <mat-icon>\r\n            {{ menuButton.matIcon }}\r\n          </mat-icon>\r\n        } @else if (menuButton.svgIcon) {\r\n          <mat-icon [svgIcon]=\"menuButton.svgIcon\"></mat-icon>\r\n        }\r\n      </button>\r\n      <!-- img button -->\r\n    } @else if (menuButton.imgIcon) {\r\n      <img\r\n        class=\"lf-header-menu-img\"\r\n        [src]=\"menuButton.imgIcon\"\r\n        width=\"48\"\r\n        height=\"48\"\r\n        [ngClass]=\"menuButton.cssClass\"\r\n        (click)=\"buttonClicked(menuButton.id)\"\r\n        [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n        [matTooltip]=\"menuButton.tooltip\"\r\n        [aria-label]=\"menuButton.id || menuButton.tooltip\" />\r\n    }\r\n    <!-- menu -->\r\n    <mat-menu #menu=\"matMenu\">\r\n      <!-- label menu buttons -->\r\n      @for (button of menuButton.menuButtons; track button.id) {\r\n        <!-- menu button -->\r\n        @if (button.label) {\r\n          <button\r\n            mat-menu-item\r\n            [class.lf-header-menu-button-active]=\"isActive()(button.id)\"\r\n            [ngClass]=\"button.cssClass\"\r\n            [disabled]=\"button.disabled\"\r\n            (click)=\"buttonClicked(button.id)\"\r\n            [matTooltip]=\"button.tooltip\"\r\n            [aria-label]=\"button.label\">\r\n            <!-- icon -->\r\n            @if (button.matIcon) {\r\n              <mat-icon>\r\n                {{ button.matIcon }}\r\n              </mat-icon>\r\n            } @else if (button.svgIcon) {\r\n              <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n            }\r\n            <!-- label -->\r\n            <span>{{ button.label }}</span>\r\n          </button>\r\n        }\r\n      }\r\n      <!-- icon menu buttons -->\r\n      <div mat-menu-item class=\"lf-menu-icons px-1\" [disableRipple]=\"true\">\r\n        @for (button of menuButton.menuButtons; track button.id) {\r\n          <!-- icon button -->\r\n          @if (!button.label && (button.matIcon || button.svgIcon)) {\r\n            <button\r\n              mat-icon-button\r\n              class=\"lf-menu-icon-button\"\r\n              [ngClass]=\"button.cssClass\"\r\n              [disabled]=\"button.disabled\"\r\n              (click)=\"buttonClicked(button.id)\"\r\n              [matTooltip]=\"button.tooltip\"\r\n              [aria-label]=\"button.id || button.tooltip\"\r\n              tabindex=\"0\">\r\n              <!-- icon -->\r\n              @if (button.matIcon) {\r\n                <mat-icon>\r\n                  {{ button.matIcon }}\r\n                </mat-icon>\r\n              } @else if (button.svgIcon) {\r\n                <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n              }\r\n            </button>\r\n          }\r\n        }\r\n      </div>\r\n    </mat-menu>\r\n  }\r\n</ng-template>\r\n", styles: [".lf-header{z-index:var(--header-z-index);position:fixed;top:0;height:var(--header-height)}.lf-header .lf-header-menu-button{flex-shrink:0;max-width:var(--header-menu-button-max-width)}.lf-header .lf-header-menu-button ::ng-deep .mdc-button__label{overflow:hidden;text-overflow:ellipsis}.lf-header .lf-header-menu-button.lf-header-menu-button-active{background-color:#fff}.lf-header .lf-header-menu-img{width:var(--header-menu-img-size);height:var(--header-menu-img-size);border-radius:50%;flex-shrink:0;object-fit:cover;box-sizing:border-box;cursor:pointer}.lf-header .lf-header-logo-title-wrapper{flex:0 0 auto;max-width:var(--header-logo-title-wrapper-max-width);overflow:hidden;display:flex}.lf-header .lf-header-logo-title-wrapper .lf-header-logo-title-wrapper-link{display:flex;flex-flow:row nowrap;align-items:center;flex:0}.lf-header .lf-header-logo-title-wrapper .lf-header-logo-title-wrapper-link.lf-clickable{cursor:pointer}.lf-header .lf-header-logo-title-wrapper .lf-header-logo{width:var(--header-logo-size);height:var(--header-logo-size);min-width:var(--header-logo-size);min-height:var(--header-logo-size)}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper{display:flex;flex-flow:column}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-title{font-size:var(--header-title-font-size);line-height:calc(var(--header-title-font-size) + 8px)}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-subtitle{font-size:var(--header-subtitle-font-size);line-height:var(--header-subtitle-font-size)}.lf-header lf-input{z-index:var(--header-z-index);flex:1 1 var(--header-input-max-width)}.lf-header lf-input.lf-header-input-mobile{position:fixed!important;left:4px!important;right:4px!important;width:unset!important;max-width:unset!important}.lf-header .spacer{flex:1 0 auto}.lf-menu-icons{min-height:unset!important;cursor:unset!important}.lf-menu-icons:hover{background:transparent!important}.lf-header-progress-bar{z-index:var(--header-z-index);position:fixed;top:var(--header-height)}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputComponent, selector: "lf-input", inputs: ["inputConfig", "isMobile", "inputValue"], outputs: ["inputSubmitEvent", "inputChangeEvent", "inputPrefixActionEvent", "inputValueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
@@ -983,8 +950,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                         MatTooltipModule,
                         NgClass,
                         NgTemplateOutlet,
-                        InputComponent
-                    ], template: "@if (headerConfig(); as config) {\r\n  @if (config.enable) {\r\n    <mat-toolbar\r\n      class=\"lf-header lf-transitions mat-elevation-z3\"\r\n      [class.px-4]=\"!isMobile()\"\r\n      [class.px-1]=\"isMobile()\"\r\n      [ngClass]=\"config.cssClass\"\r\n      [class.lf-gradient]=\"config.gradient\"\r\n      color=\"primary\">\r\n      <!-- left menu button -->\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n        [ngTemplateOutletContext]=\"{\r\n          menuButton: config.leftMenuButton!,\r\n          hideLabel: true,\r\n        }\"></ng-container>\r\n      <!-- logo & title -->\r\n      <div\r\n        class=\"lf-header-logo-title-wrapper ml-1 mr-2\"\r\n        [class.ml-10]=\"config.leftMenuButton && !isMobile()\">\r\n        <!-- link wrapper -->\r\n        <div\r\n          class=\"lf-header-logo-title-wrapper-link\"\r\n          [class.lf-clickable]=\"config.titleRouterLink\"\r\n          [routerLink]=\"config.titleRouterLink ? [config.titleRouterLink] : null\">\r\n          <!-- svg logo -->\r\n          @if (config.svgLogo) {\r\n            <mat-icon\r\n              class=\"lf-header-logo\"\r\n              [class.mr-3]=\"config.title\"\r\n              [svgIcon]=\"config.svgLogo!\"></mat-icon>\r\n            <!-- img logo -->\r\n          } @else {\r\n            @if (config.imgLogo) {\r\n              <img\r\n                class=\"lf-header-logo\"\r\n                [class.mr-3]=\"config.title\"\r\n                [src]=\"config.imgLogo\"\r\n                alt=\"Logo\" />\r\n            }\r\n          }\r\n          <!-- title -->\r\n          @if (config.title) {\r\n            <div class=\"lf-header-title-wrapper\">\r\n              @if (config.title) {\r\n                <span class=\"lf-header-title\">\r\n                  {{ config.title }}\r\n                </span>\r\n              }\r\n              @if (config.subtitle) {\r\n                <span class=\"lf-header-subtitle\">\r\n                  {{ config.subtitle }}\r\n                </span>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n      <!-- input -->\r\n      @if (config.inputConfig?.enable) {\r\n        <div class=\"spacer\"></div>\r\n        <lf-input\r\n          [class.lf-header-input-mobile]=\"isMobile()\"\r\n          [class.mx-3]=\"!isMobile()\"\r\n          [inputConfig]=\"config.inputConfig!\"\r\n          [isMobile]=\"isMobile()\"\r\n          (inputSubmitEvent)=\"inputSubmitted($event)\"\r\n          (inputChangeEvent)=\"inputChanged($event)\"\r\n          (inputPrefixActionEvent)=\"inputClosed()\"></lf-input>\r\n      }\r\n      <!-- spacer -->\r\n      <div class=\"spacer\"></div>\r\n      <!-- right menu buttons -->\r\n      @if (config.responsiveConfig?.enable && isMobile()) {\r\n        @let exludedButtons = rightExcludedButtons();\r\n        @for (button of exludedButtons; track button.id) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n            [ngTemplateOutletContext]=\"{\r\n              menuButton: button,\r\n            }\"></ng-container>\r\n        }\r\n        @let mobileButton = rightMobileButton();\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n          [ngTemplateOutletContext]=\"{\r\n            menuButton: mobileButton,\r\n          }\"></ng-container>\r\n      } @else {\r\n        @for (button of config.rightMenuButtons; track button.id) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n            [ngTemplateOutletContext]=\"{\r\n              menuButton: button,\r\n            }\"></ng-container>\r\n        }\r\n      }\r\n    </mat-toolbar>\r\n    <!-- loading bar -->\r\n    @if (config.loading || (config.showRouteLoading && routeLoading())) {\r\n      <mat-progress-bar\r\n        class=\"lf-header-progress-bar\"\r\n        color=\"accent\"\r\n        mode=\"indeterminate\"></mat-progress-bar>\r\n    }\r\n  }\r\n}\r\n\r\n<!-- header menu button -->\r\n<ng-template #menuButtonTemplate let-menuButton=\"menuButton\" let-hideLabel=\"hideLabel\">\r\n  @if (menuButton) {\r\n    <!-- label button -->\r\n    @if (menuButton.label && !hideLabel) {\r\n      <button\r\n        mat-button\r\n        class=\"lf-header-menu-button\"\r\n        [class.lf-header-menu-button-active]=\"isActive()(menuButton.id) && !menuButton.disabled\"\r\n        [ngClass]=\"menuButton.cssClass\"\r\n        [disabled]=\"menuButton.disabled\"\r\n        (click)=\"buttonClicked(menuButton.id)\"\r\n        [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n        [aria-label]=\"menuButton.label || menuButton.tooltip\"\r\n        [matTooltip]=\"menuButton.tooltip\">\r\n        <!-- icon -->\r\n        @if (menuButton.matIcon) {\r\n          <mat-icon>\r\n            {{ menuButton.matIcon }}\r\n          </mat-icon>\r\n        } @else if (menuButton.svgIcon) {\r\n          <mat-icon [svgIcon]=\"menuButton.svgIcon\"></mat-icon>\r\n        }\r\n        <!-- label -->\r\n        {{ menuButton.label }}\r\n      </button>\r\n      <!-- icon button -->\r\n    } @else if (menuButton.matIcon || menuButton.svgIcon) {\r\n      <button\r\n        mat-icon-button\r\n        class=\"lf-header-menu-button\"\r\n        [ngClass]=\"menuButton.cssClass\"\r\n        [disabled]=\"menuButton.disabled\"\r\n        (click)=\"buttonClicked(menuButton.id)\"\r\n        [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n        [matTooltip]=\"menuButton.tooltip\"\r\n        [aria-label]=\"menuButton.id || menuButton.tooltip\">\r\n        <!-- icon -->\r\n        @if (menuButton.matIcon) {\r\n          <mat-icon>\r\n            {{ menuButton.matIcon }}\r\n          </mat-icon>\r\n        } @else if (menuButton.svgIcon) {\r\n          <mat-icon [svgIcon]=\"menuButton.svgIcon\"></mat-icon>\r\n        }\r\n      </button>\r\n      <!-- img button -->\r\n    } @else if (menuButton.imgIcon) {\r\n      <img\r\n        class=\"lf-header-menu-img px-1\"\r\n        [src]=\"menuButton.imgIcon\"\r\n        width=\"48\"\r\n        height=\"48\"\r\n        [ngClass]=\"menuButton.cssClass\"\r\n        (click)=\"buttonClicked(menuButton.id)\"\r\n        [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n        [matTooltip]=\"menuButton.tooltip\"\r\n        [aria-label]=\"menuButton.id || menuButton.tooltip\" />\r\n    }\r\n    <!-- menu -->\r\n    <mat-menu #menu=\"matMenu\">\r\n      <!-- label menu buttons -->\r\n      @for (button of menuButton.menuButtons; track button.id) {\r\n        <!-- menu button -->\r\n        @if (button.label) {\r\n          <button\r\n            mat-menu-item\r\n            [class.lf-header-menu-button-active]=\"isActive()(button.id)\"\r\n            [ngClass]=\"button.cssClass\"\r\n            [disabled]=\"button.disabled\"\r\n            (click)=\"buttonClicked(button.id)\"\r\n            [matTooltip]=\"button.tooltip\"\r\n            [aria-label]=\"button.label\">\r\n            <!-- icon -->\r\n            @if (button.matIcon) {\r\n              <mat-icon>\r\n                {{ button.matIcon }}\r\n              </mat-icon>\r\n            } @else if (button.svgIcon) {\r\n              <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n            }\r\n            <!-- label -->\r\n            <span>{{ button.label }}</span>\r\n          </button>\r\n        }\r\n      }\r\n      <!-- icon menu buttons -->\r\n      <div mat-menu-item class=\"lf-menu-icons px-1\" [disableRipple]=\"true\">\r\n        @for (button of menuButton.menuButtons; track button.id) {\r\n          <!-- icon button -->\r\n          @if (!button.label && (button.matIcon || button.svgIcon)) {\r\n            <button\r\n              mat-icon-button\r\n              class=\"lf-menu-icon-button\"\r\n              [ngClass]=\"button.cssClass\"\r\n              [disabled]=\"button.disabled\"\r\n              (click)=\"buttonClicked(button.id)\"\r\n              [matTooltip]=\"button.tooltip\"\r\n              [aria-label]=\"button.id || button.tooltip\"\r\n              tabindex=\"0\">\r\n              <!-- icon -->\r\n              @if (button.matIcon) {\r\n                <mat-icon>\r\n                  {{ button.matIcon }}\r\n                </mat-icon>\r\n              } @else if (button.svgIcon) {\r\n                <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n              }\r\n            </button>\r\n          }\r\n        }\r\n      </div>\r\n    </mat-menu>\r\n  }\r\n</ng-template>\r\n", styles: [".lf-header{z-index:var(--header-z-index);position:fixed;top:0;height:var(--header-height)}.lf-header .lf-header-menu-button{flex-shrink:0;max-width:var(--header-menu-button-max-width)}.lf-header .lf-header-menu-button ::ng-deep .mdc-button__label{overflow:hidden;text-overflow:ellipsis}.lf-header .lf-header-menu-button.lf-header-menu-button-active{background-color:#fff}.lf-header .lf-header-menu-img{width:var(--header-menu-img-size);height:var(--header-menu-img-size);border-radius:50%;flex-shrink:0;object-fit:cover;cursor:pointer}.lf-header .lf-header-logo-title-wrapper{flex:0 0 auto;max-width:var(--header-logo-title-wrapper-max-width);overflow:hidden;display:flex}.lf-header .lf-header-logo-title-wrapper .lf-header-logo-title-wrapper-link{display:flex;flex-flow:row nowrap;align-items:center;flex:0}.lf-header .lf-header-logo-title-wrapper .lf-header-logo-title-wrapper-link.lf-clickable{cursor:pointer}.lf-header .lf-header-logo-title-wrapper .lf-header-logo{width:var(--header-logo-size);height:var(--header-logo-size);min-width:var(--header-logo-size);min-height:var(--header-logo-size)}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper{display:flex;flex-flow:column}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-title{font-size:var(--header-title-font-size);line-height:calc(var(--header-title-font-size) + 8px)}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-subtitle{font-size:var(--header-subtitle-font-size);line-height:var(--header-subtitle-font-size)}.lf-header lf-input{z-index:var(--header-z-index);flex:1 1 var(--header-input-max-width)}.lf-header lf-input.lf-header-input-mobile{position:fixed!important;left:4px!important;right:4px!important;width:unset!important;max-width:unset!important}.lf-header .spacer{flex:1 0 auto}.lf-menu-icons{min-height:unset!important;cursor:unset!important}.lf-menu-icons:hover{background:transparent!important}.lf-header-progress-bar{z-index:var(--header-z-index);position:fixed;top:var(--header-height)}\n"] }]
+                        InputComponent,
+                    ], template: "@if (headerConfig(); as config) {\r\n  @if (config.enable) {\r\n    <mat-toolbar\r\n      class=\"lf-header lf-transitions mat-elevation-z3\"\r\n      [class.px-4]=\"!isMobile()\"\r\n      [class.px-1]=\"isMobile()\"\r\n      [ngClass]=\"config.cssClass\"\r\n      [class.lf-gradient]=\"config.gradient\"\r\n      color=\"primary\">\r\n      <!-- left menu button -->\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n        [ngTemplateOutletContext]=\"{\r\n          menuButton: config.leftMenuButton!,\r\n          hideLabel: true,\r\n        }\"></ng-container>\r\n      <!-- logo & title -->\r\n      <div\r\n        class=\"lf-header-logo-title-wrapper ml-1 mr-2\"\r\n        [class.ml-10]=\"config.leftMenuButton && !isMobile()\">\r\n        <!-- link wrapper -->\r\n        <div\r\n          class=\"lf-header-logo-title-wrapper-link\"\r\n          [class.lf-clickable]=\"config.titleRouterLink\"\r\n          [routerLink]=\"config.titleRouterLink ? [config.titleRouterLink] : null\">\r\n          <!-- svg logo -->\r\n          @if (config.svgLogo) {\r\n            <mat-icon\r\n              class=\"lf-header-logo\"\r\n              [class.mr-3]=\"config.title\"\r\n              [svgIcon]=\"config.svgLogo!\"></mat-icon>\r\n            <!-- img logo -->\r\n          } @else {\r\n            @if (config.imgLogo) {\r\n              <img\r\n                class=\"lf-header-logo\"\r\n                [class.mr-3]=\"config.title\"\r\n                [src]=\"config.imgLogo\"\r\n                alt=\"Logo\" />\r\n            }\r\n          }\r\n          <!-- title -->\r\n          @if (config.title) {\r\n            <div class=\"lf-header-title-wrapper\">\r\n              @if (config.title) {\r\n                <span class=\"lf-header-title\">\r\n                  {{ config.title }}\r\n                </span>\r\n              }\r\n              @if (config.subtitle) {\r\n                <span class=\"lf-header-subtitle\">\r\n                  {{ config.subtitle }}\r\n                </span>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n      <!-- input -->\r\n      @if (config.inputConfig?.enable) {\r\n        <div class=\"spacer\"></div>\r\n        <lf-input\r\n          [class.lf-header-input-mobile]=\"isMobile()\"\r\n          [class.mx-3]=\"!isMobile()\"\r\n          [inputConfig]=\"config.inputConfig!\"\r\n          [isMobile]=\"isMobile()\"\r\n          (inputSubmitEvent)=\"inputSubmitted($event)\"\r\n          (inputChangeEvent)=\"inputChanged($event)\"\r\n          (inputPrefixActionEvent)=\"inputClosed()\"></lf-input>\r\n      }\r\n      <!-- spacer -->\r\n      <div class=\"spacer\"></div>\r\n      <!-- right menu buttons -->\r\n      @if (config.responsiveConfig?.enable && isMobile()) {\r\n        @let exludedButtons = rightExcludedButtons();\r\n        @for (button of exludedButtons; track button.id) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n            [ngTemplateOutletContext]=\"{\r\n              menuButton: button,\r\n            }\"></ng-container>\r\n        }\r\n        @let mobileButton = rightMobileButton();\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n          [ngTemplateOutletContext]=\"{\r\n            menuButton: mobileButton,\r\n          }\"></ng-container>\r\n      } @else {\r\n        @for (button of config.rightMenuButtons; track button.id) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n            [ngTemplateOutletContext]=\"{\r\n              menuButton: button,\r\n            }\"></ng-container>\r\n        }\r\n      }\r\n    </mat-toolbar>\r\n    <!-- loading bar -->\r\n    @if (config.loading || (config.showRouteLoading && routeLoading())) {\r\n      <mat-progress-bar\r\n        class=\"lf-header-progress-bar\"\r\n        color=\"accent\"\r\n        mode=\"indeterminate\"></mat-progress-bar>\r\n    }\r\n  }\r\n}\r\n\r\n<!-- header menu button -->\r\n<ng-template #menuButtonTemplate let-menuButton=\"menuButton\" let-hideLabel=\"hideLabel\">\r\n  @if (menuButton) {\r\n    <!-- label button -->\r\n    @if (menuButton.label && !hideLabel) {\r\n      <button\r\n        mat-button\r\n        class=\"lf-header-menu-button\"\r\n        [class.lf-header-menu-button-active]=\"isActive()(menuButton.id) && !menuButton.disabled\"\r\n        [ngClass]=\"menuButton.cssClass\"\r\n        [disabled]=\"menuButton.disabled\"\r\n        (click)=\"buttonClicked(menuButton.id)\"\r\n        [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n        [aria-label]=\"menuButton.label || menuButton.tooltip\"\r\n        [matTooltip]=\"menuButton.tooltip\">\r\n        <!-- icon -->\r\n        @if (menuButton.matIcon) {\r\n          <mat-icon>\r\n            {{ menuButton.matIcon }}\r\n          </mat-icon>\r\n        } @else if (menuButton.svgIcon) {\r\n          <mat-icon [svgIcon]=\"menuButton.svgIcon\"></mat-icon>\r\n        }\r\n        <!-- label -->\r\n        {{ menuButton.label }}\r\n      </button>\r\n      <!-- icon button -->\r\n    } @else if (menuButton.matIcon || menuButton.svgIcon) {\r\n      <button\r\n        mat-icon-button\r\n        class=\"lf-header-menu-button\"\r\n        [ngClass]=\"menuButton.cssClass\"\r\n        [disabled]=\"menuButton.disabled\"\r\n        (click)=\"buttonClicked(menuButton.id)\"\r\n        [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n        [matTooltip]=\"menuButton.tooltip\"\r\n        [aria-label]=\"menuButton.id || menuButton.tooltip\">\r\n        <!-- icon -->\r\n        @if (menuButton.matIcon) {\r\n          <mat-icon>\r\n            {{ menuButton.matIcon }}\r\n          </mat-icon>\r\n        } @else if (menuButton.svgIcon) {\r\n          <mat-icon [svgIcon]=\"menuButton.svgIcon\"></mat-icon>\r\n        }\r\n      </button>\r\n      <!-- img button -->\r\n    } @else if (menuButton.imgIcon) {\r\n      <img\r\n        class=\"lf-header-menu-img\"\r\n        [src]=\"menuButton.imgIcon\"\r\n        width=\"48\"\r\n        height=\"48\"\r\n        [ngClass]=\"menuButton.cssClass\"\r\n        (click)=\"buttonClicked(menuButton.id)\"\r\n        [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n        [matTooltip]=\"menuButton.tooltip\"\r\n        [aria-label]=\"menuButton.id || menuButton.tooltip\" />\r\n    }\r\n    <!-- menu -->\r\n    <mat-menu #menu=\"matMenu\">\r\n      <!-- label menu buttons -->\r\n      @for (button of menuButton.menuButtons; track button.id) {\r\n        <!-- menu button -->\r\n        @if (button.label) {\r\n          <button\r\n            mat-menu-item\r\n            [class.lf-header-menu-button-active]=\"isActive()(button.id)\"\r\n            [ngClass]=\"button.cssClass\"\r\n            [disabled]=\"button.disabled\"\r\n            (click)=\"buttonClicked(button.id)\"\r\n            [matTooltip]=\"button.tooltip\"\r\n            [aria-label]=\"button.label\">\r\n            <!-- icon -->\r\n            @if (button.matIcon) {\r\n              <mat-icon>\r\n                {{ button.matIcon }}\r\n              </mat-icon>\r\n            } @else if (button.svgIcon) {\r\n              <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n            }\r\n            <!-- label -->\r\n            <span>{{ button.label }}</span>\r\n          </button>\r\n        }\r\n      }\r\n      <!-- icon menu buttons -->\r\n      <div mat-menu-item class=\"lf-menu-icons px-1\" [disableRipple]=\"true\">\r\n        @for (button of menuButton.menuButtons; track button.id) {\r\n          <!-- icon button -->\r\n          @if (!button.label && (button.matIcon || button.svgIcon)) {\r\n            <button\r\n              mat-icon-button\r\n              class=\"lf-menu-icon-button\"\r\n              [ngClass]=\"button.cssClass\"\r\n              [disabled]=\"button.disabled\"\r\n              (click)=\"buttonClicked(button.id)\"\r\n              [matTooltip]=\"button.tooltip\"\r\n              [aria-label]=\"button.id || button.tooltip\"\r\n              tabindex=\"0\">\r\n              <!-- icon -->\r\n              @if (button.matIcon) {\r\n                <mat-icon>\r\n                  {{ button.matIcon }}\r\n                </mat-icon>\r\n              } @else if (button.svgIcon) {\r\n                <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n              }\r\n            </button>\r\n          }\r\n        }\r\n      </div>\r\n    </mat-menu>\r\n  }\r\n</ng-template>\r\n", styles: [".lf-header{z-index:var(--header-z-index);position:fixed;top:0;height:var(--header-height)}.lf-header .lf-header-menu-button{flex-shrink:0;max-width:var(--header-menu-button-max-width)}.lf-header .lf-header-menu-button ::ng-deep .mdc-button__label{overflow:hidden;text-overflow:ellipsis}.lf-header .lf-header-menu-button.lf-header-menu-button-active{background-color:#fff}.lf-header .lf-header-menu-img{width:var(--header-menu-img-size);height:var(--header-menu-img-size);border-radius:50%;flex-shrink:0;object-fit:cover;box-sizing:border-box;cursor:pointer}.lf-header .lf-header-logo-title-wrapper{flex:0 0 auto;max-width:var(--header-logo-title-wrapper-max-width);overflow:hidden;display:flex}.lf-header .lf-header-logo-title-wrapper .lf-header-logo-title-wrapper-link{display:flex;flex-flow:row nowrap;align-items:center;flex:0}.lf-header .lf-header-logo-title-wrapper .lf-header-logo-title-wrapper-link.lf-clickable{cursor:pointer}.lf-header .lf-header-logo-title-wrapper .lf-header-logo{width:var(--header-logo-size);height:var(--header-logo-size);min-width:var(--header-logo-size);min-height:var(--header-logo-size)}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper{display:flex;flex-flow:column}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-title{font-size:var(--header-title-font-size);line-height:calc(var(--header-title-font-size) + 8px)}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-subtitle{font-size:var(--header-subtitle-font-size);line-height:var(--header-subtitle-font-size)}.lf-header lf-input{z-index:var(--header-z-index);flex:1 1 var(--header-input-max-width)}.lf-header lf-input.lf-header-input-mobile{position:fixed!important;left:4px!important;right:4px!important;width:unset!important;max-width:unset!important}.lf-header .spacer{flex:1 0 auto}.lf-menu-icons{min-height:unset!important;cursor:unset!important}.lf-menu-icons:hover{background:transparent!important}.lf-header-progress-bar{z-index:var(--header-z-index);position:fixed;top:var(--header-height)}\n"] }]
         }], propDecorators: { libraryConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "libraryConfig", required: false }] }], headerConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerConfig", required: false }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], routeLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "routeLoading", required: false }] }], currentRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentRoute", required: false }] }], headerConfigUpdateEvent: [{ type: i0.Output, args: ["headerConfigUpdateEvent"] }], headerButtonClickEvent: [{ type: i0.Output, args: ["headerButtonClickEvent"] }], headerInputSubmitEvent: [{ type: i0.Output, args: ["headerInputSubmitEvent"] }], headerInputChangeEvent: [{ type: i0.Output, args: ["headerInputChangeEvent"] }] } });
 
 class LoadingOverlayComponent {
@@ -1004,11 +971,7 @@ class LoadingOverlayComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: LoadingOverlayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lf-loading-overlay', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        PortalModule,
-                        MatProgressSpinner,
-                        NgClass
-                    ], template: "@if (portal(); as portal) {\r\n  <ng-template [cdkPortalOutlet]=\"portal\"></ng-template>\r\n} @else {\r\n  <div\r\n    [ngClass]=\"loadingOverlayConfig()?.cssClass\"\r\n    [class.lf-gradient-spinner]=\"loadingOverlayConfig()?.gradient\">\r\n    <mat-progress-spinner mode=\"indeterminate\"></mat-progress-spinner>\r\n  </div>\r\n}\r\n", styles: [".lf-gradient-spinner{position:relative;display:inline-block}.lf-gradient-spinner mat-progress-spinner,.lf-gradient-spinner mat-spinner{opacity:0}.lf-gradient-spinner:before{content:\"\";position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--color-primary),var(--color-accent));-webkit-mask:radial-gradient(farthest-side,transparent 78%,black 79%);mask:radial-gradient(farthest-side,transparent 78%,black 79%);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
+            args: [{ selector: 'lf-loading-overlay', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [PortalModule, MatProgressSpinner, NgClass], template: "@if (portal(); as portal) {\r\n  <ng-template [cdkPortalOutlet]=\"portal\"></ng-template>\r\n} @else {\r\n  <div\r\n    [ngClass]=\"loadingOverlayConfig()?.cssClass\"\r\n    [class.lf-gradient-spinner]=\"loadingOverlayConfig()?.gradient\">\r\n    <mat-progress-spinner mode=\"indeterminate\"></mat-progress-spinner>\r\n  </div>\r\n}\r\n", styles: [".lf-gradient-spinner{position:relative;display:inline-block}.lf-gradient-spinner mat-progress-spinner,.lf-gradient-spinner mat-spinner{opacity:0}.lf-gradient-spinner:before{content:\"\";position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--color-primary),var(--color-accent));-webkit-mask:radial-gradient(farthest-side,transparent 78%,black 79%);mask:radial-gradient(farthest-side,transparent 78%,black 79%);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
         }], ctorParameters: () => [] });
 
 class NavbarComponent {
@@ -1031,15 +994,11 @@ class NavbarComponent {
         this.navbarButtonClickEvent.emit(id);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: NavbarComponent, isStandalone: true, selector: "lf-navbar", inputs: { libraryConfig: { classPropertyName: "libraryConfig", publicName: "libraryConfig", isSignal: true, isRequired: false, transformFunction: null }, navbarConfig: { classPropertyName: "navbarConfig", publicName: "navbarConfig", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, currentRoute: { classPropertyName: "currentRoute", publicName: "currentRoute", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navbarButtonClickEvent: "navbarButtonClickEvent" }, ngImport: i0, template: "@if (navbarConfig(); as config) {\r\n  @if (config.enable) {\r\n    <div\r\n      [animate.enter]=\"isMobile() ? 'lf-anim-slide-up-enter' : 'lf-anim-slide-left-enter'\"\r\n      [animate.leave]=\"isMobile() ? 'lf-anim-slide-up-leave' : 'lf-anim-slide-left-leave'\"\r\n      class=\"mat-app-background lf-transitions mat-elevation-z3\"\r\n      [class.lf-navbar]=\"!isMobile()\"\r\n      [class.lf-navbar-mobile]=\"isMobile()\"\r\n      [ngClass]=\"config.cssClass\">\r\n      <!-- items -->\r\n      <div [class.lf-navbar-items]=\"!isMobile()\" [class.lf-navbar-mobile-items]=\"isMobile()\">\r\n        <!-- item -->\r\n        @for (button of config.buttons; track button.id; let i = $index) {\r\n          @if (i < 5) {\r\n            <div\r\n              class=\"lf-navbar-item\"\r\n              [class.lf-navbar-item-active]=\"isActive()(button.id)\"\r\n              [ngClass]=\"button.cssClass\"\r\n              (click)=\"buttonClicked(button.id)\"\r\n              tabindex=\"0\"\r\n              role=\"button\"\r\n              [matTooltip]=\"button.tooltip\">\r\n              <!-- icon -->\r\n              @if (button.matIcon) {\r\n                <mat-icon>\r\n                  {{ button.matIcon }}\r\n                </mat-icon>\r\n              } @else if (button.svgIcon) {\r\n                <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n              }\r\n              <!-- label -->\r\n              <!-- show a protected space on desktop so the icon doesn't move up and down -->\r\n              @if (button?.label) {\r\n                <span class=\"lf-navbar-item-label\">\r\n                  {{\r\n                    isActive()(button.id) || config.showAllLabels\r\n                      ? button.label\r\n                      : isMobile()\r\n                        ? \"\"\r\n                        : \"&nbsp;\"\r\n                  }}\r\n                </span>\r\n              }\r\n            </div>\r\n          }\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n}\r\n", styles: [".lf-navbar{z-index:var(--navbar-z-index);position:fixed;left:0;top:0;height:100dvh;padding:calc(var(--header-height) + 16px) var(--navbar-padding) 0 var(--navbar-padding);border-right:solid 1px rgba(0,0,0,.12)}.lf-navbar .lf-navbar-items{display:flex;flex-flow:column;align-items:center}.lf-navbar-mobile{z-index:var(--navbar-z-index);position:fixed;left:0;bottom:0;width:100vw;padding:var(--navbar-padding) 0;box-sizing:border-box;border-top:solid 1px rgba(0,0,0,.12)}.lf-navbar-mobile .lf-navbar-mobile-items{display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-evenly}.lf-navbar-mobile .lf-navbar-mobile-items .lf-navbar-item{height:var(--navbar-height-mobile)!important}.lf-navbar-item{width:var(--navbar-width);height:var(--navbar-height);display:flex;align-items:center;justify-content:center;flex-flow:column;border-radius:var(--navbar-item-border-radius);cursor:pointer}.lf-navbar-item.lf-navbar-item-active{color:var(--color-primary)}.lf-navbar-item .lf-navbar-item-icon{width:calc(var(--navbar-width) / 3);height:calc(var(--navbar-height) / 3);overflow:visible!important}.lf-navbar-item .lf-navbar-item-label{max-width:var(--navbar-width);white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;text-transform:none;vertical-align:top;font-size:var(--navbar-item-label-font-size);font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: NavbarComponent, isStandalone: true, selector: "lf-navbar", inputs: { libraryConfig: { classPropertyName: "libraryConfig", publicName: "libraryConfig", isSignal: true, isRequired: false, transformFunction: null }, navbarConfig: { classPropertyName: "navbarConfig", publicName: "navbarConfig", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, currentRoute: { classPropertyName: "currentRoute", publicName: "currentRoute", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navbarButtonClickEvent: "navbarButtonClickEvent" }, ngImport: i0, template: "@if (navbarConfig(); as config) {\r\n  @if (config.enable) {\r\n    <div\r\n      [animate.enter]=\"isMobile() ? 'lf-anim-slide-up-enter' : 'lf-anim-slide-left-enter'\"\r\n      [animate.leave]=\"isMobile() ? 'lf-anim-slide-up-leave' : 'lf-anim-slide-left-leave'\"\r\n      class=\"mat-app-background lf-transitions mat-elevation-z3\"\r\n      [class.lf-navbar]=\"!isMobile()\"\r\n      [class.lf-navbar-mobile]=\"isMobile()\"\r\n      [ngClass]=\"config.cssClass\">\r\n      <!-- items -->\r\n      <div [class.lf-navbar-items]=\"!isMobile()\" [class.lf-navbar-mobile-items]=\"isMobile()\">\r\n        <!-- item -->\r\n        @for (button of config.buttons; track button.id; let i = $index) {\r\n          @if (i < 5) {\r\n            <div\r\n              class=\"lf-navbar-item\"\r\n              [class.lf-navbar-item-active]=\"isActive()(button.id)\"\r\n              [ngClass]=\"button.cssClass\"\r\n              (click)=\"buttonClicked(button.id)\"\r\n              tabindex=\"0\"\r\n              role=\"button\"\r\n              [matTooltip]=\"button.tooltip\">\r\n              <!-- icon -->\r\n              @if (button.matIcon) {\r\n                <mat-icon>\r\n                  {{ button.matIcon }}\r\n                </mat-icon>\r\n              } @else if (button.svgIcon) {\r\n                <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n              }\r\n              <!-- label -->\r\n              <!-- show a protected space on desktop so the icon doesn't move up and down -->\r\n              @if (button?.label) {\r\n                <span class=\"lf-navbar-item-label\">\r\n                  {{\r\n                    isActive()(button.id) || config.showAllLabels\r\n                      ? button.label\r\n                      : isMobile()\r\n                        ? ''\r\n                        : '&nbsp;'\r\n                  }}\r\n                </span>\r\n              }\r\n            </div>\r\n          }\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n}\r\n", styles: [".lf-navbar{z-index:var(--navbar-z-index);position:fixed;left:0;top:0;height:100dvh;padding:calc(var(--header-height) + 16px) var(--navbar-padding) 0 var(--navbar-padding);border-right:solid 1px rgba(0,0,0,.12)}.lf-navbar .lf-navbar-items{display:flex;flex-flow:column;align-items:center}.lf-navbar-mobile{z-index:var(--navbar-z-index);position:fixed;left:0;bottom:0;width:100vw;padding:var(--navbar-padding) 0;box-sizing:border-box;border-top:solid 1px rgba(0,0,0,.12)}.lf-navbar-mobile .lf-navbar-mobile-items{display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-evenly}.lf-navbar-mobile .lf-navbar-mobile-items .lf-navbar-item{height:var(--navbar-height-mobile)!important}.lf-navbar-item{width:var(--navbar-width);height:var(--navbar-height);display:flex;align-items:center;justify-content:center;flex-flow:column;border-radius:var(--navbar-item-border-radius);cursor:pointer}.lf-navbar-item.lf-navbar-item-active{color:var(--color-primary)}.lf-navbar-item .lf-navbar-item-icon{width:calc(var(--navbar-width) / 3);height:calc(var(--navbar-height) / 3);overflow:visible!important}.lf-navbar-item .lf-navbar-item-label{max-width:var(--navbar-width);white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;text-transform:none;vertical-align:top;font-size:var(--navbar-item-label-font-size);font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NavbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lf-navbar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        MatIconModule,
-                        MatTooltipModule,
-                        NgClass
-                    ], template: "@if (navbarConfig(); as config) {\r\n  @if (config.enable) {\r\n    <div\r\n      [animate.enter]=\"isMobile() ? 'lf-anim-slide-up-enter' : 'lf-anim-slide-left-enter'\"\r\n      [animate.leave]=\"isMobile() ? 'lf-anim-slide-up-leave' : 'lf-anim-slide-left-leave'\"\r\n      class=\"mat-app-background lf-transitions mat-elevation-z3\"\r\n      [class.lf-navbar]=\"!isMobile()\"\r\n      [class.lf-navbar-mobile]=\"isMobile()\"\r\n      [ngClass]=\"config.cssClass\">\r\n      <!-- items -->\r\n      <div [class.lf-navbar-items]=\"!isMobile()\" [class.lf-navbar-mobile-items]=\"isMobile()\">\r\n        <!-- item -->\r\n        @for (button of config.buttons; track button.id; let i = $index) {\r\n          @if (i < 5) {\r\n            <div\r\n              class=\"lf-navbar-item\"\r\n              [class.lf-navbar-item-active]=\"isActive()(button.id)\"\r\n              [ngClass]=\"button.cssClass\"\r\n              (click)=\"buttonClicked(button.id)\"\r\n              tabindex=\"0\"\r\n              role=\"button\"\r\n              [matTooltip]=\"button.tooltip\">\r\n              <!-- icon -->\r\n              @if (button.matIcon) {\r\n                <mat-icon>\r\n                  {{ button.matIcon }}\r\n                </mat-icon>\r\n              } @else if (button.svgIcon) {\r\n                <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n              }\r\n              <!-- label -->\r\n              <!-- show a protected space on desktop so the icon doesn't move up and down -->\r\n              @if (button?.label) {\r\n                <span class=\"lf-navbar-item-label\">\r\n                  {{\r\n                    isActive()(button.id) || config.showAllLabels\r\n                      ? button.label\r\n                      : isMobile()\r\n                        ? \"\"\r\n                        : \"&nbsp;\"\r\n                  }}\r\n                </span>\r\n              }\r\n            </div>\r\n          }\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n}\r\n", styles: [".lf-navbar{z-index:var(--navbar-z-index);position:fixed;left:0;top:0;height:100dvh;padding:calc(var(--header-height) + 16px) var(--navbar-padding) 0 var(--navbar-padding);border-right:solid 1px rgba(0,0,0,.12)}.lf-navbar .lf-navbar-items{display:flex;flex-flow:column;align-items:center}.lf-navbar-mobile{z-index:var(--navbar-z-index);position:fixed;left:0;bottom:0;width:100vw;padding:var(--navbar-padding) 0;box-sizing:border-box;border-top:solid 1px rgba(0,0,0,.12)}.lf-navbar-mobile .lf-navbar-mobile-items{display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-evenly}.lf-navbar-mobile .lf-navbar-mobile-items .lf-navbar-item{height:var(--navbar-height-mobile)!important}.lf-navbar-item{width:var(--navbar-width);height:var(--navbar-height);display:flex;align-items:center;justify-content:center;flex-flow:column;border-radius:var(--navbar-item-border-radius);cursor:pointer}.lf-navbar-item.lf-navbar-item-active{color:var(--color-primary)}.lf-navbar-item .lf-navbar-item-icon{width:calc(var(--navbar-width) / 3);height:calc(var(--navbar-height) / 3);overflow:visible!important}.lf-navbar-item .lf-navbar-item-label{max-width:var(--navbar-width);white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;text-transform:none;vertical-align:top;font-size:var(--navbar-item-label-font-size);font-weight:500}\n"] }]
+            args: [{ selector: 'lf-navbar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatIconModule, MatTooltipModule, NgClass], template: "@if (navbarConfig(); as config) {\r\n  @if (config.enable) {\r\n    <div\r\n      [animate.enter]=\"isMobile() ? 'lf-anim-slide-up-enter' : 'lf-anim-slide-left-enter'\"\r\n      [animate.leave]=\"isMobile() ? 'lf-anim-slide-up-leave' : 'lf-anim-slide-left-leave'\"\r\n      class=\"mat-app-background lf-transitions mat-elevation-z3\"\r\n      [class.lf-navbar]=\"!isMobile()\"\r\n      [class.lf-navbar-mobile]=\"isMobile()\"\r\n      [ngClass]=\"config.cssClass\">\r\n      <!-- items -->\r\n      <div [class.lf-navbar-items]=\"!isMobile()\" [class.lf-navbar-mobile-items]=\"isMobile()\">\r\n        <!-- item -->\r\n        @for (button of config.buttons; track button.id; let i = $index) {\r\n          @if (i < 5) {\r\n            <div\r\n              class=\"lf-navbar-item\"\r\n              [class.lf-navbar-item-active]=\"isActive()(button.id)\"\r\n              [ngClass]=\"button.cssClass\"\r\n              (click)=\"buttonClicked(button.id)\"\r\n              tabindex=\"0\"\r\n              role=\"button\"\r\n              [matTooltip]=\"button.tooltip\">\r\n              <!-- icon -->\r\n              @if (button.matIcon) {\r\n                <mat-icon>\r\n                  {{ button.matIcon }}\r\n                </mat-icon>\r\n              } @else if (button.svgIcon) {\r\n                <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n              }\r\n              <!-- label -->\r\n              <!-- show a protected space on desktop so the icon doesn't move up and down -->\r\n              @if (button?.label) {\r\n                <span class=\"lf-navbar-item-label\">\r\n                  {{\r\n                    isActive()(button.id) || config.showAllLabels\r\n                      ? button.label\r\n                      : isMobile()\r\n                        ? ''\r\n                        : '&nbsp;'\r\n                  }}\r\n                </span>\r\n              }\r\n            </div>\r\n          }\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n}\r\n", styles: [".lf-navbar{z-index:var(--navbar-z-index);position:fixed;left:0;top:0;height:100dvh;padding:calc(var(--header-height) + 16px) var(--navbar-padding) 0 var(--navbar-padding);border-right:solid 1px rgba(0,0,0,.12)}.lf-navbar .lf-navbar-items{display:flex;flex-flow:column;align-items:center}.lf-navbar-mobile{z-index:var(--navbar-z-index);position:fixed;left:0;bottom:0;width:100vw;padding:var(--navbar-padding) 0;box-sizing:border-box;border-top:solid 1px rgba(0,0,0,.12)}.lf-navbar-mobile .lf-navbar-mobile-items{display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-evenly}.lf-navbar-mobile .lf-navbar-mobile-items .lf-navbar-item{height:var(--navbar-height-mobile)!important}.lf-navbar-item{width:var(--navbar-width);height:var(--navbar-height);display:flex;align-items:center;justify-content:center;flex-flow:column;border-radius:var(--navbar-item-border-radius);cursor:pointer}.lf-navbar-item.lf-navbar-item-active{color:var(--color-primary)}.lf-navbar-item .lf-navbar-item-icon{width:calc(var(--navbar-width) / 3);height:calc(var(--navbar-height) / 3);overflow:visible!important}.lf-navbar-item .lf-navbar-item-label{max-width:var(--navbar-width);white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;text-transform:none;vertical-align:top;font-size:var(--navbar-item-label-font-size);font-weight:500}\n"] }]
         }], propDecorators: { libraryConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "libraryConfig", required: false }] }], navbarConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "navbarConfig", required: false }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], currentRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentRoute", required: false }] }], navbarButtonClickEvent: [{ type: i0.Output, args: ["navbarButtonClickEvent"] }] } });
 
 class ScaffoldComponent {
@@ -1061,7 +1020,9 @@ class ScaffoldComponent {
         this.navbarButtonClickEvent = output();
         this.floatingButtonClickEvent = output();
         this.bottomBarButtonClickEvent = output();
-        this.scaffoldConfig = toSignal(this.scaffoldService.scaffoldConfig$, { initialValue: null });
+        this.scaffoldConfig = toSignal(this.scaffoldService.scaffoldConfig$, {
+            initialValue: null,
+        });
         this.headerConfig = computed(() => this.scaffoldConfig()?.headerConfig || null, ...(ngDevMode ? [{ debugName: "headerConfig" }] : /* istanbul ignore next */ []));
         this.navbarConfig = computed(() => this.scaffoldConfig()?.navbarConfig || null, ...(ngDevMode ? [{ debugName: "navbarConfig" }] : /* istanbul ignore next */ []));
         this.drawerConfig = computed(() => this.scaffoldConfig()?.drawerConfig || null, ...(ngDevMode ? [{ debugName: "drawerConfig" }] : /* istanbul ignore next */ []));
@@ -1083,7 +1044,8 @@ class ScaffoldComponent {
         this.isMobile = toSignal(this.breakpointService.breakpoint$.pipe(map((breakpointState) => {
             if (this.libraryConfig?.debugging)
                 this.logger.log('[BreakpointState]', breakpointState);
-            return breakpointState.breakpoints[Breakpoints.XSmall] || breakpointState.breakpoints[Breakpoints.Small];
+            return (breakpointState.breakpoints[Breakpoints.XSmall] ||
+                breakpointState.breakpoints[Breakpoints.Small]);
         })));
         this.scrollTopPosition = signal(0, ...(ngDevMode ? [{ debugName: "scrollTopPosition" }] : /* istanbul ignore next */ []));
         this.initialized = signal(false, ...(ngDevMode ? [{ debugName: "initialized" }] : /* istanbul ignore next */ []));
@@ -1102,7 +1064,9 @@ class ScaffoldComponent {
             if (!scrollContainer)
                 return;
             const element = scrollContainer.nativeElement;
-            const subscription = fromEvent(element, 'scroll').pipe(distinctUntilChanged(), debounceTime(100)).subscribe((e) => {
+            const subscription = fromEvent(element, 'scroll')
+                .pipe(distinctUntilChanged(), debounceTime(100))
+                .subscribe((e) => {
                 const target = e.target;
                 this.scrollTopPosition.set(target.scrollTop);
             });
@@ -1235,7 +1199,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                         FooterComponent,
                         ContentTitleCardComponent,
                         FloatingButtonComponent,
-                        BottomBarComponent
+                        BottomBarComponent,
                     ], template: "<div\r\n  class=\"lf-scaffold lf-transitions mat-app-background mat-typography\"\r\n  [ngClass]=\"scaffoldConfig()?.cssClass\">\r\n  <!-- header -->\r\n  <lf-header\r\n    [libraryConfig]=\"libraryConfig\"\r\n    [headerConfig]=\"headerConfig()\"\r\n    [isMobile]=\"isMobile()!\"\r\n    [routeLoading]=\"routeLoading()!\"\r\n    [currentRoute]=\"currentRoute()\"\r\n    (headerConfigUpdateEvent)=\"headerConfigUpdated($event)\"\r\n    (headerButtonClickEvent)=\"headerButtonClicked($event)\"\r\n    (headerInputSubmitEvent)=\"headerInputSubmitted($event)\"\r\n    (headerInputChangeEvent)=\"headerInputChanged($event)\"></lf-header>\r\n  <!-- navbar -->\r\n  <lf-navbar\r\n    [libraryConfig]=\"libraryConfig\"\r\n    [navbarConfig]=\"navbarConfig()\"\r\n    [isMobile]=\"isMobile()!\"\r\n    [currentRoute]=\"currentRoute()\"\r\n    (navbarButtonClickEvent)=\"navbarButtonClicked($event)\"></lf-navbar>\r\n  <!-- content wrapper -->\r\n  <div\r\n    class=\"lf-content-wrapper\"\r\n    [class.lf-show-navbar]=\"navbarConfig()?.enable && !isMobile()\"\r\n    [class.lf-show-header]=\"headerConfig()?.enable && !(navbarConfig()?.enable && isMobile())\"\r\n    [class.lf-show-navbar-mobile]=\"navbarConfig()?.enable && isMobile() && !headerConfig()?.enable\"\r\n    [class.lf-show-header-and-navbar-mobile]=\"\r\n      headerConfig()?.enable && navbarConfig()?.enable && isMobile()\r\n    \"\r\n    [class.lf-transitions]=\"initialized()\"\r\n    #scrollContainer\r\n    cdkScrollable>\r\n    <!-- drawer -->\r\n    <lf-drawer\r\n      [libraryConfig]=\"libraryConfig\"\r\n      [drawerConfig]=\"drawerConfig()\"\r\n      [drawerPortal]=\"drawerPortal()\"\r\n      [isMobile]=\"isMobile()!\"\r\n      [headerEnabled]=\"headerConfig()?.enable!\"\r\n      (drawerConfigUpdateEvent)=\"drawerConfigUpdated($event)\">\r\n      <!-- drawer content -->\r\n      <ng-content select=\"[drawerContent]\" drawerContent></ng-content>\r\n      <!-- content title card -->\r\n      <lf-content-title-card\r\n        [libraryConfig]=\"libraryConfig\"\r\n        [contentTitleCardConfig]=\"contentTitleCardConfig()\"\r\n        [isMobile]=\"isMobile()!\"\r\n        [routeHistory]=\"routeHistory()!\"\r\n        (backButtonClickEvent)=\"backButtonClicked()\"></lf-content-title-card>\r\n      <!-- main content -->\r\n      <div\r\n        class=\"lf-content\"\r\n        [class.lf-content-mobile]=\"isMobile()\"\r\n        [class.lf-show-footer]=\"footerConfig()?.enable\"\r\n        #content>\r\n        <ng-content></ng-content>\r\n        <!-- to top button -->\r\n        <lf-floating-button\r\n          [libraryConfig]=\"libraryConfig\"\r\n          [floatingButtonConfig]=\"floatingButtonConfig()\"\r\n          [onTop]=\"scrollTopPosition() <= 0\"\r\n          [isMobile]=\"isMobile()!\"\r\n          [drawerEnabled]=\"drawerConfig()?.enable! && drawerConfig()?.open!\"\r\n          [navbarEnabled]=\"navbarConfig()?.enable!\"\r\n          [bottomBarEnabled]=\"bottomBarConfig()?.enable!\"\r\n          (floatingButtonConfigUpdateEvent)=\"floatingButtonConfigUpdated($event)\"\r\n          (floatingButtonClickEvent)=\"floatingButtonClicked($event)\"></lf-floating-button>\r\n      </div>\r\n      <!-- footer -->\r\n      <lf-footer [libraryConfig]=\"libraryConfig\" [footerConfig]=\"footerConfig()\"></lf-footer>\r\n    </lf-drawer>\r\n  </div>\r\n  <!-- bottom bar -->\r\n  <lf-bottom-bar\r\n    [libraryConfig]=\"libraryConfig\"\r\n    [bottomBarConfig]=\"bottomBarConfig()\"\r\n    [isMobile]=\"isMobile()! && navbarConfig()?.enable!\"\r\n    [navbarEnabled]=\"navbarConfig()?.enable!\"\r\n    (bottomBarCloseClickEvent)=\"bottomBarCloseClicked($event)\"\r\n    (bottomBarButtonClickEvent)=\"bottomBarButtonClicked($event)\"></lf-bottom-bar>\r\n</div>\r\n", styles: [".lf-scaffold{height:100dvh}.lf-scaffold .lf-content-wrapper{position:absolute;inset:0;overflow-y:auto}.lf-scaffold .lf-content-wrapper.lf-show-navbar{left:calc(var(--navbar-height) + 2 * var(--navbar-padding))}.lf-scaffold .lf-content-wrapper.lf-show-header{top:var(--header-height);height:calc(100dvh - var(--header-height))}.lf-scaffold .lf-content-wrapper.lf-show-navbar-mobile{height:calc(100dvh - var(--navbar-height-mobile))}.lf-scaffold .lf-content-wrapper.lf-show-header-and-navbar-mobile{top:var(--header-height);height:calc(100dvh - var(--header-height) - var(--navbar-height-mobile))}.lf-scaffold .lf-content-wrapper .lf-content{padding-left:var(--content-padding);padding-right:var(--content-padding);padding-bottom:var(--content-padding)}.lf-scaffold .lf-content-wrapper .lf-content.lf-content-mobile{padding-left:var(--content-padding-mobile);padding-right:var(--content-padding-mobile);padding-bottom:var(--content-padding-mobile)}.lf-scaffold .lf-content-wrapper .lf-content.lf-show-footer{min-height:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { scrollContainer: [{ type: i0.ViewChild, args: ['scrollContainer', { isSignal: true }] }], content: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }], headerButtonClickEvent: [{ type: i0.Output, args: ["headerButtonClickEvent"] }], headerInputSubmitEvent: [{ type: i0.Output, args: ["headerInputSubmitEvent"] }], headerInputChangeEvent: [{ type: i0.Output, args: ["headerInputChangeEvent"] }], navbarButtonClickEvent: [{ type: i0.Output, args: ["navbarButtonClickEvent"] }], floatingButtonClickEvent: [{ type: i0.Output, args: ["floatingButtonClickEvent"] }], bottomBarButtonClickEvent: [{ type: i0.Output, args: ["bottomBarButtonClickEvent"] }] } });
 
@@ -1278,12 +1242,7 @@ class ColorPickerComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ColorPickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lf-color-picker', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        FormsModule,
-                        MatButtonModule,
-                        MatIconModule,
-                        MatTooltipModule
-                    ], template: "@if (!isSafari()) {\r\n  <input\r\n    style=\"opacity: 0; position: absolute; width: 0; height: 36px; border: none\"\r\n    #colorPicker\r\n    type=\"color\"\r\n    onclick=\"this.value = null\"\r\n    [ngModel]=\"selectedColor()\"\r\n    (ngModelChange)=\"selectColor($event)\" />\r\n\r\n  <button\r\n    mat-flat-button\r\n    class=\"lf-button\"\r\n    type=\"button\"\r\n    [color]=\"selectedColor() ? null : color()\"\r\n    [style.background]=\"selectedColor()\"\r\n    [style.color]=\"labelColor()\"\r\n    [disabled]=\"disabled()\"\r\n    (click)=\"colorPicker.click()\"\r\n    [matTooltip]=\"tooltip()\">\r\n    <!-- icon -->\r\n    @if (matIcon()) {\r\n      <mat-icon>\r\n        {{ matIcon() }}\r\n      </mat-icon>\r\n    }\r\n    <!-- @else if (svgIcon) {\r\n    <mat-icon [svgIcon]=\"svgIcon\"></mat-icon>\r\n  } -->\r\n    {{ label() }}\r\n  </button>\r\n} @else {\r\n  <input\r\n    style=\"width: 36px; height: 36px\"\r\n    #colorPicker\r\n    type=\"color\"\r\n    [ngModel]=\"selectedColor()\"\r\n    (ngModelChange)=\"selectColor($event)\" />\r\n}\r\n", styles: [".lf-button{width:inherit}\n"] }]
+            args: [{ selector: 'lf-color-picker', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [FormsModule, MatButtonModule, MatIconModule, MatTooltipModule], template: "@if (!isSafari()) {\r\n  <input\r\n    style=\"opacity: 0; position: absolute; width: 0; height: 36px; border: none\"\r\n    #colorPicker\r\n    type=\"color\"\r\n    onclick=\"this.value = null\"\r\n    [ngModel]=\"selectedColor()\"\r\n    (ngModelChange)=\"selectColor($event)\" />\r\n\r\n  <button\r\n    mat-flat-button\r\n    class=\"lf-button\"\r\n    type=\"button\"\r\n    [color]=\"selectedColor() ? null : color()\"\r\n    [style.background]=\"selectedColor()\"\r\n    [style.color]=\"labelColor()\"\r\n    [disabled]=\"disabled()\"\r\n    (click)=\"colorPicker.click()\"\r\n    [matTooltip]=\"tooltip()\">\r\n    <!-- icon -->\r\n    @if (matIcon()) {\r\n      <mat-icon>\r\n        {{ matIcon() }}\r\n      </mat-icon>\r\n    }\r\n    <!-- @else if (svgIcon) {\r\n    <mat-icon [svgIcon]=\"svgIcon\"></mat-icon>\r\n  } -->\r\n    {{ label() }}\r\n  </button>\r\n} @else {\r\n  <input\r\n    style=\"width: 36px; height: 36px\"\r\n    #colorPicker\r\n    type=\"color\"\r\n    [ngModel]=\"selectedColor()\"\r\n    (ngModelChange)=\"selectColor($event)\" />\r\n}\r\n", styles: [".lf-button{width:inherit}\n"] }]
         }], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], matIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "matIcon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], colorChangeEvent: [{ type: i0.Output, args: ["colorChangeEvent"] }] } });
 
 class FileUploadComponent {
@@ -1314,12 +1273,7 @@ class FileUploadComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FileUploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lf-file-upload', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        FormsModule,
-                        MatButtonModule,
-                        MatIconModule,
-                        MatTooltipModule
-                    ], template: "<input\r\n  hidden\r\n  #file\r\n  type=\"file\"\r\n  onclick=\"this.value = null\"\r\n  [accept]=\"accept()\"\r\n  (change)=\"selectFile($event)\" />\r\n\r\n<button\r\n  mat-flat-button\r\n  class=\"lf-button\"\r\n  type=\"button\"\r\n  [color]=\"color()\"\r\n  [disabled]=\"disabled()\"\r\n  (click)=\"file.click()\"\r\n  [matTooltip]=\"tooltip()\">\r\n  <!-- icon -->\r\n  @if (matIcon()) {\r\n    <mat-icon>\r\n      {{ matIcon() }}\r\n    </mat-icon>\r\n  }\r\n  <!-- @else if (svgIcon) {\r\n      <mat-icon [svgIcon]=\"svgIcon\"></mat-icon>\r\n    } -->\r\n  <!-- } -->\r\n  {{ label() }}\r\n  <!-- </span> -->\r\n</button>\r\n", styles: [".lf-button{width:inherit}.lf-button .lf-button-content{display:flex;align-items:center;justify-content:center}\n"] }]
+            args: [{ selector: 'lf-file-upload', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [FormsModule, MatButtonModule, MatIconModule, MatTooltipModule], template: "<input\r\n  hidden\r\n  #file\r\n  type=\"file\"\r\n  onclick=\"this.value = null\"\r\n  [accept]=\"accept()\"\r\n  (change)=\"selectFile($event)\" />\r\n\r\n<button\r\n  mat-flat-button\r\n  class=\"lf-button\"\r\n  type=\"button\"\r\n  [color]=\"color()\"\r\n  [disabled]=\"disabled()\"\r\n  (click)=\"file.click()\"\r\n  [matTooltip]=\"tooltip()\">\r\n  <!-- icon -->\r\n  @if (matIcon()) {\r\n    <mat-icon>\r\n      {{ matIcon() }}\r\n    </mat-icon>\r\n  }\r\n  <!-- @else if (svgIcon) {\r\n      <mat-icon [svgIcon]=\"svgIcon\"></mat-icon>\r\n    } -->\r\n  <!-- } -->\r\n  {{ label() }}\r\n  <!-- </span> -->\r\n</button>\r\n", styles: [".lf-button{width:inherit}.lf-button .lf-button-content{display:flex;align-items:center;justify-content:center}\n"] }]
         }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], matIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "matIcon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], fileChangeEvent: [{ type: i0.Output, args: ["fileChangeEvent"] }] } });
 
 class ListItemAvatarDirective {
@@ -1332,7 +1286,7 @@ class ListItemAvatarDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ListItemAvatarDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[lfListItemAvatar]'
+                    selector: '[lfListItemAvatar]',
                 }]
         }] });
 
@@ -1346,7 +1300,7 @@ class ListItemButtonsDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ListItemButtonsDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[lfListItemButtons]'
+                    selector: '[lfListItemButtons]',
                 }]
         }] });
 
@@ -1360,7 +1314,7 @@ class ListItemSubtitleDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ListItemSubtitleDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[lfListItemSubtitle]'
+                    selector: '[lfListItemSubtitle]',
                 }]
         }] });
 
@@ -1374,16 +1328,18 @@ class ListItemTitleDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ListItemTitleDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[lfListItemTitle]'
+                    selector: '[lfListItemTitle]',
                 }]
         }] });
 
 class ListComponent {
     get someSelected() {
-        return this.items().length > 0 && this.items().some((item) => item.checked) && !this.allSelected();
+        return (this.items().length > 0 &&
+            this.items().some((item) => item.checked) &&
+            !this.allSelected());
     }
     get hasAvatars() {
-        return !!this.items()?.some((item) => (item.avatar || item.matIcon || item.svgIcon));
+        return !!this.items()?.some((item) => item.avatar || item.matIcon || item.svgIcon);
     }
     constructor() {
         this.libraryConfig = inject(CONFIG, { optional: true });
@@ -1448,7 +1404,9 @@ class ListComponent {
     // Select single item
     selectItem(item, event) {
         if (this.config()?.disableMultiselect)
-            this.items().forEach((item) => { item.checked = false; });
+            this.items().forEach((item) => {
+                item.checked = false;
+            });
         this.allSelected.set(this.items().length > 0 && this.items().every((item) => item.checked));
         item.checked = event.checked;
         this.selectionChangeEvent.emit([item]);
@@ -1484,7 +1442,7 @@ class ListComponent {
         click.stopImmediatePropagation();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ListComponent, isStandalone: true, selector: "lf-list", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, groupedItems: { classPropertyName: "groupedItems", publicName: "groupedItems", isSignal: true, isRequired: false, transformFunction: null }, buttons: { classPropertyName: "buttons", publicName: "buttons", isSignal: true, isRequired: false, transformFunction: null }, dropListId: { classPropertyName: "dropListId", publicName: "dropListId", isSignal: true, isRequired: false, transformFunction: null }, connectedDropListIds: { classPropertyName: "connectedDropListIds", publicName: "connectedDropListIds", isSignal: true, isRequired: false, transformFunction: null }, allSelected: { classPropertyName: "allSelected", publicName: "allSelected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChangeEvent: "sortChangeEvent", selectionChangeEvent: "selectionChangeEvent", itemClickEvent: "itemClickEvent", itemDropEvent: "itemDropEvent", buttonClickEvent: "buttonClickEvent", allSelected: "allSelectedChange" }, queries: [{ propertyName: "avatarTemplate", first: true, predicate: ListItemAvatarDirective, descendants: true, isSignal: true }, { propertyName: "titleTemplate", first: true, predicate: ListItemTitleDirective, descendants: true, isSignal: true }, { propertyName: "subtitleTemplate", first: true, predicate: ListItemSubtitleDirective, descendants: true, isSignal: true }, { propertyName: "buttonsTemplate", first: true, predicate: ListItemButtonsDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"lf-list\" cdkDropListGroup>\r\n  <!-- Header -->\r\n  @if (header(); as header) {\r\n    <div\r\n      class=\"lf-list-item lf-list-item-header\"\r\n      [class.gap-2]=\"!isMobile()\"\r\n      [class.gap-1]=\"isMobile()\">\r\n      <!-- avatar -->\r\n      @if (header.avatar) {\r\n        <div class=\"lf-list-item-avatar px-1\">\r\n          <img [src]=\"header.avatar\" alt=\"Avatar of header\" (error)=\"onImageError($event)\" />\r\n        </div>\r\n      } @else if (header.matIcon || header.svgIcon) {\r\n        <div class=\"lf-list-item-avatar px-1\">\r\n          <!-- icon -->\r\n          @if (header.matIcon) {\r\n            <mat-icon>\r\n              {{ header.matIcon }}\r\n            </mat-icon>\r\n          } @else if (header.svgIcon) {\r\n            <mat-icon [svgIcon]=\"header.svgIcon\"></mat-icon>\r\n          }\r\n        </div>\r\n      } @else if (hasAvatars) {\r\n        <div class=\"lf-list-item-avatar px-1\"></div>\r\n      }\r\n\r\n      <!-- title -->\r\n      <div class=\"lf-list-item-title-wrapper flex-row\">\r\n        @for (item of header.items; track $index) {\r\n          <span [class.clickable]=\"item.sortToken\" (click)=\"updateSortToken(item.sortToken)\">\r\n            {{ item.title }}\r\n            @if (sortToken() === item.sortToken) {\r\n              <mat-icon class=\"lf-list-item-sort-icon\">\r\n                {{ sortAsc() ? \"arrow_downward\" : \"arrow_upward\" }}\r\n              </mat-icon>\r\n            }\r\n          </span>\r\n        }\r\n      </div>\r\n\r\n      <!-- buttons -->\r\n      <div class=\"lf-list-item-buttons\" [class.gap-2]=\"!isMobile()\" [class.gap-1]=\"isMobile()\">\r\n        @for (button of header.buttons; track button.id) {\r\n          @if (button.label) {\r\n            <button\r\n              mat-button\r\n              class=\"lf-list-item-button\"\r\n              [class.disabled]=\"button.disabled\"\r\n              [ngClass]=\"button.cssClass\"\r\n              [disabled]=\"button.disabled\"\r\n              [matTooltip]=\"button.tooltip\"\r\n              (click)=\"clickButton({ buttonId: button.id, item: null! }, $event)\">\r\n              <!-- icon -->\r\n              @if (button.matIcon) {\r\n                <mat-icon>\r\n                  {{ button.matIcon }}\r\n                </mat-icon>\r\n              } @else if (button.svgIcon) {\r\n                <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n              }\r\n              {{ button.label }}\r\n            </button>\r\n          } @else {\r\n            <button\r\n              mat-icon-button\r\n              class=\"lf-list-item-icon\"\r\n              [class.disabled]=\"button.disabled\"\r\n              [ngClass]=\"button.cssClass\"\r\n              [disabled]=\"button.disabled\"\r\n              [matTooltip]=\"button.tooltip\"\r\n              [aria-label]=\"button.id || button.tooltip\"\r\n              (click)=\"clickButton({ buttonId: button.id, item: null! }, $event)\">\r\n              <!-- icon -->\r\n              @if (button.matIcon) {\r\n                <mat-icon>\r\n                  {{ button.matIcon }}\r\n                </mat-icon>\r\n              } @else if (button.svgIcon) {\r\n                <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n              }\r\n            </button>\r\n          }\r\n        }\r\n      </div>\r\n\r\n      <!-- checkbox -->\r\n      @if (config()?.enableSelection && !config()?.disableMultiselect) {\r\n        <div class=\"lf-list-item-checkbox\">\r\n          <mat-checkbox\r\n            [(ngModel)]=\"allSelected\"\r\n            [indeterminate]=\"someSelected\"\r\n            (change)=\"selectAll($event)\"></mat-checkbox>\r\n        </div>\r\n      }\r\n    </div>\r\n    <mat-divider></mat-divider>\r\n  }\r\n\r\n  <!-- Grouped Items -->\r\n  @if (config()?.mode === \"group\" && groupedItems()) {\r\n    @for (group of groupedItems() | keyvalue; track group.key; let first = $first) {\r\n      <div class=\"lf-list-group\" [class.mt-4]=\"!first\">\r\n        @if (group.key) {\r\n          <div\r\n            class=\"lf-list-item lf-list-group-header\"\r\n            [class.gap-2]=\"!isMobile()\"\r\n            [class.gap-1]=\"isMobile()\">\r\n            <div class=\"lf-list-item-avatar px-1\"></div>\r\n            <div class=\"lf-list-item-title-wrapper flex-row\">\r\n              <span>{{ group.key }}</span>\r\n            </div>\r\n          </div>\r\n        }\r\n        <div\r\n          [id]=\"group.key\"\r\n          cdkDropList\r\n          [cdkDropListData]=\"group.value\"\r\n          [cdkDropListDisabled]=\"!config()?.enableDragging\"\r\n          [cdkDropListConnectedTo]=\"connectedDropListIds()!\"\r\n          (cdkDropListDropped)=\"dropItem($event, group.key)\"\r\n          [class.drop-zone]=\"config()?.enableDragging && group.value.length <= 0\">\r\n          @for (item of group.value; track item.id; let last = $last) {\r\n            <div\r\n              cdkDrag\r\n              [cdkDragData]=\"item\"\r\n              [cdkDragDisabled]=\"item.disabled || !config()?.enableDragging\">\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"listItemTemplate\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: item, last: last }\"></ng-container>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n    <!-- Flat Items -->\r\n  } @else {\r\n    <div\r\n      [id]=\"dropListId()!\"\r\n      cdkDropList\r\n      [cdkDropListData]=\"items()\"\r\n      [cdkDropListDisabled]=\"!config()?.enableDragging\"\r\n      [cdkDropListConnectedTo]=\"connectedDropListIds()!\"\r\n      (cdkDropListDropped)=\"dropItem($event, dropListId()!)\"\r\n      [class.drop-zone]=\"config()?.enableDragging && items().length <= 0\">\r\n      @for (item of items(); track item.id; let last = $last) {\r\n        <div\r\n          cdkDrag\r\n          [cdkDragData]=\"item\"\r\n          [cdkDragDisabled]=\"item.disabled || !config()?.enableDragging\">\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"listItemTemplate\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: item, last: last }\"></ng-container>\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <!-- Item (template) -->\r\n  <ng-template #listItemTemplate let-item let-last=\"last\">\r\n    <div\r\n      class=\"lf-list-item lf-list-item-data\"\r\n      [class.gap-2]=\"!isMobile()\"\r\n      [class.gap-1]=\"isMobile()\"\r\n      [class.active]=\"item.checked\"\r\n      [class.disabled]=\"item.disabled\"\r\n      [class.clickable]=\"item.clickable && !item.disabled\"\r\n      [ngClass]=\"item.cssClass\"\r\n      matRipple\r\n      [matRippleDisabled]=\"!item.clickable\"\r\n      (click)=\"item.clickable && !item.disabled ? clickItem(item, $event) : null\">\r\n      <!-- avatar -->\r\n      @if (avatarTemplate()) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"avatarTemplate()!.templateRef\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n      } @else if (item.avatar) {\r\n        <div class=\"lf-list-item-avatar px-1\">\r\n          <img\r\n            [src]=\"item.avatar\"\r\n            [alt]=\"'Avatar of ' + item.title\"\r\n            (error)=\"onImageError($event)\" />\r\n        </div>\r\n      } @else if (item.matIcon || item.svgIcon) {\r\n        <div class=\"lf-list-item-avatar px-1\">\r\n          <!-- icon -->\r\n          @if (item.matIcon) {\r\n            <mat-icon>\r\n              {{ item.matIcon }}\r\n            </mat-icon>\r\n          } @else if (item.svgIcon) {\r\n            <mat-icon [svgIcon]=\"item.svgIcon\"></mat-icon>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      <!-- title -->\r\n      <div class=\"lf-list-item-title-wrapper\">\r\n        <span class=\"lf-list-item-title\">\r\n          @if (titleTemplate()) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"titleTemplate()!.templateRef\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n          } @else {\r\n            {{ item.title }}\r\n          }\r\n        </span>\r\n        @if (item.subtitle || subtitleTemplate()) {\r\n          <span class=\"lf-list-item-subtitle\">\r\n            @if (subtitleTemplate()) {\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"subtitleTemplate()!.templateRef\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n            } @else {\r\n              {{ item.subtitle }}\r\n            }\r\n          </span>\r\n        }\r\n      </div>\r\n\r\n      <!-- buttons -->\r\n      <div class=\"lf-list-item-buttons\" [class.gap-2]=\"!isMobile()\" [class.gap-1]=\"isMobile()\">\r\n        @if (buttonsTemplate()) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"buttonsTemplate()!.templateRef\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n        } @else {\r\n          @let combinedButtons = getCombinedButtons(item);\r\n          @for (button of combinedButtons; track button.id) {\r\n            @if (!item.hiddenButtonIds?.includes(button.id)) {\r\n              @let disabled =\r\n                button.disabled || item.disabled || item.disabledButtonIds?.includes(button.id);\r\n              @if (button.label) {\r\n                <button\r\n                  mat-button\r\n                  class=\"lf-list-item-button\"\r\n                  [class.disabled]=\"disabled\"\r\n                  [ngClass]=\"button.cssClass\"\r\n                  [disabled]=\"disabled\"\r\n                  [matTooltip]=\"button.tooltip\"\r\n                  (click)=\"clickButton({ buttonId: button.id, item }, $event)\">\r\n                  <!-- icon -->\r\n                  @if (button.matIcon) {\r\n                    <mat-icon>\r\n                      {{ button.matIcon }}\r\n                    </mat-icon>\r\n                  } @else if (button.svgIcon) {\r\n                    <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n                  }\r\n                  {{ button.label }}\r\n                </button>\r\n              } @else {\r\n                <button\r\n                  mat-icon-button\r\n                  class=\"lf-list-item-icon\"\r\n                  [class.disabled]=\"disabled\"\r\n                  [ngClass]=\"button.cssClass\"\r\n                  [disabled]=\"disabled\"\r\n                  [matTooltip]=\"button.tooltip\"\r\n                  [aria-label]=\"button.id || button.tooltip\"\r\n                  (click)=\"clickButton({ buttonId: button.id, item }, $event)\">\r\n                  <!-- icon -->\r\n                  @if (button.matIcon) {\r\n                    <mat-icon>\r\n                      {{ button.matIcon }}\r\n                    </mat-icon>\r\n                  } @else if (button.svgIcon) {\r\n                    <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n                  }\r\n                </button>\r\n              }\r\n            }\r\n          }\r\n        }\r\n\r\n        <!-- drag -->\r\n        @if (config()?.enableDragging) {\r\n          <button\r\n            mat-icon-button\r\n            class=\"lf-list-item-icon\"\r\n            [class.disabled]=\"item.disabled\"\r\n            [disabled]=\"item.disabled\"\r\n            [aria-label]=\"'Drag handle'\"\r\n            (click)=\"stopPropagation($event)\"\r\n            cdkDragHandle>\r\n            <mat-icon>drag_indicator</mat-icon>\r\n          </button>\r\n        }\r\n      </div>\r\n\r\n      <!-- checkbox -->\r\n      @if (config()?.enableSelection) {\r\n        <div class=\"lf-list-item-checkbox\">\r\n          <mat-checkbox\r\n            [(ngModel)]=\"item.checked\"\r\n            [disabled]=\"item.disabled!\"\r\n            (change)=\"selectItem(item, $event)\"\r\n            (click)=\"stopPropagation($event)\"></mat-checkbox>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    @if (config()?.showDividers && !last) {\r\n      <mat-divider></mat-divider>\r\n    }\r\n  </ng-template>\r\n</div>\r\n", styles: [".lf-list,.lf-list .lf-list-group{width:100%}.lf-list .lf-list-group .lf-list-group-header{font-weight:500;height:calc(var(--list-item-height) - 16px)}.lf-list-item{width:100%;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;height:var(--list-item-height);border-radius:var(--list-item-border-radius);box-sizing:border-box;overflow:hidden}.lf-list-item.disabled .lf-list-item-title-wrapper{opacity:.64}.lf-list-item .lf-list-item-sort-icon{font-size:var(--list-item-sort-icon-size);width:var(--list-item-sort-icon-size);height:var(--list-item-sort-icon-size);vertical-align:text-top}.lf-list-item .lf-list-item-checkbox{flex:0 0 var(--list-item-checkbox-width)}.lf-list-item .lf-list-item-avatar{flex:0 0 var(--list-item-avatar-size);display:flex;align-items:center;justify-content:center}.lf-list-item .lf-list-item-avatar img{width:var(--list-item-avatar-size);height:var(--list-item-avatar-size);border-radius:50%;object-fit:cover}.lf-list-item .lf-list-item-title-wrapper{display:flex;flex-flow:column;align-items:flex-start;flex:1 1 var(--list-item-title-width);overflow:hidden}.lf-list-item .lf-list-item-title-wrapper .lf-list-item-title{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.lf-list-item .lf-list-item-title-wrapper .lf-list-item-subtitle{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.8rem}.lf-list-item .lf-list-item-buttons{flex:0 0 auto;display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between}.lf-list-item.lf-list-item-header{font-weight:500}.lf-list-item.lf-list-item-header .lf-list-item-title-wrapper span{width:var(--list-item-title-wrapper-width)}.lf-list-item.lf-list-item-data:hover{background-color:#00000014}.lf-list-item .flex-row{display:flex!important;flex-flow:row nowrap;align-items:center}.drop-zone{width:100%;height:var(--list-item-height);border:2px dashed var(--color-gray);border-radius:var(--list-item-border-radius);box-sizing:border-box}.clickable{cursor:pointer!important}.cdk-drag-preview{color:var(--mat-app-text-color, inherit)!important;background:var(--mat-app-background-color, inherit)!important;box-sizing:border-box;border-radius:var(--list-item-border-radius);opacity:.8;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.4}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$3.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i2$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4.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: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i5.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i8.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ListComponent, isStandalone: true, selector: "lf-list", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, groupedItems: { classPropertyName: "groupedItems", publicName: "groupedItems", isSignal: true, isRequired: false, transformFunction: null }, buttons: { classPropertyName: "buttons", publicName: "buttons", isSignal: true, isRequired: false, transformFunction: null }, dropListId: { classPropertyName: "dropListId", publicName: "dropListId", isSignal: true, isRequired: false, transformFunction: null }, connectedDropListIds: { classPropertyName: "connectedDropListIds", publicName: "connectedDropListIds", isSignal: true, isRequired: false, transformFunction: null }, allSelected: { classPropertyName: "allSelected", publicName: "allSelected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChangeEvent: "sortChangeEvent", selectionChangeEvent: "selectionChangeEvent", itemClickEvent: "itemClickEvent", itemDropEvent: "itemDropEvent", buttonClickEvent: "buttonClickEvent", allSelected: "allSelectedChange" }, queries: [{ propertyName: "avatarTemplate", first: true, predicate: ListItemAvatarDirective, descendants: true, isSignal: true }, { propertyName: "titleTemplate", first: true, predicate: ListItemTitleDirective, descendants: true, isSignal: true }, { propertyName: "subtitleTemplate", first: true, predicate: ListItemSubtitleDirective, descendants: true, isSignal: true }, { propertyName: "buttonsTemplate", first: true, predicate: ListItemButtonsDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"lf-list\" cdkDropListGroup>\r\n  <!-- Header -->\r\n  @if (header(); as header) {\r\n    <div\r\n      class=\"lf-list-item lf-list-item-header\"\r\n      [class.gap-2]=\"!isMobile()\"\r\n      [class.gap-1]=\"isMobile()\">\r\n      <!-- avatar -->\r\n      @if (header.avatar) {\r\n        <div class=\"lf-list-item-avatar px-1\">\r\n          <img [src]=\"header.avatar\" alt=\"Avatar of header\" (error)=\"onImageError($event)\" />\r\n        </div>\r\n      } @else if (header.matIcon || header.svgIcon) {\r\n        <div class=\"lf-list-item-avatar px-1\">\r\n          <!-- icon -->\r\n          @if (header.matIcon) {\r\n            <mat-icon>\r\n              {{ header.matIcon }}\r\n            </mat-icon>\r\n          } @else if (header.svgIcon) {\r\n            <mat-icon [svgIcon]=\"header.svgIcon\"></mat-icon>\r\n          }\r\n        </div>\r\n      } @else if (hasAvatars) {\r\n        <div class=\"lf-list-item-avatar px-1\"></div>\r\n      }\r\n\r\n      <!-- title -->\r\n      <div class=\"lf-list-item-title-wrapper flex-row\">\r\n        @for (item of header.items; track $index) {\r\n          <span [class.clickable]=\"item.sortToken\" (click)=\"updateSortToken(item.sortToken)\">\r\n            {{ item.title }}\r\n            @if (sortToken() === item.sortToken) {\r\n              <mat-icon class=\"lf-list-item-sort-icon\">\r\n                {{ sortAsc() ? 'arrow_downward' : 'arrow_upward' }}\r\n              </mat-icon>\r\n            }\r\n          </span>\r\n        }\r\n      </div>\r\n\r\n      <!-- buttons -->\r\n      <div class=\"lf-list-item-buttons\" [class.gap-2]=\"!isMobile()\" [class.gap-1]=\"isMobile()\">\r\n        @for (button of header.buttons; track button.id) {\r\n          @if (button.label) {\r\n            <button\r\n              mat-button\r\n              class=\"lf-list-item-button\"\r\n              [class.disabled]=\"button.disabled\"\r\n              [ngClass]=\"button.cssClass\"\r\n              [disabled]=\"button.disabled\"\r\n              [matTooltip]=\"button.tooltip\"\r\n              (click)=\"clickButton({ buttonId: button.id, item: null! }, $event)\">\r\n              <!-- icon -->\r\n              @if (button.matIcon) {\r\n                <mat-icon>\r\n                  {{ button.matIcon }}\r\n                </mat-icon>\r\n              } @else if (button.svgIcon) {\r\n                <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n              }\r\n              {{ button.label }}\r\n            </button>\r\n          } @else {\r\n            <button\r\n              mat-icon-button\r\n              class=\"lf-list-item-icon\"\r\n              [class.disabled]=\"button.disabled\"\r\n              [ngClass]=\"button.cssClass\"\r\n              [disabled]=\"button.disabled\"\r\n              [matTooltip]=\"button.tooltip\"\r\n              [aria-label]=\"button.id || button.tooltip\"\r\n              (click)=\"clickButton({ buttonId: button.id, item: null! }, $event)\">\r\n              <!-- icon -->\r\n              @if (button.matIcon) {\r\n                <mat-icon>\r\n                  {{ button.matIcon }}\r\n                </mat-icon>\r\n              } @else if (button.svgIcon) {\r\n                <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n              }\r\n            </button>\r\n          }\r\n        }\r\n      </div>\r\n\r\n      <!-- checkbox -->\r\n      @if (config()?.enableSelection && !config()?.disableMultiselect) {\r\n        <div class=\"lf-list-item-checkbox\">\r\n          <mat-checkbox\r\n            [(ngModel)]=\"allSelected\"\r\n            [indeterminate]=\"someSelected\"\r\n            (change)=\"selectAll($event)\"></mat-checkbox>\r\n        </div>\r\n      }\r\n    </div>\r\n    <mat-divider></mat-divider>\r\n  }\r\n\r\n  <!-- Grouped Items -->\r\n  @if (config()?.mode === 'group' && groupedItems()) {\r\n    @for (group of groupedItems() | keyvalue; track group.key; let first = $first) {\r\n      <div class=\"lf-list-group\" [class.mt-4]=\"!first\">\r\n        @if (group.key) {\r\n          <div\r\n            class=\"lf-list-item lf-list-group-header\"\r\n            [class.gap-2]=\"!isMobile()\"\r\n            [class.gap-1]=\"isMobile()\">\r\n            <div class=\"lf-list-item-avatar px-1\"></div>\r\n            <div class=\"lf-list-item-title-wrapper flex-row\">\r\n              <span>{{ group.key }}</span>\r\n            </div>\r\n          </div>\r\n        }\r\n        <div\r\n          [id]=\"group.key\"\r\n          cdkDropList\r\n          [cdkDropListData]=\"group.value\"\r\n          [cdkDropListDisabled]=\"!config()?.enableDragging\"\r\n          [cdkDropListConnectedTo]=\"connectedDropListIds()!\"\r\n          (cdkDropListDropped)=\"dropItem($event, group.key)\"\r\n          [class.drop-zone]=\"config()?.enableDragging && group.value.length <= 0\">\r\n          @for (item of group.value; track item.id; let last = $last) {\r\n            <div\r\n              cdkDrag\r\n              [cdkDragData]=\"item\"\r\n              [cdkDragDisabled]=\"item.disabled || !config()?.enableDragging\">\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"listItemTemplate\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: item, last: last }\"></ng-container>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n    <!-- Flat Items -->\r\n  } @else {\r\n    <div\r\n      [id]=\"dropListId()!\"\r\n      cdkDropList\r\n      [cdkDropListData]=\"items()\"\r\n      [cdkDropListDisabled]=\"!config()?.enableDragging\"\r\n      [cdkDropListConnectedTo]=\"connectedDropListIds()!\"\r\n      (cdkDropListDropped)=\"dropItem($event, dropListId()!)\"\r\n      [class.drop-zone]=\"config()?.enableDragging && items().length <= 0\">\r\n      @for (item of items(); track item.id; let last = $last) {\r\n        <div\r\n          cdkDrag\r\n          [cdkDragData]=\"item\"\r\n          [cdkDragDisabled]=\"item.disabled || !config()?.enableDragging\">\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"listItemTemplate\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: item, last: last }\"></ng-container>\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <!-- Item (template) -->\r\n  <ng-template #listItemTemplate let-item let-last=\"last\">\r\n    <div\r\n      class=\"lf-list-item lf-list-item-data\"\r\n      [class.gap-2]=\"!isMobile()\"\r\n      [class.gap-1]=\"isMobile()\"\r\n      [class.active]=\"item.checked\"\r\n      [class.disabled]=\"item.disabled\"\r\n      [class.clickable]=\"item.clickable && !item.disabled\"\r\n      [ngClass]=\"item.cssClass\"\r\n      matRipple\r\n      [matRippleDisabled]=\"!item.clickable\"\r\n      (click)=\"item.clickable && !item.disabled ? clickItem(item, $event) : null\">\r\n      <!-- avatar -->\r\n      @if (avatarTemplate()) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"avatarTemplate()!.templateRef\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n      } @else if (item.avatar) {\r\n        <div class=\"lf-list-item-avatar px-1\">\r\n          <img\r\n            [src]=\"item.avatar\"\r\n            [alt]=\"'Avatar of ' + item.title\"\r\n            (error)=\"onImageError($event)\" />\r\n        </div>\r\n      } @else if (item.matIcon || item.svgIcon) {\r\n        <div class=\"lf-list-item-avatar px-1\">\r\n          <!-- icon -->\r\n          @if (item.matIcon) {\r\n            <mat-icon>\r\n              {{ item.matIcon }}\r\n            </mat-icon>\r\n          } @else if (item.svgIcon) {\r\n            <mat-icon [svgIcon]=\"item.svgIcon\"></mat-icon>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      <!-- title -->\r\n      <div class=\"lf-list-item-title-wrapper\">\r\n        <span class=\"lf-list-item-title\">\r\n          @if (titleTemplate()) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"titleTemplate()!.templateRef\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n          } @else {\r\n            {{ item.title }}\r\n          }\r\n        </span>\r\n        @if (item.subtitle || subtitleTemplate()) {\r\n          <span class=\"lf-list-item-subtitle\">\r\n            @if (subtitleTemplate()) {\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"subtitleTemplate()!.templateRef\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n            } @else {\r\n              {{ item.subtitle }}\r\n            }\r\n          </span>\r\n        }\r\n      </div>\r\n\r\n      <!-- buttons -->\r\n      <div class=\"lf-list-item-buttons\" [class.gap-2]=\"!isMobile()\" [class.gap-1]=\"isMobile()\">\r\n        @if (buttonsTemplate()) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"buttonsTemplate()!.templateRef\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n        } @else {\r\n          @let combinedButtons = getCombinedButtons(item);\r\n          @for (button of combinedButtons; track button.id) {\r\n            @if (!item.hiddenButtonIds?.includes(button.id)) {\r\n              @let disabled =\r\n                button.disabled || item.disabled || item.disabledButtonIds?.includes(button.id);\r\n              @if (button.label) {\r\n                <button\r\n                  mat-button\r\n                  class=\"lf-list-item-button\"\r\n                  [class.disabled]=\"disabled\"\r\n                  [ngClass]=\"button.cssClass\"\r\n                  [disabled]=\"disabled\"\r\n                  [matTooltip]=\"button.tooltip\"\r\n                  (click)=\"clickButton({ buttonId: button.id, item }, $event)\">\r\n                  <!-- icon -->\r\n                  @if (button.matIcon) {\r\n                    <mat-icon>\r\n                      {{ button.matIcon }}\r\n                    </mat-icon>\r\n                  } @else if (button.svgIcon) {\r\n                    <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n                  }\r\n                  {{ button.label }}\r\n                </button>\r\n              } @else {\r\n                <button\r\n                  mat-icon-button\r\n                  class=\"lf-list-item-icon\"\r\n                  [class.disabled]=\"disabled\"\r\n                  [ngClass]=\"button.cssClass\"\r\n                  [disabled]=\"disabled\"\r\n                  [matTooltip]=\"button.tooltip\"\r\n                  [aria-label]=\"button.id || button.tooltip\"\r\n                  (click)=\"clickButton({ buttonId: button.id, item }, $event)\">\r\n                  <!-- icon -->\r\n                  @if (button.matIcon) {\r\n                    <mat-icon>\r\n                      {{ button.matIcon }}\r\n                    </mat-icon>\r\n                  } @else if (button.svgIcon) {\r\n                    <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n                  }\r\n                </button>\r\n              }\r\n            }\r\n          }\r\n        }\r\n\r\n        <!-- drag -->\r\n        @if (config()?.enableDragging) {\r\n          <button\r\n            mat-icon-button\r\n            class=\"lf-list-item-icon\"\r\n            [class.disabled]=\"item.disabled\"\r\n            [disabled]=\"item.disabled\"\r\n            [aria-label]=\"'Drag handle'\"\r\n            (click)=\"stopPropagation($event)\"\r\n            cdkDragHandle>\r\n            <mat-icon>drag_indicator</mat-icon>\r\n          </button>\r\n        }\r\n      </div>\r\n\r\n      <!-- checkbox -->\r\n      @if (config()?.enableSelection) {\r\n        <div class=\"lf-list-item-checkbox\">\r\n          <mat-checkbox\r\n            [(ngModel)]=\"item.checked\"\r\n            [disabled]=\"item.disabled!\"\r\n            (change)=\"selectItem(item, $event)\"\r\n            (click)=\"stopPropagation($event)\"></mat-checkbox>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    @if (config()?.showDividers && !last) {\r\n      <mat-divider></mat-divider>\r\n    }\r\n  </ng-template>\r\n</div>\r\n", styles: [".lf-list,.lf-list .lf-list-group{width:100%}.lf-list .lf-list-group .lf-list-group-header{font-weight:500;height:calc(var(--list-item-height) - 16px)}.lf-list-item{width:100%;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;height:var(--list-item-height);border-radius:var(--list-item-border-radius);box-sizing:border-box;overflow:hidden}.lf-list-item.disabled .lf-list-item-title-wrapper{opacity:.64}.lf-list-item .lf-list-item-sort-icon{font-size:var(--list-item-sort-icon-size);width:var(--list-item-sort-icon-size);height:var(--list-item-sort-icon-size);vertical-align:text-top}.lf-list-item .lf-list-item-checkbox{flex:0 0 var(--list-item-checkbox-width)}.lf-list-item .lf-list-item-avatar{flex:0 0 var(--list-item-avatar-size);display:flex;align-items:center;justify-content:center}.lf-list-item .lf-list-item-avatar img{width:var(--list-item-avatar-size);height:var(--list-item-avatar-size);border-radius:50%;object-fit:cover}.lf-list-item .lf-list-item-title-wrapper{display:flex;flex-flow:column;align-items:flex-start;flex:1 1 var(--list-item-title-width);overflow:hidden}.lf-list-item .lf-list-item-title-wrapper .lf-list-item-title{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.lf-list-item .lf-list-item-title-wrapper .lf-list-item-subtitle{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.8rem}.lf-list-item .lf-list-item-buttons{flex:0 0 auto;display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between}.lf-list-item.lf-list-item-header{font-weight:500}.lf-list-item.lf-list-item-header .lf-list-item-title-wrapper span{width:var(--list-item-title-wrapper-width)}.lf-list-item.lf-list-item-data:hover{background-color:#00000014}.lf-list-item .flex-row{display:flex!important;flex-flow:row nowrap;align-items:center}.drop-zone{width:100%;height:var(--list-item-height);border:2px dashed var(--color-gray);border-radius:var(--list-item-border-radius);box-sizing:border-box}.clickable{cursor:pointer!important}.cdk-drag-preview{color:var(--mat-app-text-color, inherit)!important;background:var(--mat-app-background-color, inherit)!important;box-sizing:border-box;border-radius:var(--list-item-border-radius);opacity:.8;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.4}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$3.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i2$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4.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: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i5.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i8.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,
@@ -1499,8 +1457,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                         MatDividerModule,
                         KeyValuePipe,
                         NgClass,
-                        NgTemplateOutlet
-                    ], template: "<div class=\"lf-list\" cdkDropListGroup>\r\n  <!-- Header -->\r\n  @if (header(); as header) {\r\n    <div\r\n      class=\"lf-list-item lf-list-item-header\"\r\n      [class.gap-2]=\"!isMobile()\"\r\n      [class.gap-1]=\"isMobile()\">\r\n      <!-- avatar -->\r\n      @if (header.avatar) {\r\n        <div class=\"lf-list-item-avatar px-1\">\r\n          <img [src]=\"header.avatar\" alt=\"Avatar of header\" (error)=\"onImageError($event)\" />\r\n        </div>\r\n      } @else if (header.matIcon || header.svgIcon) {\r\n        <div class=\"lf-list-item-avatar px-1\">\r\n          <!-- icon -->\r\n          @if (header.matIcon) {\r\n            <mat-icon>\r\n              {{ header.matIcon }}\r\n            </mat-icon>\r\n          } @else if (header.svgIcon) {\r\n            <mat-icon [svgIcon]=\"header.svgIcon\"></mat-icon>\r\n          }\r\n        </div>\r\n      } @else if (hasAvatars) {\r\n        <div class=\"lf-list-item-avatar px-1\"></div>\r\n      }\r\n\r\n      <!-- title -->\r\n      <div class=\"lf-list-item-title-wrapper flex-row\">\r\n        @for (item of header.items; track $index) {\r\n          <span [class.clickable]=\"item.sortToken\" (click)=\"updateSortToken(item.sortToken)\">\r\n            {{ item.title }}\r\n            @if (sortToken() === item.sortToken) {\r\n              <mat-icon class=\"lf-list-item-sort-icon\">\r\n                {{ sortAsc() ? \"arrow_downward\" : \"arrow_upward\" }}\r\n              </mat-icon>\r\n            }\r\n          </span>\r\n        }\r\n      </div>\r\n\r\n      <!-- buttons -->\r\n      <div class=\"lf-list-item-buttons\" [class.gap-2]=\"!isMobile()\" [class.gap-1]=\"isMobile()\">\r\n        @for (button of header.buttons; track button.id) {\r\n          @if (button.label) {\r\n            <button\r\n              mat-button\r\n              class=\"lf-list-item-button\"\r\n              [class.disabled]=\"button.disabled\"\r\n              [ngClass]=\"button.cssClass\"\r\n              [disabled]=\"button.disabled\"\r\n              [matTooltip]=\"button.tooltip\"\r\n              (click)=\"clickButton({ buttonId: button.id, item: null! }, $event)\">\r\n              <!-- icon -->\r\n              @if (button.matIcon) {\r\n                <mat-icon>\r\n                  {{ button.matIcon }}\r\n                </mat-icon>\r\n              } @else if (button.svgIcon) {\r\n                <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n              }\r\n              {{ button.label }}\r\n            </button>\r\n          } @else {\r\n            <button\r\n              mat-icon-button\r\n              class=\"lf-list-item-icon\"\r\n              [class.disabled]=\"button.disabled\"\r\n              [ngClass]=\"button.cssClass\"\r\n              [disabled]=\"button.disabled\"\r\n              [matTooltip]=\"button.tooltip\"\r\n              [aria-label]=\"button.id || button.tooltip\"\r\n              (click)=\"clickButton({ buttonId: button.id, item: null! }, $event)\">\r\n              <!-- icon -->\r\n              @if (button.matIcon) {\r\n                <mat-icon>\r\n                  {{ button.matIcon }}\r\n                </mat-icon>\r\n              } @else if (button.svgIcon) {\r\n                <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n              }\r\n            </button>\r\n          }\r\n        }\r\n      </div>\r\n\r\n      <!-- checkbox -->\r\n      @if (config()?.enableSelection && !config()?.disableMultiselect) {\r\n        <div class=\"lf-list-item-checkbox\">\r\n          <mat-checkbox\r\n            [(ngModel)]=\"allSelected\"\r\n            [indeterminate]=\"someSelected\"\r\n            (change)=\"selectAll($event)\"></mat-checkbox>\r\n        </div>\r\n      }\r\n    </div>\r\n    <mat-divider></mat-divider>\r\n  }\r\n\r\n  <!-- Grouped Items -->\r\n  @if (config()?.mode === \"group\" && groupedItems()) {\r\n    @for (group of groupedItems() | keyvalue; track group.key; let first = $first) {\r\n      <div class=\"lf-list-group\" [class.mt-4]=\"!first\">\r\n        @if (group.key) {\r\n          <div\r\n            class=\"lf-list-item lf-list-group-header\"\r\n            [class.gap-2]=\"!isMobile()\"\r\n            [class.gap-1]=\"isMobile()\">\r\n            <div class=\"lf-list-item-avatar px-1\"></div>\r\n            <div class=\"lf-list-item-title-wrapper flex-row\">\r\n              <span>{{ group.key }}</span>\r\n            </div>\r\n          </div>\r\n        }\r\n        <div\r\n          [id]=\"group.key\"\r\n          cdkDropList\r\n          [cdkDropListData]=\"group.value\"\r\n          [cdkDropListDisabled]=\"!config()?.enableDragging\"\r\n          [cdkDropListConnectedTo]=\"connectedDropListIds()!\"\r\n          (cdkDropListDropped)=\"dropItem($event, group.key)\"\r\n          [class.drop-zone]=\"config()?.enableDragging && group.value.length <= 0\">\r\n          @for (item of group.value; track item.id; let last = $last) {\r\n            <div\r\n              cdkDrag\r\n              [cdkDragData]=\"item\"\r\n              [cdkDragDisabled]=\"item.disabled || !config()?.enableDragging\">\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"listItemTemplate\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: item, last: last }\"></ng-container>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n    <!-- Flat Items -->\r\n  } @else {\r\n    <div\r\n      [id]=\"dropListId()!\"\r\n      cdkDropList\r\n      [cdkDropListData]=\"items()\"\r\n      [cdkDropListDisabled]=\"!config()?.enableDragging\"\r\n      [cdkDropListConnectedTo]=\"connectedDropListIds()!\"\r\n      (cdkDropListDropped)=\"dropItem($event, dropListId()!)\"\r\n      [class.drop-zone]=\"config()?.enableDragging && items().length <= 0\">\r\n      @for (item of items(); track item.id; let last = $last) {\r\n        <div\r\n          cdkDrag\r\n          [cdkDragData]=\"item\"\r\n          [cdkDragDisabled]=\"item.disabled || !config()?.enableDragging\">\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"listItemTemplate\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: item, last: last }\"></ng-container>\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <!-- Item (template) -->\r\n  <ng-template #listItemTemplate let-item let-last=\"last\">\r\n    <div\r\n      class=\"lf-list-item lf-list-item-data\"\r\n      [class.gap-2]=\"!isMobile()\"\r\n      [class.gap-1]=\"isMobile()\"\r\n      [class.active]=\"item.checked\"\r\n      [class.disabled]=\"item.disabled\"\r\n      [class.clickable]=\"item.clickable && !item.disabled\"\r\n      [ngClass]=\"item.cssClass\"\r\n      matRipple\r\n      [matRippleDisabled]=\"!item.clickable\"\r\n      (click)=\"item.clickable && !item.disabled ? clickItem(item, $event) : null\">\r\n      <!-- avatar -->\r\n      @if (avatarTemplate()) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"avatarTemplate()!.templateRef\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n      } @else if (item.avatar) {\r\n        <div class=\"lf-list-item-avatar px-1\">\r\n          <img\r\n            [src]=\"item.avatar\"\r\n            [alt]=\"'Avatar of ' + item.title\"\r\n            (error)=\"onImageError($event)\" />\r\n        </div>\r\n      } @else if (item.matIcon || item.svgIcon) {\r\n        <div class=\"lf-list-item-avatar px-1\">\r\n          <!-- icon -->\r\n          @if (item.matIcon) {\r\n            <mat-icon>\r\n              {{ item.matIcon }}\r\n            </mat-icon>\r\n          } @else if (item.svgIcon) {\r\n            <mat-icon [svgIcon]=\"item.svgIcon\"></mat-icon>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      <!-- title -->\r\n      <div class=\"lf-list-item-title-wrapper\">\r\n        <span class=\"lf-list-item-title\">\r\n          @if (titleTemplate()) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"titleTemplate()!.templateRef\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n          } @else {\r\n            {{ item.title }}\r\n          }\r\n        </span>\r\n        @if (item.subtitle || subtitleTemplate()) {\r\n          <span class=\"lf-list-item-subtitle\">\r\n            @if (subtitleTemplate()) {\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"subtitleTemplate()!.templateRef\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n            } @else {\r\n              {{ item.subtitle }}\r\n            }\r\n          </span>\r\n        }\r\n      </div>\r\n\r\n      <!-- buttons -->\r\n      <div class=\"lf-list-item-buttons\" [class.gap-2]=\"!isMobile()\" [class.gap-1]=\"isMobile()\">\r\n        @if (buttonsTemplate()) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"buttonsTemplate()!.templateRef\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n        } @else {\r\n          @let combinedButtons = getCombinedButtons(item);\r\n          @for (button of combinedButtons; track button.id) {\r\n            @if (!item.hiddenButtonIds?.includes(button.id)) {\r\n              @let disabled =\r\n                button.disabled || item.disabled || item.disabledButtonIds?.includes(button.id);\r\n              @if (button.label) {\r\n                <button\r\n                  mat-button\r\n                  class=\"lf-list-item-button\"\r\n                  [class.disabled]=\"disabled\"\r\n                  [ngClass]=\"button.cssClass\"\r\n                  [disabled]=\"disabled\"\r\n                  [matTooltip]=\"button.tooltip\"\r\n                  (click)=\"clickButton({ buttonId: button.id, item }, $event)\">\r\n                  <!-- icon -->\r\n                  @if (button.matIcon) {\r\n                    <mat-icon>\r\n                      {{ button.matIcon }}\r\n                    </mat-icon>\r\n                  } @else if (button.svgIcon) {\r\n                    <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n                  }\r\n                  {{ button.label }}\r\n                </button>\r\n              } @else {\r\n                <button\r\n                  mat-icon-button\r\n                  class=\"lf-list-item-icon\"\r\n                  [class.disabled]=\"disabled\"\r\n                  [ngClass]=\"button.cssClass\"\r\n                  [disabled]=\"disabled\"\r\n                  [matTooltip]=\"button.tooltip\"\r\n                  [aria-label]=\"button.id || button.tooltip\"\r\n                  (click)=\"clickButton({ buttonId: button.id, item }, $event)\">\r\n                  <!-- icon -->\r\n                  @if (button.matIcon) {\r\n                    <mat-icon>\r\n                      {{ button.matIcon }}\r\n                    </mat-icon>\r\n                  } @else if (button.svgIcon) {\r\n                    <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n                  }\r\n                </button>\r\n              }\r\n            }\r\n          }\r\n        }\r\n\r\n        <!-- drag -->\r\n        @if (config()?.enableDragging) {\r\n          <button\r\n            mat-icon-button\r\n            class=\"lf-list-item-icon\"\r\n            [class.disabled]=\"item.disabled\"\r\n            [disabled]=\"item.disabled\"\r\n            [aria-label]=\"'Drag handle'\"\r\n            (click)=\"stopPropagation($event)\"\r\n            cdkDragHandle>\r\n            <mat-icon>drag_indicator</mat-icon>\r\n          </button>\r\n        }\r\n      </div>\r\n\r\n      <!-- checkbox -->\r\n      @if (config()?.enableSelection) {\r\n        <div class=\"lf-list-item-checkbox\">\r\n          <mat-checkbox\r\n            [(ngModel)]=\"item.checked\"\r\n            [disabled]=\"item.disabled!\"\r\n            (change)=\"selectItem(item, $event)\"\r\n            (click)=\"stopPropagation($event)\"></mat-checkbox>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    @if (config()?.showDividers && !last) {\r\n      <mat-divider></mat-divider>\r\n    }\r\n  </ng-template>\r\n</div>\r\n", styles: [".lf-list,.lf-list .lf-list-group{width:100%}.lf-list .lf-list-group .lf-list-group-header{font-weight:500;height:calc(var(--list-item-height) - 16px)}.lf-list-item{width:100%;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;height:var(--list-item-height);border-radius:var(--list-item-border-radius);box-sizing:border-box;overflow:hidden}.lf-list-item.disabled .lf-list-item-title-wrapper{opacity:.64}.lf-list-item .lf-list-item-sort-icon{font-size:var(--list-item-sort-icon-size);width:var(--list-item-sort-icon-size);height:var(--list-item-sort-icon-size);vertical-align:text-top}.lf-list-item .lf-list-item-checkbox{flex:0 0 var(--list-item-checkbox-width)}.lf-list-item .lf-list-item-avatar{flex:0 0 var(--list-item-avatar-size);display:flex;align-items:center;justify-content:center}.lf-list-item .lf-list-item-avatar img{width:var(--list-item-avatar-size);height:var(--list-item-avatar-size);border-radius:50%;object-fit:cover}.lf-list-item .lf-list-item-title-wrapper{display:flex;flex-flow:column;align-items:flex-start;flex:1 1 var(--list-item-title-width);overflow:hidden}.lf-list-item .lf-list-item-title-wrapper .lf-list-item-title{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.lf-list-item .lf-list-item-title-wrapper .lf-list-item-subtitle{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.8rem}.lf-list-item .lf-list-item-buttons{flex:0 0 auto;display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between}.lf-list-item.lf-list-item-header{font-weight:500}.lf-list-item.lf-list-item-header .lf-list-item-title-wrapper span{width:var(--list-item-title-wrapper-width)}.lf-list-item.lf-list-item-data:hover{background-color:#00000014}.lf-list-item .flex-row{display:flex!important;flex-flow:row nowrap;align-items:center}.drop-zone{width:100%;height:var(--list-item-height);border:2px dashed var(--color-gray);border-radius:var(--list-item-border-radius);box-sizing:border-box}.clickable{cursor:pointer!important}.cdk-drag-preview{color:var(--mat-app-text-color, inherit)!important;background:var(--mat-app-background-color, inherit)!important;box-sizing:border-box;border-radius:var(--list-item-border-radius);opacity:.8;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.4}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}\n"] }]
+                        NgTemplateOutlet,
+                    ], template: "<div class=\"lf-list\" cdkDropListGroup>\r\n  <!-- Header -->\r\n  @if (header(); as header) {\r\n    <div\r\n      class=\"lf-list-item lf-list-item-header\"\r\n      [class.gap-2]=\"!isMobile()\"\r\n      [class.gap-1]=\"isMobile()\">\r\n      <!-- avatar -->\r\n      @if (header.avatar) {\r\n        <div class=\"lf-list-item-avatar px-1\">\r\n          <img [src]=\"header.avatar\" alt=\"Avatar of header\" (error)=\"onImageError($event)\" />\r\n        </div>\r\n      } @else if (header.matIcon || header.svgIcon) {\r\n        <div class=\"lf-list-item-avatar px-1\">\r\n          <!-- icon -->\r\n          @if (header.matIcon) {\r\n            <mat-icon>\r\n              {{ header.matIcon }}\r\n            </mat-icon>\r\n          } @else if (header.svgIcon) {\r\n            <mat-icon [svgIcon]=\"header.svgIcon\"></mat-icon>\r\n          }\r\n        </div>\r\n      } @else if (hasAvatars) {\r\n        <div class=\"lf-list-item-avatar px-1\"></div>\r\n      }\r\n\r\n      <!-- title -->\r\n      <div class=\"lf-list-item-title-wrapper flex-row\">\r\n        @for (item of header.items; track $index) {\r\n          <span [class.clickable]=\"item.sortToken\" (click)=\"updateSortToken(item.sortToken)\">\r\n            {{ item.title }}\r\n            @if (sortToken() === item.sortToken) {\r\n              <mat-icon class=\"lf-list-item-sort-icon\">\r\n                {{ sortAsc() ? 'arrow_downward' : 'arrow_upward' }}\r\n              </mat-icon>\r\n            }\r\n          </span>\r\n        }\r\n      </div>\r\n\r\n      <!-- buttons -->\r\n      <div class=\"lf-list-item-buttons\" [class.gap-2]=\"!isMobile()\" [class.gap-1]=\"isMobile()\">\r\n        @for (button of header.buttons; track button.id) {\r\n          @if (button.label) {\r\n            <button\r\n              mat-button\r\n              class=\"lf-list-item-button\"\r\n              [class.disabled]=\"button.disabled\"\r\n              [ngClass]=\"button.cssClass\"\r\n              [disabled]=\"button.disabled\"\r\n              [matTooltip]=\"button.tooltip\"\r\n              (click)=\"clickButton({ buttonId: button.id, item: null! }, $event)\">\r\n              <!-- icon -->\r\n              @if (button.matIcon) {\r\n                <mat-icon>\r\n                  {{ button.matIcon }}\r\n                </mat-icon>\r\n              } @else if (button.svgIcon) {\r\n                <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n              }\r\n              {{ button.label }}\r\n            </button>\r\n          } @else {\r\n            <button\r\n              mat-icon-button\r\n              class=\"lf-list-item-icon\"\r\n              [class.disabled]=\"button.disabled\"\r\n              [ngClass]=\"button.cssClass\"\r\n              [disabled]=\"button.disabled\"\r\n              [matTooltip]=\"button.tooltip\"\r\n              [aria-label]=\"button.id || button.tooltip\"\r\n              (click)=\"clickButton({ buttonId: button.id, item: null! }, $event)\">\r\n              <!-- icon -->\r\n              @if (button.matIcon) {\r\n                <mat-icon>\r\n                  {{ button.matIcon }}\r\n                </mat-icon>\r\n              } @else if (button.svgIcon) {\r\n                <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n              }\r\n            </button>\r\n          }\r\n        }\r\n      </div>\r\n\r\n      <!-- checkbox -->\r\n      @if (config()?.enableSelection && !config()?.disableMultiselect) {\r\n        <div class=\"lf-list-item-checkbox\">\r\n          <mat-checkbox\r\n            [(ngModel)]=\"allSelected\"\r\n            [indeterminate]=\"someSelected\"\r\n            (change)=\"selectAll($event)\"></mat-checkbox>\r\n        </div>\r\n      }\r\n    </div>\r\n    <mat-divider></mat-divider>\r\n  }\r\n\r\n  <!-- Grouped Items -->\r\n  @if (config()?.mode === 'group' && groupedItems()) {\r\n    @for (group of groupedItems() | keyvalue; track group.key; let first = $first) {\r\n      <div class=\"lf-list-group\" [class.mt-4]=\"!first\">\r\n        @if (group.key) {\r\n          <div\r\n            class=\"lf-list-item lf-list-group-header\"\r\n            [class.gap-2]=\"!isMobile()\"\r\n            [class.gap-1]=\"isMobile()\">\r\n            <div class=\"lf-list-item-avatar px-1\"></div>\r\n            <div class=\"lf-list-item-title-wrapper flex-row\">\r\n              <span>{{ group.key }}</span>\r\n            </div>\r\n          </div>\r\n        }\r\n        <div\r\n          [id]=\"group.key\"\r\n          cdkDropList\r\n          [cdkDropListData]=\"group.value\"\r\n          [cdkDropListDisabled]=\"!config()?.enableDragging\"\r\n          [cdkDropListConnectedTo]=\"connectedDropListIds()!\"\r\n          (cdkDropListDropped)=\"dropItem($event, group.key)\"\r\n          [class.drop-zone]=\"config()?.enableDragging && group.value.length <= 0\">\r\n          @for (item of group.value; track item.id; let last = $last) {\r\n            <div\r\n              cdkDrag\r\n              [cdkDragData]=\"item\"\r\n              [cdkDragDisabled]=\"item.disabled || !config()?.enableDragging\">\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"listItemTemplate\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: item, last: last }\"></ng-container>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n    <!-- Flat Items -->\r\n  } @else {\r\n    <div\r\n      [id]=\"dropListId()!\"\r\n      cdkDropList\r\n      [cdkDropListData]=\"items()\"\r\n      [cdkDropListDisabled]=\"!config()?.enableDragging\"\r\n      [cdkDropListConnectedTo]=\"connectedDropListIds()!\"\r\n      (cdkDropListDropped)=\"dropItem($event, dropListId()!)\"\r\n      [class.drop-zone]=\"config()?.enableDragging && items().length <= 0\">\r\n      @for (item of items(); track item.id; let last = $last) {\r\n        <div\r\n          cdkDrag\r\n          [cdkDragData]=\"item\"\r\n          [cdkDragDisabled]=\"item.disabled || !config()?.enableDragging\">\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"listItemTemplate\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: item, last: last }\"></ng-container>\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <!-- Item (template) -->\r\n  <ng-template #listItemTemplate let-item let-last=\"last\">\r\n    <div\r\n      class=\"lf-list-item lf-list-item-data\"\r\n      [class.gap-2]=\"!isMobile()\"\r\n      [class.gap-1]=\"isMobile()\"\r\n      [class.active]=\"item.checked\"\r\n      [class.disabled]=\"item.disabled\"\r\n      [class.clickable]=\"item.clickable && !item.disabled\"\r\n      [ngClass]=\"item.cssClass\"\r\n      matRipple\r\n      [matRippleDisabled]=\"!item.clickable\"\r\n      (click)=\"item.clickable && !item.disabled ? clickItem(item, $event) : null\">\r\n      <!-- avatar -->\r\n      @if (avatarTemplate()) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"avatarTemplate()!.templateRef\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n      } @else if (item.avatar) {\r\n        <div class=\"lf-list-item-avatar px-1\">\r\n          <img\r\n            [src]=\"item.avatar\"\r\n            [alt]=\"'Avatar of ' + item.title\"\r\n            (error)=\"onImageError($event)\" />\r\n        </div>\r\n      } @else if (item.matIcon || item.svgIcon) {\r\n        <div class=\"lf-list-item-avatar px-1\">\r\n          <!-- icon -->\r\n          @if (item.matIcon) {\r\n            <mat-icon>\r\n              {{ item.matIcon }}\r\n            </mat-icon>\r\n          } @else if (item.svgIcon) {\r\n            <mat-icon [svgIcon]=\"item.svgIcon\"></mat-icon>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      <!-- title -->\r\n      <div class=\"lf-list-item-title-wrapper\">\r\n        <span class=\"lf-list-item-title\">\r\n          @if (titleTemplate()) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"titleTemplate()!.templateRef\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n          } @else {\r\n            {{ item.title }}\r\n          }\r\n        </span>\r\n        @if (item.subtitle || subtitleTemplate()) {\r\n          <span class=\"lf-list-item-subtitle\">\r\n            @if (subtitleTemplate()) {\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"subtitleTemplate()!.templateRef\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n            } @else {\r\n              {{ item.subtitle }}\r\n            }\r\n          </span>\r\n        }\r\n      </div>\r\n\r\n      <!-- buttons -->\r\n      <div class=\"lf-list-item-buttons\" [class.gap-2]=\"!isMobile()\" [class.gap-1]=\"isMobile()\">\r\n        @if (buttonsTemplate()) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"buttonsTemplate()!.templateRef\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n        } @else {\r\n          @let combinedButtons = getCombinedButtons(item);\r\n          @for (button of combinedButtons; track button.id) {\r\n            @if (!item.hiddenButtonIds?.includes(button.id)) {\r\n              @let disabled =\r\n                button.disabled || item.disabled || item.disabledButtonIds?.includes(button.id);\r\n              @if (button.label) {\r\n                <button\r\n                  mat-button\r\n                  class=\"lf-list-item-button\"\r\n                  [class.disabled]=\"disabled\"\r\n                  [ngClass]=\"button.cssClass\"\r\n                  [disabled]=\"disabled\"\r\n                  [matTooltip]=\"button.tooltip\"\r\n                  (click)=\"clickButton({ buttonId: button.id, item }, $event)\">\r\n                  <!-- icon -->\r\n                  @if (button.matIcon) {\r\n                    <mat-icon>\r\n                      {{ button.matIcon }}\r\n                    </mat-icon>\r\n                  } @else if (button.svgIcon) {\r\n                    <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n                  }\r\n                  {{ button.label }}\r\n                </button>\r\n              } @else {\r\n                <button\r\n                  mat-icon-button\r\n                  class=\"lf-list-item-icon\"\r\n                  [class.disabled]=\"disabled\"\r\n                  [ngClass]=\"button.cssClass\"\r\n                  [disabled]=\"disabled\"\r\n                  [matTooltip]=\"button.tooltip\"\r\n                  [aria-label]=\"button.id || button.tooltip\"\r\n                  (click)=\"clickButton({ buttonId: button.id, item }, $event)\">\r\n                  <!-- icon -->\r\n                  @if (button.matIcon) {\r\n                    <mat-icon>\r\n                      {{ button.matIcon }}\r\n                    </mat-icon>\r\n                  } @else if (button.svgIcon) {\r\n                    <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n                  }\r\n                </button>\r\n              }\r\n            }\r\n          }\r\n        }\r\n\r\n        <!-- drag -->\r\n        @if (config()?.enableDragging) {\r\n          <button\r\n            mat-icon-button\r\n            class=\"lf-list-item-icon\"\r\n            [class.disabled]=\"item.disabled\"\r\n            [disabled]=\"item.disabled\"\r\n            [aria-label]=\"'Drag handle'\"\r\n            (click)=\"stopPropagation($event)\"\r\n            cdkDragHandle>\r\n            <mat-icon>drag_indicator</mat-icon>\r\n          </button>\r\n        }\r\n      </div>\r\n\r\n      <!-- checkbox -->\r\n      @if (config()?.enableSelection) {\r\n        <div class=\"lf-list-item-checkbox\">\r\n          <mat-checkbox\r\n            [(ngModel)]=\"item.checked\"\r\n            [disabled]=\"item.disabled!\"\r\n            (change)=\"selectItem(item, $event)\"\r\n            (click)=\"stopPropagation($event)\"></mat-checkbox>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    @if (config()?.showDividers && !last) {\r\n      <mat-divider></mat-divider>\r\n    }\r\n  </ng-template>\r\n</div>\r\n", styles: [".lf-list,.lf-list .lf-list-group{width:100%}.lf-list .lf-list-group .lf-list-group-header{font-weight:500;height:calc(var(--list-item-height) - 16px)}.lf-list-item{width:100%;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;height:var(--list-item-height);border-radius:var(--list-item-border-radius);box-sizing:border-box;overflow:hidden}.lf-list-item.disabled .lf-list-item-title-wrapper{opacity:.64}.lf-list-item .lf-list-item-sort-icon{font-size:var(--list-item-sort-icon-size);width:var(--list-item-sort-icon-size);height:var(--list-item-sort-icon-size);vertical-align:text-top}.lf-list-item .lf-list-item-checkbox{flex:0 0 var(--list-item-checkbox-width)}.lf-list-item .lf-list-item-avatar{flex:0 0 var(--list-item-avatar-size);display:flex;align-items:center;justify-content:center}.lf-list-item .lf-list-item-avatar img{width:var(--list-item-avatar-size);height:var(--list-item-avatar-size);border-radius:50%;object-fit:cover}.lf-list-item .lf-list-item-title-wrapper{display:flex;flex-flow:column;align-items:flex-start;flex:1 1 var(--list-item-title-width);overflow:hidden}.lf-list-item .lf-list-item-title-wrapper .lf-list-item-title{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.lf-list-item .lf-list-item-title-wrapper .lf-list-item-subtitle{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.8rem}.lf-list-item .lf-list-item-buttons{flex:0 0 auto;display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between}.lf-list-item.lf-list-item-header{font-weight:500}.lf-list-item.lf-list-item-header .lf-list-item-title-wrapper span{width:var(--list-item-title-wrapper-width)}.lf-list-item.lf-list-item-data:hover{background-color:#00000014}.lf-list-item .flex-row{display:flex!important;flex-flow:row nowrap;align-items:center}.drop-zone{width:100%;height:var(--list-item-height);border:2px dashed var(--color-gray);border-radius:var(--list-item-border-radius);box-sizing:border-box}.clickable{cursor:pointer!important}.cdk-drag-preview{color:var(--mat-app-text-color, inherit)!important;background:var(--mat-app-background-color, inherit)!important;box-sizing:border-box;border-radius:var(--list-item-border-radius);opacity:.8;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.4}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { avatarTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ListItemAvatarDirective), { isSignal: true }] }], titleTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ListItemTitleDirective), { isSignal: true }] }], subtitleTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ListItemSubtitleDirective), { isSignal: true }] }], buttonsTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ListItemButtonsDirective), { isSignal: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], groupedItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupedItems", required: false }] }], buttons: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttons", required: false }] }], dropListId: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropListId", required: false }] }], connectedDropListIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectedDropListIds", required: false }] }], sortChangeEvent: [{ type: i0.Output, args: ["sortChangeEvent"] }], selectionChangeEvent: [{ type: i0.Output, args: ["selectionChangeEvent"] }], itemClickEvent: [{ type: i0.Output, args: ["itemClickEvent"] }], itemDropEvent: [{ type: i0.Output, args: ["itemDropEvent"] }], buttonClickEvent: [{ type: i0.Output, args: ["buttonClickEvent"] }], allSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "allSelected", required: false }] }, { type: i0.Output, args: ["allSelectedChange"] }] } });
 
 class NotificationComponent {
@@ -1524,10 +1482,7 @@ class NotificationComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NotificationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lf-notification', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        MatButtonModule,
-                        MatIconModule
-                    ], template: "<div\r\n  class=\"lf-notification\"\r\n  [class.mat-elevation-z2]=\"!static()\"\r\n  [class.lf-notification-fixed]=\"!static()\"\r\n  [class.lf-notification-static]=\"static()\"\r\n  [class.lf-notification-minimal]=\"minimal()\"\r\n  [class.lf-mobile]=\"isMobile()\"\r\n  [class]=\"[cssClass(), color()]\"\r\n  animate.enter=\"lf-anim-scale-enter\">\r\n  <div\r\n    class=\"lf-notification-content flex-row-nowrap gap-2\"\r\n    [class.justify-center]=\"minimal()\"\r\n    [class.justify-between]=\"!minimal()\"\r\n    [class.flex-col]=\"isMobile()\"\r\n    [class.align-center]=\"!isMobile()\"\r\n    [class.align-start]=\"isMobile()\">\r\n    <span\r\n      class=\"lf-notification-message flex-row-nowrap align-center justify-start\"\r\n      [class.gap-4]=\"!isMobile()\"\r\n      [class.gap-2]=\"isMobile()\">\r\n      @if (matIcon()) {\r\n        <mat-icon class=\"flex-none\" [color]=\"color()\">{{ matIcon() }}</mat-icon>\r\n      }\r\n      <span [class.ml-1]=\"!matIcon()\">\r\n        {{ message() }}\r\n        @if (link() && linkText()) {\r\n          <a class=\"lf-notification-link\" [href]=\"link()\">{{ linkText() }}</a>\r\n        }\r\n      </span>\r\n    </span>\r\n\r\n    @if (action(); as action) {\r\n      <button\r\n        mat-flat-button\r\n        class=\"lf-notification-action\"\r\n        [class.align-self-end]=\"isMobile()\"\r\n        [color]=\"color()\"\r\n        (click)=\"clickEvent.emit()\">\r\n        {{ action }}\r\n      </button>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".lf-notification{overflow:hidden;padding:var(--notification-padding);box-sizing:border-box;border-radius:var(--border-radius);color:var(--mat-snack-bar-supporting-text-color, var(--mat-sys-inverse-on-surface));background-color:var(--mat-snack-bar-container-color, var(--mat-sys-inverse-surface));outline-width:2px;outline-style:solid;outline-color:transparent}.lf-notification.lf-mobile.lf-notification-fixed{position:fixed;inset:auto 0 0;max-width:100vw!important;min-width:0!important}.lf-notification.lf-notification-fixed{z-index:1000;position:fixed;inset:auto 0 0 auto;display:inline-table;max-width:var(--notification-max-width);min-width:var(--notification-min-width);margin:var(--notification-fixed-margin)}.lf-notification.lf-notification-static{margin:var(--notification-static-margin)}.lf-notification.lf-notification-minimal{padding:var(--notification-padding-minimal);outline:none!important;margin:0!important}.lf-notification.primary{color:unset!important;background-color:color-mix(in srgb,var(--color-primary) 12%,transparent);outline-color:var(--color-primary-200)}.lf-notification.primary .lf-notification-link{color:unset!important}.lf-notification.accent{color:unset!important;background-color:color-mix(in srgb,var(--color-accent) 12%,transparent);outline-color:var(--color-accent-200)}.lf-notification.accent .lf-notification-link{color:unset!important}.lf-notification.warn{color:unset!important;background-color:color-mix(in srgb,var(--color-warn) 12%,transparent);outline-color:var(--color-warn-200)}.lf-notification.warn .lf-notification-link{color:unset!important}.lf-notification .lf-notification-content .lf-notification-message{font-size:var(--notification-font-size)}.lf-notification .lf-notification-content .lf-notification-message .lf-notification-link{color:var(--mat-snack-bar-supporting-text-color, var(--mat-sys-inverse-on-surface));text-decoration:underline}.lf-notification .lf-notification-content .lf-notification-action{min-width:unset!important;flex-shrink:0;margin:-8px 0 -8px 8px}\n"] }]
+            args: [{ selector: 'lf-notification', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatButtonModule, MatIconModule], template: "<div\r\n  class=\"lf-notification\"\r\n  [class.mat-elevation-z2]=\"!static()\"\r\n  [class.lf-notification-fixed]=\"!static()\"\r\n  [class.lf-notification-static]=\"static()\"\r\n  [class.lf-notification-minimal]=\"minimal()\"\r\n  [class.lf-mobile]=\"isMobile()\"\r\n  [class]=\"[cssClass(), color()]\"\r\n  animate.enter=\"lf-anim-scale-enter\">\r\n  <div\r\n    class=\"lf-notification-content flex-row-nowrap gap-2\"\r\n    [class.justify-center]=\"minimal()\"\r\n    [class.justify-between]=\"!minimal()\"\r\n    [class.flex-col]=\"isMobile()\"\r\n    [class.align-center]=\"!isMobile()\"\r\n    [class.align-start]=\"isMobile()\">\r\n    <span\r\n      class=\"lf-notification-message flex-row-nowrap align-center justify-start\"\r\n      [class.gap-4]=\"!isMobile()\"\r\n      [class.gap-2]=\"isMobile()\">\r\n      @if (matIcon()) {\r\n        <mat-icon class=\"flex-none\" [color]=\"color()\">{{ matIcon() }}</mat-icon>\r\n      }\r\n      <span [class.ml-1]=\"!matIcon()\">\r\n        {{ message() }}\r\n        @if (link() && linkText()) {\r\n          <a class=\"lf-notification-link\" [href]=\"link()\">{{ linkText() }}</a>\r\n        }\r\n      </span>\r\n    </span>\r\n\r\n    @if (action(); as action) {\r\n      <button\r\n        mat-flat-button\r\n        class=\"lf-notification-action\"\r\n        [class.align-self-end]=\"isMobile()\"\r\n        [color]=\"color()\"\r\n        (click)=\"clickEvent.emit()\">\r\n        {{ action }}\r\n      </button>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".lf-notification{overflow:hidden;padding:var(--notification-padding);box-sizing:border-box;border-radius:var(--border-radius);color:var(--mat-snack-bar-supporting-text-color, var(--mat-sys-inverse-on-surface));background-color:var(--mat-snack-bar-container-color, var(--mat-sys-inverse-surface));outline-width:2px;outline-style:solid;outline-color:transparent}.lf-notification.lf-mobile.lf-notification-fixed{position:fixed;inset:auto 0 0;max-width:100vw!important;min-width:0!important}.lf-notification.lf-notification-fixed{z-index:1000;position:fixed;inset:auto 0 0 auto;display:inline-table;max-width:var(--notification-max-width);min-width:var(--notification-min-width);margin:var(--notification-fixed-margin)}.lf-notification.lf-notification-static{margin:var(--notification-static-margin)}.lf-notification.lf-notification-minimal{padding:var(--notification-padding-minimal);outline:none!important;margin:0!important}.lf-notification.primary{color:unset!important;background-color:color-mix(in srgb,var(--color-primary) 12%,transparent);outline-color:var(--color-primary-200)}.lf-notification.primary .lf-notification-link{color:unset!important}.lf-notification.accent{color:unset!important;background-color:color-mix(in srgb,var(--color-accent) 12%,transparent);outline-color:var(--color-accent-200)}.lf-notification.accent .lf-notification-link{color:unset!important}.lf-notification.warn{color:unset!important;background-color:color-mix(in srgb,var(--color-warn) 12%,transparent);outline-color:var(--color-warn-200)}.lf-notification.warn .lf-notification-link{color:unset!important}.lf-notification .lf-notification-content .lf-notification-message{font-size:var(--notification-font-size)}.lf-notification .lf-notification-content .lf-notification-message .lf-notification-link{color:var(--mat-snack-bar-supporting-text-color, var(--mat-sys-inverse-on-surface));text-decoration:underline}.lf-notification .lf-notification-content .lf-notification-action{min-width:unset!important;flex-shrink:0;margin:-8px 0 -8px 8px}\n"] }]
         }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }], linkText: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkText", required: false }] }], action: [{ type: i0.Input, args: [{ isSignal: true, alias: "action", required: false }] }], matIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "matIcon", required: false }] }], svgIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "svgIcon", required: false }] }], static: [{ type: i0.Input, args: [{ isSignal: true, alias: "static", required: false }] }], minimal: [{ type: i0.Input, args: [{ isSignal: true, alias: "minimal", required: false }] }], cssClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "cssClass", required: false }] }], clickEvent: [{ type: i0.Output, args: ["clickEvent"] }] } });
 
 class PlaceholderComponent {
@@ -1541,12 +1496,7 @@ class PlaceholderComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: PlaceholderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lf-placeholder', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        MatButtonModule,
-                        MatIconModule,
-                        MatTooltipModule,
-                        NgClass
-                    ], template: "@if (placeholderConfig(); as config) {\r\n  <div class=\"lf-placeholder\" [ngClass]=\"config.cssClass\">\r\n    <!-- icon -->\r\n    @if (config.matIcon) {\r\n      <mat-icon class=\"lf-placeholder-icon\">\r\n        {{ config.matIcon }}\r\n      </mat-icon>\r\n    } @else if (config.svgIcon) {\r\n      <mat-icon class=\"lf-placeholder-icon\" [svgIcon]=\"config.svgIcon\"></mat-icon>\r\n    } @else if (config.imgIcon) {\r\n      <img\r\n        class=\"lf-placeholder-image\"\r\n        [src]=\"config.imgIcon\"\r\n        width=\"96\"\r\n        alt=\"Placeholder image\"\r\n        loading=\"lazy\" />\r\n    }\r\n    <!-- heading -->\r\n    @if (config.title) {\r\n      <p class=\"lf-placeholder-title mt-2\">\r\n        {{ config.title }}\r\n      </p>\r\n    }\r\n    <!-- message -->\r\n    @if (config.message) {\r\n      <p class=\"lf-placeholder-message mt-1\">\r\n        {{ config.message }}\r\n      </p>\r\n    }\r\n    <!-- action -->\r\n    @if (config.button) {\r\n      <button\r\n        mat-button\r\n        class=\"mt-4\"\r\n        color=\"accent\"\r\n        [ngClass]=\"config.button.cssClass\"\r\n        [disabled]=\"config.button.disabled\"\r\n        (click)=\"buttonClickEvent.emit()\"\r\n        [matTooltip]=\"config.button.tooltip\">\r\n        <!-- icon -->\r\n        @if (config.button.matIcon) {\r\n          <mat-icon>\r\n            {{ config.button.matIcon }}\r\n          </mat-icon>\r\n        } @else if (config.button.svgIcon) {\r\n          <mat-icon [svgIcon]=\"config.button.svgIcon\"></mat-icon>\r\n        }\r\n        {{ config.button.label }}\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".lf-placeholder{display:flex;flex-flow:column;align-items:center;justify-content:center;text-align:center}.lf-placeholder .lf-placeholder-icon{width:var(--placeholder-icon-size);height:var(--placeholder-icon-size);font-size:var(--placeholder-icon-size);line-height:var(--placeholder-icon-size);color:var(--color-gray)}.lf-placeholder .lf-placeholder-image{width:var(--placeholder-icon-size);height:var(--placeholder-icon-size);object-fit:contain}.lf-placeholder .lf-placeholder-title{margin:0;font-size:var(--placeholder-title-font-size);font-weight:500}.lf-placeholder .lf-placeholder-message{margin:0;font-size:var(--placeholder-message-font-size)}\n"] }]
+            args: [{ selector: 'lf-placeholder', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatButtonModule, MatIconModule, MatTooltipModule, NgClass], template: "@if (placeholderConfig(); as config) {\r\n  <div class=\"lf-placeholder\" [ngClass]=\"config.cssClass\">\r\n    <!-- icon -->\r\n    @if (config.matIcon) {\r\n      <mat-icon class=\"lf-placeholder-icon\">\r\n        {{ config.matIcon }}\r\n      </mat-icon>\r\n    } @else if (config.svgIcon) {\r\n      <mat-icon class=\"lf-placeholder-icon\" [svgIcon]=\"config.svgIcon\"></mat-icon>\r\n    } @else if (config.imgIcon) {\r\n      <img\r\n        class=\"lf-placeholder-image\"\r\n        [src]=\"config.imgIcon\"\r\n        width=\"96\"\r\n        alt=\"Placeholder image\"\r\n        loading=\"lazy\" />\r\n    }\r\n    <!-- heading -->\r\n    @if (config.title) {\r\n      <p class=\"lf-placeholder-title mt-2\">\r\n        {{ config.title }}\r\n      </p>\r\n    }\r\n    <!-- message -->\r\n    @if (config.message) {\r\n      <p class=\"lf-placeholder-message mt-1\">\r\n        {{ config.message }}\r\n      </p>\r\n    }\r\n    <!-- action -->\r\n    @if (config.button) {\r\n      <button\r\n        mat-button\r\n        class=\"mt-4\"\r\n        color=\"accent\"\r\n        [ngClass]=\"config.button.cssClass\"\r\n        [disabled]=\"config.button.disabled\"\r\n        (click)=\"buttonClickEvent.emit()\"\r\n        [matTooltip]=\"config.button.tooltip\">\r\n        <!-- icon -->\r\n        @if (config.button.matIcon) {\r\n          <mat-icon>\r\n            {{ config.button.matIcon }}\r\n          </mat-icon>\r\n        } @else if (config.button.svgIcon) {\r\n          <mat-icon [svgIcon]=\"config.button.svgIcon\"></mat-icon>\r\n        }\r\n        {{ config.button.label }}\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".lf-placeholder{display:flex;flex-flow:column;align-items:center;justify-content:center;text-align:center}.lf-placeholder .lf-placeholder-icon{width:var(--placeholder-icon-size);height:var(--placeholder-icon-size);font-size:var(--placeholder-icon-size);line-height:var(--placeholder-icon-size);color:var(--color-gray)}.lf-placeholder .lf-placeholder-image{width:var(--placeholder-icon-size);height:var(--placeholder-icon-size);object-fit:contain}.lf-placeholder .lf-placeholder-title{margin:0;font-size:var(--placeholder-title-font-size);font-weight:500}.lf-placeholder .lf-placeholder-message{margin:0;font-size:var(--placeholder-message-font-size)}\n"] }]
         }], propDecorators: { placeholderConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderConfig", required: false }] }], buttonClickEvent: [{ type: i0.Output, args: ["buttonClickEvent"] }] } });
 
 class ScaffoldLoadingInterceptor {