@lukfel/ng-scaffold 21.1.21 → 21.1.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/fesm2022/lukfel-ng-scaffold-confirm-dialog.component-B5MWYLUA.mjs +24 -0
  2. package/fesm2022/lukfel-ng-scaffold-confirm-dialog.component-B5MWYLUA.mjs.map +1 -0
  3. package/fesm2022/lukfel-ng-scaffold.mjs +234 -264
  4. package/fesm2022/lukfel-ng-scaffold.mjs.map +1 -1
  5. package/package.json +1 -1
  6. package/styles/_classes.scss +4 -0
  7. package/types/lukfel-ng-scaffold.d.ts +100 -100
  8. package/fesm2022/lukfel-ng-scaffold-confirm-dialog.component-D92LeRJW.mjs +0 -24
  9. package/fesm2022/lukfel-ng-scaffold-confirm-dialog.component-D92LeRJW.mjs.map +0 -1
package/fesm2022/lukfel-ng-scaffold.mjs CHANGED
@@ -1,18 +1,19 @@
1
1
  import * as i0 from '@angular/core';
2
- import { InjectionToken, makeEnvironmentProviders, inject, Injectable, PLATFORM_ID, DOCUMENT, input, output, Component, viewChild, computed, effect, TemplateRef, Directive, contentChild } from '@angular/core';
2
+ import { InjectionToken, makeEnvironmentProviders, inject, Injectable, PLATFORM_ID, DOCUMENT, input, output, ChangeDetectionStrategy, Component, viewChild, computed, model, effect, signal, TemplateRef, Directive, contentChild } from '@angular/core';
3
3
  import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
4
4
  import * as i1 from '@angular/common';
5
5
  import { isPlatformBrowser, CommonModule } from '@angular/common';
6
+ import { toSignal } from '@angular/core/rxjs-interop';
6
7
  import * as i2$3 from '@angular/router';
7
8
  import { Router, RouteConfigLoadStart, RouteConfigLoadEnd, NavigationEnd, RouterModule, ActivatedRoute } from '@angular/router';
8
- import { distinctUntilChanged, firstValueFrom, BehaviorSubject, take, Subscription, fromEvent, debounceTime, finalize } from 'rxjs';
9
+ import { distinctUntilChanged, firstValueFrom, BehaviorSubject, take, tap, map, Subscription, fromEvent, debounceTime, finalize } from 'rxjs';
9
10
  import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
10
11
  import { Overlay } from '@angular/cdk/overlay';
11
12
  import * as i2$2 from '@angular/cdk/portal';
12
13
  import { ComponentPortal, PortalModule } from '@angular/cdk/portal';
13
14
  import { Title, Meta } from '@angular/platform-browser';
14
15
  import { MatSnackBar } from '@angular/material/snack-bar';
15
- import { trigger, state, transition, style, animate } from '@angular/animations';
16
+ import { trigger, state, style, transition, animate } from '@angular/animations';
16
17
  import * as i2 from '@angular/material/button';
17
18
  import { MatButtonModule } from '@angular/material/button';
18
19
  import * as i3 from '@angular/material/icon';
@@ -59,10 +60,10 @@ class BreakpointService {
59
60
  .observe([Breakpoints.Large, Breakpoints.Medium, Breakpoints.Small, Breakpoints.XSmall])
60
61
  .pipe(distinctUntilChanged());
61
62
  }
62
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: BreakpointService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
63
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: BreakpointService, providedIn: 'root' }); }
63
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: BreakpointService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
64
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: BreakpointService, providedIn: 'root' }); }
64
65
  }
65
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: BreakpointService, decorators: [{
66
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: BreakpointService, decorators: [{
66
67
  type: Injectable,
67
68
  args: [{ providedIn: 'root' }]
68
69
  }] });
@@ -89,7 +90,7 @@ class DialogService {
89
90
  * @returns an asynchronous boolean response
90
91
  */
91
92
  async openConfirmDialog(config) {
92
- const { ConfirmDialogComponent } = await import('./lukfel-ng-scaffold-confirm-dialog.component-D92LeRJW.mjs');
93
+ const { ConfirmDialogComponent } = await import('./lukfel-ng-scaffold-confirm-dialog.component-B5MWYLUA.mjs');
93
94
  const dialogRef = this.matDialog.open(ConfirmDialogComponent, {
94
95
  autoFocus: false,
95
96
  maxWidth: '368px',
@@ -113,10 +114,10 @@ class DialogService {
113
114
  });
114
115
  return firstValueFrom(dialogRef.afterClosed());
115
116
  }
116
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
117
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DialogService, providedIn: 'root' }); }
117
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
118
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DialogService, providedIn: 'root' }); }
118
119
  }
119
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DialogService, decorators: [{
120
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DialogService, decorators: [{
120
121
  type: Injectable,
121
122
  args: [{
122
123
  providedIn: 'root'
@@ -160,10 +161,10 @@ class Logger {
160
161
  console.error(message, ...args); // eslint-disable-line no-console
161
162
  }
162
163
  }
163
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: Logger, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
164
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: Logger, providedIn: 'root' }); }
164
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: Logger, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
165
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: Logger, providedIn: 'root' }); }
165
166
  }
166
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: Logger, decorators: [{
167
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: Logger, decorators: [{
167
168
  type: Injectable,
168
169
  args: [{ providedIn: 'root' }]
169
170
  }] });
@@ -304,10 +305,10 @@ class LocalStorageService {
304
305
  }
305
306
  return value;
306
307
  }
307
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: LocalStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
308
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: LocalStorageService, providedIn: 'root' }); }
308
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: LocalStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
309
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: LocalStorageService, providedIn: 'root' }); }
309
310
  }
310
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: LocalStorageService, decorators: [{
311
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: LocalStorageService, decorators: [{
311
312
  type: Injectable,
312
313
  args: [{
313
314
  providedIn: 'root'
@@ -343,10 +344,10 @@ class OverlayService {
343
344
  this.overlayRef.dispose();
344
345
  this.overlayRef = null;
345
346
  }
346
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: OverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
347
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: OverlayService, providedIn: 'root' }); }
347
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: OverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
348
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: OverlayService, providedIn: 'root' }); }
348
349
  }
349
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: OverlayService, decorators: [{
350
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: OverlayService, decorators: [{
350
351
  type: Injectable,
351
352
  args: [{
352
353
  providedIn: 'root'
@@ -434,10 +435,10 @@ class RouterService {
434
435
  clearRouteHistory() {
435
436
  this._routeHistory$.next([]);
436
437
  }
437
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: RouterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
438
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: RouterService, providedIn: 'root' }); }
438
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: RouterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
439
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: RouterService, providedIn: 'root' }); }
439
440
  }
440
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: RouterService, decorators: [{
441
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: RouterService, decorators: [{
441
442
  type: Injectable,
442
443
  args: [{ providedIn: 'root' }]
443
444
  }], ctorParameters: () => [] });
@@ -506,10 +507,10 @@ class ScaffoldService {
506
507
  this.logger.log(`[UPDATE] ScaffoldConfig.${property}`, newValue);
507
508
  this._scaffoldConfig$.next({ ...currentState, [property]: newValue });
508
509
  }
509
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ScaffoldService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
510
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ScaffoldService, providedIn: 'root' }); }
510
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ScaffoldService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
511
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ScaffoldService, providedIn: 'root' }); }
511
512
  }
512
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ScaffoldService, decorators: [{
513
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ScaffoldService, decorators: [{
513
514
  type: Injectable,
514
515
  args: [{ providedIn: 'root' }]
515
516
  }] });
@@ -579,10 +580,10 @@ class SeoService {
579
580
  this.metaTags.updateTag({ property: 'og:image', content: image });
580
581
  this.metaTags.updateTag({ name: 'twitter:image', content: image });
581
582
  }
582
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SeoService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
583
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SeoService, providedIn: 'root' }); }
583
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SeoService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
584
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SeoService, providedIn: 'root' }); }
584
585
  }
585
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SeoService, decorators: [{
586
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SeoService, decorators: [{
586
587
  type: Injectable,
587
588
  args: [{
588
589
  providedIn: 'root'
@@ -614,10 +615,10 @@ class SnackbarService {
614
615
  const snackbarRef = this.snackbar.open(message, action, config ? config : this.actionConfig);
615
616
  return firstValueFrom(snackbarRef.onAction());
616
617
  }
617
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SnackbarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
618
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SnackbarService, providedIn: 'root' }); }
618
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SnackbarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
619
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SnackbarService, providedIn: 'root' }); }
619
620
  }
620
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SnackbarService, decorators: [{
621
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SnackbarService, decorators: [{
621
622
  type: Injectable,
622
623
  args: [{
623
624
  providedIn: 'root'
@@ -673,10 +674,10 @@ class ThemeService {
673
674
  }
674
675
  this.setTheme(theme.replace(/"/g, ''));
675
676
  }
676
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
677
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ThemeService, providedIn: 'root' }); }
677
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
678
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ThemeService, providedIn: 'root' }); }
678
679
  }
