@lukfel/ng-scaffold 20.0.56 → 20.0.57

package/fesm2022/lukfel-ng-scaffold.mjs

@@ -203,7 +203,7 @@ class BottomBarComponent {
         this.bottomBarCloseClickEvent.emit(closeButtonId);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: BottomBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: BottomBarComponent, isStandalone: false, selector: "lf-bottom-bar", inputs: { libraryConfig: "libraryConfig", bottomBarConfig: "bottomBarConfig", isMobile: "isMobile", navbarEnabled: "navbarEnabled" }, outputs: { bottomBarCloseClickEvent: "bottomBarCloseClickEvent", bottomBarButtonClickEvent: "bottomBarButtonClickEvent" }, ngImport: i0, template: "@if (bottomBarConfig && bottomBarConfig.enable) {\r\n  <div\r\n    [@slideUpDown]\r\n    class=\"lf-bottom-bar lf-transitions px-4\"\r\n    [ngClass]=\"bottomBarConfig.cssClass\"\r\n    [class.lf-bottom-bar-show-navbar]=\"!isMobile && navbarEnabled\"\r\n    [class.lf-bottom-bar-show-navbar-mobile]=\"isMobile && navbarEnabled\">\r\n    @if (bottomBarConfig.closeButtonId) {\r\n      <button mat-icon-button (click)=\"closeClicked(bottomBarConfig.closeButtonId)\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    }\r\n    @if (bottomBarConfig.message) {\r\n      <span class=\"ml-2\">{{ bottomBarConfig.message }}</span>\r\n    }\r\n    @if (bottomBarConfig.buttons) {\r\n      <div class=\"lf-bottom-bar-buttons ml-4\">\r\n        @for (button of bottomBarConfig.buttons; track button.id) {\r\n          @if (button.label) {\r\n            <button\r\n              mat-button\r\n              class=\"lf-bottom-bar-button ml-2\"\r\n              [ngClass]=\"button.cssClass\"\r\n              (click)=\"buttonClicked(button.id)\"\r\n              [matTooltip]=\"button.tooltip\">\r\n              @if (button.matIcon || button.svgIcon) {\r\n                <lf-icon\r\n                  [matIcon]=\"button.matIcon\"\r\n                  [svgIcon]=\"button.svgIcon\"\r\n                  verticalAlign=\"bottom\"></lf-icon>\r\n              }\r\n              {{ button.label }}\r\n            </button>\r\n          } @else {\r\n            <button\r\n              mat-icon-button\r\n              color=\"accent\"\r\n              class=\"lf-bottom-bar-button-icon ml-2\"\r\n              [ngClass]=\"button.cssClass\"\r\n              (click)=\"buttonClicked(button.id)\"\r\n              [matTooltip]=\"button.tooltip\">\r\n              <lf-icon [matIcon]=\"button.matIcon\" [svgIcon]=\"button.svgIcon\"></lf-icon>\r\n            </button>\r\n          }\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".lf-bottom-bar{z-index:98;position:fixed;left:0;bottom:0;right:0;height:56px;display:flex;align-items:center;box-sizing:border-box;background-color:var(--color-accent);color:#fff}.lf-bottom-bar.lf-bottom-bar-show-navbar-mobile{bottom:64px!important}.lf-bottom-bar.lf-bottom-bar-show-navbar{left:80px!important}.lf-bottom-bar .lf-bottom-bar-buttons{display:flex;align-items:center}.lf-bottom-bar .lf-bottom-bar-buttons .lf-bottom-bar-button{color:var(--color-accent)!important;background-color:#fff!important}.lf-bottom-bar .lf-bottom-bar-buttons .lf-bottom-bar-button-icon{color:#fff!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: IconComponent, selector: "lf-icon", inputs: ["matIcon", "svgIcon", "verticalAlign"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: BottomBarComponent, isStandalone: false, selector: "lf-bottom-bar", inputs: { libraryConfig: "libraryConfig", bottomBarConfig: "bottomBarConfig", isMobile: "isMobile", navbarEnabled: "navbarEnabled" }, outputs: { bottomBarCloseClickEvent: "bottomBarCloseClickEvent", bottomBarButtonClickEvent: "bottomBarButtonClickEvent" }, ngImport: i0, template: "@if (bottomBarConfig && bottomBarConfig.enable) {\r\n  <div\r\n    [@slideUpDown]\r\n    class=\"lf-bottom-bar lf-transitions px-4\"\r\n    [ngClass]=\"bottomBarConfig.cssClass\"\r\n    [class.lf-bottom-bar-show-navbar]=\"!isMobile && navbarEnabled\"\r\n    [class.lf-bottom-bar-show-navbar-mobile]=\"isMobile && navbarEnabled\">\r\n    @if (bottomBarConfig.closeButtonId) {\r\n      <button mat-icon-button (click)=\"closeClicked(bottomBarConfig.closeButtonId)\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    }\r\n    @if (bottomBarConfig.message) {\r\n      <span class=\"ml-2\">{{ bottomBarConfig.message }}</span>\r\n    }\r\n    @if (bottomBarConfig.buttons) {\r\n      <div class=\"lf-bottom-bar-buttons ml-4\">\r\n        @for (button of bottomBarConfig.buttons; track button.id) {\r\n          @if (button.label) {\r\n            <button\r\n              mat-button\r\n              class=\"lf-bottom-bar-button ml-2\"\r\n              [ngClass]=\"button.cssClass\"\r\n              (click)=\"buttonClicked(button.id)\"\r\n              [matTooltip]=\"button.tooltip\">\r\n              @if (button.matIcon || button.svgIcon) {\r\n                <lf-icon\r\n                  [matIcon]=\"button.matIcon\"\r\n                  [svgIcon]=\"button.svgIcon\"\r\n                  verticalAlign=\"bottom\"></lf-icon>\r\n              }\r\n              {{ button.label }}\r\n            </button>\r\n          } @else {\r\n            <button\r\n              mat-icon-button\r\n              color=\"accent\"\r\n              class=\"lf-bottom-bar-button-icon ml-2\"\r\n              [ngClass]=\"button.cssClass\"\r\n              (click)=\"buttonClicked(button.id)\"\r\n              [matTooltip]=\"button.tooltip\">\r\n              <lf-icon [matIcon]=\"button.matIcon\" [svgIcon]=\"button.svgIcon\"></lf-icon>\r\n            </button>\r\n          }\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".lf-bottom-bar{z-index:var(--bottom-bar-z-index);position:fixed;left:0;bottom:0;right:0;height:var(--bottom-bar-height);display:flex;align-items:center;box-sizing:border-box;background-color:var(--color-accent);color:#fff}.lf-bottom-bar.lf-bottom-bar-show-navbar-mobile{bottom:calc(var(--navbar-height-mobile) + 2 * var(--navbar-padding))!important}.lf-bottom-bar.lf-bottom-bar-show-navbar{left:calc(var(--navbar-width) + 2 * var(--navbar-padding))!important}.lf-bottom-bar .lf-bottom-bar-buttons{display:flex;align-items:center}.lf-bottom-bar .lf-bottom-bar-buttons .lf-bottom-bar-button{color:var(--color-accent)!important;background-color:#fff!important}.lf-bottom-bar .lf-bottom-bar-buttons .lf-bottom-bar-button-icon{color:#fff!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: IconComponent, selector: "lf-icon", inputs: ["matIcon", "svgIcon", "verticalAlign"] }], animations: [
             trigger('slideUpDown', [
                 state('void', style({ transform: 'translateY(100%)' })),
                 state('*', style({ transform: 'translateY(0)' })),
@@ -221,7 +221,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
                             transition(':enter', [style({ transform: 'translateY(100%)' }), animate('200ms linear')]),
                             transition(':leave', [animate('200ms linear', style({ transform: 'translateY(100%)' }))])
                         ])
-                    ], standalone: false, template: "@if (bottomBarConfig && bottomBarConfig.enable) {\r\n  <div\r\n    [@slideUpDown]\r\n    class=\"lf-bottom-bar lf-transitions px-4\"\r\n    [ngClass]=\"bottomBarConfig.cssClass\"\r\n    [class.lf-bottom-bar-show-navbar]=\"!isMobile && navbarEnabled\"\r\n    [class.lf-bottom-bar-show-navbar-mobile]=\"isMobile && navbarEnabled\">\r\n    @if (bottomBarConfig.closeButtonId) {\r\n      <button mat-icon-button (click)=\"closeClicked(bottomBarConfig.closeButtonId)\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    }\r\n    @if (bottomBarConfig.message) {\r\n      <span class=\"ml-2\">{{ bottomBarConfig.message }}</span>\r\n    }\r\n    @if (bottomBarConfig.buttons) {\r\n      <div class=\"lf-bottom-bar-buttons ml-4\">\r\n        @for (button of bottomBarConfig.buttons; track button.id) {\r\n          @if (button.label) {\r\n            <button\r\n              mat-button\r\n              class=\"lf-bottom-bar-button ml-2\"\r\n              [ngClass]=\"button.cssClass\"\r\n              (click)=\"buttonClicked(button.id)\"\r\n              [matTooltip]=\"button.tooltip\">\r\n              @if (button.matIcon || button.svgIcon) {\r\n                <lf-icon\r\n                  [matIcon]=\"button.matIcon\"\r\n                  [svgIcon]=\"button.svgIcon\"\r\n                  verticalAlign=\"bottom\"></lf-icon>\r\n              }\r\n              {{ button.label }}\r\n            </button>\r\n          } @else {\r\n            <button\r\n              mat-icon-button\r\n              color=\"accent\"\r\n              class=\"lf-bottom-bar-button-icon ml-2\"\r\n              [ngClass]=\"button.cssClass\"\r\n              (click)=\"buttonClicked(button.id)\"\r\n              [matTooltip]=\"button.tooltip\">\r\n              <lf-icon [matIcon]=\"button.matIcon\" [svgIcon]=\"button.svgIcon\"></lf-icon>\r\n            </button>\r\n          }\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".lf-bottom-bar{z-index:98;position:fixed;left:0;bottom:0;right:0;height:56px;display:flex;align-items:center;box-sizing:border-box;background-color:var(--color-accent);color:#fff}.lf-bottom-bar.lf-bottom-bar-show-navbar-mobile{bottom:64px!important}.lf-bottom-bar.lf-bottom-bar-show-navbar{left:80px!important}.lf-bottom-bar .lf-bottom-bar-buttons{display:flex;align-items:center}.lf-bottom-bar .lf-bottom-bar-buttons .lf-bottom-bar-button{color:var(--color-accent)!important;background-color:#fff!important}.lf-bottom-bar .lf-bottom-bar-buttons .lf-bottom-bar-button-icon{color:#fff!important}\n"] }]
+                    ], standalone: false, template: "@if (bottomBarConfig && bottomBarConfig.enable) {\r\n  <div\r\n    [@slideUpDown]\r\n    class=\"lf-bottom-bar lf-transitions px-4\"\r\n    [ngClass]=\"bottomBarConfig.cssClass\"\r\n    [class.lf-bottom-bar-show-navbar]=\"!isMobile && navbarEnabled\"\r\n    [class.lf-bottom-bar-show-navbar-mobile]=\"isMobile && navbarEnabled\">\r\n    @if (bottomBarConfig.closeButtonId) {\r\n      <button mat-icon-button (click)=\"closeClicked(bottomBarConfig.closeButtonId)\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    }\r\n    @if (bottomBarConfig.message) {\r\n      <span class=\"ml-2\">{{ bottomBarConfig.message }}</span>\r\n    }\r\n    @if (bottomBarConfig.buttons) {\r\n      <div class=\"lf-bottom-bar-buttons ml-4\">\r\n        @for (button of bottomBarConfig.buttons; track button.id) {\r\n          @if (button.label) {\r\n            <button\r\n              mat-button\r\n              class=\"lf-bottom-bar-button ml-2\"\r\n              [ngClass]=\"button.cssClass\"\r\n              (click)=\"buttonClicked(button.id)\"\r\n              [matTooltip]=\"button.tooltip\">\r\n              @if (button.matIcon || button.svgIcon) {\r\n                <lf-icon\r\n                  [matIcon]=\"button.matIcon\"\r\n                  [svgIcon]=\"button.svgIcon\"\r\n                  verticalAlign=\"bottom\"></lf-icon>\r\n              }\r\n              {{ button.label }}\r\n            </button>\r\n          } @else {\r\n            <button\r\n              mat-icon-button\r\n              color=\"accent\"\r\n              class=\"lf-bottom-bar-button-icon ml-2\"\r\n              [ngClass]=\"button.cssClass\"\r\n              (click)=\"buttonClicked(button.id)\"\r\n              [matTooltip]=\"button.tooltip\">\r\n              <lf-icon [matIcon]=\"button.matIcon\" [svgIcon]=\"button.svgIcon\"></lf-icon>\r\n            </button>\r\n          }\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".lf-bottom-bar{z-index:var(--bottom-bar-z-index);position:fixed;left:0;bottom:0;right:0;height:var(--bottom-bar-height);display:flex;align-items:center;box-sizing:border-box;background-color:var(--color-accent);color:#fff}.lf-bottom-bar.lf-bottom-bar-show-navbar-mobile{bottom:calc(var(--navbar-height-mobile) + 2 * var(--navbar-padding))!important}.lf-bottom-bar.lf-bottom-bar-show-navbar{left:calc(var(--navbar-width) + 2 * var(--navbar-padding))!important}.lf-bottom-bar .lf-bottom-bar-buttons{display:flex;align-items:center}.lf-bottom-bar .lf-bottom-bar-buttons .lf-bottom-bar-button{color:var(--color-accent)!important;background-color:#fff!important}.lf-bottom-bar .lf-bottom-bar-buttons .lf-bottom-bar-button-icon{color:#fff!important}\n"] }]
         }], propDecorators: { libraryConfig: [{
                 type: Input
             }], bottomBarConfig: [{
@@ -248,11 +248,11 @@ class ContentTitleCardComponent {
         this.backButtonClickEvent.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ContentTitleCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: ContentTitleCardComponent, isStandalone: false, selector: "lf-content-title-card", inputs: { libraryConfig: "libraryConfig", contentTitleCardConfig: "contentTitleCardConfig", isMobile: "isMobile", routeHistory: "routeHistory" }, outputs: { backButtonClickEvent: "backButtonClickEvent" }, ngImport: i0, template: "@if (contentTitleCardConfig && contentTitleCardConfig.enable) {\r\n  <mat-card\r\n    class=\"lf-content-title-card mat-elevation-z2 px-4\"\r\n    [ngClass]=\"contentTitleCardConfig.cssClass\">\r\n    <!-- back button -->\r\n    @if (contentTitleCardConfig.showBackButton && routeHistory.length > 1) {\r\n      <button mat-icon-button color=\"accent\" (click)=\"backButtonClicked()\">\r\n        <mat-icon>arrow_back_ios</mat-icon>\r\n      </button>\r\n    }\r\n    <!-- spacer -->\r\n    <div style=\"flex: 1 1 auto\"></div>\r\n    <!-- label -->\r\n    <span class=\"lf-content-title-card-label\">\r\n      {{ contentTitleCardConfig.label || \"\" }}\r\n    </span>\r\n    <!-- spacer -->\r\n    <div style=\"flex: 1 1 auto\"></div>\r\n    <!-- empty button spacer -->\r\n    <div\r\n      [style.width]=\"\r\n        contentTitleCardConfig.showBackButton && routeHistory.length > 1 ? '48px' : '0px'\r\n      \"></div>\r\n  </mat-card>\r\n}\r\n", styles: [".lf-content-title-card{z-index:98;height:80px;display:flex;flex-flow:row nowrap;align-items:center;border-radius:0}.lf-content-title-card .lf-content-title-card-label{font-size:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: ContentTitleCardComponent, isStandalone: false, selector: "lf-content-title-card", inputs: { libraryConfig: "libraryConfig", contentTitleCardConfig: "contentTitleCardConfig", isMobile: "isMobile", routeHistory: "routeHistory" }, outputs: { backButtonClickEvent: "backButtonClickEvent" }, ngImport: i0, template: "@if (contentTitleCardConfig && contentTitleCardConfig.enable) {\r\n  <mat-card\r\n    class=\"lf-content-title-card mat-elevation-z2 px-4\"\r\n    [ngClass]=\"contentTitleCardConfig.cssClass\">\r\n    <!-- back button -->\r\n    @if (contentTitleCardConfig.showBackButton && routeHistory.length > 1) {\r\n      <button mat-icon-button color=\"accent\" (click)=\"backButtonClicked()\">\r\n        <mat-icon>arrow_back_ios</mat-icon>\r\n      </button>\r\n    }\r\n    <!-- spacer -->\r\n    <div style=\"flex: 1 1 auto\"></div>\r\n    <!-- label -->\r\n    <span class=\"lf-content-title-card-label\">\r\n      {{ contentTitleCardConfig.label || \"\" }}\r\n    </span>\r\n    <!-- spacer -->\r\n    <div style=\"flex: 1 1 auto\"></div>\r\n    <!-- empty button spacer -->\r\n    <div\r\n      [style.width]=\"\r\n        contentTitleCardConfig.showBackButton && routeHistory.length > 1 ? '48px' : '0px'\r\n      \"></div>\r\n  </mat-card>\r\n}\r\n", styles: [".lf-content-title-card{z-index:var(--content-title-card-z-index);height:var(--content-title-card-height);display:flex;flex-flow:row nowrap;align-items:center;border-radius:0}.lf-content-title-card .lf-content-title-card-label{font-size:var(--content-title-card-labe-font-size);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ContentTitleCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lf-content-title-card', standalone: false, template: "@if (contentTitleCardConfig && contentTitleCardConfig.enable) {\r\n  <mat-card\r\n    class=\"lf-content-title-card mat-elevation-z2 px-4\"\r\n    [ngClass]=\"contentTitleCardConfig.cssClass\">\r\n    <!-- back button -->\r\n    @if (contentTitleCardConfig.showBackButton && routeHistory.length > 1) {\r\n      <button mat-icon-button color=\"accent\" (click)=\"backButtonClicked()\">\r\n        <mat-icon>arrow_back_ios</mat-icon>\r\n      </button>\r\n    }\r\n    <!-- spacer -->\r\n    <div style=\"flex: 1 1 auto\"></div>\r\n    <!-- label -->\r\n    <span class=\"lf-content-title-card-label\">\r\n      {{ contentTitleCardConfig.label || \"\" }}\r\n    </span>\r\n    <!-- spacer -->\r\n    <div style=\"flex: 1 1 auto\"></div>\r\n    <!-- empty button spacer -->\r\n    <div\r\n      [style.width]=\"\r\n        contentTitleCardConfig.showBackButton && routeHistory.length > 1 ? '48px' : '0px'\r\n      \"></div>\r\n  </mat-card>\r\n}\r\n", styles: [".lf-content-title-card{z-index:98;height:80px;display:flex;flex-flow:row nowrap;align-items:center;border-radius:0}.lf-content-title-card .lf-content-title-card-label{font-size:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
+            args: [{ selector: 'lf-content-title-card', standalone: false, template: "@if (contentTitleCardConfig && contentTitleCardConfig.enable) {\r\n  <mat-card\r\n    class=\"lf-content-title-card mat-elevation-z2 px-4\"\r\n    [ngClass]=\"contentTitleCardConfig.cssClass\">\r\n    <!-- back button -->\r\n    @if (contentTitleCardConfig.showBackButton && routeHistory.length > 1) {\r\n      <button mat-icon-button color=\"accent\" (click)=\"backButtonClicked()\">\r\n        <mat-icon>arrow_back_ios</mat-icon>\r\n      </button>\r\n    }\r\n    <!-- spacer -->\r\n    <div style=\"flex: 1 1 auto\"></div>\r\n    <!-- label -->\r\n    <span class=\"lf-content-title-card-label\">\r\n      {{ contentTitleCardConfig.label || \"\" }}\r\n    </span>\r\n    <!-- spacer -->\r\n    <div style=\"flex: 1 1 auto\"></div>\r\n    <!-- empty button spacer -->\r\n    <div\r\n      [style.width]=\"\r\n        contentTitleCardConfig.showBackButton && routeHistory.length > 1 ? '48px' : '0px'\r\n      \"></div>\r\n  </mat-card>\r\n}\r\n", styles: [".lf-content-title-card{z-index:var(--content-title-card-z-index);height:var(--content-title-card-height);display:flex;flex-flow:row nowrap;align-items:center;border-radius:0}.lf-content-title-card .lf-content-title-card-label{font-size:var(--content-title-card-labe-font-size);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
         }], propDecorators: { libraryConfig: [{
                 type: Input
             }], contentTitleCardConfig: [{
@@ -270,7 +270,7 @@ class DrawerComponent {
         this.libraryConfig = null;
         this.drawerConfig = null;
         this.isMobile = false;
-        this.fixedOffset = 0;
+        this.headerEnabled = false;
         this.drawerConfigUpdateEvent = new EventEmitter();
     }
     ngOnInit() {
@@ -287,18 +287,18 @@ class DrawerComponent {
         ;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: DrawerComponent, isStandalone: false, selector: "lf-drawer", inputs: { libraryConfig: "libraryConfig", drawerConfig: "drawerConfig", isMobile: "isMobile", fixedOffset: "fixedOffset", drawerPortal: "drawerPortal" }, outputs: { drawerConfigUpdateEvent: "drawerConfigUpdateEvent" }, ngImport: i0, template: "@if (drawerConfig && drawerConfig.enable) {\r\n  <mat-sidenav-container\r\n    class=\"lf-drawer-container lf-transitions\"\r\n    [ngClass]=\"drawerConfig.cssClass\">\r\n    <!-- drawer -->\r\n    <mat-sidenav\r\n      class=\"lf-drawer mat-elevation-z2\"\r\n      [class.mobile]=\"isMobile\"\r\n      [mode]=\"isMobile ? 'over' : 'side'\"\r\n      [opened]=\"drawerConfig.open\"\r\n      [autoFocus]=\"false\"\r\n      [fixedInViewport]=\"drawerConfig.fixed\"\r\n      [fixedTopGap]=\"fixedOffset\"\r\n      (closed)=\"drawerClosed()\"\r\n      #drawer>\r\n      <!-- drawer content -->\r\n      <!-- <ng-content select=\"[drawerContent]\"></ng-content> -->\r\n      @if (drawerPortal) {\r\n        <ng-template [cdkPortalOutlet]=\"drawerPortal\"></ng-template>\r\n      } @else {\r\n        <ng-content select=\"[drawerContent]\"></ng-content>\r\n      }\r\n    </mat-sidenav>\r\n    <mat-sidenav-content>\r\n      <!-- main content -->\r\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n    </mat-sidenav-content>\r\n  </mat-sidenav-container>\r\n} @else {\r\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n}\r\n\r\n<!-- render content without drawer -->\r\n\r\n<!-- this template is required to allow multiple <ng-content></ng-content> -->\r\n<ng-template #content><ng-content></ng-content></ng-template>\r\n", styles: [".lf-drawer-container{z-index:unset!important}.lf-drawer-container .lf-drawer{z-index:97;width:208px}.lf-drawer-container .lf-drawer.mobile{z-index:101}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i2$1.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i2$1.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "directive", type: i3$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: DrawerComponent, isStandalone: false, selector: "lf-drawer", inputs: { libraryConfig: "libraryConfig", drawerConfig: "drawerConfig", isMobile: "isMobile", headerEnabled: "headerEnabled", drawerPortal: "drawerPortal" }, outputs: { drawerConfigUpdateEvent: "drawerConfigUpdateEvent" }, ngImport: i0, template: "@if (drawerConfig && drawerConfig.enable) {\r\n  <mat-sidenav-container\r\n    class=\"lf-drawer-container lf-transitions\"\r\n    [ngClass]=\"drawerConfig.cssClass\">\r\n    <!-- drawer -->\r\n    <mat-sidenav\r\n      class=\"lf-drawer mat-elevation-z2\"\r\n      [class.mobile]=\"isMobile\"\r\n      [mode]=\"isMobile ? 'over' : 'side'\"\r\n      [opened]=\"drawerConfig.open\"\r\n      [autoFocus]=\"false\"\r\n      [fixedInViewport]=\"drawerConfig.fixed\"\r\n      [class.lf-drawer-show-header]=\"headerEnabled && drawerConfig.fixed\"\r\n      (closed)=\"drawerClosed()\"\r\n      #drawer>\r\n      <!-- drawer content -->\r\n      <!-- <ng-content select=\"[drawerContent]\"></ng-content> -->\r\n      @if (drawerPortal) {\r\n        <ng-template [cdkPortalOutlet]=\"drawerPortal\"></ng-template>\r\n      } @else {\r\n        <ng-content select=\"[drawerContent]\"></ng-content>\r\n      }\r\n    </mat-sidenav>\r\n    <mat-sidenav-content>\r\n      <!-- main content -->\r\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n    </mat-sidenav-content>\r\n  </mat-sidenav-container>\r\n} @else {\r\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n}\r\n\r\n<!-- render content without drawer -->\r\n\r\n<!-- this template is required to allow multiple <ng-content></ng-content> -->\r\n<ng-template #content><ng-content></ng-content></ng-template>\r\n", styles: [".lf-drawer-container{z-index:unset!important}.lf-drawer-container .lf-drawer{z-index:var(--drawer-z-index);width:var(--drawer-width)}.lf-drawer-container .lf-drawer.mobile{z-index:var(--loading-overlay-z-index)}.lf-drawer-container .lf-drawer.lf-drawer-show-header{top:var(--header-height)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i2$1.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i2$1.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "directive", type: i3$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: DrawerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lf-drawer', standalone: false, template: "@if (drawerConfig && drawerConfig.enable) {\r\n  <mat-sidenav-container\r\n    class=\"lf-drawer-container lf-transitions\"\r\n    [ngClass]=\"drawerConfig.cssClass\">\r\n    <!-- drawer -->\r\n    <mat-sidenav\r\n      class=\"lf-drawer mat-elevation-z2\"\r\n      [class.mobile]=\"isMobile\"\r\n      [mode]=\"isMobile ? 'over' : 'side'\"\r\n      [opened]=\"drawerConfig.open\"\r\n      [autoFocus]=\"false\"\r\n      [fixedInViewport]=\"drawerConfig.fixed\"\r\n      [fixedTopGap]=\"fixedOffset\"\r\n      (closed)=\"drawerClosed()\"\r\n      #drawer>\r\n      <!-- drawer content -->\r\n      <!-- <ng-content select=\"[drawerContent]\"></ng-content> -->\r\n      @if (drawerPortal) {\r\n        <ng-template [cdkPortalOutlet]=\"drawerPortal\"></ng-template>\r\n      } @else {\r\n        <ng-content select=\"[drawerContent]\"></ng-content>\r\n      }\r\n    </mat-sidenav>\r\n    <mat-sidenav-content>\r\n      <!-- main content -->\r\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n    </mat-sidenav-content>\r\n  </mat-sidenav-container>\r\n} @else {\r\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n}\r\n\r\n<!-- render content without drawer -->\r\n\r\n<!-- this template is required to allow multiple <ng-content></ng-content> -->\r\n<ng-template #content><ng-content></ng-content></ng-template>\r\n", styles: [".lf-drawer-container{z-index:unset!important}.lf-drawer-container .lf-drawer{z-index:97;width:208px}.lf-drawer-container .lf-drawer.mobile{z-index:101}\n"] }]
+            args: [{ selector: 'lf-drawer', standalone: false, template: "@if (drawerConfig && drawerConfig.enable) {\r\n  <mat-sidenav-container\r\n    class=\"lf-drawer-container lf-transitions\"\r\n    [ngClass]=\"drawerConfig.cssClass\">\r\n    <!-- drawer -->\r\n    <mat-sidenav\r\n      class=\"lf-drawer mat-elevation-z2\"\r\n      [class.mobile]=\"isMobile\"\r\n      [mode]=\"isMobile ? 'over' : 'side'\"\r\n      [opened]=\"drawerConfig.open\"\r\n      [autoFocus]=\"false\"\r\n      [fixedInViewport]=\"drawerConfig.fixed\"\r\n      [class.lf-drawer-show-header]=\"headerEnabled && drawerConfig.fixed\"\r\n      (closed)=\"drawerClosed()\"\r\n      #drawer>\r\n      <!-- drawer content -->\r\n      <!-- <ng-content select=\"[drawerContent]\"></ng-content> -->\r\n      @if (drawerPortal) {\r\n        <ng-template [cdkPortalOutlet]=\"drawerPortal\"></ng-template>\r\n      } @else {\r\n        <ng-content select=\"[drawerContent]\"></ng-content>\r\n      }\r\n    </mat-sidenav>\r\n    <mat-sidenav-content>\r\n      <!-- main content -->\r\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n    </mat-sidenav-content>\r\n  </mat-sidenav-container>\r\n} @else {\r\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n}\r\n\r\n<!-- render content without drawer -->\r\n\r\n<!-- this template is required to allow multiple <ng-content></ng-content> -->\r\n<ng-template #content><ng-content></ng-content></ng-template>\r\n", styles: [".lf-drawer-container{z-index:unset!important}.lf-drawer-container .lf-drawer{z-index:var(--drawer-z-index);width:var(--drawer-width)}.lf-drawer-container .lf-drawer.mobile{z-index:var(--loading-overlay-z-index)}.lf-drawer-container .lf-drawer.lf-drawer-show-header{top:var(--header-height)!important}\n"] }]
         }], propDecorators: { libraryConfig: [{
                 type: Input
             }], drawerConfig: [{
                 type: Input
             }], isMobile: [{
                 type: Input
-            }], fixedOffset: [{
+            }], headerEnabled: [{
                 type: Input
             }], drawerPortal: [{
                 type: Input
@@ -315,17 +315,13 @@ class FloatingButtonComponent {
         this.bottomBarEnabled = false;
         this.floatingButtonConfigUpdateEvent = new EventEmitter();
         this.floatingButtonClickEvent = new EventEmitter();
-        this.DEFAULT_OFFSET = 24;
-        this.navbarOffset = 64;
-        this.bottomBarOffset = 56;
     }
     ngOnInit() {
         if (this.floatingButtonConfig) {
             const updatedFloatingButtonConfigConfig = {
                 ...this.floatingButtonConfig,
                 matIcon: (!this.floatingButtonConfig.matIcon && !this.floatingButtonConfig.svgIcon) ? 'arrow_upward' : this.floatingButtonConfig.matIcon || this.floatingButtonConfig.svgIcon,
-                horizontalPosition: this.floatingButtonConfig.horizontalPosition ?? 'right',
-                bottomPositionPx: this.floatingButtonConfig.bottomPositionPx ?? this.DEFAULT_OFFSET,
+                horizontalPosition: this.floatingButtonConfig.horizontalPosition ?? 'right'
             };
             if (JSON.stringify(updatedFloatingButtonConfigConfig) !== JSON.stringify(this.floatingButtonConfig)) {
                 this.floatingButtonConfigUpdateEvent.emit(updatedFloatingButtonConfigConfig);
@@ -335,22 +331,12 @@ class FloatingButtonComponent {
     buttonClicked(id) {
         this.floatingButtonClickEvent.emit(id);
     }
-    getBottomPosition() {
-        let bottomPosition = this.floatingButtonConfig?.bottomPositionPx || this.DEFAULT_OFFSET;
-        if (this.isMobile) {
-            bottomPosition += this.navbarOffset;
-        }
-        if (this.bottomBarEnabled) {
-            bottomPosition += this.bottomBarOffset;
-        }
-        return bottomPosition;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: FloatingButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: FloatingButtonComponent, isStandalone: false, selector: "lf-floating-button", inputs: { libraryConfig: "libraryConfig", floatingButtonConfig: "floatingButtonConfig", onTop: "onTop", isMobile: "isMobile", bottomBarEnabled: "bottomBarEnabled" }, outputs: { floatingButtonConfigUpdateEvent: "floatingButtonConfigUpdateEvent", floatingButtonClickEvent: "floatingButtonClickEvent" }, ngImport: i0, template: "@if (\r\n  floatingButtonConfig && floatingButtonConfig.enable && (!floatingButtonConfig.autoHide || !onTop)\r\n) {\r\n  <button\r\n    mat-fab\r\n    color=\"accent\"\r\n    class=\"lf-floating-button lf-transitions\"\r\n    [style.bottom]=\"getBottomPosition() + 'px'\"\r\n    [ngClass]=\"floatingButtonConfig.cssClass\"\r\n    [ngClass]=\"floatingButtonConfig.horizontalPosition\"\r\n    [extended]=\"!!floatingButtonConfig.label\"\r\n    (click)=\"buttonClicked(floatingButtonConfig.id)\"\r\n    [matTooltip]=\"floatingButtonConfig.tooltip!\">\r\n    <!-- mat icon -->\r\n    @if (floatingButtonConfig.matIcon) {\r\n      <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n        {{ floatingButtonConfig.matIcon }}\r\n      </mat-icon>\r\n    } @else if (floatingButtonConfig.svgIcon) {\r\n      <mat-icon [svgIcon]=\"floatingButtonConfig.svgIcon!\"></mat-icon>\r\n    }\r\n    <!-- svg icon -->\r\n    <!-- label -->\r\n    @if (floatingButtonConfig.label) {\r\n      <span class=\"lf-floating-button-label\">\r\n        {{ floatingButtonConfig.label }}\r\n      </span>\r\n    }\r\n  </button>\r\n}\r\n", styles: [".lf-floating-button{z-index:100;position:fixed}.lf-floating-button.left{left:24px}.lf-floating-button.center{left:50%;transform:translate(-50%)}.lf-floating-button.right{right:24px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: FloatingButtonComponent, isStandalone: false, selector: "lf-floating-button", inputs: { libraryConfig: "libraryConfig", floatingButtonConfig: "floatingButtonConfig", onTop: "onTop", isMobile: "isMobile", bottomBarEnabled: "bottomBarEnabled" }, outputs: { floatingButtonConfigUpdateEvent: "floatingButtonConfigUpdateEvent", floatingButtonClickEvent: "floatingButtonClickEvent" }, ngImport: i0, template: "@if (\r\n  floatingButtonConfig && floatingButtonConfig.enable && (!floatingButtonConfig.autoHide || !onTop)\r\n) {\r\n  <button\r\n    mat-fab\r\n    color=\"accent\"\r\n    class=\"lf-floating-button lf-transitions\"\r\n    [ngClass]=\"floatingButtonConfig.cssClass\"\r\n    [ngClass]=\"floatingButtonConfig.horizontalPosition\"\r\n    [class.show-navbar]=\"isMobile && !bottomBarEnabled\"\r\n    [class.show-bottom-bar]=\"bottomBarEnabled && !isMobile\"\r\n    [class.show-navbar-and-bottom-bar]=\"isMobile && bottomBarEnabled\"\r\n    [extended]=\"!!floatingButtonConfig.label\"\r\n    (click)=\"buttonClicked(floatingButtonConfig.id)\"\r\n    [matTooltip]=\"floatingButtonConfig.tooltip!\">\r\n    <!-- mat icon -->\r\n    @if (floatingButtonConfig.matIcon) {\r\n      <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n        {{ floatingButtonConfig.matIcon }}\r\n      </mat-icon>\r\n    } @else if (floatingButtonConfig.svgIcon) {\r\n      <mat-icon [svgIcon]=\"floatingButtonConfig.svgIcon!\"></mat-icon>\r\n    }\r\n    <!-- svg icon -->\r\n    <!-- label -->\r\n    @if (floatingButtonConfig.label) {\r\n      <span class=\"lf-floating-button-label\">\r\n        {{ floatingButtonConfig.label }}\r\n      </span>\r\n    }\r\n  </button>\r\n}\r\n", styles: [".lf-floating-button{z-index:var(--floating-button-z-index);position:fixed;bottom:var(--floating-button-bottom)}.lf-floating-button.show-navbar{bottom:calc(var(--floating-button-bottom) + var(--navbar-height-mobile))}.lf-floating-button.show-bottom-bar{bottom:calc(var(--floating-button-bottom) + var(--bottom-bar-height))}.lf-floating-button.show-navbar-and-bottom-bar{bottom:calc(var(--floating-button-bottom) + var(--navbar-height-mobile) + var(--bottom-bar-height))}.lf-floating-button.left{left:var(--floating-button-right)}.lf-floating-button.center{left:50%;transform:translate(-50%)}.lf-floating-button.right{right:var(--floating-button-right)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: FloatingButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lf-floating-button', standalone: false, template: "@if (\r\n  floatingButtonConfig && floatingButtonConfig.enable && (!floatingButtonConfig.autoHide || !onTop)\r\n) {\r\n  <button\r\n    mat-fab\r\n    color=\"accent\"\r\n    class=\"lf-floating-button lf-transitions\"\r\n    [style.bottom]=\"getBottomPosition() + 'px'\"\r\n    [ngClass]=\"floatingButtonConfig.cssClass\"\r\n    [ngClass]=\"floatingButtonConfig.horizontalPosition\"\r\n    [extended]=\"!!floatingButtonConfig.label\"\r\n    (click)=\"buttonClicked(floatingButtonConfig.id)\"\r\n    [matTooltip]=\"floatingButtonConfig.tooltip!\">\r\n    <!-- mat icon -->\r\n    @if (floatingButtonConfig.matIcon) {\r\n      <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n        {{ floatingButtonConfig.matIcon }}\r\n      </mat-icon>\r\n    } @else if (floatingButtonConfig.svgIcon) {\r\n      <mat-icon [svgIcon]=\"floatingButtonConfig.svgIcon!\"></mat-icon>\r\n    }\r\n    <!-- svg icon -->\r\n    <!-- label -->\r\n    @if (floatingButtonConfig.label) {\r\n      <span class=\"lf-floating-button-label\">\r\n        {{ floatingButtonConfig.label }}\r\n      </span>\r\n    }\r\n  </button>\r\n}\r\n", styles: [".lf-floating-button{z-index:100;position:fixed}.lf-floating-button.left{left:24px}.lf-floating-button.center{left:50%;transform:translate(-50%)}.lf-floating-button.right{right:24px}\n"] }]
+            args: [{ selector: 'lf-floating-button', standalone: false, template: "@if (\r\n  floatingButtonConfig && floatingButtonConfig.enable && (!floatingButtonConfig.autoHide || !onTop)\r\n) {\r\n  <button\r\n    mat-fab\r\n    color=\"accent\"\r\n    class=\"lf-floating-button lf-transitions\"\r\n    [ngClass]=\"floatingButtonConfig.cssClass\"\r\n    [ngClass]=\"floatingButtonConfig.horizontalPosition\"\r\n    [class.show-navbar]=\"isMobile && !bottomBarEnabled\"\r\n    [class.show-bottom-bar]=\"bottomBarEnabled && !isMobile\"\r\n    [class.show-navbar-and-bottom-bar]=\"isMobile && bottomBarEnabled\"\r\n    [extended]=\"!!floatingButtonConfig.label\"\r\n    (click)=\"buttonClicked(floatingButtonConfig.id)\"\r\n    [matTooltip]=\"floatingButtonConfig.tooltip!\">\r\n    <!-- mat icon -->\r\n    @if (floatingButtonConfig.matIcon) {\r\n      <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n        {{ floatingButtonConfig.matIcon }}\r\n      </mat-icon>\r\n    } @else if (floatingButtonConfig.svgIcon) {\r\n      <mat-icon [svgIcon]=\"floatingButtonConfig.svgIcon!\"></mat-icon>\r\n    }\r\n    <!-- svg icon -->\r\n    <!-- label -->\r\n    @if (floatingButtonConfig.label) {\r\n      <span class=\"lf-floating-button-label\">\r\n        {{ floatingButtonConfig.label }}\r\n      </span>\r\n    }\r\n  </button>\r\n}\r\n", styles: [".lf-floating-button{z-index:var(--floating-button-z-index);position:fixed;bottom:var(--floating-button-bottom)}.lf-floating-button.show-navbar{bottom:calc(var(--floating-button-bottom) + var(--navbar-height-mobile))}.lf-floating-button.show-bottom-bar{bottom:calc(var(--floating-button-bottom) + var(--bottom-bar-height))}.lf-floating-button.show-navbar-and-bottom-bar{bottom:calc(var(--floating-button-bottom) + var(--navbar-height-mobile) + var(--bottom-bar-height))}.lf-floating-button.left{left:var(--floating-button-right)}.lf-floating-button.center{left:50%;transform:translate(-50%)}.lf-floating-button.right{right:var(--floating-button-right)}\n"] }]
         }], propDecorators: { libraryConfig: [{
                 type: Input
             }], floatingButtonConfig: [{
@@ -373,11 +359,11 @@ class FooterComponent {
         this.footerConfig = null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: FooterComponent, isStandalone: false, selector: "lf-footer", inputs: { libraryConfig: "libraryConfig", footerConfig: "footerConfig" }, ngImport: i0, template: "@if (footerConfig && footerConfig.enable) {\r\n  <mat-card class=\"lf-footer lf-transitions mat-elevation-z2 p-4\" [ngClass]=\"footerConfig.cssClass\">\r\n    <!-- svg logo -->\r\n    @if (footerConfig.svgLogo) {\r\n      <mat-icon\r\n        class=\"lf-footer-logo mb-4\"\r\n        color=\"primary\"\r\n        [svgIcon]=\"footerConfig.svgLogo!\"></mat-icon>\r\n    } @else {\r\n      @if (footerConfig.imgLogo) {\r\n        <img class=\"lf-footer-logo mb-4\" [src]=\"footerConfig.imgLogo\" alt=\"Logo\" />\r\n      }\r\n    }\r\n    <!-- img logo -->\r\n    <!-- links -->\r\n    @if (footerConfig.links) {\r\n      <div class=\"lf-footer-links mb-4\">\r\n        @for (link of footerConfig.links; track $index; let i = $index) {\r\n          <div class=\"lf-footer-link\" [class.mr-2]=\"i < footerConfig.links!.length - 1\">\r\n            @if (link.routerLink) {\r\n              <a [routerLink]=\"[link.routerLink]\">{{ link.label || \"\" }}</a>\r\n            } @else {\r\n              <a [href]=\"link.href\" [target]=\"link.externalTab ? '_blank' : null\">\r\n                {{ link.label }}\r\n              </a>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n    <!-- copyright -->\r\n    @if (footerConfig.copyright) {\r\n      <span class=\"lf-footer-copyright\">\r\n        {{ footerConfig.copyright }}\r\n      </span>\r\n    }\r\n  </mat-card>\r\n}\r\n", styles: [".lf-footer{overflow:hidden;flex-flow:column;align-items:center;justify-content:center;min-height:100px;border-radius:0;border-top:solid 1px rgba(0,0,0,.12)}.lf-footer .lf-footer-logo{width:96px;height:96px}.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:12px}.lf-footer .lf-footer-links .lf-footer-link a:hover{color:var(--color-primary)}.lf-footer .lf-footer-copyright{font-size:12px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: FooterComponent, isStandalone: false, selector: "lf-footer", inputs: { libraryConfig: "libraryConfig", footerConfig: "footerConfig" }, ngImport: i0, template: "@if (footerConfig && footerConfig.enable) {\r\n  <mat-card class=\"lf-footer lf-transitions mat-elevation-z2 p-4\" [ngClass]=\"footerConfig.cssClass\">\r\n    <!-- svg logo -->\r\n    @if (footerConfig.svgLogo) {\r\n      <mat-icon\r\n        class=\"lf-footer-logo mb-4\"\r\n        color=\"primary\"\r\n        [svgIcon]=\"footerConfig.svgLogo!\"></mat-icon>\r\n    } @else {\r\n      @if (footerConfig.imgLogo) {\r\n        <img class=\"lf-footer-logo mb-4\" [src]=\"footerConfig.imgLogo\" alt=\"Logo\" />\r\n      }\r\n    }\r\n    <!-- img logo -->\r\n    <!-- links -->\r\n    @if (footerConfig.links) {\r\n      <div class=\"lf-footer-links mb-4\">\r\n        @for (link of footerConfig.links; track $index; let i = $index) {\r\n          <div class=\"lf-footer-link\" [class.mr-2]=\"i < footerConfig.links!.length - 1\">\r\n            @if (link.routerLink) {\r\n              <a [routerLink]=\"[link.routerLink]\">{{ link.label || \"\" }}</a>\r\n            } @else {\r\n              <a [href]=\"link.href\" [target]=\"link.externalTab ? '_blank' : null\">\r\n                {{ link.label }}\r\n              </a>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n    <!-- copyright -->\r\n    @if (footerConfig.copyright) {\r\n      <span class=\"lf-footer-copyright\">\r\n        {{ footerConfig.copyright }}\r\n      </span>\r\n    }\r\n  </mat-card>\r\n}\r\n", styles: [".lf-footer{overflow:hidden;flex-flow:column;align-items:center;justify-content:center;min-height:var(--footer-height);border-radius:0;border-top:solid 1px rgba(0,0,0,.12)}.lf-footer .lf-footer-logo{width:var(--footer-logo-size);height:var(--footer-logo-size)}.lf-footer .lf-footer-links{display:flex;flex-flow:row wrap;align-items:center;justify-content:center}.lf-footer .lf-footer-links .lf-footer-link a{text-decoration:none;color:unset;font-size:var(--footer-font-size)}.lf-footer .lf-footer-links .lf-footer-link a:hover{color:var(--color-primary)}.lf-footer .lf-footer-copyright{font-size:var(--footer-font-size)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: FooterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lf-footer', standalone: false, template: "@if (footerConfig && footerConfig.enable) {\r\n  <mat-card class=\"lf-footer lf-transitions mat-elevation-z2 p-4\" [ngClass]=\"footerConfig.cssClass\">\r\n    <!-- svg logo -->\r\n    @if (footerConfig.svgLogo) {\r\n      <mat-icon\r\n        class=\"lf-footer-logo mb-4\"\r\n        color=\"primary\"\r\n        [svgIcon]=\"footerConfig.svgLogo!\"></mat-icon>\r\n    } @else {\r\n      @if (footerConfig.imgLogo) {\r\n        <img class=\"lf-footer-logo mb-4\" [src]=\"footerConfig.imgLogo\" alt=\"Logo\" />\r\n      }\r\n    }\r\n    <!-- img logo -->\r\n    <!-- links -->\r\n    @if (footerConfig.links) {\r\n      <div class=\"lf-footer-links mb-4\">\r\n        @for (link of footerConfig.links; track $index; let i = $index) {\r\n          <div class=\"lf-footer-link\" [class.mr-2]=\"i < footerConfig.links!.length - 1\">\r\n            @if (link.routerLink) {\r\n              <a [routerLink]=\"[link.routerLink]\">{{ link.label || \"\" }}</a>\r\n            } @else {\r\n              <a [href]=\"link.href\" [target]=\"link.externalTab ? '_blank' : null\">\r\n                {{ link.label }}\r\n              </a>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n    <!-- copyright -->\r\n    @if (footerConfig.copyright) {\r\n      <span class=\"lf-footer-copyright\">\r\n        {{ footerConfig.copyright }}\r\n      </span>\r\n    }\r\n  </mat-card>\r\n}\r\n", styles: [".lf-footer{overflow:hidden;flex-flow:column;align-items:center;justify-content:center;min-height:100px;border-radius:0;border-top:solid 1px rgba(0,0,0,.12)}.lf-footer .lf-footer-logo{width:96px;height:96px}.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:12px}.lf-footer .lf-footer-links .lf-footer-link a:hover{color:var(--color-primary)}.lf-footer .lf-footer-copyright{font-size:12px}\n"] }]
+            args: [{ selector: 'lf-footer', standalone: false, template: "@if (footerConfig && footerConfig.enable) {\r\n  <mat-card class=\"lf-footer lf-transitions mat-elevation-z2 p-4\" [ngClass]=\"footerConfig.cssClass\">\r\n    <!-- svg logo -->\r\n    @if (footerConfig.svgLogo) {\r\n      <mat-icon\r\n        class=\"lf-footer-logo mb-4\"\r\n        color=\"primary\"\r\n        [svgIcon]=\"footerConfig.svgLogo!\"></mat-icon>\r\n    } @else {\r\n      @if (footerConfig.imgLogo) {\r\n        <img class=\"lf-footer-logo mb-4\" [src]=\"footerConfig.imgLogo\" alt=\"Logo\" />\r\n      }\r\n    }\r\n    <!-- img logo -->\r\n    <!-- links -->\r\n    @if (footerConfig.links) {\r\n      <div class=\"lf-footer-links mb-4\">\r\n        @for (link of footerConfig.links; track $index; let i = $index) {\r\n          <div class=\"lf-footer-link\" [class.mr-2]=\"i < footerConfig.links!.length - 1\">\r\n            @if (link.routerLink) {\r\n              <a [routerLink]=\"[link.routerLink]\">{{ link.label || \"\" }}</a>\r\n            } @else {\r\n              <a [href]=\"link.href\" [target]=\"link.externalTab ? '_blank' : null\">\r\n                {{ link.label }}\r\n              </a>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n    <!-- copyright -->\r\n    @if (footerConfig.copyright) {\r\n      <span class=\"lf-footer-copyright\">\r\n        {{ footerConfig.copyright }}\r\n      </span>\r\n    }\r\n  </mat-card>\r\n}\r\n", styles: [".lf-footer{overflow:hidden;flex-flow:column;align-items:center;justify-content:center;min-height:var(--footer-height);border-radius:0;border-top:solid 1px rgba(0,0,0,.12)}.lf-footer .lf-footer-logo{width:var(--footer-logo-size);height:var(--footer-logo-size)}.lf-footer .lf-footer-links{display:flex;flex-flow:row wrap;align-items:center;justify-content:center}.lf-footer .lf-footer-links .lf-footer-link a{text-decoration:none;color:unset;font-size:var(--footer-font-size)}.lf-footer .lf-footer-links .lf-footer-link a:hover{color:var(--color-primary)}.lf-footer .lf-footer-copyright{font-size:var(--footer-font-size)}\n"] }]
         }], propDecorators: { libraryConfig: [{
                 type: Input
             }], footerConfig: [{
@@ -432,11 +418,11 @@ class InputComponent {
         this.inputChangeEvent.emit(this.inputValue);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: InputComponent, isStandalone: true, selector: "lf-input", inputs: { inputConfig: "inputConfig", isMobile: "isMobile" }, outputs: { inputSubmitEvent: "inputSubmitEvent", inputChangeEvent: "inputChangeEvent", inputPrefixActionEvent: "inputPrefixActionEvent" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "@if (inputConfig) {\r\n  <mat-form-field class=\"lf-input\" appearance=\"fill\" [class.lf-hide-hint]=\"!inputConfig.hint\">\r\n    <mat-label>{{ inputConfig.label || \"Search\" }}</mat-label>\r\n    @if (inputConfig.hint) {\r\n      <mat-hint>{{ inputConfig.hint }}</mat-hint>\r\n    }\r\n    <input\r\n      matInput\r\n      type=\"text\"\r\n      [(ngModel)]=\"inputValue\"\r\n      [disabled]=\"inputConfig.disabled!\"\r\n      (keyup.enter)=\"inputSubmitted(inputValue)\"\r\n      (ngModelChange)=\"inputChanged($event)\"\r\n      #input />\r\n    @if (isMobile) {\r\n      <button mat-icon-button matPrefix color=\"accent\" (click)=\"inputPrefixAction()\">\r\n        <mat-icon>arrow_back</mat-icon>\r\n      </button>\r\n    }\r\n    @if (inputValue) {\r\n      <button class=\"lf-input-close-button\" mat-icon-button matSuffix (click)=\"clearInput()\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    }\r\n    @if (inputConfig.matIconSubmit) {\r\n      <button\r\n        mat-icon-button\r\n        matSuffix\r\n        color=\"accent\"\r\n        type=\"submit\"\r\n        (click)=\"inputSubmitted(inputValue)\">\r\n        <mat-icon>\r\n          {{ inputConfig.matIconSubmit }}\r\n        </mat-icon>\r\n      </button>\r\n    }\r\n  </mat-form-field>\r\n}\r\n", styles: [".lf-input{width:100%}.lf-input ::ng-deep .mdc-text-field{border-radius:28px!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:#808080cc}.lf-input.lf-hide-hint ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i3$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: InputComponent, isStandalone: true, selector: "lf-input", inputs: { inputConfig: "inputConfig", isMobile: "isMobile" }, outputs: { inputSubmitEvent: "inputSubmitEvent", inputChangeEvent: "inputChangeEvent", inputPrefixActionEvent: "inputPrefixActionEvent" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "@if (inputConfig) {\r\n  <mat-form-field class=\"lf-input\" appearance=\"fill\" [class.lf-hide-hint]=\"!inputConfig.hint\">\r\n    <mat-label>{{ inputConfig.label || \"Search\" }}</mat-label>\r\n    @if (inputConfig.hint) {\r\n      <mat-hint>{{ inputConfig.hint }}</mat-hint>\r\n    }\r\n    <input\r\n      matInput\r\n      type=\"text\"\r\n      [(ngModel)]=\"inputValue\"\r\n      [disabled]=\"inputConfig.disabled!\"\r\n      (keyup.enter)=\"inputSubmitted(inputValue)\"\r\n      (ngModelChange)=\"inputChanged($event)\"\r\n      #input />\r\n    @if (isMobile) {\r\n      <button mat-icon-button matPrefix color=\"accent\" (click)=\"inputPrefixAction()\">\r\n        <mat-icon>arrow_back</mat-icon>\r\n      </button>\r\n    }\r\n    @if (inputValue) {\r\n      <button class=\"lf-input-close-button\" mat-icon-button matSuffix (click)=\"clearInput()\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    }\r\n    @if (inputConfig.matIconSubmit) {\r\n      <button\r\n        mat-icon-button\r\n        matSuffix\r\n        color=\"accent\"\r\n        type=\"submit\"\r\n        (click)=\"inputSubmitted(inputValue)\">\r\n        <mat-icon>\r\n          {{ inputConfig.matIconSubmit }}\r\n        </mat-icon>\r\n      </button>\r\n    }\r\n  </mat-form-field>\r\n}\r\n", styles: [".lf-input{width:100%}.lf-input ::ng-deep .mdc-text-field{border-radius:var(--header-input-border-radius)!important}.lf-input ::ng-deep .mdc-line-ripple:after{border-bottom-width:0!important}.lf-input ::ng-deep .mdc-line-ripple:before{border-bottom-width:0!important}.lf-input .lf-input-close-button{color:var(--color-gray)}.lf-input.lf-hide-hint ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i3$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lf-input', standalone: true, imports: [SharedModule], template: "@if (inputConfig) {\r\n  <mat-form-field class=\"lf-input\" appearance=\"fill\" [class.lf-hide-hint]=\"!inputConfig.hint\">\r\n    <mat-label>{{ inputConfig.label || \"Search\" }}</mat-label>\r\n    @if (inputConfig.hint) {\r\n      <mat-hint>{{ inputConfig.hint }}</mat-hint>\r\n    }\r\n    <input\r\n      matInput\r\n      type=\"text\"\r\n      [(ngModel)]=\"inputValue\"\r\n      [disabled]=\"inputConfig.disabled!\"\r\n      (keyup.enter)=\"inputSubmitted(inputValue)\"\r\n      (ngModelChange)=\"inputChanged($event)\"\r\n      #input />\r\n    @if (isMobile) {\r\n      <button mat-icon-button matPrefix color=\"accent\" (click)=\"inputPrefixAction()\">\r\n        <mat-icon>arrow_back</mat-icon>\r\n      </button>\r\n    }\r\n    @if (inputValue) {\r\n      <button class=\"lf-input-close-button\" mat-icon-button matSuffix (click)=\"clearInput()\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    }\r\n    @if (inputConfig.matIconSubmit) {\r\n      <button\r\n        mat-icon-button\r\n        matSuffix\r\n        color=\"accent\"\r\n        type=\"submit\"\r\n        (click)=\"inputSubmitted(inputValue)\">\r\n        <mat-icon>\r\n          {{ inputConfig.matIconSubmit }}\r\n        </mat-icon>\r\n      </button>\r\n    }\r\n  </mat-form-field>\r\n}\r\n", styles: [".lf-input{width:100%}.lf-input ::ng-deep .mdc-text-field{border-radius:28px!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:#808080cc}.lf-input.lf-hide-hint ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}\n"] }]
+            args: [{ selector: 'lf-input', standalone: true, imports: [SharedModule], template: "@if (inputConfig) {\r\n  <mat-form-field class=\"lf-input\" appearance=\"fill\" [class.lf-hide-hint]=\"!inputConfig.hint\">\r\n    <mat-label>{{ inputConfig.label || \"Search\" }}</mat-label>\r\n    @if (inputConfig.hint) {\r\n      <mat-hint>{{ inputConfig.hint }}</mat-hint>\r\n    }\r\n    <input\r\n      matInput\r\n      type=\"text\"\r\n      [(ngModel)]=\"inputValue\"\r\n      [disabled]=\"inputConfig.disabled!\"\r\n      (keyup.enter)=\"inputSubmitted(inputValue)\"\r\n      (ngModelChange)=\"inputChanged($event)\"\r\n      #input />\r\n    @if (isMobile) {\r\n      <button mat-icon-button matPrefix color=\"accent\" (click)=\"inputPrefixAction()\">\r\n        <mat-icon>arrow_back</mat-icon>\r\n      </button>\r\n    }\r\n    @if (inputValue) {\r\n      <button class=\"lf-input-close-button\" mat-icon-button matSuffix (click)=\"clearInput()\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    }\r\n    @if (inputConfig.matIconSubmit) {\r\n      <button\r\n        mat-icon-button\r\n        matSuffix\r\n        color=\"accent\"\r\n        type=\"submit\"\r\n        (click)=\"inputSubmitted(inputValue)\">\r\n        <mat-icon>\r\n          {{ inputConfig.matIconSubmit }}\r\n        </mat-icon>\r\n      </button>\r\n    }\r\n  </mat-form-field>\r\n}\r\n", styles: [".lf-input{width:100%}.lf-input ::ng-deep .mdc-text-field{border-radius:var(--header-input-border-radius)!important}.lf-input ::ng-deep .mdc-line-ripple:after{border-bottom-width:0!important}.lf-input ::ng-deep .mdc-line-ripple:before{border-bottom-width:0!important}.lf-input .lf-input-close-button{color:var(--color-gray)}.lf-input.lf-hide-hint ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}\n"] }]
         }], propDecorators: { input: [{
                 type: ViewChild,
                 args: ['input']
@@ -494,7 +480,7 @@ class HeaderComponent {
         return route === id;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: HeaderComponent, isStandalone: false, selector: "lf-header", inputs: { libraryConfig: "libraryConfig", headerConfig: "headerConfig", isMobile: "isMobile", routeLoading: "routeLoading", currentRoute: "currentRoute" }, outputs: { headerConfigUpdateEvent: "headerConfigUpdateEvent", headerButtonClickEvent: "headerButtonClickEvent", headerInputSubmitEvent: "headerInputSubmitEvent", headerInputChangeEvent: "headerInputChangeEvent" }, ngImport: i0, template: "@if (headerConfig && headerConfig.enable) {\r\n  <mat-toolbar\r\n    class=\"lf-header lf-transitions mat-elevation-z3\"\r\n    [class.px-4]=\"!isMobile\"\r\n    [class.px-1]=\"isMobile\"\r\n    [ngClass]=\"headerConfig.cssClass\"\r\n    color=\"primary\">\r\n    <!-- left menu button -->\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n      [ngTemplateOutletContext]=\"{\r\n        menuButton: headerConfig.leftMenuButton!,\r\n        hideLabel: true,\r\n      }\"></ng-container>\r\n    <!-- logo & title -->\r\n    <div\r\n      class=\"lf-header-logo-title-wrapper ml-1 mr-2\"\r\n      [class.ml-10]=\"headerConfig.leftMenuButton && !isMobile\">\r\n      <!-- link wrapper -->\r\n      <div\r\n        class=\"lf-header-logo-title-wrapper-link\"\r\n        [class.lf-clickable]=\"headerConfig.titleRouterLink\"\r\n        [routerLink]=\"headerConfig.titleRouterLink ? [headerConfig.titleRouterLink] : null\">\r\n        <!-- svg logo -->\r\n        @if (headerConfig.svgLogo) {\r\n          <mat-icon\r\n            class=\"lf-header-logo\"\r\n            [class.mr-3]=\"headerConfig.title\"\r\n            [svgIcon]=\"headerConfig.svgLogo!\"></mat-icon>\r\n        } @else {\r\n          @if (headerConfig.imgLogo) {\r\n            <img\r\n              class=\"lf-header-logo\"\r\n              [class.mr-3]=\"headerConfig.title\"\r\n              [src]=\"headerConfig.imgLogo\"\r\n              alt=\"Logo\" />\r\n          }\r\n        }\r\n        <!-- img logo -->\r\n        <!-- title -->\r\n        @if (headerConfig.title) {\r\n          <div class=\"lf-header-title-wrapper\">\r\n            @if (headerConfig.title) {\r\n              <span class=\"lf-header-title\">\r\n                {{ headerConfig.title }}\r\n              </span>\r\n            }\r\n            @if (headerConfig.subtitle) {\r\n              <span class=\"lf-header-subtitle\">\r\n                {{ headerConfig.subtitle }}\r\n              </span>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n    <!-- input -->\r\n    @if (headerConfig.inputConfig?.enable) {\r\n      <div class=\"spacer\"></div>\r\n      <lf-input\r\n        [class.lf-header-input-mobile]=\"isMobile\"\r\n        [class.mx-3]=\"!isMobile\"\r\n        [inputConfig]=\"headerConfig.inputConfig!\"\r\n        [isMobile]=\"isMobile\"\r\n        (inputSubmitEvent)=\"inputSubmitted($event)\"\r\n        (inputChangeEvent)=\"inputChanged($event)\"\r\n        (inputPrefixActionEvent)=\"inputClosed()\"></lf-input>\r\n    }\r\n    <!-- spacer -->\r\n    <div class=\"spacer\"></div>\r\n    <!-- right menu buttons -->\r\n    @for (button of headerConfig.rightMenuButtons; track button.id) {\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n        [ngTemplateOutletContext]=\"{\r\n          menuButton: button,\r\n        }\"></ng-container>\r\n    }\r\n  </mat-toolbar>\r\n  <!-- loading bar -->\r\n  @if (headerConfig.loading || (headerConfig.showRouteLoading && routeLoading)) {\r\n    <mat-progress-bar\r\n      class=\"lf-header-progress-bar\"\r\n      color=\"accent\"\r\n      mode=\"indeterminate\"></mat-progress-bar>\r\n  }\r\n}\r\n\r\n<!-- header menu button -->\r\n<ng-template #menuButtonTemplate let-menuButton=\"menuButton\" let-hideLabel=\"hideLabel\">\r\n  @if (menuButton) {\r\n    <!-- icon button -->\r\n    @if ((menuButton.matIcon || menuButton.svgIcon) && (!menuButton.label || hideLabel)) {\r\n      <button\r\n        mat-icon-button\r\n        class=\"lf-header-menu-button\"\r\n        [ngClass]=\"menuButton.cssClass\"\r\n        (click)=\"buttonClicked(menuButton.id)\"\r\n        [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n        [matTooltip]=\"menuButton.tooltip\"\r\n        [attr.aria-label]=\"menuButton.id\">\r\n        <!-- icon -->\r\n        <lf-icon [matIcon]=\"menuButton.matIcon\" [svgIcon]=\"menuButton.svgIcon\"></lf-icon>\r\n      </button>\r\n    } @else {\r\n      @if (!hideLabel) {\r\n        <button\r\n          mat-button\r\n          class=\"lf-header-menu-button\"\r\n          [class.lf-header-menu-button-active]=\"isActive(menuButton.id)\"\r\n          [ngClass]=\"menuButton.cssClass\"\r\n          (click)=\"buttonClicked(menuButton.id)\"\r\n          [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n          [matTooltip]=\"menuButton.tooltip\">\r\n          <!-- label -->\r\n          {{ menuButton.label }}\r\n        </button>\r\n      }\r\n    }\r\n    <!-- text button -->\r\n    <!-- menu -->\r\n    <mat-menu #menu=\"matMenu\">\r\n      <!-- label menu buttons -->\r\n      @for (button of menuButton.menuButtons; track button.id) {\r\n        <!-- menu button -->\r\n        @if (button.label) {\r\n          <button\r\n            mat-menu-item\r\n            [class.lf-header-menu-button-active]=\"isActive(button.id)\"\r\n            [ngClass]=\"button.cssClass\"\r\n            (click)=\"buttonClicked(button.id)\">\r\n            <!-- icon -->\r\n            <lf-icon\r\n              [matIcon]=\"button.matIcon\"\r\n              [svgIcon]=\"button.svgIcon\"\r\n              verticalAlign=\"bottom\"></lf-icon>\r\n            <!-- label -->\r\n            @if (button.label) {\r\n              <span>{{ button.label }}</span>\r\n            }\r\n          </button>\r\n        }\r\n      }\r\n      <!-- icon menu buttons -->\r\n      <div mat-menu-item class=\"lf-menu-icons px-1\">\r\n        @for (button of menuButton.menuButtons; track button.id) {\r\n          <!-- icon button -->\r\n          @if (!button.label && (button.matIcon || button.svgIcon)) {\r\n            <button\r\n              mat-icon-button\r\n              class=\"lf-menu-icon-button\"\r\n              [ngClass]=\"button.cssClass\"\r\n              (click)=\"buttonClicked(button.id)\"\r\n              [matTooltip]=\"button.tooltip\"\r\n              tabindex=\"0\">\r\n              <!-- icon -->\r\n              <lf-icon\r\n                [matIcon]=\"button.matIcon\"\r\n                [svgIcon]=\"button.svgIcon\"\r\n                verticalAlign=\"top\"></lf-icon>\r\n            </button>\r\n          }\r\n        }\r\n      </div>\r\n    </mat-menu>\r\n  }\r\n</ng-template>\r\n", styles: [".lf-header{z-index:100;position:fixed;top:0;height:64px}.lf-header .lf-header-menu-button{flex-shrink:0;max-width:144px}.lf-header .lf-header-menu-button ::ng-deep .mdc-button__label{overflow:hidden;text-overflow:ellipsis}.lf-header .lf-header-menu-button.lf-header-menu-button-active{background-color:#fff}.lf-header .lf-header-logo-title-wrapper{flex:0 0 auto;max-width:480px;overflow:hidden;display:flex}.lf-header .lf-header-logo-title-wrapper .lf-header-logo-title-wrapper-link{display:flex;flex-flow:row nowrap;align-items:center;flex:0}.lf-header .lf-header-logo-title-wrapper .lf-header-logo-title-wrapper-link.lf-clickable{cursor:pointer}.lf-header .lf-header-logo-title-wrapper .lf-header-logo{width:40px;height:40px;min-width:40px;min-height:40px}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper{display:flex;flex-flow:column}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-title{font-size:20px;line-height:28px}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-subtitle{font-size:12px;line-height:12px}.lf-header lf-input{z-index:100;flex:1 1 480px}.lf-header lf-input.lf-header-input-mobile{position:fixed!important;left:4px!important;right:4px!important;width:unset!important;max-width:unset!important}.lf-header .spacer{flex:1 0 auto}.lf-menu-icons{min-height:unset!important}.lf-header-progress-bar{z-index:100;position:fixed;top:64px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: InputComponent, selector: "lf-input", inputs: ["inputConfig", "isMobile"], outputs: ["inputSubmitEvent", "inputChangeEvent", "inputPrefixActionEvent"] }, { kind: "component", type: IconComponent, selector: "lf-icon", inputs: ["matIcon", "svgIcon", "verticalAlign"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: HeaderComponent, isStandalone: false, selector: "lf-header", inputs: { libraryConfig: "libraryConfig", headerConfig: "headerConfig", isMobile: "isMobile", routeLoading: "routeLoading", currentRoute: "currentRoute" }, outputs: { headerConfigUpdateEvent: "headerConfigUpdateEvent", headerButtonClickEvent: "headerButtonClickEvent", headerInputSubmitEvent: "headerInputSubmitEvent", headerInputChangeEvent: "headerInputChangeEvent" }, ngImport: i0, template: "@if (headerConfig && headerConfig.enable) {\r\n  <mat-toolbar\r\n    class=\"lf-header lf-transitions mat-elevation-z3\"\r\n    [class.px-4]=\"!isMobile\"\r\n    [class.px-1]=\"isMobile\"\r\n    [ngClass]=\"headerConfig.cssClass\"\r\n    color=\"primary\">\r\n    <!-- left menu button -->\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n      [ngTemplateOutletContext]=\"{\r\n        menuButton: headerConfig.leftMenuButton!,\r\n        hideLabel: true,\r\n      }\"></ng-container>\r\n    <!-- logo & title -->\r\n    <div\r\n      class=\"lf-header-logo-title-wrapper ml-1 mr-2\"\r\n      [class.ml-10]=\"headerConfig.leftMenuButton && !isMobile\">\r\n      <!-- link wrapper -->\r\n      <div\r\n        class=\"lf-header-logo-title-wrapper-link\"\r\n        [class.lf-clickable]=\"headerConfig.titleRouterLink\"\r\n        [routerLink]=\"headerConfig.titleRouterLink ? [headerConfig.titleRouterLink] : null\">\r\n        <!-- svg logo -->\r\n        @if (headerConfig.svgLogo) {\r\n          <mat-icon\r\n            class=\"lf-header-logo\"\r\n            [class.mr-3]=\"headerConfig.title\"\r\n            [svgIcon]=\"headerConfig.svgLogo!\"></mat-icon>\r\n        } @else {\r\n          @if (headerConfig.imgLogo) {\r\n            <img\r\n              class=\"lf-header-logo\"\r\n              [class.mr-3]=\"headerConfig.title\"\r\n              [src]=\"headerConfig.imgLogo\"\r\n              alt=\"Logo\" />\r\n          }\r\n        }\r\n        <!-- img logo -->\r\n        <!-- title -->\r\n        @if (headerConfig.title) {\r\n          <div class=\"lf-header-title-wrapper\">\r\n            @if (headerConfig.title) {\r\n              <span class=\"lf-header-title\">\r\n                {{ headerConfig.title }}\r\n              </span>\r\n            }\r\n            @if (headerConfig.subtitle) {\r\n              <span class=\"lf-header-subtitle\">\r\n                {{ headerConfig.subtitle }}\r\n              </span>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n    <!-- input -->\r\n    @if (headerConfig.inputConfig?.enable) {\r\n      <div class=\"spacer\"></div>\r\n      <lf-input\r\n        [class.lf-header-input-mobile]=\"isMobile\"\r\n        [class.mx-3]=\"!isMobile\"\r\n        [inputConfig]=\"headerConfig.inputConfig!\"\r\n        [isMobile]=\"isMobile\"\r\n        (inputSubmitEvent)=\"inputSubmitted($event)\"\r\n        (inputChangeEvent)=\"inputChanged($event)\"\r\n        (inputPrefixActionEvent)=\"inputClosed()\"></lf-input>\r\n    }\r\n    <!-- spacer -->\r\n    <div class=\"spacer\"></div>\r\n    <!-- right menu buttons -->\r\n    @for (button of headerConfig.rightMenuButtons; track button.id) {\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n        [ngTemplateOutletContext]=\"{\r\n          menuButton: button,\r\n        }\"></ng-container>\r\n    }\r\n  </mat-toolbar>\r\n  <!-- loading bar -->\r\n  @if (headerConfig.loading || (headerConfig.showRouteLoading && routeLoading)) {\r\n    <mat-progress-bar\r\n      class=\"lf-header-progress-bar\"\r\n      color=\"accent\"\r\n      mode=\"indeterminate\"></mat-progress-bar>\r\n  }\r\n}\r\n\r\n<!-- header menu button -->\r\n<ng-template #menuButtonTemplate let-menuButton=\"menuButton\" let-hideLabel=\"hideLabel\">\r\n  @if (menuButton) {\r\n    <!-- icon button -->\r\n    @if ((menuButton.matIcon || menuButton.svgIcon) && (!menuButton.label || hideLabel)) {\r\n      <button\r\n        mat-icon-button\r\n        class=\"lf-header-menu-button\"\r\n        [ngClass]=\"menuButton.cssClass\"\r\n        (click)=\"buttonClicked(menuButton.id)\"\r\n        [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n        [matTooltip]=\"menuButton.tooltip\"\r\n        [attr.aria-label]=\"menuButton.id\">\r\n        <!-- icon -->\r\n        <lf-icon [matIcon]=\"menuButton.matIcon\" [svgIcon]=\"menuButton.svgIcon\"></lf-icon>\r\n      </button>\r\n    } @else {\r\n      @if (!hideLabel) {\r\n        <button\r\n          mat-button\r\n          class=\"lf-header-menu-button\"\r\n          [class.lf-header-menu-button-active]=\"isActive(menuButton.id)\"\r\n          [ngClass]=\"menuButton.cssClass\"\r\n          (click)=\"buttonClicked(menuButton.id)\"\r\n          [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n          [matTooltip]=\"menuButton.tooltip\">\r\n          <!-- label -->\r\n          {{ menuButton.label }}\r\n        </button>\r\n      }\r\n    }\r\n    <!-- text button -->\r\n    <!-- menu -->\r\n    <mat-menu #menu=\"matMenu\">\r\n      <!-- label menu buttons -->\r\n      @for (button of menuButton.menuButtons; track button.id) {\r\n        <!-- menu button -->\r\n        @if (button.label) {\r\n          <button\r\n            mat-menu-item\r\n            [class.lf-header-menu-button-active]=\"isActive(button.id)\"\r\n            [ngClass]=\"button.cssClass\"\r\n            (click)=\"buttonClicked(button.id)\">\r\n            <!-- icon -->\r\n            <lf-icon\r\n              [matIcon]=\"button.matIcon\"\r\n              [svgIcon]=\"button.svgIcon\"\r\n              verticalAlign=\"bottom\"></lf-icon>\r\n            <!-- label -->\r\n            @if (button.label) {\r\n              <span>{{ button.label }}</span>\r\n            }\r\n          </button>\r\n        }\r\n      }\r\n      <!-- icon menu buttons -->\r\n      <div mat-menu-item class=\"lf-menu-icons px-1\">\r\n        @for (button of menuButton.menuButtons; track button.id) {\r\n          <!-- icon button -->\r\n          @if (!button.label && (button.matIcon || button.svgIcon)) {\r\n            <button\r\n              mat-icon-button\r\n              class=\"lf-menu-icon-button\"\r\n              [ngClass]=\"button.cssClass\"\r\n              (click)=\"buttonClicked(button.id)\"\r\n              [matTooltip]=\"button.tooltip\"\r\n              tabindex=\"0\">\r\n              <!-- icon -->\r\n              <lf-icon\r\n                [matIcon]=\"button.matIcon\"\r\n                [svgIcon]=\"button.svgIcon\"\r\n                verticalAlign=\"top\"></lf-icon>\r\n            </button>\r\n          }\r\n        }\r\n      </div>\r\n    </mat-menu>\r\n  }\r\n</ng-template>\r\n", styles: [".lf-header{z-index:var(--header-z-index);position:fixed;top:0;height:var(--header-height)}.lf-header .lf-header-menu-button{flex-shrink:0;max-width:var(--header-menu-button-max-width)}.lf-header .lf-header-menu-button ::ng-deep .mdc-button__label{overflow:hidden;text-overflow:ellipsis}.lf-header .lf-header-menu-button.lf-header-menu-button-active{background-color:#fff}.lf-header .lf-header-logo-title-wrapper{flex:0 0 auto;max-width:var(--header-logo-title-wrapper-max-width);overflow:hidden;display:flex}.lf-header .lf-header-logo-title-wrapper .lf-header-logo-title-wrapper-link{display:flex;flex-flow:row nowrap;align-items:center;flex:0}.lf-header .lf-header-logo-title-wrapper .lf-header-logo-title-wrapper-link.lf-clickable{cursor:pointer}.lf-header .lf-header-logo-title-wrapper .lf-header-logo{width:var(--header-logo-size);height:var(--header-logo-size);min-width:var(--header-logo-size);min-height:var(--header-logo-size)}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper{display:flex;flex-flow:column}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-title{font-size:var(--header-title-font-size);line-height:calc(var(--header-title-font-size) + 8px)}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-subtitle{font-size:var(--header-subtitle-font-size);line-height:var(--header-subtitle-font-size)}.lf-header lf-input{z-index:var(--header-z-index);flex:1 1 var(--header-input-max-width)}.lf-header lf-input.lf-header-input-mobile{position:fixed!important;left:4px!important;right:4px!important;width:unset!important;max-width:unset!important}.lf-header .spacer{flex:1 0 auto}.lf-menu-icons{min-height:unset!important}.lf-header-progress-bar{z-index:var(--header-z-index);position:fixed;top:var(--header-height)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: InputComponent, selector: "lf-input", inputs: ["inputConfig", "isMobile"], outputs: ["inputSubmitEvent", "inputChangeEvent", "inputPrefixActionEvent"] }, { kind: "component", type: IconComponent, selector: "lf-icon", inputs: ["matIcon", "svgIcon", "verticalAlign"] }], animations: [
             trigger('slideDownUp', [
                 state('void', style({ transform: 'translateY(-100%)' })),
                 state('*', style({ transform: 'translateY(0)' })),
@@ -512,7 +498,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
                             transition(':enter', [style({ transform: 'translateY(-100%)' }), animate('200ms ease-out', style({ transform: 'translateY(0)' }))]),
                             transition(':leave', [animate('200ms ease-in', style({ transform: 'translateY(-100%)' }))])
                         ])
-                    ], standalone: false, template: "@if (headerConfig && headerConfig.enable) {\r\n  <mat-toolbar\r\n    class=\"lf-header lf-transitions mat-elevation-z3\"\r\n    [class.px-4]=\"!isMobile\"\r\n    [class.px-1]=\"isMobile\"\r\n    [ngClass]=\"headerConfig.cssClass\"\r\n    color=\"primary\">\r\n    <!-- left menu button -->\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n      [ngTemplateOutletContext]=\"{\r\n        menuButton: headerConfig.leftMenuButton!,\r\n        hideLabel: true,\r\n      }\"></ng-container>\r\n    <!-- logo & title -->\r\n    <div\r\n      class=\"lf-header-logo-title-wrapper ml-1 mr-2\"\r\n      [class.ml-10]=\"headerConfig.leftMenuButton && !isMobile\">\r\n      <!-- link wrapper -->\r\n      <div\r\n        class=\"lf-header-logo-title-wrapper-link\"\r\n        [class.lf-clickable]=\"headerConfig.titleRouterLink\"\r\n        [routerLink]=\"headerConfig.titleRouterLink ? [headerConfig.titleRouterLink] : null\">\r\n        <!-- svg logo -->\r\n        @if (headerConfig.svgLogo) {\r\n          <mat-icon\r\n            class=\"lf-header-logo\"\r\n            [class.mr-3]=\"headerConfig.title\"\r\n            [svgIcon]=\"headerConfig.svgLogo!\"></mat-icon>\r\n        } @else {\r\n          @if (headerConfig.imgLogo) {\r\n            <img\r\n              class=\"lf-header-logo\"\r\n              [class.mr-3]=\"headerConfig.title\"\r\n              [src]=\"headerConfig.imgLogo\"\r\n              alt=\"Logo\" />\r\n          }\r\n        }\r\n        <!-- img logo -->\r\n        <!-- title -->\r\n        @if (headerConfig.title) {\r\n          <div class=\"lf-header-title-wrapper\">\r\n            @if (headerConfig.title) {\r\n              <span class=\"lf-header-title\">\r\n                {{ headerConfig.title }}\r\n              </span>\r\n            }\r\n            @if (headerConfig.subtitle) {\r\n              <span class=\"lf-header-subtitle\">\r\n                {{ headerConfig.subtitle }}\r\n              </span>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n    <!-- input -->\r\n    @if (headerConfig.inputConfig?.enable) {\r\n      <div class=\"spacer\"></div>\r\n      <lf-input\r\n        [class.lf-header-input-mobile]=\"isMobile\"\r\n        [class.mx-3]=\"!isMobile\"\r\n        [inputConfig]=\"headerConfig.inputConfig!\"\r\n        [isMobile]=\"isMobile\"\r\n        (inputSubmitEvent)=\"inputSubmitted($event)\"\r\n        (inputChangeEvent)=\"inputChanged($event)\"\r\n        (inputPrefixActionEvent)=\"inputClosed()\"></lf-input>\r\n    }\r\n    <!-- spacer -->\r\n    <div class=\"spacer\"></div>\r\n    <!-- right menu buttons -->\r\n    @for (button of headerConfig.rightMenuButtons; track button.id) {\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n        [ngTemplateOutletContext]=\"{\r\n          menuButton: button,\r\n        }\"></ng-container>\r\n    }\r\n  </mat-toolbar>\r\n  <!-- loading bar -->\r\n  @if (headerConfig.loading || (headerConfig.showRouteLoading && routeLoading)) {\r\n    <mat-progress-bar\r\n      class=\"lf-header-progress-bar\"\r\n      color=\"accent\"\r\n      mode=\"indeterminate\"></mat-progress-bar>\r\n  }\r\n}\r\n\r\n<!-- header menu button -->\r\n<ng-template #menuButtonTemplate let-menuButton=\"menuButton\" let-hideLabel=\"hideLabel\">\r\n  @if (menuButton) {\r\n    <!-- icon button -->\r\n    @if ((menuButton.matIcon || menuButton.svgIcon) && (!menuButton.label || hideLabel)) {\r\n      <button\r\n        mat-icon-button\r\n        class=\"lf-header-menu-button\"\r\n        [ngClass]=\"menuButton.cssClass\"\r\n        (click)=\"buttonClicked(menuButton.id)\"\r\n        [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n        [matTooltip]=\"menuButton.tooltip\"\r\n        [attr.aria-label]=\"menuButton.id\">\r\n        <!-- icon -->\r\n        <lf-icon [matIcon]=\"menuButton.matIcon\" [svgIcon]=\"menuButton.svgIcon\"></lf-icon>\r\n      </button>\r\n    } @else {\r\n      @if (!hideLabel) {\r\n        <button\r\n          mat-button\r\n          class=\"lf-header-menu-button\"\r\n          [class.lf-header-menu-button-active]=\"isActive(menuButton.id)\"\r\n          [ngClass]=\"menuButton.cssClass\"\r\n          (click)=\"buttonClicked(menuButton.id)\"\r\n          [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n          [matTooltip]=\"menuButton.tooltip\">\r\n          <!-- label -->\r\n          {{ menuButton.label }}\r\n        </button>\r\n      }\r\n    }\r\n    <!-- text button -->\r\n    <!-- menu -->\r\n    <mat-menu #menu=\"matMenu\">\r\n      <!-- label menu buttons -->\r\n      @for (button of menuButton.menuButtons; track button.id) {\r\n        <!-- menu button -->\r\n        @if (button.label) {\r\n          <button\r\n            mat-menu-item\r\n            [class.lf-header-menu-button-active]=\"isActive(button.id)\"\r\n            [ngClass]=\"button.cssClass\"\r\n            (click)=\"buttonClicked(button.id)\">\r\n            <!-- icon -->\r\n            <lf-icon\r\n              [matIcon]=\"button.matIcon\"\r\n              [svgIcon]=\"button.svgIcon\"\r\n              verticalAlign=\"bottom\"></lf-icon>\r\n            <!-- label -->\r\n            @if (button.label) {\r\n              <span>{{ button.label }}</span>\r\n            }\r\n          </button>\r\n        }\r\n      }\r\n      <!-- icon menu buttons -->\r\n      <div mat-menu-item class=\"lf-menu-icons px-1\">\r\n        @for (button of menuButton.menuButtons; track button.id) {\r\n          <!-- icon button -->\r\n          @if (!button.label && (button.matIcon || button.svgIcon)) {\r\n            <button\r\n              mat-icon-button\r\n              class=\"lf-menu-icon-button\"\r\n              [ngClass]=\"button.cssClass\"\r\n              (click)=\"buttonClicked(button.id)\"\r\n              [matTooltip]=\"button.tooltip\"\r\n              tabindex=\"0\">\r\n              <!-- icon -->\r\n              <lf-icon\r\n                [matIcon]=\"button.matIcon\"\r\n                [svgIcon]=\"button.svgIcon\"\r\n                verticalAlign=\"top\"></lf-icon>\r\n            </button>\r\n          }\r\n        }\r\n      </div>\r\n    </mat-menu>\r\n  }\r\n</ng-template>\r\n", styles: [".lf-header{z-index:100;position:fixed;top:0;height:64px}.lf-header .lf-header-menu-button{flex-shrink:0;max-width:144px}.lf-header .lf-header-menu-button ::ng-deep .mdc-button__label{overflow:hidden;text-overflow:ellipsis}.lf-header .lf-header-menu-button.lf-header-menu-button-active{background-color:#fff}.lf-header .lf-header-logo-title-wrapper{flex:0 0 auto;max-width:480px;overflow:hidden;display:flex}.lf-header .lf-header-logo-title-wrapper .lf-header-logo-title-wrapper-link{display:flex;flex-flow:row nowrap;align-items:center;flex:0}.lf-header .lf-header-logo-title-wrapper .lf-header-logo-title-wrapper-link.lf-clickable{cursor:pointer}.lf-header .lf-header-logo-title-wrapper .lf-header-logo{width:40px;height:40px;min-width:40px;min-height:40px}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper{display:flex;flex-flow:column}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-title{font-size:20px;line-height:28px}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-subtitle{font-size:12px;line-height:12px}.lf-header lf-input{z-index:100;flex:1 1 480px}.lf-header lf-input.lf-header-input-mobile{position:fixed!important;left:4px!important;right:4px!important;width:unset!important;max-width:unset!important}.lf-header .spacer{flex:1 0 auto}.lf-menu-icons{min-height:unset!important}.lf-header-progress-bar{z-index:100;position:fixed;top:64px}\n"] }]
+                    ], standalone: false, template: "@if (headerConfig && headerConfig.enable) {\r\n  <mat-toolbar\r\n    class=\"lf-header lf-transitions mat-elevation-z3\"\r\n    [class.px-4]=\"!isMobile\"\r\n    [class.px-1]=\"isMobile\"\r\n    [ngClass]=\"headerConfig.cssClass\"\r\n    color=\"primary\">\r\n    <!-- left menu button -->\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n      [ngTemplateOutletContext]=\"{\r\n        menuButton: headerConfig.leftMenuButton!,\r\n        hideLabel: true,\r\n      }\"></ng-container>\r\n    <!-- logo & title -->\r\n    <div\r\n      class=\"lf-header-logo-title-wrapper ml-1 mr-2\"\r\n      [class.ml-10]=\"headerConfig.leftMenuButton && !isMobile\">\r\n      <!-- link wrapper -->\r\n      <div\r\n        class=\"lf-header-logo-title-wrapper-link\"\r\n        [class.lf-clickable]=\"headerConfig.titleRouterLink\"\r\n        [routerLink]=\"headerConfig.titleRouterLink ? [headerConfig.titleRouterLink] : null\">\r\n        <!-- svg logo -->\r\n        @if (headerConfig.svgLogo) {\r\n          <mat-icon\r\n            class=\"lf-header-logo\"\r\n            [class.mr-3]=\"headerConfig.title\"\r\n            [svgIcon]=\"headerConfig.svgLogo!\"></mat-icon>\r\n        } @else {\r\n          @if (headerConfig.imgLogo) {\r\n            <img\r\n              class=\"lf-header-logo\"\r\n              [class.mr-3]=\"headerConfig.title\"\r\n              [src]=\"headerConfig.imgLogo\"\r\n              alt=\"Logo\" />\r\n          }\r\n        }\r\n        <!-- img logo -->\r\n        <!-- title -->\r\n        @if (headerConfig.title) {\r\n          <div class=\"lf-header-title-wrapper\">\r\n            @if (headerConfig.title) {\r\n              <span class=\"lf-header-title\">\r\n                {{ headerConfig.title }}\r\n              </span>\r\n            }\r\n            @if (headerConfig.subtitle) {\r\n              <span class=\"lf-header-subtitle\">\r\n                {{ headerConfig.subtitle }}\r\n              </span>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n    <!-- input -->\r\n    @if (headerConfig.inputConfig?.enable) {\r\n      <div class=\"spacer\"></div>\r\n      <lf-input\r\n        [class.lf-header-input-mobile]=\"isMobile\"\r\n        [class.mx-3]=\"!isMobile\"\r\n        [inputConfig]=\"headerConfig.inputConfig!\"\r\n        [isMobile]=\"isMobile\"\r\n        (inputSubmitEvent)=\"inputSubmitted($event)\"\r\n        (inputChangeEvent)=\"inputChanged($event)\"\r\n        (inputPrefixActionEvent)=\"inputClosed()\"></lf-input>\r\n    }\r\n    <!-- spacer -->\r\n    <div class=\"spacer\"></div>\r\n    <!-- right menu buttons -->\r\n    @for (button of headerConfig.rightMenuButtons; track button.id) {\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n        [ngTemplateOutletContext]=\"{\r\n          menuButton: button,\r\n        }\"></ng-container>\r\n    }\r\n  </mat-toolbar>\r\n  <!-- loading bar -->\r\n  @if (headerConfig.loading || (headerConfig.showRouteLoading && routeLoading)) {\r\n    <mat-progress-bar\r\n      class=\"lf-header-progress-bar\"\r\n      color=\"accent\"\r\n      mode=\"indeterminate\"></mat-progress-bar>\r\n  }\r\n}\r\n\r\n<!-- header menu button -->\r\n<ng-template #menuButtonTemplate let-menuButton=\"menuButton\" let-hideLabel=\"hideLabel\">\r\n  @if (menuButton) {\r\n    <!-- icon button -->\r\n    @if ((menuButton.matIcon || menuButton.svgIcon) && (!menuButton.label || hideLabel)) {\r\n      <button\r\n        mat-icon-button\r\n        class=\"lf-header-menu-button\"\r\n        [ngClass]=\"menuButton.cssClass\"\r\n        (click)=\"buttonClicked(menuButton.id)\"\r\n        [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n        [matTooltip]=\"menuButton.tooltip\"\r\n        [attr.aria-label]=\"menuButton.id\">\r\n        <!-- icon -->\r\n        <lf-icon [matIcon]=\"menuButton.matIcon\" [svgIcon]=\"menuButton.svgIcon\"></lf-icon>\r\n      </button>\r\n    } @else {\r\n      @if (!hideLabel) {\r\n        <button\r\n          mat-button\r\n          class=\"lf-header-menu-button\"\r\n          [class.lf-header-menu-button-active]=\"isActive(menuButton.id)\"\r\n          [ngClass]=\"menuButton.cssClass\"\r\n          (click)=\"buttonClicked(menuButton.id)\"\r\n          [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n          [matTooltip]=\"menuButton.tooltip\">\r\n          <!-- label -->\r\n          {{ menuButton.label }}\r\n        </button>\r\n      }\r\n    }\r\n    <!-- text button -->\r\n    <!-- menu -->\r\n    <mat-menu #menu=\"matMenu\">\r\n      <!-- label menu buttons -->\r\n      @for (button of menuButton.menuButtons; track button.id) {\r\n        <!-- menu button -->\r\n        @if (button.label) {\r\n          <button\r\n            mat-menu-item\r\n            [class.lf-header-menu-button-active]=\"isActive(button.id)\"\r\n            [ngClass]=\"button.cssClass\"\r\n            (click)=\"buttonClicked(button.id)\">\r\n            <!-- icon -->\r\n            <lf-icon\r\n              [matIcon]=\"button.matIcon\"\r\n              [svgIcon]=\"button.svgIcon\"\r\n              verticalAlign=\"bottom\"></lf-icon>\r\n            <!-- label -->\r\n            @if (button.label) {\r\n              <span>{{ button.label }}</span>\r\n            }\r\n          </button>\r\n        }\r\n      }\r\n      <!-- icon menu buttons -->\r\n      <div mat-menu-item class=\"lf-menu-icons px-1\">\r\n        @for (button of menuButton.menuButtons; track button.id) {\r\n          <!-- icon button -->\r\n          @if (!button.label && (button.matIcon || button.svgIcon)) {\r\n            <button\r\n              mat-icon-button\r\n              class=\"lf-menu-icon-button\"\r\n              [ngClass]=\"button.cssClass\"\r\n              (click)=\"buttonClicked(button.id)\"\r\n              [matTooltip]=\"button.tooltip\"\r\n              tabindex=\"0\">\r\n              <!-- icon -->\r\n              <lf-icon\r\n                [matIcon]=\"button.matIcon\"\r\n                [svgIcon]=\"button.svgIcon\"\r\n                verticalAlign=\"top\"></lf-icon>\r\n            </button>\r\n          }\r\n        }\r\n      </div>\r\n    </mat-menu>\r\n  }\r\n</ng-template>\r\n", styles: [".lf-header{z-index:var(--header-z-index);position:fixed;top:0;height:var(--header-height)}.lf-header .lf-header-menu-button{flex-shrink:0;max-width:var(--header-menu-button-max-width)}.lf-header .lf-header-menu-button ::ng-deep .mdc-button__label{overflow:hidden;text-overflow:ellipsis}.lf-header .lf-header-menu-button.lf-header-menu-button-active{background-color:#fff}.lf-header .lf-header-logo-title-wrapper{flex:0 0 auto;max-width:var(--header-logo-title-wrapper-max-width);overflow:hidden;display:flex}.lf-header .lf-header-logo-title-wrapper .lf-header-logo-title-wrapper-link{display:flex;flex-flow:row nowrap;align-items:center;flex:0}.lf-header .lf-header-logo-title-wrapper .lf-header-logo-title-wrapper-link.lf-clickable{cursor:pointer}.lf-header .lf-header-logo-title-wrapper .lf-header-logo{width:var(--header-logo-size);height:var(--header-logo-size);min-width:var(--header-logo-size);min-height:var(--header-logo-size)}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper{display:flex;flex-flow:column}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-title{font-size:var(--header-title-font-size);line-height:calc(var(--header-title-font-size) + 8px)}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-subtitle{font-size:var(--header-subtitle-font-size);line-height:var(--header-subtitle-font-size)}.lf-header lf-input{z-index:var(--header-z-index);flex:1 1 var(--header-input-max-width)}.lf-header lf-input.lf-header-input-mobile{position:fixed!important;left:4px!important;right:4px!important;width:unset!important;max-width:unset!important}.lf-header .spacer{flex:1 0 auto}.lf-menu-icons{min-height:unset!important}.lf-header-progress-bar{z-index:var(--header-z-index);position:fixed;top:var(--header-height)}\n"] }]
         }], propDecorators: { libraryConfig: [{
                 type: Input
             }], headerConfig: [{
@@ -535,11 +521,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
 
 class LoadingOverlayComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: LoadingOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.13", type: LoadingOverlayComponent, isStandalone: false, selector: "lf-loading-overlay", ngImport: i0, template: "<div class=\"lf-loading-overlay\">\r\n  <mat-spinner class=\"lf-loading-spinner\" color=\"accent\" mode=\"indeterminate\"></mat-spinner>\r\n</div>\r\n", styles: [".lf-loading-overlay{z-index:101;position:fixed;inset:0;height:100%;width:100%;display:flex;align-items:center;justify-content:center;background-color:#00000029}\n"], dependencies: [{ kind: "component", type: i1$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.13", type: LoadingOverlayComponent, isStandalone: false, selector: "lf-loading-overlay", ngImport: i0, template: "<div class=\"lf-loading-overlay\">\r\n  <mat-spinner class=\"lf-loading-spinner\" color=\"accent\" mode=\"indeterminate\"></mat-spinner>\r\n</div>\r\n", styles: [".lf-loading-overlay{z-index:var(--loading-overlay-z-index);position:fixed;inset:0;height:100%;width:100%;display:flex;align-items:center;justify-content:center;background-color:#00000029}\n"], dependencies: [{ kind: "component", type: i1$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: LoadingOverlayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lf-loading-overlay', standalone: false, template: "<div class=\"lf-loading-overlay\">\r\n  <mat-spinner class=\"lf-loading-spinner\" color=\"accent\" mode=\"indeterminate\"></mat-spinner>\r\n</div>\r\n", styles: [".lf-loading-overlay{z-index:101;position:fixed;inset:0;height:100%;width:100%;display:flex;align-items:center;justify-content:center;background-color:#00000029}\n"] }]
+            args: [{ selector: 'lf-loading-overlay', standalone: false, template: "<div class=\"lf-loading-overlay\">\r\n  <mat-spinner class=\"lf-loading-spinner\" color=\"accent\" mode=\"indeterminate\"></mat-spinner>\r\n</div>\r\n", styles: [".lf-loading-overlay{z-index:var(--loading-overlay-z-index);position:fixed;inset:0;height:100%;width:100%;display:flex;align-items:center;justify-content:center;background-color:#00000029}\n"] }]
         }] });
 
 class NavbarComponent {
@@ -563,7 +549,7 @@ class NavbarComponent {
         return route === id;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: NavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: NavbarComponent, isStandalone: false, selector: "lf-navbar", inputs: { libraryConfig: "libraryConfig", navbarConfig: "navbarConfig", isMobile: "isMobile", currentRoute: "currentRoute" }, outputs: { navbarButtonClickEvent: "navbarButtonClickEvent" }, ngImport: i0, template: "@if (navbarConfig && navbarConfig.enable) {\r\n  <div\r\n    [@responsiveSlide]=\"isMobile ? 'mobile' : 'desktop'\"\r\n    class=\"mat-app-background lf-transitions mat-elevation-z3\"\r\n    [class.lf-navbar]=\"!isMobile\"\r\n    [class.lf-navbar-mobile]=\"isMobile\"\r\n    [ngClass]=\"navbarConfig.cssClass\">\r\n    <!-- items -->\r\n    <div [class.lf-navbar-items]=\"!isMobile\" [class.lf-navbar-mobile-items]=\"isMobile\">\r\n      <!-- item -->\r\n      @for (button of navbarConfig.menuButtons; track button.id; let i = $index) {\r\n        @if (i < 5) {\r\n          <div\r\n            class=\"lf-navbar-item\"\r\n            [class.lf-navbar-item-active]=\"isActive(button.id)\"\r\n            [ngClass]=\"button.cssClass\"\r\n            (click)=\"buttonClicked(button.id)\"\r\n            tabindex=\"0\"\r\n            role=\"button\"\r\n            [matTooltip]=\"button.tooltip\">\r\n            <!-- icon -->\r\n            <lf-icon [matIcon]=\"button.matIcon!\" [svgIcon]=\"button.svgIcon!\"></lf-icon>\r\n            <!-- label -->\r\n            <!-- show a protected space on desktop so the icon doesn't move up and down -->\r\n            @if (button?.label) {\r\n              <span class=\"lf-navbar-item-label\">\r\n                {{\r\n                  isActive(button.id) || navbarConfig.showAllLabels\r\n                    ? button.label\r\n                    : isMobile\r\n                      ? \"\"\r\n                      : \"&nbsp;\"\r\n                }}\r\n              </span>\r\n            }\r\n          </div>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".lf-navbar{z-index:99;position:fixed;left:0;top:0;height:100vh;padding:80px 4px 0;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:99;position:fixed;left:0;bottom:0;width:100vw;padding:4px 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:56px!important}.lf-navbar-item{width:72px;height:72px;display:flex;align-items:center;justify-content:center;flex-flow:column;border-radius:16px;cursor:pointer}.lf-navbar-item.lf-navbar-item-active{color:var(--color-primary)}.lf-navbar-item .lf-navbar-item-icon{width:24px;height:24px;overflow:visible!important}.lf-navbar-item .lf-navbar-item-label{max-width:72px;white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;text-transform:none;vertical-align:top;font-size:12px;font-weight:500}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: IconComponent, selector: "lf-icon", inputs: ["matIcon", "svgIcon", "verticalAlign"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: NavbarComponent, isStandalone: false, selector: "lf-navbar", inputs: { libraryConfig: "libraryConfig", navbarConfig: "navbarConfig", isMobile: "isMobile", currentRoute: "currentRoute" }, outputs: { navbarButtonClickEvent: "navbarButtonClickEvent" }, ngImport: i0, template: "@if (navbarConfig && navbarConfig.enable) {\r\n  <div\r\n    [@responsiveSlide]=\"isMobile ? 'mobile' : 'desktop'\"\r\n    class=\"mat-app-background lf-transitions mat-elevation-z3\"\r\n    [class.lf-navbar]=\"!isMobile\"\r\n    [class.lf-navbar-mobile]=\"isMobile\"\r\n    [ngClass]=\"navbarConfig.cssClass\">\r\n    <!-- items -->\r\n    <div [class.lf-navbar-items]=\"!isMobile\" [class.lf-navbar-mobile-items]=\"isMobile\">\r\n      <!-- item -->\r\n      @for (button of navbarConfig.menuButtons; track button.id; let i = $index) {\r\n        @if (i < 5) {\r\n          <div\r\n            class=\"lf-navbar-item\"\r\n            [class.lf-navbar-item-active]=\"isActive(button.id)\"\r\n            [ngClass]=\"button.cssClass\"\r\n            (click)=\"buttonClicked(button.id)\"\r\n            tabindex=\"0\"\r\n            role=\"button\"\r\n            [matTooltip]=\"button.tooltip\">\r\n            <!-- icon -->\r\n            <lf-icon [matIcon]=\"button.matIcon!\" [svgIcon]=\"button.svgIcon!\"></lf-icon>\r\n            <!-- label -->\r\n            <!-- show a protected space on desktop so the icon doesn't move up and down -->\r\n            @if (button?.label) {\r\n              <span class=\"lf-navbar-item-label\">\r\n                {{\r\n                  isActive(button.id) || navbarConfig.showAllLabels\r\n                    ? button.label\r\n                    : isMobile\r\n                      ? \"\"\r\n                      : \"&nbsp;\"\r\n                }}\r\n              </span>\r\n            }\r\n          </div>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".lf-navbar{z-index:var(--navbar-z-index);position:fixed;left:0;top:0;height:100vh;padding:calc(var(--header-height) + 16px) var(--navbar-padding) 0 var(--navbar-padding);border-right:solid 1px rgba(0,0,0,.12)}.lf-navbar .lf-navbar-items{display:flex;flex-flow:column;align-items:center}.lf-navbar-mobile{z-index:var(--navbar-z-index);position:fixed;left:0;bottom:0;width:100vw;padding:var(--navbar-padding) 0;box-sizing:border-box;border-top:solid 1px rgba(0,0,0,.12)}.lf-navbar-mobile .lf-navbar-mobile-items{display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-evenly}.lf-navbar-mobile .lf-navbar-mobile-items .lf-navbar-item{height:var(--navbar-height-mobile)!important}.lf-navbar-item{width:var(--navbar-width);height:var(--navbar-height);display:flex;align-items:center;justify-content:center;flex-flow:column;border-radius:var(--navbar-item-border-radius);cursor:pointer}.lf-navbar-item.lf-navbar-item-active{color:var(--color-primary)}.lf-navbar-item .lf-navbar-item-icon{width:calc(var(--navbar-width) / 3);height:calc(var(--navbar-height) / 3);overflow:visible!important}.lf-navbar-item .lf-navbar-item-label{max-width:var(--navbar-width);white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;text-transform:none;vertical-align:top;font-size:var(--navbar-item-label-font-size);font-weight:500}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: IconComponent, selector: "lf-icon", inputs: ["matIcon", "svgIcon", "verticalAlign"] }], animations: [
             trigger('responsiveSlide', [
                 // States for desktop and mobile
                 state('desktop', style({ transform: 'translateX(0)' })),
@@ -615,7 +601,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
                                 animate('200ms linear', style({ transform: 'translateY(100%)' }))
                             ]),
                         ])
-                    ], standalone: false, template: "@if (navbarConfig && navbarConfig.enable) {\r\n  <div\r\n    [@responsiveSlide]=\"isMobile ? 'mobile' : 'desktop'\"\r\n    class=\"mat-app-background lf-transitions mat-elevation-z3\"\r\n    [class.lf-navbar]=\"!isMobile\"\r\n    [class.lf-navbar-mobile]=\"isMobile\"\r\n    [ngClass]=\"navbarConfig.cssClass\">\r\n    <!-- items -->\r\n    <div [class.lf-navbar-items]=\"!isMobile\" [class.lf-navbar-mobile-items]=\"isMobile\">\r\n      <!-- item -->\r\n      @for (button of navbarConfig.menuButtons; track button.id; let i = $index) {\r\n        @if (i < 5) {\r\n          <div\r\n            class=\"lf-navbar-item\"\r\n            [class.lf-navbar-item-active]=\"isActive(button.id)\"\r\n            [ngClass]=\"button.cssClass\"\r\n            (click)=\"buttonClicked(button.id)\"\r\n            tabindex=\"0\"\r\n            role=\"button\"\r\n            [matTooltip]=\"button.tooltip\">\r\n            <!-- icon -->\r\n            <lf-icon [matIcon]=\"button.matIcon!\" [svgIcon]=\"button.svgIcon!\"></lf-icon>\r\n            <!-- label -->\r\n            <!-- show a protected space on desktop so the icon doesn't move up and down -->\r\n            @if (button?.label) {\r\n              <span class=\"lf-navbar-item-label\">\r\n                {{\r\n                  isActive(button.id) || navbarConfig.showAllLabels\r\n                    ? button.label\r\n                    : isMobile\r\n                      ? \"\"\r\n                      : \"&nbsp;\"\r\n                }}\r\n              </span>\r\n            }\r\n          </div>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".lf-navbar{z-index:99;position:fixed;left:0;top:0;height:100vh;padding:80px 4px 0;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:99;position:fixed;left:0;bottom:0;width:100vw;padding:4px 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:56px!important}.lf-navbar-item{width:72px;height:72px;display:flex;align-items:center;justify-content:center;flex-flow:column;border-radius:16px;cursor:pointer}.lf-navbar-item.lf-navbar-item-active{color:var(--color-primary)}.lf-navbar-item .lf-navbar-item-icon{width:24px;height:24px;overflow:visible!important}.lf-navbar-item .lf-navbar-item-label{max-width:72px;white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;text-transform:none;vertical-align:top;font-size:12px;font-weight:500}\n"] }]
+                    ], standalone: false, template: "@if (navbarConfig && navbarConfig.enable) {\r\n  <div\r\n    [@responsiveSlide]=\"isMobile ? 'mobile' : 'desktop'\"\r\n    class=\"mat-app-background lf-transitions mat-elevation-z3\"\r\n    [class.lf-navbar]=\"!isMobile\"\r\n    [class.lf-navbar-mobile]=\"isMobile\"\r\n    [ngClass]=\"navbarConfig.cssClass\">\r\n    <!-- items -->\r\n    <div [class.lf-navbar-items]=\"!isMobile\" [class.lf-navbar-mobile-items]=\"isMobile\">\r\n      <!-- item -->\r\n      @for (button of navbarConfig.menuButtons; track button.id; let i = $index) {\r\n        @if (i < 5) {\r\n          <div\r\n            class=\"lf-navbar-item\"\r\n            [class.lf-navbar-item-active]=\"isActive(button.id)\"\r\n            [ngClass]=\"button.cssClass\"\r\n            (click)=\"buttonClicked(button.id)\"\r\n            tabindex=\"0\"\r\n            role=\"button\"\r\n            [matTooltip]=\"button.tooltip\">\r\n            <!-- icon -->\r\n            <lf-icon [matIcon]=\"button.matIcon!\" [svgIcon]=\"button.svgIcon!\"></lf-icon>\r\n            <!-- label -->\r\n            <!-- show a protected space on desktop so the icon doesn't move up and down -->\r\n            @if (button?.label) {\r\n              <span class=\"lf-navbar-item-label\">\r\n                {{\r\n                  isActive(button.id) || navbarConfig.showAllLabels\r\n                    ? button.label\r\n                    : isMobile\r\n                      ? \"\"\r\n                      : \"&nbsp;\"\r\n                }}\r\n              </span>\r\n            }\r\n          </div>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".lf-navbar{z-index:var(--navbar-z-index);position:fixed;left:0;top:0;height:100vh;padding:calc(var(--header-height) + 16px) var(--navbar-padding) 0 var(--navbar-padding);border-right:solid 1px rgba(0,0,0,.12)}.lf-navbar .lf-navbar-items{display:flex;flex-flow:column;align-items:center}.lf-navbar-mobile{z-index:var(--navbar-z-index);position:fixed;left:0;bottom:0;width:100vw;padding:var(--navbar-padding) 0;box-sizing:border-box;border-top:solid 1px rgba(0,0,0,.12)}.lf-navbar-mobile .lf-navbar-mobile-items{display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-evenly}.lf-navbar-mobile .lf-navbar-mobile-items .lf-navbar-item{height:var(--navbar-height-mobile)!important}.lf-navbar-item{width:var(--navbar-width);height:var(--navbar-height);display:flex;align-items:center;justify-content:center;flex-flow:column;border-radius:var(--navbar-item-border-radius);cursor:pointer}.lf-navbar-item.lf-navbar-item-active{color:var(--color-primary)}.lf-navbar-item .lf-navbar-item-icon{width:calc(var(--navbar-width) / 3);height:calc(var(--navbar-height) / 3);overflow:visible!important}.lf-navbar-item .lf-navbar-item-label{max-width:var(--navbar-width);white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;text-transform:none;vertical-align:top;font-size:var(--navbar-item-label-font-size);font-weight:500}\n"] }]
         }], propDecorators: { libraryConfig: [{
                 type: Input
             }], navbarConfig: [{
@@ -1384,11 +1370,11 @@ class ScaffoldComponent {
         this.bottomBarButtonClickEvent.emit(id);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ScaffoldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: ScaffoldComponent, isStandalone: false, selector: "lf-scaffold", outputs: { headerButtonClickEvent: "headerButtonClickEvent", headerInputSubmitEvent: "headerInputSubmitEvent", headerInputChangeEvent: "headerInputChangeEvent", navbarButtonClickEvent: "navbarButtonClickEvent", floatingButtonClickEvent: "floatingButtonClickEvent", bottomBarButtonClickEvent: "bottomBarButtonClickEvent" }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, static: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }], ngImport: i0, template: "<!-- header-height: 64px; navbar-size: 80px; floating-button-bottom: 24px -->\r\n\r\n<div\r\n  class=\"lf-scaffold lf-transitions mat-app-background mat-typography\"\r\n  [ngClass]=\"scaffoldConfig?.cssClass\">\r\n  <!-- loading overlay -->\r\n  @if (scaffoldConfig?.loading) {\r\n    <lf-loading-overlay></lf-loading-overlay>\r\n  }\r\n  <!-- header -->\r\n  <lf-header\r\n    [libraryConfig]=\"libraryConfig\"\r\n    [headerConfig]=\"headerConfig\"\r\n    [isMobile]=\"isMobile\"\r\n    [routeLoading]=\"routeLoading\"\r\n    [currentRoute]=\"currentRoute\"\r\n    (headerConfigUpdateEvent)=\"headerConfigUpdated($event)\"\r\n    (headerButtonClickEvent)=\"headerButtonClicked($event)\"\r\n    (headerInputSubmitEvent)=\"headerInputSubmitted($event)\"\r\n    (headerInputChangeEvent)=\"headerInputChanged($event)\"></lf-header>\r\n  <!-- navbar -->\r\n  <lf-navbar\r\n    [libraryConfig]=\"libraryConfig\"\r\n    [navbarConfig]=\"navbarConfig\"\r\n    [isMobile]=\"isMobile\"\r\n    [currentRoute]=\"currentRoute\"\r\n    (navbarButtonClickEvent)=\"navbarButtonClicked($event)\"></lf-navbar>\r\n  <!-- content wrapper -->\r\n  <div\r\n    class=\"lf-content-wrapper\"\r\n    [class.lf-show-navbar]=\"navbarConfig?.enable && !isMobile\"\r\n    [class.lf-show-header]=\"headerConfig?.enable && !(navbarConfig?.enable && isMobile)\"\r\n    [class.lf-show-navbar-mobile]=\"navbarConfig?.enable && isMobile && !headerConfig?.enable\"\r\n    [class.lf-show-header-and-navbar-mobile]=\"\r\n      headerConfig?.enable && navbarConfig?.enable && isMobile\r\n    \"\r\n    [class.lf-transitions]=\"initialized\"\r\n    #scrollContainer\r\n    cdkScrollable>\r\n    <!-- drawer -->\r\n    <lf-drawer\r\n      [libraryConfig]=\"libraryConfig\"\r\n      [drawerConfig]=\"drawerConfig\"\r\n      [drawerPortal]=\"drawerPortal\"\r\n      [isMobile]=\"isMobile\"\r\n      [fixedOffset]=\"headerConfig?.enable ? 64 : 0\"\r\n      (drawerConfigUpdateEvent)=\"drawerConfigUpdated($event)\">\r\n      <!-- drawer content -->\r\n      <ng-content select=\"[drawerContent]\" drawerContent></ng-content>\r\n      <!-- content title card -->\r\n      <lf-content-title-card\r\n        [libraryConfig]=\"libraryConfig\"\r\n        [contentTitleCardConfig]=\"contentTitleCardConfig\"\r\n        [isMobile]=\"isMobile\"\r\n        [routeHistory]=\"routeHistory\"\r\n        (backButtonClickEvent)=\"backButtonClicked()\"></lf-content-title-card>\r\n      <!-- main content -->\r\n      <div\r\n        class=\"lf-content\"\r\n        [class.lf-content-mobile]=\"isMobile\"\r\n        [class.lf-show-footer]=\"footerConfig?.enable\"\r\n        #content>\r\n        <ng-content></ng-content>\r\n      </div>\r\n      <!-- footer -->\r\n      <lf-footer [libraryConfig]=\"libraryConfig\" [footerConfig]=\"footerConfig\"></lf-footer>\r\n    </lf-drawer>\r\n  </div>\r\n  <!-- to top button -->\r\n  <lf-floating-button\r\n    [libraryConfig]=\"libraryConfig\"\r\n    [floatingButtonConfig]=\"floatingButtonConfig\"\r\n    [onTop]=\"scrollTopPosition <= 0\"\r\n    [isMobile]=\"isMobile && navbarConfig?.enable!\"\r\n    [bottomBarEnabled]=\"bottomBarConfig?.enable!\"\r\n    (floatingButtonConfigUpdateEvent)=\"floatingButtonConfigUpdated($event)\"\r\n    (floatingButtonClickEvent)=\"floatingButtonClicked($event)\"></lf-floating-button>\r\n  <!-- bottom bar -->\r\n  <lf-bottom-bar\r\n    [libraryConfig]=\"libraryConfig\"\r\n    [bottomBarConfig]=\"bottomBarConfig\"\r\n    [isMobile]=\"isMobile && navbarConfig?.enable!\"\r\n    [navbarEnabled]=\"navbarConfig?.enable!\"\r\n    (bottomBarCloseClickEvent)=\"bottomBarCloseClicked($event)\"\r\n    (bottomBarButtonClickEvent)=\"bottomBarButtonClicked($event)\"></lf-bottom-bar>\r\n</div>\r\n", styles: [".lf-scaffold{height:100vh}.lf-scaffold .lf-content-wrapper{position:absolute;inset:0;overflow-y:auto}.lf-scaffold .lf-content-wrapper.lf-show-navbar{left:80px}.lf-scaffold .lf-content-wrapper.lf-show-header{top:64px;height:calc(100vh - 64px)}.lf-scaffold .lf-content-wrapper.lf-show-navbar-mobile{height:calc(100vh - 56px)}.lf-scaffold .lf-content-wrapper.lf-show-header-and-navbar-mobile{top:64px;height:calc(100vh - 120px)}.lf-scaffold .lf-content-wrapper .lf-content{padding-left:24px;padding-right:24px}.lf-scaffold .lf-content-wrapper .lf-content.lf-content-mobile{padding-left:16px;padding-right:16px}.lf-scaffold .lf-content-wrapper .lf-content.lf-show-footer{min-height:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$4.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: LoadingOverlayComponent, selector: "lf-loading-overlay" }, { kind: "component", type: HeaderComponent, selector: "lf-header", inputs: ["libraryConfig", "headerConfig", "isMobile", "routeLoading", "currentRoute"], outputs: ["headerConfigUpdateEvent", "headerButtonClickEvent", "headerInputSubmitEvent", "headerInputChangeEvent"] }, { kind: "component", type: NavbarComponent, selector: "lf-navbar", inputs: ["libraryConfig", "navbarConfig", "isMobile", "currentRoute"], outputs: ["navbarButtonClickEvent"] }, { kind: "component", type: DrawerComponent, selector: "lf-drawer", inputs: ["libraryConfig", "drawerConfig", "isMobile", "fixedOffset", "drawerPortal"], outputs: ["drawerConfigUpdateEvent"] }, { kind: "component", type: FooterComponent, selector: "lf-footer", inputs: ["libraryConfig", "footerConfig"] }, { kind: "component", type: ContentTitleCardComponent, selector: "lf-content-title-card", inputs: ["libraryConfig", "contentTitleCardConfig", "isMobile", "routeHistory"], outputs: ["backButtonClickEvent"] }, { kind: "component", type: FloatingButtonComponent, selector: "lf-floating-button", inputs: ["libraryConfig", "floatingButtonConfig", "onTop", "isMobile", "bottomBarEnabled"], outputs: ["floatingButtonConfigUpdateEvent", "floatingButtonClickEvent"] }, { kind: "component", type: BottomBarComponent, selector: "lf-bottom-bar", inputs: ["libraryConfig", "bottomBarConfig", "isMobile", "navbarEnabled"], outputs: ["bottomBarCloseClickEvent", "bottomBarButtonClickEvent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: ScaffoldComponent, isStandalone: false, selector: "lf-scaffold", outputs: { headerButtonClickEvent: "headerButtonClickEvent", headerInputSubmitEvent: "headerInputSubmitEvent", headerInputChangeEvent: "headerInputChangeEvent", navbarButtonClickEvent: "navbarButtonClickEvent", floatingButtonClickEvent: "floatingButtonClickEvent", bottomBarButtonClickEvent: "bottomBarButtonClickEvent" }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, static: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }], ngImport: i0, template: "<!-- header-height: 64px; navbar-size: 80px; floating-button-bottom: 24px -->\r\n\r\n<div\r\n  class=\"lf-scaffold lf-transitions mat-app-background mat-typography\"\r\n  [ngClass]=\"scaffoldConfig?.cssClass\">\r\n  <!-- loading overlay -->\r\n  @if (scaffoldConfig?.loading) {\r\n    <lf-loading-overlay></lf-loading-overlay>\r\n  }\r\n  <!-- header -->\r\n  <lf-header\r\n    [libraryConfig]=\"libraryConfig\"\r\n    [headerConfig]=\"headerConfig\"\r\n    [isMobile]=\"isMobile\"\r\n    [routeLoading]=\"routeLoading\"\r\n    [currentRoute]=\"currentRoute\"\r\n    (headerConfigUpdateEvent)=\"headerConfigUpdated($event)\"\r\n    (headerButtonClickEvent)=\"headerButtonClicked($event)\"\r\n    (headerInputSubmitEvent)=\"headerInputSubmitted($event)\"\r\n    (headerInputChangeEvent)=\"headerInputChanged($event)\"></lf-header>\r\n  <!-- navbar -->\r\n  <lf-navbar\r\n    [libraryConfig]=\"libraryConfig\"\r\n    [navbarConfig]=\"navbarConfig\"\r\n    [isMobile]=\"isMobile\"\r\n    [currentRoute]=\"currentRoute\"\r\n    (navbarButtonClickEvent)=\"navbarButtonClicked($event)\"></lf-navbar>\r\n  <!-- content wrapper -->\r\n  <div\r\n    class=\"lf-content-wrapper\"\r\n    [class.lf-show-navbar]=\"navbarConfig?.enable && !isMobile\"\r\n    [class.lf-show-header]=\"headerConfig?.enable && !(navbarConfig?.enable && isMobile)\"\r\n    [class.lf-show-navbar-mobile]=\"navbarConfig?.enable && isMobile && !headerConfig?.enable\"\r\n    [class.lf-show-header-and-navbar-mobile]=\"\r\n      headerConfig?.enable && navbarConfig?.enable && isMobile\r\n    \"\r\n    [class.lf-transitions]=\"initialized\"\r\n    #scrollContainer\r\n    cdkScrollable>\r\n    <!-- drawer -->\r\n    <lf-drawer\r\n      [libraryConfig]=\"libraryConfig\"\r\n      [drawerConfig]=\"drawerConfig\"\r\n      [drawerPortal]=\"drawerPortal\"\r\n      [isMobile]=\"isMobile\"\r\n      [headerEnabled]=\"headerConfig?.enable!\"\r\n      (drawerConfigUpdateEvent)=\"drawerConfigUpdated($event)\">\r\n      <!-- drawer content -->\r\n      <ng-content select=\"[drawerContent]\" drawerContent></ng-content>\r\n      <!-- content title card -->\r\n      <lf-content-title-card\r\n        [libraryConfig]=\"libraryConfig\"\r\n        [contentTitleCardConfig]=\"contentTitleCardConfig\"\r\n        [isMobile]=\"isMobile\"\r\n        [routeHistory]=\"routeHistory\"\r\n        (backButtonClickEvent)=\"backButtonClicked()\"></lf-content-title-card>\r\n      <!-- main content -->\r\n      <div\r\n        class=\"lf-content\"\r\n        [class.lf-content-mobile]=\"isMobile\"\r\n        [class.lf-show-footer]=\"footerConfig?.enable\"\r\n        #content>\r\n        <ng-content></ng-content>\r\n      </div>\r\n      <!-- footer -->\r\n      <lf-footer [libraryConfig]=\"libraryConfig\" [footerConfig]=\"footerConfig\"></lf-footer>\r\n    </lf-drawer>\r\n  </div>\r\n  <!-- to top button -->\r\n  <lf-floating-button\r\n    [libraryConfig]=\"libraryConfig\"\r\n    [floatingButtonConfig]=\"floatingButtonConfig\"\r\n    [onTop]=\"scrollTopPosition <= 0\"\r\n    [isMobile]=\"isMobile && navbarConfig?.enable!\"\r\n    [bottomBarEnabled]=\"bottomBarConfig?.enable!\"\r\n    (floatingButtonConfigUpdateEvent)=\"floatingButtonConfigUpdated($event)\"\r\n    (floatingButtonClickEvent)=\"floatingButtonClicked($event)\"></lf-floating-button>\r\n  <!-- bottom bar -->\r\n  <lf-bottom-bar\r\n    [libraryConfig]=\"libraryConfig\"\r\n    [bottomBarConfig]=\"bottomBarConfig\"\r\n    [isMobile]=\"isMobile && navbarConfig?.enable!\"\r\n    [navbarEnabled]=\"navbarConfig?.enable!\"\r\n    (bottomBarCloseClickEvent)=\"bottomBarCloseClicked($event)\"\r\n    (bottomBarButtonClickEvent)=\"bottomBarButtonClicked($event)\"></lf-bottom-bar>\r\n</div>\r\n", styles: [".lf-scaffold{height:100vh}.lf-scaffold .lf-content-wrapper{position:absolute;inset:0;overflow-y:auto}.lf-scaffold .lf-content-wrapper.lf-show-navbar{left:calc(var(--navbar-height) + 2 * var(--navbar-padding))}.lf-scaffold .lf-content-wrapper.lf-show-header{top:var(--header-height);height:calc(100vh - var(--header-height))}.lf-scaffold .lf-content-wrapper.lf-show-navbar-mobile{height:calc(100vh - var(--navbar-height-mobile))}.lf-scaffold .lf-content-wrapper.lf-show-header-and-navbar-mobile{top:var(--header-height);height:calc(100vh - var(--header-height) - var(--navbar-height-mobile))}.lf-scaffold .lf-content-wrapper .lf-content{padding-left:var(--content-padding);padding-right:var(--content-padding)}.lf-scaffold .lf-content-wrapper .lf-content.lf-content-mobile{padding-left:var(--content-padding-mobile);padding-right:var(--content-padding-mobile)}.lf-scaffold .lf-content-wrapper .lf-content.lf-show-footer{min-height:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$4.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: LoadingOverlayComponent, selector: "lf-loading-overlay" }, { kind: "component", type: HeaderComponent, selector: "lf-header", inputs: ["libraryConfig", "headerConfig", "isMobile", "routeLoading", "currentRoute"], outputs: ["headerConfigUpdateEvent", "headerButtonClickEvent", "headerInputSubmitEvent", "headerInputChangeEvent"] }, { kind: "component", type: NavbarComponent, selector: "lf-navbar", inputs: ["libraryConfig", "navbarConfig", "isMobile", "currentRoute"], outputs: ["navbarButtonClickEvent"] }, { kind: "component", type: DrawerComponent, selector: "lf-drawer", inputs: ["libraryConfig", "drawerConfig", "isMobile", "headerEnabled", "drawerPortal"], outputs: ["drawerConfigUpdateEvent"] }, { kind: "component", type: FooterComponent, selector: "lf-footer", inputs: ["libraryConfig", "footerConfig"] }, { kind: "component", type: ContentTitleCardComponent, selector: "lf-content-title-card", inputs: ["libraryConfig", "contentTitleCardConfig", "isMobile", "routeHistory"], outputs: ["backButtonClickEvent"] }, { kind: "component", type: FloatingButtonComponent, selector: "lf-floating-button", inputs: ["libraryConfig", "floatingButtonConfig", "onTop", "isMobile", "bottomBarEnabled"], outputs: ["floatingButtonConfigUpdateEvent", "floatingButtonClickEvent"] }, { kind: "component", type: BottomBarComponent, selector: "lf-bottom-bar", inputs: ["libraryConfig", "bottomBarConfig", "isMobile", "navbarEnabled"], outputs: ["bottomBarCloseClickEvent", "bottomBarButtonClickEvent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ScaffoldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lf-scaffold', standalone: false, template: "<!-- header-height: 64px; navbar-size: 80px; floating-button-bottom: 24px -->\r\n\r\n<div\r\n  class=\"lf-scaffold lf-transitions mat-app-background mat-typography\"\r\n  [ngClass]=\"scaffoldConfig?.cssClass\">\r\n  <!-- loading overlay -->\r\n  @if (scaffoldConfig?.loading) {\r\n    <lf-loading-overlay></lf-loading-overlay>\r\n  }\r\n  <!-- header -->\r\n  <lf-header\r\n    [libraryConfig]=\"libraryConfig\"\r\n    [headerConfig]=\"headerConfig\"\r\n    [isMobile]=\"isMobile\"\r\n    [routeLoading]=\"routeLoading\"\r\n    [currentRoute]=\"currentRoute\"\r\n    (headerConfigUpdateEvent)=\"headerConfigUpdated($event)\"\r\n    (headerButtonClickEvent)=\"headerButtonClicked($event)\"\r\n    (headerInputSubmitEvent)=\"headerInputSubmitted($event)\"\r\n    (headerInputChangeEvent)=\"headerInputChanged($event)\"></lf-header>\r\n  <!-- navbar -->\r\n  <lf-navbar\r\n    [libraryConfig]=\"libraryConfig\"\r\n    [navbarConfig]=\"navbarConfig\"\r\n    [isMobile]=\"isMobile\"\r\n    [currentRoute]=\"currentRoute\"\r\n    (navbarButtonClickEvent)=\"navbarButtonClicked($event)\"></lf-navbar>\r\n  <!-- content wrapper -->\r\n  <div\r\n    class=\"lf-content-wrapper\"\r\n    [class.lf-show-navbar]=\"navbarConfig?.enable && !isMobile\"\r\n    [class.lf-show-header]=\"headerConfig?.enable && !(navbarConfig?.enable && isMobile)\"\r\n    [class.lf-show-navbar-mobile]=\"navbarConfig?.enable && isMobile && !headerConfig?.enable\"\r\n    [class.lf-show-header-and-navbar-mobile]=\"\r\n      headerConfig?.enable && navbarConfig?.enable && isMobile\r\n    \"\r\n    [class.lf-transitions]=\"initialized\"\r\n    #scrollContainer\r\n    cdkScrollable>\r\n    <!-- drawer -->\r\n    <lf-drawer\r\n      [libraryConfig]=\"libraryConfig\"\r\n      [drawerConfig]=\"drawerConfig\"\r\n      [drawerPortal]=\"drawerPortal\"\r\n      [isMobile]=\"isMobile\"\r\n      [fixedOffset]=\"headerConfig?.enable ? 64 : 0\"\r\n      (drawerConfigUpdateEvent)=\"drawerConfigUpdated($event)\">\r\n      <!-- drawer content -->\r\n      <ng-content select=\"[drawerContent]\" drawerContent></ng-content>\r\n      <!-- content title card -->\r\n      <lf-content-title-card\r\n        [libraryConfig]=\"libraryConfig\"\r\n        [contentTitleCardConfig]=\"contentTitleCardConfig\"\r\n        [isMobile]=\"isMobile\"\r\n        [routeHistory]=\"routeHistory\"\r\n        (backButtonClickEvent)=\"backButtonClicked()\"></lf-content-title-card>\r\n      <!-- main content -->\r\n      <div\r\n        class=\"lf-content\"\r\n        [class.lf-content-mobile]=\"isMobile\"\r\n        [class.lf-show-footer]=\"footerConfig?.enable\"\r\n        #content>\r\n        <ng-content></ng-content>\r\n      </div>\r\n      <!-- footer -->\r\n      <lf-footer [libraryConfig]=\"libraryConfig\" [footerConfig]=\"footerConfig\"></lf-footer>\r\n    </lf-drawer>\r\n  </div>\r\n  <!-- to top button -->\r\n  <lf-floating-button\r\n    [libraryConfig]=\"libraryConfig\"\r\n    [floatingButtonConfig]=\"floatingButtonConfig\"\r\n    [onTop]=\"scrollTopPosition <= 0\"\r\n    [isMobile]=\"isMobile && navbarConfig?.enable!\"\r\n    [bottomBarEnabled]=\"bottomBarConfig?.enable!\"\r\n    (floatingButtonConfigUpdateEvent)=\"floatingButtonConfigUpdated($event)\"\r\n    (floatingButtonClickEvent)=\"floatingButtonClicked($event)\"></lf-floating-button>\r\n  <!-- bottom bar -->\r\n  <lf-bottom-bar\r\n    [libraryConfig]=\"libraryConfig\"\r\n    [bottomBarConfig]=\"bottomBarConfig\"\r\n    [isMobile]=\"isMobile && navbarConfig?.enable!\"\r\n    [navbarEnabled]=\"navbarConfig?.enable!\"\r\n    (bottomBarCloseClickEvent)=\"bottomBarCloseClicked($event)\"\r\n    (bottomBarButtonClickEvent)=\"bottomBarButtonClicked($event)\"></lf-bottom-bar>\r\n</div>\r\n", styles: [".lf-scaffold{height:100vh}.lf-scaffold .lf-content-wrapper{position:absolute;inset:0;overflow-y:auto}.lf-scaffold .lf-content-wrapper.lf-show-navbar{left:80px}.lf-scaffold .lf-content-wrapper.lf-show-header{top:64px;height:calc(100vh - 64px)}.lf-scaffold .lf-content-wrapper.lf-show-navbar-mobile{height:calc(100vh - 56px)}.lf-scaffold .lf-content-wrapper.lf-show-header-and-navbar-mobile{top:64px;height:calc(100vh - 120px)}.lf-scaffold .lf-content-wrapper .lf-content{padding-left:24px;padding-right:24px}.lf-scaffold .lf-content-wrapper .lf-content.lf-content-mobile{padding-left:16px;padding-right:16px}.lf-scaffold .lf-content-wrapper .lf-content.lf-show-footer{min-height:100%}\n"] }]
+            args: [{ selector: 'lf-scaffold', standalone: false, template: "<!-- header-height: 64px; navbar-size: 80px; floating-button-bottom: 24px -->\r\n\r\n<div\r\n  class=\"lf-scaffold lf-transitions mat-app-background mat-typography\"\r\n  [ngClass]=\"scaffoldConfig?.cssClass\">\r\n  <!-- loading overlay -->\r\n  @if (scaffoldConfig?.loading) {\r\n    <lf-loading-overlay></lf-loading-overlay>\r\n  }\r\n  <!-- header -->\r\n  <lf-header\r\n    [libraryConfig]=\"libraryConfig\"\r\n    [headerConfig]=\"headerConfig\"\r\n    [isMobile]=\"isMobile\"\r\n    [routeLoading]=\"routeLoading\"\r\n    [currentRoute]=\"currentRoute\"\r\n    (headerConfigUpdateEvent)=\"headerConfigUpdated($event)\"\r\n    (headerButtonClickEvent)=\"headerButtonClicked($event)\"\r\n    (headerInputSubmitEvent)=\"headerInputSubmitted($event)\"\r\n    (headerInputChangeEvent)=\"headerInputChanged($event)\"></lf-header>\r\n  <!-- navbar -->\r\n  <lf-navbar\r\n    [libraryConfig]=\"libraryConfig\"\r\n    [navbarConfig]=\"navbarConfig\"\r\n    [isMobile]=\"isMobile\"\r\n    [currentRoute]=\"currentRoute\"\r\n    (navbarButtonClickEvent)=\"navbarButtonClicked($event)\"></lf-navbar>\r\n  <!-- content wrapper -->\r\n  <div\r\n    class=\"lf-content-wrapper\"\r\n    [class.lf-show-navbar]=\"navbarConfig?.enable && !isMobile\"\r\n    [class.lf-show-header]=\"headerConfig?.enable && !(navbarConfig?.enable && isMobile)\"\r\n    [class.lf-show-navbar-mobile]=\"navbarConfig?.enable && isMobile && !headerConfig?.enable\"\r\n    [class.lf-show-header-and-navbar-mobile]=\"\r\n      headerConfig?.enable && navbarConfig?.enable && isMobile\r\n    \"\r\n    [class.lf-transitions]=\"initialized\"\r\n    #scrollContainer\r\n    cdkScrollable>\r\n    <!-- drawer -->\r\n    <lf-drawer\r\n      [libraryConfig]=\"libraryConfig\"\r\n      [drawerConfig]=\"drawerConfig\"\r\n      [drawerPortal]=\"drawerPortal\"\r\n      [isMobile]=\"isMobile\"\r\n      [headerEnabled]=\"headerConfig?.enable!\"\r\n      (drawerConfigUpdateEvent)=\"drawerConfigUpdated($event)\">\r\n      <!-- drawer content -->\r\n      <ng-content select=\"[drawerContent]\" drawerContent></ng-content>\r\n      <!-- content title card -->\r\n      <lf-content-title-card\r\n        [libraryConfig]=\"libraryConfig\"\r\n        [contentTitleCardConfig]=\"contentTitleCardConfig\"\r\n        [isMobile]=\"isMobile\"\r\n        [routeHistory]=\"routeHistory\"\r\n        (backButtonClickEvent)=\"backButtonClicked()\"></lf-content-title-card>\r\n      <!-- main content -->\r\n      <div\r\n        class=\"lf-content\"\r\n        [class.lf-content-mobile]=\"isMobile\"\r\n        [class.lf-show-footer]=\"footerConfig?.enable\"\r\n        #content>\r\n        <ng-content></ng-content>\r\n      </div>\r\n      <!-- footer -->\r\n      <lf-footer [libraryConfig]=\"libraryConfig\" [footerConfig]=\"footerConfig\"></lf-footer>\r\n    </lf-drawer>\r\n  </div>\r\n  <!-- to top button -->\r\n  <lf-floating-button\r\n    [libraryConfig]=\"libraryConfig\"\r\n    [floatingButtonConfig]=\"floatingButtonConfig\"\r\n    [onTop]=\"scrollTopPosition <= 0\"\r\n    [isMobile]=\"isMobile && navbarConfig?.enable!\"\r\n    [bottomBarEnabled]=\"bottomBarConfig?.enable!\"\r\n    (floatingButtonConfigUpdateEvent)=\"floatingButtonConfigUpdated($event)\"\r\n    (floatingButtonClickEvent)=\"floatingButtonClicked($event)\"></lf-floating-button>\r\n  <!-- bottom bar -->\r\n  <lf-bottom-bar\r\n    [libraryConfig]=\"libraryConfig\"\r\n    [bottomBarConfig]=\"bottomBarConfig\"\r\n    [isMobile]=\"isMobile && navbarConfig?.enable!\"\r\n    [navbarEnabled]=\"navbarConfig?.enable!\"\r\n    (bottomBarCloseClickEvent)=\"bottomBarCloseClicked($event)\"\r\n    (bottomBarButtonClickEvent)=\"bottomBarButtonClicked($event)\"></lf-bottom-bar>\r\n</div>\r\n", styles: [".lf-scaffold{height:100vh}.lf-scaffold .lf-content-wrapper{position:absolute;inset:0;overflow-y:auto}.lf-scaffold .lf-content-wrapper.lf-show-navbar{left:calc(var(--navbar-height) + 2 * var(--navbar-padding))}.lf-scaffold .lf-content-wrapper.lf-show-header{top:var(--header-height);height:calc(100vh - var(--header-height))}.lf-scaffold .lf-content-wrapper.lf-show-navbar-mobile{height:calc(100vh - var(--navbar-height-mobile))}.lf-scaffold .lf-content-wrapper.lf-show-header-and-navbar-mobile{top:var(--header-height);height:calc(100vh - var(--header-height) - var(--navbar-height-mobile))}.lf-scaffold .lf-content-wrapper .lf-content{padding-left:var(--content-padding);padding-right:var(--content-padding)}.lf-scaffold .lf-content-wrapper .lf-content.lf-content-mobile{padding-left:var(--content-padding-mobile);padding-right:var(--content-padding-mobile)}.lf-scaffold .lf-content-wrapper .lf-content.lf-show-footer{min-height:100%}\n"] }]
         }], propDecorators: { scrollContainer: [{
                 type: ViewChild,
                 args: ['scrollContainer', { static: true }]
@@ -1472,11 +1458,11 @@ class PlaceholderComponent {
         this.buttonClickEvent = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: PlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: PlaceholderComponent, isStandalone: true, selector: "lf-placeholder", inputs: { placeholderConfig: "placeholderConfig" }, outputs: { buttonClickEvent: "buttonClickEvent" }, ngImport: i0, template: "@if (placeholderConfig) {\r\n  <div class=\"lf-placeholder\" [ngClass]=\"placeholderConfig.cssClass\">\r\n    <!-- icon -->\r\n    <lf-icon\r\n      [matIcon]=\"placeholderConfig.matIcon!\"\r\n      [svgIcon]=\"placeholderConfig.svgIcon!\"></lf-icon>\r\n    <!-- heading -->\r\n    @if (placeholderConfig.title) {\r\n      <p class=\"lf-placeholder-title\">\r\n        {{ placeholderConfig.title }}\r\n      </p>\r\n    }\r\n    <!-- message -->\r\n    @if (placeholderConfig.message) {\r\n      <p class=\"lf-placeholder-message\">\r\n        {{ placeholderConfig.message }}\r\n      </p>\r\n    }\r\n    <!-- action -->\r\n    @if (placeholderConfig.button) {\r\n      <button\r\n        mat-button\r\n        class=\"mt-4\"\r\n        color=\"accent\"\r\n        [ngClass]=\"placeholderConfig.button.cssClass\"\r\n        (click)=\"buttonClickEvent.emit()\"\r\n        [matTooltip]=\"placeholderConfig.button.tooltip\">\r\n        @if (placeholderConfig.button.matIcon || placeholderConfig.button.svgIcon) {\r\n          <lf-icon\r\n            [matIcon]=\"placeholderConfig.button.matIcon\"\r\n            [svgIcon]=\"placeholderConfig.button.svgIcon\"\r\n            verticalAlign=\"bottom\"></lf-icon>\r\n        }\r\n        {{ placeholderConfig.button.label }}\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".lf-placeholder{display:flex;flex-flow:column;align-items:center;justify-content:center;text-align:center}.lf-placeholder ::ng-deep .lf-icon{width:96px;height:96px;font-size:96px;color:#808080cc}.lf-placeholder .lf-placeholder-title{margin:0;font-size:28px;color:#808080cc}.lf-placeholder .lf-placeholder-message{margin:0;font-size:18px;color:#808080cc}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: IconComponent, selector: "lf-icon", inputs: ["matIcon", "svgIcon", "verticalAlign"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: PlaceholderComponent, isStandalone: true, selector: "lf-placeholder", inputs: { placeholderConfig: "placeholderConfig" }, outputs: { buttonClickEvent: "buttonClickEvent" }, ngImport: i0, template: "@if (placeholderConfig) {\r\n  <div class=\"lf-placeholder\" [ngClass]=\"placeholderConfig.cssClass\">\r\n    <!-- icon -->\r\n    <lf-icon\r\n      [matIcon]=\"placeholderConfig.matIcon!\"\r\n      [svgIcon]=\"placeholderConfig.svgIcon!\"></lf-icon>\r\n    <!-- heading -->\r\n    @if (placeholderConfig.title) {\r\n      <p class=\"lf-placeholder-title\">\r\n        {{ placeholderConfig.title }}\r\n      </p>\r\n    }\r\n    <!-- message -->\r\n    @if (placeholderConfig.message) {\r\n      <p class=\"lf-placeholder-message\">\r\n        {{ placeholderConfig.message }}\r\n      </p>\r\n    }\r\n    <!-- action -->\r\n    @if (placeholderConfig.button) {\r\n      <button\r\n        mat-button\r\n        class=\"mt-4\"\r\n        color=\"accent\"\r\n        [ngClass]=\"placeholderConfig.button.cssClass\"\r\n        (click)=\"buttonClickEvent.emit()\"\r\n        [matTooltip]=\"placeholderConfig.button.tooltip\">\r\n        @if (placeholderConfig.button.matIcon || placeholderConfig.button.svgIcon) {\r\n          <lf-icon\r\n            [matIcon]=\"placeholderConfig.button.matIcon\"\r\n            [svgIcon]=\"placeholderConfig.button.svgIcon\"\r\n            verticalAlign=\"bottom\"></lf-icon>\r\n        }\r\n        {{ placeholderConfig.button.label }}\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".lf-placeholder{display:flex;flex-flow:column;align-items:center;justify-content:center;text-align:center}.lf-placeholder ::ng-deep .lf-icon{width:var(--placeholder-icon-size);height:var(--placeholder-icon-size);font-size:var(--placeholder-icon-size);color:var(--color-gray)}.lf-placeholder .lf-placeholder-title{margin:0;font-size:var(--placeholder-title-font-size);color:var(--color-gray)}.lf-placeholder .lf-placeholder-message{margin:0;font-size:var(--placeholder-message-font-size);color:var(--color-gray)}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: IconComponent, selector: "lf-icon", inputs: ["matIcon", "svgIcon", "verticalAlign"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: PlaceholderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lf-placeholder', standalone: true, imports: [SharedModule, IconComponent], template: "@if (placeholderConfig) {\r\n  <div class=\"lf-placeholder\" [ngClass]=\"placeholderConfig.cssClass\">\r\n    <!-- icon -->\r\n    <lf-icon\r\n      [matIcon]=\"placeholderConfig.matIcon!\"\r\n      [svgIcon]=\"placeholderConfig.svgIcon!\"></lf-icon>\r\n    <!-- heading -->\r\n    @if (placeholderConfig.title) {\r\n      <p class=\"lf-placeholder-title\">\r\n        {{ placeholderConfig.title }}\r\n      </p>\r\n    }\r\n    <!-- message -->\r\n    @if (placeholderConfig.message) {\r\n      <p class=\"lf-placeholder-message\">\r\n        {{ placeholderConfig.message }}\r\n      </p>\r\n    }\r\n    <!-- action -->\r\n    @if (placeholderConfig.button) {\r\n      <button\r\n        mat-button\r\n        class=\"mt-4\"\r\n        color=\"accent\"\r\n        [ngClass]=\"placeholderConfig.button.cssClass\"\r\n        (click)=\"buttonClickEvent.emit()\"\r\n        [matTooltip]=\"placeholderConfig.button.tooltip\">\r\n        @if (placeholderConfig.button.matIcon || placeholderConfig.button.svgIcon) {\r\n          <lf-icon\r\n            [matIcon]=\"placeholderConfig.button.matIcon\"\r\n            [svgIcon]=\"placeholderConfig.button.svgIcon\"\r\n            verticalAlign=\"bottom\"></lf-icon>\r\n        }\r\n        {{ placeholderConfig.button.label }}\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".lf-placeholder{display:flex;flex-flow:column;align-items:center;justify-content:center;text-align:center}.lf-placeholder ::ng-deep .lf-icon{width:96px;height:96px;font-size:96px;color:#808080cc}.lf-placeholder .lf-placeholder-title{margin:0;font-size:28px;color:#808080cc}.lf-placeholder .lf-placeholder-message{margin:0;font-size:18px;color:#808080cc}\n"] }]
+            args: [{ selector: 'lf-placeholder', standalone: true, imports: [SharedModule, IconComponent], template: "@if (placeholderConfig) {\r\n  <div class=\"lf-placeholder\" [ngClass]=\"placeholderConfig.cssClass\">\r\n    <!-- icon -->\r\n    <lf-icon\r\n      [matIcon]=\"placeholderConfig.matIcon!\"\r\n      [svgIcon]=\"placeholderConfig.svgIcon!\"></lf-icon>\r\n    <!-- heading -->\r\n    @if (placeholderConfig.title) {\r\n      <p class=\"lf-placeholder-title\">\r\n        {{ placeholderConfig.title }}\r\n      </p>\r\n    }\r\n    <!-- message -->\r\n    @if (placeholderConfig.message) {\r\n      <p class=\"lf-placeholder-message\">\r\n        {{ placeholderConfig.message }}\r\n      </p>\r\n    }\r\n    <!-- action -->\r\n    @if (placeholderConfig.button) {\r\n      <button\r\n        mat-button\r\n        class=\"mt-4\"\r\n        color=\"accent\"\r\n        [ngClass]=\"placeholderConfig.button.cssClass\"\r\n        (click)=\"buttonClickEvent.emit()\"\r\n        [matTooltip]=\"placeholderConfig.button.tooltip\">\r\n        @if (placeholderConfig.button.matIcon || placeholderConfig.button.svgIcon) {\r\n          <lf-icon\r\n            [matIcon]=\"placeholderConfig.button.matIcon\"\r\n            [svgIcon]=\"placeholderConfig.button.svgIcon\"\r\n            verticalAlign=\"bottom\"></lf-icon>\r\n        }\r\n        {{ placeholderConfig.button.label }}\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".lf-placeholder{display:flex;flex-flow:column;align-items:center;justify-content:center;text-align:center}.lf-placeholder ::ng-deep .lf-icon{width:var(--placeholder-icon-size);height:var(--placeholder-icon-size);font-size:var(--placeholder-icon-size);color:var(--color-gray)}.lf-placeholder .lf-placeholder-title{margin:0;font-size:var(--placeholder-title-font-size);color:var(--color-gray)}.lf-placeholder .lf-placeholder-message{margin:0;font-size:var(--placeholder-message-font-size);color:var(--color-gray)}\n"] }]
         }], propDecorators: { placeholderConfig: [{
                 type: Input
             }], buttonClickEvent: [{
@@ -1672,11 +1658,11 @@ class ListComponent {
         click.stopImmediatePropagation();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: ListComponent, isStandalone: true, selector: "lf-list", inputs: { config: "config", header: "header", items: "items", groupedItems: "groupedItems", buttons: "buttons", dropListId: "dropListId", connectedDropListIds: "connectedDropListIds" }, outputs: { sortChangeEvent: "sortChangeEvent", selectionChangeEvent: "selectionChangeEvent", itemClickEvent: "itemClickEvent", itemDropEvent: "itemDropEvent", buttonClickEvent: "buttonClickEvent" }, queries: [{ propertyName: "avatarTemplate", first: true, predicate: ListItemAvatarDirective, descendants: true }, { propertyName: "titleTemplate", first: true, predicate: ListItemTitleDirective, descendants: true }, { propertyName: "subtitleTemplate", first: true, predicate: ListItemSubtitleDirective, descendants: true }, { propertyName: "buttonsTemplate", first: true, predicate: ListItemButtonsDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"lf-list\" cdkDropListGroup>\r\n  <!-- Header -->\r\n  @if (header) {\r\n    <div class=\"lf-list-item lf-list-item-header\">\r\n      <!-- avatar -->\r\n      @if (header.avatar) {\r\n        <div class=\"lf-list-item-avatar px-2\">\r\n          <img [src]=\"header.avatar\" alt=\"Avatar of header\" (error)=\"onImageError($event)\" />\r\n        </div>\r\n      } @else if (header.matIcon || header.svgIcon) {\r\n        <div class=\"lf-list-item-avatar px-2\">\r\n          <lf-icon [matIcon]=\"header.matIcon\" [svgIcon]=\"header.svgIcon\"></lf-icon>\r\n        </div>\r\n      } @else if (hasAvatars) {\r\n        <div class=\"lf-list-item-avatar px-2\"></div>\r\n      }\r\n\r\n      <!-- title -->\r\n      <div class=\"lf-list-item-title-wrapper flex-row px-2\">\r\n        @for (item of header.items; track $index) {\r\n          <span [class.clickable]=\"item.sortToken\" (click)=\"updateSortToken(item.sortToken)\">\r\n            {{ item.title }}\r\n            @if (sortToken === item.sortToken) {\r\n              <mat-icon class=\"lf-list-item-sort-icon\">\r\n                {{ sortAsc ? \"arrow_downward\" : \"arrow_upward\" }}\r\n              </mat-icon>\r\n            }\r\n          </span>\r\n        }\r\n      </div>\r\n\r\n      <!-- buttons -->\r\n      <div class=\"lf-list-item-buttons\">\r\n        @for (button of header.buttons; track button.id) {\r\n          @if (button.label) {\r\n            <button\r\n              mat-button\r\n              class=\"lf-list-item-button ml-2\"\r\n              [class.disabled]=\"button.disabled\"\r\n              [ngClass]=\"button.cssClass\"\r\n              [disabled]=\"button.disabled\"\r\n              [matTooltip]=\"button.tooltip\"\r\n              (click)=\"clickButton({ buttonId: button.id, item: null! }, $event)\">\r\n              @if (button.matIcon || button.svgIcon) {\r\n                <lf-icon\r\n                  [matIcon]=\"button.matIcon\"\r\n                  [svgIcon]=\"button.svgIcon\"\r\n                  verticalAlign=\"bottom\"></lf-icon>\r\n              }\r\n              {{ button.label }}\r\n            </button>\r\n          } @else {\r\n            <button\r\n              mat-icon-button\r\n              class=\"lf-list-item-icon ml-2\"\r\n              [class.disabled]=\"button.disabled\"\r\n              [ngClass]=\"button.cssClass\"\r\n              [disabled]=\"button.disabled\"\r\n              [matTooltip]=\"button.tooltip\"\r\n              (click)=\"clickButton({ buttonId: button.id, item: null! }, $event)\">\r\n              <lf-icon [matIcon]=\"button.matIcon\" [svgIcon]=\"button.svgIcon\"></lf-icon>\r\n            </button>\r\n          }\r\n        }\r\n      </div>\r\n\r\n      <!-- checkbox -->\r\n      @if (config?.enableSelection) {\r\n        <div class=\"lf-list-item-checkbox ml-3\">\r\n          <mat-checkbox\r\n            [(ngModel)]=\"allSelected\"\r\n            [indeterminate]=\"someSelected\"\r\n            (change)=\"selectAll($event)\"></mat-checkbox>\r\n        </div>\r\n      }\r\n    </div>\r\n    <mat-divider></mat-divider>\r\n  }\r\n\r\n  <!-- Grouped Items -->\r\n  @if (config?.mode === \"group\" && groupedItems) {\r\n    @for (group of groupedItems | keyvalue; track group.key; let first = $first) {\r\n      <div class=\"lf-list-group\" [class.mt-4]=\"!first\">\r\n        @if (group.key) {\r\n          <div class=\"lf-list-item lf-list-group-header\">\r\n            <div class=\"lf-list-item-avatar px-2\"></div>\r\n            <div class=\"lf-list-item-title-wrapper flex-row px-2\">\r\n              <span>{{ group.key }}</span>\r\n            </div>\r\n          </div>\r\n        }\r\n        <div\r\n          [id]=\"group.key\"\r\n          cdkDropList\r\n          [cdkDropListData]=\"group.value\"\r\n          [cdkDropListDisabled]=\"!config?.enableDragging\"\r\n          [cdkDropListConnectedTo]=\"connectedDropListIds\"\r\n          (cdkDropListDropped)=\"dropItem($event, group.key)\"\r\n          [class.drop-zone]=\"config?.enableDragging && group.value.length <= 0\">\r\n          @for (item of group.value; track item.id; let last = $last) {\r\n            <div\r\n              cdkDrag\r\n              [cdkDragData]=\"item\"\r\n              [cdkDragDisabled]=\"item.disabled || !config?.enableDragging\">\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"listItemTemplate\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: item, last: last }\"></ng-container>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n    <!-- Flat Items -->\r\n  } @else {\r\n    <div\r\n      [id]=\"dropListId\"\r\n      cdkDropList\r\n      [cdkDropListData]=\"items\"\r\n      [cdkDropListDisabled]=\"!config?.enableDragging\"\r\n      [cdkDropListConnectedTo]=\"connectedDropListIds\"\r\n      (cdkDropListDropped)=\"dropItem($event, dropListId)\"\r\n      [class.drop-zone]=\"config?.enableDragging && items.length <= 0\">\r\n      @for (item of items; track item.id; let last = $last) {\r\n        <div\r\n          cdkDrag\r\n          [cdkDragData]=\"item\"\r\n          [cdkDragDisabled]=\"item.disabled || !config?.enableDragging\">\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"listItemTemplate\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: item, last: last }\"></ng-container>\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <!-- Item (template) -->\r\n  <ng-template #listItemTemplate let-item let-last=\"last\">\r\n    <div\r\n      class=\"lf-list-item lf-list-item-data\"\r\n      [class.active]=\"item.checked\"\r\n      [class.disabled]=\"item.disabled\"\r\n      [class.clickable]=\"item.clickable && !item.disabled\"\r\n      [ngClass]=\"item.cssClass\"\r\n      matRipple\r\n      [matRippleDisabled]=\"!item.clickable\"\r\n      (click)=\"item.clickable && !item.disabled ? clickItem(item, $event) : null\">\r\n      <!-- avatar -->\r\n      @if (avatarTemplate) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"avatarTemplate.templateRef\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n      } @else if (item.avatar) {\r\n        <div class=\"lf-list-item-avatar px-2\">\r\n          <img\r\n            [src]=\"item.avatar\"\r\n            [alt]=\"'Avatar of ' + item.title\"\r\n            (error)=\"onImageError($event)\" />\r\n        </div>\r\n      } @else if (item.matIcon || item.svgIcon) {\r\n        <div class=\"lf-list-item-avatar px-2\">\r\n          <lf-icon [matIcon]=\"item.matIcon\" [svgIcon]=\"item.svgIcon\"></lf-icon>\r\n        </div>\r\n      }\r\n\r\n      <!-- title -->\r\n      <div class=\"lf-list-item-title-wrapper px-2\">\r\n        <span class=\"lf-list-item-title\">\r\n          @if (titleTemplate) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"titleTemplate.templateRef\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n          } @else {\r\n            {{ item.title }}\r\n          }\r\n        </span>\r\n        @if (item.subtitle || subtitleTemplate) {\r\n          <span class=\"lf-list-item-subtitle\">\r\n            @if (subtitleTemplate) {\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"subtitleTemplate.templateRef\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n            } @else {\r\n              {{ item.subtitle }}\r\n            }\r\n          </span>\r\n        }\r\n      </div>\r\n\r\n      <!-- buttons -->\r\n      <div class=\"lf-list-item-buttons\">\r\n        @if (buttonsTemplate) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"buttonsTemplate.templateRef\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n        } @else {\r\n          @let combinedButtons = getCombinedButtons(item);\r\n          @for (button of combinedButtons; track button.id) {\r\n            @if (!item.hiddenButtonIds?.includes(button.id)) {\r\n              @let disabled =\r\n                button.disabled || item.disabled || item.disabledButtonIds?.includes(button.id);\r\n              @if (button.label) {\r\n                <button\r\n                  mat-button\r\n                  class=\"lf-list-item-button ml-2\"\r\n                  [class.disabled]=\"disabled\"\r\n                  [ngClass]=\"button.cssClass\"\r\n                  [disabled]=\"disabled\"\r\n                  [matTooltip]=\"button.tooltip\"\r\n                  (click)=\"clickButton({ buttonId: button.id, item }, $event)\">\r\n                  @if (button.matIcon || button.svgIcon) {\r\n                    <lf-icon\r\n                      [matIcon]=\"button.matIcon\"\r\n                      [svgIcon]=\"button.svgIcon\"\r\n                      verticalAlign=\"bottom\"></lf-icon>\r\n                  }\r\n                  {{ button.label }}\r\n                </button>\r\n              } @else {\r\n                <button\r\n                  mat-icon-button\r\n                  class=\"lf-list-item-icon ml-2\"\r\n                  [class.disabled]=\"disabled\"\r\n                  [ngClass]=\"button.cssClass\"\r\n                  [disabled]=\"disabled\"\r\n                  [matTooltip]=\"button.tooltip\"\r\n                  (click)=\"clickButton({ buttonId: button.id, item }, $event)\">\r\n                  <lf-icon [matIcon]=\"button.matIcon\" [svgIcon]=\"button.svgIcon\"></lf-icon>\r\n                </button>\r\n              }\r\n            }\r\n          }\r\n        }\r\n\r\n        <!-- drag -->\r\n        @if (config?.enableDragging) {\r\n          <button\r\n            mat-icon-button\r\n            class=\"lf-list-item-icon ml-2\"\r\n            [class.disabled]=\"item.disabled\"\r\n            [disabled]=\"item.disabled\"\r\n            (click)=\"stopPropagation($event)\"\r\n            cdkDragHandle>\r\n            <mat-icon>drag_indicator</mat-icon>\r\n          </button>\r\n        }\r\n      </div>\r\n\r\n      <!-- checkbox -->\r\n      @if (config?.enableSelection) {\r\n        <div class=\"lf-list-item-checkbox ml-3\">\r\n          <mat-checkbox\r\n            [(ngModel)]=\"item.checked\"\r\n            [disabled]=\"item.disabled!\"\r\n            (change)=\"selectItem(item, $event)\"\r\n            (click)=\"stopPropagation($event)\"></mat-checkbox>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    @if (config?.showDividers && !last) {\r\n      <mat-divider></mat-divider>\r\n    }\r\n  </ng-template>\r\n</div>\r\n", styles: [".lf-list,.lf-list .lf-list-group{width:100%}.lf-list .lf-list-group .lf-list-group-header{font-weight:500;height:56px}.lf-list-item{width:100%;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;height:72px;border-radius:4px;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:16px;width:16px;height:16px;vertical-align:text-top}.lf-list-item .lf-list-item-checkbox{flex:0 0 40px}.lf-list-item .lf-list-item-avatar{flex:0 0 48px;display:flex;align-items:center;justify-content:center}.lf-list-item .lf-list-item-avatar img{width:48px;height:48px;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 200px;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:80px}.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:72px;border:2px dashed rgba(128,128,128,.8);border-radius:4px;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:4px;opacity:.8;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.4}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$3.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i8.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: i9.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i9.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i9.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i9.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: IconComponent, selector: "lf-icon", inputs: ["matIcon", "svgIcon", "verticalAlign"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: ListComponent, isStandalone: true, selector: "lf-list", inputs: { config: "config", header: "header", items: "items", groupedItems: "groupedItems", buttons: "buttons", dropListId: "dropListId", connectedDropListIds: "connectedDropListIds" }, outputs: { sortChangeEvent: "sortChangeEvent", selectionChangeEvent: "selectionChangeEvent", itemClickEvent: "itemClickEvent", itemDropEvent: "itemDropEvent", buttonClickEvent: "buttonClickEvent" }, queries: [{ propertyName: "avatarTemplate", first: true, predicate: ListItemAvatarDirective, descendants: true }, { propertyName: "titleTemplate", first: true, predicate: ListItemTitleDirective, descendants: true }, { propertyName: "subtitleTemplate", first: true, predicate: ListItemSubtitleDirective, descendants: true }, { propertyName: "buttonsTemplate", first: true, predicate: ListItemButtonsDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"lf-list\" cdkDropListGroup>\r\n  <!-- Header -->\r\n  @if (header) {\r\n    <div class=\"lf-list-item lf-list-item-header\">\r\n      <!-- avatar -->\r\n      @if (header.avatar) {\r\n        <div class=\"lf-list-item-avatar px-2\">\r\n          <img [src]=\"header.avatar\" alt=\"Avatar of header\" (error)=\"onImageError($event)\" />\r\n        </div>\r\n      } @else if (header.matIcon || header.svgIcon) {\r\n        <div class=\"lf-list-item-avatar px-2\">\r\n          <lf-icon [matIcon]=\"header.matIcon\" [svgIcon]=\"header.svgIcon\"></lf-icon>\r\n        </div>\r\n      } @else if (hasAvatars) {\r\n        <div class=\"lf-list-item-avatar px-2\"></div>\r\n      }\r\n\r\n      <!-- title -->\r\n      <div class=\"lf-list-item-title-wrapper flex-row px-2\">\r\n        @for (item of header.items; track $index) {\r\n          <span [class.clickable]=\"item.sortToken\" (click)=\"updateSortToken(item.sortToken)\">\r\n            {{ item.title }}\r\n            @if (sortToken === item.sortToken) {\r\n              <mat-icon class=\"lf-list-item-sort-icon\">\r\n                {{ sortAsc ? \"arrow_downward\" : \"arrow_upward\" }}\r\n              </mat-icon>\r\n            }\r\n          </span>\r\n        }\r\n      </div>\r\n\r\n      <!-- buttons -->\r\n      <div class=\"lf-list-item-buttons\">\r\n        @for (button of header.buttons; track button.id) {\r\n          @if (button.label) {\r\n            <button\r\n              mat-button\r\n              class=\"lf-list-item-button ml-2\"\r\n              [class.disabled]=\"button.disabled\"\r\n              [ngClass]=\"button.cssClass\"\r\n              [disabled]=\"button.disabled\"\r\n              [matTooltip]=\"button.tooltip\"\r\n              (click)=\"clickButton({ buttonId: button.id, item: null! }, $event)\">\r\n              @if (button.matIcon || button.svgIcon) {\r\n                <lf-icon\r\n                  [matIcon]=\"button.matIcon\"\r\n                  [svgIcon]=\"button.svgIcon\"\r\n                  verticalAlign=\"bottom\"></lf-icon>\r\n              }\r\n              {{ button.label }}\r\n            </button>\r\n          } @else {\r\n            <button\r\n              mat-icon-button\r\n              class=\"lf-list-item-icon ml-2\"\r\n              [class.disabled]=\"button.disabled\"\r\n              [ngClass]=\"button.cssClass\"\r\n              [disabled]=\"button.disabled\"\r\n              [matTooltip]=\"button.tooltip\"\r\n              (click)=\"clickButton({ buttonId: button.id, item: null! }, $event)\">\r\n              <lf-icon [matIcon]=\"button.matIcon\" [svgIcon]=\"button.svgIcon\"></lf-icon>\r\n            </button>\r\n          }\r\n        }\r\n      </div>\r\n\r\n      <!-- checkbox -->\r\n      @if (config?.enableSelection) {\r\n        <div class=\"lf-list-item-checkbox ml-3\">\r\n          <mat-checkbox\r\n            [(ngModel)]=\"allSelected\"\r\n            [indeterminate]=\"someSelected\"\r\n            (change)=\"selectAll($event)\"></mat-checkbox>\r\n        </div>\r\n      }\r\n    </div>\r\n    <mat-divider></mat-divider>\r\n  }\r\n\r\n  <!-- Grouped Items -->\r\n  @if (config?.mode === \"group\" && groupedItems) {\r\n    @for (group of groupedItems | keyvalue; track group.key; let first = $first) {\r\n      <div class=\"lf-list-group\" [class.mt-4]=\"!first\">\r\n        @if (group.key) {\r\n          <div class=\"lf-list-item lf-list-group-header\">\r\n            <div class=\"lf-list-item-avatar px-2\"></div>\r\n            <div class=\"lf-list-item-title-wrapper flex-row px-2\">\r\n              <span>{{ group.key }}</span>\r\n            </div>\r\n          </div>\r\n        }\r\n        <div\r\n          [id]=\"group.key\"\r\n          cdkDropList\r\n          [cdkDropListData]=\"group.value\"\r\n          [cdkDropListDisabled]=\"!config?.enableDragging\"\r\n          [cdkDropListConnectedTo]=\"connectedDropListIds\"\r\n          (cdkDropListDropped)=\"dropItem($event, group.key)\"\r\n          [class.drop-zone]=\"config?.enableDragging && group.value.length <= 0\">\r\n          @for (item of group.value; track item.id; let last = $last) {\r\n            <div\r\n              cdkDrag\r\n              [cdkDragData]=\"item\"\r\n              [cdkDragDisabled]=\"item.disabled || !config?.enableDragging\">\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"listItemTemplate\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: item, last: last }\"></ng-container>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n    <!-- Flat Items -->\r\n  } @else {\r\n    <div\r\n      [id]=\"dropListId\"\r\n      cdkDropList\r\n      [cdkDropListData]=\"items\"\r\n      [cdkDropListDisabled]=\"!config?.enableDragging\"\r\n      [cdkDropListConnectedTo]=\"connectedDropListIds\"\r\n      (cdkDropListDropped)=\"dropItem($event, dropListId)\"\r\n      [class.drop-zone]=\"config?.enableDragging && items.length <= 0\">\r\n      @for (item of items; track item.id; let last = $last) {\r\n        <div\r\n          cdkDrag\r\n          [cdkDragData]=\"item\"\r\n          [cdkDragDisabled]=\"item.disabled || !config?.enableDragging\">\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"listItemTemplate\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: item, last: last }\"></ng-container>\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <!-- Item (template) -->\r\n  <ng-template #listItemTemplate let-item let-last=\"last\">\r\n    <div\r\n      class=\"lf-list-item lf-list-item-data\"\r\n      [class.active]=\"item.checked\"\r\n      [class.disabled]=\"item.disabled\"\r\n      [class.clickable]=\"item.clickable && !item.disabled\"\r\n      [ngClass]=\"item.cssClass\"\r\n      matRipple\r\n      [matRippleDisabled]=\"!item.clickable\"\r\n      (click)=\"item.clickable && !item.disabled ? clickItem(item, $event) : null\">\r\n      <!-- avatar -->\r\n      @if (avatarTemplate) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"avatarTemplate.templateRef\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n      } @else if (item.avatar) {\r\n        <div class=\"lf-list-item-avatar px-2\">\r\n          <img\r\n            [src]=\"item.avatar\"\r\n            [alt]=\"'Avatar of ' + item.title\"\r\n            (error)=\"onImageError($event)\" />\r\n        </div>\r\n      } @else if (item.matIcon || item.svgIcon) {\r\n        <div class=\"lf-list-item-avatar px-2\">\r\n          <lf-icon [matIcon]=\"item.matIcon\" [svgIcon]=\"item.svgIcon\"></lf-icon>\r\n        </div>\r\n      }\r\n\r\n      <!-- title -->\r\n      <div class=\"lf-list-item-title-wrapper px-2\">\r\n        <span class=\"lf-list-item-title\">\r\n          @if (titleTemplate) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"titleTemplate.templateRef\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n          } @else {\r\n            {{ item.title }}\r\n          }\r\n        </span>\r\n        @if (item.subtitle || subtitleTemplate) {\r\n          <span class=\"lf-list-item-subtitle\">\r\n            @if (subtitleTemplate) {\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"subtitleTemplate.templateRef\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n            } @else {\r\n              {{ item.subtitle }}\r\n            }\r\n          </span>\r\n        }\r\n      </div>\r\n\r\n      <!-- buttons -->\r\n      <div class=\"lf-list-item-buttons\">\r\n        @if (buttonsTemplate) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"buttonsTemplate.templateRef\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n        } @else {\r\n          @let combinedButtons = getCombinedButtons(item);\r\n          @for (button of combinedButtons; track button.id) {\r\n            @if (!item.hiddenButtonIds?.includes(button.id)) {\r\n              @let disabled =\r\n                button.disabled || item.disabled || item.disabledButtonIds?.includes(button.id);\r\n              @if (button.label) {\r\n                <button\r\n                  mat-button\r\n                  class=\"lf-list-item-button ml-2\"\r\n                  [class.disabled]=\"disabled\"\r\n                  [ngClass]=\"button.cssClass\"\r\n                  [disabled]=\"disabled\"\r\n                  [matTooltip]=\"button.tooltip\"\r\n                  (click)=\"clickButton({ buttonId: button.id, item }, $event)\">\r\n                  @if (button.matIcon || button.svgIcon) {\r\n                    <lf-icon\r\n                      [matIcon]=\"button.matIcon\"\r\n                      [svgIcon]=\"button.svgIcon\"\r\n                      verticalAlign=\"bottom\"></lf-icon>\r\n                  }\r\n                  {{ button.label }}\r\n                </button>\r\n              } @else {\r\n                <button\r\n                  mat-icon-button\r\n                  class=\"lf-list-item-icon ml-2\"\r\n                  [class.disabled]=\"disabled\"\r\n                  [ngClass]=\"button.cssClass\"\r\n                  [disabled]=\"disabled\"\r\n                  [matTooltip]=\"button.tooltip\"\r\n                  (click)=\"clickButton({ buttonId: button.id, item }, $event)\">\r\n                  <lf-icon [matIcon]=\"button.matIcon\" [svgIcon]=\"button.svgIcon\"></lf-icon>\r\n                </button>\r\n              }\r\n            }\r\n          }\r\n        }\r\n\r\n        <!-- drag -->\r\n        @if (config?.enableDragging) {\r\n          <button\r\n            mat-icon-button\r\n            class=\"lf-list-item-icon ml-2\"\r\n            [class.disabled]=\"item.disabled\"\r\n            [disabled]=\"item.disabled\"\r\n            (click)=\"stopPropagation($event)\"\r\n            cdkDragHandle>\r\n            <mat-icon>drag_indicator</mat-icon>\r\n          </button>\r\n        }\r\n      </div>\r\n\r\n      <!-- checkbox -->\r\n      @if (config?.enableSelection) {\r\n        <div class=\"lf-list-item-checkbox ml-3\">\r\n          <mat-checkbox\r\n            [(ngModel)]=\"item.checked\"\r\n            [disabled]=\"item.disabled!\"\r\n            (change)=\"selectItem(item, $event)\"\r\n            (click)=\"stopPropagation($event)\"></mat-checkbox>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    @if (config?.showDividers && !last) {\r\n      <mat-divider></mat-divider>\r\n    }\r\n  </ng-template>\r\n</div>\r\n", styles: [".lf-list,.lf-list .lf-list-group{width:100%}.lf-list .lf-list-group .lf-list-group-header{font-weight:500;height:calc(var(--list-item-height) - 16px)}.lf-list-item{width:100%;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;height:var(--list-item-height);border-radius:var(--list-item-border-radius);box-sizing:border-box;overflow:hidden}.lf-list-item.disabled .lf-list-item-title-wrapper{opacity:.64}.lf-list-item .lf-list-item-sort-icon{font-size:var(--list-item-sort-icon-size);width:var(--list-item-sort-icon-size);height:var(--list-item-sort-icon-size);vertical-align:text-top}.lf-list-item .lf-list-item-checkbox{flex:0 0 var(--list-item-checkbox-width)}.lf-list-item .lf-list-item-avatar{flex:0 0 var(--list-item-avatar-size);display:flex;align-items:center;justify-content:center}.lf-list-item .lf-list-item-avatar img{width:var(--list-item-avatar-size);height:var(--list-item-avatar-size);border-radius:50%;object-fit:cover}.lf-list-item .lf-list-item-title-wrapper{display:flex;flex-flow:column;align-items:flex-start;flex:1 1 var(--list-item-title-width);overflow:hidden}.lf-list-item .lf-list-item-title-wrapper .lf-list-item-title{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.lf-list-item .lf-list-item-title-wrapper .lf-list-item-subtitle{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.8rem}.lf-list-item .lf-list-item-buttons{flex:0 0 auto;display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between}.lf-list-item.lf-list-item-header{font-weight:500}.lf-list-item.lf-list-item-header .lf-list-item-title-wrapper span{width:var(--list-item-title-wrapper-width)}.lf-list-item.lf-list-item-data:hover{background-color:#00000014}.lf-list-item .flex-row{display:flex!important;flex-flow:row nowrap;align-items:center}.drop-zone{width:100%;height:var(--list-item-height);border:2px dashed var(--color-gray);border-radius:var(--list-item-border-radius);box-sizing:border-box}.clickable{cursor:pointer!important}.cdk-drag-preview{color:var(--mat-app-text-color, inherit)!important;background:var(--mat-app-background-color, inherit)!important;box-sizing:border-box;border-radius:var(--list-item-border-radius);opacity:.8;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.4}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$3.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i8.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: i9.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i9.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i9.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i9.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: IconComponent, selector: "lf-icon", inputs: ["matIcon", "svgIcon", "verticalAlign"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lf-list', standalone: true, imports: [SharedModule, IconComponent], template: "<div class=\"lf-list\" cdkDropListGroup>\r\n  <!-- Header -->\r\n  @if (header) {\r\n    <div class=\"lf-list-item lf-list-item-header\">\r\n      <!-- avatar -->\r\n      @if (header.avatar) {\r\n        <div class=\"lf-list-item-avatar px-2\">\r\n          <img [src]=\"header.avatar\" alt=\"Avatar of header\" (error)=\"onImageError($event)\" />\r\n        </div>\r\n      } @else if (header.matIcon || header.svgIcon) {\r\n        <div class=\"lf-list-item-avatar px-2\">\r\n          <lf-icon [matIcon]=\"header.matIcon\" [svgIcon]=\"header.svgIcon\"></lf-icon>\r\n        </div>\r\n      } @else if (hasAvatars) {\r\n        <div class=\"lf-list-item-avatar px-2\"></div>\r\n      }\r\n\r\n      <!-- title -->\r\n      <div class=\"lf-list-item-title-wrapper flex-row px-2\">\r\n        @for (item of header.items; track $index) {\r\n          <span [class.clickable]=\"item.sortToken\" (click)=\"updateSortToken(item.sortToken)\">\r\n            {{ item.title }}\r\n            @if (sortToken === item.sortToken) {\r\n              <mat-icon class=\"lf-list-item-sort-icon\">\r\n                {{ sortAsc ? \"arrow_downward\" : \"arrow_upward\" }}\r\n              </mat-icon>\r\n            }\r\n          </span>\r\n        }\r\n      </div>\r\n\r\n      <!-- buttons -->\r\n      <div class=\"lf-list-item-buttons\">\r\n        @for (button of header.buttons; track button.id) {\r\n          @if (button.label) {\r\n            <button\r\n              mat-button\r\n              class=\"lf-list-item-button ml-2\"\r\n              [class.disabled]=\"button.disabled\"\r\n              [ngClass]=\"button.cssClass\"\r\n              [disabled]=\"button.disabled\"\r\n              [matTooltip]=\"button.tooltip\"\r\n              (click)=\"clickButton({ buttonId: button.id, item: null! }, $event)\">\r\n              @if (button.matIcon || button.svgIcon) {\r\n                <lf-icon\r\n                  [matIcon]=\"button.matIcon\"\r\n                  [svgIcon]=\"button.svgIcon\"\r\n                  verticalAlign=\"bottom\"></lf-icon>\r\n              }\r\n              {{ button.label }}\r\n            </button>\r\n          } @else {\r\n            <button\r\n              mat-icon-button\r\n              class=\"lf-list-item-icon ml-2\"\r\n              [class.disabled]=\"button.disabled\"\r\n              [ngClass]=\"button.cssClass\"\r\n              [disabled]=\"button.disabled\"\r\n              [matTooltip]=\"button.tooltip\"\r\n              (click)=\"clickButton({ buttonId: button.id, item: null! }, $event)\">\r\n              <lf-icon [matIcon]=\"button.matIcon\" [svgIcon]=\"button.svgIcon\"></lf-icon>\r\n            </button>\r\n          }\r\n        }\r\n      </div>\r\n\r\n      <!-- checkbox -->\r\n      @if (config?.enableSelection) {\r\n        <div class=\"lf-list-item-checkbox ml-3\">\r\n          <mat-checkbox\r\n            [(ngModel)]=\"allSelected\"\r\n            [indeterminate]=\"someSelected\"\r\n            (change)=\"selectAll($event)\"></mat-checkbox>\r\n        </div>\r\n      }\r\n    </div>\r\n    <mat-divider></mat-divider>\r\n  }\r\n\r\n  <!-- Grouped Items -->\r\n  @if (config?.mode === \"group\" && groupedItems) {\r\n    @for (group of groupedItems | keyvalue; track group.key; let first = $first) {\r\n      <div class=\"lf-list-group\" [class.mt-4]=\"!first\">\r\n        @if (group.key) {\r\n          <div class=\"lf-list-item lf-list-group-header\">\r\n            <div class=\"lf-list-item-avatar px-2\"></div>\r\n            <div class=\"lf-list-item-title-wrapper flex-row px-2\">\r\n              <span>{{ group.key }}</span>\r\n            </div>\r\n          </div>\r\n        }\r\n        <div\r\n          [id]=\"group.key\"\r\n          cdkDropList\r\n          [cdkDropListData]=\"group.value\"\r\n          [cdkDropListDisabled]=\"!config?.enableDragging\"\r\n          [cdkDropListConnectedTo]=\"connectedDropListIds\"\r\n          (cdkDropListDropped)=\"dropItem($event, group.key)\"\r\n          [class.drop-zone]=\"config?.enableDragging && group.value.length <= 0\">\r\n          @for (item of group.value; track item.id; let last = $last) {\r\n            <div\r\n              cdkDrag\r\n              [cdkDragData]=\"item\"\r\n              [cdkDragDisabled]=\"item.disabled || !config?.enableDragging\">\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"listItemTemplate\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: item, last: last }\"></ng-container>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n    <!-- Flat Items -->\r\n  } @else {\r\n    <div\r\n      [id]=\"dropListId\"\r\n      cdkDropList\r\n      [cdkDropListData]=\"items\"\r\n      [cdkDropListDisabled]=\"!config?.enableDragging\"\r\n      [cdkDropListConnectedTo]=\"connectedDropListIds\"\r\n      (cdkDropListDropped)=\"dropItem($event, dropListId)\"\r\n      [class.drop-zone]=\"config?.enableDragging && items.length <= 0\">\r\n      @for (item of items; track item.id; let last = $last) {\r\n        <div\r\n          cdkDrag\r\n          [cdkDragData]=\"item\"\r\n          [cdkDragDisabled]=\"item.disabled || !config?.enableDragging\">\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"listItemTemplate\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: item, last: last }\"></ng-container>\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <!-- Item (template) -->\r\n  <ng-template #listItemTemplate let-item let-last=\"last\">\r\n    <div\r\n      class=\"lf-list-item lf-list-item-data\"\r\n      [class.active]=\"item.checked\"\r\n      [class.disabled]=\"item.disabled\"\r\n      [class.clickable]=\"item.clickable && !item.disabled\"\r\n      [ngClass]=\"item.cssClass\"\r\n      matRipple\r\n      [matRippleDisabled]=\"!item.clickable\"\r\n      (click)=\"item.clickable && !item.disabled ? clickItem(item, $event) : null\">\r\n      <!-- avatar -->\r\n      @if (avatarTemplate) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"avatarTemplate.templateRef\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n      } @else if (item.avatar) {\r\n        <div class=\"lf-list-item-avatar px-2\">\r\n          <img\r\n            [src]=\"item.avatar\"\r\n            [alt]=\"'Avatar of ' + item.title\"\r\n            (error)=\"onImageError($event)\" />\r\n        </div>\r\n      } @else if (item.matIcon || item.svgIcon) {\r\n        <div class=\"lf-list-item-avatar px-2\">\r\n          <lf-icon [matIcon]=\"item.matIcon\" [svgIcon]=\"item.svgIcon\"></lf-icon>\r\n        </div>\r\n      }\r\n\r\n      <!-- title -->\r\n      <div class=\"lf-list-item-title-wrapper px-2\">\r\n        <span class=\"lf-list-item-title\">\r\n          @if (titleTemplate) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"titleTemplate.templateRef\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n          } @else {\r\n            {{ item.title }}\r\n          }\r\n        </span>\r\n        @if (item.subtitle || subtitleTemplate) {\r\n          <span class=\"lf-list-item-subtitle\">\r\n            @if (subtitleTemplate) {\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"subtitleTemplate.templateRef\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n            } @else {\r\n              {{ item.subtitle }}\r\n            }\r\n          </span>\r\n        }\r\n      </div>\r\n\r\n      <!-- buttons -->\r\n      <div class=\"lf-list-item-buttons\">\r\n        @if (buttonsTemplate) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"buttonsTemplate.templateRef\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n        } @else {\r\n          @let combinedButtons = getCombinedButtons(item);\r\n          @for (button of combinedButtons; track button.id) {\r\n            @if (!item.hiddenButtonIds?.includes(button.id)) {\r\n              @let disabled =\r\n                button.disabled || item.disabled || item.disabledButtonIds?.includes(button.id);\r\n              @if (button.label) {\r\n                <button\r\n                  mat-button\r\n                  class=\"lf-list-item-button ml-2\"\r\n                  [class.disabled]=\"disabled\"\r\n                  [ngClass]=\"button.cssClass\"\r\n                  [disabled]=\"disabled\"\r\n                  [matTooltip]=\"button.tooltip\"\r\n                  (click)=\"clickButton({ buttonId: button.id, item }, $event)\">\r\n                  @if (button.matIcon || button.svgIcon) {\r\n                    <lf-icon\r\n                      [matIcon]=\"button.matIcon\"\r\n                      [svgIcon]=\"button.svgIcon\"\r\n                      verticalAlign=\"bottom\"></lf-icon>\r\n                  }\r\n                  {{ button.label }}\r\n                </button>\r\n              } @else {\r\n                <button\r\n                  mat-icon-button\r\n                  class=\"lf-list-item-icon ml-2\"\r\n                  [class.disabled]=\"disabled\"\r\n                  [ngClass]=\"button.cssClass\"\r\n                  [disabled]=\"disabled\"\r\n                  [matTooltip]=\"button.tooltip\"\r\n                  (click)=\"clickButton({ buttonId: button.id, item }, $event)\">\r\n                  <lf-icon [matIcon]=\"button.matIcon\" [svgIcon]=\"button.svgIcon\"></lf-icon>\r\n                </button>\r\n              }\r\n            }\r\n          }\r\n        }\r\n\r\n        <!-- drag -->\r\n        @if (config?.enableDragging) {\r\n          <button\r\n            mat-icon-button\r\n            class=\"lf-list-item-icon ml-2\"\r\n            [class.disabled]=\"item.disabled\"\r\n            [disabled]=\"item.disabled\"\r\n            (click)=\"stopPropagation($event)\"\r\n            cdkDragHandle>\r\n            <mat-icon>drag_indicator</mat-icon>\r\n          </button>\r\n        }\r\n      </div>\r\n\r\n      <!-- checkbox -->\r\n      @if (config?.enableSelection) {\r\n        <div class=\"lf-list-item-checkbox ml-3\">\r\n          <mat-checkbox\r\n            [(ngModel)]=\"item.checked\"\r\n            [disabled]=\"item.disabled!\"\r\n            (change)=\"selectItem(item, $event)\"\r\n            (click)=\"stopPropagation($event)\"></mat-checkbox>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    @if (config?.showDividers && !last) {\r\n      <mat-divider></mat-divider>\r\n    }\r\n  </ng-template>\r\n</div>\r\n", styles: [".lf-list,.lf-list .lf-list-group{width:100%}.lf-list .lf-list-group .lf-list-group-header{font-weight:500;height:56px}.lf-list-item{width:100%;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;height:72px;border-radius:4px;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:16px;width:16px;height:16px;vertical-align:text-top}.lf-list-item .lf-list-item-checkbox{flex:0 0 40px}.lf-list-item .lf-list-item-avatar{flex:0 0 48px;display:flex;align-items:center;justify-content:center}.lf-list-item .lf-list-item-avatar img{width:48px;height:48px;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 200px;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:80px}.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:72px;border:2px dashed rgba(128,128,128,.8);border-radius:4px;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:4px;opacity:.8;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.4}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}\n"] }]
+            args: [{ selector: 'lf-list', standalone: true, imports: [SharedModule, IconComponent], template: "<div class=\"lf-list\" cdkDropListGroup>\r\n  <!-- Header -->\r\n  @if (header) {\r\n    <div class=\"lf-list-item lf-list-item-header\">\r\n      <!-- avatar -->\r\n      @if (header.avatar) {\r\n        <div class=\"lf-list-item-avatar px-2\">\r\n          <img [src]=\"header.avatar\" alt=\"Avatar of header\" (error)=\"onImageError($event)\" />\r\n        </div>\r\n      } @else if (header.matIcon || header.svgIcon) {\r\n        <div class=\"lf-list-item-avatar px-2\">\r\n          <lf-icon [matIcon]=\"header.matIcon\" [svgIcon]=\"header.svgIcon\"></lf-icon>\r\n        </div>\r\n      } @else if (hasAvatars) {\r\n        <div class=\"lf-list-item-avatar px-2\"></div>\r\n      }\r\n\r\n      <!-- title -->\r\n      <div class=\"lf-list-item-title-wrapper flex-row px-2\">\r\n        @for (item of header.items; track $index) {\r\n          <span [class.clickable]=\"item.sortToken\" (click)=\"updateSortToken(item.sortToken)\">\r\n            {{ item.title }}\r\n            @if (sortToken === item.sortToken) {\r\n              <mat-icon class=\"lf-list-item-sort-icon\">\r\n                {{ sortAsc ? \"arrow_downward\" : \"arrow_upward\" }}\r\n              </mat-icon>\r\n            }\r\n          </span>\r\n        }\r\n      </div>\r\n\r\n      <!-- buttons -->\r\n      <div class=\"lf-list-item-buttons\">\r\n        @for (button of header.buttons; track button.id) {\r\n          @if (button.label) {\r\n            <button\r\n              mat-button\r\n              class=\"lf-list-item-button ml-2\"\r\n              [class.disabled]=\"button.disabled\"\r\n              [ngClass]=\"button.cssClass\"\r\n              [disabled]=\"button.disabled\"\r\n              [matTooltip]=\"button.tooltip\"\r\n              (click)=\"clickButton({ buttonId: button.id, item: null! }, $event)\">\r\n              @if (button.matIcon || button.svgIcon) {\r\n                <lf-icon\r\n                  [matIcon]=\"button.matIcon\"\r\n                  [svgIcon]=\"button.svgIcon\"\r\n                  verticalAlign=\"bottom\"></lf-icon>\r\n              }\r\n              {{ button.label }}\r\n            </button>\r\n          } @else {\r\n            <button\r\n              mat-icon-button\r\n              class=\"lf-list-item-icon ml-2\"\r\n              [class.disabled]=\"button.disabled\"\r\n              [ngClass]=\"button.cssClass\"\r\n              [disabled]=\"button.disabled\"\r\n              [matTooltip]=\"button.tooltip\"\r\n              (click)=\"clickButton({ buttonId: button.id, item: null! }, $event)\">\r\n              <lf-icon [matIcon]=\"button.matIcon\" [svgIcon]=\"button.svgIcon\"></lf-icon>\r\n            </button>\r\n          }\r\n        }\r\n      </div>\r\n\r\n      <!-- checkbox -->\r\n      @if (config?.enableSelection) {\r\n        <div class=\"lf-list-item-checkbox ml-3\">\r\n          <mat-checkbox\r\n            [(ngModel)]=\"allSelected\"\r\n            [indeterminate]=\"someSelected\"\r\n            (change)=\"selectAll($event)\"></mat-checkbox>\r\n        </div>\r\n      }\r\n    </div>\r\n    <mat-divider></mat-divider>\r\n  }\r\n\r\n  <!-- Grouped Items -->\r\n  @if (config?.mode === \"group\" && groupedItems) {\r\n    @for (group of groupedItems | keyvalue; track group.key; let first = $first) {\r\n      <div class=\"lf-list-group\" [class.mt-4]=\"!first\">\r\n        @if (group.key) {\r\n          <div class=\"lf-list-item lf-list-group-header\">\r\n            <div class=\"lf-list-item-avatar px-2\"></div>\r\n            <div class=\"lf-list-item-title-wrapper flex-row px-2\">\r\n              <span>{{ group.key }}</span>\r\n            </div>\r\n          </div>\r\n        }\r\n        <div\r\n          [id]=\"group.key\"\r\n          cdkDropList\r\n          [cdkDropListData]=\"group.value\"\r\n          [cdkDropListDisabled]=\"!config?.enableDragging\"\r\n          [cdkDropListConnectedTo]=\"connectedDropListIds\"\r\n          (cdkDropListDropped)=\"dropItem($event, group.key)\"\r\n          [class.drop-zone]=\"config?.enableDragging && group.value.length <= 0\">\r\n          @for (item of group.value; track item.id; let last = $last) {\r\n            <div\r\n              cdkDrag\r\n              [cdkDragData]=\"item\"\r\n              [cdkDragDisabled]=\"item.disabled || !config?.enableDragging\">\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"listItemTemplate\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: item, last: last }\"></ng-container>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n    <!-- Flat Items -->\r\n  } @else {\r\n    <div\r\n      [id]=\"dropListId\"\r\n      cdkDropList\r\n      [cdkDropListData]=\"items\"\r\n      [cdkDropListDisabled]=\"!config?.enableDragging\"\r\n      [cdkDropListConnectedTo]=\"connectedDropListIds\"\r\n      (cdkDropListDropped)=\"dropItem($event, dropListId)\"\r\n      [class.drop-zone]=\"config?.enableDragging && items.length <= 0\">\r\n      @for (item of items; track item.id; let last = $last) {\r\n        <div\r\n          cdkDrag\r\n          [cdkDragData]=\"item\"\r\n          [cdkDragDisabled]=\"item.disabled || !config?.enableDragging\">\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"listItemTemplate\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: item, last: last }\"></ng-container>\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <!-- Item (template) -->\r\n  <ng-template #listItemTemplate let-item let-last=\"last\">\r\n    <div\r\n      class=\"lf-list-item lf-list-item-data\"\r\n      [class.active]=\"item.checked\"\r\n      [class.disabled]=\"item.disabled\"\r\n      [class.clickable]=\"item.clickable && !item.disabled\"\r\n      [ngClass]=\"item.cssClass\"\r\n      matRipple\r\n      [matRippleDisabled]=\"!item.clickable\"\r\n      (click)=\"item.clickable && !item.disabled ? clickItem(item, $event) : null\">\r\n      <!-- avatar -->\r\n      @if (avatarTemplate) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"avatarTemplate.templateRef\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n      } @else if (item.avatar) {\r\n        <div class=\"lf-list-item-avatar px-2\">\r\n          <img\r\n            [src]=\"item.avatar\"\r\n            [alt]=\"'Avatar of ' + item.title\"\r\n            (error)=\"onImageError($event)\" />\r\n        </div>\r\n      } @else if (item.matIcon || item.svgIcon) {\r\n        <div class=\"lf-list-item-avatar px-2\">\r\n          <lf-icon [matIcon]=\"item.matIcon\" [svgIcon]=\"item.svgIcon\"></lf-icon>\r\n        </div>\r\n      }\r\n\r\n      <!-- title -->\r\n      <div class=\"lf-list-item-title-wrapper px-2\">\r\n        <span class=\"lf-list-item-title\">\r\n          @if (titleTemplate) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"titleTemplate.templateRef\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n          } @else {\r\n            {{ item.title }}\r\n          }\r\n        </span>\r\n        @if (item.subtitle || subtitleTemplate) {\r\n          <span class=\"lf-list-item-subtitle\">\r\n            @if (subtitleTemplate) {\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"subtitleTemplate.templateRef\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n            } @else {\r\n              {{ item.subtitle }}\r\n            }\r\n          </span>\r\n        }\r\n      </div>\r\n\r\n      <!-- buttons -->\r\n      <div class=\"lf-list-item-buttons\">\r\n        @if (buttonsTemplate) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"buttonsTemplate.templateRef\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n        } @else {\r\n          @let combinedButtons = getCombinedButtons(item);\r\n          @for (button of combinedButtons; track button.id) {\r\n            @if (!item.hiddenButtonIds?.includes(button.id)) {\r\n              @let disabled =\r\n                button.disabled || item.disabled || item.disabledButtonIds?.includes(button.id);\r\n              @if (button.label) {\r\n                <button\r\n                  mat-button\r\n                  class=\"lf-list-item-button ml-2\"\r\n                  [class.disabled]=\"disabled\"\r\n                  [ngClass]=\"button.cssClass\"\r\n                  [disabled]=\"disabled\"\r\n                  [matTooltip]=\"button.tooltip\"\r\n                  (click)=\"clickButton({ buttonId: button.id, item }, $event)\">\r\n                  @if (button.matIcon || button.svgIcon) {\r\n                    <lf-icon\r\n                      [matIcon]=\"button.matIcon\"\r\n                      [svgIcon]=\"button.svgIcon\"\r\n                      verticalAlign=\"bottom\"></lf-icon>\r\n                  }\r\n                  {{ button.label }}\r\n                </button>\r\n              } @else {\r\n                <button\r\n                  mat-icon-button\r\n                  class=\"lf-list-item-icon ml-2\"\r\n                  [class.disabled]=\"disabled\"\r\n                  [ngClass]=\"button.cssClass\"\r\n                  [disabled]=\"disabled\"\r\n                  [matTooltip]=\"button.tooltip\"\r\n                  (click)=\"clickButton({ buttonId: button.id, item }, $event)\">\r\n                  <lf-icon [matIcon]=\"button.matIcon\" [svgIcon]=\"button.svgIcon\"></lf-icon>\r\n                </button>\r\n              }\r\n            }\r\n          }\r\n        }\r\n\r\n        <!-- drag -->\r\n        @if (config?.enableDragging) {\r\n          <button\r\n            mat-icon-button\r\n            class=\"lf-list-item-icon ml-2\"\r\n            [class.disabled]=\"item.disabled\"\r\n            [disabled]=\"item.disabled\"\r\n            (click)=\"stopPropagation($event)\"\r\n            cdkDragHandle>\r\n            <mat-icon>drag_indicator</mat-icon>\r\n          </button>\r\n        }\r\n      </div>\r\n\r\n      <!-- checkbox -->\r\n      @if (config?.enableSelection) {\r\n        <div class=\"lf-list-item-checkbox ml-3\">\r\n          <mat-checkbox\r\n            [(ngModel)]=\"item.checked\"\r\n            [disabled]=\"item.disabled!\"\r\n            (change)=\"selectItem(item, $event)\"\r\n            (click)=\"stopPropagation($event)\"></mat-checkbox>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    @if (config?.showDividers && !last) {\r\n      <mat-divider></mat-divider>\r\n    }\r\n  </ng-template>\r\n</div>\r\n", styles: [".lf-list,.lf-list .lf-list-group{width:100%}.lf-list .lf-list-group .lf-list-group-header{font-weight:500;height:calc(var(--list-item-height) - 16px)}.lf-list-item{width:100%;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;height:var(--list-item-height);border-radius:var(--list-item-border-radius);box-sizing:border-box;overflow:hidden}.lf-list-item.disabled .lf-list-item-title-wrapper{opacity:.64}.lf-list-item .lf-list-item-sort-icon{font-size:var(--list-item-sort-icon-size);width:var(--list-item-sort-icon-size);height:var(--list-item-sort-icon-size);vertical-align:text-top}.lf-list-item .lf-list-item-checkbox{flex:0 0 var(--list-item-checkbox-width)}.lf-list-item .lf-list-item-avatar{flex:0 0 var(--list-item-avatar-size);display:flex;align-items:center;justify-content:center}.lf-list-item .lf-list-item-avatar img{width:var(--list-item-avatar-size);height:var(--list-item-avatar-size);border-radius:50%;object-fit:cover}.lf-list-item .lf-list-item-title-wrapper{display:flex;flex-flow:column;align-items:flex-start;flex:1 1 var(--list-item-title-width);overflow:hidden}.lf-list-item .lf-list-item-title-wrapper .lf-list-item-title{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.lf-list-item .lf-list-item-title-wrapper .lf-list-item-subtitle{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.8rem}.lf-list-item .lf-list-item-buttons{flex:0 0 auto;display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between}.lf-list-item.lf-list-item-header{font-weight:500}.lf-list-item.lf-list-item-header .lf-list-item-title-wrapper span{width:var(--list-item-title-wrapper-width)}.lf-list-item.lf-list-item-data:hover{background-color:#00000014}.lf-list-item .flex-row{display:flex!important;flex-flow:row nowrap;align-items:center}.drop-zone{width:100%;height:var(--list-item-height);border:2px dashed var(--color-gray);border-radius:var(--list-item-border-radius);box-sizing:border-box}.clickable{cursor:pointer!important}.cdk-drag-preview{color:var(--mat-app-text-color, inherit)!important;background:var(--mat-app-background-color, inherit)!important;box-sizing:border-box;border-radius:var(--list-item-border-radius);opacity:.8;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.4}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}\n"] }]
         }], propDecorators: { avatarTemplate: [{
                 type: ContentChild,
                 args: [ListItemAvatarDirective]