@lukfel/ng-scaffold 20.0.10 → 20.0.11

package/fesm2022/lukfel-ng-scaffold.mjs

@@ -0,0 +1,1453 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Output, Input, Component, NgModule, inject, ChangeDetectorRef, ViewChild, Injectable, DOCUMENT, InjectionToken } from '@angular/core';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import * as i2$2 from '@angular/router';
+import { Router, RouteConfigLoadStart, RouteConfigLoadEnd, NavigationEnd, ActivatedRoute, RouterModule } from '@angular/router';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i4 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i4$1 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i3 from '@angular/material/card';
+import { MatCardModule } from '@angular/material/card';
+import * as i2$1 from '@angular/material/sidenav';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import * as i3$1 from '@angular/cdk/portal';
+import { PortalModule, ComponentPortal } from '@angular/cdk/portal';
+import * as i4$2 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i5 from '@angular/material/toolbar';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import * as i7 from '@angular/material/progress-bar';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import * as i2$3 from '@angular/material/dialog';
+import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatRippleModule } from '@angular/material/core';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatGridListModule } from '@angular/material/grid-list';
+import * as i3$2 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import { MatListModule } from '@angular/material/list';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import * as i1$2 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatSliderModule } from '@angular/material/slider';
+import { MatSnackBarModule, MatSnackBar } from '@angular/material/snack-bar';
+import { MatSortModule } from '@angular/material/sort';
+import { MatStepperModule } from '@angular/material/stepper';
+import { MatTableModule } from '@angular/material/table';
+import { MatTabsModule } from '@angular/material/tabs';
+import * as i1$1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
+import { distinctUntilChanged, firstValueFrom, BehaviorSubject, take, Subscription, fromEvent, debounceTime, finalize } from 'rxjs';
+import { Title, Meta } from '@angular/platform-browser';
+import * as i2$4 from '@angular/cdk/scrolling';
+
+class BottomBarComponent {
+    constructor() {
+        this.bottomBarConfig = null;
+        this.isMobile = false;
+        this.navbarEnabled = false;
+        this.bottomBarCloseClickEvent = new EventEmitter();
+        this.bottomBarButtonClickEvent = new EventEmitter();
+    }
+    actionClicked(id) {
+        if (!id) {
+            return;
+        }
+        this.bottomBarButtonClickEvent.emit(id);
+    }
+    closeClicked() {
+        this.bottomBarCloseClickEvent.emit('bottom-bar_close');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BottomBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: BottomBarComponent, isStandalone: false, selector: "lf-bottom-bar", inputs: { bottomBarConfig: "bottomBarConfig", isMobile: "isMobile", navbarEnabled: "navbarEnabled" }, outputs: { bottomBarCloseClickEvent: "bottomBarCloseClickEvent", bottomBarButtonClickEvent: "bottomBarButtonClickEvent" }, ngImport: i0, template: "@if (bottomBarConfig && bottomBarConfig.enable) {\r\n  <div\r\n    class=\"lf-bottom-bar px-4\"\r\n    [ngClass]=\"bottomBarConfig.class\"\r\n    [class.lf-bottom-bar-show-navbar]=\"!isMobile && navbarEnabled\"\r\n    [class.lf-bottom-bar-show-navbar-mobile]=\"isMobile && navbarEnabled\">\r\n    <button mat-icon-button (click)=\"closeClicked()\">\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n    @if (bottomBarConfig.message) {\r\n      <span class=\"ml-2\">{{ bottomBarConfig.message }}</span>\r\n    }\r\n    @if (bottomBarConfig.actions) {\r\n      <div class=\"lf-bottom-bar-actions ml-4\">\r\n        @for (action of bottomBarConfig.actions; track action) {\r\n          <button\r\n            mat-button\r\n            color=\"accent\"\r\n            class=\"lf-bottom-bar-action ml-2\"\r\n            [ngClass]=\"action.class\"\r\n            (click)=\"actionClicked(action.id)\"\r\n            [matTooltip]=\"action.tooltip!\">\r\n            {{ action.label }}\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".lf-bottom-bar{transition:bottom .3s;transition:left .3s;z-index:101;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-actions .lf-bottom-bar-action{color:var(--color-accent)!important;background-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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BottomBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lf-bottom-bar', standalone: false, template: "@if (bottomBarConfig && bottomBarConfig.enable) {\r\n  <div\r\n    class=\"lf-bottom-bar px-4\"\r\n    [ngClass]=\"bottomBarConfig.class\"\r\n    [class.lf-bottom-bar-show-navbar]=\"!isMobile && navbarEnabled\"\r\n    [class.lf-bottom-bar-show-navbar-mobile]=\"isMobile && navbarEnabled\">\r\n    <button mat-icon-button (click)=\"closeClicked()\">\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n    @if (bottomBarConfig.message) {\r\n      <span class=\"ml-2\">{{ bottomBarConfig.message }}</span>\r\n    }\r\n    @if (bottomBarConfig.actions) {\r\n      <div class=\"lf-bottom-bar-actions ml-4\">\r\n        @for (action of bottomBarConfig.actions; track action) {\r\n          <button\r\n            mat-button\r\n            color=\"accent\"\r\n            class=\"lf-bottom-bar-action ml-2\"\r\n            [ngClass]=\"action.class\"\r\n            (click)=\"actionClicked(action.id)\"\r\n            [matTooltip]=\"action.tooltip!\">\r\n            {{ action.label }}\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".lf-bottom-bar{transition:bottom .3s;transition:left .3s;z-index:101;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-actions .lf-bottom-bar-action{color:var(--color-accent)!important;background-color:#fff!important}\n"] }]
+        }], propDecorators: { bottomBarConfig: [{
+                type: Input
+            }], isMobile: [{
+                type: Input
+            }], navbarEnabled: [{
+                type: Input
+            }], bottomBarCloseClickEvent: [{
+                type: Output
+            }], bottomBarButtonClickEvent: [{
+                type: Output
+            }] } });
+
+class ContentTitleCardComponent {
+    constructor() {
+        this.contentTitleCardConfig = null;
+        this.isMobile = false;
+        this.routeHistory = [];
+        this.backButtonClickEvent = new EventEmitter();
+        this.inputValue = '';
+    }
+    backButtonClicked() {
+        this.backButtonClickEvent.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ContentTitleCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: ContentTitleCardComponent, isStandalone: false, selector: "lf-content-title-card", inputs: { 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.class\">\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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", 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.class\">\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"] }]
+        }], propDecorators: { contentTitleCardConfig: [{
+                type: Input
+            }], isMobile: [{
+                type: Input
+            }], routeHistory: [{
+                type: Input
+            }], backButtonClickEvent: [{
+                type: Output
+            }] } });
+
+class DrawerComponent {
+    constructor() {
+        this.drawerConfig = null;
+        this.isMobile = false;
+        this.fixedOffset = 0;
+    }
+    ngOnInit() {
+        // Avoid initializing an open drawer on mobile
+        if (this.isMobile && this.drawerConfig?.enable && this.drawerConfig?.open) {
+            this.drawerConfig.open = false;
+        }
+    }
+    // Detect when the drawer is closed without clicking a button
+    onDrawerClosed() {
+        if (this.drawerConfig)
+            this.drawerConfig.open = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: DrawerComponent, isStandalone: false, selector: "lf-drawer", inputs: { drawerConfig: "drawerConfig", isMobile: "isMobile", fixedOffset: "fixedOffset", drawerPortal: "drawerPortal" }, ngImport: i0, template: "@if (drawerConfig && drawerConfig.enable) {\r\n  <mat-sidenav-container class=\"lf-drawer-container\" [ngClass]=\"drawerConfig.class\">\r\n    <!-- drawer -->\r\n    <mat-sidenav\r\n      class=\"lf-drawer mat-elevation-z2\"\r\n      [mode]=\"isMobile ? 'over' : 'side'\"\r\n      [opened]=\"drawerConfig.open\"\r\n      [autoFocus]=\"false\"\r\n      [fixedInViewport]=\"drawerConfig.fixed\"\r\n      [fixedTopGap]=\"fixedOffset\"\r\n      (closed)=\"onDrawerClosed()\"\r\n      #drawer>\r\n      <!-- drawer content -->\r\n      <!-- <ng-content select=\"[drawerContent]\"></ng-content> -->\r\n      @if (drawerPortal) {\r\n        <ng-template [cdkPortalOutlet]=\"drawerPortal\"></ng-template>\r\n      } @else {\r\n        <ng-content select=\"[drawerContent]\"></ng-content>\r\n      }\r\n    </mat-sidenav>\r\n    <mat-sidenav-content>\r\n      <!-- main content -->\r\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n    </mat-sidenav-content>\r\n  </mat-sidenav-container>\r\n} @else {\r\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n}\r\n\r\n<!-- render content without drawer -->\r\n\r\n<!-- this template is required to allow multiple <ng-content></ng-content> -->\r\n<ng-template #content><ng-content></ng-content></ng-template>\r\n", styles: [".lf-drawer-container{z-index:unset!important}.lf-drawer-container .lf-drawer{width:208px;z-index:98}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i2$1.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i2$1.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "directive", type: i3$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DrawerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lf-drawer', standalone: false, template: "@if (drawerConfig && drawerConfig.enable) {\r\n  <mat-sidenav-container class=\"lf-drawer-container\" [ngClass]=\"drawerConfig.class\">\r\n    <!-- drawer -->\r\n    <mat-sidenav\r\n      class=\"lf-drawer mat-elevation-z2\"\r\n      [mode]=\"isMobile ? 'over' : 'side'\"\r\n      [opened]=\"drawerConfig.open\"\r\n      [autoFocus]=\"false\"\r\n      [fixedInViewport]=\"drawerConfig.fixed\"\r\n      [fixedTopGap]=\"fixedOffset\"\r\n      (closed)=\"onDrawerClosed()\"\r\n      #drawer>\r\n      <!-- drawer content -->\r\n      <!-- <ng-content select=\"[drawerContent]\"></ng-content> -->\r\n      @if (drawerPortal) {\r\n        <ng-template [cdkPortalOutlet]=\"drawerPortal\"></ng-template>\r\n      } @else {\r\n        <ng-content select=\"[drawerContent]\"></ng-content>\r\n      }\r\n    </mat-sidenav>\r\n    <mat-sidenav-content>\r\n      <!-- main content -->\r\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n    </mat-sidenav-content>\r\n  </mat-sidenav-container>\r\n} @else {\r\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n}\r\n\r\n<!-- render content without drawer -->\r\n\r\n<!-- this template is required to allow multiple <ng-content></ng-content> -->\r\n<ng-template #content><ng-content></ng-content></ng-template>\r\n", styles: [".lf-drawer-container{z-index:unset!important}.lf-drawer-container .lf-drawer{width:208px;z-index:98}\n"] }]
+        }], propDecorators: { drawerConfig: [{
+                type: Input
+            }], isMobile: [{
+                type: Input
+            }], fixedOffset: [{
+                type: Input
+            }], drawerPortal: [{
+                type: Input
+            }] } });
+
+class FloatingButtonComponent {
+    constructor() {
+        this.floatingButtonConfig = null;
+        this.onTop = false;
+        this.isMobile = false;
+        this.bottomBarEnabled = false;
+        this.floatingButtonClickEvent = new EventEmitter();
+        this.DEFAULT_OFFSET = 24;
+        this.navbarOffset = 64;
+        this.bottomBarOffset = 56;
+    }
+    ngOnInit() {
+        if (this.floatingButtonConfig) {
+            if (!this.floatingButtonConfig.horizontalPosition) {
+                this.floatingButtonConfig.horizontalPosition = 'right';
+            }
+            if (!this.floatingButtonConfig.matIcon && !this.floatingButtonConfig?.svgIcon) {
+                this.floatingButtonConfig.matIcon = 'arrow_upward';
+            }
+            if (!this.floatingButtonConfig.bottomPositionPx) {
+                this.floatingButtonConfig.bottomPositionPx = this.DEFAULT_OFFSET;
+            }
+        }
+    }
+    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.0.5", ngImport: i0, type: FloatingButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: FloatingButtonComponent, isStandalone: false, selector: "lf-floating-button", inputs: { floatingButtonConfig: "floatingButtonConfig", onTop: "onTop", isMobile: "isMobile", bottomBarEnabled: "bottomBarEnabled" }, outputs: { floatingButtonClickEvent: "floatingButtonClickEvent" }, ngImport: i0, template: "@if (\r\n  floatingButtonConfig && floatingButtonConfig.enable && (!floatingButtonConfig.autoHide || !onTop)\r\n) {\r\n  <button\r\n    mat-fab\r\n    color=\"accent\"\r\n    class=\"lf-floating-button\"\r\n    [style.bottom]=\"getBottomPosition() + 'px'\"\r\n    [ngClass]=\"floatingButtonConfig.class\"\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]=\"floatingButtonConfig.outlineIcon\">\r\n        {{ floatingButtonConfig.matIcon }}\r\n      </mat-icon>\r\n    } @else {\r\n      @if (floatingButtonConfig.svgIcon) {\r\n        <mat-icon [svgIcon]=\"floatingButtonConfig.svgIcon!\"></mat-icon>\r\n      }\r\n    }\r\n    <!-- svg icon -->\r\n    <!-- label -->\r\n    @if (floatingButtonConfig.label) {\r\n      <span class=\"lf-floating-button-label\">\r\n        {{ floatingButtonConfig.label }}\r\n      </span>\r\n    }\r\n  </button>\r\n}\r\n", styles: [".lf-floating-button{position:fixed;transition:bottom .3s;z-index:100}.lf-floating-button.left{left:24px}.lf-floating-button.center{left:50%;transform:translate(-50%)}.lf-floating-button.right{right:24px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: FloatingButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lf-floating-button', standalone: false, template: "@if (\r\n  floatingButtonConfig && floatingButtonConfig.enable && (!floatingButtonConfig.autoHide || !onTop)\r\n) {\r\n  <button\r\n    mat-fab\r\n    color=\"accent\"\r\n    class=\"lf-floating-button\"\r\n    [style.bottom]=\"getBottomPosition() + 'px'\"\r\n    [ngClass]=\"floatingButtonConfig.class\"\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]=\"floatingButtonConfig.outlineIcon\">\r\n        {{ floatingButtonConfig.matIcon }}\r\n      </mat-icon>\r\n    } @else {\r\n      @if (floatingButtonConfig.svgIcon) {\r\n        <mat-icon [svgIcon]=\"floatingButtonConfig.svgIcon!\"></mat-icon>\r\n      }\r\n    }\r\n    <!-- svg icon -->\r\n    <!-- label -->\r\n    @if (floatingButtonConfig.label) {\r\n      <span class=\"lf-floating-button-label\">\r\n        {{ floatingButtonConfig.label }}\r\n      </span>\r\n    }\r\n  </button>\r\n}\r\n", styles: [".lf-floating-button{position:fixed;transition:bottom .3s;z-index:100}.lf-floating-button.left{left:24px}.lf-floating-button.center{left:50%;transform:translate(-50%)}.lf-floating-button.right{right:24px}\n"] }]
+        }], propDecorators: { floatingButtonConfig: [{
+                type: Input
+            }], onTop: [{
+                type: Input
+            }], isMobile: [{
+                type: Input
+            }], bottomBarEnabled: [{
+                type: Input
+            }], floatingButtonClickEvent: [{
+                type: Output
+            }] } });
+
+class FooterComponent {
+    constructor() {
+        this.footerConfig = null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: FooterComponent, isStandalone: false, selector: "lf-footer", inputs: { footerConfig: "footerConfig" }, ngImport: i0, template: "@if (footerConfig && footerConfig.enable) {\r\n  <mat-card class=\"lf-footer mat-elevation-z2 p-4\" [ngClass]=\"footerConfig.class\">\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 link; 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", 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 mat-elevation-z2 p-4\" [ngClass]=\"footerConfig.class\">\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 link; 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"] }]
+        }], propDecorators: { footerConfig: [{
+                type: Input
+            }] } });
+
+class MaterialModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: MaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.5", ngImport: i0, type: MaterialModule, exports: [MatCheckboxModule,
+            MatCheckboxModule,
+            MatButtonModule,
+            MatInputModule,
+            MatAutocompleteModule,
+            MatDatepickerModule,
+            MatFormFieldModule,
+            MatRadioModule,
+            MatSelectModule,
+            MatSliderModule,
+            MatSlideToggleModule,
+            MatMenuModule,
+            MatSidenavModule,
+            MatToolbarModule,
+            MatListModule,
+            MatGridListModule,
+            MatCardModule,
+            MatStepperModule,
+            MatTabsModule,
+            MatExpansionModule,
+            MatButtonToggleModule,
+            MatChipsModule,
+            MatIconModule,
+            MatProgressSpinnerModule,
+            MatProgressBarModule,
+            MatRippleModule,
+            MatDialogModule,
+            MatTooltipModule,
+            MatSnackBarModule,
+            MatTableModule,
+            MatSortModule,
+            MatPaginatorModule,
+            PortalModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: MaterialModule, imports: [MatCheckboxModule,
+            MatCheckboxModule,
+            MatButtonModule,
+            MatInputModule,
+            MatAutocompleteModule,
+            MatDatepickerModule,
+            MatFormFieldModule,
+            MatRadioModule,
+            MatSelectModule,
+            MatSliderModule,
+            MatSlideToggleModule,
+            MatMenuModule,
+            MatSidenavModule,
+            MatToolbarModule,
+            MatListModule,
+            MatGridListModule,
+            MatCardModule,
+            MatStepperModule,
+            MatTabsModule,
+            MatExpansionModule,
+            MatButtonToggleModule,
+            MatChipsModule,
+            MatIconModule,
+            MatProgressSpinnerModule,
+            MatProgressBarModule,
+            MatRippleModule,
+            MatDialogModule,
+            MatTooltipModule,
+            MatSnackBarModule,
+            MatTableModule,
+            MatSortModule,
+            MatPaginatorModule,
+            PortalModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: MaterialModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    exports: [
+                        MatCheckboxModule,
+                        MatCheckboxModule,
+                        MatButtonModule,
+                        MatInputModule,
+                        MatAutocompleteModule,
+                        MatDatepickerModule,
+                        MatFormFieldModule,
+                        MatRadioModule,
+                        MatSelectModule,
+                        MatSliderModule,
+                        MatSlideToggleModule,
+                        MatMenuModule,
+                        MatSidenavModule,
+                        MatToolbarModule,
+                        MatListModule,
+                        MatGridListModule,
+                        MatCardModule,
+                        MatStepperModule,
+                        MatTabsModule,
+                        MatExpansionModule,
+                        MatButtonToggleModule,
+                        MatChipsModule,
+                        MatIconModule,
+                        MatProgressSpinnerModule,
+                        MatProgressBarModule,
+                        MatRippleModule,
+                        MatDialogModule,
+                        MatTooltipModule,
+                        MatSnackBarModule,
+                        MatTableModule,
+                        MatSortModule,
+                        MatPaginatorModule,
+                        PortalModule
+                    ],
+                    providers: [],
+                    bootstrap: []
+                }]
+        }] });
+
+class SharedModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.5", ngImport: i0, type: SharedModule, imports: [CommonModule,
+            FormsModule,
+            MaterialModule], exports: [CommonModule,
+            FormsModule,
+            MaterialModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SharedModule, imports: [CommonModule,
+            FormsModule,
+            MaterialModule, CommonModule,
+            FormsModule,
+            MaterialModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SharedModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        MaterialModule
+                    ],
+                    exports: [
+                        CommonModule,
+                        FormsModule,
+                        MaterialModule
+                    ]
+                }]
+        }] });
+
+class InputComponent {
+    constructor() {
+        this.dialogRef = inject(MatDialogRef, { optional: true });
+        this.config = inject(MAT_DIALOG_DATA, { optional: true });
+        this.cd = inject(ChangeDetectorRef);
+        this.inputConfig = {};
+        this.isMobile = false;
+        this.inputSubmitEvent = new EventEmitter();
+        this.inputChangeEvent = new EventEmitter();
+        this.inputPrefixActionEvent = new EventEmitter();
+        this.input = null;
+        this.inputValue = '';
+    }
+    ngOnInit() {
+        if (this.config) {
+            this.inputConfig = this.config;
+        }
+    }
+    ngAfterViewInit() {
+        if (this.input && this.inputConfig.autoFocus) {
+            this.input.nativeElement.focus();
+            this.cd.detectChanges();
+        }
+    }
+    ngOnDestroy() {
+        this.inputValue = '';
+        this.inputChangeEvent.emit(this.inputValue);
+    }
+    inputSubmitted(value) {
+        this.inputSubmitEvent.emit(value);
+        if (this.dialogRef) {
+            this.dialogRef.close(value);
+        }
+    }
+    inputChanged(value) {
+        this.inputChangeEvent.emit(value);
+    }
+    inputPrefixAction() {
+        this.inputPrefixActionEvent.emit();
+        if (this.dialogRef) {
+            this.dialogRef.close();
+        }
+    }
+    clearInput() {
+        this.inputValue = '';
+        this.inputChangeEvent.emit(this.inputValue);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", 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"] }]
+        }], propDecorators: { inputConfig: [{
+                type: Input
+            }], isMobile: [{
+                type: Input
+            }], inputSubmitEvent: [{
+                type: Output
+            }], inputChangeEvent: [{
+                type: Output
+            }], inputPrefixActionEvent: [{
+                type: Output
+            }], input: [{
+                type: ViewChild,
+                args: ['input']
+            }] } });
+
+class IconComponent {
+    constructor() {
+        this.outlineIcon = false;
+        this.alignMiddle = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: IconComponent, isStandalone: true, selector: "lf-icon", inputs: { matIcon: "matIcon", svgIcon: "svgIcon", outlineIcon: "outlineIcon", alignMiddle: "alignMiddle" }, ngImport: i0, template: "<!-- mat icon -->\r\n@if (matIcon) {\r\n  <mat-icon\r\n    class=\"lf-icon\"\r\n    [class.material-icons-outlined]=\"outlineIcon\"\r\n    [class.lf-icon-align-middle]=\"alignMiddle\">\r\n    {{ matIcon }}\r\n  </mat-icon>\r\n} @else {\r\n  @if (svgIcon) {\r\n    <mat-icon\r\n      class=\"lf-icon\"\r\n      [svgIcon]=\"svgIcon\"\r\n      [class.lf-icon-align-middle]=\"alignMiddle\"></mat-icon>\r\n  }\r\n}\r\n<!-- svg icon -->\r\n", styles: [":host{display:contents}.lf-icon-align-middle{vertical-align:bottom}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: IconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lf-icon', standalone: true, imports: [SharedModule], template: "<!-- mat icon -->\r\n@if (matIcon) {\r\n  <mat-icon\r\n    class=\"lf-icon\"\r\n    [class.material-icons-outlined]=\"outlineIcon\"\r\n    [class.lf-icon-align-middle]=\"alignMiddle\">\r\n    {{ matIcon }}\r\n  </mat-icon>\r\n} @else {\r\n  @if (svgIcon) {\r\n    <mat-icon\r\n      class=\"lf-icon\"\r\n      [svgIcon]=\"svgIcon\"\r\n      [class.lf-icon-align-middle]=\"alignMiddle\"></mat-icon>\r\n  }\r\n}\r\n<!-- svg icon -->\r\n", styles: [":host{display:contents}.lf-icon-align-middle{vertical-align:bottom}\n"] }]
+        }], propDecorators: { matIcon: [{
+                type: Input
+            }], svgIcon: [{
+                type: Input
+            }], outlineIcon: [{
+                type: Input
+            }], alignMiddle: [{
+                type: Input
+            }] } });
+
+class HeaderComponent {
+    constructor() {
+        this.headerConfig = null;
+        this.isMobile = false;
+        this.routeLoading = false;
+        this.headerButtonClickEvent = new EventEmitter();
+        this.headerInputSubmitEvent = new EventEmitter();
+        this.headerInputChangeEvent = new EventEmitter();
+    }
+    ngOnInit() {
+        // Avoid initializing the header with an open input field on mobile
+        if (this.isMobile && this.headerConfig?.inputConfig?.enable) {
+            this.headerConfig.inputConfig.enable = false;
+        }
+    }
+    buttonClicked(id) {
+        if (!id) {
+            return;
+        }
+        this.headerButtonClickEvent.emit(id);
+    }
+    inputSubmitted(value) {
+        this.headerInputSubmitEvent.emit(value);
+    }
+    inputChanged(value) {
+        this.headerInputChangeEvent.emit(value);
+    }
+    isActive(id) {
+        if (!id || !this.currentRoute) {
+            return false;
+        }
+        const route = this.currentRoute.substring(this.currentRoute.indexOf('/') + 1);
+        return route === id;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: HeaderComponent, isStandalone: false, selector: "lf-header", inputs: { headerConfig: "headerConfig", isMobile: "isMobile", routeLoading: "routeLoading", currentRoute: "currentRoute" }, outputs: { headerButtonClickEvent: "headerButtonClickEvent", headerInputSubmitEvent: "headerInputSubmitEvent", headerInputChangeEvent: "headerInputChangeEvent" }, ngImport: i0, template: "@if (headerConfig && headerConfig.enable) {\r\n  <mat-toolbar\r\n    class=\"lf-header mat-elevation-z3\"\r\n    [class.px-4]=\"!isMobile\"\r\n    [class.px-1]=\"isMobile\"\r\n    [ngClass]=\"headerConfig.class\"\r\n    color=\"primary\">\r\n    <!-- left menu button -->\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n      [ngTemplateOutletContext]=\"{\r\n        menuButton: headerConfig.leftMenuButton!,\r\n        hideLabel: true,\r\n      }\"></ng-container>\r\n    <!-- logo & title -->\r\n    <div\r\n      class=\"lf-header-logo-title-wrapper ml-1 mr-2\"\r\n      [class.ml-10]=\"headerConfig.leftMenuButton && !isMobile\">\r\n      <!-- link wrapper -->\r\n      <div\r\n        class=\"lf-header-logo-title-wrapper-link\"\r\n        [class.lf-clickable]=\"headerConfig.titleRouterLink\"\r\n        [routerLink]=\"headerConfig.titleRouterLink ? [headerConfig.titleRouterLink] : null\">\r\n        <!-- svg logo -->\r\n        @if (headerConfig.svgLogo) {\r\n          <mat-icon\r\n            class=\"lf-header-logo\"\r\n            [class.mr-3]=\"headerConfig.title\"\r\n            [svgIcon]=\"headerConfig.svgLogo!\"></mat-icon>\r\n        } @else {\r\n          @if (headerConfig.imgLogo) {\r\n            <img\r\n              class=\"lf-header-logo\"\r\n              [class.mr-3]=\"headerConfig.title\"\r\n              [src]=\"headerConfig.imgLogo\"\r\n              alt=\"Logo\" />\r\n          }\r\n        }\r\n        <!-- img logo -->\r\n        <!-- title -->\r\n        @if (headerConfig.title) {\r\n          <div class=\"lf-header-title-wrapper\">\r\n            @if (headerConfig.title) {\r\n              <span class=\"lf-header-title\">\r\n                {{ headerConfig.title }}\r\n              </span>\r\n            }\r\n            @if (headerConfig.subtitle) {\r\n              <span class=\"lf-header-subtitle\">\r\n                {{ headerConfig.subtitle }}\r\n              </span>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n    <!-- input -->\r\n    @if (headerConfig.inputConfig?.enable) {\r\n      <div class=\"spacer\"></div>\r\n      <lf-input\r\n        [class.lf-header-input-mobile]=\"isMobile\"\r\n        [class.mx-3]=\"!isMobile\"\r\n        [inputConfig]=\"headerConfig.inputConfig!\"\r\n        [isMobile]=\"isMobile\"\r\n        (inputSubmitEvent)=\"inputSubmitted($event)\"\r\n        (inputChangeEvent)=\"inputChanged($event)\"\r\n        (inputPrefixActionEvent)=\"headerConfig.inputConfig!.enable = false\"></lf-input>\r\n    }\r\n    <!-- spacer -->\r\n    <div class=\"spacer\"></div>\r\n    <!-- right menu buttons -->\r\n    @for (button of headerConfig.rightMenuButtons; track button) {\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n        [ngTemplateOutletContext]=\"{\r\n          menuButton: button,\r\n        }\"></ng-container>\r\n    }\r\n  </mat-toolbar>\r\n  <!-- loading bar -->\r\n  @if (headerConfig.loading || (headerConfig.showRouteLoading && routeLoading)) {\r\n    <mat-progress-bar\r\n      class=\"lf-header-progress-bar\"\r\n      color=\"accent\"\r\n      mode=\"indeterminate\"></mat-progress-bar>\r\n  }\r\n}\r\n\r\n<!-- header menu button -->\r\n<ng-template #menuButtonTemplate let-menuButton=\"menuButton\" let-hideLabel=\"hideLabel\">\r\n  @if (menuButton) {\r\n    <!-- icon button -->\r\n    @if ((menuButton.matIcon || menuButton.svgIcon) && (!menuButton.label || hideLabel)) {\r\n      <button\r\n        mat-icon-button\r\n        class=\"lf-header-menu-button\"\r\n        [ngClass]=\"menuButton.class\"\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\r\n          [matIcon]=\"menuButton.matIcon\"\r\n          [svgIcon]=\"menuButton.svgIcon\"\r\n          [outlineIcon]=\"menuButton.outlineIcon\"></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.class\"\r\n          (click)=\"buttonClicked(menuButton.id)\"\r\n          [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n          [matTooltip]=\"menuButton.tooltip\">\r\n          {{ menuButton.label }}\r\n        </button>\r\n      }\r\n    }\r\n    <!-- text button -->\r\n    <!-- menu -->\r\n    <mat-menu #menu=\"matMenu\">\r\n      <!-- label menu buttons -->\r\n      @for (button of menuButton.menuButtons; track button) {\r\n        <!-- menu button -->\r\n        @if (button.label) {\r\n          <button\r\n            mat-menu-item\r\n            [class.lf-header-menu-button-active]=\"isActive(button.id)\"\r\n            [ngClass]=\"button.class\"\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              [outlineIcon]=\"button.outlineIcon\"\r\n              [alignMiddle]=\"true\"></lf-icon>\r\n            <!-- label -->\r\n            @if (button.label) {\r\n              <span>{{ button.label }}</span>\r\n            }\r\n          </button>\r\n        }\r\n      }\r\n      <!-- icon menu buttons -->\r\n      <div class=\"lf-menu-icons px-1\">\r\n        @for (button of menuButton.menuButtons; track button) {\r\n          <!-- icon button -->\r\n          @if (!button.label && (button.matIcon || button.svgIcon)) {\r\n            <button\r\n              mat-button\r\n              class=\"lf-menu-icon-button\"\r\n              [ngClass]=\"button.class\"\r\n              (click)=\"buttonClicked(button.id)\"\r\n              [matTooltip]=\"button.tooltip\">\r\n              <!-- icon -->\r\n              <lf-icon\r\n                [matIcon]=\"button.matIcon\"\r\n                [svgIcon]=\"button.svgIcon\"\r\n                [outlineIcon]=\"button.outlineIcon\"\r\n                [alignMiddle]=\"true\"></lf-icon>\r\n            </button>\r\n          }\r\n        }\r\n      </div>\r\n    </mat-menu>\r\n  }\r\n</ng-template>\r\n", styles: [".lf-header{transition:top .3s;z-index:100;position:fixed;top:0;height:64px}.lf-header .lf-header-menu-button{flex-shrink:0;max-width:144px}.lf-header .lf-header-menu-button ::ng-deep .mdc-button__label{overflow:hidden;text-overflow:ellipsis}.lf-header .lf-header-menu-button.lf-header-menu-button-active{background-color:#fff}.lf-header .lf-header-logo-title-wrapper{flex:0 0 auto;max-width:480px;overflow:hidden;display:flex}.lf-header .lf-header-logo-title-wrapper .lf-header-logo-title-wrapper-link{display:flex;flex-flow:row nowrap;align-items:center;flex:0}.lf-header .lf-header-logo-title-wrapper .lf-header-logo-title-wrapper-link.lf-clickable{cursor:pointer}.lf-header .lf-header-logo-title-wrapper .lf-header-logo{width:40px;height:40px;min-width:40px;min-height:40px}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper{display:flex;flex-flow:column}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-title{font-size:20px;line-height:28px}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-subtitle{font-size:12px;line-height:12px}.lf-header lf-input{z-index:100;flex:1 1 480px}.lf-header lf-input.lf-header-input-mobile{position:fixed!important;left:4px!important;right:4px!important;width:unset!important;max-width:unset!important}.lf-header .spacer{flex:1 0 auto}.lf-menu-icons{display:flex;flex-flow:row wrap;align-items:center;justify-content:flex-start}.lf-menu-icons .lf-menu-icon-button{width:48px;min-width:unset;height:48px;margin:0;padding:0;border-radius:50%}.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", "outlineIcon", "alignMiddle"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: HeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lf-header', standalone: false, template: "@if (headerConfig && headerConfig.enable) {\r\n  <mat-toolbar\r\n    class=\"lf-header mat-elevation-z3\"\r\n    [class.px-4]=\"!isMobile\"\r\n    [class.px-1]=\"isMobile\"\r\n    [ngClass]=\"headerConfig.class\"\r\n    color=\"primary\">\r\n    <!-- left menu button -->\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n      [ngTemplateOutletContext]=\"{\r\n        menuButton: headerConfig.leftMenuButton!,\r\n        hideLabel: true,\r\n      }\"></ng-container>\r\n    <!-- logo & title -->\r\n    <div\r\n      class=\"lf-header-logo-title-wrapper ml-1 mr-2\"\r\n      [class.ml-10]=\"headerConfig.leftMenuButton && !isMobile\">\r\n      <!-- link wrapper -->\r\n      <div\r\n        class=\"lf-header-logo-title-wrapper-link\"\r\n        [class.lf-clickable]=\"headerConfig.titleRouterLink\"\r\n        [routerLink]=\"headerConfig.titleRouterLink ? [headerConfig.titleRouterLink] : null\">\r\n        <!-- svg logo -->\r\n        @if (headerConfig.svgLogo) {\r\n          <mat-icon\r\n            class=\"lf-header-logo\"\r\n            [class.mr-3]=\"headerConfig.title\"\r\n            [svgIcon]=\"headerConfig.svgLogo!\"></mat-icon>\r\n        } @else {\r\n          @if (headerConfig.imgLogo) {\r\n            <img\r\n              class=\"lf-header-logo\"\r\n              [class.mr-3]=\"headerConfig.title\"\r\n              [src]=\"headerConfig.imgLogo\"\r\n              alt=\"Logo\" />\r\n          }\r\n        }\r\n        <!-- img logo -->\r\n        <!-- title -->\r\n        @if (headerConfig.title) {\r\n          <div class=\"lf-header-title-wrapper\">\r\n            @if (headerConfig.title) {\r\n              <span class=\"lf-header-title\">\r\n                {{ headerConfig.title }}\r\n              </span>\r\n            }\r\n            @if (headerConfig.subtitle) {\r\n              <span class=\"lf-header-subtitle\">\r\n                {{ headerConfig.subtitle }}\r\n              </span>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n    <!-- input -->\r\n    @if (headerConfig.inputConfig?.enable) {\r\n      <div class=\"spacer\"></div>\r\n      <lf-input\r\n        [class.lf-header-input-mobile]=\"isMobile\"\r\n        [class.mx-3]=\"!isMobile\"\r\n        [inputConfig]=\"headerConfig.inputConfig!\"\r\n        [isMobile]=\"isMobile\"\r\n        (inputSubmitEvent)=\"inputSubmitted($event)\"\r\n        (inputChangeEvent)=\"inputChanged($event)\"\r\n        (inputPrefixActionEvent)=\"headerConfig.inputConfig!.enable = false\"></lf-input>\r\n    }\r\n    <!-- spacer -->\r\n    <div class=\"spacer\"></div>\r\n    <!-- right menu buttons -->\r\n    @for (button of headerConfig.rightMenuButtons; track button) {\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n        [ngTemplateOutletContext]=\"{\r\n          menuButton: button,\r\n        }\"></ng-container>\r\n    }\r\n  </mat-toolbar>\r\n  <!-- loading bar -->\r\n  @if (headerConfig.loading || (headerConfig.showRouteLoading && routeLoading)) {\r\n    <mat-progress-bar\r\n      class=\"lf-header-progress-bar\"\r\n      color=\"accent\"\r\n      mode=\"indeterminate\"></mat-progress-bar>\r\n  }\r\n}\r\n\r\n<!-- header menu button -->\r\n<ng-template #menuButtonTemplate let-menuButton=\"menuButton\" let-hideLabel=\"hideLabel\">\r\n  @if (menuButton) {\r\n    <!-- icon button -->\r\n    @if ((menuButton.matIcon || menuButton.svgIcon) && (!menuButton.label || hideLabel)) {\r\n      <button\r\n        mat-icon-button\r\n        class=\"lf-header-menu-button\"\r\n        [ngClass]=\"menuButton.class\"\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\r\n          [matIcon]=\"menuButton.matIcon\"\r\n          [svgIcon]=\"menuButton.svgIcon\"\r\n          [outlineIcon]=\"menuButton.outlineIcon\"></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.class\"\r\n          (click)=\"buttonClicked(menuButton.id)\"\r\n          [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n          [matTooltip]=\"menuButton.tooltip\">\r\n          {{ menuButton.label }}\r\n        </button>\r\n      }\r\n    }\r\n    <!-- text button -->\r\n    <!-- menu -->\r\n    <mat-menu #menu=\"matMenu\">\r\n      <!-- label menu buttons -->\r\n      @for (button of menuButton.menuButtons; track button) {\r\n        <!-- menu button -->\r\n        @if (button.label) {\r\n          <button\r\n            mat-menu-item\r\n            [class.lf-header-menu-button-active]=\"isActive(button.id)\"\r\n            [ngClass]=\"button.class\"\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              [outlineIcon]=\"button.outlineIcon\"\r\n              [alignMiddle]=\"true\"></lf-icon>\r\n            <!-- label -->\r\n            @if (button.label) {\r\n              <span>{{ button.label }}</span>\r\n            }\r\n          </button>\r\n        }\r\n      }\r\n      <!-- icon menu buttons -->\r\n      <div class=\"lf-menu-icons px-1\">\r\n        @for (button of menuButton.menuButtons; track button) {\r\n          <!-- icon button -->\r\n          @if (!button.label && (button.matIcon || button.svgIcon)) {\r\n            <button\r\n              mat-button\r\n              class=\"lf-menu-icon-button\"\r\n              [ngClass]=\"button.class\"\r\n              (click)=\"buttonClicked(button.id)\"\r\n              [matTooltip]=\"button.tooltip\">\r\n              <!-- icon -->\r\n              <lf-icon\r\n                [matIcon]=\"button.matIcon\"\r\n                [svgIcon]=\"button.svgIcon\"\r\n                [outlineIcon]=\"button.outlineIcon\"\r\n                [alignMiddle]=\"true\"></lf-icon>\r\n            </button>\r\n          }\r\n        }\r\n      </div>\r\n    </mat-menu>\r\n  }\r\n</ng-template>\r\n", styles: [".lf-header{transition:top .3s;z-index:100;position:fixed;top:0;height:64px}.lf-header .lf-header-menu-button{flex-shrink:0;max-width:144px}.lf-header .lf-header-menu-button ::ng-deep .mdc-button__label{overflow:hidden;text-overflow:ellipsis}.lf-header .lf-header-menu-button.lf-header-menu-button-active{background-color:#fff}.lf-header .lf-header-logo-title-wrapper{flex:0 0 auto;max-width:480px;overflow:hidden;display:flex}.lf-header .lf-header-logo-title-wrapper .lf-header-logo-title-wrapper-link{display:flex;flex-flow:row nowrap;align-items:center;flex:0}.lf-header .lf-header-logo-title-wrapper .lf-header-logo-title-wrapper-link.lf-clickable{cursor:pointer}.lf-header .lf-header-logo-title-wrapper .lf-header-logo{width:40px;height:40px;min-width:40px;min-height:40px}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper{display:flex;flex-flow:column}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-title{font-size:20px;line-height:28px}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-subtitle{font-size:12px;line-height:12px}.lf-header lf-input{z-index:100;flex:1 1 480px}.lf-header lf-input.lf-header-input-mobile{position:fixed!important;left:4px!important;right:4px!important;width:unset!important;max-width:unset!important}.lf-header .spacer{flex:1 0 auto}.lf-menu-icons{display:flex;flex-flow:row wrap;align-items:center;justify-content:flex-start}.lf-menu-icons .lf-menu-icon-button{width:48px;min-width:unset;height:48px;margin:0;padding:0;border-radius:50%}.lf-header-progress-bar{z-index:100;position:fixed;top:64px}\n"] }]
+        }], propDecorators: { headerConfig: [{
+                type: Input
+            }], isMobile: [{
+                type: Input
+            }], routeLoading: [{
+                type: Input
+            }], currentRoute: [{
+                type: Input
+            }], headerButtonClickEvent: [{
+                type: Output
+            }], headerInputSubmitEvent: [{
+                type: Output
+            }], headerInputChangeEvent: [{
+                type: Output
+            }] } });
+
+class LoadingOverlayComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: LoadingOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", 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{position:fixed;z-index:101;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.0.5", 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{position:fixed;z-index:101;inset:0;height:100%;width:100%;display:flex;align-items:center;justify-content:center;background-color:#00000029}\n"] }]
+        }] });
+
+class NavbarComponent {
+    constructor() {
+        this.navbarConfig = null;
+        this.isMobile = false;
+        this.navbarButtonClickEvent = new EventEmitter();
+    }
+    buttonClicked(id) {
+        if (!id) {
+            return;
+        }
+        this.navbarButtonClickEvent.emit(id);
+    }
+    isActive(id) {
+        if (!id || !this.currentRoute) {
+            return false;
+        }
+        const route = this.currentRoute.substring(this.currentRoute.indexOf('/') + 1);
+        return route === id;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: NavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: NavbarComponent, isStandalone: false, selector: "lf-navbar", inputs: { navbarConfig: "navbarConfig", isMobile: "isMobile", currentRoute: "currentRoute" }, outputs: { navbarButtonClickEvent: "navbarButtonClickEvent" }, ngImport: i0, template: "@if (navbarConfig && navbarConfig.enable) {\r\n  <div\r\n    class=\"mat-app-background mat-elevation-z3\"\r\n    [class.lf-navbar]=\"!isMobile\"\r\n    [class.lf-navbar-mobile]=\"isMobile\"\r\n    [ngClass]=\"navbarConfig.class\">\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; 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.class\"\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\r\n              [matIcon]=\"button.matIcon!\"\r\n              [svgIcon]=\"button.svgIcon!\"\r\n              [outlineIcon]=\"button.outlineIcon!\"></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", "outlineIcon", "alignMiddle"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: NavbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lf-navbar', standalone: false, template: "@if (navbarConfig && navbarConfig.enable) {\r\n  <div\r\n    class=\"mat-app-background mat-elevation-z3\"\r\n    [class.lf-navbar]=\"!isMobile\"\r\n    [class.lf-navbar-mobile]=\"isMobile\"\r\n    [ngClass]=\"navbarConfig.class\">\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; 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.class\"\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\r\n              [matIcon]=\"button.matIcon!\"\r\n              [svgIcon]=\"button.svgIcon!\"\r\n              [outlineIcon]=\"button.outlineIcon!\"></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"] }]
+        }], propDecorators: { navbarConfig: [{
+                type: Input
+            }], isMobile: [{
+                type: Input
+            }], currentRoute: [{
+                type: Input
+            }], navbarButtonClickEvent: [{
+                type: Output
+            }] } });
+
+class BreakpointService {
+    constructor() {
+        this.breakpointObserver = inject(BreakpointObserver);
+        this.breakpoint$ = this.breakpointObserver
+            .observe([Breakpoints.Large, Breakpoints.Medium, Breakpoints.Small, Breakpoints.XSmall])
+            .pipe(distinctUntilChanged());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BreakpointService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BreakpointService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BreakpointService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class ConfirmDialogComponent {
+    constructor() {
+        this.config = inject(MAT_DIALOG_DATA);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ConfirmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: ConfirmDialogComponent, isStandalone: false, selector: "lf-confirm-dialog", ngImport: i0, template: "@if (config) {\r\n  @if (config.title) {\r\n    <h2 mat-dialog-title>{{ config.title }}</h2>\r\n  }\r\n\r\n  <mat-dialog-content>\r\n    @if (config.message) {\r\n      <p>{{ config.message }}</p>\r\n    }\r\n  </mat-dialog-content>\r\n\r\n  <mat-dialog-actions align=\"end\">\r\n    @if (config.closeLabel) {\r\n      <button mat-button [mat-dialog-close]=\"false\">\r\n        {{ config.closeLabel }}\r\n      </button>\r\n    }\r\n    @if (config.confirmLabel) {\r\n      <button mat-button color=\"primary\" [mat-dialog-close]=\"true\">\r\n        {{ config.confirmLabel }}\r\n      </button>\r\n    }\r\n  </mat-dialog-actions>\r\n}\r\n", styles: [""], dependencies: [{ kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i2$3.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i2$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lf-confirm-dialog', standalone: false, template: "@if (config) {\r\n  @if (config.title) {\r\n    <h2 mat-dialog-title>{{ config.title }}</h2>\r\n  }\r\n\r\n  <mat-dialog-content>\r\n    @if (config.message) {\r\n      <p>{{ config.message }}</p>\r\n    }\r\n  </mat-dialog-content>\r\n\r\n  <mat-dialog-actions align=\"end\">\r\n    @if (config.closeLabel) {\r\n      <button mat-button [mat-dialog-close]=\"false\">\r\n        {{ config.closeLabel }}\r\n      </button>\r\n    }\r\n    @if (config.confirmLabel) {\r\n      <button mat-button color=\"primary\" [mat-dialog-close]=\"true\">\r\n        {{ config.confirmLabel }}\r\n      </button>\r\n    }\r\n  </mat-dialog-actions>\r\n}\r\n" }]
+        }] });
+
+class DialogService {
+    constructor() {
+        this.matDialog = inject(MatDialog);
+    }
+    /**
+     * Opens a dialog with custom template and custom config
+     *
+     * @param templateRef reference to the component or template
+     * @param config of the dialog
+     * @returns an asynchronous any response
+     */
+    openCustomDialog(templateRef, config) {
+        const dialogRef = this.matDialog.open(templateRef, config);
+        return firstValueFrom(dialogRef.afterClosed());
+    }
+    /**
+     * Opens a simple pre-made confirm dialog
+     *
+     * @param config of the dialog
+     * @returns an asynchronous boolean response
+     */
+    openConfirmDialog(config) {
+        const dialogRef = this.matDialog.open(ConfirmDialogComponent, {
+            autoFocus: false,
+            maxWidth: '368px',
+            data: config
+        });
+        return firstValueFrom(dialogRef.afterClosed());
+    }
+    /**
+     * Opens a simple pre-made input dialog
+     *
+     * @param config of the dialog
+     * @returns an asynchronous string response
+     */
+    openInputDialog(config) {
+        const dialogRef = this.matDialog.open(InputComponent, {
+            autoFocus: false,
+            width: '100vw',
+            data: config,
+            panelClass: 'lf-input-dialog'
+        });
+        return firstValueFrom(dialogRef.afterClosed());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DialogService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DialogService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class Logger {
+    constructor() {
+        this.config = inject(CONFIG, { optional: true });
+    }
+    /**
+     * Uses the regular console log but can be automatically disabled during production by using the ScaffoldLibraryConfig in the ScaffoldModule.forRoot
+     *
+     * @param message message of the log
+     * @param args arguments of the log
+     */
+    log(message, ...args) {
+        if (this.config?.production === false) {
+            console.log(message, ...args); // eslint-disable-line no-console
+        }
+    }
+    /**
+     * Uses the regular console warn but can be automatically disabled during production by using the ScaffoldLibraryConfig in the ScaffoldModule.forRoot
+     *
+     * @param message message of the warn
+     * @param args arguments of the warn
+     */
+    warn(message, ...args) {
+        if (this.config?.production === false) {
+            console.warn(message, ...args); // eslint-disable-line no-console
+        }
+    }
+    /**
+     * Uses the regular console error but can be automatically disabled during production by using the ScaffoldLibraryConfig in the ScaffoldModule.forRoot
+     *
+     * @param message message of the error
+     * @param args arguments of the error
+     */
+    error(message, ...args) {
+        if (this.config?.production === false) {
+            console.error(message, ...args); // eslint-disable-line no-console
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: Logger, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: Logger, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: Logger, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class LocalStorageService {
+    constructor() {
+        this.logger = inject(Logger);
+        this.config = inject(CONFIG, { optional: true });
+    }
+    /**
+     * Set an item into the browser's local storage
+     *
+     * @param key key of the item
+     * @param value value of the item
+     */
+    setItem(key, value) {
+        try {
+            const stringValue = JSON.stringify(value);
+            if (this.config?.debugging)
+                this.logger.log(`[SET ITEM] ${key} with value:`, stringValue);
+            localStorage.setItem(key, stringValue);
+        }
+        catch (error) {
+            this.logger.error(`[ERROR SET ITEM] ${key}: ${error}`);
+        }
+    }
+    /**
+     * Set an item encoded into the browser's local storage
+     *
+     * @param key key of the item
+     * @param value value of the item
+     */
+    setItemEncoded(key, value) {
+        try {
+            const encodedValue = btoa(JSON.stringify(value));
+            if (this.config?.debugging)
+                this.logger.log(`[SET ITEM] ${key} with value:`, encodedValue);
+            localStorage.setItem(key, encodedValue);
+        }
+        catch (error) {
+            this.logger.error(`[ERROR SET ITEM] ${key}: ${error}`);
+        }
+    }
+    /**
+     * Get an item from the browser's local storage by key
+     *
+     * @param key key of the item
+     * @returns value of the item
+     */
+    getItem(key) {
+        try {
+            const item = localStorage.getItem(key);
+            if (this.config?.debugging)
+                this.logger.log(`[GET ITEM] ${key} with value:`, item);
+            return item ? JSON.parse(item, this.dateReviver) : null;
+        }
+        catch (error) {
+            this.logger.error(`[ERROR GET ITEM] ${key}: ${error}`);
+            return null;
+        }
+    }
+    /**
+     * Get an item and decode it from the browser's local storage by key
+     *
+     * @param key key of the item
+     * @returns value of the item
+     */
+    getItemDecoded(key) {
+        try {
+            const item = localStorage.getItem(key);
+            if (this.config?.debugging)
+                this.logger.log(`[GET ITEM] ${key} with value:`, item);
+            return item ? JSON.parse(atob(item), this.dateReviver) : null;
+        }
+        catch (error) {
+            this.logger.error(`[ERROR GET ITEM] ${key}: ${error}`);
+            return null;
+        }
+    }
+    /**
+     * Get an unparsed string item from the browser's local storage by key
+     *
+     * @param key key of the item
+     */
+    getItemUnparsed(key) {
+        try {
+            const item = localStorage.getItem(key);
+            if (this.config?.debugging)
+                this.logger.log(`[GET ITEM] ${key} with value:`, item);
+            return item || null;
+        }
+        catch (error) {
+            this.logger.error(`[ERROR GET ITEM] ${key}: ${error}`);
+            return null;
+        }
+    }
+    /**
+     * Remove an item from the browser's local storage by key
+     *
+     * @param key key of the item
+     * @returns value of the item
+     */
+    removeItem(key) {
+        try {
+            if (this.config?.debugging)
+                this.logger.log(`[REMOVE ITEM] ${key}`);
+            localStorage.removeItem(key);
+        }
+        catch (error) {
+            this.logger.error(`[ERROR REMOVE ITEM] ${key}: ${error}`);
+        }
+    }
+    /**
+     * Clear the browser's local storage for this application
+     *
+     */
+    clear() {
+        localStorage.clear();
+    }
+    dateReviver(key, value) {
+        if (typeof value === 'string' && /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z$/.test(value)) {
+            return new Date(value);
+        }
+        return value;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: LocalStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: LocalStorageService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: LocalStorageService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class RouterService {
+    get loading$() {
+        return this._loading$.asObservable();
+    }
+    get routeHistory$() {
+        return this._routeHistory$.asObservable();
+    }
+    get currentRoute$() {
+        return this._currentRoute$.asObservable();
+    }
+    get currentRoute() {
+        return this._currentRoute$.value;
+    }
+    get previousRoute$() {
+        return this._previousRoute$.asObservable();
+    }
+    get previousRoute() {
+        return this._previousRoute$.value;
+    }
+    constructor() {
+        this.router = inject(Router);
+        this._loading$ = new BehaviorSubject(false);
+        this._routeHistory$ = new BehaviorSubject([]);
+        this._currentRoute$ = new BehaviorSubject('');
+        this._previousRoute$ = new BehaviorSubject('');
+        this.router.events.subscribe(event => {
+            let asyncLoadCount = 0;
+            if (event instanceof RouteConfigLoadStart) {
+                asyncLoadCount++;
+            }
+            if (event instanceof RouteConfigLoadEnd) {
+                asyncLoadCount--;
+            }
+            if (event instanceof NavigationEnd) {
+                const previousRoute = this._currentRoute$.value;
+                this._previousRoute$.next(previousRoute);
+                const currentRoute = event.urlAfterRedirects;
+                this._currentRoute$.next(currentRoute);
+                if (!this.router.getCurrentNavigation()?.extras?.state?.['back']) {
+                    const routeHistory = this._routeHistory$.value;
+                    routeHistory.push(currentRoute);
+                    this._routeHistory$.next(routeHistory);
+                }
+            }
+            this._loading$.next(!!asyncLoadCount);
+        });
+    }
+    /**
+     * Navigates to the previous route found in the routeHistory Observable
+     *
+     * @param fallbackRoute fallback in case there is no previous route
+     */
+    navigateBack(fallbackRoute) {
+        this._routeHistory$.pipe(take(1)).subscribe(routeHistory => {
+            if (routeHistory.length > 1) {
+                const previousRoute = routeHistory[routeHistory.length - 2];
+                if (previousRoute) {
+                    this.router.navigateByUrl(previousRoute, { state: { back: true } }).then(result => {
+                        if (result) {
+                            routeHistory.pop();
+                        }
+                    });
+                }
+                else if (fallbackRoute) {
+                    this.router.navigate([fallbackRoute]);
+                }
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: RouterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: RouterService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: RouterService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+class ScaffoldService {
+    constructor() {
+        this.logger = inject(Logger);
+        this.config = inject(CONFIG, { optional: true });
+        // Scaffold Config
+        this._scaffoldConfig$ = new BehaviorSubject({});
+        // Header Input Change
+        this._headerInputChangeValue$ = new BehaviorSubject('');
+        // Button Click Event
+        this._buttonClickEventValue$ = new BehaviorSubject('');
+        // Drawer component
+        this._drawerPortal$ = new BehaviorSubject(null);
+    }
+    get scaffoldConfig$() {
+        return this._scaffoldConfig$.asObservable();
+    }
+    set scaffoldConfig(value) {
+        this._scaffoldConfig$.next(value);
+    }
+    get scaffoldConfig() {
+        return this._scaffoldConfig$.value;
+    }
+    get headerInputChangeValue$() {
+        return this._headerInputChangeValue$.asObservable();
+    }
+    set headerInputChangeValue(value) {
+        this._headerInputChangeValue$.next(value);
+    }
+    get buttonClickEventValue$() {
+        return this._buttonClickEventValue$.asObservable();
+    }
+    set buttonClickEventValue(value) {
+        this._buttonClickEventValue$.next(value);
+        this._buttonClickEventValue$.next('');
+    }
+    get drawerPortal$() {
+        return this._drawerPortal$.asObservable();
+    }
+    set drawerPortal(value) {
+        const componentPortal = new ComponentPortal(value);
+        this._drawerPortal$.next(value ? componentPortal : null);
+    }
+    // Update a specific property in the ScaffoldConfig
+    updateScaffoldProperty(property, value) {
+        const currentState = this._scaffoldConfig$.getValue();
+        if (currentState[property] === value) {
+            return;
+        }
+        const updatedState = { ...currentState, [property]: value };
+        if (this.config?.debugging)
+            this.logger.log(`[UPDATE] ScaffoldConfig.${property}`, value);
+        this._scaffoldConfig$.next(updatedState);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ScaffoldService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ScaffoldService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ScaffoldService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class SeoService {
+    constructor() {
+        this.metaTitle = inject(Title);
+        this.metaTags = inject(Meta);
+        this.document = inject(DOCUMENT);
+        this.logger = inject(Logger);
+    }
+    /**
+     * Pass a configuration to set meta tags such as title, description and image for search results and social media
+     *
+     * @param seoConfig config that contains all the meta information
+     *
+     */
+    setMetaTags(seoConfig) {
+        const autoTrim = seoConfig.autoTrim || false;
+        const title = seoConfig.metaPageTitle || '';
+        const description = seoConfig.metaPageDescription || '';
+        const imagePath = seoConfig.metaImagePath || '';
+        const titleLimit = 60;
+        const descriptionLimit = 160;
+        // Set meta title
+        if (title) {
+            if (autoTrim && title.length > titleLimit) {
+                this.logger.error(`[SeoService] The set meta title is too long. Recommended length is ${titleLimit}. The title will be trimmed.`);
+            }
+            const titleTrim = (title.length > titleLimit) ? title.substring(0, titleLimit - 3) + '...' : title;
+            this._setMetaTitle(autoTrim ? titleTrim : title);
+        }
+        // Set meta description
+        if (description) {
+            if (autoTrim && description.length > descriptionLimit) {
+                this.logger.error(`[SeoService] The set meta description is too long. Recommended length is ${descriptionLimit}. The description will be trimmed.`);
+            }
+            const descriptionTrim = (description.length > descriptionLimit) ? description.substring(0, descriptionLimit - 3) + '...' : description;
+            this._setMetaDescription(autoTrim ? descriptionTrim : description);
+        }
+        // Set meta image
+        const host = this.document.location.origin;
+        if (imagePath) {
+            this._setMetaImage(`${host}/${imagePath}`);
+        }
+    }
+    // Set all meta titles
+    _setMetaTitle(title) {
+        this.metaTitle.setTitle(title);
+        this.metaTags.updateTag({ property: 'og:title', content: title });
+        this.metaTags.updateTag({ name: 'twitter:title', content: title });
+    }
+    // Set all meta descriptions
+    _setMetaDescription(description) {
+        this.metaTags.updateTag({ name: 'description', content: description });
+        this.metaTags.updateTag({ property: 'og:description', content: description });
+        this.metaTags.updateTag({ name: 'twitter:description', content: description });
+    }
+    // Set all meta images
+    _setMetaImage(image) {
+        this.metaTags.updateTag({ property: 'og:image', content: image });
+        this.metaTags.updateTag({ name: 'twitter:image', content: image });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SeoService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SeoService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SeoService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class SnackbarService {
+    constructor() {
+        this.snackbar = inject(MatSnackBar);
+        this.SNACKBAR_DURATION = 5000;
+        this.SNACKBAR_POSITION_HORIZONTAL = 'center';
+        this.SNACKBAR_POSITION_VERTICAL = 'bottom';
+        this.actionConfig = {
+            horizontalPosition: this.SNACKBAR_POSITION_HORIZONTAL,
+            verticalPosition: this.SNACKBAR_POSITION_VERTICAL
+        };
+        this.defaultConfig = {
+            duration: this.SNACKBAR_DURATION,
+            horizontalPosition: this.SNACKBAR_POSITION_HORIZONTAL,
+            verticalPosition: this.SNACKBAR_POSITION_VERTICAL
+        };
+    }
+    // Opens a snackbar with an action to wait for
+    openSnackbarWithAction(message, action, config) {
+        const snackbarRef = this.snackbar.open(message, action, config ? config : this.actionConfig);
+        return firstValueFrom(snackbarRef.onAction());
+    }
+    // Opens a generic snackbar with a message
+    openSnackbar(message, config) {
+        this.snackbar.open(message, '', config ? config : this.defaultConfig);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SnackbarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SnackbarService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SnackbarService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class ThemeService {
+    get currentTheme$() {
+        return this._currentTheme$.asObservable();
+    }
+    constructor() {
+        this.storageService = inject(LocalStorageService);
+        this.document = inject(DOCUMENT);
+        this.THEME_KEY = 'THEME';
+        this._currentTheme$ = new BehaviorSubject('');
+        this.loadTheme();
+    }
+    /**
+     * Set one of the defined themes by passing its class name
+     *
+     * @param newTheme class name of the theme (pass empty string for default theme)
+     * @param useLocalStorage persist the current theme in the LocalStorage
+     */
+    setTheme(newTheme, useLocalStorage) {
+        const currentTheme = this._currentTheme$.value;
+        if (newTheme === currentTheme) {
+            return;
+        }
+        if (currentTheme) {
+            this.document.body.classList.remove(currentTheme);
+        }
+        this._currentTheme$.next(newTheme);
+        if (newTheme) {
+            this.document.body.classList.add(newTheme);
+            if (useLocalStorage) {
+                this.storageService.setItem(this.THEME_KEY, JSON.stringify(newTheme));
+            }
+        }
+        else {
+            if (useLocalStorage) {
+                this.storageService.removeItem(this.THEME_KEY);
+            }
+        }
+    }
+    /**
+     * Loads the current theme stored in the local storage if available
+     *
+     */
+    loadTheme() {
+        const theme = this.storageService.getItem(this.THEME_KEY);
+        if (!theme) {
+            return;
+        }
+        this.setTheme(theme.replace(/"/g, ''));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ThemeService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ThemeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class ScaffoldComponent {
+    constructor() {
+        this.scaffoldService = inject(ScaffoldService);
+        this.breakpointService = inject(BreakpointService);
+        this.routerService = inject(RouterService);
+        this.logger = inject(Logger);
+        this.route = inject(ActivatedRoute);
+        this.document = inject(DOCUMENT);
+        this.config = inject(CONFIG, { optional: true });
+        this.headerButtonClickEvent = new EventEmitter();
+        this.headerInputSubmitEvent = new EventEmitter();
+        this.headerInputChangeEvent = new EventEmitter();
+        this.navbarButtonClickEvent = new EventEmitter();
+        this.floatingButtonClickEvent = new EventEmitter();
+        this.bottomBarButtonClickEvent = new EventEmitter();
+        this.scaffoldConfig = null;
+        this.headerConfig = null;
+        this.navbarConfig = null;
+        this.drawerConfig = null;
+        this.footerConfig = null;
+        this.contentTitleCardConfig = null;
+        this.floatingButtonConfig = null;
+        this.bottomBarConfig = null;
+        this.routeHistory = [];
+        this.isMobile = false;
+        this.routeLoading = false;
+        this.scrollTopPosition = 0;
+        this._subscription = new Subscription;
+    }
+    ngOnInit() {
+        // Listen for config changes
+        this._subscription.add(this.scaffoldService.scaffoldConfig$.subscribe((scaffoldConfig) => {
+            if (this.config?.debugging)
+                this.logger.log('[ScaffoldConfig]', scaffoldConfig);
+            this.scaffoldConfig = scaffoldConfig;
+            this.headerConfig = this.scaffoldConfig.headerConfig;
+            this.navbarConfig = this.scaffoldConfig.navbarConfig;
+            this.drawerConfig = this.scaffoldConfig.drawerConfig;
+            this.footerConfig = this.scaffoldConfig.footerConfig;
+            this.contentTitleCardConfig = this.scaffoldConfig.contentTitleCardConfig;
+            this.floatingButtonConfig = this.scaffoldConfig.floatingButtonConfig;
+            this.bottomBarConfig = this.scaffoldConfig.bottomBarConfig;
+        }));
+        // Listen for drawer portal changes
+        this._subscription.add(this.scaffoldService.drawerPortal$.subscribe((drawerPortal) => {
+            if (this.config?.debugging)
+                this.logger.log('[DrawerPortal]', drawerPortal);
+            this.drawerPortal = drawerPortal;
+        }));
+        // Listen for breakpoint changes
+        this._subscription.add(this.breakpointService.breakpoint$.subscribe((breakpointState) => {
+            if (this.config?.debugging)
+                this.logger.log('[BreakpointState]', breakpointState);
+            if (breakpointState.breakpoints[Breakpoints.XSmall]) {
+                this.isMobile = true;
+            }
+            else if (breakpointState.breakpoints[Breakpoints.Small]) {
+                this.isMobile = true;
+            }
+            else if (breakpointState.breakpoints[Breakpoints.Medium]) {
+                this.isMobile = false;
+            }
+            else if (breakpointState.breakpoints[Breakpoints.Large]) {
+                this.isMobile = false;
+            }
+        }));
+        // Listen for route changes
+        this._subscription.add(this.routerService.routeHistory$.subscribe((routeHistory) => {
+            if (this.config?.debugging)
+                this.logger.log('[RouteHistory]', routeHistory);
+            if (routeHistory) {
+                this.routeHistory = routeHistory;
+            }
+            if (this.scrollContainer && this.scaffoldConfig?.scrollPositionRestoration) {
+                this.scrollContainer.nativeElement.scrollTop = 0;
+            }
+        }));
+        // Listen for current route changes
+        this._subscription.add(this.routerService.currentRoute$.subscribe((currentRout) => {
+            this.currentRoute = currentRout;
+        }));
+        // Listen for route loading
+        this._subscription.add(this.routerService.loading$.subscribe((routeLoading) => {
+            this.routeLoading = routeLoading;
+        }));
+        // Listen to scroll events
+        if (this.scrollContainer) {
+            const element = this.scrollContainer.nativeElement;
+            this._subscription.add(fromEvent(element, 'scroll').pipe(distinctUntilChanged(), debounceTime(100)).subscribe((e) => {
+                const target = e.target;
+                this.scrollTopPosition = target.scrollTop;
+            }));
+        }
+        // Listen for fragments in the current route
+        if (this.scaffoldConfig?.anchorScrolling) {
+            this._subscription.add(this.route.fragment.subscribe((fragment) => {
+                if (fragment) {
+                    if (this.config?.debugging)
+                        this.logger.log('[RouteFragment]', fragment);
+                    setTimeout(() => {
+                        const element = this.document.querySelector(`#${fragment}`);
+                        if (element) {
+                            element.scrollIntoView({ behavior: 'auto', block: 'start', inline: 'nearest' });
+                        }
+                    }, 100);
+                }
+            }));
+        }
+    }
+    ngOnDestroy() {
+        if (this._subscription) {
+            this._subscription.unsubscribe();
+        }
+    }
+    headerButtonClicked(id) {
+        this.scaffoldService.buttonClickEventValue = id;
+        this.headerButtonClickEvent.emit(id);
+    }
+    headerInputSubmitted(value) {
+        this.headerInputSubmitEvent.emit(value);
+    }
+    headerInputChanged(value) {
+        this.scaffoldService.headerInputChangeValue = value;
+        this.headerInputChangeEvent.emit(value);
+    }
+    navbarButtonClicked(id) {
+        this.scaffoldService.buttonClickEventValue = id;
+        this.navbarButtonClickEvent.emit(id);
+    }
+    backButtonClicked() {
+        this.routerService.navigateBack();
+    }
+    floatingButtonClicked(id) {
+        if (!id && this.scrollContainer) {
+            this.scrollContainer.nativeElement.scrollTop = 0;
+        }
+        else {
+            this.scaffoldService.buttonClickEventValue = id;
+            this.floatingButtonClickEvent.emit(id);
+        }
+    }
+    bottomBarCloseClicked(id) {
+        this.scaffoldService.buttonClickEventValue = id;
+        this.bottomBarButtonClickEvent.emit(id);
+    }
+    bottomBarButtonClicked(id) {
+        this.scaffoldService.buttonClickEventValue = id;
+        this.bottomBarButtonClickEvent.emit(id);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ScaffoldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: ScaffoldComponent, isStandalone: false, selector: "lf-scaffold", outputs: { headerButtonClickEvent: "headerButtonClickEvent", headerInputSubmitEvent: "headerInputSubmitEvent", headerInputChangeEvent: "headerInputChangeEvent", navbarButtonClickEvent: "navbarButtonClickEvent", floatingButtonClickEvent: "floatingButtonClickEvent", bottomBarButtonClickEvent: "bottomBarButtonClickEvent" }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, static: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }], ngImport: i0, template: "<!-- header-height: 64px; navbar-size: 80px; floating-button-bottom: 24px -->\r\n\r\n<div class=\"lf-scaffold mat-app-background mat-typography\" [ngClass]=\"scaffoldConfig?.class\">\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    [headerConfig]=\"headerConfig\"\r\n    [isMobile]=\"isMobile\"\r\n    [routeLoading]=\"routeLoading\"\r\n    [currentRoute]=\"currentRoute\"\r\n    (headerButtonClickEvent)=\"headerButtonClicked($event)\"\r\n    (headerInputSubmitEvent)=\"headerInputSubmitted($event)\"\r\n    (headerInputChangeEvent)=\"headerInputChanged($event)\"></lf-header>\r\n  <!-- navbar -->\r\n  <lf-navbar\r\n    [navbarConfig]=\"navbarConfig\"\r\n    [isMobile]=\"isMobile\"\r\n    [currentRoute]=\"currentRoute\"\r\n    (navbarButtonClickEvent)=\"navbarButtonClicked($event)\"></lf-navbar>\r\n  <!-- content wrapper -->\r\n  <div\r\n    class=\"lf-content-wrapper\"\r\n    [class.lf-show-navbar]=\"navbarConfig?.enable && !isMobile\"\r\n    [class.lf-show-header]=\"headerConfig?.enable && !(navbarConfig?.enable && isMobile)\"\r\n    [class.lf-show-navbar-mobile]=\"navbarConfig?.enable && isMobile && !headerConfig?.enable\"\r\n    [class.lf-show-header-and-navbar-mobile]=\"\r\n      headerConfig?.enable && navbarConfig?.enable && isMobile\r\n    \"\r\n    #scrollContainer\r\n    cdkScrollable>\r\n    <!-- drawer -->\r\n    <lf-drawer\r\n      [drawerConfig]=\"drawerConfig\"\r\n      [drawerPortal]=\"drawerPortal\"\r\n      [isMobile]=\"isMobile\"\r\n      [fixedOffset]=\"headerConfig?.enable ? 64 : 0\">\r\n      <!-- drawer content -->\r\n      <ng-content select=\"[drawerContent]\" drawerContent></ng-content>\r\n      <!-- content title card -->\r\n      <lf-content-title-card\r\n        [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 [footerConfig]=\"footerConfig\"></lf-footer>\r\n    </lf-drawer>\r\n  </div>\r\n  <!-- to top button -->\r\n  <lf-floating-button\r\n    [floatingButtonConfig]=\"floatingButtonConfig\"\r\n    [onTop]=\"scrollTopPosition <= 0\"\r\n    [isMobile]=\"isMobile && navbarConfig?.enable!\"\r\n    [bottomBarEnabled]=\"bottomBarConfig?.enable!\"\r\n    (floatingButtonClickEvent)=\"floatingButtonClicked($event)\"></lf-floating-button>\r\n  <!-- bottom bar -->\r\n  <lf-bottom-bar\r\n    [bottomBarConfig]=\"bottomBarConfig\"\r\n    [isMobile]=\"isMobile && navbarConfig?.enable!\"\r\n    [navbarEnabled]=\"navbarConfig?.enable!\"\r\n    (bottomBarCloseClickEvent)=\"bottomBarCloseClicked($event)\"\r\n    (bottomBarButtonClickEvent)=\"bottomBarButtonClicked($event)\"></lf-bottom-bar>\r\n</div>\r\n", styles: [".lf-scaffold{height:100vh}.lf-scaffold .lf-content-wrapper{transition:height .3s;position:absolute;inset:0;overflow-y:auto}.lf-scaffold .lf-content-wrapper.lf-show-navbar{left:80px}.lf-scaffold .lf-content-wrapper.lf-show-header{top:64px;height:calc(100vh - 64px)}.lf-scaffold .lf-content-wrapper.lf-show-navbar-mobile{height:calc(100vh - 56px)}.lf-scaffold .lf-content-wrapper.lf-show-header-and-navbar-mobile{top:64px;height:calc(100vh - 120px)}.lf-scaffold .lf-content-wrapper .lf-content{padding-left:24px;padding-right:24px}.lf-scaffold .lf-content-wrapper .lf-content.lf-content-mobile{padding-left:16px;padding-right:16px}.lf-scaffold .lf-content-wrapper .lf-content.lf-show-footer{min-height:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$4.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: LoadingOverlayComponent, selector: "lf-loading-overlay" }, { kind: "component", type: HeaderComponent, selector: "lf-header", inputs: ["headerConfig", "isMobile", "routeLoading", "currentRoute"], outputs: ["headerButtonClickEvent", "headerInputSubmitEvent", "headerInputChangeEvent"] }, { kind: "component", type: NavbarComponent, selector: "lf-navbar", inputs: ["navbarConfig", "isMobile", "currentRoute"], outputs: ["navbarButtonClickEvent"] }, { kind: "component", type: DrawerComponent, selector: "lf-drawer", inputs: ["drawerConfig", "isMobile", "fixedOffset", "drawerPortal"] }, { kind: "component", type: FooterComponent, selector: "lf-footer", inputs: ["footerConfig"] }, { kind: "component", type: ContentTitleCardComponent, selector: "lf-content-title-card", inputs: ["contentTitleCardConfig", "isMobile", "routeHistory"], outputs: ["backButtonClickEvent"] }, { kind: "component", type: FloatingButtonComponent, selector: "lf-floating-button", inputs: ["floatingButtonConfig", "onTop", "isMobile", "bottomBarEnabled"], outputs: ["floatingButtonClickEvent"] }, { kind: "component", type: BottomBarComponent, selector: "lf-bottom-bar", inputs: ["bottomBarConfig", "isMobile", "navbarEnabled"], outputs: ["bottomBarCloseClickEvent", "bottomBarButtonClickEvent"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ScaffoldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lf-scaffold', standalone: false, template: "<!-- header-height: 64px; navbar-size: 80px; floating-button-bottom: 24px -->\r\n\r\n<div class=\"lf-scaffold mat-app-background mat-typography\" [ngClass]=\"scaffoldConfig?.class\">\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    [headerConfig]=\"headerConfig\"\r\n    [isMobile]=\"isMobile\"\r\n    [routeLoading]=\"routeLoading\"\r\n    [currentRoute]=\"currentRoute\"\r\n    (headerButtonClickEvent)=\"headerButtonClicked($event)\"\r\n    (headerInputSubmitEvent)=\"headerInputSubmitted($event)\"\r\n    (headerInputChangeEvent)=\"headerInputChanged($event)\"></lf-header>\r\n  <!-- navbar -->\r\n  <lf-navbar\r\n    [navbarConfig]=\"navbarConfig\"\r\n    [isMobile]=\"isMobile\"\r\n    [currentRoute]=\"currentRoute\"\r\n    (navbarButtonClickEvent)=\"navbarButtonClicked($event)\"></lf-navbar>\r\n  <!-- content wrapper -->\r\n  <div\r\n    class=\"lf-content-wrapper\"\r\n    [class.lf-show-navbar]=\"navbarConfig?.enable && !isMobile\"\r\n    [class.lf-show-header]=\"headerConfig?.enable && !(navbarConfig?.enable && isMobile)\"\r\n    [class.lf-show-navbar-mobile]=\"navbarConfig?.enable && isMobile && !headerConfig?.enable\"\r\n    [class.lf-show-header-and-navbar-mobile]=\"\r\n      headerConfig?.enable && navbarConfig?.enable && isMobile\r\n    \"\r\n    #scrollContainer\r\n    cdkScrollable>\r\n    <!-- drawer -->\r\n    <lf-drawer\r\n      [drawerConfig]=\"drawerConfig\"\r\n      [drawerPortal]=\"drawerPortal\"\r\n      [isMobile]=\"isMobile\"\r\n      [fixedOffset]=\"headerConfig?.enable ? 64 : 0\">\r\n      <!-- drawer content -->\r\n      <ng-content select=\"[drawerContent]\" drawerContent></ng-content>\r\n      <!-- content title card -->\r\n      <lf-content-title-card\r\n        [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 [footerConfig]=\"footerConfig\"></lf-footer>\r\n    </lf-drawer>\r\n  </div>\r\n  <!-- to top button -->\r\n  <lf-floating-button\r\n    [floatingButtonConfig]=\"floatingButtonConfig\"\r\n    [onTop]=\"scrollTopPosition <= 0\"\r\n    [isMobile]=\"isMobile && navbarConfig?.enable!\"\r\n    [bottomBarEnabled]=\"bottomBarConfig?.enable!\"\r\n    (floatingButtonClickEvent)=\"floatingButtonClicked($event)\"></lf-floating-button>\r\n  <!-- bottom bar -->\r\n  <lf-bottom-bar\r\n    [bottomBarConfig]=\"bottomBarConfig\"\r\n    [isMobile]=\"isMobile && navbarConfig?.enable!\"\r\n    [navbarEnabled]=\"navbarConfig?.enable!\"\r\n    (bottomBarCloseClickEvent)=\"bottomBarCloseClicked($event)\"\r\n    (bottomBarButtonClickEvent)=\"bottomBarButtonClicked($event)\"></lf-bottom-bar>\r\n</div>\r\n", styles: [".lf-scaffold{height:100vh}.lf-scaffold .lf-content-wrapper{transition:height .3s;position:absolute;inset:0;overflow-y:auto}.lf-scaffold .lf-content-wrapper.lf-show-navbar{left:80px}.lf-scaffold .lf-content-wrapper.lf-show-header{top:64px;height:calc(100vh - 64px)}.lf-scaffold .lf-content-wrapper.lf-show-navbar-mobile{height:calc(100vh - 56px)}.lf-scaffold .lf-content-wrapper.lf-show-header-and-navbar-mobile{top:64px;height:calc(100vh - 120px)}.lf-scaffold .lf-content-wrapper .lf-content{padding-left:24px;padding-right:24px}.lf-scaffold .lf-content-wrapper .lf-content.lf-content-mobile{padding-left:16px;padding-right:16px}.lf-scaffold .lf-content-wrapper .lf-content.lf-show-footer{min-height:100%}\n"] }]
+        }], propDecorators: { scrollContainer: [{
+                type: ViewChild,
+                args: ['scrollContainer', { static: true }]
+            }], content: [{
+                type: ViewChild,
+                args: ['content', { static: true }]
+            }], headerButtonClickEvent: [{
+                type: Output
+            }], headerInputSubmitEvent: [{
+                type: Output
+            }], headerInputChangeEvent: [{
+                type: Output
+            }], navbarButtonClickEvent: [{
+                type: Output
+            }], floatingButtonClickEvent: [{
+                type: Output
+            }], bottomBarButtonClickEvent: [{
+                type: Output
+            }] } });
+
+const CONFIG = new InjectionToken('config');
+class ScaffoldModule {
+    static forRoot(config) {
+        return {
+            ngModule: ScaffoldModule,
+            providers: [
+                { provide: CONFIG, useValue: config }
+            ]
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ScaffoldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.5", ngImport: i0, type: ScaffoldModule, declarations: [ScaffoldComponent,
+            LoadingOverlayComponent,
+            HeaderComponent,
+            NavbarComponent,
+            DrawerComponent,
+            FooterComponent,
+            ContentTitleCardComponent,
+            FloatingButtonComponent,
+            ConfirmDialogComponent,
+            BottomBarComponent], imports: [BrowserAnimationsModule,
+            RouterModule,
+            SharedModule,
+            InputComponent,
+            IconComponent], exports: [ScaffoldComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ScaffoldModule, imports: [BrowserAnimationsModule,
+            RouterModule,
+            SharedModule,
+            InputComponent,
+            IconComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ScaffoldModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        ScaffoldComponent,
+                        LoadingOverlayComponent,
+                        HeaderComponent,
+                        NavbarComponent,
+                        DrawerComponent,
+                        FooterComponent,
+                        ContentTitleCardComponent,
+                        FloatingButtonComponent,
+                        ConfirmDialogComponent,
+                        BottomBarComponent
+                    ],
+                    imports: [
+                        BrowserAnimationsModule,
+                        RouterModule,
+                        SharedModule,
+                        InputComponent,
+                        IconComponent
+                    ],
+                    exports: [
+                        ScaffoldComponent
+                    ]
+                }]
+        }] });
+
+class PlaceholderComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: PlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: PlaceholderComponent, isStandalone: true, selector: "lf-placeholder", inputs: { placeholderConfig: "placeholderConfig" }, ngImport: i0, template: "@if (placeholderConfig) {\r\n  <div class=\"lf-placeholder px-6 pt-2 pb-6\">\r\n    <!-- icon -->\r\n    <lf-icon\r\n      [matIcon]=\"placeholderConfig.matIcon!\"\r\n      [svgIcon]=\"placeholderConfig.svgIcon!\"\r\n      [outlineIcon]=\"placeholderConfig.outlineIcon!\"></lf-icon>\r\n    <!-- heading -->\r\n    @if (placeholderConfig.heading) {\r\n      <p class=\"lf-placeholder-heading\">\r\n        {{ placeholderConfig.heading }}\r\n      </p>\r\n    }\r\n    <!-- message -->\r\n    @if (placeholderConfig.message) {\r\n      <p class=\"lf-placeholder-message\" [class.mt-6]=\"placeholderConfig.heading\">\r\n        {{ placeholderConfig.message }}\r\n      </p>\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:128px;height:128px;font-size:128px;color:#808080cc}.lf-placeholder .lf-placeholder-heading{margin:0;font-size:48px;color:#808080cc}.lf-placeholder .lf-placeholder-message{margin:0;font-size:18px;color:#808080cc}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: IconComponent, selector: "lf-icon", inputs: ["matIcon", "svgIcon", "outlineIcon", "alignMiddle"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", 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 px-6 pt-2 pb-6\">\r\n    <!-- icon -->\r\n    <lf-icon\r\n      [matIcon]=\"placeholderConfig.matIcon!\"\r\n      [svgIcon]=\"placeholderConfig.svgIcon!\"\r\n      [outlineIcon]=\"placeholderConfig.outlineIcon!\"></lf-icon>\r\n    <!-- heading -->\r\n    @if (placeholderConfig.heading) {\r\n      <p class=\"lf-placeholder-heading\">\r\n        {{ placeholderConfig.heading }}\r\n      </p>\r\n    }\r\n    <!-- message -->\r\n    @if (placeholderConfig.message) {\r\n      <p class=\"lf-placeholder-message\" [class.mt-6]=\"placeholderConfig.heading\">\r\n        {{ placeholderConfig.message }}\r\n      </p>\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:128px;height:128px;font-size:128px;color:#808080cc}.lf-placeholder .lf-placeholder-heading{margin:0;font-size:48px;color:#808080cc}.lf-placeholder .lf-placeholder-message{margin:0;font-size:18px;color:#808080cc}\n"] }]
+        }], propDecorators: { placeholderConfig: [{
+                type: Input
+            }] } });
+
+class FileUploadComponent {
+    constructor() {
+        this.logger = inject(Logger);
+        this.color = 'primary';
+        this.disabled = false;
+        this.fileChange = new EventEmitter();
+    }
+    selectFile(event) {
+        const input = event.target;
+        if (!input || !input.files)
+            return;
+        const file = input.files[0];
+        if (!file)
+            return;
+        this.logger.log('[FileUploadComponent]', file);
+        this.fileChange.emit(file);
+    }
+    triggerInput() {
+        this.fileElement.nativeElement.click();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: FileUploadComponent, isStandalone: true, selector: "lf-file-upload", inputs: { color: "color", label: "label", matIcon: "matIcon", disabled: "disabled", accept: "accept", tooltip: "tooltip" }, outputs: { fileChange: "fileChange" }, viewQueries: [{ propertyName: "fileElement", first: true, predicate: ["file"], descendants: true }], ngImport: i0, template: "<input\r\n  hidden\r\n  #file\r\n  type=\"file\"\r\n  [accept]=\"accept\"\r\n  onclick=\"this.value=null\"\r\n  (change)=\"selectFile($event)\" />\r\n\r\n<button\r\n  mat-flat-button\r\n  class=\"lf-button\"\r\n  type=\"button\"\r\n  [color]=\"color\"\r\n  [disabled]=\"disabled\"\r\n  (click)=\"triggerInput()\"\r\n  [matTooltip]=\"tooltip\">\r\n  @if (matIcon) {\r\n    <mat-icon>{{ matIcon }}</mat-icon>\r\n  }\r\n  {{ label }}\r\n</button>\r\n", styles: [".lf-button{width:inherit}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: FileUploadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lf-file-upload', standalone: true, imports: [SharedModule], template: "<input\r\n  hidden\r\n  #file\r\n  type=\"file\"\r\n  [accept]=\"accept\"\r\n  onclick=\"this.value=null\"\r\n  (change)=\"selectFile($event)\" />\r\n\r\n<button\r\n  mat-flat-button\r\n  class=\"lf-button\"\r\n  type=\"button\"\r\n  [color]=\"color\"\r\n  [disabled]=\"disabled\"\r\n  (click)=\"triggerInput()\"\r\n  [matTooltip]=\"tooltip\">\r\n  @if (matIcon) {\r\n    <mat-icon>{{ matIcon }}</mat-icon>\r\n  }\r\n  {{ label }}\r\n</button>\r\n", styles: [".lf-button{width:inherit}\n"] }]
+        }], propDecorators: { fileElement: [{
+                type: ViewChild,
+                args: ['file']
+            }], color: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], matIcon: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], accept: [{
+                type: Input
+            }], tooltip: [{
+                type: Input
+            }], fileChange: [{
+                type: Output
+            }] } });
+
+class LoadingInterceptor {
+    constructor() {
+        this.scaffoldService = inject(ScaffoldService);
+        this.activeRequests = 0;
+        this.loadingDelay = 100; // milliseconds
+    }
+    intercept(req, next) {
+        this.activeRequests++;
+        // Set a delayed spinner timeout
+        if (this.activeRequests === 1) {
+            this.spinnerTimeout = setTimeout(() => {
+                this.scaffoldService.updateScaffoldProperty('loading', true);
+            }, this.loadingDelay);
+        }
+        return next.handle(req).pipe(
+        // tap({
+        //   next: (event) => {
+        //     if (event instanceof HttpResponse) {
+        //       // Successful response
+        //     }
+        //   },
+        //   error: (error: HttpErrorResponse) => {
+        //     // Handle error if needed
+        //   }
+        // }),
+        finalize(() => {
+            this.activeRequests--;
+            if (this.activeRequests === 0) {
+                // Clear any pending spinner timeout
+                clearTimeout(this.spinnerTimeout);
+                this.scaffoldService.updateScaffoldProperty('loading', false);
+            }
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: LoadingInterceptor, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: LoadingInterceptor }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: LoadingInterceptor, decorators: [{
+            type: Injectable
+        }] });
+
+/*
+ * Public API Surface of components
+ */
+/* MODELS */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BreakpointService, CONFIG, DialogService, FileUploadComponent, LoadingInterceptor, LocalStorageService, Logger, PlaceholderComponent, RouterService, ScaffoldComponent, ScaffoldModule, ScaffoldService, SeoService, SnackbarService, ThemeService };
+//# sourceMappingURL=lukfel-ng-scaffold.mjs.map