@lukfel/ng-scaffold 20.0.58 → 20.1.1

package/README.md

@@ -59,6 +59,7 @@ export class AppComponent {
 
   public scaffoldConfig: ScaffoldConfig = {
     // Create your own config or generate it at https://lukfel.github.io/ng-scaffold
+    headerConfig: { enable: true, title: 'Scaffold works!', gradient: true }
   };
 
   constructor(private scaffoldService: ScaffoldService) {
@@ -119,13 +120,13 @@ Wrap your application’s content inside the `lf-scaffold` component in `app.com
 
 
 ## Styling
-Import the styles in your `styles.scss` and apply a default theme.
+Import the styles in your `styles.scss` and apply the default theme.
 
 * **Note:** The library’s styles include Material icons and Roboto font styles.
 
 ```scss
 @use "@lukfel/ng-scaffold/styles" as lf;
-@include lf.scaffold-theme();           // include a default theme
+@include lf.scaffold-theme();           // Include default theme
 ```
 
 ### (Optional) Custom Themes
@@ -135,14 +136,15 @@ To customize the default theme, define a new theme map specifying `primary`, `ac
 @use "@lukfel/ng-scaffold/styles" as lf;
 @use '@angular/material' as mat;
 
-$my-theme: (
-  primary: mat.define-palette(mat.$pink-palette),
-  accent: mat.define-palette(mat.$blue-palette),
-  warn: mat.define-palette(mat.$red-palette),
+// Define theme (use Material palettes or create your own)
+$base-theme: (
+  primary: mat.m2-define-palette(mat.$m2-pink-palette),
+  accent: mat.m2-define-palette(mat.$m2-blue-palette),
+  warn: mat.m2-define-palette(mat.$m2-red-palette),
   dark: false
 );
 
-@include lf.scaffold-theme($my-theme);
+@include lf.scaffold-theme($base-theme);
 ```
 
 ### (Optional) Multiple Themes
@@ -154,21 +156,23 @@ To switch between multiple themes dynamically, define additional themes using `l
 @use "@lukfel/ng-scaffold/styles" as lf;
 @use '@angular/material' as mat;
 
-$my-theme: (
-  primary: mat.define-palette(mat.$pink-palette),
-  accent: mat.define-palette(mat.$blue-palette),
-  warn: mat.define-palette(mat.$red-palette),
+// Define themes (use Material palettes or create your own)
+$base-theme: (
+  primary: mat.m2-define-palette(mat.$m2-pink-palette),
+  accent: mat.m2-define-palette(mat.$m2-blue-palette),
+  warn: mat.m2-define-palette(mat.$m2-red-palette),
   dark: false
 );
 
-$my-theme2: (
-  primary: mat.define-palette(mat.$purple-palette),
-  accent: mat.define-palette(mat.$amber-palette),
-  dark: false
+$theme2: (
+  primary: mat.m2-define-palette(mat.$m2-pink-palette),
+  accent: mat.m2-define-palette(mat.$m2-blue-palette),
+  dark: true
 );
 
-@include lf.scaffold-theme($my-theme);                      // Set the primary theme with lf.scaffold-theme(...)
-@include lf.scaffold-colors($my-theme2, 'my-theme2');       // Set additional themes with lf.scaffold-colors(...)
+// Include themes (use ThemeService to switch between themes)
+@include lf.scaffold-theme($base-theme);
+@include lf.scaffold-colors($theme2, 'theme2');
 ```
 
 ### (Optional) Custom Typography
@@ -180,15 +184,15 @@ To change the default typography from Roboto, pass an additional parameter ``fon
 @use "@lukfel/ng-scaffold/styles" as lf;
 @use '@angular/material' as mat;
 
-$my-theme: (
-  primary: mat.define-palette(mat.$pink-palette),
-  accent: mat.define-palette(mat.$blue-palette),
-  warn: mat.define-palette(mat.$red-palette),
+$base-theme: (
+  primary: mat.m2-define-palette(mat.$m2-pink-palette),
+  accent: mat.m2-define-palette(mat.$m2-blue-palette),
+  warn: mat.m2-define-palette(mat.$m2-red-palette),
   dark: false,
   font-family: 'Comic Sans'
 );
 
-@include lf.scaffold-theme($my-theme); 
+@include lf.scaffold-theme($base-theme);
 
 body {
     font-family: "Comic Sans MS" !important;
@@ -379,7 +383,7 @@ export class AppComponent {
 
 
 
-## Standalone Components
+## (Optional) Standalone Components
 In addition to the components provided by default by the the `ScaffoldModule` there are several standalone components that can be utilized.
 
 * **Note:** Standalone components must be imported manually and are not part of the `ScaffoldModule` import
@@ -394,7 +398,7 @@ import { ListComponent } from '@lukfel/ng-scaffold';
 ```ts
 import { Button, ListConfig, ListHeader, ListItem } from '@lukfel/ng-scaffold';
 
-public listConfig: ListConfig = {
+public listConfig: ListConfig = {   // (Optional) list config
   enableSelection: true,
   enableDragging: true,
   initialSortToken: 'title',
@@ -402,7 +406,7 @@ public listConfig: ListConfig = {
   showDividers: true
 }
 
-public listHeader: ListHeader = {
+public listHeader: ListHeader = {   // (Optional) list header
   matIcon: 'sort',
   items: [
     { title: 'Items', sortToken: 'title' }
@@ -415,12 +419,12 @@ public listItems: ListItem[] = [
   { id: 2, matIcon: 'person', title: 'Item 3', subtitle: 'I have no edit buton', hiddenButtonIds: ['edit'] },
 ];
 
-public buttons: Button[] = [
+public buttons: Button[] = [        // (Optional) list buttons
   { id: 'edit', matIcon: 'edit' },
   { id: 'delete', matIcon: 'delete', cssClass: 'warn' }
 ];
 
-// Handle sort events (optional)
+// (Optional) Handle sort events
 public onListSortChange(event: { sortToken: string, sortAsc: boolean }): void {
   if (event?.sortToken === 'title') {
     this.listItems.sort((a, b) => {

package/fesm2022/lukfel-ng-scaffold.mjs

@@ -480,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: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: [
+    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    [class.lf-gradient]=\"headerConfig.gradient\"\r\n    color=\"primary\">\r\n    <!-- left menu button -->\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n      [ngTemplateOutletContext]=\"{\r\n        menuButton: headerConfig.leftMenuButton!,\r\n        hideLabel: true,\r\n      }\"></ng-container>\r\n    <!-- logo & title -->\r\n    <div\r\n      class=\"lf-header-logo-title-wrapper ml-1 mr-2\"\r\n      [class.ml-10]=\"headerConfig.leftMenuButton && !isMobile\">\r\n      <!-- link wrapper -->\r\n      <div\r\n        class=\"lf-header-logo-title-wrapper-link\"\r\n        [class.lf-clickable]=\"headerConfig.titleRouterLink\"\r\n        [routerLink]=\"headerConfig.titleRouterLink ? [headerConfig.titleRouterLink] : null\">\r\n        <!-- svg logo -->\r\n        @if (headerConfig.svgLogo) {\r\n          <mat-icon\r\n            class=\"lf-header-logo\"\r\n            [class.mr-3]=\"headerConfig.title\"\r\n            [svgIcon]=\"headerConfig.svgLogo!\"></mat-icon>\r\n        } @else {\r\n          @if (headerConfig.imgLogo) {\r\n            <img\r\n              class=\"lf-header-logo\"\r\n              [class.mr-3]=\"headerConfig.title\"\r\n              [src]=\"headerConfig.imgLogo\"\r\n              alt=\"Logo\" />\r\n          }\r\n        }\r\n        <!-- img logo -->\r\n        <!-- title -->\r\n        @if (headerConfig.title) {\r\n          <div class=\"lf-header-title-wrapper\">\r\n            @if (headerConfig.title) {\r\n              <span class=\"lf-header-title\">\r\n                {{ headerConfig.title }}\r\n              </span>\r\n            }\r\n            @if (headerConfig.subtitle) {\r\n              <span class=\"lf-header-subtitle\">\r\n                {{ headerConfig.subtitle }}\r\n              </span>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n    <!-- input -->\r\n    @if (headerConfig.inputConfig?.enable) {\r\n      <div class=\"spacer\"></div>\r\n      <lf-input\r\n        [class.lf-header-input-mobile]=\"isMobile\"\r\n        [class.mx-3]=\"!isMobile\"\r\n        [inputConfig]=\"headerConfig.inputConfig!\"\r\n        [isMobile]=\"isMobile\"\r\n        (inputSubmitEvent)=\"inputSubmitted($event)\"\r\n        (inputChangeEvent)=\"inputChanged($event)\"\r\n        (inputPrefixActionEvent)=\"inputClosed()\"></lf-input>\r\n    }\r\n    <!-- spacer -->\r\n    <div class=\"spacer\"></div>\r\n    <!-- right menu buttons -->\r\n    @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)' })),
@@ -498,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: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"] }]
+                    ], standalone: false, template: "@if (headerConfig && headerConfig.enable) {\r\n  <mat-toolbar\r\n    class=\"lf-header lf-transitions mat-elevation-z3\"\r\n    [class.px-4]=\"!isMobile\"\r\n    [class.px-1]=\"isMobile\"\r\n    [ngClass]=\"headerConfig.cssClass\"\r\n    [class.lf-gradient]=\"headerConfig.gradient\"\r\n    color=\"primary\">\r\n    <!-- left menu button -->\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n      [ngTemplateOutletContext]=\"{\r\n        menuButton: headerConfig.leftMenuButton!,\r\n        hideLabel: true,\r\n      }\"></ng-container>\r\n    <!-- logo & title -->\r\n    <div\r\n      class=\"lf-header-logo-title-wrapper ml-1 mr-2\"\r\n      [class.ml-10]=\"headerConfig.leftMenuButton && !isMobile\">\r\n      <!-- link wrapper -->\r\n      <div\r\n        class=\"lf-header-logo-title-wrapper-link\"\r\n        [class.lf-clickable]=\"headerConfig.titleRouterLink\"\r\n        [routerLink]=\"headerConfig.titleRouterLink ? [headerConfig.titleRouterLink] : null\">\r\n        <!-- svg logo -->\r\n        @if (headerConfig.svgLogo) {\r\n          <mat-icon\r\n            class=\"lf-header-logo\"\r\n            [class.mr-3]=\"headerConfig.title\"\r\n            [svgIcon]=\"headerConfig.svgLogo!\"></mat-icon>\r\n        } @else {\r\n          @if (headerConfig.imgLogo) {\r\n            <img\r\n              class=\"lf-header-logo\"\r\n              [class.mr-3]=\"headerConfig.title\"\r\n              [src]=\"headerConfig.imgLogo\"\r\n              alt=\"Logo\" />\r\n          }\r\n        }\r\n        <!-- img logo -->\r\n        <!-- title -->\r\n        @if (headerConfig.title) {\r\n          <div class=\"lf-header-title-wrapper\">\r\n            @if (headerConfig.title) {\r\n              <span class=\"lf-header-title\">\r\n                {{ headerConfig.title }}\r\n              </span>\r\n            }\r\n            @if (headerConfig.subtitle) {\r\n              <span class=\"lf-header-subtitle\">\r\n                {{ headerConfig.subtitle }}\r\n              </span>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n    <!-- input -->\r\n    @if (headerConfig.inputConfig?.enable) {\r\n      <div class=\"spacer\"></div>\r\n      <lf-input\r\n        [class.lf-header-input-mobile]=\"isMobile\"\r\n        [class.mx-3]=\"!isMobile\"\r\n        [inputConfig]=\"headerConfig.inputConfig!\"\r\n        [isMobile]=\"isMobile\"\r\n        (inputSubmitEvent)=\"inputSubmitted($event)\"\r\n        (inputChangeEvent)=\"inputChanged($event)\"\r\n        (inputPrefixActionEvent)=\"inputClosed()\"></lf-input>\r\n    }\r\n    <!-- spacer -->\r\n    <div class=\"spacer\"></div>\r\n    <!-- right menu buttons -->\r\n    @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: [{