679
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ThemeService, decorators: [{
680
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ThemeService, decorators: [{
680
681
  type: Injectable,
681
682
  args: [{
682
683
  providedIn: 'root'
@@ -701,19 +702,19 @@ class BottomBarComponent {
701
702
  closeClicked(closeButtonId) {
702
703
  this.bottomBarCloseClickEvent.emit(closeButtonId);
703
704
  }
704
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: BottomBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
705
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: BottomBarComponent, isStandalone: true, selector: "lf-bottom-bar", inputs: { libraryConfig: { classPropertyName: "libraryConfig", publicName: "libraryConfig", isSignal: true, isRequired: false, transformFunction: null }, bottomBarConfig: { classPropertyName: "bottomBarConfig", publicName: "bottomBarConfig", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, navbarEnabled: { classPropertyName: "navbarEnabled", publicName: "navbarEnabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { bottomBarCloseClickEvent: "bottomBarCloseClickEvent", bottomBarButtonClickEvent: "bottomBarButtonClickEvent" }, ngImport: i0, template: "@if (bottomBarConfig(); as config) {\r\n @if (config.enable) {\r\n <div\r\n [@slideUpDown]\r\n class=\"lf-bottom-bar lf-transitions px-4\"\r\n [ngClass]=\"config.cssClass\"\r\n [class.lf-bottom-bar-show-navbar]=\"!isMobile() && navbarEnabled()\"\r\n [class.lf-bottom-bar-show-navbar-mobile]=\"isMobile() && navbarEnabled()\">\r\n @if (config.closeButtonId) {\r\n <button mat-icon-button (click)=\"closeClicked(config.closeButtonId)\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n }\r\n @if (config.message) {\r\n <span class=\"ml-2\">{{ config.message }}</span>\r\n }\r\n @if (config.buttons) {\r\n <div class=\"lf-bottom-bar-buttons ml-4\">\r\n @for (button of config.buttons; track button.id) {\r\n <!-- label button -->\r\n @if (button.label) {\r\n <button\r\n mat-button\r\n class=\"lf-bottom-bar-button ml-2\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"button.disabled\"\r\n (click)=\"buttonClicked(button.id)\"\r\n [matTooltip]=\"button.tooltip\">\r\n <!-- icon -->\r\n <!-- icon -->\r\n @if (button.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig()?.outlineIcons\">\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n } @else if (button.svgIcon) {\r\n <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n }\r\n <!-- label -->\r\n {{ button.label }}\r\n </button>\r\n <!-- icon button -->\r\n } @else {\r\n <button\r\n mat-icon-button\r\n color=\"accent\"\r\n class=\"lf-bottom-bar-button-icon ml-2\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"button.disabled\"\r\n (click)=\"buttonClicked(button.id)\"\r\n [matTooltip]=\"button.tooltip\">\r\n <!-- icon -->\r\n @if (button.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig()?.outlineIcons\">\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n } @else if (button.svgIcon) {\r\n <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n }\r\n </button>\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n}\r\n", styles: [".lf-bottom-bar{z-index:var(--bottom-bar-z-index);position:fixed;left:0;bottom:0;right:0;height:var(--bottom-bar-height);display:flex;align-items:center;box-sizing:border-box;background-color:var(--color-accent);color:#fff}.lf-bottom-bar.lf-bottom-bar-show-navbar-mobile{bottom:calc(var(--navbar-height-mobile) + 2 * var(--navbar-padding))!important}.lf-bottom-bar.lf-bottom-bar-show-navbar{left:calc(var(--navbar-width) + 2 * var(--navbar-padding))!important}.lf-bottom-bar .lf-bottom-bar-buttons{display:flex;align-items:center}.lf-bottom-bar .lf-bottom-bar-buttons .lf-bottom-bar-button{color:var(--color-accent)!important;background-color:#fff!important}.lf-bottom-bar .lf-bottom-bar-buttons .lf-bottom-bar-button-icon{color:#fff!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { 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: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], animations: [
705
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: BottomBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
706
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: BottomBarComponent, isStandalone: true, selector: "lf-bottom-bar", inputs: { libraryConfig: { classPropertyName: "libraryConfig", publicName: "libraryConfig", isSignal: true, isRequired: false, transformFunction: null }, bottomBarConfig: { classPropertyName: "bottomBarConfig", publicName: "bottomBarConfig", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, navbarEnabled: { classPropertyName: "navbarEnabled", publicName: "navbarEnabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { bottomBarCloseClickEvent: "bottomBarCloseClickEvent", bottomBarButtonClickEvent: "bottomBarButtonClickEvent" }, ngImport: i0, template: "@if (bottomBarConfig(); as config) {\r\n @if (config.enable) {\r\n <div\r\n [@slideUpDown]\r\n class=\"lf-bottom-bar lf-transitions px-4\"\r\n [ngClass]=\"config.cssClass\"\r\n [class.lf-bottom-bar-show-navbar]=\"!isMobile() && navbarEnabled()\"\r\n [class.lf-bottom-bar-show-navbar-mobile]=\"isMobile() && navbarEnabled()\">\r\n @if (config.closeButtonId) {\r\n <button mat-icon-button (click)=\"closeClicked(config.closeButtonId)\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n }\r\n @if (config.message) {\r\n <span class=\"ml-2\">{{ config.message }}</span>\r\n }\r\n @if (config.buttons) {\r\n <div class=\"lf-bottom-bar-buttons ml-4\">\r\n @for (button of config.buttons; track button.id) {\r\n <!-- label button -->\r\n @if (button.label) {\r\n <button\r\n mat-button\r\n class=\"lf-bottom-bar-button ml-2\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"button.disabled\"\r\n (click)=\"buttonClicked(button.id)\"\r\n [matTooltip]=\"button.tooltip\">\r\n <!-- icon -->\r\n <!-- icon -->\r\n @if (button.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig()?.outlineIcons\">\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n } @else if (button.svgIcon) {\r\n <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n }\r\n <!-- label -->\r\n {{ button.label }}\r\n </button>\r\n <!-- icon button -->\r\n } @else {\r\n <button\r\n mat-icon-button\r\n color=\"accent\"\r\n class=\"lf-bottom-bar-button-icon ml-2\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"button.disabled\"\r\n (click)=\"buttonClicked(button.id)\"\r\n [matTooltip]=\"button.tooltip\">\r\n <!-- icon -->\r\n @if (button.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig()?.outlineIcons\">\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n } @else if (button.svgIcon) {\r\n <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n }\r\n </button>\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n}\r\n", styles: [".lf-bottom-bar{z-index:var(--bottom-bar-z-index);position:fixed;left:0;bottom:0;right:0;height:var(--bottom-bar-height);display:flex;align-items:center;box-sizing:border-box;background-color:var(--color-accent);color:#fff}.lf-bottom-bar.lf-bottom-bar-show-navbar-mobile{bottom:calc(var(--navbar-height-mobile) + 2 * var(--navbar-padding))!important}.lf-bottom-bar.lf-bottom-bar-show-navbar{left:calc(var(--navbar-width) + 2 * var(--navbar-padding))!important}.lf-bottom-bar .lf-bottom-bar-buttons{display:flex;align-items:center}.lf-bottom-bar .lf-bottom-bar-buttons .lf-bottom-bar-button{color:var(--color-accent)!important;background-color:#fff!important}.lf-bottom-bar .lf-bottom-bar-buttons .lf-bottom-bar-button-icon{color:#fff!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { 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: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], animations: [
706
707
  trigger('slideUpDown', [
707
708
  state('void', style({ transform: 'translateY(100%)' })),
708
709
  state('*', style({ transform: 'translateY(0)' })),
709
710
  transition(':enter', [style({ transform: 'translateY(100%)' }), animate('200ms linear')]),
710
711
  transition(':leave', [animate('200ms linear', style({ transform: 'translateY(100%)' }))])
711
712
  ])
712
- ] }); }
713
+ ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
713
714
  }
714
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: BottomBarComponent, decorators: [{
715
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: BottomBarComponent, decorators: [{
715
716
  type: Component,
716
- args: [{ selector: 'lf-bottom-bar', animations: [
717
+ args: [{ selector: 'lf-bottom-bar', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
717
718
  trigger('slideUpDown', [
718
719
  state('void', style({ transform: 'translateY(100%)' })),
719
720
  state('*', style({ transform: 'translateY(0)' })),
@@ -739,12 +740,12 @@ class ContentTitleCardComponent {
739
740
  backButtonClicked() {
740
741
  this.backButtonClickEvent.emit();
741
742
  }
742
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ContentTitleCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
743
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: ContentTitleCardComponent, isStandalone: true, selector: "lf-content-title-card", inputs: { libraryConfig: { classPropertyName: "libraryConfig", publicName: "libraryConfig", isSignal: true, isRequired: false, transformFunction: null }, contentTitleCardConfig: { classPropertyName: "contentTitleCardConfig", publicName: "contentTitleCardConfig", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, routeHistory: { classPropertyName: "routeHistory", publicName: "routeHistory", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { backButtonClickEvent: "backButtonClickEvent" }, ngImport: i0, template: "@if (contentTitleCardConfig(); as config) {\r\n @if (config.enable) {\r\n <mat-card class=\"lf-content-title-card mat-elevation-z2 px-4\" [ngClass]=\"config.cssClass\">\r\n <!-- back button -->\r\n @if (config.showBackButton && routeHistory().length > 0) {\r\n <button mat-icon-button color=\"accent\" (click)=\"backButtonClicked()\">\r\n <mat-icon>arrow_back_ios</mat-icon>\r\n </button>\r\n }\r\n <!-- spacer -->\r\n <div style=\"flex: 1 1 auto\"></div>\r\n <!-- label -->\r\n <span class=\"lf-content-title-card-label\">\r\n {{ config.label || \"\" }}\r\n </span>\r\n <!-- spacer -->\r\n <div style=\"flex: 1 1 auto\"></div>\r\n <!-- empty button spacer -->\r\n <div\r\n [style.width]=\"config.showBackButton && routeHistory().length > 1 ? '48px' : '0px'\"></div>\r\n </mat-card>\r\n }\r\n}\r\n", styles: [".lf-content-title-card{z-index:var(--content-title-card-z-index);height:var(--content-title-card-height);display:flex;flex-flow:row nowrap;align-items:center;border-radius:0}.lf-content-title-card .lf-content-title-card-label{font-size:var(--content-title-card-labe-font-size);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
743
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ContentTitleCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
744
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ContentTitleCardComponent, isStandalone: true, selector: "lf-content-title-card", inputs: { libraryConfig: { classPropertyName: "libraryConfig", publicName: "libraryConfig", isSignal: true, isRequired: false, transformFunction: null }, contentTitleCardConfig: { classPropertyName: "contentTitleCardConfig", publicName: "contentTitleCardConfig", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, routeHistory: { classPropertyName: "routeHistory", publicName: "routeHistory", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { backButtonClickEvent: "backButtonClickEvent" }, ngImport: i0, template: "@if (contentTitleCardConfig(); as config) {\r\n @if (config.enable) {\r\n <mat-card class=\"lf-content-title-card mat-elevation-z2 px-4\" [ngClass]=\"config.cssClass\">\r\n <!-- back button -->\r\n @if (config.showBackButton && routeHistory().length > 0) {\r\n <button mat-icon-button color=\"accent\" (click)=\"backButtonClicked()\">\r\n <mat-icon>arrow_back_ios</mat-icon>\r\n </button>\r\n }\r\n <!-- spacer -->\r\n <div style=\"flex: 1 1 auto\"></div>\r\n <!-- label -->\r\n <span class=\"lf-content-title-card-label\">\r\n {{ config.label || \"\" }}\r\n </span>\r\n <!-- spacer -->\r\n <div style=\"flex: 1 1 auto\"></div>\r\n <!-- empty button spacer -->\r\n <div\r\n [style.width]=\"config.showBackButton && routeHistory().length > 1 ? '48px' : '0px'\"></div>\r\n </mat-card>\r\n }\r\n}\r\n", styles: [".lf-content-title-card{z-index:var(--content-title-card-z-index);height:var(--content-title-card-height);display:flex;flex-flow:row nowrap;align-items:center;border-radius:0}.lf-content-title-card .lf-content-title-card-label{font-size:var(--content-title-card-labe-font-size);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
744
745
  }
745
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ContentTitleCardComponent, decorators: [{
746
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ContentTitleCardComponent, decorators: [{
746
747
  type: Component,
747
- args: [{ selector: 'lf-content-title-card', standalone: true, imports: [
748
+ args: [{ selector: 'lf-content-title-card', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
748
749
  CommonModule,
749
750
  MatCardModule,
750
751
  MatButtonModule,
@@ -775,16 +776,16 @@ class DrawerComponent {
775
776
  }
776
777
  ;
777
778
  }
778
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
779
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: DrawerComponent, isStandalone: true, selector: "lf-drawer", inputs: { libraryConfig: { classPropertyName: "libraryConfig", publicName: "libraryConfig", isSignal: true, isRequired: false, transformFunction: null }, drawerConfig: { classPropertyName: "drawerConfig", publicName: "drawerConfig", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, headerEnabled: { classPropertyName: "headerEnabled", publicName: "headerEnabled", isSignal: true, isRequired: false, transformFunction: null }, drawerPortal: { classPropertyName: "drawerPortal", publicName: "drawerPortal", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { drawerConfigUpdateEvent: "drawerConfigUpdateEvent" }, ngImport: i0, template: "@if (drawerConfig(); as config) {\r\n @if (config.enable) {\r\n <mat-sidenav-container class=\"lf-drawer-container lf-transitions\" [ngClass]=\"config.cssClass\">\r\n <!-- drawer -->\r\n <mat-sidenav\r\n class=\"lf-drawer mat-elevation-z2\"\r\n [class.mobile]=\"isMobile()\"\r\n [mode]=\"isMobile() ? 'over' : 'side'\"\r\n [opened]=\"config.open\"\r\n [autoFocus]=\"false\"\r\n [fixedInViewport]=\"config.fixed\"\r\n [class.lf-drawer-show-header]=\"headerEnabled() && config.fixed\"\r\n (closed)=\"drawerClosed()\"\r\n #drawer>\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 style=\"overflow: unset !important\">\r\n <!-- main content -->\r\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n </mat-sidenav-content>\r\n </mat-sidenav-container>\r\n } @else {\r\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n }\r\n} @else {\r\n <!-- render content without drawer -->\r\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n}\r\n\r\n<!-- this template is required to allow multiple <ng-content></ng-content> -->\r\n<ng-template #content><ng-content></ng-content></ng-template>\r\n", styles: [".lf-drawer-container{z-index:unset!important;overflow:unset!important}.lf-drawer-container .lf-drawer{z-index:var(--drawer-z-index);width:var(--drawer-width)}.lf-drawer-container .lf-drawer.mobile{z-index:var(--drawer-z-index-mobile)}.lf-drawer-container .lf-drawer.lf-drawer-show-header{top:var(--header-height)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i2$2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i3$1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i3$1.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i3$1.MatSidenavContent, selector: "mat-sidenav-content" }] }); }
779
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
780
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: DrawerComponent, isStandalone: true, selector: "lf-drawer", inputs: { libraryConfig: { classPropertyName: "libraryConfig", publicName: "libraryConfig", isSignal: true, isRequired: false, transformFunction: null }, drawerConfig: { classPropertyName: "drawerConfig", publicName: "drawerConfig", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, headerEnabled: { classPropertyName: "headerEnabled", publicName: "headerEnabled", isSignal: true, isRequired: false, transformFunction: null }, drawerPortal: { classPropertyName: "drawerPortal", publicName: "drawerPortal", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { drawerConfigUpdateEvent: "drawerConfigUpdateEvent" }, ngImport: i0, template: "@if (drawerConfig(); as config) {\r\n @if (config.enable) {\r\n <mat-sidenav-container class=\"lf-drawer-container lf-transitions\" [ngClass]=\"config.cssClass\">\r\n <!-- drawer -->\r\n <mat-sidenav\r\n #drawer\r\n class=\"lf-drawer mat-elevation-z2\"\r\n [class.mobile]=\"isMobile()\"\r\n [mode]=\"isMobile() ? 'over' : 'side'\"\r\n [opened]=\"config.open\"\r\n [autoFocus]=\"false\"\r\n [fixedInViewport]=\"config.fixed\"\r\n [class.lf-drawer-show-header]=\"headerEnabled() && config.fixed\"\r\n (closed)=\"drawerClosed()\">\r\n <!-- drawer content -->\r\n <!-- <ng-content select=\"[drawerContent]\"></ng-content> -->\r\n @if (drawerPortal()) {\r\n <ng-template [cdkPortalOutlet]=\"drawerPortal()\"></ng-template>\r\n } @else {\r\n <ng-content select=\"[drawerContent]\"></ng-content>\r\n }\r\n </mat-sidenav>\r\n <mat-sidenav-content style=\"overflow: unset !important\">\r\n <!-- main content -->\r\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n </mat-sidenav-content>\r\n </mat-sidenav-container>\r\n } @else {\r\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n }\r\n} @else {\r\n <!-- render content without drawer -->\r\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n}\r\n\r\n<!-- this template is required to allow multiple <ng-content></ng-content> -->\r\n<ng-template #content><ng-content></ng-content></ng-template>\r\n", styles: [".lf-drawer-container{z-index:unset!important;overflow:unset!important}.lf-drawer-container .lf-drawer{z-index:var(--drawer-z-index);width:var(--drawer-width)}.lf-drawer-container .lf-drawer.mobile{z-index:var(--drawer-z-index-mobile)}.lf-drawer-container .lf-drawer.lf-drawer-show-header{top:var(--header-height)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i2$2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i3$1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i3$1.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i3$1.MatSidenavContent, selector: "mat-sidenav-content" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
780
781
  }
781
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DrawerComponent, decorators: [{
782
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DrawerComponent, decorators: [{
782
783
  type: Component,
783
- args: [{ selector: 'lf-drawer', standalone: true, imports: [
784
+ args: [{ selector: 'lf-drawer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
784
785
  CommonModule,
785
786
  PortalModule,
786
787
  MatSidenavModule
787
- ], template: "@if (drawerConfig(); as config) {\r\n @if (config.enable) {\r\n <mat-sidenav-container class=\"lf-drawer-container lf-transitions\" [ngClass]=\"config.cssClass\">\r\n <!-- drawer -->\r\n <mat-sidenav\r\n class=\"lf-drawer mat-elevation-z2\"\r\n [class.mobile]=\"isMobile()\"\r\n [mode]=\"isMobile() ? 'over' : 'side'\"\r\n [opened]=\"config.open\"\r\n [autoFocus]=\"false\"\r\n [fixedInViewport]=\"config.fixed\"\r\n [class.lf-drawer-show-header]=\"headerEnabled() && config.fixed\"\r\n (closed)=\"drawerClosed()\"\r\n #drawer>\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 style=\"overflow: unset !important\">\r\n <!-- main content -->\r\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n </mat-sidenav-content>\r\n </mat-sidenav-container>\r\n } @else {\r\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n }\r\n} @else {\r\n <!-- render content without drawer -->\r\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n}\r\n\r\n<!-- this template is required to allow multiple <ng-content></ng-content> -->\r\n<ng-template #content><ng-content></ng-content></ng-template>\r\n", styles: [".lf-drawer-container{z-index:unset!important;overflow:unset!important}.lf-drawer-container .lf-drawer{z-index:var(--drawer-z-index);width:var(--drawer-width)}.lf-drawer-container .lf-drawer.mobile{z-index:var(--drawer-z-index-mobile)}.lf-drawer-container .lf-drawer.lf-drawer-show-header{top:var(--header-height)!important}\n"] }]
788
+ ], template: "@if (drawerConfig(); as config) {\r\n @if (config.enable) {\r\n <mat-sidenav-container class=\"lf-drawer-container lf-transitions\" [ngClass]=\"config.cssClass\">\r\n <!-- drawer -->\r\n <mat-sidenav\r\n #drawer\r\n class=\"lf-drawer mat-elevation-z2\"\r\n [class.mobile]=\"isMobile()\"\r\n [mode]=\"isMobile() ? 'over' : 'side'\"\r\n [opened]=\"config.open\"\r\n [autoFocus]=\"false\"\r\n [fixedInViewport]=\"config.fixed\"\r\n [class.lf-drawer-show-header]=\"headerEnabled() && config.fixed\"\r\n (closed)=\"drawerClosed()\">\r\n <!-- drawer content -->\r\n <!-- <ng-content select=\"[drawerContent]\"></ng-content> -->\r\n @if (drawerPortal()) {\r\n <ng-template [cdkPortalOutlet]=\"drawerPortal()\"></ng-template>\r\n } @else {\r\n <ng-content select=\"[drawerContent]\"></ng-content>\r\n }\r\n </mat-sidenav>\r\n <mat-sidenav-content style=\"overflow: unset !important\">\r\n <!-- main content -->\r\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n </mat-sidenav-content>\r\n </mat-sidenav-container>\r\n } @else {\r\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n }\r\n} @else {\r\n <!-- render content without drawer -->\r\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n}\r\n\r\n<!-- this template is required to allow multiple <ng-content></ng-content> -->\r\n<ng-template #content><ng-content></ng-content></ng-template>\r\n", styles: [".lf-drawer-container{z-index:unset!important;overflow:unset!important}.lf-drawer-container .lf-drawer{z-index:var(--drawer-z-index);width:var(--drawer-width)}.lf-drawer-container .lf-drawer.mobile{z-index:var(--drawer-z-index-mobile)}.lf-drawer-container .lf-drawer.lf-drawer-show-header{top:var(--header-height)!important}\n"] }]
788
789
  }], propDecorators: { libraryConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "libraryConfig", required: false }] }], drawerConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerConfig", required: false }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], headerEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerEnabled", required: false }] }], drawerPortal: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerPortal", required: false }] }], drawerConfigUpdateEvent: [{ type: i0.Output, args: ["drawerConfigUpdateEvent"] }] } });
789
790
 
790
791
  class FloatingButtonComponent {
@@ -812,12 +813,12 @@ class FloatingButtonComponent {
812
813
  buttonClicked(id) {
813
814
  this.floatingButtonClickEvent.emit(id || '');
814
815
  }
815
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: FloatingButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
816
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: FloatingButtonComponent, isStandalone: true, selector: "lf-floating-button", inputs: { libraryConfig: { classPropertyName: "libraryConfig", publicName: "libraryConfig", isSignal: true, isRequired: false, transformFunction: null }, floatingButtonConfig: { classPropertyName: "floatingButtonConfig", publicName: "floatingButtonConfig", isSignal: true, isRequired: false, transformFunction: null }, onTop: { classPropertyName: "onTop", publicName: "onTop", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, bottomBarEnabled: { classPropertyName: "bottomBarEnabled", publicName: "bottomBarEnabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { floatingButtonConfigUpdateEvent: "floatingButtonConfigUpdateEvent", floatingButtonClickEvent: "floatingButtonClickEvent" }, ngImport: i0, template: "@if (floatingButtonConfig(); as config) {\r\n @if (config.enable && (!config.autoHide || !onTop())) {\r\n <button\r\n mat-fab\r\n color=\"accent\"\r\n class=\"lf-floating-button lf-transitions\"\r\n [ngClass]=\"config.cssClass + ' ' + config.horizontalPosition\"\r\n [class.sticky]=\"config.sticky\"\r\n [class.show-navbar]=\"isMobile() && !bottomBarEnabled()\"\r\n [class.show-bottom-bar]=\"bottomBarEnabled() && !isMobile()\"\r\n [class.show-navbar-and-bottom-bar]=\"isMobile() && bottomBarEnabled()\"\r\n [extended]=\"!!config.label\"\r\n [disabled]=\"config.disabled\"\r\n (click)=\"buttonClicked(config.id)\"\r\n [matTooltip]=\"config.tooltip!\">\r\n <!-- icon -->\r\n @if (config.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig()?.outlineIcons\">\r\n {{ config.matIcon }}\r\n </mat-icon>\r\n } @else if (config.svgIcon) {\r\n <mat-icon [svgIcon]=\"config.svgIcon\"></mat-icon>\r\n }\r\n <!-- svg icon -->\r\n <!-- label -->\r\n @if (config.label) {\r\n <span class=\"lf-floating-button-label\">\r\n {{ config.label }}\r\n </span>\r\n }\r\n </button>\r\n }\r\n}\r\n", styles: [".lf-floating-button{z-index:var(--floating-button-z-index);position:fixed;bottom:var(--floating-button-bottom)}.lf-floating-button.sticky{position:sticky!important}.lf-floating-button.sticky.show-bottom-bar,.lf-floating-button.sticky.show-navbar-and-bottom-bar{bottom:calc(var(--floating-button-bottom) + var(--bottom-bar-height))}.lf-floating-button.sticky.center{left:50%;transform:translate(-50%)}.lf-floating-button.sticky.right{left:100%}.lf-floating-button:not(.sticky).show-navbar{bottom:calc(var(--floating-button-bottom) + var(--navbar-height-mobile))}.lf-floating-button:not(.sticky).show-bottom-bar{bottom:calc(var(--floating-button-bottom) + var(--bottom-bar-height))}.lf-floating-button:not(.sticky).show-navbar-and-bottom-bar{bottom:calc(var(--floating-button-bottom) + var(--navbar-height-mobile) + var(--bottom-bar-height))}.lf-floating-button:not(.sticky).center{left:50%;transform:translate(-50%)}.lf-floating-button:not(.sticky).right{left:calc(100% - var(--floating-button-right));transform:translate(-100%)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
816
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FloatingButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
817
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: FloatingButtonComponent, isStandalone: true, selector: "lf-floating-button", inputs: { libraryConfig: { classPropertyName: "libraryConfig", publicName: "libraryConfig", isSignal: true, isRequired: false, transformFunction: null }, floatingButtonConfig: { classPropertyName: "floatingButtonConfig", publicName: "floatingButtonConfig", isSignal: true, isRequired: false, transformFunction: null }, onTop: { classPropertyName: "onTop", publicName: "onTop", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, bottomBarEnabled: { classPropertyName: "bottomBarEnabled", publicName: "bottomBarEnabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { floatingButtonConfigUpdateEvent: "floatingButtonConfigUpdateEvent", floatingButtonClickEvent: "floatingButtonClickEvent" }, ngImport: i0, template: "@if (floatingButtonConfig(); as config) {\r\n @if (config.enable && (!config.autoHide || !onTop())) {\r\n <button\r\n mat-fab\r\n color=\"accent\"\r\n class=\"lf-floating-button lf-transitions\"\r\n [ngClass]=\"config.cssClass + ' ' + config.horizontalPosition\"\r\n [class.sticky]=\"config.sticky\"\r\n [class.show-navbar]=\"isMobile() && !bottomBarEnabled()\"\r\n [class.show-bottom-bar]=\"bottomBarEnabled() && !isMobile()\"\r\n [class.show-navbar-and-bottom-bar]=\"isMobile() && bottomBarEnabled()\"\r\n [extended]=\"!!config.label\"\r\n [disabled]=\"config.disabled\"\r\n (click)=\"buttonClicked(config.id)\"\r\n [matTooltip]=\"config.tooltip!\">\r\n <!-- icon -->\r\n @if (config.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig()?.outlineIcons\">\r\n {{ config.matIcon }}\r\n </mat-icon>\r\n } @else if (config.svgIcon) {\r\n <mat-icon [svgIcon]=\"config.svgIcon\"></mat-icon>\r\n }\r\n <!-- svg icon -->\r\n <!-- label -->\r\n @if (config.label) {\r\n <span class=\"lf-floating-button-label\">\r\n {{ config.label }}\r\n </span>\r\n }\r\n </button>\r\n }\r\n}\r\n", styles: [".lf-floating-button{z-index:var(--floating-button-z-index);position:fixed;bottom:var(--floating-button-bottom)}.lf-floating-button.sticky{position:sticky!important}.lf-floating-button.sticky.show-bottom-bar,.lf-floating-button.sticky.show-navbar-and-bottom-bar{bottom:calc(var(--floating-button-bottom) + var(--bottom-bar-height))}.lf-floating-button.sticky.center{left:50%;transform:translate(-50%)}.lf-floating-button.sticky.right{left:100%}.lf-floating-button:not(.sticky).show-navbar{bottom:calc(var(--floating-button-bottom) + var(--navbar-height-mobile))}.lf-floating-button:not(.sticky).show-bottom-bar{bottom:calc(var(--floating-button-bottom) + var(--bottom-bar-height))}.lf-floating-button:not(.sticky).show-navbar-and-bottom-bar{bottom:calc(var(--floating-button-bottom) + var(--navbar-height-mobile) + var(--bottom-bar-height))}.lf-floating-button:not(.sticky).center{left:50%;transform:translate(-50%)}.lf-floating-button:not(.sticky).right{left:calc(100% - var(--floating-button-right));transform:translate(-100%)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
817
818
  }
818
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: FloatingButtonComponent, decorators: [{
819
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FloatingButtonComponent, decorators: [{
819
820
  type: Component,
820
- args: [{ selector: 'lf-floating-button', standalone: true, imports: [
821
+ args: [{ selector: 'lf-floating-button', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
821
822
  CommonModule,
822
823
  MatButtonModule,
823
824
  MatIconModule,
@@ -830,12 +831,12 @@ class FooterComponent {
830
831
  this.libraryConfig = input(null, ...(ngDevMode ? [{ debugName: "libraryConfig" }] : []));
831
832
  this.footerConfig = input(null, ...(ngDevMode ? [{ debugName: "footerConfig" }] : []));
832
833
  }
833
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
834
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: FooterComponent, isStandalone: true, selector: "lf-footer", inputs: { libraryConfig: { classPropertyName: "libraryConfig", publicName: "libraryConfig", isSignal: true, isRequired: false, transformFunction: null }, footerConfig: { classPropertyName: "footerConfig", publicName: "footerConfig", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (footerConfig(); as config) {\r\n @if (config.enable) {\r\n <mat-card class=\"lf-footer lf-transitions mat-elevation-z2 p-4\" [ngClass]=\"config.cssClass\">\r\n <!-- svg logo -->\r\n @if (config.svgLogo) {\r\n <mat-icon\r\n class=\"lf-footer-logo mb-4\"\r\n color=\"primary\"\r\n [svgIcon]=\"config.svgLogo!\"></mat-icon>\r\n } @else {\r\n @if (config.imgLogo) {\r\n <img class=\"lf-footer-logo mb-4\" [src]=\"config.imgLogo\" alt=\"Logo\" />\r\n }\r\n }\r\n <!-- img logo -->\r\n <!-- links -->\r\n @if (config.links) {\r\n <div class=\"lf-footer-links mb-4\">\r\n @for (link of config.links; track $index; let i = $index) {\r\n <div class=\"lf-footer-link\" [class.mr-2]=\"i < config.links!.length - 1\">\r\n @if (link.routerLink) {\r\n <a [routerLink]=\"[link.routerLink]\">{{ link.label || \"\" }}</a>\r\n } @else {\r\n <a [href]=\"link.href\" [target]=\"link.externalTab ? '_blank' : null\">\r\n {{ link.label }}\r\n </a>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n <!-- copyright -->\r\n @if (config.copyright) {\r\n <span class=\"lf-footer-copyright\">\r\n {{ config.copyright }}\r\n </span>\r\n }\r\n </mat-card>\r\n }\r\n}\r\n", styles: [".lf-footer{overflow:hidden;flex-flow:column;align-items:center;justify-content:center;min-height:var(--footer-height);border-radius:0;border-top:solid 1px rgba(0,0,0,.12)}.lf-footer .lf-footer-logo{width:var(--footer-logo-size);height:var(--footer-logo-size)}.lf-footer .lf-footer-links{display:flex;flex-flow:row wrap;align-items:center;justify-content:center}.lf-footer .lf-footer-links .lf-footer-link a{text-decoration:none;color:unset;font-size:var(--footer-font-size)}.lf-footer .lf-footer-links .lf-footer-link a:hover{color:var(--color-primary)}.lf-footer .lf-footer-copyright{font-size:var(--footer-font-size)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
834
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
835
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: FooterComponent, isStandalone: true, selector: "lf-footer", inputs: { libraryConfig: { classPropertyName: "libraryConfig", publicName: "libraryConfig", isSignal: true, isRequired: false, transformFunction: null }, footerConfig: { classPropertyName: "footerConfig", publicName: "footerConfig", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (footerConfig(); as config) {\r\n @if (config.enable) {\r\n <mat-card class=\"lf-footer lf-transitions mat-elevation-z2 p-4\" [ngClass]=\"config.cssClass\">\r\n <!-- svg logo -->\r\n @if (config.svgLogo) {\r\n <mat-icon\r\n class=\"lf-footer-logo mb-4\"\r\n color=\"primary\"\r\n [svgIcon]=\"config.svgLogo!\"></mat-icon>\r\n } @else {\r\n @if (config.imgLogo) {\r\n <img class=\"lf-footer-logo mb-4\" [src]=\"config.imgLogo\" alt=\"Logo\" />\r\n }\r\n }\r\n <!-- img logo -->\r\n <!-- links -->\r\n @if (config.links) {\r\n <div class=\"lf-footer-links mb-4\">\r\n @for (link of config.links; track $index; let i = $index) {\r\n <div class=\"lf-footer-link\" [class.mr-2]=\"i < config.links!.length - 1\">\r\n @if (link.routerLink) {\r\n <a [routerLink]=\"[link.routerLink]\">{{ link.label || \"\" }}</a>\r\n } @else {\r\n <a [href]=\"link.href\" [target]=\"link.externalTab ? '_blank' : null\">\r\n {{ link.label }}\r\n </a>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n <!-- copyright -->\r\n @if (config.copyright) {\r\n <span class=\"lf-footer-copyright\">\r\n {{ config.copyright }}\r\n </span>\r\n }\r\n </mat-card>\r\n }\r\n}\r\n", styles: [".lf-footer{overflow:hidden;flex-flow:column;align-items:center;justify-content:center;min-height:var(--footer-height);border-radius:0;border-top:solid 1px rgba(0,0,0,.12)}.lf-footer .lf-footer-logo{width:var(--footer-logo-size);height:var(--footer-logo-size)}.lf-footer .lf-footer-links{display:flex;flex-flow:row wrap;align-items:center;justify-content:center}.lf-footer .lf-footer-links .lf-footer-link a{text-decoration:none;color:unset;font-size:var(--footer-font-size)}.lf-footer .lf-footer-links .lf-footer-link a:hover{color:var(--color-primary)}.lf-footer .lf-footer-copyright{font-size:var(--footer-font-size)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
835
836
  }
836
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: FooterComponent, decorators: [{
837
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FooterComponent, decorators: [{
837
838
  type: Component,
838
- args: [{ selector: 'lf-footer', standalone: true, imports: [
839
+ args: [{ selector: 'lf-footer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
839
840
  CommonModule,
840
841
  RouterModule,
841
842
  MatCardModule,
@@ -854,7 +855,7 @@ class InputComponent {
854
855
  this.inputChangeEvent = output();
855
856
  this.inputPrefixActionEvent = output();
856
857
  this.inputConfigComputed = computed(() => this.inputConfigDialog ?? this.inputConfig() ?? {}, ...(ngDevMode ? [{ debugName: "inputConfigComputed" }] : []));
857
- this.inputValue = '';
858
+ this.inputValue = model('', ...(ngDevMode ? [{ debugName: "inputValue" }] : []));
858
859
  effect(() => {
859
860
  const input = this.input();
860
861
  if (input && this.inputConfigComputed().autoFocus) {
@@ -863,8 +864,8 @@ class InputComponent {
863
864
  });
864
865
  }
865
866
  ngOnDestroy() {
866
- this.inputValue = '';
867
- this.inputChangeEvent.emit(this.inputValue);
867
+ this.inputValue.set('');
868
+ this.inputChangeEvent.emit(this.inputValue());
868
869
  }
869
870
  inputSubmitted(value) {
870
871
  this.inputSubmitEvent.emit(value);
@@ -882,23 +883,23 @@ class InputComponent {
882
883
  }
883
884
  }
884
885
  clearInput() {
885
- this.inputValue = '';
886
- this.inputChangeEvent.emit(this.inputValue);
886
+ this.inputValue.set('');
887
+ this.inputChangeEvent.emit(this.inputValue());
887
888
  }
888
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
889
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: InputComponent, isStandalone: true, selector: "lf-input", inputs: { inputConfig: { classPropertyName: "inputConfig", publicName: "inputConfig", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputSubmitEvent: "inputSubmitEvent", inputChangeEvent: "inputChangeEvent", inputPrefixActionEvent: "inputPrefixActionEvent" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (inputConfigComputed(); as config) {\r\n @if (config) {\r\n <mat-form-field class=\"lf-input\" appearance=\"fill\" [class.lf-hide-hint]=\"!config.hint\">\r\n <mat-label>{{ config.label || \"Search\" }}</mat-label>\r\n @if (config.hint) {\r\n <mat-hint>{{ config.hint }}</mat-hint>\r\n }\r\n <input\r\n matInput\r\n type=\"text\"\r\n [(ngModel)]=\"inputValue\"\r\n [disabled]=\"config.disabled!\"\r\n (keyup.enter)=\"inputSubmitted(inputValue)\"\r\n (ngModelChange)=\"inputChanged($event)\"\r\n #input />\r\n @if (isMobile()) {\r\n <button mat-icon-button matPrefix color=\"accent\" (click)=\"inputPrefixAction()\">\r\n <mat-icon>arrow_back</mat-icon>\r\n </button>\r\n }\r\n @if (inputValue) {\r\n <button class=\"lf-input-close-button\" mat-icon-button matSuffix (click)=\"clearInput()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n }\r\n @if (config.matIconSubmit) {\r\n <button\r\n mat-icon-button\r\n matSuffix\r\n color=\"accent\"\r\n type=\"submit\"\r\n (click)=\"inputSubmitted(inputValue)\">\r\n <mat-icon>\r\n {{ config.matIconSubmit }}\r\n </mat-icon>\r\n </button>\r\n }\r\n </mat-form-field>\r\n }\r\n}\r\n", styles: [".lf-input{width:100%}.lf-input ::ng-deep .mdc-text-field{border-radius:var(--header-input-border-radius)!important}.lf-input ::ng-deep .mdc-line-ripple:after{border-bottom-width:0!important}.lf-input ::ng-deep .mdc-line-ripple:before{border-bottom-width:0!important}.lf-input .lf-input-close-button{color:var(--color-gray)}.lf-input.lf-hide-hint ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$4.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
889
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
890
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: InputComponent, isStandalone: true, selector: "lf-input", inputs: { inputConfig: { classPropertyName: "inputConfig", publicName: "inputConfig", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, inputValue: { classPropertyName: "inputValue", publicName: "inputValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputSubmitEvent: "inputSubmitEvent", inputChangeEvent: "inputChangeEvent", inputPrefixActionEvent: "inputPrefixActionEvent", inputValue: "inputValueChange" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (inputConfigComputed(); as config) {\r\n @if (config) {\r\n <mat-form-field class=\"lf-input\" appearance=\"fill\" [class.lf-hide-hint]=\"!config.hint\">\r\n <mat-label>{{ config.label || \"Search\" }}</mat-label>\r\n @if (config.hint) {\r\n <mat-hint>{{ config.hint }}</mat-hint>\r\n }\r\n <input\r\n matInput\r\n type=\"text\"\r\n [(ngModel)]=\"inputValue\"\r\n [disabled]=\"config.disabled!\"\r\n (keyup.enter)=\"inputSubmitted(inputValue())\"\r\n (ngModelChange)=\"inputChanged($event)\"\r\n #input />\r\n @if (isMobile()) {\r\n <button mat-icon-button matPrefix color=\"accent\" (click)=\"inputPrefixAction()\">\r\n <mat-icon>arrow_back</mat-icon>\r\n </button>\r\n }\r\n @if (inputValue()) {\r\n <button class=\"lf-input-close-button\" mat-icon-button matSuffix (click)=\"clearInput()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n }\r\n @if (config.matIconSubmit) {\r\n <button\r\n mat-icon-button\r\n matSuffix\r\n color=\"accent\"\r\n type=\"submit\"\r\n (click)=\"inputSubmitted(inputValue())\">\r\n <mat-icon>\r\n {{ config.matIconSubmit }}\r\n </mat-icon>\r\n </button>\r\n }\r\n </mat-form-field>\r\n }\r\n}\r\n", styles: [".lf-input{width:100%}.lf-input ::ng-deep .mdc-text-field{border-radius:var(--header-input-border-radius)!important}.lf-input ::ng-deep .mdc-line-ripple:after{border-bottom-width:0!important}.lf-input ::ng-deep .mdc-line-ripple:before{border-bottom-width:0!important}.lf-input .lf-input-close-button{color:var(--color-gray)}.lf-input.lf-hide-hint ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$4.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
890
891
  }
891
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: InputComponent, decorators: [{
892
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: InputComponent, decorators: [{
892
893
  type: Component,
893
- args: [{ selector: 'lf-input', standalone: true, imports: [
894
+ args: [{ selector: 'lf-input', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
894
895
  CommonModule,
895
896
  FormsModule,
896
897
  MatFormFieldModule,
897
898
  MatInputModule,
898
899
  MatButtonModule,
899
900
  MatIconModule
900
- ], template: "@if (inputConfigComputed(); as config) {\r\n @if (config) {\r\n <mat-form-field class=\"lf-input\" appearance=\"fill\" [class.lf-hide-hint]=\"!config.hint\">\r\n <mat-label>{{ config.label || \"Search\" }}</mat-label>\r\n @if (config.hint) {\r\n <mat-hint>{{ config.hint }}</mat-hint>\r\n }\r\n <input\r\n matInput\r\n type=\"text\"\r\n [(ngModel)]=\"inputValue\"\r\n [disabled]=\"config.disabled!\"\r\n (keyup.enter)=\"inputSubmitted(inputValue)\"\r\n (ngModelChange)=\"inputChanged($event)\"\r\n #input />\r\n @if (isMobile()) {\r\n <button mat-icon-button matPrefix color=\"accent\" (click)=\"inputPrefixAction()\">\r\n <mat-icon>arrow_back</mat-icon>\r\n </button>\r\n }\r\n @if (inputValue) {\r\n <button class=\"lf-input-close-button\" mat-icon-button matSuffix (click)=\"clearInput()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n }\r\n @if (config.matIconSubmit) {\r\n <button\r\n mat-icon-button\r\n matSuffix\r\n color=\"accent\"\r\n type=\"submit\"\r\n (click)=\"inputSubmitted(inputValue)\">\r\n <mat-icon>\r\n {{ config.matIconSubmit }}\r\n </mat-icon>\r\n </button>\r\n }\r\n </mat-form-field>\r\n }\r\n}\r\n", styles: [".lf-input{width:100%}.lf-input ::ng-deep .mdc-text-field{border-radius:var(--header-input-border-radius)!important}.lf-input ::ng-deep .mdc-line-ripple:after{border-bottom-width:0!important}.lf-input ::ng-deep .mdc-line-ripple:before{border-bottom-width:0!important}.lf-input .lf-input-close-button{color:var(--color-gray)}.lf-input.lf-hide-hint ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}\n"] }]
901
- }], ctorParameters: () => [], propDecorators: { input: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], inputConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputConfig", required: false }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], inputSubmitEvent: [{ type: i0.Output, args: ["inputSubmitEvent"] }], inputChangeEvent: [{ type: i0.Output, args: ["inputChangeEvent"] }], inputPrefixActionEvent: [{ type: i0.Output, args: ["inputPrefixActionEvent"] }] } });
901
+ ], template: "@if (inputConfigComputed(); as config) {\r\n @if (config) {\r\n <mat-form-field class=\"lf-input\" appearance=\"fill\" [class.lf-hide-hint]=\"!config.hint\">\r\n <mat-label>{{ config.label || \"Search\" }}</mat-label>\r\n @if (config.hint) {\r\n <mat-hint>{{ config.hint }}</mat-hint>\r\n }\r\n <input\r\n matInput\r\n type=\"text\"\r\n [(ngModel)]=\"inputValue\"\r\n [disabled]=\"config.disabled!\"\r\n (keyup.enter)=\"inputSubmitted(inputValue())\"\r\n (ngModelChange)=\"inputChanged($event)\"\r\n #input />\r\n @if (isMobile()) {\r\n <button mat-icon-button matPrefix color=\"accent\" (click)=\"inputPrefixAction()\">\r\n <mat-icon>arrow_back</mat-icon>\r\n </button>\r\n }\r\n @if (inputValue()) {\r\n <button class=\"lf-input-close-button\" mat-icon-button matSuffix (click)=\"clearInput()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n }\r\n @if (config.matIconSubmit) {\r\n <button\r\n mat-icon-button\r\n matSuffix\r\n color=\"accent\"\r\n type=\"submit\"\r\n (click)=\"inputSubmitted(inputValue())\">\r\n <mat-icon>\r\n {{ config.matIconSubmit }}\r\n </mat-icon>\r\n </button>\r\n }\r\n </mat-form-field>\r\n }\r\n}\r\n", styles: [".lf-input{width:100%}.lf-input ::ng-deep .mdc-text-field{border-radius:var(--header-input-border-radius)!important}.lf-input ::ng-deep .mdc-line-ripple:after{border-bottom-width:0!important}.lf-input ::ng-deep .mdc-line-ripple:before{border-bottom-width:0!important}.lf-input .lf-input-close-button{color:var(--color-gray)}.lf-input.lf-hide-hint ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}\n"] }]
902
+ }], ctorParameters: () => [], propDecorators: { input: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], inputConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputConfig", required: false }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], inputSubmitEvent: [{ type: i0.Output, args: ["inputSubmitEvent"] }], inputChangeEvent: [{ type: i0.Output, args: ["inputChangeEvent"] }], inputPrefixActionEvent: [{ type: i0.Output, args: ["inputPrefixActionEvent"] }], inputValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputValue", required: false }] }, { type: i0.Output, args: ["inputValueChange"] }] } });
902
903
 
903
904
  var input_component = /*#__PURE__*/Object.freeze({
904
905
  __proto__: null,
@@ -916,6 +917,40 @@ class HeaderComponent {
916
917
  this.headerButtonClickEvent = output();
917
918
  this.headerInputSubmitEvent = output();
918
919
  this.headerInputChangeEvent = output();
920
+ this.isActive = computed(() => {
921
+ const currentRoute = this.currentRoute();
922
+ const route = currentRoute?.substring(currentRoute.indexOf('/') + 1) || '';
923
+ return (id) => !!route && !!id && route === id;
924
+ }, ...(ngDevMode ? [{ debugName: "isActive" }] : []));
925
+ this.rightMobileButton = computed(() => {
926
+ const headerConfig = this.headerConfig();
927
+ const rightMenuButtons = headerConfig?.rightMenuButtons ?? [];
928
+ if (!rightMenuButtons.length)
929
+ return null;
930
+ const config = headerConfig?.responsiveConfig;
931
+ if (!config?.enable)
932
+ return null;
933
+ const includedButtons = rightMenuButtons.filter(button => !config.excludeButtonIds?.includes(button.id));
934
+ return {
935
+ id: '',
936
+ matIcon: !config.matIcon && !config.svgIcon && !config.label
937
+ ? 'more_vert'
938
+ : config.matIcon,
939
+ svgIcon: config.svgIcon,
940
+ label: config.label,
941
+ menuButtons: includedButtons
942
+ };
943
+ }, ...(ngDevMode ? [{ debugName: "rightMobileButton" }] : []));
944
+ this.rightExcludedButtons = computed(() => {
945
+ const headerConfig = this.headerConfig();
946
+ const rightMenuButtons = headerConfig?.rightMenuButtons ?? [];
947
+ if (!rightMenuButtons.length)
948
+ return null;
949
+ const config = headerConfig?.responsiveConfig;
950
+ if (!config?.enable)
951
+ return null;
952
+ return rightMenuButtons.filter(button => config.excludeButtonIds?.includes(button.id));
953
+ }, ...(ngDevMode ? [{ debugName: "rightExcludedButtons" }] : []));
919
954
  }
920
955
  buttonClicked(id) {
921
956
  if (!id) {
@@ -932,53 +967,19 @@ class HeaderComponent {
932
967
  inputClosed() {
933
968
  this.headerConfigUpdateEvent.emit({ inputConfig: { enable: false } });
934
969
  }
935
- isActive(id) {
936
- const currentRoute = this.currentRoute();
937
- if (!id || !currentRoute) {
938
- return false;
939
- }
940
- const route = currentRoute.substring(currentRoute.indexOf('/') + 1);
941
- return route === id;
942
- }
943
- getRightMobileButton() {
944
- const rightMenuButtons = this.headerConfig()?.rightMenuButtons || [];
945
- if (!rightMenuButtons?.length)
946
- return null;
947
- const config = this.headerConfig()?.responsiveConfig;
948
- if (!config?.enable)
949
- return null;
950
- const includedButtons = rightMenuButtons.filter((button) => !config?.excludeButtonIds?.includes(button.id));
951
- return {
952
- id: '',
953
- matIcon: (!config.matIcon && !config.svgIcon && !config.label) ? 'more_vert' : config.matIcon,
954
- svgIcon: config.svgIcon,
955
- label: config.label,
956
- menuButtons: [...includedButtons]
957
- };
958
- }
959
- getRightExcludedButtons() {
960
- const rightMenuButtons = this.headerConfig()?.rightMenuButtons || [];
961
- if (!rightMenuButtons?.length)
962
- return null;
963
- const config = this.headerConfig()?.responsiveConfig;
964
- if (!config?.enable)
965
- return null;
966
- const excludedButtons = rightMenuButtons.filter((button) => config?.excludeButtonIds?.includes(button.id));
967
- return excludedButtons;
968
- }
969
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
970
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: HeaderComponent, isStandalone: true, selector: "lf-header", inputs: { libraryConfig: { classPropertyName: "libraryConfig", publicName: "libraryConfig", isSignal: true, isRequired: false, transformFunction: null }, headerConfig: { classPropertyName: "headerConfig", publicName: "headerConfig", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, routeLoading: { classPropertyName: "routeLoading", publicName: "routeLoading", isSignal: true, isRequired: false, transformFunction: null }, currentRoute: { classPropertyName: "currentRoute", publicName: "currentRoute", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { headerConfigUpdateEvent: "headerConfigUpdateEvent", headerButtonClickEvent: "headerButtonClickEvent", headerInputSubmitEvent: "headerInputSubmitEvent", headerInputChangeEvent: "headerInputChangeEvent" }, ngImport: i0, template: "@if (headerConfig(); as config) {\r\n @if (config.enable) {\r\n <mat-toolbar\r\n class=\"lf-header lf-transitions mat-elevation-z3\"\r\n [class.px-4]=\"!isMobile()\"\r\n [class.px-1]=\"isMobile()\"\r\n [ngClass]=\"config.cssClass\"\r\n [class.lf-gradient]=\"config.gradient\"\r\n color=\"primary\">\r\n <!-- left menu button -->\r\n <ng-container\r\n [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n menuButton: config.leftMenuButton!,\r\n hideLabel: true,\r\n }\"></ng-container>\r\n <!-- logo & title -->\r\n <div\r\n class=\"lf-header-logo-title-wrapper ml-1 mr-2\"\r\n [class.ml-10]=\"config.leftMenuButton && !isMobile()\">\r\n <!-- link wrapper -->\r\n <div\r\n class=\"lf-header-logo-title-wrapper-link\"\r\n [class.lf-clickable]=\"config.titleRouterLink\"\r\n [routerLink]=\"config.titleRouterLink ? [config.titleRouterLink] : null\">\r\n <!-- svg logo -->\r\n @if (config.svgLogo) {\r\n <mat-icon\r\n class=\"lf-header-logo\"\r\n [class.mr-3]=\"config.title\"\r\n [svgIcon]=\"config.svgLogo!\"></mat-icon>\r\n <!-- img logo -->\r\n } @else {\r\n @if (config.imgLogo) {\r\n <img\r\n class=\"lf-header-logo\"\r\n [class.mr-3]=\"config.title\"\r\n [src]=\"config.imgLogo\"\r\n alt=\"Logo\" />\r\n }\r\n }\r\n <!-- title -->\r\n @if (config.title) {\r\n <div class=\"lf-header-title-wrapper\">\r\n @if (config.title) {\r\n <span class=\"lf-header-title\">\r\n {{ config.title }}\r\n </span>\r\n }\r\n @if (config.subtitle) {\r\n <span class=\"lf-header-subtitle\">\r\n {{ config.subtitle }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n <!-- input -->\r\n @if (config.inputConfig?.enable) {\r\n <div class=\"spacer\"></div>\r\n <lf-input\r\n [class.lf-header-input-mobile]=\"isMobile()\"\r\n [class.mx-3]=\"!isMobile()\"\r\n [inputConfig]=\"config.inputConfig!\"\r\n [isMobile]=\"isMobile()\"\r\n (inputSubmitEvent)=\"inputSubmitted($event)\"\r\n (inputChangeEvent)=\"inputChanged($event)\"\r\n (inputPrefixActionEvent)=\"inputClosed()\"></lf-input>\r\n }\r\n <!-- spacer -->\r\n <div class=\"spacer\"></div>\r\n <!-- right menu buttons -->\r\n @if (config.responsiveConfig?.enable && isMobile()) {\r\n @let exludedButtons = getRightExcludedButtons();\r\n @for (button of exludedButtons; track button.id) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n menuButton: button,\r\n }\"></ng-container>\r\n }\r\n @let mobileButton = getRightMobileButton();\r\n <ng-container\r\n [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n menuButton: mobileButton,\r\n }\"></ng-container>\r\n } @else {\r\n @for (button of config.rightMenuButtons; track button.id) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n menuButton: button,\r\n }\"></ng-container>\r\n }\r\n }\r\n </mat-toolbar>\r\n <!-- loading bar -->\r\n @if (config.loading || (config.showRouteLoading && routeLoading())) {\r\n <mat-progress-bar\r\n class=\"lf-header-progress-bar\"\r\n color=\"accent\"\r\n mode=\"indeterminate\"></mat-progress-bar>\r\n }\r\n }\r\n}\r\n\r\n<!-- header menu button -->\r\n<ng-template #menuButtonTemplate let-menuButton=\"menuButton\" let-hideLabel=\"hideLabel\">\r\n @if (menuButton) {\r\n <!-- label button -->\r\n @if (menuButton.label && !hideLabel) {\r\n <button\r\n mat-button\r\n class=\"lf-header-menu-button\"\r\n [class.lf-header-menu-button-active]=\"isActive(menuButton.id) && !menuButton.disabled\"\r\n [ngClass]=\"menuButton.cssClass\"\r\n [disabled]=\"menuButton.disabled\"\r\n (click)=\"buttonClicked(menuButton.id)\"\r\n [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n [aria-label]=\"menuButton.label || menuButton.tooltip\"\r\n [matTooltip]=\"menuButton.tooltip\">\r\n <!-- icon -->\r\n @if (menuButton.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig()?.outlineIcons\">\r\n {{ menuButton.matIcon }}\r\n </mat-icon>\r\n } @else if (menuButton.svgIcon) {\r\n <mat-icon [svgIcon]=\"menuButton.svgIcon\"></mat-icon>\r\n }\r\n <!-- label -->\r\n {{ menuButton.label }}\r\n </button>\r\n <!-- icon button -->\r\n } @else if (menuButton.matIcon || menuButton.svgIcon) {\r\n <button\r\n mat-icon-button\r\n class=\"lf-header-menu-button\"\r\n [ngClass]=\"menuButton.cssClass\"\r\n [disabled]=\"menuButton.disabled\"\r\n (click)=\"buttonClicked(menuButton.id)\"\r\n [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n [matTooltip]=\"menuButton.tooltip\"\r\n [aria-label]=\"menuButton.id || menuButton.tooltip\">\r\n <!-- icon -->\r\n @if (menuButton.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig()?.outlineIcons\">\r\n {{ menuButton.matIcon }}\r\n </mat-icon>\r\n } @else if (menuButton.svgIcon) {\r\n <mat-icon [svgIcon]=\"menuButton.svgIcon\"></mat-icon>\r\n }\r\n </button>\r\n <!-- img button -->\r\n } @else if (menuButton.imgIcon) {\r\n <img\r\n class=\"lf-header-menu-img px-1\"\r\n [src]=\"menuButton.imgIcon\"\r\n width=\"48\"\r\n height=\"48\"\r\n [ngClass]=\"menuButton.cssClass\"\r\n (click)=\"buttonClicked(menuButton.id)\"\r\n [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n [matTooltip]=\"menuButton.tooltip\"\r\n [aria-label]=\"menuButton.id || menuButton.tooltip\" />\r\n }\r\n <!-- menu -->\r\n <mat-menu #menu=\"matMenu\">\r\n <!-- label menu buttons -->\r\n @for (button of menuButton.menuButtons; track button.id) {\r\n <!-- menu button -->\r\n @if (button.label) {\r\n <button\r\n mat-menu-item\r\n [class.lf-header-menu-button-active]=\"isActive(button.id)\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"button.disabled\"\r\n (click)=\"buttonClicked(button.id)\"\r\n [matTooltip]=\"button.tooltip\"\r\n [aria-label]=\"button.label\">\r\n <!-- icon -->\r\n @if (button.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig()?.outlineIcons\">\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n } @else if (button.svgIcon) {\r\n <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n }\r\n <!-- label -->\r\n <span>{{ button.label }}</span>\r\n </button>\r\n }\r\n }\r\n <!-- icon menu buttons -->\r\n <div mat-menu-item class=\"lf-menu-icons px-1\" [disableRipple]=\"true\">\r\n @for (button of menuButton.menuButtons; track button.id) {\r\n <!-- icon button -->\r\n @if (!button.label && (button.matIcon || button.svgIcon)) {\r\n <button\r\n mat-icon-button\r\n class=\"lf-menu-icon-button\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"button.disabled\"\r\n (click)=\"buttonClicked(button.id)\"\r\n [matTooltip]=\"button.tooltip\"\r\n [aria-label]=\"button.id || button.tooltip\"\r\n tabindex=\"0\">\r\n <!-- icon -->\r\n @if (button.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig()?.outlineIcons\">\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n } @else if (button.svgIcon) {\r\n <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n }\r\n </button>\r\n }\r\n }\r\n </div>\r\n </mat-menu>\r\n }\r\n</ng-template>\r\n", styles: [".lf-header{z-index:var(--header-z-index);position:fixed;top:0;height:var(--header-height)}.lf-header .lf-header-menu-button{flex-shrink:0;max-width:var(--header-menu-button-max-width)}.lf-header .lf-header-menu-button ::ng-deep .mdc-button__label{overflow:hidden;text-overflow:ellipsis}.lf-header .lf-header-menu-button.lf-header-menu-button-active{background-color:#fff}.lf-header .lf-header-menu-img{width:var(--header-menu-img-size);height:var(--header-menu-img-size);border-radius:50%;flex-shrink:0;object-fit:cover;cursor:pointer}.lf-header .lf-header-logo-title-wrapper{flex:0 0 auto;max-width:var(--header-logo-title-wrapper-max-width);overflow:hidden;display:flex}.lf-header .lf-header-logo-title-wrapper .lf-header-logo-title-wrapper-link{display:flex;flex-flow:row nowrap;align-items:center;flex:0}.lf-header .lf-header-logo-title-wrapper .lf-header-logo-title-wrapper-link.lf-clickable{cursor:pointer}.lf-header .lf-header-logo-title-wrapper .lf-header-logo{width:var(--header-logo-size);height:var(--header-logo-size);min-width:var(--header-logo-size);min-height:var(--header-logo-size)}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper{display:flex;flex-flow:column}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-title{font-size:var(--header-title-font-size);line-height:calc(var(--header-title-font-size) + 8px)}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-subtitle{font-size:var(--header-subtitle-font-size);line-height:var(--header-subtitle-font-size)}.lf-header lf-input{z-index:var(--header-z-index);flex:1 1 var(--header-input-max-width)}.lf-header lf-input.lf-header-input-mobile{position:fixed!important;left:4px!important;right:4px!important;width:unset!important;max-width:unset!important}.lf-header .spacer{flex:1 0 auto}.lf-menu-icons{min-height:unset!important;cursor:unset!important}.lf-menu-icons:hover{background:transparent!important}.lf-header-progress-bar{z-index:var(--header-z-index);position:fixed;top:var(--header-height)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i3$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$1.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$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: 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: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i7.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.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"] }], animations: [
970
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
971
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: HeaderComponent, isStandalone: true, selector: "lf-header", inputs: { libraryConfig: { classPropertyName: "libraryConfig", publicName: "libraryConfig", isSignal: true, isRequired: false, transformFunction: null }, headerConfig: { classPropertyName: "headerConfig", publicName: "headerConfig", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, routeLoading: { classPropertyName: "routeLoading", publicName: "routeLoading", isSignal: true, isRequired: false, transformFunction: null }, currentRoute: { classPropertyName: "currentRoute", publicName: "currentRoute", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { headerConfigUpdateEvent: "headerConfigUpdateEvent", headerButtonClickEvent: "headerButtonClickEvent", headerInputSubmitEvent: "headerInputSubmitEvent", headerInputChangeEvent: "headerInputChangeEvent" }, ngImport: i0, template: "@if (headerConfig(); as config) {\r\n @if (config.enable) {\r\n <mat-toolbar\r\n class=\"lf-header lf-transitions mat-elevation-z3\"\r\n [class.px-4]=\"!isMobile()\"\r\n [class.px-1]=\"isMobile()\"\r\n [ngClass]=\"config.cssClass\"\r\n [class.lf-gradient]=\"config.gradient\"\r\n color=\"primary\">\r\n <!-- left menu button -->\r\n <ng-container\r\n [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n menuButton: config.leftMenuButton!,\r\n hideLabel: true,\r\n }\"></ng-container>\r\n <!-- logo & title -->\r\n <div\r\n class=\"lf-header-logo-title-wrapper ml-1 mr-2\"\r\n [class.ml-10]=\"config.leftMenuButton && !isMobile()\">\r\n <!-- link wrapper -->\r\n <div\r\n class=\"lf-header-logo-title-wrapper-link\"\r\n [class.lf-clickable]=\"config.titleRouterLink\"\r\n [routerLink]=\"config.titleRouterLink ? [config.titleRouterLink] : null\">\r\n <!-- svg logo -->\r\n @if (config.svgLogo) {\r\n <mat-icon\r\n class=\"lf-header-logo\"\r\n [class.mr-3]=\"config.title\"\r\n [svgIcon]=\"config.svgLogo!\"></mat-icon>\r\n <!-- img logo -->\r\n } @else {\r\n @if (config.imgLogo) {\r\n <img\r\n class=\"lf-header-logo\"\r\n [class.mr-3]=\"config.title\"\r\n [src]=\"config.imgLogo\"\r\n alt=\"Logo\" />\r\n }\r\n }\r\n <!-- title -->\r\n @if (config.title) {\r\n <div class=\"lf-header-title-wrapper\">\r\n @if (config.title) {\r\n <span class=\"lf-header-title\">\r\n {{ config.title }}\r\n </span>\r\n }\r\n @if (config.subtitle) {\r\n <span class=\"lf-header-subtitle\">\r\n {{ config.subtitle }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n <!-- input -->\r\n @if (config.inputConfig?.enable) {\r\n <div class=\"spacer\"></div>\r\n <lf-input\r\n [class.lf-header-input-mobile]=\"isMobile()\"\r\n [class.mx-3]=\"!isMobile()\"\r\n [inputConfig]=\"config.inputConfig!\"\r\n [isMobile]=\"isMobile()\"\r\n (inputSubmitEvent)=\"inputSubmitted($event)\"\r\n (inputChangeEvent)=\"inputChanged($event)\"\r\n (inputPrefixActionEvent)=\"inputClosed()\"></lf-input>\r\n }\r\n <!-- spacer -->\r\n <div class=\"spacer\"></div>\r\n <!-- right menu buttons -->\r\n @if (config.responsiveConfig?.enable && isMobile()) {\r\n @let exludedButtons = rightExcludedButtons();\r\n @for (button of exludedButtons; track button.id) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n menuButton: button,\r\n }\"></ng-container>\r\n }\r\n @let mobileButton = rightMobileButton();\r\n <ng-container\r\n [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n menuButton: mobileButton,\r\n }\"></ng-container>\r\n } @else {\r\n @for (button of config.rightMenuButtons; track button.id) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n menuButton: button,\r\n }\"></ng-container>\r\n }\r\n }\r\n </mat-toolbar>\r\n <!-- loading bar -->\r\n @if (config.loading || (config.showRouteLoading && routeLoading())) {\r\n <mat-progress-bar\r\n class=\"lf-header-progress-bar\"\r\n color=\"accent\"\r\n mode=\"indeterminate\"></mat-progress-bar>\r\n }\r\n }\r\n}\r\n\r\n<!-- header menu button -->\r\n<ng-template #menuButtonTemplate let-menuButton=\"menuButton\" let-hideLabel=\"hideLabel\">\r\n @if (menuButton) {\r\n <!-- label button -->\r\n @if (menuButton.label && !hideLabel) {\r\n <button\r\n mat-button\r\n class=\"lf-header-menu-button\"\r\n [class.lf-header-menu-button-active]=\"isActive()(menuButton.id) && !menuButton.disabled\"\r\n [ngClass]=\"menuButton.cssClass\"\r\n [disabled]=\"menuButton.disabled\"\r\n (click)=\"buttonClicked(menuButton.id)\"\r\n [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n [aria-label]=\"menuButton.label || menuButton.tooltip\"\r\n [matTooltip]=\"menuButton.tooltip\">\r\n <!-- icon -->\r\n @if (menuButton.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig()?.outlineIcons\">\r\n {{ menuButton.matIcon }}\r\n </mat-icon>\r\n } @else if (menuButton.svgIcon) {\r\n <mat-icon [svgIcon]=\"menuButton.svgIcon\"></mat-icon>\r\n }\r\n <!-- label -->\r\n {{ menuButton.label }}\r\n </button>\r\n <!-- icon button -->\r\n } @else if (menuButton.matIcon || menuButton.svgIcon) {\r\n <button\r\n mat-icon-button\r\n class=\"lf-header-menu-button\"\r\n [ngClass]=\"menuButton.cssClass\"\r\n [disabled]=\"menuButton.disabled\"\r\n (click)=\"buttonClicked(menuButton.id)\"\r\n [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n [matTooltip]=\"menuButton.tooltip\"\r\n [aria-label]=\"menuButton.id || menuButton.tooltip\">\r\n <!-- icon -->\r\n @if (menuButton.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig()?.outlineIcons\">\r\n {{ menuButton.matIcon }}\r\n </mat-icon>\r\n } @else if (menuButton.svgIcon) {\r\n <mat-icon [svgIcon]=\"menuButton.svgIcon\"></mat-icon>\r\n }\r\n </button>\r\n <!-- img button -->\r\n } @else if (menuButton.imgIcon) {\r\n <img\r\n class=\"lf-header-menu-img px-1\"\r\n [src]=\"menuButton.imgIcon\"\r\n width=\"48\"\r\n height=\"48\"\r\n [ngClass]=\"menuButton.cssClass\"\r\n (click)=\"buttonClicked(menuButton.id)\"\r\n [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n [matTooltip]=\"menuButton.tooltip\"\r\n [aria-label]=\"menuButton.id || menuButton.tooltip\" />\r\n }\r\n <!-- menu -->\r\n <mat-menu #menu=\"matMenu\">\r\n <!-- label menu buttons -->\r\n @for (button of menuButton.menuButtons; track button.id) {\r\n <!-- menu button -->\r\n @if (button.label) {\r\n <button\r\n mat-menu-item\r\n [class.lf-header-menu-button-active]=\"isActive()(button.id)\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"button.disabled\"\r\n (click)=\"buttonClicked(button.id)\"\r\n [matTooltip]=\"button.tooltip\"\r\n [aria-label]=\"button.label\">\r\n <!-- icon -->\r\n @if (button.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig()?.outlineIcons\">\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n } @else if (button.svgIcon) {\r\n <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n }\r\n <!-- label -->\r\n <span>{{ button.label }}</span>\r\n </button>\r\n }\r\n }\r\n <!-- icon menu buttons -->\r\n <div mat-menu-item class=\"lf-menu-icons px-1\" [disableRipple]=\"true\">\r\n @for (button of menuButton.menuButtons; track button.id) {\r\n <!-- icon button -->\r\n @if (!button.label && (button.matIcon || button.svgIcon)) {\r\n <button\r\n mat-icon-button\r\n class=\"lf-menu-icon-button\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"button.disabled\"\r\n (click)=\"buttonClicked(button.id)\"\r\n [matTooltip]=\"button.tooltip\"\r\n [aria-label]=\"button.id || button.tooltip\"\r\n tabindex=\"0\">\r\n <!-- icon -->\r\n @if (button.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig()?.outlineIcons\">\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n } @else if (button.svgIcon) {\r\n <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n }\r\n </button>\r\n }\r\n }\r\n </div>\r\n </mat-menu>\r\n }\r\n</ng-template>\r\n", styles: [".lf-header{z-index:var(--header-z-index);position:fixed;top:0;height:var(--header-height)}.lf-header .lf-header-menu-button{flex-shrink:0;max-width:var(--header-menu-button-max-width)}.lf-header .lf-header-menu-button ::ng-deep .mdc-button__label{overflow:hidden;text-overflow:ellipsis}.lf-header .lf-header-menu-button.lf-header-menu-button-active{background-color:#fff}.lf-header .lf-header-menu-img{width:var(--header-menu-img-size);height:var(--header-menu-img-size);border-radius:50%;flex-shrink:0;object-fit:cover;cursor:pointer}.lf-header .lf-header-logo-title-wrapper{flex:0 0 auto;max-width:var(--header-logo-title-wrapper-max-width);overflow:hidden;display:flex}.lf-header .lf-header-logo-title-wrapper .lf-header-logo-title-wrapper-link{display:flex;flex-flow:row nowrap;align-items:center;flex:0}.lf-header .lf-header-logo-title-wrapper .lf-header-logo-title-wrapper-link.lf-clickable{cursor:pointer}.lf-header .lf-header-logo-title-wrapper .lf-header-logo{width:var(--header-logo-size);height:var(--header-logo-size);min-width:var(--header-logo-size);min-height:var(--header-logo-size)}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper{display:flex;flex-flow:column}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-title{font-size:var(--header-title-font-size);line-height:calc(var(--header-title-font-size) + 8px)}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-subtitle{font-size:var(--header-subtitle-font-size);line-height:var(--header-subtitle-font-size)}.lf-header lf-input{z-index:var(--header-z-index);flex:1 1 var(--header-input-max-width)}.lf-header lf-input.lf-header-input-mobile{position:fixed!important;left:4px!important;right:4px!important;width:unset!important;max-width:unset!important}.lf-header .spacer{flex:1 0 auto}.lf-menu-icons{min-height:unset!important;cursor:unset!important}.lf-menu-icons:hover{background:transparent!important}.lf-header-progress-bar{z-index:var(--header-z-index);position:fixed;top:var(--header-height)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i3$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$1.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$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: 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: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i7.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: InputComponent, selector: "lf-input", inputs: ["inputConfig", "isMobile", "inputValue"], outputs: ["inputSubmitEvent", "inputChangeEvent", "inputPrefixActionEvent", "inputValueChange"] }], animations: [
971
972
  trigger('slideDownUp', [
972
973
  state('void', style({ transform: 'translateY(-100%)' })),
973
974
  state('*', style({ transform: 'translateY(0)' })),
974
975
  transition(':enter', [style({ transform: 'translateY(-100%)' }), animate('200ms ease-out', style({ transform: 'translateY(0)' }))]),
975
976
  transition(':leave', [animate('200ms ease-in', style({ transform: 'translateY(-100%)' }))])
976
977
  ])
977
- ] }); }
978
+ ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
978
979
  }
979
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: HeaderComponent, decorators: [{
980
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: HeaderComponent, decorators: [{
980
981
  type: Component,
981
- args: [{ selector: 'lf-header', animations: [
982
+ args: [{ selector: 'lf-header', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
982
983
  trigger('slideDownUp', [
983
984
  state('void', style({ transform: 'translateY(-100%)' })),
984
985
  state('*', style({ transform: 'translateY(0)' })),
@@ -995,32 +996,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
995
996
  MatProgressBarModule,
996
997
  MatTooltipModule,
997
998
  InputComponent
998
- ], template: "@if (headerConfig(); as config) {\r\n @if (config.enable) {\r\n <mat-toolbar\r\n class=\"lf-header lf-transitions mat-elevation-z3\"\r\n [class.px-4]=\"!isMobile()\"\r\n [class.px-1]=\"isMobile()\"\r\n [ngClass]=\"config.cssClass\"\r\n [class.lf-gradient]=\"config.gradient\"\r\n color=\"primary\">\r\n <!-- left menu button -->\r\n <ng-container\r\n [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n menuButton: config.leftMenuButton!,\r\n hideLabel: true,\r\n }\"></ng-container>\r\n <!-- logo & title -->\r\n <div\r\n class=\"lf-header-logo-title-wrapper ml-1 mr-2\"\r\n [class.ml-10]=\"config.leftMenuButton && !isMobile()\">\r\n <!-- link wrapper -->\r\n <div\r\n class=\"lf-header-logo-title-wrapper-link\"\r\n [class.lf-clickable]=\"config.titleRouterLink\"\r\n [routerLink]=\"config.titleRouterLink ? [config.titleRouterLink] : null\">\r\n <!-- svg logo -->\r\n @if (config.svgLogo) {\r\n <mat-icon\r\n class=\"lf-header-logo\"\r\n [class.mr-3]=\"config.title\"\r\n [svgIcon]=\"config.svgLogo!\"></mat-icon>\r\n <!-- img logo -->\r\n } @else {\r\n @if (config.imgLogo) {\r\n <img\r\n class=\"lf-header-logo\"\r\n [class.mr-3]=\"config.title\"\r\n [src]=\"config.imgLogo\"\r\n alt=\"Logo\" />\r\n }\r\n }\r\n <!-- title -->\r\n @if (config.title) {\r\n <div class=\"lf-header-title-wrapper\">\r\n @if (config.title) {\r\n <span class=\"lf-header-title\">\r\n {{ config.title }}\r\n </span>\r\n }\r\n @if (config.subtitle) {\r\n <span class=\"lf-header-subtitle\">\r\n {{ config.subtitle }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n <!-- input -->\r\n @if (config.inputConfig?.enable) {\r\n <div class=\"spacer\"></div>\r\n <lf-input\r\n [class.lf-header-input-mobile]=\"isMobile()\"\r\n [class.mx-3]=\"!isMobile()\"\r\n [inputConfig]=\"config.inputConfig!\"\r\n [isMobile]=\"isMobile()\"\r\n (inputSubmitEvent)=\"inputSubmitted($event)\"\r\n (inputChangeEvent)=\"inputChanged($event)\"\r\n (inputPrefixActionEvent)=\"inputClosed()\"></lf-input>\r\n }\r\n <!-- spacer -->\r\n <div class=\"spacer\"></div>\r\n <!-- right menu buttons -->\r\n @if (config.responsiveConfig?.enable && isMobile()) {\r\n @let exludedButtons = getRightExcludedButtons();\r\n @for (button of exludedButtons; track button.id) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n menuButton: button,\r\n }\"></ng-container>\r\n }\r\n @let mobileButton = getRightMobileButton();\r\n <ng-container\r\n [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n menuButton: mobileButton,\r\n }\"></ng-container>\r\n } @else {\r\n @for (button of config.rightMenuButtons; track button.id) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n menuButton: button,\r\n }\"></ng-container>\r\n }\r\n }\r\n </mat-toolbar>\r\n <!-- loading bar -->\r\n @if (config.loading || (config.showRouteLoading && routeLoading())) {\r\n <mat-progress-bar\r\n class=\"lf-header-progress-bar\"\r\n color=\"accent\"\r\n mode=\"indeterminate\"></mat-progress-bar>\r\n }\r\n }\r\n}\r\n\r\n<!-- header menu button -->\r\n<ng-template #menuButtonTemplate let-menuButton=\"menuButton\" let-hideLabel=\"hideLabel\">\r\n @if (menuButton) {\r\n <!-- label button -->\r\n @if (menuButton.label && !hideLabel) {\r\n <button\r\n mat-button\r\n class=\"lf-header-menu-button\"\r\n [class.lf-header-menu-button-active]=\"isActive(menuButton.id) && !menuButton.disabled\"\r\n [ngClass]=\"menuButton.cssClass\"\r\n [disabled]=\"menuButton.disabled\"\r\n (click)=\"buttonClicked(menuButton.id)\"\r\n [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n [aria-label]=\"menuButton.label || menuButton.tooltip\"\r\n [matTooltip]=\"menuButton.tooltip\">\r\n <!-- icon -->\r\n @if (menuButton.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig()?.outlineIcons\">\r\n {{ menuButton.matIcon }}\r\n </mat-icon>\r\n } @else if (menuButton.svgIcon) {\r\n <mat-icon [svgIcon]=\"menuButton.svgIcon\"></mat-icon>\r\n }\r\n <!-- label -->\r\n {{ menuButton.label }}\r\n </button>\r\n <!-- icon button -->\r\n } @else if (menuButton.matIcon || menuButton.svgIcon) {\r\n <button\r\n mat-icon-button\r\n class=\"lf-header-menu-button\"\r\n [ngClass]=\"menuButton.cssClass\"\r\n [disabled]=\"menuButton.disabled\"\r\n (click)=\"buttonClicked(menuButton.id)\"\r\n [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n [matTooltip]=\"menuButton.tooltip\"\r\n [aria-label]=\"menuButton.id || menuButton.tooltip\">\r\n <!-- icon -->\r\n @if (menuButton.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig()?.outlineIcons\">\r\n {{ menuButton.matIcon }}\r\n </mat-icon>\r\n } @else if (menuButton.svgIcon) {\r\n <mat-icon [svgIcon]=\"menuButton.svgIcon\"></mat-icon>\r\n }\r\n </button>\r\n <!-- img button -->\r\n } @else if (menuButton.imgIcon) {\r\n <img\r\n class=\"lf-header-menu-img px-1\"\r\n [src]=\"menuButton.imgIcon\"\r\n width=\"48\"\r\n height=\"48\"\r\n [ngClass]=\"menuButton.cssClass\"\r\n (click)=\"buttonClicked(menuButton.id)\"\r\n [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n [matTooltip]=\"menuButton.tooltip\"\r\n [aria-label]=\"menuButton.id || menuButton.tooltip\" />\r\n }\r\n <!-- menu -->\r\n <mat-menu #menu=\"matMenu\">\r\n <!-- label menu buttons -->\r\n @for (button of menuButton.menuButtons; track button.id) {\r\n <!-- menu button -->\r\n @if (button.label) {\r\n <button\r\n mat-menu-item\r\n [class.lf-header-menu-button-active]=\"isActive(button.id)\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"button.disabled\"\r\n (click)=\"buttonClicked(button.id)\"\r\n [matTooltip]=\"button.tooltip\"\r\n [aria-label]=\"button.label\">\r\n <!-- icon -->\r\n @if (button.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig()?.outlineIcons\">\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n } @else if (button.svgIcon) {\r\n <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n }\r\n <!-- label -->\r\n <span>{{ button.label }}</span>\r\n </button>\r\n }\r\n }\r\n <!-- icon menu buttons -->\r\n <div mat-menu-item class=\"lf-menu-icons px-1\" [disableRipple]=\"true\">\r\n @for (button of menuButton.menuButtons; track button.id) {\r\n <!-- icon button -->\r\n @if (!button.label && (button.matIcon || button.svgIcon)) {\r\n <button\r\n mat-icon-button\r\n class=\"lf-menu-icon-button\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"button.disabled\"\r\n (click)=\"buttonClicked(button.id)\"\r\n [matTooltip]=\"button.tooltip\"\r\n [aria-label]=\"button.id || button.tooltip\"\r\n tabindex=\"0\">\r\n <!-- icon -->\r\n @if (button.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig()?.outlineIcons\">\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n } @else if (button.svgIcon) {\r\n <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n }\r\n </button>\r\n }\r\n }\r\n </div>\r\n </mat-menu>\r\n }\r\n</ng-template>\r\n", styles: [".lf-header{z-index:var(--header-z-index);position:fixed;top:0;height:var(--header-height)}.lf-header .lf-header-menu-button{flex-shrink:0;max-width:var(--header-menu-button-max-width)}.lf-header .lf-header-menu-button ::ng-deep .mdc-button__label{overflow:hidden;text-overflow:ellipsis}.lf-header .lf-header-menu-button.lf-header-menu-button-active{background-color:#fff}.lf-header .lf-header-menu-img{width:var(--header-menu-img-size);height:var(--header-menu-img-size);border-radius:50%;flex-shrink:0;object-fit:cover;cursor:pointer}.lf-header .lf-header-logo-title-wrapper{flex:0 0 auto;max-width:var(--header-logo-title-wrapper-max-width);overflow:hidden;display:flex}.lf-header .lf-header-logo-title-wrapper .lf-header-logo-title-wrapper-link{display:flex;flex-flow:row nowrap;align-items:center;flex:0}.lf-header .lf-header-logo-title-wrapper .lf-header-logo-title-wrapper-link.lf-clickable{cursor:pointer}.lf-header .lf-header-logo-title-wrapper .lf-header-logo{width:var(--header-logo-size);height:var(--header-logo-size);min-width:var(--header-logo-size);min-height:var(--header-logo-size)}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper{display:flex;flex-flow:column}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-title{font-size:var(--header-title-font-size);line-height:calc(var(--header-title-font-size) + 8px)}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-subtitle{font-size:var(--header-subtitle-font-size);line-height:var(--header-subtitle-font-size)}.lf-header lf-input{z-index:var(--header-z-index);flex:1 1 var(--header-input-max-width)}.lf-header lf-input.lf-header-input-mobile{position:fixed!important;left:4px!important;right:4px!important;width:unset!important;max-width:unset!important}.lf-header .spacer{flex:1 0 auto}.lf-menu-icons{min-height:unset!important;cursor:unset!important}.lf-menu-icons:hover{background:transparent!important}.lf-header-progress-bar{z-index:var(--header-z-index);position:fixed;top:var(--header-height)}\n"] }]
999
+ ], template: "@if (headerConfig(); as config) {\r\n @if (config.enable) {\r\n <mat-toolbar\r\n class=\"lf-header lf-transitions mat-elevation-z3\"\r\n [class.px-4]=\"!isMobile()\"\r\n [class.px-1]=\"isMobile()\"\r\n [ngClass]=\"config.cssClass\"\r\n [class.lf-gradient]=\"config.gradient\"\r\n color=\"primary\">\r\n <!-- left menu button -->\r\n <ng-container\r\n [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n menuButton: config.leftMenuButton!,\r\n hideLabel: true,\r\n }\"></ng-container>\r\n <!-- logo & title -->\r\n <div\r\n class=\"lf-header-logo-title-wrapper ml-1 mr-2\"\r\n [class.ml-10]=\"config.leftMenuButton && !isMobile()\">\r\n <!-- link wrapper -->\r\n <div\r\n class=\"lf-header-logo-title-wrapper-link\"\r\n [class.lf-clickable]=\"config.titleRouterLink\"\r\n [routerLink]=\"config.titleRouterLink ? [config.titleRouterLink] : null\">\r\n <!-- svg logo -->\r\n @if (config.svgLogo) {\r\n <mat-icon\r\n class=\"lf-header-logo\"\r\n [class.mr-3]=\"config.title\"\r\n [svgIcon]=\"config.svgLogo!\"></mat-icon>\r\n <!-- img logo -->\r\n } @else {\r\n @if (config.imgLogo) {\r\n <img\r\n class=\"lf-header-logo\"\r\n [class.mr-3]=\"config.title\"\r\n [src]=\"config.imgLogo\"\r\n alt=\"Logo\" />\r\n }\r\n }\r\n <!-- title -->\r\n @if (config.title) {\r\n <div class=\"lf-header-title-wrapper\">\r\n @if (config.title) {\r\n <span class=\"lf-header-title\">\r\n {{ config.title }}\r\n </span>\r\n }\r\n @if (config.subtitle) {\r\n <span class=\"lf-header-subtitle\">\r\n {{ config.subtitle }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n <!-- input -->\r\n @if (config.inputConfig?.enable) {\r\n <div class=\"spacer\"></div>\r\n <lf-input\r\n [class.lf-header-input-mobile]=\"isMobile()\"\r\n [class.mx-3]=\"!isMobile()\"\r\n [inputConfig]=\"config.inputConfig!\"\r\n [isMobile]=\"isMobile()\"\r\n (inputSubmitEvent)=\"inputSubmitted($event)\"\r\n (inputChangeEvent)=\"inputChanged($event)\"\r\n (inputPrefixActionEvent)=\"inputClosed()\"></lf-input>\r\n }\r\n <!-- spacer -->\r\n <div class=\"spacer\"></div>\r\n <!-- right menu buttons -->\r\n @if (config.responsiveConfig?.enable && isMobile()) {\r\n @let exludedButtons = rightExcludedButtons();\r\n @for (button of exludedButtons; track button.id) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n menuButton: button,\r\n }\"></ng-container>\r\n }\r\n @let mobileButton = rightMobileButton();\r\n <ng-container\r\n [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n menuButton: mobileButton,\r\n }\"></ng-container>\r\n } @else {\r\n @for (button of config.rightMenuButtons; track button.id) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n menuButton: button,\r\n }\"></ng-container>\r\n }\r\n }\r\n </mat-toolbar>\r\n <!-- loading bar -->\r\n @if (config.loading || (config.showRouteLoading && routeLoading())) {\r\n <mat-progress-bar\r\n class=\"lf-header-progress-bar\"\r\n color=\"accent\"\r\n mode=\"indeterminate\"></mat-progress-bar>\r\n }\r\n }\r\n}\r\n\r\n<!-- header menu button -->\r\n<ng-template #menuButtonTemplate let-menuButton=\"menuButton\" let-hideLabel=\"hideLabel\">\r\n @if (menuButton) {\r\n <!-- label button -->\r\n @if (menuButton.label && !hideLabel) {\r\n <button\r\n mat-button\r\n class=\"lf-header-menu-button\"\r\n [class.lf-header-menu-button-active]=\"isActive()(menuButton.id) && !menuButton.disabled\"\r\n [ngClass]=\"menuButton.cssClass\"\r\n [disabled]=\"menuButton.disabled\"\r\n (click)=\"buttonClicked(menuButton.id)\"\r\n [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n [aria-label]=\"menuButton.label || menuButton.tooltip\"\r\n [matTooltip]=\"menuButton.tooltip\">\r\n <!-- icon -->\r\n @if (menuButton.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig()?.outlineIcons\">\r\n {{ menuButton.matIcon }}\r\n </mat-icon>\r\n } @else if (menuButton.svgIcon) {\r\n <mat-icon [svgIcon]=\"menuButton.svgIcon\"></mat-icon>\r\n }\r\n <!-- label -->\r\n {{ menuButton.label }}\r\n </button>\r\n <!-- icon button -->\r\n } @else if (menuButton.matIcon || menuButton.svgIcon) {\r\n <button\r\n mat-icon-button\r\n class=\"lf-header-menu-button\"\r\n [ngClass]=\"menuButton.cssClass\"\r\n [disabled]=\"menuButton.disabled\"\r\n (click)=\"buttonClicked(menuButton.id)\"\r\n [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n [matTooltip]=\"menuButton.tooltip\"\r\n [aria-label]=\"menuButton.id || menuButton.tooltip\">\r\n <!-- icon -->\r\n @if (menuButton.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig()?.outlineIcons\">\r\n {{ menuButton.matIcon }}\r\n </mat-icon>\r\n } @else if (menuButton.svgIcon) {\r\n <mat-icon [svgIcon]=\"menuButton.svgIcon\"></mat-icon>\r\n }\r\n </button>\r\n <!-- img button -->\r\n } @else if (menuButton.imgIcon) {\r\n <img\r\n class=\"lf-header-menu-img px-1\"\r\n [src]=\"menuButton.imgIcon\"\r\n width=\"48\"\r\n height=\"48\"\r\n [ngClass]=\"menuButton.cssClass\"\r\n (click)=\"buttonClicked(menuButton.id)\"\r\n [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n [matTooltip]=\"menuButton.tooltip\"\r\n [aria-label]=\"menuButton.id || menuButton.tooltip\" />\r\n }\r\n <!-- menu -->\r\n <mat-menu #menu=\"matMenu\">\r\n <!-- label menu buttons -->\r\n @for (button of menuButton.menuButtons; track button.id) {\r\n <!-- menu button -->\r\n @if (button.label) {\r\n <button\r\n mat-menu-item\r\n [class.lf-header-menu-button-active]=\"isActive()(button.id)\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"button.disabled\"\r\n (click)=\"buttonClicked(button.id)\"\r\n [matTooltip]=\"button.tooltip\"\r\n [aria-label]=\"button.label\">\r\n <!-- icon -->\r\n @if (button.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig()?.outlineIcons\">\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n } @else if (button.svgIcon) {\r\n <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n }\r\n <!-- label -->\r\n <span>{{ button.label }}</span>\r\n </button>\r\n }\r\n }\r\n <!-- icon menu buttons -->\r\n <div mat-menu-item class=\"lf-menu-icons px-1\" [disableRipple]=\"true\">\r\n @for (button of menuButton.menuButtons; track button.id) {\r\n <!-- icon button -->\r\n @if (!button.label && (button.matIcon || button.svgIcon)) {\r\n <button\r\n mat-icon-button\r\n class=\"lf-menu-icon-button\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"button.disabled\"\r\n (click)=\"buttonClicked(button.id)\"\r\n [matTooltip]=\"button.tooltip\"\r\n [aria-label]=\"button.id || button.tooltip\"\r\n tabindex=\"0\">\r\n <!-- icon -->\r\n @if (button.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig()?.outlineIcons\">\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n } @else if (button.svgIcon) {\r\n <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n }\r\n </button>\r\n }\r\n }\r\n </div>\r\n </mat-menu>\r\n }\r\n</ng-template>\r\n", styles: [".lf-header{z-index:var(--header-z-index);position:fixed;top:0;height:var(--header-height)}.lf-header .lf-header-menu-button{flex-shrink:0;max-width:var(--header-menu-button-max-width)}.lf-header .lf-header-menu-button ::ng-deep .mdc-button__label{overflow:hidden;text-overflow:ellipsis}.lf-header .lf-header-menu-button.lf-header-menu-button-active{background-color:#fff}.lf-header .lf-header-menu-img{width:var(--header-menu-img-size);height:var(--header-menu-img-size);border-radius:50%;flex-shrink:0;object-fit:cover;cursor:pointer}.lf-header .lf-header-logo-title-wrapper{flex:0 0 auto;max-width:var(--header-logo-title-wrapper-max-width);overflow:hidden;display:flex}.lf-header .lf-header-logo-title-wrapper .lf-header-logo-title-wrapper-link{display:flex;flex-flow:row nowrap;align-items:center;flex:0}.lf-header .lf-header-logo-title-wrapper .lf-header-logo-title-wrapper-link.lf-clickable{cursor:pointer}.lf-header .lf-header-logo-title-wrapper .lf-header-logo{width:var(--header-logo-size);height:var(--header-logo-size);min-width:var(--header-logo-size);min-height:var(--header-logo-size)}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper{display:flex;flex-flow:column}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-title{font-size:var(--header-title-font-size);line-height:calc(var(--header-title-font-size) + 8px)}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-subtitle{font-size:var(--header-subtitle-font-size);line-height:var(--header-subtitle-font-size)}.lf-header lf-input{z-index:var(--header-z-index);flex:1 1 var(--header-input-max-width)}.lf-header lf-input.lf-header-input-mobile{position:fixed!important;left:4px!important;right:4px!important;width:unset!important;max-width:unset!important}.lf-header .spacer{flex:1 0 auto}.lf-menu-icons{min-height:unset!important;cursor:unset!important}.lf-menu-icons:hover{background:transparent!important}.lf-header-progress-bar{z-index:var(--header-z-index);position:fixed;top:var(--header-height)}\n"] }]
999
1000
  }], propDecorators: { libraryConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "libraryConfig", required: false }] }], headerConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerConfig", required: false }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], routeLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "routeLoading", required: false }] }], currentRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentRoute", required: false }] }], headerConfigUpdateEvent: [{ type: i0.Output, args: ["headerConfigUpdateEvent"] }], headerButtonClickEvent: [{ type: i0.Output, args: ["headerButtonClickEvent"] }], headerInputSubmitEvent: [{ type: i0.Output, args: ["headerInputSubmitEvent"] }], headerInputChangeEvent: [{ type: i0.Output, args: ["headerInputChangeEvent"] }] } });
1000
1001
 
1001
1002
  class LoadingOverlayComponent {
1002
1003
  constructor() {
1003
1004
  this.libraryConfig = inject(CONFIG, { optional: true });
1004
1005
  this.scaffoldService = inject(ScaffoldService);
1005
- this.portal = null;
1006
- this.loadingOverlayConfig = null;
1006
+ this.loadingOverlayConfig = signal(null, ...(ngDevMode ? [{ debugName: "loadingOverlayConfig" }] : []));
1007
+ this.portal = signal(null, ...(ngDevMode ? [{ debugName: "portal" }] : []));
1007
1008
  }
1008
1009
  ngOnInit() {
1009
- this.loadingOverlayConfig = this.scaffoldService.scaffoldConfig?.loadingOverlayConfig || null;
1010
- if (this.loadingOverlayConfig?.customComponent) {
1011
- this.portal = new ComponentPortal(this.loadingOverlayConfig?.customComponent);
1010
+ this.loadingOverlayConfig.set(this.scaffoldService.scaffoldConfig?.loadingOverlayConfig || null);
1011
+ const customComponent = this.loadingOverlayConfig()?.customComponent || null;
1012
+ if (customComponent) {
1013
+ this.portal.set(new ComponentPortal(customComponent));
1012
1014
  }
1013
1015
  }
1014
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: LoadingOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1015
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: LoadingOverlayComponent, isStandalone: true, selector: "lf-loading-overlay", ngImport: i0, template: "@if (!portal) {\r\n <div\r\n [ngClass]=\"loadingOverlayConfig?.cssClass\"\r\n [class.lf-gradient-spinner]=\"loadingOverlayConfig?.gradient\">\r\n <mat-progress-spinner mode=\"indeterminate\"></mat-progress-spinner>\r\n </div>\r\n} @else {\r\n <ng-template [cdkPortalOutlet]=\"portal\"></ng-template>\r\n}\r\n", styles: [".lf-gradient-spinner{position:relative;display:inline-block}.lf-gradient-spinner mat-progress-spinner,.lf-gradient-spinner mat-spinner{opacity:0}.lf-gradient-spinner:before{content:\"\";position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--color-primary),var(--color-accent));-webkit-mask:radial-gradient(farthest-side,transparent 77%,black 78%);mask:radial-gradient(farthest-side,transparent 77%,black 78%);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i2$2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
1016
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: LoadingOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1017
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: LoadingOverlayComponent, isStandalone: true, selector: "lf-loading-overlay", ngImport: i0, template: "@if (portal(); as portal) {\r\n <ng-template [cdkPortalOutlet]=\"portal\"></ng-template>\r\n} @else {\r\n <div\r\n [ngClass]=\"loadingOverlayConfig()?.cssClass\"\r\n [class.lf-gradient-spinner]=\"loadingOverlayConfig()?.gradient\">\r\n <mat-progress-spinner mode=\"indeterminate\"></mat-progress-spinner>\r\n </div>\r\n}\r\n", styles: [".lf-gradient-spinner{position:relative;display:inline-block}.lf-gradient-spinner mat-progress-spinner,.lf-gradient-spinner mat-spinner{opacity:0}.lf-gradient-spinner:before{content:\"\";position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--color-primary),var(--color-accent));-webkit-mask:radial-gradient(farthest-side,transparent 78%,black 79%);mask:radial-gradient(farthest-side,transparent 78%,black 79%);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i2$2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1016
1018
  }
1017
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: LoadingOverlayComponent, decorators: [{
1019
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: LoadingOverlayComponent, decorators: [{
1018
1020
  type: Component,
1019
- args: [{ selector: 'lf-loading-overlay', standalone: true, imports: [
1021
+ args: [{ selector: 'lf-loading-overlay', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
1020
1022
  CommonModule,
1021
1023
  PortalModule,
1022
1024
  MatProgressSpinner
1023
- ], template: "@if (!portal) {\r\n <div\r\n [ngClass]=\"loadingOverlayConfig?.cssClass\"\r\n [class.lf-gradient-spinner]=\"loadingOverlayConfig?.gradient\">\r\n <mat-progress-spinner mode=\"indeterminate\"></mat-progress-spinner>\r\n </div>\r\n} @else {\r\n <ng-template [cdkPortalOutlet]=\"portal\"></ng-template>\r\n}\r\n", styles: [".lf-gradient-spinner{position:relative;display:inline-block}.lf-gradient-spinner mat-progress-spinner,.lf-gradient-spinner mat-spinner{opacity:0}.lf-gradient-spinner:before{content:\"\";position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--color-primary),var(--color-accent));-webkit-mask:radial-gradient(farthest-side,transparent 77%,black 78%);mask:radial-gradient(farthest-side,transparent 77%,black 78%);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
1025
+ ], template: "@if (portal(); as portal) {\r\n <ng-template [cdkPortalOutlet]=\"portal\"></ng-template>\r\n} @else {\r\n <div\r\n [ngClass]=\"loadingOverlayConfig()?.cssClass\"\r\n [class.lf-gradient-spinner]=\"loadingOverlayConfig()?.gradient\">\r\n <mat-progress-spinner mode=\"indeterminate\"></mat-progress-spinner>\r\n </div>\r\n}\r\n", styles: [".lf-gradient-spinner{position:relative;display:inline-block}.lf-gradient-spinner mat-progress-spinner,.lf-gradient-spinner mat-spinner{opacity:0}.lf-gradient-spinner:before{content:\"\";position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--color-primary),var(--color-accent));-webkit-mask:radial-gradient(farthest-side,transparent 78%,black 79%);mask:radial-gradient(farthest-side,transparent 78%,black 79%);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
1024
1026
  }] });
1025
1027
 
1026
1028
  class NavbarComponent {
@@ -1030,6 +1032,11 @@ class NavbarComponent {
1030
1032
  this.isMobile = input(false, ...(ngDevMode ? [{ debugName: "isMobile" }] : []));
1031
1033
  this.currentRoute = input(...(ngDevMode ? [undefined, { debugName: "currentRoute" }] : []));
1032
1034
  this.navbarButtonClickEvent = output();
1035
+ this.isActive = computed(() => {
1036
+ const currentRoute = this.currentRoute();
1037
+ const route = currentRoute?.substring(currentRoute.indexOf('/') + 1) || '';
1038
+ return (id) => !!route && !!id && route === id;
1039
+ }, ...(ngDevMode ? [{ debugName: "isActive" }] : []));
1033
1040
  }
1034
1041
  buttonClicked(id) {
1035
1042
  if (!id) {
@@ -1037,16 +1044,8 @@ class NavbarComponent {
1037
1044
  }
1038
1045
  this.navbarButtonClickEvent.emit(id);
1039
1046
  }
1040
- isActive(id) {
1041
- const currentRoute = this.currentRoute();
1042
- if (!id || !currentRoute) {
1043
- return false;
1044
- }
1045
- const route = currentRoute.substring(currentRoute.indexOf('/') + 1);
1046
- return route === id;
1047
- }
1048
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: NavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1049
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: NavbarComponent, isStandalone: true, selector: "lf-navbar", inputs: { libraryConfig: { classPropertyName: "libraryConfig", publicName: "libraryConfig", isSignal: true, isRequired: false, transformFunction: null }, navbarConfig: { classPropertyName: "navbarConfig", publicName: "navbarConfig", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, currentRoute: { classPropertyName: "currentRoute", publicName: "currentRoute", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navbarButtonClickEvent: "navbarButtonClickEvent" }, ngImport: i0, template: "@if (navbarConfig(); as config) {\r\n @if (config.enable) {\r\n <div\r\n [@responsiveSlide]=\"isMobile() ? 'mobile' : 'desktop'\"\r\n class=\"mat-app-background lf-transitions mat-elevation-z3\"\r\n [class.lf-navbar]=\"!isMobile()\"\r\n [class.lf-navbar-mobile]=\"isMobile()\"\r\n [ngClass]=\"config.cssClass\">\r\n <!-- items -->\r\n <div [class.lf-navbar-items]=\"!isMobile()\" [class.lf-navbar-mobile-items]=\"isMobile()\">\r\n <!-- item -->\r\n @for (button of config.buttons; track button.id; let i = $index) {\r\n @if (i < 5) {\r\n <div\r\n class=\"lf-navbar-item\"\r\n [class.lf-navbar-item-active]=\"isActive(button.id)\"\r\n [ngClass]=\"button.cssClass\"\r\n (click)=\"buttonClicked(button.id)\"\r\n tabindex=\"0\"\r\n role=\"button\"\r\n [matTooltip]=\"button.tooltip\">\r\n <!-- icon -->\r\n @if (button.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig()?.outlineIcons\">\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n } @else if (button.svgIcon) {\r\n <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n }\r\n <!-- label -->\r\n <!-- show a protected space on desktop so the icon doesn't move up and down -->\r\n @if (button?.label) {\r\n <span class=\"lf-navbar-item-label\">\r\n {{\r\n isActive(button.id) || config.showAllLabels\r\n ? button.label\r\n : isMobile()\r\n ? \"\"\r\n : \"&nbsp;\"\r\n }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n }\r\n}\r\n", styles: [".lf-navbar{z-index:var(--navbar-z-index);position:fixed;left:0;top:0;height:100vh;padding:calc(var(--header-height) + 16px) var(--navbar-padding) 0 var(--navbar-padding);border-right:solid 1px rgba(0,0,0,.12)}.lf-navbar .lf-navbar-items{display:flex;flex-flow:column;align-items:center}.lf-navbar-mobile{z-index:var(--navbar-z-index);position:fixed;left:0;bottom:0;width:100vw;padding:var(--navbar-padding) 0;box-sizing:border-box;border-top:solid 1px rgba(0,0,0,.12)}.lf-navbar-mobile .lf-navbar-mobile-items{display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-evenly}.lf-navbar-mobile .lf-navbar-mobile-items .lf-navbar-item{height:var(--navbar-height-mobile)!important}.lf-navbar-item{width:var(--navbar-width);height:var(--navbar-height);display:flex;align-items:center;justify-content:center;flex-flow:column;border-radius:var(--navbar-item-border-radius);cursor:pointer}.lf-navbar-item.lf-navbar-item-active{color:var(--color-primary)}.lf-navbar-item .lf-navbar-item-icon{width:calc(var(--navbar-width) / 3);height:calc(var(--navbar-height) / 3);overflow:visible!important}.lf-navbar-item .lf-navbar-item-label{max-width:var(--navbar-width);white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;text-transform:none;vertical-align:top;font-size:var(--navbar-item-label-font-size);font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], animations: [
1047
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: NavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1048
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: NavbarComponent, isStandalone: true, selector: "lf-navbar", inputs: { libraryConfig: { classPropertyName: "libraryConfig", publicName: "libraryConfig", isSignal: true, isRequired: false, transformFunction: null }, navbarConfig: { classPropertyName: "navbarConfig", publicName: "navbarConfig", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, currentRoute: { classPropertyName: "currentRoute", publicName: "currentRoute", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navbarButtonClickEvent: "navbarButtonClickEvent" }, ngImport: i0, template: "@if (navbarConfig(); as config) {\r\n @if (config.enable) {\r\n <div\r\n [@responsiveSlide]=\"isMobile() ? 'mobile' : 'desktop'\"\r\n class=\"mat-app-background lf-transitions mat-elevation-z3\"\r\n [class.lf-navbar]=\"!isMobile()\"\r\n [class.lf-navbar-mobile]=\"isMobile()\"\r\n [ngClass]=\"config.cssClass\">\r\n <!-- items -->\r\n <div [class.lf-navbar-items]=\"!isMobile()\" [class.lf-navbar-mobile-items]=\"isMobile()\">\r\n <!-- item -->\r\n @for (button of config.buttons; track button.id; let i = $index) {\r\n @if (i < 5) {\r\n <div\r\n class=\"lf-navbar-item\"\r\n [class.lf-navbar-item-active]=\"isActive()(button.id)\"\r\n [ngClass]=\"button.cssClass\"\r\n (click)=\"buttonClicked(button.id)\"\r\n tabindex=\"0\"\r\n role=\"button\"\r\n [matTooltip]=\"button.tooltip\">\r\n <!-- icon -->\r\n @if (button.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig()?.outlineIcons\">\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n } @else if (button.svgIcon) {\r\n <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n }\r\n <!-- label -->\r\n <!-- show a protected space on desktop so the icon doesn't move up and down -->\r\n @if (button?.label) {\r\n <span class=\"lf-navbar-item-label\">\r\n {{\r\n isActive()(button.id) || config.showAllLabels\r\n ? button.label\r\n : isMobile()\r\n ? \"\"\r\n : \"&nbsp;\"\r\n }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n }\r\n}\r\n", styles: [".lf-navbar{z-index:var(--navbar-z-index);position:fixed;left:0;top:0;height:100vh;padding:calc(var(--header-height) + 16px) var(--navbar-padding) 0 var(--navbar-padding);border-right:solid 1px rgba(0,0,0,.12)}.lf-navbar .lf-navbar-items{display:flex;flex-flow:column;align-items:center}.lf-navbar-mobile{z-index:var(--navbar-z-index);position:fixed;left:0;bottom:0;width:100vw;padding:var(--navbar-padding) 0;box-sizing:border-box;border-top:solid 1px rgba(0,0,0,.12)}.lf-navbar-mobile .lf-navbar-mobile-items{display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-evenly}.lf-navbar-mobile .lf-navbar-mobile-items .lf-navbar-item{height:var(--navbar-height-mobile)!important}.lf-navbar-item{width:var(--navbar-width);height:var(--navbar-height);display:flex;align-items:center;justify-content:center;flex-flow:column;border-radius:var(--navbar-item-border-radius);cursor:pointer}.lf-navbar-item.lf-navbar-item-active{color:var(--color-primary)}.lf-navbar-item .lf-navbar-item-icon{width:calc(var(--navbar-width) / 3);height:calc(var(--navbar-height) / 3);overflow:visible!important}.lf-navbar-item .lf-navbar-item-label{max-width:var(--navbar-width);white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;text-transform:none;vertical-align:top;font-size:var(--navbar-item-label-font-size);font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], animations: [
1050
1049
  trigger('responsiveSlide', [
1051
1050
  // States for desktop and mobile
1052
1051
  state('desktop', style({ transform: 'translateX(0)' })),
@@ -1070,11 +1069,11 @@ class NavbarComponent {
1070
1069
  animate('200ms linear', style({ transform: 'translateY(100%)' }))
1071
1070
  ]),
1072
1071
  ])
1073
- ] }); }
1072
+ ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1074
1073
  }
1075
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: NavbarComponent, decorators: [{
1074
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: NavbarComponent, decorators: [{
1076
1075
  type: Component,
1077
- args: [{ selector: 'lf-navbar', animations: [
1076
+ args: [{ selector: 'lf-navbar', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
1078
1077
  trigger('responsiveSlide', [
1079
1078
  // States for desktop and mobile
1080
1079
  state('desktop', style({ transform: 'translateX(0)' })),
@@ -1102,7 +1101,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
1102
1101
  CommonModule,
1103
1102
  MatIconModule,
1104
1103
  MatTooltipModule
1105
- ], template: "@if (navbarConfig(); as config) {\r\n @if (config.enable) {\r\n <div\r\n [@responsiveSlide]=\"isMobile() ? 'mobile' : 'desktop'\"\r\n class=\"mat-app-background lf-transitions mat-elevation-z3\"\r\n [class.lf-navbar]=\"!isMobile()\"\r\n [class.lf-navbar-mobile]=\"isMobile()\"\r\n [ngClass]=\"config.cssClass\">\r\n <!-- items -->\r\n <div [class.lf-navbar-items]=\"!isMobile()\" [class.lf-navbar-mobile-items]=\"isMobile()\">\r\n <!-- item -->\r\n @for (button of config.buttons; track button.id; let i = $index) {\r\n @if (i < 5) {\r\n <div\r\n class=\"lf-navbar-item\"\r\n [class.lf-navbar-item-active]=\"isActive(button.id)\"\r\n [ngClass]=\"button.cssClass\"\r\n (click)=\"buttonClicked(button.id)\"\r\n tabindex=\"0\"\r\n role=\"button\"\r\n [matTooltip]=\"button.tooltip\">\r\n <!-- icon -->\r\n @if (button.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig()?.outlineIcons\">\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n } @else if (button.svgIcon) {\r\n <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n }\r\n <!-- label -->\r\n <!-- show a protected space on desktop so the icon doesn't move up and down -->\r\n @if (button?.label) {\r\n <span class=\"lf-navbar-item-label\">\r\n {{\r\n isActive(button.id) || config.showAllLabels\r\n ? button.label\r\n : isMobile()\r\n ? \"\"\r\n : \"&nbsp;\"\r\n }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n }\r\n}\r\n", styles: [".lf-navbar{z-index:var(--navbar-z-index);position:fixed;left:0;top:0;height:100vh;padding:calc(var(--header-height) + 16px) var(--navbar-padding) 0 var(--navbar-padding);border-right:solid 1px rgba(0,0,0,.12)}.lf-navbar .lf-navbar-items{display:flex;flex-flow:column;align-items:center}.lf-navbar-mobile{z-index:var(--navbar-z-index);position:fixed;left:0;bottom:0;width:100vw;padding:var(--navbar-padding) 0;box-sizing:border-box;border-top:solid 1px rgba(0,0,0,.12)}.lf-navbar-mobile .lf-navbar-mobile-items{display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-evenly}.lf-navbar-mobile .lf-navbar-mobile-items .lf-navbar-item{height:var(--navbar-height-mobile)!important}.lf-navbar-item{width:var(--navbar-width);height:var(--navbar-height);display:flex;align-items:center;justify-content:center;flex-flow:column;border-radius:var(--navbar-item-border-radius);cursor:pointer}.lf-navbar-item.lf-navbar-item-active{color:var(--color-primary)}.lf-navbar-item .lf-navbar-item-icon{width:calc(var(--navbar-width) / 3);height:calc(var(--navbar-height) / 3);overflow:visible!important}.lf-navbar-item .lf-navbar-item-label{max-width:var(--navbar-width);white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;text-transform:none;vertical-align:top;font-size:var(--navbar-item-label-font-size);font-weight:500}\n"] }]
1104
+ ], template: "@if (navbarConfig(); as config) {\r\n @if (config.enable) {\r\n <div\r\n [@responsiveSlide]=\"isMobile() ? 'mobile' : 'desktop'\"\r\n class=\"mat-app-background lf-transitions mat-elevation-z3\"\r\n [class.lf-navbar]=\"!isMobile()\"\r\n [class.lf-navbar-mobile]=\"isMobile()\"\r\n [ngClass]=\"config.cssClass\">\r\n <!-- items -->\r\n <div [class.lf-navbar-items]=\"!isMobile()\" [class.lf-navbar-mobile-items]=\"isMobile()\">\r\n <!-- item -->\r\n @for (button of config.buttons; track button.id; let i = $index) {\r\n @if (i < 5) {\r\n <div\r\n class=\"lf-navbar-item\"\r\n [class.lf-navbar-item-active]=\"isActive()(button.id)\"\r\n [ngClass]=\"button.cssClass\"\r\n (click)=\"buttonClicked(button.id)\"\r\n tabindex=\"0\"\r\n role=\"button\"\r\n [matTooltip]=\"button.tooltip\">\r\n <!-- icon -->\r\n @if (button.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig()?.outlineIcons\">\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n } @else if (button.svgIcon) {\r\n <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n }\r\n <!-- label -->\r\n <!-- show a protected space on desktop so the icon doesn't move up and down -->\r\n @if (button?.label) {\r\n <span class=\"lf-navbar-item-label\">\r\n {{\r\n isActive()(button.id) || config.showAllLabels\r\n ? button.label\r\n : isMobile()\r\n ? \"\"\r\n : \"&nbsp;\"\r\n }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n }\r\n}\r\n", styles: [".lf-navbar{z-index:var(--navbar-z-index);position:fixed;left:0;top:0;height:100vh;padding:calc(var(--header-height) + 16px) var(--navbar-padding) 0 var(--navbar-padding);border-right:solid 1px rgba(0,0,0,.12)}.lf-navbar .lf-navbar-items{display:flex;flex-flow:column;align-items:center}.lf-navbar-mobile{z-index:var(--navbar-z-index);position:fixed;left:0;bottom:0;width:100vw;padding:var(--navbar-padding) 0;box-sizing:border-box;border-top:solid 1px rgba(0,0,0,.12)}.lf-navbar-mobile .lf-navbar-mobile-items{display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-evenly}.lf-navbar-mobile .lf-navbar-mobile-items .lf-navbar-item{height:var(--navbar-height-mobile)!important}.lf-navbar-item{width:var(--navbar-width);height:var(--navbar-height);display:flex;align-items:center;justify-content:center;flex-flow:column;border-radius:var(--navbar-item-border-radius);cursor:pointer}.lf-navbar-item.lf-navbar-item-active{color:var(--color-primary)}.lf-navbar-item .lf-navbar-item-icon{width:calc(var(--navbar-width) / 3);height:calc(var(--navbar-height) / 3);overflow:visible!important}.lf-navbar-item .lf-navbar-item-label{max-width:var(--navbar-width);white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;text-transform:none;vertical-align:top;font-size:var(--navbar-item-label-font-size);font-weight:500}\n"] }]
1106
1105
  }], propDecorators: { libraryConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "libraryConfig", required: false }] }], navbarConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "navbarConfig", required: false }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], currentRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentRoute", required: false }] }], navbarButtonClickEvent: [{ type: i0.Output, args: ["navbarButtonClickEvent"] }] } });
1107
1106
 
1108
1107
  class ScaffoldComponent {
@@ -1123,19 +1122,32 @@ class ScaffoldComponent {
1123
1122
  this.navbarButtonClickEvent = output();
1124
1123
  this.floatingButtonClickEvent = output();
1125
1124
  this.bottomBarButtonClickEvent = output();
1126
- this.scaffoldConfig = null;
1127
- this.headerConfig = null;
1128
- this.navbarConfig = null;
1129
- this.drawerConfig = null;
1130
- this.footerConfig = null;
1131
- this.contentTitleCardConfig = null;
1132
- this.floatingButtonConfig = null;
1133
- this.bottomBarConfig = null;
1134
- this.routeHistory = [];
1135
- this.isMobile = false;
1136
- this.routeLoading = false;
1137
- this.scrollTopPosition = 0;
1138
- this.initialized = false;
1125
+ this.scaffoldConfig = signal(null, ...(ngDevMode ? [{ debugName: "scaffoldConfig" }] : []));
1126
+ this.headerConfig = signal(null, ...(ngDevMode ? [{ debugName: "headerConfig" }] : []));
1127
+ this.navbarConfig = signal(null, ...(ngDevMode ? [{ debugName: "navbarConfig" }] : []));
1128
+ this.drawerConfig = signal(null, ...(ngDevMode ? [{ debugName: "drawerConfig" }] : []));
1129
+ this.drawerPortal = toSignal(this.scaffoldService.drawerPortal$);
1130
+ this.footerConfig = signal(null, ...(ngDevMode ? [{ debugName: "footerConfig" }] : []));
1131
+ this.contentTitleCardConfig = signal(null, ...(ngDevMode ? [{ debugName: "contentTitleCardConfig" }] : []));
1132
+ this.floatingButtonConfig = signal(null, ...(ngDevMode ? [{ debugName: "floatingButtonConfig" }] : []));
1133
+ this.bottomBarConfig = signal(null, ...(ngDevMode ? [{ debugName: "bottomBarConfig" }] : []));
1134
+ this.routeHistory = toSignal(this.routerService.routeHistory$.pipe(tap((routeHistory) => {
1135
+ if (this.libraryConfig?.debugging)
1136
+ this.logger.log('[RouteHistory]', routeHistory);
1137
+ const scrollContainer = this.scrollContainer();
1138
+ if (scrollContainer && this.scaffoldConfig()?.scrollPositionRestoration) {
1139
+ scrollContainer.nativeElement.scrollTop = 0;
1140
+ }
1141
+ })));
1142
+ this.currentRoute = toSignal(this.routerService.currentRoute$);
1143
+ this.routeLoading = toSignal(this.routerService.loading$);
1144
+ this.isMobile = toSignal(this.breakpointService.breakpoint$.pipe(map((breakpointState) => {
1145
+ if (this.libraryConfig?.debugging)
1146
+ this.logger.log('[BreakpointState]', breakpointState);
1147
+ return breakpointState.breakpoints[Breakpoints.XSmall] || breakpointState.breakpoints[Breakpoints.Small];
1148
+ })));
1149
+ this.scrollTopPosition = signal(0, ...(ngDevMode ? [{ debugName: "scrollTopPosition" }] : []));
1150
+ this.initialized = signal(false, ...(ngDevMode ? [{ debugName: "initialized" }] : []));
1139
1151
  this._subscription = new Subscription;
1140
1152
  }
1141
1153
  ngOnInit() {
@@ -1143,70 +1155,29 @@ class ScaffoldComponent {
1143
1155
  this._subscription.add(this.scaffoldService.scaffoldConfig$.subscribe((scaffoldConfig) => {
1144
1156
  if (this.libraryConfig?.debugging)
1145
1157
  this.logger.log('[ScaffoldConfig]', scaffoldConfig);
1146
- this.toggleLoadingOverlay(scaffoldConfig?.loading || false);
1147
- this.scaffoldConfig = scaffoldConfig;
1148
- this.headerConfig = this.scaffoldConfig.headerConfig;
1149
- this.navbarConfig = this.scaffoldConfig.navbarConfig;
1150
- this.drawerConfig = this.scaffoldConfig.drawerConfig;
1151
- this.footerConfig = this.scaffoldConfig.footerConfig;
1152
- this.contentTitleCardConfig = this.scaffoldConfig.contentTitleCardConfig;
1153
- this.floatingButtonConfig = this.scaffoldConfig.floatingButtonConfig;
1154
- this.bottomBarConfig = this.scaffoldConfig.bottomBarConfig;
1155
- }));
1156
- // Listen for drawer portal changes
1157
- this._subscription.add(this.scaffoldService.drawerPortal$.subscribe((drawerPortal) => {
1158
- if (this.libraryConfig?.debugging)
1159
- this.logger.log('[DrawerPortal]', drawerPortal);
1160
- this.drawerPortal = drawerPortal;
1161
- }));
1162
- // Listen for breakpoint changes
1163
- this._subscription.add(this.breakpointService.breakpoint$.subscribe((breakpointState) => {
1164
- if (this.libraryConfig?.debugging)
1165
- this.logger.log('[BreakpointState]', breakpointState);
1166
- if (breakpointState.breakpoints[Breakpoints.XSmall]) {
1167
- this.isMobile = true;
1168
- }
1169
- else if (breakpointState.breakpoints[Breakpoints.Small]) {
1170
- this.isMobile = true;
1171
- }
1172
- else if (breakpointState.breakpoints[Breakpoints.Medium]) {
1173
- this.isMobile = false;
1174
- }
1175
- else if (breakpointState.breakpoints[Breakpoints.Large]) {
1176
- this.isMobile = false;
1158
+ if (scaffoldConfig) {
1159
+ this.toggleLoadingOverlay(scaffoldConfig?.loading || false);
1160
+ this.scaffoldConfig.set(scaffoldConfig);
1161
+ this.headerConfig.set(scaffoldConfig.headerConfig || null);
1162
+ this.navbarConfig.set(scaffoldConfig.navbarConfig || null);
1163
+ this.drawerConfig.set(scaffoldConfig.drawerConfig || null);
1164
+ this.footerConfig.set(scaffoldConfig.footerConfig || null);
1165
+ this.contentTitleCardConfig.set(scaffoldConfig.contentTitleCardConfig || null);
1166
+ this.floatingButtonConfig.set(scaffoldConfig.floatingButtonConfig || null);
1167
+ this.bottomBarConfig.set(scaffoldConfig.bottomBarConfig || null);
1177
1168
  }
1178
1169
  }));
1179
- // Listen for route changes
1180
- this._subscription.add(this.routerService.routeHistory$.subscribe((routeHistory) => {
1181
- if (this.libraryConfig?.debugging)
1182
- this.logger.log('[RouteHistory]', routeHistory);
1183
- if (routeHistory) {
1184
- this.routeHistory = routeHistory;
1185
- }
1186
- const scrollContainer = this.scrollContainer();
1187
- if (scrollContainer && this.scaffoldConfig?.scrollPositionRestoration) {
1188
- scrollContainer.nativeElement.scrollTop = 0;
1189
- }
1190
- }));
1191
- // Listen for current route changes
1192
- this._subscription.add(this.routerService.currentRoute$.subscribe((currentRout) => {
1193
- this.currentRoute = currentRout;
1194
- }));
1195
- // Listen for route loading
1196
- this._subscription.add(this.routerService.loading$.subscribe((routeLoading) => {
1197
- this.routeLoading = routeLoading;
1198
- }));
1199
1170
  // Listen to scroll events
1200
1171
  const scrollContainer = this.scrollContainer();
1201
1172
  if (scrollContainer) {
1202
1173
  const element = scrollContainer.nativeElement;
1203
1174
  this._subscription.add(fromEvent(element, 'scroll').pipe(distinctUntilChanged(), debounceTime(100)).subscribe((e) => {
1204
1175
  const target = e.target;
1205
- this.scrollTopPosition = target.scrollTop;
1176
+ this.scrollTopPosition.set(target.scrollTop);
1206
1177
  }));
1207
1178
  }
1208
1179
  // Listen for fragments in the current route
1209
- if (this.scaffoldConfig?.anchorScrolling) {
1180
+ if (this.scaffoldConfig()?.anchorScrolling) {
1210
1181
  this._subscription.add(this.route.fragment.subscribe((fragment) => {
1211
1182
  if (fragment) {
1212
1183
  if (this.libraryConfig?.debugging)
@@ -1220,7 +1191,7 @@ class ScaffoldComponent {
1220
1191
  }
1221
1192
  }));
1222
1193
  }
1223
- setTimeout(() => { this.initialized = true; });
1194
+ setTimeout(() => { this.initialized.set(true); });
1224
1195
  }
1225
1196
  ngOnDestroy() {
1226
1197
  if (this._subscription) {
@@ -1281,19 +1252,18 @@ class ScaffoldComponent {
1281
1252
  // Loading overlay
1282
1253
  async toggleLoadingOverlay(loading) {
1283
1254
  if (loading) {
1284
- // const { LoadingOverlayComponent } = await import('../loading-overlay/loading-overlay.component');
1285
1255
  this.overlayService.open(LoadingOverlayComponent);
1286
1256
  }
1287
1257
  else {
1288
1258
  this.overlayService.close();
1289
1259
  }
1290
1260
  }
1291
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ScaffoldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1292
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.8", type: ScaffoldComponent, isStandalone: true, 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, isSignal: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n class=\"lf-scaffold lf-transitions mat-app-background mat-typography\"\r\n [ngClass]=\"scaffoldConfig?.cssClass\">\r\n <!-- header -->\r\n <lf-header\r\n [libraryConfig]=\"libraryConfig\"\r\n [headerConfig]=\"headerConfig\"\r\n [isMobile]=\"isMobile\"\r\n [routeLoading]=\"routeLoading\"\r\n [currentRoute]=\"currentRoute\"\r\n (headerConfigUpdateEvent)=\"headerConfigUpdated($event)\"\r\n (headerButtonClickEvent)=\"headerButtonClicked($event)\"\r\n (headerInputSubmitEvent)=\"headerInputSubmitted($event)\"\r\n (headerInputChangeEvent)=\"headerInputChanged($event)\"></lf-header>\r\n <!-- navbar -->\r\n <lf-navbar\r\n [libraryConfig]=\"libraryConfig\"\r\n [navbarConfig]=\"navbarConfig\"\r\n [isMobile]=\"isMobile\"\r\n [currentRoute]=\"currentRoute\"\r\n (navbarButtonClickEvent)=\"navbarButtonClicked($event)\"></lf-navbar>\r\n <!-- content wrapper -->\r\n <div\r\n class=\"lf-content-wrapper\"\r\n [class.lf-show-navbar]=\"navbarConfig?.enable && !isMobile\"\r\n [class.lf-show-header]=\"headerConfig?.enable && !(navbarConfig?.enable && isMobile)\"\r\n [class.lf-show-navbar-mobile]=\"navbarConfig?.enable && isMobile && !headerConfig?.enable\"\r\n [class.lf-show-header-and-navbar-mobile]=\"\r\n headerConfig?.enable && navbarConfig?.enable && isMobile\r\n \"\r\n [class.lf-transitions]=\"initialized\"\r\n #scrollContainer\r\n cdkScrollable>\r\n <!-- drawer -->\r\n <lf-drawer\r\n [libraryConfig]=\"libraryConfig\"\r\n [drawerConfig]=\"drawerConfig\"\r\n [drawerPortal]=\"drawerPortal\"\r\n [isMobile]=\"isMobile\"\r\n [headerEnabled]=\"headerConfig?.enable!\"\r\n (drawerConfigUpdateEvent)=\"drawerConfigUpdated($event)\">\r\n <!-- drawer content -->\r\n <ng-content select=\"[drawerContent]\" drawerContent></ng-content>\r\n <!-- content title card -->\r\n <lf-content-title-card\r\n [libraryConfig]=\"libraryConfig\"\r\n [contentTitleCardConfig]=\"contentTitleCardConfig\"\r\n [isMobile]=\"isMobile\"\r\n [routeHistory]=\"routeHistory\"\r\n (backButtonClickEvent)=\"backButtonClicked()\"></lf-content-title-card>\r\n <!-- main content -->\r\n <div\r\n class=\"lf-content\"\r\n [class.lf-content-mobile]=\"isMobile\"\r\n [class.lf-show-footer]=\"footerConfig?.enable\"\r\n #content>\r\n <ng-content></ng-content>\r\n <!-- to top button -->\r\n <lf-floating-button\r\n [libraryConfig]=\"libraryConfig\"\r\n [floatingButtonConfig]=\"floatingButtonConfig\"\r\n [onTop]=\"scrollTopPosition <= 0\"\r\n [isMobile]=\"isMobile && navbarConfig?.enable!\"\r\n [bottomBarEnabled]=\"bottomBarConfig?.enable!\"\r\n (floatingButtonConfigUpdateEvent)=\"floatingButtonConfigUpdated($event)\"\r\n (floatingButtonClickEvent)=\"floatingButtonClicked($event)\"></lf-floating-button>\r\n </div>\r\n <!-- footer -->\r\n <lf-footer [libraryConfig]=\"libraryConfig\" [footerConfig]=\"footerConfig\"></lf-footer>\r\n </lf-drawer>\r\n </div>\r\n <!-- bottom bar -->\r\n <lf-bottom-bar\r\n [libraryConfig]=\"libraryConfig\"\r\n [bottomBarConfig]=\"bottomBarConfig\"\r\n [isMobile]=\"isMobile && navbarConfig?.enable!\"\r\n [navbarEnabled]=\"navbarConfig?.enable!\"\r\n (bottomBarCloseClickEvent)=\"bottomBarCloseClicked($event)\"\r\n (bottomBarButtonClickEvent)=\"bottomBarButtonClicked($event)\"></lf-bottom-bar>\r\n</div>\r\n", styles: [".lf-scaffold{height:100vh}.lf-scaffold .lf-content-wrapper{position:absolute;inset:0;overflow-y:auto}.lf-scaffold .lf-content-wrapper.lf-show-navbar{left:calc(var(--navbar-height) + 2 * var(--navbar-padding))}.lf-scaffold .lf-content-wrapper.lf-show-header{top:var(--header-height);height:calc(100vh - var(--header-height))}.lf-scaffold .lf-content-wrapper.lf-show-navbar-mobile{height:calc(100vh - var(--navbar-height-mobile))}.lf-scaffold .lf-content-wrapper.lf-show-header-and-navbar-mobile{top:var(--header-height);height:calc(100vh - var(--header-height) - var(--navbar-height-mobile))}.lf-scaffold .lf-content-wrapper .lf-content{padding-left:var(--content-padding);padding-right:var(--content-padding);padding-bottom:var(--content-padding)}.lf-scaffold .lf-content-wrapper .lf-content.lf-content-mobile{padding-left:var(--content-padding-mobile);padding-right:var(--content-padding-mobile);padding-bottom:var(--content-padding-mobile)}.lf-scaffold .lf-content-wrapper .lf-content.lf-show-footer{min-height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: HeaderComponent, selector: "lf-header", inputs: ["libraryConfig", "headerConfig", "isMobile", "routeLoading", "currentRoute"], outputs: ["headerConfigUpdateEvent", "headerButtonClickEvent", "headerInputSubmitEvent", "headerInputChangeEvent"] }, { kind: "component", type: NavbarComponent, selector: "lf-navbar", inputs: ["libraryConfig", "navbarConfig", "isMobile", "currentRoute"], outputs: ["navbarButtonClickEvent"] }, { kind: "component", type: DrawerComponent, selector: "lf-drawer", inputs: ["libraryConfig", "drawerConfig", "isMobile", "headerEnabled", "drawerPortal"], outputs: ["drawerConfigUpdateEvent"] }, { kind: "component", type: FooterComponent, selector: "lf-footer", inputs: ["libraryConfig", "footerConfig"] }, { kind: "component", type: ContentTitleCardComponent, selector: "lf-content-title-card", inputs: ["libraryConfig", "contentTitleCardConfig", "isMobile", "routeHistory"], outputs: ["backButtonClickEvent"] }, { kind: "component", type: FloatingButtonComponent, selector: "lf-floating-button", inputs: ["libraryConfig", "floatingButtonConfig", "onTop", "isMobile", "bottomBarEnabled"], outputs: ["floatingButtonConfigUpdateEvent", "floatingButtonClickEvent"] }, { kind: "component", type: BottomBarComponent, selector: "lf-bottom-bar", inputs: ["libraryConfig", "bottomBarConfig", "isMobile", "navbarEnabled"], outputs: ["bottomBarCloseClickEvent", "bottomBarButtonClickEvent"] }] }); }
1261
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ScaffoldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1262
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.3", type: ScaffoldComponent, isStandalone: true, 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, isSignal: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n class=\"lf-scaffold lf-transitions mat-app-background mat-typography\"\r\n [ngClass]=\"scaffoldConfig()?.cssClass\">\r\n <!-- header -->\r\n <lf-header\r\n [libraryConfig]=\"libraryConfig\"\r\n [headerConfig]=\"headerConfig()\"\r\n [isMobile]=\"isMobile()!\"\r\n [routeLoading]=\"routeLoading()!\"\r\n [currentRoute]=\"currentRoute()\"\r\n (headerConfigUpdateEvent)=\"headerConfigUpdated($event)\"\r\n (headerButtonClickEvent)=\"headerButtonClicked($event)\"\r\n (headerInputSubmitEvent)=\"headerInputSubmitted($event)\"\r\n (headerInputChangeEvent)=\"headerInputChanged($event)\"></lf-header>\r\n <!-- navbar -->\r\n <lf-navbar\r\n [libraryConfig]=\"libraryConfig\"\r\n [navbarConfig]=\"navbarConfig()\"\r\n [isMobile]=\"isMobile()!\"\r\n [currentRoute]=\"currentRoute()\"\r\n (navbarButtonClickEvent)=\"navbarButtonClicked($event)\"></lf-navbar>\r\n <!-- content wrapper -->\r\n <div\r\n class=\"lf-content-wrapper\"\r\n [class.lf-show-navbar]=\"navbarConfig()?.enable && !isMobile()\"\r\n [class.lf-show-header]=\"headerConfig()?.enable && !(navbarConfig()?.enable && isMobile())\"\r\n [class.lf-show-navbar-mobile]=\"navbarConfig()?.enable && isMobile() && !headerConfig()?.enable\"\r\n [class.lf-show-header-and-navbar-mobile]=\"\r\n headerConfig()?.enable && navbarConfig()?.enable && isMobile()\r\n \"\r\n [class.lf-transitions]=\"initialized()\"\r\n #scrollContainer\r\n cdkScrollable>\r\n <!-- drawer -->\r\n <lf-drawer\r\n [libraryConfig]=\"libraryConfig\"\r\n [drawerConfig]=\"drawerConfig()\"\r\n [drawerPortal]=\"drawerPortal()\"\r\n [isMobile]=\"isMobile()!\"\r\n [headerEnabled]=\"headerConfig()?.enable!\"\r\n (drawerConfigUpdateEvent)=\"drawerConfigUpdated($event)\">\r\n <!-- drawer content -->\r\n <ng-content select=\"[drawerContent]\" drawerContent></ng-content>\r\n <!-- content title card -->\r\n <lf-content-title-card\r\n [libraryConfig]=\"libraryConfig\"\r\n [contentTitleCardConfig]=\"contentTitleCardConfig()\"\r\n [isMobile]=\"isMobile()!\"\r\n [routeHistory]=\"routeHistory()!\"\r\n (backButtonClickEvent)=\"backButtonClicked()\"></lf-content-title-card>\r\n <!-- main content -->\r\n <div\r\n class=\"lf-content\"\r\n [class.lf-content-mobile]=\"isMobile()\"\r\n [class.lf-show-footer]=\"footerConfig()?.enable\"\r\n #content>\r\n <ng-content></ng-content>\r\n <!-- to top button -->\r\n <lf-floating-button\r\n [libraryConfig]=\"libraryConfig\"\r\n [floatingButtonConfig]=\"floatingButtonConfig()\"\r\n [onTop]=\"scrollTopPosition() <= 0\"\r\n [isMobile]=\"isMobile()! && navbarConfig()?.enable!\"\r\n [bottomBarEnabled]=\"bottomBarConfig()?.enable!\"\r\n (floatingButtonConfigUpdateEvent)=\"floatingButtonConfigUpdated($event)\"\r\n (floatingButtonClickEvent)=\"floatingButtonClicked($event)\"></lf-floating-button>\r\n </div>\r\n <!-- footer -->\r\n <lf-footer [libraryConfig]=\"libraryConfig\" [footerConfig]=\"footerConfig()\"></lf-footer>\r\n </lf-drawer>\r\n </div>\r\n <!-- bottom bar -->\r\n <lf-bottom-bar\r\n [libraryConfig]=\"libraryConfig\"\r\n [bottomBarConfig]=\"bottomBarConfig()\"\r\n [isMobile]=\"isMobile()! && navbarConfig()?.enable!\"\r\n [navbarEnabled]=\"navbarConfig()?.enable!\"\r\n (bottomBarCloseClickEvent)=\"bottomBarCloseClicked($event)\"\r\n (bottomBarButtonClickEvent)=\"bottomBarButtonClicked($event)\"></lf-bottom-bar>\r\n</div>\r\n", styles: [".lf-scaffold{height:100vh}.lf-scaffold .lf-content-wrapper{position:absolute;inset:0;overflow-y:auto}.lf-scaffold .lf-content-wrapper.lf-show-navbar{left:calc(var(--navbar-height) + 2 * var(--navbar-padding))}.lf-scaffold .lf-content-wrapper.lf-show-header{top:var(--header-height);height:calc(100vh - var(--header-height))}.lf-scaffold .lf-content-wrapper.lf-show-navbar-mobile{height:calc(100vh - var(--navbar-height-mobile))}.lf-scaffold .lf-content-wrapper.lf-show-header-and-navbar-mobile{top:var(--header-height);height:calc(100vh - var(--header-height) - var(--navbar-height-mobile))}.lf-scaffold .lf-content-wrapper .lf-content{padding-left:var(--content-padding);padding-right:var(--content-padding);padding-bottom:var(--content-padding)}.lf-scaffold .lf-content-wrapper .lf-content.lf-content-mobile{padding-left:var(--content-padding-mobile);padding-right:var(--content-padding-mobile);padding-bottom:var(--content-padding-mobile)}.lf-scaffold .lf-content-wrapper .lf-content.lf-show-footer{min-height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: HeaderComponent, selector: "lf-header", inputs: ["libraryConfig", "headerConfig", "isMobile", "routeLoading", "currentRoute"], outputs: ["headerConfigUpdateEvent", "headerButtonClickEvent", "headerInputSubmitEvent", "headerInputChangeEvent"] }, { kind: "component", type: NavbarComponent, selector: "lf-navbar", inputs: ["libraryConfig", "navbarConfig", "isMobile", "currentRoute"], outputs: ["navbarButtonClickEvent"] }, { kind: "component", type: DrawerComponent, selector: "lf-drawer", inputs: ["libraryConfig", "drawerConfig", "isMobile", "headerEnabled", "drawerPortal"], outputs: ["drawerConfigUpdateEvent"] }, { kind: "component", type: FooterComponent, selector: "lf-footer", inputs: ["libraryConfig", "footerConfig"] }, { kind: "component", type: ContentTitleCardComponent, selector: "lf-content-title-card", inputs: ["libraryConfig", "contentTitleCardConfig", "isMobile", "routeHistory"], outputs: ["backButtonClickEvent"] }, { kind: "component", type: FloatingButtonComponent, selector: "lf-floating-button", inputs: ["libraryConfig", "floatingButtonConfig", "onTop", "isMobile", "bottomBarEnabled"], outputs: ["floatingButtonConfigUpdateEvent", "floatingButtonClickEvent"] }, { kind: "component", type: BottomBarComponent, selector: "lf-bottom-bar", inputs: ["libraryConfig", "bottomBarConfig", "isMobile", "navbarEnabled"], outputs: ["bottomBarCloseClickEvent", "bottomBarButtonClickEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1293
1263
  }
1294
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ScaffoldComponent, decorators: [{
1264
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ScaffoldComponent, decorators: [{
1295
1265
  type: Component,
1296
- args: [{ selector: 'lf-scaffold', standalone: true, imports: [
1266
+ args: [{ selector: 'lf-scaffold', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
1297
1267
  CommonModule,
1298
1268
  HeaderComponent,
1299
1269
  NavbarComponent,
@@ -1303,17 +1273,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
1303
1273
  FloatingButtonComponent,
1304
1274
  BottomBarComponent,
1305
1275
  LoadingOverlayComponent
1306
- ], template: "<div\r\n class=\"lf-scaffold lf-transitions mat-app-background mat-typography\"\r\n [ngClass]=\"scaffoldConfig?.cssClass\">\r\n <!-- header -->\r\n <lf-header\r\n [libraryConfig]=\"libraryConfig\"\r\n [headerConfig]=\"headerConfig\"\r\n [isMobile]=\"isMobile\"\r\n [routeLoading]=\"routeLoading\"\r\n [currentRoute]=\"currentRoute\"\r\n (headerConfigUpdateEvent)=\"headerConfigUpdated($event)\"\r\n (headerButtonClickEvent)=\"headerButtonClicked($event)\"\r\n (headerInputSubmitEvent)=\"headerInputSubmitted($event)\"\r\n (headerInputChangeEvent)=\"headerInputChanged($event)\"></lf-header>\r\n <!-- navbar -->\r\n <lf-navbar\r\n [libraryConfig]=\"libraryConfig\"\r\n [navbarConfig]=\"navbarConfig\"\r\n [isMobile]=\"isMobile\"\r\n [currentRoute]=\"currentRoute\"\r\n (navbarButtonClickEvent)=\"navbarButtonClicked($event)\"></lf-navbar>\r\n <!-- content wrapper -->\r\n <div\r\n class=\"lf-content-wrapper\"\r\n [class.lf-show-navbar]=\"navbarConfig?.enable && !isMobile\"\r\n [class.lf-show-header]=\"headerConfig?.enable && !(navbarConfig?.enable && isMobile)\"\r\n [class.lf-show-navbar-mobile]=\"navbarConfig?.enable && isMobile && !headerConfig?.enable\"\r\n [class.lf-show-header-and-navbar-mobile]=\"\r\n headerConfig?.enable && navbarConfig?.enable && isMobile\r\n \"\r\n [class.lf-transitions]=\"initialized\"\r\n #scrollContainer\r\n cdkScrollable>\r\n <!-- drawer -->\r\n <lf-drawer\r\n [libraryConfig]=\"libraryConfig\"\r\n [drawerConfig]=\"drawerConfig\"\r\n [drawerPortal]=\"drawerPortal\"\r\n [isMobile]=\"isMobile\"\r\n [headerEnabled]=\"headerConfig?.enable!\"\r\n (drawerConfigUpdateEvent)=\"drawerConfigUpdated($event)\">\r\n <!-- drawer content -->\r\n <ng-content select=\"[drawerContent]\" drawerContent></ng-content>\r\n <!-- content title card -->\r\n <lf-content-title-card\r\n [libraryConfig]=\"libraryConfig\"\r\n [contentTitleCardConfig]=\"contentTitleCardConfig\"\r\n [isMobile]=\"isMobile\"\r\n [routeHistory]=\"routeHistory\"\r\n (backButtonClickEvent)=\"backButtonClicked()\"></lf-content-title-card>\r\n <!-- main content -->\r\n <div\r\n class=\"lf-content\"\r\n [class.lf-content-mobile]=\"isMobile\"\r\n [class.lf-show-footer]=\"footerConfig?.enable\"\r\n #content>\r\n <ng-content></ng-content>\r\n <!-- to top button -->\r\n <lf-floating-button\r\n [libraryConfig]=\"libraryConfig\"\r\n [floatingButtonConfig]=\"floatingButtonConfig\"\r\n [onTop]=\"scrollTopPosition <= 0\"\r\n [isMobile]=\"isMobile && navbarConfig?.enable!\"\r\n [bottomBarEnabled]=\"bottomBarConfig?.enable!\"\r\n (floatingButtonConfigUpdateEvent)=\"floatingButtonConfigUpdated($event)\"\r\n (floatingButtonClickEvent)=\"floatingButtonClicked($event)\"></lf-floating-button>\r\n </div>\r\n <!-- footer -->\r\n <lf-footer [libraryConfig]=\"libraryConfig\" [footerConfig]=\"footerConfig\"></lf-footer>\r\n </lf-drawer>\r\n </div>\r\n <!-- bottom bar -->\r\n <lf-bottom-bar\r\n [libraryConfig]=\"libraryConfig\"\r\n [bottomBarConfig]=\"bottomBarConfig\"\r\n [isMobile]=\"isMobile && navbarConfig?.enable!\"\r\n [navbarEnabled]=\"navbarConfig?.enable!\"\r\n (bottomBarCloseClickEvent)=\"bottomBarCloseClicked($event)\"\r\n (bottomBarButtonClickEvent)=\"bottomBarButtonClicked($event)\"></lf-bottom-bar>\r\n</div>\r\n", styles: [".lf-scaffold{height:100vh}.lf-scaffold .lf-content-wrapper{position:absolute;inset:0;overflow-y:auto}.lf-scaffold .lf-content-wrapper.lf-show-navbar{left:calc(var(--navbar-height) + 2 * var(--navbar-padding))}.lf-scaffold .lf-content-wrapper.lf-show-header{top:var(--header-height);height:calc(100vh - var(--header-height))}.lf-scaffold .lf-content-wrapper.lf-show-navbar-mobile{height:calc(100vh - var(--navbar-height-mobile))}.lf-scaffold .lf-content-wrapper.lf-show-header-and-navbar-mobile{top:var(--header-height);height:calc(100vh - var(--header-height) - var(--navbar-height-mobile))}.lf-scaffold .lf-content-wrapper .lf-content{padding-left:var(--content-padding);padding-right:var(--content-padding);padding-bottom:var(--content-padding)}.lf-scaffold .lf-content-wrapper .lf-content.lf-content-mobile{padding-left:var(--content-padding-mobile);padding-right:var(--content-padding-mobile);padding-bottom:var(--content-padding-mobile)}.lf-scaffold .lf-content-wrapper .lf-content.lf-show-footer{min-height:100%}\n"] }]
1276
+ ], template: "<div\r\n class=\"lf-scaffold lf-transitions mat-app-background mat-typography\"\r\n [ngClass]=\"scaffoldConfig()?.cssClass\">\r\n <!-- header -->\r\n <lf-header\r\n [libraryConfig]=\"libraryConfig\"\r\n [headerConfig]=\"headerConfig()\"\r\n [isMobile]=\"isMobile()!\"\r\n [routeLoading]=\"routeLoading()!\"\r\n [currentRoute]=\"currentRoute()\"\r\n (headerConfigUpdateEvent)=\"headerConfigUpdated($event)\"\r\n (headerButtonClickEvent)=\"headerButtonClicked($event)\"\r\n (headerInputSubmitEvent)=\"headerInputSubmitted($event)\"\r\n (headerInputChangeEvent)=\"headerInputChanged($event)\"></lf-header>\r\n <!-- navbar -->\r\n <lf-navbar\r\n [libraryConfig]=\"libraryConfig\"\r\n [navbarConfig]=\"navbarConfig()\"\r\n [isMobile]=\"isMobile()!\"\r\n [currentRoute]=\"currentRoute()\"\r\n (navbarButtonClickEvent)=\"navbarButtonClicked($event)\"></lf-navbar>\r\n <!-- content wrapper -->\r\n <div\r\n class=\"lf-content-wrapper\"\r\n [class.lf-show-navbar]=\"navbarConfig()?.enable && !isMobile()\"\r\n [class.lf-show-header]=\"headerConfig()?.enable && !(navbarConfig()?.enable && isMobile())\"\r\n [class.lf-show-navbar-mobile]=\"navbarConfig()?.enable && isMobile() && !headerConfig()?.enable\"\r\n [class.lf-show-header-and-navbar-mobile]=\"\r\n headerConfig()?.enable && navbarConfig()?.enable && isMobile()\r\n \"\r\n [class.lf-transitions]=\"initialized()\"\r\n #scrollContainer\r\n cdkScrollable>\r\n <!-- drawer -->\r\n <lf-drawer\r\n [libraryConfig]=\"libraryConfig\"\r\n [drawerConfig]=\"drawerConfig()\"\r\n [drawerPortal]=\"drawerPortal()\"\r\n [isMobile]=\"isMobile()!\"\r\n [headerEnabled]=\"headerConfig()?.enable!\"\r\n (drawerConfigUpdateEvent)=\"drawerConfigUpdated($event)\">\r\n <!-- drawer content -->\r\n <ng-content select=\"[drawerContent]\" drawerContent></ng-content>\r\n <!-- content title card -->\r\n <lf-content-title-card\r\n [libraryConfig]=\"libraryConfig\"\r\n [contentTitleCardConfig]=\"contentTitleCardConfig()\"\r\n [isMobile]=\"isMobile()!\"\r\n [routeHistory]=\"routeHistory()!\"\r\n (backButtonClickEvent)=\"backButtonClicked()\"></lf-content-title-card>\r\n <!-- main content -->\r\n <div\r\n class=\"lf-content\"\r\n [class.lf-content-mobile]=\"isMobile()\"\r\n [class.lf-show-footer]=\"footerConfig()?.enable\"\r\n #content>\r\n <ng-content></ng-content>\r\n <!-- to top button -->\r\n <lf-floating-button\r\n [libraryConfig]=\"libraryConfig\"\r\n [floatingButtonConfig]=\"floatingButtonConfig()\"\r\n [onTop]=\"scrollTopPosition() <= 0\"\r\n [isMobile]=\"isMobile()! && navbarConfig()?.enable!\"\r\n [bottomBarEnabled]=\"bottomBarConfig()?.enable!\"\r\n (floatingButtonConfigUpdateEvent)=\"floatingButtonConfigUpdated($event)\"\r\n (floatingButtonClickEvent)=\"floatingButtonClicked($event)\"></lf-floating-button>\r\n </div>\r\n <!-- footer -->\r\n <lf-footer [libraryConfig]=\"libraryConfig\" [footerConfig]=\"footerConfig()\"></lf-footer>\r\n </lf-drawer>\r\n </div>\r\n <!-- bottom bar -->\r\n <lf-bottom-bar\r\n [libraryConfig]=\"libraryConfig\"\r\n [bottomBarConfig]=\"bottomBarConfig()\"\r\n [isMobile]=\"isMobile()! && navbarConfig()?.enable!\"\r\n [navbarEnabled]=\"navbarConfig()?.enable!\"\r\n (bottomBarCloseClickEvent)=\"bottomBarCloseClicked($event)\"\r\n (bottomBarButtonClickEvent)=\"bottomBarButtonClicked($event)\"></lf-bottom-bar>\r\n</div>\r\n", styles: [".lf-scaffold{height:100vh}.lf-scaffold .lf-content-wrapper{position:absolute;inset:0;overflow-y:auto}.lf-scaffold .lf-content-wrapper.lf-show-navbar{left:calc(var(--navbar-height) + 2 * var(--navbar-padding))}.lf-scaffold .lf-content-wrapper.lf-show-header{top:var(--header-height);height:calc(100vh - var(--header-height))}.lf-scaffold .lf-content-wrapper.lf-show-navbar-mobile{height:calc(100vh - var(--navbar-height-mobile))}.lf-scaffold .lf-content-wrapper.lf-show-header-and-navbar-mobile{top:var(--header-height);height:calc(100vh - var(--header-height) - var(--navbar-height-mobile))}.lf-scaffold .lf-content-wrapper .lf-content{padding-left:var(--content-padding);padding-right:var(--content-padding);padding-bottom:var(--content-padding)}.lf-scaffold .lf-content-wrapper .lf-content.lf-content-mobile{padding-left:var(--content-padding-mobile);padding-right:var(--content-padding-mobile);padding-bottom:var(--content-padding-mobile)}.lf-scaffold .lf-content-wrapper .lf-content.lf-show-footer{min-height:100%}\n"] }]
1307
1277
  }], propDecorators: { scrollContainer: [{ type: i0.ViewChild, args: ['scrollContainer', { isSignal: true }] }], content: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }], headerButtonClickEvent: [{ type: i0.Output, args: ["headerButtonClickEvent"] }], headerInputSubmitEvent: [{ type: i0.Output, args: ["headerInputSubmitEvent"] }], headerInputChangeEvent: [{ type: i0.Output, args: ["headerInputChangeEvent"] }], navbarButtonClickEvent: [{ type: i0.Output, args: ["navbarButtonClickEvent"] }], floatingButtonClickEvent: [{ type: i0.Output, args: ["floatingButtonClickEvent"] }], bottomBarButtonClickEvent: [{ type: i0.Output, args: ["bottomBarButtonClickEvent"] }] } });
1308
1278
 
1309
1279
  class ListItemAvatarDirective {
1310
1280
  constructor() {
1311
1281
  this.templateRef = inject((TemplateRef));
1312
1282
  }
1313
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ListItemAvatarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
1314
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: ListItemAvatarDirective, isStandalone: true, selector: "[lfListItemAvatar]", ngImport: i0 }); }
1283
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ListItemAvatarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
1284
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: ListItemAvatarDirective, isStandalone: true, selector: "[lfListItemAvatar]", ngImport: i0 }); }
1315
1285
  }
1316
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ListItemAvatarDirective, decorators: [{
1286
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ListItemAvatarDirective, decorators: [{
1317
1287
  type: Directive,
1318
1288
  args: [{
1319
1289
  selector: '[lfListItemAvatar]'
@@ -1324,10 +1294,10 @@ class ListItemButtonsDirective {
1324
1294
  constructor() {
1325
1295
  this.templateRef = inject((TemplateRef));
1326
1296
  }
1327
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ListItemButtonsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
1328
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: ListItemButtonsDirective, isStandalone: true, selector: "[lfListItemButtons]", ngImport: i0 }); }
1297
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ListItemButtonsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
1298
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: ListItemButtonsDirective, isStandalone: true, selector: "[lfListItemButtons]", ngImport: i0 }); }
1329
1299
  }
1330
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ListItemButtonsDirective, decorators: [{
1300
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ListItemButtonsDirective, decorators: [{
1331
1301
  type: Directive,
1332
1302
  args: [{
1333
1303
  selector: '[lfListItemButtons]'
@@ -1338,10 +1308,10 @@ class ListItemSubtitleDirective {
1338
1308
  constructor() {
1339
1309
  this.templateRef = inject((TemplateRef));
1340
1310
  }
1341
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ListItemSubtitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
1342
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: ListItemSubtitleDirective, isStandalone: true, selector: "[lfListItemSubtitle]", ngImport: i0 }); }
1311
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ListItemSubtitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
1312
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: ListItemSubtitleDirective, isStandalone: true, selector: "[lfListItemSubtitle]", ngImport: i0 }); }
1343
1313
  }
1344
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ListItemSubtitleDirective, decorators: [{
1314
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ListItemSubtitleDirective, decorators: [{
1345
1315
  type: Directive,
1346
1316
  args: [{
1347
1317
  selector: '[lfListItemSubtitle]'
@@ -1352,10 +1322,10 @@ class ListItemTitleDirective {
1352
1322
  constructor() {
1353
1323
  this.templateRef = inject((TemplateRef));
1354
1324
  }
1355
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ListItemTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
1356
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: ListItemTitleDirective, isStandalone: true, selector: "[lfListItemTitle]", ngImport: i0 }); }
1325
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ListItemTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
1326
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: ListItemTitleDirective, isStandalone: true, selector: "[lfListItemTitle]", ngImport: i0 }); }
1357
1327
  }
1358
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ListItemTitleDirective, decorators: [{
1328
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ListItemTitleDirective, decorators: [{
1359
1329
  type: Directive,
1360
1330
  args: [{
1361
1331
  selector: '[lfListItemTitle]'
@@ -1381,11 +1351,12 @@ class ListComponent {
1381
1351
  this.itemClickEvent = output();
1382
1352
  this.itemDropEvent = output();
1383
1353
  this.buttonClickEvent = output();
1384
- this.sortAsc = true;
1385
- this.allSelected = false;
1354
+ this.sortToken = signal('', ...(ngDevMode ? [{ debugName: "sortToken" }] : []));
1355
+ this.sortAsc = signal(true, ...(ngDevMode ? [{ debugName: "sortAsc" }] : []));
1356
+ this.allSelected = model(false, ...(ngDevMode ? [{ debugName: "allSelected" }] : []));
1386
1357
  }
1387
1358
  get someSelected() {
1388
- return this.items().length > 0 && this.items().some((item) => item.checked) && !this.allSelected;
1359
+ return this.items().length > 0 && this.items().some((item) => item.checked) && !this.allSelected();
1389
1360
  }
1390
1361
  get hasAvatars() {
1391
1362
  return !!this.items()?.some((item) => (item.avatar || item.matIcon || item.svgIcon));
@@ -1393,31 +1364,31 @@ class ListComponent {
1393
1364
  ngOnInit() {
1394
1365
  const config = this.config();
1395
1366
  if (config) {
1396
- this.sortToken = config.initialSortToken || '';
1397
- this.sortAsc = config.initialSortAsc || false;
1398
- this.updateSortToken(this.sortToken, true);
1367
+ this.sortToken.set(config.initialSortToken || '');
1368
+ this.sortAsc.set(config.initialSortAsc || false);
1369
+ this.updateSortToken(this.sortToken(), true);
1399
1370
  }
1400
1371
  }
1401
1372
  ngOnChanges(changes) {
1402
1373
  if (changes['items']) {
1403
- this.allSelected = this.items().length > 0 && this.items().every((item) => item.checked);
1374
+ this.allSelected.set(this.items().length > 0 && this.items().every((item) => item.checked));
1404
1375
  }
1405
1376
  }
1406
1377
  // Update the sort token
1407
1378
  updateSortToken(sortToken, initial) {
1408
1379
  if (!sortToken)
1409
1380
  return;
1410
- if (this.sortToken === sortToken && !initial)
1411
- this.sortAsc = !this.sortAsc;
1412
- this.sortToken = sortToken;
1413
- this.sortChangeEvent.emit({ sortToken: this.sortToken, sortAsc: this.sortAsc });
1381
+ if (this.sortToken() === sortToken && !initial)
1382
+ this.sortAsc.set(!this.sortAsc());
1383
+ this.sortToken.set(sortToken);
1384
+ this.sortChangeEvent.emit({ sortToken: this.sortToken(), sortAsc: this.sortAsc() });
1414
1385
  }
1415
1386
  // Select all items
1416
1387
  selectAll(event) {
1417
- this.allSelected = event.checked;
1388
+ this.allSelected.set(event.checked);
1418
1389
  this.items().forEach((item) => {
1419
1390
  if (!item.disabled)
1420
- item.checked = this.allSelected;
1391
+ item.checked = this.allSelected();
1421
1392
  });
1422
1393
  this.selectionChangeEvent.emit(this.items());
1423
1394
  }
@@ -1425,7 +1396,7 @@ class ListComponent {
1425
1396
  selectItem(item, event) {
1426
1397
  if (this.config()?.disableMultiselect)
1427
1398
  this.items().forEach((item) => { item.checked = false; });
1428
- this.allSelected = this.items().length > 0 && this.items().every((item) => item.checked);
1399
+ this.allSelected.set(this.items().length > 0 && this.items().every((item) => item.checked));
1429
1400
  item.checked = event.checked;
1430
1401
  this.selectionChangeEvent.emit([item]);
1431
1402
  }
@@ -1459,12 +1430,12 @@ class ListComponent {
1459
1430
  // click.stopPropagation();
1460
1431
  click.stopImmediatePropagation();
1461
1432
  }
1462
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1463
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: ListComponent, isStandalone: true, selector: "lf-list", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, groupedItems: { classPropertyName: "groupedItems", publicName: "groupedItems", isSignal: true, isRequired: false, transformFunction: null }, buttons: { classPropertyName: "buttons", publicName: "buttons", isSignal: true, isRequired: false, transformFunction: null }, dropListId: { classPropertyName: "dropListId", publicName: "dropListId", isSignal: true, isRequired: false, transformFunction: null }, connectedDropListIds: { classPropertyName: "connectedDropListIds", publicName: "connectedDropListIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChangeEvent: "sortChangeEvent", selectionChangeEvent: "selectionChangeEvent", itemClickEvent: "itemClickEvent", itemDropEvent: "itemDropEvent", buttonClickEvent: "buttonClickEvent" }, queries: [{ propertyName: "avatarTemplate", first: true, predicate: ListItemAvatarDirective, descendants: true, isSignal: true }, { propertyName: "titleTemplate", first: true, predicate: ListItemTitleDirective, descendants: true, isSignal: true }, { propertyName: "subtitleTemplate", first: true, predicate: ListItemSubtitleDirective, descendants: true, isSignal: true }, { propertyName: "buttonsTemplate", first: true, predicate: ListItemButtonsDirective, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"lf-list\" cdkDropListGroup>\r\n <!-- Header -->\r\n @if (header(); as header) {\r\n <div class=\"lf-list-item lf-list-item-header\">\r\n <!-- avatar -->\r\n @if (header.avatar) {\r\n <div class=\"lf-list-item-avatar px-2\">\r\n <img [src]=\"header.avatar\" alt=\"Avatar of header\" (error)=\"onImageError($event)\" />\r\n </div>\r\n } @else if (header.matIcon || header.svgIcon) {\r\n <div class=\"lf-list-item-avatar px-2\">\r\n <!-- icon -->\r\n @if (header.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n {{ header.matIcon }}\r\n </mat-icon>\r\n } @else if (header.svgIcon) {\r\n <mat-icon [svgIcon]=\"header.svgIcon\"></mat-icon>\r\n }\r\n </div>\r\n } @else if (hasAvatars) {\r\n <div class=\"lf-list-item-avatar px-2\"></div>\r\n }\r\n\r\n <!-- title -->\r\n <div class=\"lf-list-item-title-wrapper flex-row px-2\">\r\n @for (item of header.items; track $index) {\r\n <span [class.clickable]=\"item.sortToken\" (click)=\"updateSortToken(item.sortToken)\">\r\n {{ item.title }}\r\n @if (sortToken === item.sortToken) {\r\n <mat-icon class=\"lf-list-item-sort-icon\">\r\n {{ sortAsc ? \"arrow_downward\" : \"arrow_upward\" }}\r\n </mat-icon>\r\n }\r\n </span>\r\n }\r\n </div>\r\n\r\n <!-- buttons -->\r\n <div class=\"lf-list-item-buttons\">\r\n @for (button of header.buttons; track button.id) {\r\n @if (button.label) {\r\n <button\r\n mat-button\r\n class=\"lf-list-item-button ml-2\"\r\n [class.disabled]=\"button.disabled\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"button.disabled\"\r\n [matTooltip]=\"button.tooltip\"\r\n (click)=\"clickButton({ buttonId: button.id, item: null! }, $event)\">\r\n <!-- icon -->\r\n @if (button.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n } @else if (button.svgIcon) {\r\n <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n }\r\n {{ button.label }}\r\n </button>\r\n } @else {\r\n <button\r\n mat-icon-button\r\n class=\"lf-list-item-icon ml-2\"\r\n [class.disabled]=\"button.disabled\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"button.disabled\"\r\n [matTooltip]=\"button.tooltip\"\r\n [aria-label]=\"button.id || button.tooltip\"\r\n (click)=\"clickButton({ buttonId: button.id, item: null! }, $event)\">\r\n <!-- icon -->\r\n @if (button.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n } @else if (button.svgIcon) {\r\n <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n }\r\n </button>\r\n }\r\n }\r\n </div>\r\n\r\n <!-- checkbox -->\r\n @if (config()?.enableSelection && !config()?.disableMultiselect) {\r\n <div class=\"lf-list-item-checkbox ml-3\">\r\n <mat-checkbox\r\n [(ngModel)]=\"allSelected\"\r\n [indeterminate]=\"someSelected\"\r\n (change)=\"selectAll($event)\"></mat-checkbox>\r\n </div>\r\n }\r\n </div>\r\n <mat-divider></mat-divider>\r\n }\r\n\r\n <!-- Grouped Items -->\r\n @if (config()?.mode === \"group\" && groupedItems()) {\r\n @for (group of groupedItems() | keyvalue; track group.key; let first = $first) {\r\n <div class=\"lf-list-group\" [class.mt-4]=\"!first\">\r\n @if (group.key) {\r\n <div class=\"lf-list-item lf-list-group-header\">\r\n <div class=\"lf-list-item-avatar px-2\"></div>\r\n <div class=\"lf-list-item-title-wrapper flex-row px-2\">\r\n <span>{{ group.key }}</span>\r\n </div>\r\n </div>\r\n }\r\n <div\r\n [id]=\"group.key\"\r\n cdkDropList\r\n [cdkDropListData]=\"group.value\"\r\n [cdkDropListDisabled]=\"!config()?.enableDragging\"\r\n [cdkDropListConnectedTo]=\"connectedDropListIds()!\"\r\n (cdkDropListDropped)=\"dropItem($event, group.key)\"\r\n [class.drop-zone]=\"config()?.enableDragging && group.value.length <= 0\">\r\n @for (item of group.value; track item.id; let last = $last) {\r\n <div\r\n cdkDrag\r\n [cdkDragData]=\"item\"\r\n [cdkDragDisabled]=\"item.disabled || !config()?.enableDragging\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"listItemTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item, last: last }\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n <!-- Flat Items -->\r\n } @else {\r\n <div\r\n [id]=\"dropListId()!\"\r\n cdkDropList\r\n [cdkDropListData]=\"items()\"\r\n [cdkDropListDisabled]=\"!config()?.enableDragging\"\r\n [cdkDropListConnectedTo]=\"connectedDropListIds()!\"\r\n (cdkDropListDropped)=\"dropItem($event, dropListId()!)\"\r\n [class.drop-zone]=\"config()?.enableDragging && items().length <= 0\">\r\n @for (item of items(); track item.id; let last = $last) {\r\n <div\r\n cdkDrag\r\n [cdkDragData]=\"item\"\r\n [cdkDragDisabled]=\"item.disabled || !config()?.enableDragging\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"listItemTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item, last: last }\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Item (template) -->\r\n <ng-template #listItemTemplate let-item let-last=\"last\">\r\n <div\r\n class=\"lf-list-item lf-list-item-data\"\r\n [class.active]=\"item.checked\"\r\n [class.disabled]=\"item.disabled\"\r\n [class.clickable]=\"item.clickable && !item.disabled\"\r\n [ngClass]=\"item.cssClass\"\r\n matRipple\r\n [matRippleDisabled]=\"!item.clickable\"\r\n (click)=\"item.clickable && !item.disabled ? clickItem(item, $event) : null\">\r\n <!-- avatar -->\r\n @if (avatarTemplate()) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"avatarTemplate()!.templateRef\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n } @else if (item.avatar) {\r\n <div class=\"lf-list-item-avatar px-2\">\r\n <img\r\n [src]=\"item.avatar\"\r\n [alt]=\"'Avatar of ' + item.title\"\r\n (error)=\"onImageError($event)\" />\r\n </div>\r\n } @else if (item.matIcon || item.svgIcon) {\r\n <div class=\"lf-list-item-avatar px-2\">\r\n <!-- icon -->\r\n @if (item.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n {{ item.matIcon }}\r\n </mat-icon>\r\n } @else if (item.svgIcon) {\r\n <mat-icon [svgIcon]=\"item.svgIcon\"></mat-icon>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- title -->\r\n <div class=\"lf-list-item-title-wrapper px-2\">\r\n <span class=\"lf-list-item-title\">\r\n @if (titleTemplate()) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"titleTemplate()!.templateRef\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n } @else {\r\n {{ item.title }}\r\n }\r\n </span>\r\n @if (item.subtitle || subtitleTemplate()) {\r\n <span class=\"lf-list-item-subtitle\">\r\n @if (subtitleTemplate()) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"subtitleTemplate()!.templateRef\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n } @else {\r\n {{ item.subtitle }}\r\n }\r\n </span>\r\n }\r\n </div>\r\n\r\n <!-- buttons -->\r\n <div class=\"lf-list-item-buttons\">\r\n @if (buttonsTemplate()) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"buttonsTemplate()!.templateRef\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n } @else {\r\n @let combinedButtons = getCombinedButtons(item);\r\n @for (button of combinedButtons; track button.id) {\r\n @if (!item.hiddenButtonIds?.includes(button.id)) {\r\n @let disabled =\r\n button.disabled || item.disabled || item.disabledButtonIds?.includes(button.id);\r\n @if (button.label) {\r\n <button\r\n mat-button\r\n class=\"lf-list-item-button ml-2\"\r\n [class.disabled]=\"disabled\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"disabled\"\r\n [matTooltip]=\"button.tooltip\"\r\n (click)=\"clickButton({ buttonId: button.id, item }, $event)\">\r\n <!-- icon -->\r\n @if (button.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n } @else if (button.svgIcon) {\r\n <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n }\r\n {{ button.label }}\r\n </button>\r\n } @else {\r\n <button\r\n mat-icon-button\r\n class=\"lf-list-item-icon ml-2\"\r\n [class.disabled]=\"disabled\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"disabled\"\r\n [matTooltip]=\"button.tooltip\"\r\n [aria-label]=\"button.id || button.tooltip\"\r\n (click)=\"clickButton({ buttonId: button.id, item }, $event)\">\r\n <!-- icon -->\r\n @if (button.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n } @else if (button.svgIcon) {\r\n <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n }\r\n </button>\r\n }\r\n }\r\n }\r\n }\r\n\r\n <!-- drag -->\r\n @if (config()?.enableDragging) {\r\n <button\r\n mat-icon-button\r\n class=\"lf-list-item-icon ml-2\"\r\n [class.disabled]=\"item.disabled\"\r\n [disabled]=\"item.disabled\"\r\n [aria-label]=\"'Drag handle'\"\r\n (click)=\"stopPropagation($event)\"\r\n cdkDragHandle>\r\n <mat-icon>drag_indicator</mat-icon>\r\n </button>\r\n }\r\n </div>\r\n\r\n <!-- checkbox -->\r\n @if (config()?.enableSelection) {\r\n <div class=\"lf-list-item-checkbox ml-3\">\r\n <mat-checkbox\r\n [(ngModel)]=\"item.checked\"\r\n [disabled]=\"item.disabled!\"\r\n (change)=\"selectItem(item, $event)\"\r\n (click)=\"stopPropagation($event)\"></mat-checkbox>\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (config()?.showDividers && !last) {\r\n <mat-divider></mat-divider>\r\n }\r\n </ng-template>\r\n</div>\r\n", styles: [".lf-list,.lf-list .lf-list-group{width:100%}.lf-list .lf-list-group .lf-list-group-header{font-weight:500;height:calc(var(--list-item-height) - 16px)}.lf-list-item{width:100%;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;height:var(--list-item-height);border-radius:var(--list-item-border-radius);box-sizing:border-box;overflow:hidden}.lf-list-item.disabled .lf-list-item-title-wrapper{opacity:.64}.lf-list-item .lf-list-item-sort-icon{font-size:var(--list-item-sort-icon-size);width:var(--list-item-sort-icon-size);height:var(--list-item-sort-icon-size);vertical-align:text-top}.lf-list-item .lf-list-item-checkbox{flex:0 0 var(--list-item-checkbox-width)}.lf-list-item .lf-list-item-avatar{flex:0 0 var(--list-item-avatar-size);display:flex;align-items:center;justify-content:center}.lf-list-item .lf-list-item-avatar img{width:var(--list-item-avatar-size);height:var(--list-item-avatar-size);border-radius:50%;object-fit:cover}.lf-list-item .lf-list-item-title-wrapper{display:flex;flex-flow:column;align-items:flex-start;flex:1 1 var(--list-item-title-width);overflow:hidden}.lf-list-item .lf-list-item-title-wrapper .lf-list-item-title{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.lf-list-item .lf-list-item-title-wrapper .lf-list-item-subtitle{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.8rem}.lf-list-item .lf-list-item-buttons{flex:0 0 auto;display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between}.lf-list-item.lf-list-item-header{font-weight:500}.lf-list-item.lf-list-item-header .lf-list-item-title-wrapper span{width:var(--list-item-title-wrapper-width)}.lf-list-item.lf-list-item-data:hover{background-color:#00000014}.lf-list-item .flex-row{display:flex!important;flex-flow:row nowrap;align-items:center}.drop-zone{width:100%;height:var(--list-item-height);border:2px dashed var(--color-gray);border-radius:var(--list-item-border-radius);box-sizing:border-box}.clickable{cursor:pointer!important}.cdk-drag-preview{color:var(--mat-app-text-color, inherit)!important;background:var(--mat-app-background-color, inherit)!important;box-sizing:border-box;border-radius:var(--list-item-border-radius);opacity:.8;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.4}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3$4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$4.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i3$4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$4.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatButtonModule }, { 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: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i6.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i9.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] }); }
1433
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1434
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ListComponent, isStandalone: true, selector: "lf-list", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, groupedItems: { classPropertyName: "groupedItems", publicName: "groupedItems", isSignal: true, isRequired: false, transformFunction: null }, buttons: { classPropertyName: "buttons", publicName: "buttons", isSignal: true, isRequired: false, transformFunction: null }, dropListId: { classPropertyName: "dropListId", publicName: "dropListId", isSignal: true, isRequired: false, transformFunction: null }, connectedDropListIds: { classPropertyName: "connectedDropListIds", publicName: "connectedDropListIds", isSignal: true, isRequired: false, transformFunction: null }, allSelected: { classPropertyName: "allSelected", publicName: "allSelected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChangeEvent: "sortChangeEvent", selectionChangeEvent: "selectionChangeEvent", itemClickEvent: "itemClickEvent", itemDropEvent: "itemDropEvent", buttonClickEvent: "buttonClickEvent", allSelected: "allSelectedChange" }, queries: [{ propertyName: "avatarTemplate", first: true, predicate: ListItemAvatarDirective, descendants: true, isSignal: true }, { propertyName: "titleTemplate", first: true, predicate: ListItemTitleDirective, descendants: true, isSignal: true }, { propertyName: "subtitleTemplate", first: true, predicate: ListItemSubtitleDirective, descendants: true, isSignal: true }, { propertyName: "buttonsTemplate", first: true, predicate: ListItemButtonsDirective, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"lf-list\" cdkDropListGroup>\r\n <!-- Header -->\r\n @if (header(); as header) {\r\n <div class=\"lf-list-item lf-list-item-header\">\r\n <!-- avatar -->\r\n @if (header.avatar) {\r\n <div class=\"lf-list-item-avatar px-2\">\r\n <img [src]=\"header.avatar\" alt=\"Avatar of header\" (error)=\"onImageError($event)\" />\r\n </div>\r\n } @else if (header.matIcon || header.svgIcon) {\r\n <div class=\"lf-list-item-avatar px-2\">\r\n <!-- icon -->\r\n @if (header.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n {{ header.matIcon }}\r\n </mat-icon>\r\n } @else if (header.svgIcon) {\r\n <mat-icon [svgIcon]=\"header.svgIcon\"></mat-icon>\r\n }\r\n </div>\r\n } @else if (hasAvatars) {\r\n <div class=\"lf-list-item-avatar px-2\"></div>\r\n }\r\n\r\n <!-- title -->\r\n <div class=\"lf-list-item-title-wrapper flex-row px-2\">\r\n @for (item of header.items; track $index) {\r\n <span [class.clickable]=\"item.sortToken\" (click)=\"updateSortToken(item.sortToken)\">\r\n {{ item.title }}\r\n @if (sortToken() === item.sortToken) {\r\n <mat-icon class=\"lf-list-item-sort-icon\">\r\n {{ sortAsc() ? \"arrow_downward\" : \"arrow_upward\" }}\r\n </mat-icon>\r\n }\r\n </span>\r\n }\r\n </div>\r\n\r\n <!-- buttons -->\r\n <div class=\"lf-list-item-buttons\">\r\n @for (button of header.buttons; track button.id) {\r\n @if (button.label) {\r\n <button\r\n mat-button\r\n class=\"lf-list-item-button ml-2\"\r\n [class.disabled]=\"button.disabled\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"button.disabled\"\r\n [matTooltip]=\"button.tooltip\"\r\n (click)=\"clickButton({ buttonId: button.id, item: null! }, $event)\">\r\n <!-- icon -->\r\n @if (button.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n } @else if (button.svgIcon) {\r\n <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n }\r\n {{ button.label }}\r\n </button>\r\n } @else {\r\n <button\r\n mat-icon-button\r\n class=\"lf-list-item-icon ml-2\"\r\n [class.disabled]=\"button.disabled\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"button.disabled\"\r\n [matTooltip]=\"button.tooltip\"\r\n [aria-label]=\"button.id || button.tooltip\"\r\n (click)=\"clickButton({ buttonId: button.id, item: null! }, $event)\">\r\n <!-- icon -->\r\n @if (button.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n } @else if (button.svgIcon) {\r\n <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n }\r\n </button>\r\n }\r\n }\r\n </div>\r\n\r\n <!-- checkbox -->\r\n @if (config()?.enableSelection && !config()?.disableMultiselect) {\r\n <div class=\"lf-list-item-checkbox ml-3\">\r\n <mat-checkbox\r\n [(ngModel)]=\"allSelected\"\r\n [indeterminate]=\"someSelected\"\r\n (change)=\"selectAll($event)\"></mat-checkbox>\r\n </div>\r\n }\r\n </div>\r\n <mat-divider></mat-divider>\r\n }\r\n\r\n <!-- Grouped Items -->\r\n @if (config()?.mode === \"group\" && groupedItems()) {\r\n @for (group of groupedItems() | keyvalue; track group.key; let first = $first) {\r\n <div class=\"lf-list-group\" [class.mt-4]=\"!first\">\r\n @if (group.key) {\r\n <div class=\"lf-list-item lf-list-group-header\">\r\n <div class=\"lf-list-item-avatar px-2\"></div>\r\n <div class=\"lf-list-item-title-wrapper flex-row px-2\">\r\n <span>{{ group.key }}</span>\r\n </div>\r\n </div>\r\n }\r\n <div\r\n [id]=\"group.key\"\r\n cdkDropList\r\n [cdkDropListData]=\"group.value\"\r\n [cdkDropListDisabled]=\"!config()?.enableDragging\"\r\n [cdkDropListConnectedTo]=\"connectedDropListIds()!\"\r\n (cdkDropListDropped)=\"dropItem($event, group.key)\"\r\n [class.drop-zone]=\"config()?.enableDragging && group.value.length <= 0\">\r\n @for (item of group.value; track item.id; let last = $last) {\r\n <div\r\n cdkDrag\r\n [cdkDragData]=\"item\"\r\n [cdkDragDisabled]=\"item.disabled || !config()?.enableDragging\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"listItemTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item, last: last }\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n <!-- Flat Items -->\r\n } @else {\r\n <div\r\n [id]=\"dropListId()!\"\r\n cdkDropList\r\n [cdkDropListData]=\"items()\"\r\n [cdkDropListDisabled]=\"!config()?.enableDragging\"\r\n [cdkDropListConnectedTo]=\"connectedDropListIds()!\"\r\n (cdkDropListDropped)=\"dropItem($event, dropListId()!)\"\r\n [class.drop-zone]=\"config()?.enableDragging && items().length <= 0\">\r\n @for (item of items(); track item.id; let last = $last) {\r\n <div\r\n cdkDrag\r\n [cdkDragData]=\"item\"\r\n [cdkDragDisabled]=\"item.disabled || !config()?.enableDragging\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"listItemTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item, last: last }\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Item (template) -->\r\n <ng-template #listItemTemplate let-item let-last=\"last\">\r\n <div\r\n class=\"lf-list-item lf-list-item-data\"\r\n [class.active]=\"item.checked\"\r\n [class.disabled]=\"item.disabled\"\r\n [class.clickable]=\"item.clickable && !item.disabled\"\r\n [ngClass]=\"item.cssClass\"\r\n matRipple\r\n [matRippleDisabled]=\"!item.clickable\"\r\n (click)=\"item.clickable && !item.disabled ? clickItem(item, $event) : null\">\r\n <!-- avatar -->\r\n @if (avatarTemplate()) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"avatarTemplate()!.templateRef\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n } @else if (item.avatar) {\r\n <div class=\"lf-list-item-avatar px-2\">\r\n <img\r\n [src]=\"item.avatar\"\r\n [alt]=\"'Avatar of ' + item.title\"\r\n (error)=\"onImageError($event)\" />\r\n </div>\r\n } @else if (item.matIcon || item.svgIcon) {\r\n <div class=\"lf-list-item-avatar px-2\">\r\n <!-- icon -->\r\n @if (item.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n {{ item.matIcon }}\r\n </mat-icon>\r\n } @else if (item.svgIcon) {\r\n <mat-icon [svgIcon]=\"item.svgIcon\"></mat-icon>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- title -->\r\n <div class=\"lf-list-item-title-wrapper px-2\">\r\n <span class=\"lf-list-item-title\">\r\n @if (titleTemplate()) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"titleTemplate()!.templateRef\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n } @else {\r\n {{ item.title }}\r\n }\r\n </span>\r\n @if (item.subtitle || subtitleTemplate()) {\r\n <span class=\"lf-list-item-subtitle\">\r\n @if (subtitleTemplate()) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"subtitleTemplate()!.templateRef\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n } @else {\r\n {{ item.subtitle }}\r\n }\r\n </span>\r\n }\r\n </div>\r\n\r\n <!-- buttons -->\r\n <div class=\"lf-list-item-buttons\">\r\n @if (buttonsTemplate()) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"buttonsTemplate()!.templateRef\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n } @else {\r\n @let combinedButtons = getCombinedButtons(item);\r\n @for (button of combinedButtons; track button.id) {\r\n @if (!item.hiddenButtonIds?.includes(button.id)) {\r\n @let disabled =\r\n button.disabled || item.disabled || item.disabledButtonIds?.includes(button.id);\r\n @if (button.label) {\r\n <button\r\n mat-button\r\n class=\"lf-list-item-button ml-2\"\r\n [class.disabled]=\"disabled\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"disabled\"\r\n [matTooltip]=\"button.tooltip\"\r\n (click)=\"clickButton({ buttonId: button.id, item }, $event)\">\r\n <!-- icon -->\r\n @if (button.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n } @else if (button.svgIcon) {\r\n <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n }\r\n {{ button.label }}\r\n </button>\r\n } @else {\r\n <button\r\n mat-icon-button\r\n class=\"lf-list-item-icon ml-2\"\r\n [class.disabled]=\"disabled\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"disabled\"\r\n [matTooltip]=\"button.tooltip\"\r\n [aria-label]=\"button.id || button.tooltip\"\r\n (click)=\"clickButton({ buttonId: button.id, item }, $event)\">\r\n <!-- icon -->\r\n @if (button.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n } @else if (button.svgIcon) {\r\n <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n }\r\n </button>\r\n }\r\n }\r\n }\r\n }\r\n\r\n <!-- drag -->\r\n @if (config()?.enableDragging) {\r\n <button\r\n mat-icon-button\r\n class=\"lf-list-item-icon ml-2\"\r\n [class.disabled]=\"item.disabled\"\r\n [disabled]=\"item.disabled\"\r\n [aria-label]=\"'Drag handle'\"\r\n (click)=\"stopPropagation($event)\"\r\n cdkDragHandle>\r\n <mat-icon>drag_indicator</mat-icon>\r\n </button>\r\n }\r\n </div>\r\n\r\n <!-- checkbox -->\r\n @if (config()?.enableSelection) {\r\n <div class=\"lf-list-item-checkbox ml-3\">\r\n <mat-checkbox\r\n [(ngModel)]=\"item.checked\"\r\n [disabled]=\"item.disabled!\"\r\n (change)=\"selectItem(item, $event)\"\r\n (click)=\"stopPropagation($event)\"></mat-checkbox>\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (config()?.showDividers && !last) {\r\n <mat-divider></mat-divider>\r\n }\r\n </ng-template>\r\n</div>\r\n", styles: [".lf-list,.lf-list .lf-list-group{width:100%}.lf-list .lf-list-group .lf-list-group-header{font-weight:500;height:calc(var(--list-item-height) - 16px)}.lf-list-item{width:100%;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;height:var(--list-item-height);border-radius:var(--list-item-border-radius);box-sizing:border-box;overflow:hidden}.lf-list-item.disabled .lf-list-item-title-wrapper{opacity:.64}.lf-list-item .lf-list-item-sort-icon{font-size:var(--list-item-sort-icon-size);width:var(--list-item-sort-icon-size);height:var(--list-item-sort-icon-size);vertical-align:text-top}.lf-list-item .lf-list-item-checkbox{flex:0 0 var(--list-item-checkbox-width)}.lf-list-item .lf-list-item-avatar{flex:0 0 var(--list-item-avatar-size);display:flex;align-items:center;justify-content:center}.lf-list-item .lf-list-item-avatar img{width:var(--list-item-avatar-size);height:var(--list-item-avatar-size);border-radius:50%;object-fit:cover}.lf-list-item .lf-list-item-title-wrapper{display:flex;flex-flow:column;align-items:flex-start;flex:1 1 var(--list-item-title-width);overflow:hidden}.lf-list-item .lf-list-item-title-wrapper .lf-list-item-title{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.lf-list-item .lf-list-item-title-wrapper .lf-list-item-subtitle{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.8rem}.lf-list-item .lf-list-item-buttons{flex:0 0 auto;display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between}.lf-list-item.lf-list-item-header{font-weight:500}.lf-list-item.lf-list-item-header .lf-list-item-title-wrapper span{width:var(--list-item-title-wrapper-width)}.lf-list-item.lf-list-item-data:hover{background-color:#00000014}.lf-list-item .flex-row{display:flex!important;flex-flow:row nowrap;align-items:center}.drop-zone{width:100%;height:var(--list-item-height);border:2px dashed var(--color-gray);border-radius:var(--list-item-border-radius);box-sizing:border-box}.clickable{cursor:pointer!important}.cdk-drag-preview{color:var(--mat-app-text-color, inherit)!important;background:var(--mat-app-background-color, inherit)!important;box-sizing:border-box;border-radius:var(--list-item-border-radius);opacity:.8;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.4}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3$4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$4.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i3$4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$4.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatButtonModule }, { 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: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i6.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i9.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1464
1435
  }
1465
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ListComponent, decorators: [{
1436
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ListComponent, decorators: [{
1466
1437
  type: Component,
1467
- args: [{ selector: 'lf-list', standalone: true, imports: [
1438
+ args: [{ selector: 'lf-list', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
1468
1439
  CommonModule,
1469
1440
  FormsModule,
1470
1441
  DragDropModule,
@@ -1474,8 +1445,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
1474
1445
  MatIconModule,
1475
1446
  MatTooltipModule,
1476
1447
  MatDividerModule
1477
- ], template: "<div class=\"lf-list\" cdkDropListGroup>\r\n <!-- Header -->\r\n @if (header(); as header) {\r\n <div class=\"lf-list-item lf-list-item-header\">\r\n <!-- avatar -->\r\n @if (header.avatar) {\r\n <div class=\"lf-list-item-avatar px-2\">\r\n <img [src]=\"header.avatar\" alt=\"Avatar of header\" (error)=\"onImageError($event)\" />\r\n </div>\r\n } @else if (header.matIcon || header.svgIcon) {\r\n <div class=\"lf-list-item-avatar px-2\">\r\n <!-- icon -->\r\n @if (header.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n {{ header.matIcon }}\r\n </mat-icon>\r\n } @else if (header.svgIcon) {\r\n <mat-icon [svgIcon]=\"header.svgIcon\"></mat-icon>\r\n }\r\n </div>\r\n } @else if (hasAvatars) {\r\n <div class=\"lf-list-item-avatar px-2\"></div>\r\n }\r\n\r\n <!-- title -->\r\n <div class=\"lf-list-item-title-wrapper flex-row px-2\">\r\n @for (item of header.items; track $index) {\r\n <span [class.clickable]=\"item.sortToken\" (click)=\"updateSortToken(item.sortToken)\">\r\n {{ item.title }}\r\n @if (sortToken === item.sortToken) {\r\n <mat-icon class=\"lf-list-item-sort-icon\">\r\n {{ sortAsc ? \"arrow_downward\" : \"arrow_upward\" }}\r\n </mat-icon>\r\n }\r\n </span>\r\n }\r\n </div>\r\n\r\n <!-- buttons -->\r\n <div class=\"lf-list-item-buttons\">\r\n @for (button of header.buttons; track button.id) {\r\n @if (button.label) {\r\n <button\r\n mat-button\r\n class=\"lf-list-item-button ml-2\"\r\n [class.disabled]=\"button.disabled\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"button.disabled\"\r\n [matTooltip]=\"button.tooltip\"\r\n (click)=\"clickButton({ buttonId: button.id, item: null! }, $event)\">\r\n <!-- icon -->\r\n @if (button.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n } @else if (button.svgIcon) {\r\n <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n }\r\n {{ button.label }}\r\n </button>\r\n } @else {\r\n <button\r\n mat-icon-button\r\n class=\"lf-list-item-icon ml-2\"\r\n [class.disabled]=\"button.disabled\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"button.disabled\"\r\n [matTooltip]=\"button.tooltip\"\r\n [aria-label]=\"button.id || button.tooltip\"\r\n (click)=\"clickButton({ buttonId: button.id, item: null! }, $event)\">\r\n <!-- icon -->\r\n @if (button.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n } @else if (button.svgIcon) {\r\n <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n }\r\n </button>\r\n }\r\n }\r\n </div>\r\n\r\n <!-- checkbox -->\r\n @if (config()?.enableSelection && !config()?.disableMultiselect) {\r\n <div class=\"lf-list-item-checkbox ml-3\">\r\n <mat-checkbox\r\n [(ngModel)]=\"allSelected\"\r\n [indeterminate]=\"someSelected\"\r\n (change)=\"selectAll($event)\"></mat-checkbox>\r\n </div>\r\n }\r\n </div>\r\n <mat-divider></mat-divider>\r\n }\r\n\r\n <!-- Grouped Items -->\r\n @if (config()?.mode === \"group\" && groupedItems()) {\r\n @for (group of groupedItems() | keyvalue; track group.key; let first = $first) {\r\n <div class=\"lf-list-group\" [class.mt-4]=\"!first\">\r\n @if (group.key) {\r\n <div class=\"lf-list-item lf-list-group-header\">\r\n <div class=\"lf-list-item-avatar px-2\"></div>\r\n <div class=\"lf-list-item-title-wrapper flex-row px-2\">\r\n <span>{{ group.key }}</span>\r\n </div>\r\n </div>\r\n }\r\n <div\r\n [id]=\"group.key\"\r\n cdkDropList\r\n [cdkDropListData]=\"group.value\"\r\n [cdkDropListDisabled]=\"!config()?.enableDragging\"\r\n [cdkDropListConnectedTo]=\"connectedDropListIds()!\"\r\n (cdkDropListDropped)=\"dropItem($event, group.key)\"\r\n [class.drop-zone]=\"config()?.enableDragging && group.value.length <= 0\">\r\n @for (item of group.value; track item.id; let last = $last) {\r\n <div\r\n cdkDrag\r\n [cdkDragData]=\"item\"\r\n [cdkDragDisabled]=\"item.disabled || !config()?.enableDragging\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"listItemTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item, last: last }\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n <!-- Flat Items -->\r\n } @else {\r\n <div\r\n [id]=\"dropListId()!\"\r\n cdkDropList\r\n [cdkDropListData]=\"items()\"\r\n [cdkDropListDisabled]=\"!config()?.enableDragging\"\r\n [cdkDropListConnectedTo]=\"connectedDropListIds()!\"\r\n (cdkDropListDropped)=\"dropItem($event, dropListId()!)\"\r\n [class.drop-zone]=\"config()?.enableDragging && items().length <= 0\">\r\n @for (item of items(); track item.id; let last = $last) {\r\n <div\r\n cdkDrag\r\n [cdkDragData]=\"item\"\r\n [cdkDragDisabled]=\"item.disabled || !config()?.enableDragging\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"listItemTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item, last: last }\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Item (template) -->\r\n <ng-template #listItemTemplate let-item let-last=\"last\">\r\n <div\r\n class=\"lf-list-item lf-list-item-data\"\r\n [class.active]=\"item.checked\"\r\n [class.disabled]=\"item.disabled\"\r\n [class.clickable]=\"item.clickable && !item.disabled\"\r\n [ngClass]=\"item.cssClass\"\r\n matRipple\r\n [matRippleDisabled]=\"!item.clickable\"\r\n (click)=\"item.clickable && !item.disabled ? clickItem(item, $event) : null\">\r\n <!-- avatar -->\r\n @if (avatarTemplate()) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"avatarTemplate()!.templateRef\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n } @else if (item.avatar) {\r\n <div class=\"lf-list-item-avatar px-2\">\r\n <img\r\n [src]=\"item.avatar\"\r\n [alt]=\"'Avatar of ' + item.title\"\r\n (error)=\"onImageError($event)\" />\r\n </div>\r\n } @else if (item.matIcon || item.svgIcon) {\r\n <div class=\"lf-list-item-avatar px-2\">\r\n <!-- icon -->\r\n @if (item.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n {{ item.matIcon }}\r\n </mat-icon>\r\n } @else if (item.svgIcon) {\r\n <mat-icon [svgIcon]=\"item.svgIcon\"></mat-icon>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- title -->\r\n <div class=\"lf-list-item-title-wrapper px-2\">\r\n <span class=\"lf-list-item-title\">\r\n @if (titleTemplate()) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"titleTemplate()!.templateRef\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n } @else {\r\n {{ item.title }}\r\n }\r\n </span>\r\n @if (item.subtitle || subtitleTemplate()) {\r\n <span class=\"lf-list-item-subtitle\">\r\n @if (subtitleTemplate()) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"subtitleTemplate()!.templateRef\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n } @else {\r\n {{ item.subtitle }}\r\n }\r\n </span>\r\n }\r\n </div>\r\n\r\n <!-- buttons -->\r\n <div class=\"lf-list-item-buttons\">\r\n @if (buttonsTemplate()) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"buttonsTemplate()!.templateRef\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n } @else {\r\n @let combinedButtons = getCombinedButtons(item);\r\n @for (button of combinedButtons; track button.id) {\r\n @if (!item.hiddenButtonIds?.includes(button.id)) {\r\n @let disabled =\r\n button.disabled || item.disabled || item.disabledButtonIds?.includes(button.id);\r\n @if (button.label) {\r\n <button\r\n mat-button\r\n class=\"lf-list-item-button ml-2\"\r\n [class.disabled]=\"disabled\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"disabled\"\r\n [matTooltip]=\"button.tooltip\"\r\n (click)=\"clickButton({ buttonId: button.id, item }, $event)\">\r\n <!-- icon -->\r\n @if (button.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n } @else if (button.svgIcon) {\r\n <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n }\r\n {{ button.label }}\r\n </button>\r\n } @else {\r\n <button\r\n mat-icon-button\r\n class=\"lf-list-item-icon ml-2\"\r\n [class.disabled]=\"disabled\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"disabled\"\r\n [matTooltip]=\"button.tooltip\"\r\n [aria-label]=\"button.id || button.tooltip\"\r\n (click)=\"clickButton({ buttonId: button.id, item }, $event)\">\r\n <!-- icon -->\r\n @if (button.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n } @else if (button.svgIcon) {\r\n <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n }\r\n </button>\r\n }\r\n }\r\n }\r\n }\r\n\r\n <!-- drag -->\r\n @if (config()?.enableDragging) {\r\n <button\r\n mat-icon-button\r\n class=\"lf-list-item-icon ml-2\"\r\n [class.disabled]=\"item.disabled\"\r\n [disabled]=\"item.disabled\"\r\n [aria-label]=\"'Drag handle'\"\r\n (click)=\"stopPropagation($event)\"\r\n cdkDragHandle>\r\n <mat-icon>drag_indicator</mat-icon>\r\n </button>\r\n }\r\n </div>\r\n\r\n <!-- checkbox -->\r\n @if (config()?.enableSelection) {\r\n <div class=\"lf-list-item-checkbox ml-3\">\r\n <mat-checkbox\r\n [(ngModel)]=\"item.checked\"\r\n [disabled]=\"item.disabled!\"\r\n (change)=\"selectItem(item, $event)\"\r\n (click)=\"stopPropagation($event)\"></mat-checkbox>\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (config()?.showDividers && !last) {\r\n <mat-divider></mat-divider>\r\n }\r\n </ng-template>\r\n</div>\r\n", styles: [".lf-list,.lf-list .lf-list-group{width:100%}.lf-list .lf-list-group .lf-list-group-header{font-weight:500;height:calc(var(--list-item-height) - 16px)}.lf-list-item{width:100%;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;height:var(--list-item-height);border-radius:var(--list-item-border-radius);box-sizing:border-box;overflow:hidden}.lf-list-item.disabled .lf-list-item-title-wrapper{opacity:.64}.lf-list-item .lf-list-item-sort-icon{font-size:var(--list-item-sort-icon-size);width:var(--list-item-sort-icon-size);height:var(--list-item-sort-icon-size);vertical-align:text-top}.lf-list-item .lf-list-item-checkbox{flex:0 0 var(--list-item-checkbox-width)}.lf-list-item .lf-list-item-avatar{flex:0 0 var(--list-item-avatar-size);display:flex;align-items:center;justify-content:center}.lf-list-item .lf-list-item-avatar img{width:var(--list-item-avatar-size);height:var(--list-item-avatar-size);border-radius:50%;object-fit:cover}.lf-list-item .lf-list-item-title-wrapper{display:flex;flex-flow:column;align-items:flex-start;flex:1 1 var(--list-item-title-width);overflow:hidden}.lf-list-item .lf-list-item-title-wrapper .lf-list-item-title{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.lf-list-item .lf-list-item-title-wrapper .lf-list-item-subtitle{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.8rem}.lf-list-item .lf-list-item-buttons{flex:0 0 auto;display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between}.lf-list-item.lf-list-item-header{font-weight:500}.lf-list-item.lf-list-item-header .lf-list-item-title-wrapper span{width:var(--list-item-title-wrapper-width)}.lf-list-item.lf-list-item-data:hover{background-color:#00000014}.lf-list-item .flex-row{display:flex!important;flex-flow:row nowrap;align-items:center}.drop-zone{width:100%;height:var(--list-item-height);border:2px dashed var(--color-gray);border-radius:var(--list-item-border-radius);box-sizing:border-box}.clickable{cursor:pointer!important}.cdk-drag-preview{color:var(--mat-app-text-color, inherit)!important;background:var(--mat-app-background-color, inherit)!important;box-sizing:border-box;border-radius:var(--list-item-border-radius);opacity:.8;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.4}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}\n"] }]
1478
- }], propDecorators: { avatarTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ListItemAvatarDirective), { isSignal: true }] }], titleTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ListItemTitleDirective), { isSignal: true }] }], subtitleTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ListItemSubtitleDirective), { isSignal: true }] }], buttonsTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ListItemButtonsDirective), { isSignal: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], groupedItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupedItems", required: false }] }], buttons: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttons", required: false }] }], dropListId: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropListId", required: false }] }], connectedDropListIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectedDropListIds", required: false }] }], sortChangeEvent: [{ type: i0.Output, args: ["sortChangeEvent"] }], selectionChangeEvent: [{ type: i0.Output, args: ["selectionChangeEvent"] }], itemClickEvent: [{ type: i0.Output, args: ["itemClickEvent"] }], itemDropEvent: [{ type: i0.Output, args: ["itemDropEvent"] }], buttonClickEvent: [{ type: i0.Output, args: ["buttonClickEvent"] }] } });
1448
+ ], template: "<div class=\"lf-list\" cdkDropListGroup>\r\n <!-- Header -->\r\n @if (header(); as header) {\r\n <div class=\"lf-list-item lf-list-item-header\">\r\n <!-- avatar -->\r\n @if (header.avatar) {\r\n <div class=\"lf-list-item-avatar px-2\">\r\n <img [src]=\"header.avatar\" alt=\"Avatar of header\" (error)=\"onImageError($event)\" />\r\n </div>\r\n } @else if (header.matIcon || header.svgIcon) {\r\n <div class=\"lf-list-item-avatar px-2\">\r\n <!-- icon -->\r\n @if (header.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n {{ header.matIcon }}\r\n </mat-icon>\r\n } @else if (header.svgIcon) {\r\n <mat-icon [svgIcon]=\"header.svgIcon\"></mat-icon>\r\n }\r\n </div>\r\n } @else if (hasAvatars) {\r\n <div class=\"lf-list-item-avatar px-2\"></div>\r\n }\r\n\r\n <!-- title -->\r\n <div class=\"lf-list-item-title-wrapper flex-row px-2\">\r\n @for (item of header.items; track $index) {\r\n <span [class.clickable]=\"item.sortToken\" (click)=\"updateSortToken(item.sortToken)\">\r\n {{ item.title }}\r\n @if (sortToken() === item.sortToken) {\r\n <mat-icon class=\"lf-list-item-sort-icon\">\r\n {{ sortAsc() ? \"arrow_downward\" : \"arrow_upward\" }}\r\n </mat-icon>\r\n }\r\n </span>\r\n }\r\n </div>\r\n\r\n <!-- buttons -->\r\n <div class=\"lf-list-item-buttons\">\r\n @for (button of header.buttons; track button.id) {\r\n @if (button.label) {\r\n <button\r\n mat-button\r\n class=\"lf-list-item-button ml-2\"\r\n [class.disabled]=\"button.disabled\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"button.disabled\"\r\n [matTooltip]=\"button.tooltip\"\r\n (click)=\"clickButton({ buttonId: button.id, item: null! }, $event)\">\r\n <!-- icon -->\r\n @if (button.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n } @else if (button.svgIcon) {\r\n <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n }\r\n {{ button.label }}\r\n </button>\r\n } @else {\r\n <button\r\n mat-icon-button\r\n class=\"lf-list-item-icon ml-2\"\r\n [class.disabled]=\"button.disabled\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"button.disabled\"\r\n [matTooltip]=\"button.tooltip\"\r\n [aria-label]=\"button.id || button.tooltip\"\r\n (click)=\"clickButton({ buttonId: button.id, item: null! }, $event)\">\r\n <!-- icon -->\r\n @if (button.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n } @else if (button.svgIcon) {\r\n <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n }\r\n </button>\r\n }\r\n }\r\n </div>\r\n\r\n <!-- checkbox -->\r\n @if (config()?.enableSelection && !config()?.disableMultiselect) {\r\n <div class=\"lf-list-item-checkbox ml-3\">\r\n <mat-checkbox\r\n [(ngModel)]=\"allSelected\"\r\n [indeterminate]=\"someSelected\"\r\n (change)=\"selectAll($event)\"></mat-checkbox>\r\n </div>\r\n }\r\n </div>\r\n <mat-divider></mat-divider>\r\n }\r\n\r\n <!-- Grouped Items -->\r\n @if (config()?.mode === \"group\" && groupedItems()) {\r\n @for (group of groupedItems() | keyvalue; track group.key; let first = $first) {\r\n <div class=\"lf-list-group\" [class.mt-4]=\"!first\">\r\n @if (group.key) {\r\n <div class=\"lf-list-item lf-list-group-header\">\r\n <div class=\"lf-list-item-avatar px-2\"></div>\r\n <div class=\"lf-list-item-title-wrapper flex-row px-2\">\r\n <span>{{ group.key }}</span>\r\n </div>\r\n </div>\r\n }\r\n <div\r\n [id]=\"group.key\"\r\n cdkDropList\r\n [cdkDropListData]=\"group.value\"\r\n [cdkDropListDisabled]=\"!config()?.enableDragging\"\r\n [cdkDropListConnectedTo]=\"connectedDropListIds()!\"\r\n (cdkDropListDropped)=\"dropItem($event, group.key)\"\r\n [class.drop-zone]=\"config()?.enableDragging && group.value.length <= 0\">\r\n @for (item of group.value; track item.id; let last = $last) {\r\n <div\r\n cdkDrag\r\n [cdkDragData]=\"item\"\r\n [cdkDragDisabled]=\"item.disabled || !config()?.enableDragging\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"listItemTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item, last: last }\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n <!-- Flat Items -->\r\n } @else {\r\n <div\r\n [id]=\"dropListId()!\"\r\n cdkDropList\r\n [cdkDropListData]=\"items()\"\r\n [cdkDropListDisabled]=\"!config()?.enableDragging\"\r\n [cdkDropListConnectedTo]=\"connectedDropListIds()!\"\r\n (cdkDropListDropped)=\"dropItem($event, dropListId()!)\"\r\n [class.drop-zone]=\"config()?.enableDragging && items().length <= 0\">\r\n @for (item of items(); track item.id; let last = $last) {\r\n <div\r\n cdkDrag\r\n [cdkDragData]=\"item\"\r\n [cdkDragDisabled]=\"item.disabled || !config()?.enableDragging\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"listItemTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item, last: last }\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Item (template) -->\r\n <ng-template #listItemTemplate let-item let-last=\"last\">\r\n <div\r\n class=\"lf-list-item lf-list-item-data\"\r\n [class.active]=\"item.checked\"\r\n [class.disabled]=\"item.disabled\"\r\n [class.clickable]=\"item.clickable && !item.disabled\"\r\n [ngClass]=\"item.cssClass\"\r\n matRipple\r\n [matRippleDisabled]=\"!item.clickable\"\r\n (click)=\"item.clickable && !item.disabled ? clickItem(item, $event) : null\">\r\n <!-- avatar -->\r\n @if (avatarTemplate()) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"avatarTemplate()!.templateRef\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n } @else if (item.avatar) {\r\n <div class=\"lf-list-item-avatar px-2\">\r\n <img\r\n [src]=\"item.avatar\"\r\n [alt]=\"'Avatar of ' + item.title\"\r\n (error)=\"onImageError($event)\" />\r\n </div>\r\n } @else if (item.matIcon || item.svgIcon) {\r\n <div class=\"lf-list-item-avatar px-2\">\r\n <!-- icon -->\r\n @if (item.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n {{ item.matIcon }}\r\n </mat-icon>\r\n } @else if (item.svgIcon) {\r\n <mat-icon [svgIcon]=\"item.svgIcon\"></mat-icon>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- title -->\r\n <div class=\"lf-list-item-title-wrapper px-2\">\r\n <span class=\"lf-list-item-title\">\r\n @if (titleTemplate()) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"titleTemplate()!.templateRef\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n } @else {\r\n {{ item.title }}\r\n }\r\n </span>\r\n @if (item.subtitle || subtitleTemplate()) {\r\n <span class=\"lf-list-item-subtitle\">\r\n @if (subtitleTemplate()) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"subtitleTemplate()!.templateRef\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n } @else {\r\n {{ item.subtitle }}\r\n }\r\n </span>\r\n }\r\n </div>\r\n\r\n <!-- buttons -->\r\n <div class=\"lf-list-item-buttons\">\r\n @if (buttonsTemplate()) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"buttonsTemplate()!.templateRef\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n } @else {\r\n @let combinedButtons = getCombinedButtons(item);\r\n @for (button of combinedButtons; track button.id) {\r\n @if (!item.hiddenButtonIds?.includes(button.id)) {\r\n @let disabled =\r\n button.disabled || item.disabled || item.disabledButtonIds?.includes(button.id);\r\n @if (button.label) {\r\n <button\r\n mat-button\r\n class=\"lf-list-item-button ml-2\"\r\n [class.disabled]=\"disabled\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"disabled\"\r\n [matTooltip]=\"button.tooltip\"\r\n (click)=\"clickButton({ buttonId: button.id, item }, $event)\">\r\n <!-- icon -->\r\n @if (button.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n } @else if (button.svgIcon) {\r\n <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n }\r\n {{ button.label }}\r\n </button>\r\n } @else {\r\n <button\r\n mat-icon-button\r\n class=\"lf-list-item-icon ml-2\"\r\n [class.disabled]=\"disabled\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"disabled\"\r\n [matTooltip]=\"button.tooltip\"\r\n [aria-label]=\"button.id || button.tooltip\"\r\n (click)=\"clickButton({ buttonId: button.id, item }, $event)\">\r\n <!-- icon -->\r\n @if (button.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n } @else if (button.svgIcon) {\r\n <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n }\r\n </button>\r\n }\r\n }\r\n }\r\n }\r\n\r\n <!-- drag -->\r\n @if (config()?.enableDragging) {\r\n <button\r\n mat-icon-button\r\n class=\"lf-list-item-icon ml-2\"\r\n [class.disabled]=\"item.disabled\"\r\n [disabled]=\"item.disabled\"\r\n [aria-label]=\"'Drag handle'\"\r\n (click)=\"stopPropagation($event)\"\r\n cdkDragHandle>\r\n <mat-icon>drag_indicator</mat-icon>\r\n </button>\r\n }\r\n </div>\r\n\r\n <!-- checkbox -->\r\n @if (config()?.enableSelection) {\r\n <div class=\"lf-list-item-checkbox ml-3\">\r\n <mat-checkbox\r\n [(ngModel)]=\"item.checked\"\r\n [disabled]=\"item.disabled!\"\r\n (change)=\"selectItem(item, $event)\"\r\n (click)=\"stopPropagation($event)\"></mat-checkbox>\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (config()?.showDividers && !last) {\r\n <mat-divider></mat-divider>\r\n }\r\n </ng-template>\r\n</div>\r\n", styles: [".lf-list,.lf-list .lf-list-group{width:100%}.lf-list .lf-list-group .lf-list-group-header{font-weight:500;height:calc(var(--list-item-height) - 16px)}.lf-list-item{width:100%;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;height:var(--list-item-height);border-radius:var(--list-item-border-radius);box-sizing:border-box;overflow:hidden}.lf-list-item.disabled .lf-list-item-title-wrapper{opacity:.64}.lf-list-item .lf-list-item-sort-icon{font-size:var(--list-item-sort-icon-size);width:var(--list-item-sort-icon-size);height:var(--list-item-sort-icon-size);vertical-align:text-top}.lf-list-item .lf-list-item-checkbox{flex:0 0 var(--list-item-checkbox-width)}.lf-list-item .lf-list-item-avatar{flex:0 0 var(--list-item-avatar-size);display:flex;align-items:center;justify-content:center}.lf-list-item .lf-list-item-avatar img{width:var(--list-item-avatar-size);height:var(--list-item-avatar-size);border-radius:50%;object-fit:cover}.lf-list-item .lf-list-item-title-wrapper{display:flex;flex-flow:column;align-items:flex-start;flex:1 1 var(--list-item-title-width);overflow:hidden}.lf-list-item .lf-list-item-title-wrapper .lf-list-item-title{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.lf-list-item .lf-list-item-title-wrapper .lf-list-item-subtitle{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.8rem}.lf-list-item .lf-list-item-buttons{flex:0 0 auto;display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between}.lf-list-item.lf-list-item-header{font-weight:500}.lf-list-item.lf-list-item-header .lf-list-item-title-wrapper span{width:var(--list-item-title-wrapper-width)}.lf-list-item.lf-list-item-data:hover{background-color:#00000014}.lf-list-item .flex-row{display:flex!important;flex-flow:row nowrap;align-items:center}.drop-zone{width:100%;height:var(--list-item-height);border:2px dashed var(--color-gray);border-radius:var(--list-item-border-radius);box-sizing:border-box}.clickable{cursor:pointer!important}.cdk-drag-preview{color:var(--mat-app-text-color, inherit)!important;background:var(--mat-app-background-color, inherit)!important;box-sizing:border-box;border-radius:var(--list-item-border-radius);opacity:.8;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.4}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}\n"] }]
1449
+ }], propDecorators: { avatarTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ListItemAvatarDirective), { isSignal: true }] }], titleTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ListItemTitleDirective), { isSignal: true }] }], subtitleTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ListItemSubtitleDirective), { isSignal: true }] }], buttonsTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ListItemButtonsDirective), { isSignal: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], groupedItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupedItems", required: false }] }], buttons: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttons", required: false }] }], dropListId: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropListId", required: false }] }], connectedDropListIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectedDropListIds", required: false }] }], sortChangeEvent: [{ type: i0.Output, args: ["sortChangeEvent"] }], selectionChangeEvent: [{ type: i0.Output, args: ["selectionChangeEvent"] }], itemClickEvent: [{ type: i0.Output, args: ["itemClickEvent"] }], itemDropEvent: [{ type: i0.Output, args: ["itemDropEvent"] }], buttonClickEvent: [{ type: i0.Output, args: ["buttonClickEvent"] }], allSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "allSelected", required: false }] }, { type: i0.Output, args: ["allSelectedChange"] }] } });
1479
1450
 
1480
1451
  class FileUploadComponent {
1481
1452
  constructor() {
@@ -1500,12 +1471,12 @@ class FileUploadComponent {
1500
1471
  this.logger.log('[FileUploadComponent]', file);
1501
1472
  this.fileChangeEvent.emit(file);
1502
1473
  }
1503
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1504
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: FileUploadComponent, isStandalone: true, selector: "lf-file-upload", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, matIcon: { classPropertyName: "matIcon", publicName: "matIcon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileChangeEvent: "fileChangeEvent" }, 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)=\"file.click()\"\r\n [matTooltip]=\"tooltip()\">\r\n <!-- <span class=\"lf-button-content\"> -->\r\n <!-- @if (!loading) {\r\n <mat-progress-spinner\r\n class=\"mr-1\"\r\n color=\"primary\"\r\n diameter=\"24\"\r\n mode=\"indeterminate\"></mat-progress-spinner>\r\n } @else { -->\r\n <!-- icon -->\r\n @if (matIcon()) {\r\n <mat-icon class=\"mr-1\" [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n {{ matIcon() }}\r\n </mat-icon>\r\n }\r\n <!-- @else if (svgIcon) {\r\n <mat-icon [svgIcon]=\"svgIcon\"></mat-icon>\r\n } -->\r\n <!-- } -->\r\n {{ label() }}\r\n <!-- </span> -->\r\n</button>\r\n", styles: [".lf-button{width:inherit}.lf-button .lf-button-content{display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatButtonModule }, { 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: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
1474
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1475
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: FileUploadComponent, isStandalone: true, selector: "lf-file-upload", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, matIcon: { classPropertyName: "matIcon", publicName: "matIcon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileChangeEvent: "fileChangeEvent" }, 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)=\"file.click()\"\r\n [matTooltip]=\"tooltip()\">\r\n <!-- <span class=\"lf-button-content\"> -->\r\n <!-- @if (!loading) {\r\n <mat-progress-spinner\r\n class=\"mr-1\"\r\n color=\"primary\"\r\n diameter=\"24\"\r\n mode=\"indeterminate\"></mat-progress-spinner>\r\n } @else { -->\r\n <!-- icon -->\r\n @if (matIcon()) {\r\n <mat-icon class=\"mr-1\" [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n {{ matIcon() }}\r\n </mat-icon>\r\n }\r\n <!-- @else if (svgIcon) {\r\n <mat-icon [svgIcon]=\"svgIcon\"></mat-icon>\r\n } -->\r\n <!-- } -->\r\n {{ label() }}\r\n <!-- </span> -->\r\n</button>\r\n", styles: [".lf-button{width:inherit}.lf-button .lf-button-content{display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatButtonModule }, { 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: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1505
1476
  }
1506
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: FileUploadComponent, decorators: [{
1477
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FileUploadComponent, decorators: [{
1507
1478
  type: Component,
1508
- args: [{ selector: 'lf-file-upload', standalone: true, imports: [
1479
+ args: [{ selector: 'lf-file-upload', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
1509
1480
  CommonModule,
1510
1481
  FormsModule,
1511
1482
  MatButtonModule,
@@ -1524,39 +1495,38 @@ class ColorPickerComponent {
1524
1495
  this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
1525
1496
  this.tooltip = input(...(ngDevMode ? [undefined, { debugName: "tooltip" }] : []));
1526
1497
  this.colorChangeEvent = output();
1527
- this.selectedColor = '';
1498
+ this.selectedColor = signal('', ...(ngDevMode ? [{ debugName: "selectedColor" }] : []));
1499
+ this.backgroundColor = computed(() => {
1500
+ const hex = this.selectedColor().replace('#', '');
1501
+ const r = parseInt(hex.substr(0, 2), 16);
1502
+ const g = parseInt(hex.substr(2, 2), 16);
1503
+ const b = parseInt(hex.substr(4, 2), 16);
1504
+ const brightness = (r * 299 + g * 587 + b * 114) / 1000;
1505
+ return brightness > 128 ? '#000000' : '#ffffff';
1506
+ }, ...(ngDevMode ? [{ debugName: "backgroundColor" }] : []));
1528
1507
  }
1529
1508
  ngOnInit() {
1530
1509
  const color = this.color();
1531
1510
  if (color && color !== 'primary' && color !== 'accent' && color !== 'warn') {
1532
- this.selectedColor = color;
1511
+ this.selectedColor.set(color);
1533
1512
  }
1534
1513
  }
1535
1514
  selectColor(event) {
1536
- this.selectedColor = event;
1515
+ this.selectedColor.set(event);
1537
1516
  this.colorChangeEvent.emit(event);
1538
1517
  }
1539
- // Get bright or dark color depeindung on background color
1540
- getContrastTextColor(hexColor) {
1541
- const hex = hexColor.replace('#', '');
1542
- const r = parseInt(hex.substr(0, 2), 16);
1543
- const g = parseInt(hex.substr(2, 2), 16);
1544
- const b = parseInt(hex.substr(4, 2), 16);
1545
- const brightness = (r * 299 + g * 587 + b * 114) / 1000;
1546
- return brightness > 128 ? '#000000' : '#ffffff';
1547
- }
1548
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1549
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: ColorPickerComponent, isStandalone: true, selector: "lf-color-picker", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, matIcon: { classPropertyName: "matIcon", publicName: "matIcon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorChangeEvent: "colorChangeEvent" }, ngImport: i0, template: "<input\r\n #colorPicker\r\n type=\"color\"\r\n onclick=\"this.value = null\"\r\n [ngModel]=\"selectedColor\"\r\n (ngModelChange)=\"selectColor($event)\"\r\n style=\"opacity: 0; position: absolute; width: 0; height: 36px; border: none\" />\r\n\r\n<button\r\n mat-flat-button\r\n class=\"lf-button\"\r\n type=\"button\"\r\n [color]=\"selectedColor ? null : color()\"\r\n [style.background]=\"selectedColor\"\r\n [style.color]=\"getContrastTextColor(selectedColor)\"\r\n [disabled]=\"disabled()\"\r\n (click)=\"colorPicker.click()\"\r\n [matTooltip]=\"tooltip()\">\r\n <!-- icon -->\r\n @if (matIcon()) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n {{ matIcon() }}\r\n </mat-icon>\r\n }\r\n <!-- @else if (svgIcon) {\r\n <mat-icon [svgIcon]=\"svgIcon\"></mat-icon>\r\n } -->\r\n {{ label() }}\r\n</button>\r\n", styles: [".lf-button{width:inherit}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: MatButtonModule }, { 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: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
1518
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1519
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ColorPickerComponent, isStandalone: true, selector: "lf-color-picker", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, matIcon: { classPropertyName: "matIcon", publicName: "matIcon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorChangeEvent: "colorChangeEvent" }, ngImport: i0, template: "<input\r\n #colorPicker\r\n type=\"color\"\r\n onclick=\"this.value = null\"\r\n [ngModel]=\"selectedColor()\"\r\n (ngModelChange)=\"selectColor($event)\"\r\n style=\"opacity: 0; position: absolute; width: 0; height: 36px; border: none\" />\r\n\r\n<button\r\n mat-flat-button\r\n class=\"lf-button\"\r\n type=\"button\"\r\n [color]=\"selectedColor() ? null : color()\"\r\n [style.background]=\"selectedColor()\"\r\n [style.color]=\"backgroundColor()\"\r\n [disabled]=\"disabled()\"\r\n (click)=\"colorPicker.click()\"\r\n [matTooltip]=\"tooltip()\">\r\n <!-- icon -->\r\n @if (matIcon()) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n {{ matIcon() }}\r\n </mat-icon>\r\n }\r\n <!-- @else if (svgIcon) {\r\n <mat-icon [svgIcon]=\"svgIcon\"></mat-icon>\r\n } -->\r\n {{ label() }}\r\n</button>\r\n", styles: [".lf-button{width:inherit}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: MatButtonModule }, { 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: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1550
1520
  }
1551
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ColorPickerComponent, decorators: [{
1521
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ColorPickerComponent, decorators: [{
1552
1522
  type: Component,
1553
- args: [{ selector: 'lf-color-picker', standalone: true, imports: [
1523
+ args: [{ selector: 'lf-color-picker', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
1554
1524
  CommonModule,
1555
1525
  FormsModule,
1556
1526
  MatButtonModule,
1557
1527
  MatIconModule,
1558
1528
  MatTooltipModule
1559
- ], template: "<input\r\n #colorPicker\r\n type=\"color\"\r\n onclick=\"this.value = null\"\r\n [ngModel]=\"selectedColor\"\r\n (ngModelChange)=\"selectColor($event)\"\r\n style=\"opacity: 0; position: absolute; width: 0; height: 36px; border: none\" />\r\n\r\n<button\r\n mat-flat-button\r\n class=\"lf-button\"\r\n type=\"button\"\r\n [color]=\"selectedColor ? null : color()\"\r\n [style.background]=\"selectedColor\"\r\n [style.color]=\"getContrastTextColor(selectedColor)\"\r\n [disabled]=\"disabled()\"\r\n (click)=\"colorPicker.click()\"\r\n [matTooltip]=\"tooltip()\">\r\n <!-- icon -->\r\n @if (matIcon()) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n {{ matIcon() }}\r\n </mat-icon>\r\n }\r\n <!-- @else if (svgIcon) {\r\n <mat-icon [svgIcon]=\"svgIcon\"></mat-icon>\r\n } -->\r\n {{ label() }}\r\n</button>\r\n", styles: [".lf-button{width:inherit}\n"] }]
1529
+ ], template: "<input\r\n #colorPicker\r\n type=\"color\"\r\n onclick=\"this.value = null\"\r\n [ngModel]=\"selectedColor()\"\r\n (ngModelChange)=\"selectColor($event)\"\r\n style=\"opacity: 0; position: absolute; width: 0; height: 36px; border: none\" />\r\n\r\n<button\r\n mat-flat-button\r\n class=\"lf-button\"\r\n type=\"button\"\r\n [color]=\"selectedColor() ? null : color()\"\r\n [style.background]=\"selectedColor()\"\r\n [style.color]=\"backgroundColor()\"\r\n [disabled]=\"disabled()\"\r\n (click)=\"colorPicker.click()\"\r\n [matTooltip]=\"tooltip()\">\r\n <!-- icon -->\r\n @if (matIcon()) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n {{ matIcon() }}\r\n </mat-icon>\r\n }\r\n <!-- @else if (svgIcon) {\r\n <mat-icon [svgIcon]=\"svgIcon\"></mat-icon>\r\n } -->\r\n {{ label() }}\r\n</button>\r\n", styles: [".lf-button{width:inherit}\n"] }]
1560
1530
  }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], matIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "matIcon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], colorChangeEvent: [{ type: i0.Output, args: ["colorChangeEvent"] }] } });
1561
1531
 
1562
1532
  class PlaceholderComponent {
@@ -1565,12 +1535,12 @@ class PlaceholderComponent {
1565
1535
  this.placeholderConfig = input(...(ngDevMode ? [undefined, { debugName: "placeholderConfig" }] : []));
1566
1536
  this.buttonClickEvent = output();
1567
1537
  }
1568
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: PlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1569
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: PlaceholderComponent, isStandalone: true, selector: "lf-placeholder", inputs: { placeholderConfig: { classPropertyName: "placeholderConfig", publicName: "placeholderConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClickEvent: "buttonClickEvent" }, ngImport: i0, template: "@if (placeholderConfig(); as config) {\r\n <div class=\"lf-placeholder\" [ngClass]=\"config.cssClass\">\r\n <!-- icon -->\r\n @if (config.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n {{ config.matIcon }}\r\n </mat-icon>\r\n } @else if (config.svgIcon) {\r\n <mat-icon [svgIcon]=\"config.svgIcon\"></mat-icon>\r\n }\r\n <!-- heading -->\r\n @if (config.title) {\r\n <p class=\"lf-placeholder-title mt-2\">\r\n {{ config.title }}\r\n </p>\r\n }\r\n <!-- message -->\r\n @if (config.message) {\r\n <p class=\"lf-placeholder-message mt-1\">\r\n {{ config.message }}\r\n </p>\r\n }\r\n <!-- action -->\r\n @if (config.button) {\r\n <button\r\n mat-button\r\n class=\"mt-4\"\r\n color=\"accent\"\r\n [ngClass]=\"config.button.cssClass\"\r\n [disabled]=\"config.button.disabled\"\r\n (click)=\"buttonClickEvent.emit()\"\r\n [matTooltip]=\"config.button.tooltip\">\r\n <!-- icon -->\r\n @if (config.button.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n {{ config.button.matIcon }}\r\n </mat-icon>\r\n } @else if (config.button.svgIcon) {\r\n <mat-icon [svgIcon]=\"config.button.svgIcon\"></mat-icon>\r\n }\r\n {{ config.button.label }}\r\n </button>\r\n }\r\n </div>\r\n}\r\n", styles: [".lf-placeholder{display:flex;flex-flow:column;align-items:center;justify-content:center;text-align:center}.lf-placeholder ::ng-deep .mat-icon{width:var(--placeholder-icon-size);height:var(--placeholder-icon-size);font-size:var(--placeholder-icon-size);line-height:var(--placeholder-icon-size);color:var(--color-gray)}.lf-placeholder .lf-placeholder-title{margin:0;font-size:var(--placeholder-title-font-size);font-weight:500}.lf-placeholder .lf-placeholder-message{margin:0;font-size:var(--placeholder-message-font-size)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { 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: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
1538
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: PlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1539
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: PlaceholderComponent, isStandalone: true, selector: "lf-placeholder", inputs: { placeholderConfig: { classPropertyName: "placeholderConfig", publicName: "placeholderConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClickEvent: "buttonClickEvent" }, ngImport: i0, template: "@if (placeholderConfig(); as config) {\r\n <div class=\"lf-placeholder\" [ngClass]=\"config.cssClass\">\r\n <!-- icon -->\r\n @if (config.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n {{ config.matIcon }}\r\n </mat-icon>\r\n } @else if (config.svgIcon) {\r\n <mat-icon [svgIcon]=\"config.svgIcon\"></mat-icon>\r\n }\r\n <!-- heading -->\r\n @if (config.title) {\r\n <p class=\"lf-placeholder-title mt-2\">\r\n {{ config.title }}\r\n </p>\r\n }\r\n <!-- message -->\r\n @if (config.message) {\r\n <p class=\"lf-placeholder-message mt-1\">\r\n {{ config.message }}\r\n </p>\r\n }\r\n <!-- action -->\r\n @if (config.button) {\r\n <button\r\n mat-button\r\n class=\"mt-4\"\r\n color=\"accent\"\r\n [ngClass]=\"config.button.cssClass\"\r\n [disabled]=\"config.button.disabled\"\r\n (click)=\"buttonClickEvent.emit()\"\r\n [matTooltip]=\"config.button.tooltip\">\r\n <!-- icon -->\r\n @if (config.button.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n {{ config.button.matIcon }}\r\n </mat-icon>\r\n } @else if (config.button.svgIcon) {\r\n <mat-icon [svgIcon]=\"config.button.svgIcon\"></mat-icon>\r\n }\r\n {{ config.button.label }}\r\n </button>\r\n }\r\n </div>\r\n}\r\n", styles: [".lf-placeholder{display:flex;flex-flow:column;align-items:center;justify-content:center;text-align:center}.lf-placeholder ::ng-deep .mat-icon{width:var(--placeholder-icon-size);height:var(--placeholder-icon-size);font-size:var(--placeholder-icon-size);line-height:var(--placeholder-icon-size);color:var(--color-gray)}.lf-placeholder .lf-placeholder-title{margin:0;font-size:var(--placeholder-title-font-size);font-weight:500}.lf-placeholder .lf-placeholder-message{margin:0;font-size:var(--placeholder-message-font-size)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { 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: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1570
1540
  }
1571
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: PlaceholderComponent, decorators: [{
1541
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: PlaceholderComponent, decorators: [{
1572
1542
  type: Component,
1573
- args: [{ selector: 'lf-placeholder', standalone: true, imports: [
1543
+ args: [{ selector: 'lf-placeholder', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
1574
1544
  CommonModule,
1575
1545
  MatButtonModule,
1576
1546
  MatIconModule,
@@ -1615,10 +1585,10 @@ class ScaffoldLoadingInterceptor {
1615
1585
  }
1616
1586
  }));
1617
1587
  }
1618
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ScaffoldLoadingInterceptor, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
1619
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ScaffoldLoadingInterceptor }); }
1588
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ScaffoldLoadingInterceptor, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
1589
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ScaffoldLoadingInterceptor }); }
1620
1590
  }
1621
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ScaffoldLoadingInterceptor, decorators: [{
1591
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ScaffoldLoadingInterceptor, decorators: [{
1622
1592
  type: Injectable
1623
1593
  }] });
1624
1594