@lukfel/ng-scaffold 20.0.41 → 20.0.43

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 (5) hide show
  1. package/fesm2022/lukfel-ng-scaffold.mjs +171 -68
  2. package/fesm2022/lukfel-ng-scaffold.mjs.map +1 -1
  3. package/index.d.ts +51 -34
  4. package/package.json +1 -1
  5. package/styles/_variables.scss +2 -1
package/fesm2022/lukfel-ng-scaffold.mjs CHANGED
@@ -1,8 +1,9 @@
1
1
  import * as i0 from '@angular/core';
2
- import { InjectionToken, NgModule, inject, Input, Component, EventEmitter, Output, ChangeDetectorRef, ViewChild, Injectable, DOCUMENT } from '@angular/core';
2
+ import { InjectionToken, NgModule, inject, Input, Component, EventEmitter, Output, ChangeDetectorRef, ViewChild, Injectable, DOCUMENT, TemplateRef, Directive, ContentChild } from '@angular/core';
3
3
  import { Title, Meta, BrowserModule } from '@angular/platform-browser';
4
4
  import * as i2$2 from '@angular/router';
5
5
  import { Router, RouteConfigLoadStart, RouteConfigLoadEnd, NavigationEnd, ActivatedRoute, RouterModule } from '@angular/router';
6
+ import { trigger, state, transition, style, animate } from '@angular/animations';
6
7
  import * as i1 from '@angular/common';
7
8
  import { CommonModule } from '@angular/common';
8
9
  import * as i2 from '@angular/material/button';
@@ -11,48 +12,39 @@ import * as i4 from '@angular/material/icon';
11
12
  import { MatIconModule } from '@angular/material/icon';
12
13
  import * as i4$1 from '@angular/material/tooltip';
13
14
  import { MatTooltipModule } from '@angular/material/tooltip';
15
+ import * as i9 from '@angular/cdk/drag-drop';
16
+ import { DragDropModule, transferArrayItem } from '@angular/cdk/drag-drop';
14
17
  import * as i3$1 from '@angular/cdk/portal';
15
18
  import { PortalModule, ComponentPortal } from '@angular/cdk/portal';
16
- import * as i8 from '@angular/cdk/drag-drop';
17
- import { DragDropModule, transferArrayItem } from '@angular/cdk/drag-drop';
18
19
  import { MatAutocompleteModule } from '@angular/material/autocomplete';
19
- import { MatButtonToggleModule } from '@angular/material/button-toggle';
20
20
  import * as i3 from '@angular/material/card';
21
21
  import { MatCardModule } from '@angular/material/card';
22
22
  import * as i3$3 from '@angular/material/checkbox';
23
23
  import { MatCheckboxModule } from '@angular/material/checkbox';
24
- import { MatChipsModule } from '@angular/material/chips';
25
- import { MatRippleModule } from '@angular/material/core';
26
- import { MatDatepickerModule } from '@angular/material/datepicker';
27
24
  import * as i2$3 from '@angular/material/dialog';
28
25
  import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
29
26
  import { MatExpansionModule } from '@angular/material/expansion';
30
27
  import { MatFormFieldModule } from '@angular/material/form-field';
31
- import { MatGridListModule } from '@angular/material/grid-list';
32
28
  import * as i3$2 from '@angular/material/input';
33
29
  import { MatInputModule } from '@angular/material/input';
34
30
  import * as i5$1 from '@angular/material/list';
35
31
  import { MatListModule } from '@angular/material/list';
36
32
  import * as i4$2 from '@angular/material/menu';
37
33
  import { MatMenuModule } from '@angular/material/menu';
38
- import { MatPaginatorModule } from '@angular/material/paginator';
39
34
  import * as i7 from '@angular/material/progress-bar';
40
35
  import { MatProgressBarModule } from '@angular/material/progress-bar';
41
36
  import * as i1$2 from '@angular/material/progress-spinner';
42
37
  import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
43
- import { MatRadioModule } from '@angular/material/radio';
44
38
  import { MatSelectModule } from '@angular/material/select';
45
39
  import * as i2$1 from '@angular/material/sidenav';
46
40
  import { MatSidenavModule } from '@angular/material/sidenav';
47
41
  import { MatSlideToggleModule } from '@angular/material/slide-toggle';
48
42
  import { MatSliderModule } from '@angular/material/slider';
49
43
  import { MatSnackBarModule, MatSnackBar } from '@angular/material/snack-bar';
50
- import { MatSortModule } from '@angular/material/sort';
51
- import { MatStepperModule } from '@angular/material/stepper';
52
- import { MatTableModule } from '@angular/material/table';
53
- import { MatTabsModule } from '@angular/material/tabs';
54
44
  import * as i5 from '@angular/material/toolbar';
55
45
  import { MatToolbarModule } from '@angular/material/toolbar';
46
+ import * as i8 from '@angular/material/core';
47
+ import { MatRippleModule } from '@angular/material/core';
56
48
  import * as i1$1 from '@angular/forms';
57
49
  import { FormsModule } from '@angular/forms';
58
50
  import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
@@ -64,13 +56,10 @@ const CONFIG = new InjectionToken('config');
64
56
  class MaterialModule {
65
57
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: MaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
66
58
  static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.5", ngImport: i0, type: MaterialModule, exports: [MatCheckboxModule,
67
- MatCheckboxModule,
68
59
  MatButtonModule,
69
60
  MatInputModule,
70
61
  MatAutocompleteModule,
71
- MatDatepickerModule,
72
62
  MatFormFieldModule,
73
- MatRadioModule,
74
63
  MatSelectModule,
75
64
  MatSliderModule,
76
65
  MatSlideToggleModule,
@@ -78,33 +67,22 @@ class MaterialModule {
78
67
  MatSidenavModule,
79
68
  MatToolbarModule,
80
69
  MatListModule,
81
- MatGridListModule,
82
70
  MatCardModule,
83
- MatStepperModule,
84
- MatTabsModule,
85
71
  MatExpansionModule,
86
- MatButtonToggleModule,
87
- MatChipsModule,
88
72
  MatIconModule,
89
73
  MatProgressSpinnerModule,
90
74
  MatProgressBarModule,
91
- MatRippleModule,
92
75
  MatDialogModule,
93
76
  MatTooltipModule,
94
77
  MatSnackBarModule,
95
- MatTableModule,
96
- MatSortModule,
97
- MatPaginatorModule,
78
+ MatRippleModule,
98
79
  PortalModule,
99
80
  DragDropModule] }); }
100
81
  static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: MaterialModule, imports: [MatCheckboxModule,
101
- MatCheckboxModule,
102
82
  MatButtonModule,
103
83
  MatInputModule,
104
84
  MatAutocompleteModule,
105
- MatDatepickerModule,
106
85
  MatFormFieldModule,
107
- MatRadioModule,
108
86
  MatSelectModule,
109
87
  MatSliderModule,
110
88
  MatSlideToggleModule,
@@ -112,23 +90,15 @@ class MaterialModule {
112
90
  MatSidenavModule,
113
91
  MatToolbarModule,
114
92
  MatListModule,
115
- MatGridListModule,
116
93
  MatCardModule,
117
- MatStepperModule,
118
- MatTabsModule,
119
94
  MatExpansionModule,
120
- MatButtonToggleModule,
121
- MatChipsModule,
122
95
  MatIconModule,
123
96
  MatProgressSpinnerModule,
124
97
  MatProgressBarModule,
125
- MatRippleModule,
126
98
  MatDialogModule,
127
99
  MatTooltipModule,
128
100
  MatSnackBarModule,
129
- MatTableModule,
130
- MatSortModule,
131
- MatPaginatorModule,
101
+ MatRippleModule,
132
102
  PortalModule,
133
103
  DragDropModule] }); }
134
104
  }
@@ -137,14 +107,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
137
107
  args: [{
138
108
  declarations: [],
139
109
  exports: [
140
- MatCheckboxModule,
141
110
  MatCheckboxModule,
142
111
  MatButtonModule,
143
112
  MatInputModule,
144
113
  MatAutocompleteModule,
145
- MatDatepickerModule,
146
114
  MatFormFieldModule,
147
- MatRadioModule,
148
115
  MatSelectModule,
149
116
  MatSliderModule,
150
117
  MatSlideToggleModule,
@@ -152,23 +119,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
152
119
  MatSidenavModule,
153
120
  MatToolbarModule,
154
121
  MatListModule,
155
- MatGridListModule,
156
122
  MatCardModule,
157
- MatStepperModule,
158
- MatTabsModule,
159
123
  MatExpansionModule,
160
- MatButtonToggleModule,
161
- MatChipsModule,
162
124
  MatIconModule,
163
125
  MatProgressSpinnerModule,
164
126
  MatProgressBarModule,
165
- MatRippleModule,
166
127
  MatDialogModule,
167
128
  MatTooltipModule,
168
129
  MatSnackBarModule,
169
- MatTableModule,
170
- MatSortModule,
171
- MatPaginatorModule,
130
+ MatRippleModule,
172
131
  PortalModule,
173
132
  DragDropModule
174
133
  ],
@@ -244,11 +203,25 @@ class BottomBarComponent {
244
203
  this.bottomBarCloseClickEvent.emit(closeButtonId);
245
204
  }
246
205
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BottomBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
247
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: BottomBarComponent, isStandalone: false, selector: "lf-bottom-bar", inputs: { libraryConfig: "libraryConfig", bottomBarConfig: "bottomBarConfig", isMobile: "isMobile", navbarEnabled: "navbarEnabled" }, outputs: { bottomBarCloseClickEvent: "bottomBarCloseClickEvent", bottomBarButtonClickEvent: "bottomBarButtonClickEvent" }, ngImport: i0, template: "@if (bottomBarConfig && bottomBarConfig.enable) {\r\n <div\r\n class=\"lf-bottom-bar px-4\"\r\n [ngClass]=\"bottomBarConfig.cssClass\"\r\n [class.lf-bottom-bar-show-navbar]=\"!isMobile && navbarEnabled\"\r\n [class.lf-bottom-bar-show-navbar-mobile]=\"isMobile && navbarEnabled\">\r\n @if (bottomBarConfig.closeButtonId) {\r\n <button mat-icon-button (click)=\"closeClicked(bottomBarConfig.closeButtonId)\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n }\r\n @if (bottomBarConfig.message) {\r\n <span class=\"ml-2\">{{ bottomBarConfig.message }}</span>\r\n }\r\n @if (bottomBarConfig.buttons) {\r\n <div class=\"lf-bottom-bar-buttons ml-4\">\r\n @for (button of bottomBarConfig.buttons; track button.id) {\r\n @if (button.label) {\r\n <button\r\n mat-button\r\n class=\"lf-bottom-bar-button ml-2\"\r\n [ngClass]=\"button.cssClass\"\r\n (click)=\"buttonClicked(button.id)\"\r\n [matTooltip]=\"button.tooltip\">\r\n @if (button.matIcon || button.svgIcon) {\r\n <lf-icon\r\n [matIcon]=\"button.matIcon\"\r\n [svgIcon]=\"button.svgIcon\"\r\n verticalAlign=\"bottom\"></lf-icon>\r\n }\r\n {{ button.label }}\r\n </button>\r\n } @else {\r\n <button\r\n mat-icon-button\r\n color=\"accent\"\r\n class=\"lf-bottom-bar-button-icon ml-2\"\r\n [ngClass]=\"button.cssClass\"\r\n (click)=\"buttonClicked(button.id)\"\r\n [matTooltip]=\"button.tooltip\">\r\n <lf-icon [matIcon]=\"button.matIcon\" [svgIcon]=\"button.svgIcon\"></lf-icon>\r\n </button>\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n}\r\n", styles: [".lf-bottom-bar{transition:bottom .3s;transition:left .3s;z-index:101;position:fixed;left:0;bottom:0;right:0;height:56px;display:flex;align-items:center;box-sizing:border-box;background-color:var(--color-accent);color:#fff}.lf-bottom-bar.lf-bottom-bar-show-navbar-mobile{bottom:64px!important}.lf-bottom-bar.lf-bottom-bar-show-navbar{left:80px!important}.lf-bottom-bar .lf-bottom-bar-buttons{display:flex;align-items:center}.lf-bottom-bar .lf-bottom-bar-buttons .lf-bottom-bar-button{color:var(--color-accent)!important;background-color:#fff!important}.lf-bottom-bar .lf-bottom-bar-buttons .lf-bottom-bar-button-icon{color:#fff!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: IconComponent, selector: "lf-icon", inputs: ["matIcon", "svgIcon", "verticalAlign"] }] }); }
206
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: BottomBarComponent, isStandalone: false, selector: "lf-bottom-bar", inputs: { libraryConfig: "libraryConfig", bottomBarConfig: "bottomBarConfig", isMobile: "isMobile", navbarEnabled: "navbarEnabled" }, outputs: { bottomBarCloseClickEvent: "bottomBarCloseClickEvent", bottomBarButtonClickEvent: "bottomBarButtonClickEvent" }, ngImport: i0, template: "@if (bottomBarConfig && bottomBarConfig.enable) {\r\n <div\r\n [@slideUpDown]\r\n class=\"lf-bottom-bar px-4\"\r\n [ngClass]=\"bottomBarConfig.cssClass\"\r\n [class.lf-bottom-bar-show-navbar]=\"!isMobile && navbarEnabled\"\r\n [class.lf-bottom-bar-show-navbar-mobile]=\"isMobile && navbarEnabled\">\r\n @if (bottomBarConfig.closeButtonId) {\r\n <button mat-icon-button (click)=\"closeClicked(bottomBarConfig.closeButtonId)\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n }\r\n @if (bottomBarConfig.message) {\r\n <span class=\"ml-2\">{{ bottomBarConfig.message }}</span>\r\n }\r\n @if (bottomBarConfig.buttons) {\r\n <div class=\"lf-bottom-bar-buttons ml-4\">\r\n @for (button of bottomBarConfig.buttons; track button.id) {\r\n @if (button.label) {\r\n <button\r\n mat-button\r\n class=\"lf-bottom-bar-button ml-2\"\r\n [ngClass]=\"button.cssClass\"\r\n (click)=\"buttonClicked(button.id)\"\r\n [matTooltip]=\"button.tooltip\">\r\n @if (button.matIcon || button.svgIcon) {\r\n <lf-icon\r\n [matIcon]=\"button.matIcon\"\r\n [svgIcon]=\"button.svgIcon\"\r\n verticalAlign=\"bottom\"></lf-icon>\r\n }\r\n {{ button.label }}\r\n </button>\r\n } @else {\r\n <button\r\n mat-icon-button\r\n color=\"accent\"\r\n class=\"lf-bottom-bar-button-icon ml-2\"\r\n [ngClass]=\"button.cssClass\"\r\n (click)=\"buttonClicked(button.id)\"\r\n [matTooltip]=\"button.tooltip\">\r\n <lf-icon [matIcon]=\"button.matIcon\" [svgIcon]=\"button.svgIcon\"></lf-icon>\r\n </button>\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n}\r\n", styles: [".lf-bottom-bar{transition:all .3s;z-index:98;position:fixed;left:0;bottom:0;right:0;height:56px;display:flex;align-items:center;box-sizing:border-box;background-color:var(--color-accent);color:#fff}.lf-bottom-bar.lf-bottom-bar-show-navbar-mobile{bottom:64px!important}.lf-bottom-bar.lf-bottom-bar-show-navbar{left:80px!important}.lf-bottom-bar .lf-bottom-bar-buttons{display:flex;align-items:center}.lf-bottom-bar .lf-bottom-bar-buttons .lf-bottom-bar-button{color:var(--color-accent)!important;background-color:#fff!important}.lf-bottom-bar .lf-bottom-bar-buttons .lf-bottom-bar-button-icon{color:#fff!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: IconComponent, selector: "lf-icon", inputs: ["matIcon", "svgIcon", "verticalAlign"] }], animations: [
207
+ trigger('slideUpDown', [
208
+ state('void', style({ transform: 'translateY(100%)' })),
209
+ state('*', style({ transform: 'translateY(0)' })),
210
+ transition(':enter', [style({ transform: 'translateY(100%)' }), animate('200ms linear')]),
211
+ transition(':leave', [animate('200ms linear', style({ transform: 'translateY(100%)' }))])
212
+ ])
213
+ ] }); }
248
214
  }
249
215
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BottomBarComponent, decorators: [{
250
216
  type: Component,
251
- args: [{ selector: 'lf-bottom-bar', standalone: false, template: "@if (bottomBarConfig && bottomBarConfig.enable) {\r\n <div\r\n class=\"lf-bottom-bar px-4\"\r\n [ngClass]=\"bottomBarConfig.cssClass\"\r\n [class.lf-bottom-bar-show-navbar]=\"!isMobile && navbarEnabled\"\r\n [class.lf-bottom-bar-show-navbar-mobile]=\"isMobile && navbarEnabled\">\r\n @if (bottomBarConfig.closeButtonId) {\r\n <button mat-icon-button (click)=\"closeClicked(bottomBarConfig.closeButtonId)\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n }\r\n @if (bottomBarConfig.message) {\r\n <span class=\"ml-2\">{{ bottomBarConfig.message }}</span>\r\n }\r\n @if (bottomBarConfig.buttons) {\r\n <div class=\"lf-bottom-bar-buttons ml-4\">\r\n @for (button of bottomBarConfig.buttons; track button.id) {\r\n @if (button.label) {\r\n <button\r\n mat-button\r\n class=\"lf-bottom-bar-button ml-2\"\r\n [ngClass]=\"button.cssClass\"\r\n (click)=\"buttonClicked(button.id)\"\r\n [matTooltip]=\"button.tooltip\">\r\n @if (button.matIcon || button.svgIcon) {\r\n <lf-icon\r\n [matIcon]=\"button.matIcon\"\r\n [svgIcon]=\"button.svgIcon\"\r\n verticalAlign=\"bottom\"></lf-icon>\r\n }\r\n {{ button.label }}\r\n </button>\r\n } @else {\r\n <button\r\n mat-icon-button\r\n color=\"accent\"\r\n class=\"lf-bottom-bar-button-icon ml-2\"\r\n [ngClass]=\"button.cssClass\"\r\n (click)=\"buttonClicked(button.id)\"\r\n [matTooltip]=\"button.tooltip\">\r\n <lf-icon [matIcon]=\"button.matIcon\" [svgIcon]=\"button.svgIcon\"></lf-icon>\r\n </button>\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n}\r\n", styles: [".lf-bottom-bar{transition:bottom .3s;transition:left .3s;z-index:101;position:fixed;left:0;bottom:0;right:0;height:56px;display:flex;align-items:center;box-sizing:border-box;background-color:var(--color-accent);color:#fff}.lf-bottom-bar.lf-bottom-bar-show-navbar-mobile{bottom:64px!important}.lf-bottom-bar.lf-bottom-bar-show-navbar{left:80px!important}.lf-bottom-bar .lf-bottom-bar-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"] }]
217
+ args: [{ selector: 'lf-bottom-bar', animations: [
218
+ trigger('slideUpDown', [
219
+ state('void', style({ transform: 'translateY(100%)' })),
220
+ state('*', style({ transform: 'translateY(0)' })),
221
+ transition(':enter', [style({ transform: 'translateY(100%)' }), animate('200ms linear')]),
222
+ transition(':leave', [animate('200ms linear', style({ transform: 'translateY(100%)' }))])
223
+ ])
224
+ ], standalone: false, template: "@if (bottomBarConfig && bottomBarConfig.enable) {\r\n <div\r\n [@slideUpDown]\r\n class=\"lf-bottom-bar px-4\"\r\n [ngClass]=\"bottomBarConfig.cssClass\"\r\n [class.lf-bottom-bar-show-navbar]=\"!isMobile && navbarEnabled\"\r\n [class.lf-bottom-bar-show-navbar-mobile]=\"isMobile && navbarEnabled\">\r\n @if (bottomBarConfig.closeButtonId) {\r\n <button mat-icon-button (click)=\"closeClicked(bottomBarConfig.closeButtonId)\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n }\r\n @if (bottomBarConfig.message) {\r\n <span class=\"ml-2\">{{ bottomBarConfig.message }}</span>\r\n }\r\n @if (bottomBarConfig.buttons) {\r\n <div class=\"lf-bottom-bar-buttons ml-4\">\r\n @for (button of bottomBarConfig.buttons; track button.id) {\r\n @if (button.label) {\r\n <button\r\n mat-button\r\n class=\"lf-bottom-bar-button ml-2\"\r\n [ngClass]=\"button.cssClass\"\r\n (click)=\"buttonClicked(button.id)\"\r\n [matTooltip]=\"button.tooltip\">\r\n @if (button.matIcon || button.svgIcon) {\r\n <lf-icon\r\n [matIcon]=\"button.matIcon\"\r\n [svgIcon]=\"button.svgIcon\"\r\n verticalAlign=\"bottom\"></lf-icon>\r\n }\r\n {{ button.label }}\r\n </button>\r\n } @else {\r\n <button\r\n mat-icon-button\r\n color=\"accent\"\r\n class=\"lf-bottom-bar-button-icon ml-2\"\r\n [ngClass]=\"button.cssClass\"\r\n (click)=\"buttonClicked(button.id)\"\r\n [matTooltip]=\"button.tooltip\">\r\n <lf-icon [matIcon]=\"button.matIcon\" [svgIcon]=\"button.svgIcon\"></lf-icon>\r\n </button>\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n}\r\n", styles: [".lf-bottom-bar{transition:all .3s;z-index:98;position:fixed;left:0;bottom:0;right:0;height:56px;display:flex;align-items:center;box-sizing:border-box;background-color:var(--color-accent);color:#fff}.lf-bottom-bar.lf-bottom-bar-show-navbar-mobile{bottom:64px!important}.lf-bottom-bar.lf-bottom-bar-show-navbar{left:80px!important}.lf-bottom-bar .lf-bottom-bar-buttons{display:flex;align-items:center}.lf-bottom-bar .lf-bottom-bar-buttons .lf-bottom-bar-button{color:var(--color-accent)!important;background-color:#fff!important}.lf-bottom-bar .lf-bottom-bar-buttons .lf-bottom-bar-button-icon{color:#fff!important}\n"] }]
252
225
  }], propDecorators: { libraryConfig: [{
253
226
  type: Input
254
227
  }], bottomBarConfig: [{
@@ -314,11 +287,11 @@ class DrawerComponent {
314
287
  ;
315
288
  }
316
289
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
317
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: DrawerComponent, isStandalone: false, selector: "lf-drawer", inputs: { libraryConfig: "libraryConfig", drawerConfig: "drawerConfig", isMobile: "isMobile", fixedOffset: "fixedOffset", drawerPortal: "drawerPortal" }, outputs: { drawerConfigUpdateEvent: "drawerConfigUpdateEvent" }, ngImport: i0, template: "@if (drawerConfig && drawerConfig.enable) {\r\n <mat-sidenav-container class=\"lf-drawer-container\" [ngClass]=\"drawerConfig.cssClass\">\r\n <!-- drawer -->\r\n <mat-sidenav\r\n class=\"lf-drawer mat-elevation-z2\"\r\n [mode]=\"isMobile ? 'over' : 'side'\"\r\n [opened]=\"drawerConfig.open\"\r\n [autoFocus]=\"false\"\r\n [fixedInViewport]=\"drawerConfig.fixed\"\r\n [fixedTopGap]=\"fixedOffset\"\r\n (closed)=\"drawerClosed()\"\r\n #drawer>\r\n <!-- drawer content -->\r\n <!-- <ng-content select=\"[drawerContent]\"></ng-content> -->\r\n @if (drawerPortal) {\r\n <ng-template [cdkPortalOutlet]=\"drawerPortal\"></ng-template>\r\n } @else {\r\n <ng-content select=\"[drawerContent]\"></ng-content>\r\n }\r\n </mat-sidenav>\r\n <mat-sidenav-content>\r\n <!-- main content -->\r\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n </mat-sidenav-content>\r\n </mat-sidenav-container>\r\n} @else {\r\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n}\r\n\r\n<!-- render content without drawer -->\r\n\r\n<!-- this template is required to allow multiple <ng-content></ng-content> -->\r\n<ng-template #content><ng-content></ng-content></ng-template>\r\n", styles: [".lf-drawer-container{z-index:unset!important}.lf-drawer-container .lf-drawer{width:208px;z-index:98}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i2$1.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i2$1.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "directive", type: i3$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }] }); }
290
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: DrawerComponent, isStandalone: false, selector: "lf-drawer", inputs: { libraryConfig: "libraryConfig", drawerConfig: "drawerConfig", isMobile: "isMobile", fixedOffset: "fixedOffset", drawerPortal: "drawerPortal" }, outputs: { drawerConfigUpdateEvent: "drawerConfigUpdateEvent" }, ngImport: i0, template: "@if (drawerConfig && drawerConfig.enable) {\r\n <mat-sidenav-container class=\"lf-drawer-container\" [ngClass]=\"drawerConfig.cssClass\">\r\n <!-- drawer -->\r\n <mat-sidenav\r\n class=\"lf-drawer mat-elevation-z2\"\r\n [mode]=\"isMobile ? 'over' : 'side'\"\r\n [opened]=\"drawerConfig.open\"\r\n [autoFocus]=\"false\"\r\n [fixedInViewport]=\"drawerConfig.fixed\"\r\n [fixedTopGap]=\"fixedOffset\"\r\n (closed)=\"drawerClosed()\"\r\n #drawer>\r\n <!-- drawer content -->\r\n <!-- <ng-content select=\"[drawerContent]\"></ng-content> -->\r\n @if (drawerPortal) {\r\n <ng-template [cdkPortalOutlet]=\"drawerPortal\"></ng-template>\r\n } @else {\r\n <ng-content select=\"[drawerContent]\"></ng-content>\r\n }\r\n </mat-sidenav>\r\n <mat-sidenav-content>\r\n <!-- main content -->\r\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n </mat-sidenav-content>\r\n </mat-sidenav-container>\r\n} @else {\r\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n}\r\n\r\n<!-- render content without drawer -->\r\n\r\n<!-- this template is required to allow multiple <ng-content></ng-content> -->\r\n<ng-template #content><ng-content></ng-content></ng-template>\r\n", styles: [".lf-drawer-container{z-index:unset!important}.lf-drawer-container .lf-drawer{width:208px;z-index:97}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i2$1.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i2$1.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "directive", type: i3$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }] }); }
318
291
  }
319
292
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DrawerComponent, decorators: [{
320
293
  type: Component,
321
- args: [{ selector: 'lf-drawer', standalone: false, template: "@if (drawerConfig && drawerConfig.enable) {\r\n <mat-sidenav-container class=\"lf-drawer-container\" [ngClass]=\"drawerConfig.cssClass\">\r\n <!-- drawer -->\r\n <mat-sidenav\r\n class=\"lf-drawer mat-elevation-z2\"\r\n [mode]=\"isMobile ? 'over' : 'side'\"\r\n [opened]=\"drawerConfig.open\"\r\n [autoFocus]=\"false\"\r\n [fixedInViewport]=\"drawerConfig.fixed\"\r\n [fixedTopGap]=\"fixedOffset\"\r\n (closed)=\"drawerClosed()\"\r\n #drawer>\r\n <!-- drawer content -->\r\n <!-- <ng-content select=\"[drawerContent]\"></ng-content> -->\r\n @if (drawerPortal) {\r\n <ng-template [cdkPortalOutlet]=\"drawerPortal\"></ng-template>\r\n } @else {\r\n <ng-content select=\"[drawerContent]\"></ng-content>\r\n }\r\n </mat-sidenav>\r\n <mat-sidenav-content>\r\n <!-- main content -->\r\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n </mat-sidenav-content>\r\n </mat-sidenav-container>\r\n} @else {\r\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n}\r\n\r\n<!-- render content without drawer -->\r\n\r\n<!-- this template is required to allow multiple <ng-content></ng-content> -->\r\n<ng-template #content><ng-content></ng-content></ng-template>\r\n", styles: [".lf-drawer-container{z-index:unset!important}.lf-drawer-container .lf-drawer{width:208px;z-index:98}\n"] }]
294
+ args: [{ selector: 'lf-drawer', standalone: false, template: "@if (drawerConfig && drawerConfig.enable) {\r\n <mat-sidenav-container class=\"lf-drawer-container\" [ngClass]=\"drawerConfig.cssClass\">\r\n <!-- drawer -->\r\n <mat-sidenav\r\n class=\"lf-drawer mat-elevation-z2\"\r\n [mode]=\"isMobile ? 'over' : 'side'\"\r\n [opened]=\"drawerConfig.open\"\r\n [autoFocus]=\"false\"\r\n [fixedInViewport]=\"drawerConfig.fixed\"\r\n [fixedTopGap]=\"fixedOffset\"\r\n (closed)=\"drawerClosed()\"\r\n #drawer>\r\n <!-- drawer content -->\r\n <!-- <ng-content select=\"[drawerContent]\"></ng-content> -->\r\n @if (drawerPortal) {\r\n <ng-template [cdkPortalOutlet]=\"drawerPortal\"></ng-template>\r\n } @else {\r\n <ng-content select=\"[drawerContent]\"></ng-content>\r\n }\r\n </mat-sidenav>\r\n <mat-sidenav-content>\r\n <!-- main content -->\r\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n </mat-sidenav-content>\r\n </mat-sidenav-container>\r\n} @else {\r\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n}\r\n\r\n<!-- render content without drawer -->\r\n\r\n<!-- this template is required to allow multiple <ng-content></ng-content> -->\r\n<ng-template #content><ng-content></ng-content></ng-template>\r\n", styles: [".lf-drawer-container{z-index:unset!important}.lf-drawer-container .lf-drawer{width:208px;z-index:97}\n"] }]
322
295
  }], propDecorators: { libraryConfig: [{
323
296
  type: Input
324
297
  }], drawerConfig: [{
@@ -373,11 +346,11 @@ class FloatingButtonComponent {
373
346
  return bottomPosition;
374
347
  }
375
348
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: FloatingButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
376
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: FloatingButtonComponent, isStandalone: false, selector: "lf-floating-button", inputs: { libraryConfig: "libraryConfig", floatingButtonConfig: "floatingButtonConfig", onTop: "onTop", isMobile: "isMobile", bottomBarEnabled: "bottomBarEnabled" }, outputs: { floatingButtonConfigUpdateEvent: "floatingButtonConfigUpdateEvent", floatingButtonClickEvent: "floatingButtonClickEvent" }, ngImport: i0, template: "@if (\r\n floatingButtonConfig && floatingButtonConfig.enable && (!floatingButtonConfig.autoHide || !onTop)\r\n) {\r\n <button\r\n mat-fab\r\n color=\"accent\"\r\n class=\"lf-floating-button\"\r\n [style.bottom]=\"getBottomPosition() + 'px'\"\r\n [ngClass]=\"floatingButtonConfig.cssClass\"\r\n [ngClass]=\"floatingButtonConfig.horizontalPosition\"\r\n [extended]=\"!!floatingButtonConfig.label\"\r\n (click)=\"buttonClicked(floatingButtonConfig.id)\"\r\n [matTooltip]=\"floatingButtonConfig.tooltip!\">\r\n <!-- mat icon -->\r\n @if (floatingButtonConfig.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n {{ floatingButtonConfig.matIcon }}\r\n </mat-icon>\r\n } @else if (floatingButtonConfig.svgIcon) {\r\n <mat-icon [svgIcon]=\"floatingButtonConfig.svgIcon!\"></mat-icon>\r\n }\r\n <!-- svg icon -->\r\n <!-- label -->\r\n @if (floatingButtonConfig.label) {\r\n <span class=\"lf-floating-button-label\">\r\n {{ floatingButtonConfig.label }}\r\n </span>\r\n }\r\n </button>\r\n}\r\n", styles: [".lf-floating-button{position:fixed;transition:bottom .3s;z-index:100}.lf-floating-button.left{left:24px}.lf-floating-button.center{left:50%;transform:translate(-50%)}.lf-floating-button.right{right:24px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
349
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: FloatingButtonComponent, isStandalone: false, selector: "lf-floating-button", inputs: { libraryConfig: "libraryConfig", floatingButtonConfig: "floatingButtonConfig", onTop: "onTop", isMobile: "isMobile", bottomBarEnabled: "bottomBarEnabled" }, outputs: { floatingButtonConfigUpdateEvent: "floatingButtonConfigUpdateEvent", floatingButtonClickEvent: "floatingButtonClickEvent" }, ngImport: i0, template: "@if (\r\n floatingButtonConfig && floatingButtonConfig.enable && (!floatingButtonConfig.autoHide || !onTop)\r\n) {\r\n <button\r\n mat-fab\r\n color=\"accent\"\r\n class=\"lf-floating-button\"\r\n [style.bottom]=\"getBottomPosition() + 'px'\"\r\n [ngClass]=\"floatingButtonConfig.cssClass\"\r\n [ngClass]=\"floatingButtonConfig.horizontalPosition\"\r\n [extended]=\"!!floatingButtonConfig.label\"\r\n (click)=\"buttonClicked(floatingButtonConfig.id)\"\r\n [matTooltip]=\"floatingButtonConfig.tooltip!\">\r\n <!-- mat icon -->\r\n @if (floatingButtonConfig.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n {{ floatingButtonConfig.matIcon }}\r\n </mat-icon>\r\n } @else if (floatingButtonConfig.svgIcon) {\r\n <mat-icon [svgIcon]=\"floatingButtonConfig.svgIcon!\"></mat-icon>\r\n }\r\n <!-- svg icon -->\r\n <!-- label -->\r\n @if (floatingButtonConfig.label) {\r\n <span class=\"lf-floating-button-label\">\r\n {{ floatingButtonConfig.label }}\r\n </span>\r\n }\r\n </button>\r\n}\r\n", styles: [".lf-floating-button{transition:all .3s;position:fixed;z-index:100}.lf-floating-button.left{left:24px}.lf-floating-button.center{left:50%;transform:translate(-50%)}.lf-floating-button.right{right:24px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
377
350
  }
378
351
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: FloatingButtonComponent, decorators: [{
379
352
  type: Component,
380
- args: [{ selector: 'lf-floating-button', standalone: false, template: "@if (\r\n floatingButtonConfig && floatingButtonConfig.enable && (!floatingButtonConfig.autoHide || !onTop)\r\n) {\r\n <button\r\n mat-fab\r\n color=\"accent\"\r\n class=\"lf-floating-button\"\r\n [style.bottom]=\"getBottomPosition() + 'px'\"\r\n [ngClass]=\"floatingButtonConfig.cssClass\"\r\n [ngClass]=\"floatingButtonConfig.horizontalPosition\"\r\n [extended]=\"!!floatingButtonConfig.label\"\r\n (click)=\"buttonClicked(floatingButtonConfig.id)\"\r\n [matTooltip]=\"floatingButtonConfig.tooltip!\">\r\n <!-- mat icon -->\r\n @if (floatingButtonConfig.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n {{ floatingButtonConfig.matIcon }}\r\n </mat-icon>\r\n } @else if (floatingButtonConfig.svgIcon) {\r\n <mat-icon [svgIcon]=\"floatingButtonConfig.svgIcon!\"></mat-icon>\r\n }\r\n <!-- svg icon -->\r\n <!-- label -->\r\n @if (floatingButtonConfig.label) {\r\n <span class=\"lf-floating-button-label\">\r\n {{ floatingButtonConfig.label }}\r\n </span>\r\n }\r\n </button>\r\n}\r\n", styles: [".lf-floating-button{position:fixed;transition:bottom .3s;z-index:100}.lf-floating-button.left{left:24px}.lf-floating-button.center{left:50%;transform:translate(-50%)}.lf-floating-button.right{right:24px}\n"] }]
353
+ args: [{ selector: 'lf-floating-button', standalone: false, template: "@if (\r\n floatingButtonConfig && floatingButtonConfig.enable && (!floatingButtonConfig.autoHide || !onTop)\r\n) {\r\n <button\r\n mat-fab\r\n color=\"accent\"\r\n class=\"lf-floating-button\"\r\n [style.bottom]=\"getBottomPosition() + 'px'\"\r\n [ngClass]=\"floatingButtonConfig.cssClass\"\r\n [ngClass]=\"floatingButtonConfig.horizontalPosition\"\r\n [extended]=\"!!floatingButtonConfig.label\"\r\n (click)=\"buttonClicked(floatingButtonConfig.id)\"\r\n [matTooltip]=\"floatingButtonConfig.tooltip!\">\r\n <!-- mat icon -->\r\n @if (floatingButtonConfig.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n {{ floatingButtonConfig.matIcon }}\r\n </mat-icon>\r\n } @else if (floatingButtonConfig.svgIcon) {\r\n <mat-icon [svgIcon]=\"floatingButtonConfig.svgIcon!\"></mat-icon>\r\n }\r\n <!-- svg icon -->\r\n <!-- label -->\r\n @if (floatingButtonConfig.label) {\r\n <span class=\"lf-floating-button-label\">\r\n {{ floatingButtonConfig.label }}\r\n </span>\r\n }\r\n </button>\r\n}\r\n", styles: [".lf-floating-button{transition:all .3s;position:fixed;z-index:100}.lf-floating-button.left{left:24px}.lf-floating-button.center{left:50%;transform:translate(-50%)}.lf-floating-button.right{right:24px}\n"] }]
381
354
  }], propDecorators: { libraryConfig: [{
382
355
  type: Input
383
356
  }], floatingButtonConfig: [{
@@ -521,11 +494,25 @@ class HeaderComponent {
521
494
  return route === id;
522
495
  }
523
496
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
524
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: HeaderComponent, isStandalone: false, selector: "lf-header", inputs: { libraryConfig: "libraryConfig", headerConfig: "headerConfig", isMobile: "isMobile", routeLoading: "routeLoading", currentRoute: "currentRoute" }, outputs: { headerConfigUpdateEvent: "headerConfigUpdateEvent", headerButtonClickEvent: "headerButtonClickEvent", headerInputSubmitEvent: "headerInputSubmitEvent", headerInputChangeEvent: "headerInputChangeEvent" }, ngImport: i0, template: "@if (headerConfig && headerConfig.enable) {\r\n <mat-toolbar\r\n class=\"lf-header mat-elevation-z3\"\r\n [class.px-4]=\"!isMobile\"\r\n [class.px-1]=\"isMobile\"\r\n [ngClass]=\"headerConfig.cssClass\"\r\n color=\"primary\">\r\n <!-- left menu button -->\r\n <ng-container\r\n [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n menuButton: headerConfig.leftMenuButton!,\r\n hideLabel: true,\r\n }\"></ng-container>\r\n <!-- logo & title -->\r\n <div\r\n class=\"lf-header-logo-title-wrapper ml-1 mr-2\"\r\n [class.ml-10]=\"headerConfig.leftMenuButton && !isMobile\">\r\n <!-- link wrapper -->\r\n <div\r\n class=\"lf-header-logo-title-wrapper-link\"\r\n [class.lf-clickable]=\"headerConfig.titleRouterLink\"\r\n [routerLink]=\"headerConfig.titleRouterLink ? [headerConfig.titleRouterLink] : null\">\r\n <!-- svg logo -->\r\n @if (headerConfig.svgLogo) {\r\n <mat-icon\r\n class=\"lf-header-logo\"\r\n [class.mr-3]=\"headerConfig.title\"\r\n [svgIcon]=\"headerConfig.svgLogo!\"></mat-icon>\r\n } @else {\r\n @if (headerConfig.imgLogo) {\r\n <img\r\n class=\"lf-header-logo\"\r\n [class.mr-3]=\"headerConfig.title\"\r\n [src]=\"headerConfig.imgLogo\"\r\n alt=\"Logo\" />\r\n }\r\n }\r\n <!-- img logo -->\r\n <!-- title -->\r\n @if (headerConfig.title) {\r\n <div class=\"lf-header-title-wrapper\">\r\n @if (headerConfig.title) {\r\n <span class=\"lf-header-title\">\r\n {{ headerConfig.title }}\r\n </span>\r\n }\r\n @if (headerConfig.subtitle) {\r\n <span class=\"lf-header-subtitle\">\r\n {{ headerConfig.subtitle }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n <!-- input -->\r\n @if (headerConfig.inputConfig?.enable) {\r\n <div class=\"spacer\"></div>\r\n <lf-input\r\n [class.lf-header-input-mobile]=\"isMobile\"\r\n [class.mx-3]=\"!isMobile\"\r\n [inputConfig]=\"headerConfig.inputConfig!\"\r\n [isMobile]=\"isMobile\"\r\n (inputSubmitEvent)=\"inputSubmitted($event)\"\r\n (inputChangeEvent)=\"inputChanged($event)\"\r\n (inputPrefixActionEvent)=\"inputClosed()\"></lf-input>\r\n }\r\n <!-- spacer -->\r\n <div class=\"spacer\"></div>\r\n <!-- right menu buttons -->\r\n @for (button of headerConfig.rightMenuButtons; track button.id) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n menuButton: button,\r\n }\"></ng-container>\r\n }\r\n </mat-toolbar>\r\n <!-- loading bar -->\r\n @if (headerConfig.loading || (headerConfig.showRouteLoading && routeLoading)) {\r\n <mat-progress-bar\r\n class=\"lf-header-progress-bar\"\r\n color=\"accent\"\r\n mode=\"indeterminate\"></mat-progress-bar>\r\n }\r\n}\r\n\r\n<!-- header menu button -->\r\n<ng-template #menuButtonTemplate let-menuButton=\"menuButton\" let-hideLabel=\"hideLabel\">\r\n @if (menuButton) {\r\n <!-- icon button -->\r\n @if ((menuButton.matIcon || menuButton.svgIcon) && (!menuButton.label || hideLabel)) {\r\n <button\r\n mat-icon-button\r\n class=\"lf-header-menu-button\"\r\n [ngClass]=\"menuButton.cssClass\"\r\n (click)=\"buttonClicked(menuButton.id)\"\r\n [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n [matTooltip]=\"menuButton.tooltip\"\r\n [attr.aria-label]=\"menuButton.id\">\r\n <!-- icon -->\r\n <lf-icon [matIcon]=\"menuButton.matIcon\" [svgIcon]=\"menuButton.svgIcon\"></lf-icon>\r\n </button>\r\n } @else {\r\n @if (!hideLabel) {\r\n <button\r\n mat-button\r\n class=\"lf-header-menu-button\"\r\n [class.lf-header-menu-button-active]=\"isActive(menuButton.id)\"\r\n [ngClass]=\"menuButton.cssClass\"\r\n (click)=\"buttonClicked(menuButton.id)\"\r\n [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n [matTooltip]=\"menuButton.tooltip\">\r\n <!-- label -->\r\n {{ menuButton.label }}\r\n </button>\r\n }\r\n }\r\n <!-- text button -->\r\n <!-- menu -->\r\n <mat-menu #menu=\"matMenu\">\r\n <!-- label menu buttons -->\r\n @for (button of menuButton.menuButtons; track button.id) {\r\n <!-- menu button -->\r\n @if (button.label) {\r\n <button\r\n mat-menu-item\r\n [class.lf-header-menu-button-active]=\"isActive(button.id)\"\r\n [ngClass]=\"button.cssClass\"\r\n (click)=\"buttonClicked(button.id)\">\r\n <!-- icon -->\r\n <lf-icon\r\n [matIcon]=\"button.matIcon\"\r\n [svgIcon]=\"button.svgIcon\"\r\n verticalAlign=\"bottom\"></lf-icon>\r\n <!-- label -->\r\n @if (button.label) {\r\n <span>{{ button.label }}</span>\r\n }\r\n </button>\r\n }\r\n }\r\n <!-- icon menu buttons -->\r\n <div mat-menu-item class=\"lf-menu-icons px-1\">\r\n @for (button of menuButton.menuButtons; track button.id) {\r\n <!-- icon button -->\r\n @if (!button.label && (button.matIcon || button.svgIcon)) {\r\n <button\r\n mat-icon-button\r\n class=\"lf-menu-icon-button\"\r\n [ngClass]=\"button.cssClass\"\r\n (click)=\"buttonClicked(button.id)\"\r\n [matTooltip]=\"button.tooltip\">\r\n <!-- icon -->\r\n <lf-icon\r\n [matIcon]=\"button.matIcon\"\r\n [svgIcon]=\"button.svgIcon\"\r\n verticalAlign=\"top\"></lf-icon>\r\n </button>\r\n }\r\n }\r\n </div>\r\n </mat-menu>\r\n }\r\n</ng-template>\r\n", styles: [".lf-header{transition:top .3s;z-index:100;position:fixed;top:0;height:64px}.lf-header .lf-header-menu-button{flex-shrink:0;max-width:144px}.lf-header .lf-header-menu-button ::ng-deep .mdc-button__label{overflow:hidden;text-overflow:ellipsis}.lf-header .lf-header-menu-button.lf-header-menu-button-active{background-color:#fff}.lf-header .lf-header-logo-title-wrapper{flex:0 0 auto;max-width:480px;overflow:hidden;display:flex}.lf-header .lf-header-logo-title-wrapper .lf-header-logo-title-wrapper-link{display:flex;flex-flow:row nowrap;align-items:center;flex:0}.lf-header .lf-header-logo-title-wrapper .lf-header-logo-title-wrapper-link.lf-clickable{cursor:pointer}.lf-header .lf-header-logo-title-wrapper .lf-header-logo{width:40px;height:40px;min-width:40px;min-height:40px}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper{display:flex;flex-flow:column}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-title{font-size:20px;line-height:28px}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-subtitle{font-size:12px;line-height:12px}.lf-header lf-input{z-index:100;flex:1 1 480px}.lf-header lf-input.lf-header-input-mobile{position:fixed!important;left:4px!important;right:4px!important;width:unset!important;max-width:unset!important}.lf-header .spacer{flex:1 0 auto}.lf-menu-icons{min-height:unset!important}.lf-header-progress-bar{z-index:100;position:fixed;top:64px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i2.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: InputComponent, selector: "lf-input", inputs: ["inputConfig", "isMobile"], outputs: ["inputSubmitEvent", "inputChangeEvent", "inputPrefixActionEvent"] }, { kind: "component", type: IconComponent, selector: "lf-icon", inputs: ["matIcon", "svgIcon", "verticalAlign"] }] }); }
497
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: HeaderComponent, isStandalone: false, selector: "lf-header", inputs: { libraryConfig: "libraryConfig", headerConfig: "headerConfig", isMobile: "isMobile", routeLoading: "routeLoading", currentRoute: "currentRoute" }, outputs: { headerConfigUpdateEvent: "headerConfigUpdateEvent", headerButtonClickEvent: "headerButtonClickEvent", headerInputSubmitEvent: "headerInputSubmitEvent", headerInputChangeEvent: "headerInputChangeEvent" }, ngImport: i0, template: "@if (headerConfig && headerConfig.enable) {\r\n <mat-toolbar\r\n class=\"lf-header mat-elevation-z3\"\r\n [class.px-4]=\"!isMobile\"\r\n [class.px-1]=\"isMobile\"\r\n [ngClass]=\"headerConfig.cssClass\"\r\n color=\"primary\">\r\n <!-- left menu button -->\r\n <ng-container\r\n [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n menuButton: headerConfig.leftMenuButton!,\r\n hideLabel: true,\r\n }\"></ng-container>\r\n <!-- logo & title -->\r\n <div\r\n class=\"lf-header-logo-title-wrapper ml-1 mr-2\"\r\n [class.ml-10]=\"headerConfig.leftMenuButton && !isMobile\">\r\n <!-- link wrapper -->\r\n <div\r\n class=\"lf-header-logo-title-wrapper-link\"\r\n [class.lf-clickable]=\"headerConfig.titleRouterLink\"\r\n [routerLink]=\"headerConfig.titleRouterLink ? [headerConfig.titleRouterLink] : null\">\r\n <!-- svg logo -->\r\n @if (headerConfig.svgLogo) {\r\n <mat-icon\r\n class=\"lf-header-logo\"\r\n [class.mr-3]=\"headerConfig.title\"\r\n [svgIcon]=\"headerConfig.svgLogo!\"></mat-icon>\r\n } @else {\r\n @if (headerConfig.imgLogo) {\r\n <img\r\n class=\"lf-header-logo\"\r\n [class.mr-3]=\"headerConfig.title\"\r\n [src]=\"headerConfig.imgLogo\"\r\n alt=\"Logo\" />\r\n }\r\n }\r\n <!-- img logo -->\r\n <!-- title -->\r\n @if (headerConfig.title) {\r\n <div class=\"lf-header-title-wrapper\">\r\n @if (headerConfig.title) {\r\n <span class=\"lf-header-title\">\r\n {{ headerConfig.title }}\r\n </span>\r\n }\r\n @if (headerConfig.subtitle) {\r\n <span class=\"lf-header-subtitle\">\r\n {{ headerConfig.subtitle }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n <!-- input -->\r\n @if (headerConfig.inputConfig?.enable) {\r\n <div class=\"spacer\"></div>\r\n <lf-input\r\n [class.lf-header-input-mobile]=\"isMobile\"\r\n [class.mx-3]=\"!isMobile\"\r\n [inputConfig]=\"headerConfig.inputConfig!\"\r\n [isMobile]=\"isMobile\"\r\n (inputSubmitEvent)=\"inputSubmitted($event)\"\r\n (inputChangeEvent)=\"inputChanged($event)\"\r\n (inputPrefixActionEvent)=\"inputClosed()\"></lf-input>\r\n }\r\n <!-- spacer -->\r\n <div class=\"spacer\"></div>\r\n <!-- right menu buttons -->\r\n @for (button of headerConfig.rightMenuButtons; track button.id) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n menuButton: button,\r\n }\"></ng-container>\r\n }\r\n </mat-toolbar>\r\n <!-- loading bar -->\r\n @if (headerConfig.loading || (headerConfig.showRouteLoading && routeLoading)) {\r\n <mat-progress-bar\r\n class=\"lf-header-progress-bar\"\r\n color=\"accent\"\r\n mode=\"indeterminate\"></mat-progress-bar>\r\n }\r\n}\r\n\r\n<!-- header menu button -->\r\n<ng-template #menuButtonTemplate let-menuButton=\"menuButton\" let-hideLabel=\"hideLabel\">\r\n @if (menuButton) {\r\n <!-- icon button -->\r\n @if ((menuButton.matIcon || menuButton.svgIcon) && (!menuButton.label || hideLabel)) {\r\n <button\r\n mat-icon-button\r\n class=\"lf-header-menu-button\"\r\n [ngClass]=\"menuButton.cssClass\"\r\n (click)=\"buttonClicked(menuButton.id)\"\r\n [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n [matTooltip]=\"menuButton.tooltip\"\r\n [attr.aria-label]=\"menuButton.id\">\r\n <!-- icon -->\r\n <lf-icon [matIcon]=\"menuButton.matIcon\" [svgIcon]=\"menuButton.svgIcon\"></lf-icon>\r\n </button>\r\n } @else {\r\n @if (!hideLabel) {\r\n <button\r\n mat-button\r\n class=\"lf-header-menu-button\"\r\n [class.lf-header-menu-button-active]=\"isActive(menuButton.id)\"\r\n [ngClass]=\"menuButton.cssClass\"\r\n (click)=\"buttonClicked(menuButton.id)\"\r\n [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n [matTooltip]=\"menuButton.tooltip\">\r\n <!-- label -->\r\n {{ menuButton.label }}\r\n </button>\r\n }\r\n }\r\n <!-- text button -->\r\n <!-- menu -->\r\n <mat-menu #menu=\"matMenu\">\r\n <!-- label menu buttons -->\r\n @for (button of menuButton.menuButtons; track button.id) {\r\n <!-- menu button -->\r\n @if (button.label) {\r\n <button\r\n mat-menu-item\r\n [class.lf-header-menu-button-active]=\"isActive(button.id)\"\r\n [ngClass]=\"button.cssClass\"\r\n (click)=\"buttonClicked(button.id)\">\r\n <!-- icon -->\r\n <lf-icon\r\n [matIcon]=\"button.matIcon\"\r\n [svgIcon]=\"button.svgIcon\"\r\n verticalAlign=\"bottom\"></lf-icon>\r\n <!-- label -->\r\n @if (button.label) {\r\n <span>{{ button.label }}</span>\r\n }\r\n </button>\r\n }\r\n }\r\n <!-- icon menu buttons -->\r\n <div mat-menu-item class=\"lf-menu-icons px-1\">\r\n @for (button of menuButton.menuButtons; track button.id) {\r\n <!-- icon button -->\r\n @if (!button.label && (button.matIcon || button.svgIcon)) {\r\n <button\r\n mat-icon-button\r\n class=\"lf-menu-icon-button\"\r\n [ngClass]=\"button.cssClass\"\r\n (click)=\"buttonClicked(button.id)\"\r\n [matTooltip]=\"button.tooltip\">\r\n <!-- icon -->\r\n <lf-icon\r\n [matIcon]=\"button.matIcon\"\r\n [svgIcon]=\"button.svgIcon\"\r\n verticalAlign=\"top\"></lf-icon>\r\n </button>\r\n }\r\n }\r\n </div>\r\n </mat-menu>\r\n }\r\n</ng-template>\r\n", styles: [".lf-header{transition:all .3s;z-index:100;position:fixed;top:0;height:64px}.lf-header .lf-header-menu-button{flex-shrink:0;max-width:144px}.lf-header .lf-header-menu-button ::ng-deep .mdc-button__label{overflow:hidden;text-overflow:ellipsis}.lf-header .lf-header-menu-button.lf-header-menu-button-active{background-color:#fff}.lf-header .lf-header-logo-title-wrapper{flex:0 0 auto;max-width:480px;overflow:hidden;display:flex}.lf-header .lf-header-logo-title-wrapper .lf-header-logo-title-wrapper-link{display:flex;flex-flow:row nowrap;align-items:center;flex:0}.lf-header .lf-header-logo-title-wrapper .lf-header-logo-title-wrapper-link.lf-clickable{cursor:pointer}.lf-header .lf-header-logo-title-wrapper .lf-header-logo{width:40px;height:40px;min-width:40px;min-height:40px}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper{display:flex;flex-flow:column}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-title{font-size:20px;line-height:28px}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-subtitle{font-size:12px;line-height:12px}.lf-header lf-input{z-index:100;flex:1 1 480px}.lf-header lf-input.lf-header-input-mobile{position:fixed!important;left:4px!important;right:4px!important;width:unset!important;max-width:unset!important}.lf-header .spacer{flex:1 0 auto}.lf-menu-icons{min-height:unset!important}.lf-header-progress-bar{z-index:100;position:fixed;top:64px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i2.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: InputComponent, selector: "lf-input", inputs: ["inputConfig", "isMobile"], outputs: ["inputSubmitEvent", "inputChangeEvent", "inputPrefixActionEvent"] }, { kind: "component", type: IconComponent, selector: "lf-icon", inputs: ["matIcon", "svgIcon", "verticalAlign"] }], animations: [
498
+ trigger('slideDownUp', [
499
+ state('void', style({ transform: 'translateY(-100%)' })),
500
+ state('*', style({ transform: 'translateY(0)' })),
501
+ transition(':enter', [style({ transform: 'translateY(-100%)' }), animate('200ms ease-out', style({ transform: 'translateY(0)' }))]),
502
+ transition(':leave', [animate('200ms ease-in', style({ transform: 'translateY(-100%)' }))])
503
+ ])
504
+ ] }); }
525
505
  }
526
506
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: HeaderComponent, decorators: [{
527
507
  type: Component,
528
- args: [{ selector: 'lf-header', standalone: false, template: "@if (headerConfig && headerConfig.enable) {\r\n <mat-toolbar\r\n class=\"lf-header mat-elevation-z3\"\r\n [class.px-4]=\"!isMobile\"\r\n [class.px-1]=\"isMobile\"\r\n [ngClass]=\"headerConfig.cssClass\"\r\n color=\"primary\">\r\n <!-- left menu button -->\r\n <ng-container\r\n [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n menuButton: headerConfig.leftMenuButton!,\r\n hideLabel: true,\r\n }\"></ng-container>\r\n <!-- logo & title -->\r\n <div\r\n class=\"lf-header-logo-title-wrapper ml-1 mr-2\"\r\n [class.ml-10]=\"headerConfig.leftMenuButton && !isMobile\">\r\n <!-- link wrapper -->\r\n <div\r\n class=\"lf-header-logo-title-wrapper-link\"\r\n [class.lf-clickable]=\"headerConfig.titleRouterLink\"\r\n [routerLink]=\"headerConfig.titleRouterLink ? [headerConfig.titleRouterLink] : null\">\r\n <!-- svg logo -->\r\n @if (headerConfig.svgLogo) {\r\n <mat-icon\r\n class=\"lf-header-logo\"\r\n [class.mr-3]=\"headerConfig.title\"\r\n [svgIcon]=\"headerConfig.svgLogo!\"></mat-icon>\r\n } @else {\r\n @if (headerConfig.imgLogo) {\r\n <img\r\n class=\"lf-header-logo\"\r\n [class.mr-3]=\"headerConfig.title\"\r\n [src]=\"headerConfig.imgLogo\"\r\n alt=\"Logo\" />\r\n }\r\n }\r\n <!-- img logo -->\r\n <!-- title -->\r\n @if (headerConfig.title) {\r\n <div class=\"lf-header-title-wrapper\">\r\n @if (headerConfig.title) {\r\n <span class=\"lf-header-title\">\r\n {{ headerConfig.title }}\r\n </span>\r\n }\r\n @if (headerConfig.subtitle) {\r\n <span class=\"lf-header-subtitle\">\r\n {{ headerConfig.subtitle }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n <!-- input -->\r\n @if (headerConfig.inputConfig?.enable) {\r\n <div class=\"spacer\"></div>\r\n <lf-input\r\n [class.lf-header-input-mobile]=\"isMobile\"\r\n [class.mx-3]=\"!isMobile\"\r\n [inputConfig]=\"headerConfig.inputConfig!\"\r\n [isMobile]=\"isMobile\"\r\n (inputSubmitEvent)=\"inputSubmitted($event)\"\r\n (inputChangeEvent)=\"inputChanged($event)\"\r\n (inputPrefixActionEvent)=\"inputClosed()\"></lf-input>\r\n }\r\n <!-- spacer -->\r\n <div class=\"spacer\"></div>\r\n <!-- right menu buttons -->\r\n @for (button of headerConfig.rightMenuButtons; track button.id) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n menuButton: button,\r\n }\"></ng-container>\r\n }\r\n </mat-toolbar>\r\n <!-- loading bar -->\r\n @if (headerConfig.loading || (headerConfig.showRouteLoading && routeLoading)) {\r\n <mat-progress-bar\r\n class=\"lf-header-progress-bar\"\r\n color=\"accent\"\r\n mode=\"indeterminate\"></mat-progress-bar>\r\n }\r\n}\r\n\r\n<!-- header menu button -->\r\n<ng-template #menuButtonTemplate let-menuButton=\"menuButton\" let-hideLabel=\"hideLabel\">\r\n @if (menuButton) {\r\n <!-- icon button -->\r\n @if ((menuButton.matIcon || menuButton.svgIcon) && (!menuButton.label || hideLabel)) {\r\n <button\r\n mat-icon-button\r\n class=\"lf-header-menu-button\"\r\n [ngClass]=\"menuButton.cssClass\"\r\n (click)=\"buttonClicked(menuButton.id)\"\r\n [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n [matTooltip]=\"menuButton.tooltip\"\r\n [attr.aria-label]=\"menuButton.id\">\r\n <!-- icon -->\r\n <lf-icon [matIcon]=\"menuButton.matIcon\" [svgIcon]=\"menuButton.svgIcon\"></lf-icon>\r\n </button>\r\n } @else {\r\n @if (!hideLabel) {\r\n <button\r\n mat-button\r\n class=\"lf-header-menu-button\"\r\n [class.lf-header-menu-button-active]=\"isActive(menuButton.id)\"\r\n [ngClass]=\"menuButton.cssClass\"\r\n (click)=\"buttonClicked(menuButton.id)\"\r\n [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n [matTooltip]=\"menuButton.tooltip\">\r\n <!-- label -->\r\n {{ menuButton.label }}\r\n </button>\r\n }\r\n }\r\n <!-- text button -->\r\n <!-- menu -->\r\n <mat-menu #menu=\"matMenu\">\r\n <!-- label menu buttons -->\r\n @for (button of menuButton.menuButtons; track button.id) {\r\n <!-- menu button -->\r\n @if (button.label) {\r\n <button\r\n mat-menu-item\r\n [class.lf-header-menu-button-active]=\"isActive(button.id)\"\r\n [ngClass]=\"button.cssClass\"\r\n (click)=\"buttonClicked(button.id)\">\r\n <!-- icon -->\r\n <lf-icon\r\n [matIcon]=\"button.matIcon\"\r\n [svgIcon]=\"button.svgIcon\"\r\n verticalAlign=\"bottom\"></lf-icon>\r\n <!-- label -->\r\n @if (button.label) {\r\n <span>{{ button.label }}</span>\r\n }\r\n </button>\r\n }\r\n }\r\n <!-- icon menu buttons -->\r\n <div mat-menu-item class=\"lf-menu-icons px-1\">\r\n @for (button of menuButton.menuButtons; track button.id) {\r\n <!-- icon button -->\r\n @if (!button.label && (button.matIcon || button.svgIcon)) {\r\n <button\r\n mat-icon-button\r\n class=\"lf-menu-icon-button\"\r\n [ngClass]=\"button.cssClass\"\r\n (click)=\"buttonClicked(button.id)\"\r\n [matTooltip]=\"button.tooltip\">\r\n <!-- icon -->\r\n <lf-icon\r\n [matIcon]=\"button.matIcon\"\r\n [svgIcon]=\"button.svgIcon\"\r\n verticalAlign=\"top\"></lf-icon>\r\n </button>\r\n }\r\n }\r\n </div>\r\n </mat-menu>\r\n }\r\n</ng-template>\r\n", styles: [".lf-header{transition:top .3s;z-index:100;position:fixed;top:0;height:64px}.lf-header .lf-header-menu-button{flex-shrink:0;max-width:144px}.lf-header .lf-header-menu-button ::ng-deep .mdc-button__label{overflow:hidden;text-overflow:ellipsis}.lf-header .lf-header-menu-button.lf-header-menu-button-active{background-color:#fff}.lf-header .lf-header-logo-title-wrapper{flex:0 0 auto;max-width:480px;overflow:hidden;display:flex}.lf-header .lf-header-logo-title-wrapper .lf-header-logo-title-wrapper-link{display:flex;flex-flow:row nowrap;align-items:center;flex:0}.lf-header .lf-header-logo-title-wrapper .lf-header-logo-title-wrapper-link.lf-clickable{cursor:pointer}.lf-header .lf-header-logo-title-wrapper .lf-header-logo{width:40px;height:40px;min-width:40px;min-height:40px}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper{display:flex;flex-flow:column}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-title{font-size:20px;line-height:28px}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-subtitle{font-size:12px;line-height:12px}.lf-header lf-input{z-index:100;flex:1 1 480px}.lf-header lf-input.lf-header-input-mobile{position:fixed!important;left:4px!important;right:4px!important;width:unset!important;max-width:unset!important}.lf-header .spacer{flex:1 0 auto}.lf-menu-icons{min-height:unset!important}.lf-header-progress-bar{z-index:100;position:fixed;top:64px}\n"] }]
508
+ args: [{ selector: 'lf-header', animations: [
509
+ trigger('slideDownUp', [
510
+ state('void', style({ transform: 'translateY(-100%)' })),
511
+ state('*', style({ transform: 'translateY(0)' })),
512
+ transition(':enter', [style({ transform: 'translateY(-100%)' }), animate('200ms ease-out', style({ transform: 'translateY(0)' }))]),
513
+ transition(':leave', [animate('200ms ease-in', style({ transform: 'translateY(-100%)' }))])
514
+ ])
515
+ ], standalone: false, template: "@if (headerConfig && headerConfig.enable) {\r\n <mat-toolbar\r\n class=\"lf-header mat-elevation-z3\"\r\n [class.px-4]=\"!isMobile\"\r\n [class.px-1]=\"isMobile\"\r\n [ngClass]=\"headerConfig.cssClass\"\r\n color=\"primary\">\r\n <!-- left menu button -->\r\n <ng-container\r\n [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n menuButton: headerConfig.leftMenuButton!,\r\n hideLabel: true,\r\n }\"></ng-container>\r\n <!-- logo & title -->\r\n <div\r\n class=\"lf-header-logo-title-wrapper ml-1 mr-2\"\r\n [class.ml-10]=\"headerConfig.leftMenuButton && !isMobile\">\r\n <!-- link wrapper -->\r\n <div\r\n class=\"lf-header-logo-title-wrapper-link\"\r\n [class.lf-clickable]=\"headerConfig.titleRouterLink\"\r\n [routerLink]=\"headerConfig.titleRouterLink ? [headerConfig.titleRouterLink] : null\">\r\n <!-- svg logo -->\r\n @if (headerConfig.svgLogo) {\r\n <mat-icon\r\n class=\"lf-header-logo\"\r\n [class.mr-3]=\"headerConfig.title\"\r\n [svgIcon]=\"headerConfig.svgLogo!\"></mat-icon>\r\n } @else {\r\n @if (headerConfig.imgLogo) {\r\n <img\r\n class=\"lf-header-logo\"\r\n [class.mr-3]=\"headerConfig.title\"\r\n [src]=\"headerConfig.imgLogo\"\r\n alt=\"Logo\" />\r\n }\r\n }\r\n <!-- img logo -->\r\n <!-- title -->\r\n @if (headerConfig.title) {\r\n <div class=\"lf-header-title-wrapper\">\r\n @if (headerConfig.title) {\r\n <span class=\"lf-header-title\">\r\n {{ headerConfig.title }}\r\n </span>\r\n }\r\n @if (headerConfig.subtitle) {\r\n <span class=\"lf-header-subtitle\">\r\n {{ headerConfig.subtitle }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n <!-- input -->\r\n @if (headerConfig.inputConfig?.enable) {\r\n <div class=\"spacer\"></div>\r\n <lf-input\r\n [class.lf-header-input-mobile]=\"isMobile\"\r\n [class.mx-3]=\"!isMobile\"\r\n [inputConfig]=\"headerConfig.inputConfig!\"\r\n [isMobile]=\"isMobile\"\r\n (inputSubmitEvent)=\"inputSubmitted($event)\"\r\n (inputChangeEvent)=\"inputChanged($event)\"\r\n (inputPrefixActionEvent)=\"inputClosed()\"></lf-input>\r\n }\r\n <!-- spacer -->\r\n <div class=\"spacer\"></div>\r\n <!-- right menu buttons -->\r\n @for (button of headerConfig.rightMenuButtons; track button.id) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n menuButton: button,\r\n }\"></ng-container>\r\n }\r\n </mat-toolbar>\r\n <!-- loading bar -->\r\n @if (headerConfig.loading || (headerConfig.showRouteLoading && routeLoading)) {\r\n <mat-progress-bar\r\n class=\"lf-header-progress-bar\"\r\n color=\"accent\"\r\n mode=\"indeterminate\"></mat-progress-bar>\r\n }\r\n}\r\n\r\n<!-- header menu button -->\r\n<ng-template #menuButtonTemplate let-menuButton=\"menuButton\" let-hideLabel=\"hideLabel\">\r\n @if (menuButton) {\r\n <!-- icon button -->\r\n @if ((menuButton.matIcon || menuButton.svgIcon) && (!menuButton.label || hideLabel)) {\r\n <button\r\n mat-icon-button\r\n class=\"lf-header-menu-button\"\r\n [ngClass]=\"menuButton.cssClass\"\r\n (click)=\"buttonClicked(menuButton.id)\"\r\n [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n [matTooltip]=\"menuButton.tooltip\"\r\n [attr.aria-label]=\"menuButton.id\">\r\n <!-- icon -->\r\n <lf-icon [matIcon]=\"menuButton.matIcon\" [svgIcon]=\"menuButton.svgIcon\"></lf-icon>\r\n </button>\r\n } @else {\r\n @if (!hideLabel) {\r\n <button\r\n mat-button\r\n class=\"lf-header-menu-button\"\r\n [class.lf-header-menu-button-active]=\"isActive(menuButton.id)\"\r\n [ngClass]=\"menuButton.cssClass\"\r\n (click)=\"buttonClicked(menuButton.id)\"\r\n [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n [matTooltip]=\"menuButton.tooltip\">\r\n <!-- label -->\r\n {{ menuButton.label }}\r\n </button>\r\n }\r\n }\r\n <!-- text button -->\r\n <!-- menu -->\r\n <mat-menu #menu=\"matMenu\">\r\n <!-- label menu buttons -->\r\n @for (button of menuButton.menuButtons; track button.id) {\r\n <!-- menu button -->\r\n @if (button.label) {\r\n <button\r\n mat-menu-item\r\n [class.lf-header-menu-button-active]=\"isActive(button.id)\"\r\n [ngClass]=\"button.cssClass\"\r\n (click)=\"buttonClicked(button.id)\">\r\n <!-- icon -->\r\n <lf-icon\r\n [matIcon]=\"button.matIcon\"\r\n [svgIcon]=\"button.svgIcon\"\r\n verticalAlign=\"bottom\"></lf-icon>\r\n <!-- label -->\r\n @if (button.label) {\r\n <span>{{ button.label }}</span>\r\n }\r\n </button>\r\n }\r\n }\r\n <!-- icon menu buttons -->\r\n <div mat-menu-item class=\"lf-menu-icons px-1\">\r\n @for (button of menuButton.menuButtons; track button.id) {\r\n <!-- icon button -->\r\n @if (!button.label && (button.matIcon || button.svgIcon)) {\r\n <button\r\n mat-icon-button\r\n class=\"lf-menu-icon-button\"\r\n [ngClass]=\"button.cssClass\"\r\n (click)=\"buttonClicked(button.id)\"\r\n [matTooltip]=\"button.tooltip\">\r\n <!-- icon -->\r\n <lf-icon\r\n [matIcon]=\"button.matIcon\"\r\n [svgIcon]=\"button.svgIcon\"\r\n verticalAlign=\"top\"></lf-icon>\r\n </button>\r\n }\r\n }\r\n </div>\r\n </mat-menu>\r\n }\r\n</ng-template>\r\n", styles: [".lf-header{transition:all .3s;z-index:100;position:fixed;top:0;height:64px}.lf-header .lf-header-menu-button{flex-shrink:0;max-width:144px}.lf-header .lf-header-menu-button ::ng-deep .mdc-button__label{overflow:hidden;text-overflow:ellipsis}.lf-header .lf-header-menu-button.lf-header-menu-button-active{background-color:#fff}.lf-header .lf-header-logo-title-wrapper{flex:0 0 auto;max-width:480px;overflow:hidden;display:flex}.lf-header .lf-header-logo-title-wrapper .lf-header-logo-title-wrapper-link{display:flex;flex-flow:row nowrap;align-items:center;flex:0}.lf-header .lf-header-logo-title-wrapper .lf-header-logo-title-wrapper-link.lf-clickable{cursor:pointer}.lf-header .lf-header-logo-title-wrapper .lf-header-logo{width:40px;height:40px;min-width:40px;min-height:40px}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper{display:flex;flex-flow:column}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-title{font-size:20px;line-height:28px}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-subtitle{font-size:12px;line-height:12px}.lf-header lf-input{z-index:100;flex:1 1 480px}.lf-header lf-input.lf-header-input-mobile{position:fixed!important;left:4px!important;right:4px!important;width:unset!important;max-width:unset!important}.lf-header .spacer{flex:1 0 auto}.lf-menu-icons{min-height:unset!important}.lf-header-progress-bar{z-index:100;position:fixed;top:64px}\n"] }]
529
516
  }], propDecorators: { libraryConfig: [{
530
517
  type: Input
531
518
  }], headerConfig: [{
@@ -576,11 +563,59 @@ class NavbarComponent {
576
563
  return route === id;
577
564
  }
578
565
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: NavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
579
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: NavbarComponent, isStandalone: false, selector: "lf-navbar", inputs: { libraryConfig: "libraryConfig", navbarConfig: "navbarConfig", isMobile: "isMobile", currentRoute: "currentRoute" }, outputs: { navbarButtonClickEvent: "navbarButtonClickEvent" }, ngImport: i0, template: "@if (navbarConfig && navbarConfig.enable) {\r\n <div\r\n class=\"mat-app-background mat-elevation-z3\"\r\n [class.lf-navbar]=\"!isMobile\"\r\n [class.lf-navbar-mobile]=\"isMobile\"\r\n [ngClass]=\"navbarConfig.cssClass\">\r\n <!-- items -->\r\n <div [class.lf-navbar-items]=\"!isMobile\" [class.lf-navbar-mobile-items]=\"isMobile\">\r\n <!-- item -->\r\n @for (button of navbarConfig.menuButtons; track button.id; let i = $index) {\r\n @if (i < 5) {\r\n <div\r\n class=\"lf-navbar-item\"\r\n [class.lf-navbar-item-active]=\"isActive(button.id)\"\r\n [ngClass]=\"button.cssClass\"\r\n (click)=\"buttonClicked(button.id)\"\r\n tabindex=\"0\"\r\n role=\"button\"\r\n [matTooltip]=\"button.tooltip\">\r\n <!-- icon -->\r\n <lf-icon [matIcon]=\"button.matIcon!\" [svgIcon]=\"button.svgIcon!\"></lf-icon>\r\n <!-- label -->\r\n <!-- show a protected space on desktop so the icon doesn't move up and down -->\r\n @if (button?.label) {\r\n <span class=\"lf-navbar-item-label\">\r\n {{\r\n isActive(button.id) || navbarConfig.showAllLabels\r\n ? button.label\r\n : isMobile\r\n ? \"\"\r\n : \"&nbsp;\"\r\n }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n}\r\n", styles: [".lf-navbar{z-index:99;position:fixed;left:0;top:0;height:100vh;padding:80px 4px 0;border-right:solid 1px rgba(0,0,0,.12)}.lf-navbar .lf-navbar-items{display:flex;flex-flow:column;align-items:center}.lf-navbar-mobile{z-index:99;position:fixed;left:0;bottom:0;width:100vw;padding:4px 0;box-sizing:border-box;border-top:solid 1px rgba(0,0,0,.12)}.lf-navbar-mobile .lf-navbar-mobile-items{display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-evenly}.lf-navbar-mobile .lf-navbar-mobile-items .lf-navbar-item{height:56px!important}.lf-navbar-item{width:72px;height:72px;display:flex;align-items:center;justify-content:center;flex-flow:column;border-radius:16px;cursor:pointer}.lf-navbar-item.lf-navbar-item-active{color:var(--color-primary)}.lf-navbar-item .lf-navbar-item-icon{width:24px;height:24px;overflow:visible!important}.lf-navbar-item .lf-navbar-item-label{max-width:72px;white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;text-transform:none;vertical-align:top;font-size:12px;font-weight:500}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: IconComponent, selector: "lf-icon", inputs: ["matIcon", "svgIcon", "verticalAlign"] }] }); }
566
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: NavbarComponent, isStandalone: false, selector: "lf-navbar", inputs: { libraryConfig: "libraryConfig", navbarConfig: "navbarConfig", isMobile: "isMobile", currentRoute: "currentRoute" }, outputs: { navbarButtonClickEvent: "navbarButtonClickEvent" }, ngImport: i0, template: "@if (navbarConfig && navbarConfig.enable) {\r\n <div\r\n [@responsiveSlide]=\"isMobile ? 'mobile' : 'desktop'\"\r\n class=\"mat-app-background mat-elevation-z3\"\r\n [class.lf-navbar]=\"!isMobile\"\r\n [class.lf-navbar-mobile]=\"isMobile\"\r\n [ngClass]=\"navbarConfig.cssClass\">\r\n <!-- items -->\r\n <div [class.lf-navbar-items]=\"!isMobile\" [class.lf-navbar-mobile-items]=\"isMobile\">\r\n <!-- item -->\r\n @for (button of navbarConfig.menuButtons; track button.id; let i = $index) {\r\n @if (i < 5) {\r\n <div\r\n class=\"lf-navbar-item\"\r\n [class.lf-navbar-item-active]=\"isActive(button.id)\"\r\n [ngClass]=\"button.cssClass\"\r\n (click)=\"buttonClicked(button.id)\"\r\n tabindex=\"0\"\r\n role=\"button\"\r\n [matTooltip]=\"button.tooltip\">\r\n <!-- icon -->\r\n <lf-icon [matIcon]=\"button.matIcon!\" [svgIcon]=\"button.svgIcon!\"></lf-icon>\r\n <!-- label -->\r\n <!-- show a protected space on desktop so the icon doesn't move up and down -->\r\n @if (button?.label) {\r\n <span class=\"lf-navbar-item-label\">\r\n {{\r\n isActive(button.id) || navbarConfig.showAllLabels\r\n ? button.label\r\n : isMobile\r\n ? \"\"\r\n : \"&nbsp;\"\r\n }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n}\r\n", styles: [".lf-navbar{z-index:99;position:fixed;left:0;top:0;height:100vh;padding:80px 4px 0;border-right:solid 1px rgba(0,0,0,.12)}.lf-navbar .lf-navbar-items{display:flex;flex-flow:column;align-items:center}.lf-navbar-mobile{z-index:99;position:fixed;left:0;bottom:0;width:100vw;padding:4px 0;box-sizing:border-box;border-top:solid 1px rgba(0,0,0,.12)}.lf-navbar-mobile .lf-navbar-mobile-items{display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-evenly}.lf-navbar-mobile .lf-navbar-mobile-items .lf-navbar-item{height:56px!important}.lf-navbar-item{width:72px;height:72px;display:flex;align-items:center;justify-content:center;flex-flow:column;border-radius:16px;cursor:pointer}.lf-navbar-item.lf-navbar-item-active{color:var(--color-primary)}.lf-navbar-item .lf-navbar-item-icon{width:24px;height:24px;overflow:visible!important}.lf-navbar-item .lf-navbar-item-label{max-width:72px;white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;text-transform:none;vertical-align:top;font-size:12px;font-weight:500}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: IconComponent, selector: "lf-icon", inputs: ["matIcon", "svgIcon", "verticalAlign"] }], animations: [
567
+ trigger('responsiveSlide', [
568
+ // States for desktop and mobile
569
+ state('desktop', style({ transform: 'translateX(0)' })),
570
+ state('mobile', style({ transform: 'translateY(0)' })),
571
+ // Desktop enter (slide in from left)
572
+ transition('void => desktop', [
573
+ style({ transform: 'translateX(-100%)' }),
574
+ animate('200ms linear')
575
+ ]),
576
+ // Desktop leave (slide back to left)
577
+ transition('desktop => void', [
578
+ animate('200ms linear', style({ transform: 'translateX(-100%)' }))
579
+ ]),
580
+ // Mobile enter (slide in from bottom)
581
+ transition('void => mobile', [
582
+ style({ transform: 'translateY(100%)' }),
583
+ animate('200ms linear')
584
+ ]),
585
+ // Mobile leave (slide back to bottom)
586
+ transition('mobile => void', [
587
+ animate('200ms linear', style({ transform: 'translateY(100%)' }))
588
+ ]),
589
+ ])
590
+ ] }); }
580
591
  }
581
592
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: NavbarComponent, decorators: [{
582
593
  type: Component,
583
- args: [{ selector: 'lf-navbar', standalone: false, template: "@if (navbarConfig && navbarConfig.enable) {\r\n <div\r\n class=\"mat-app-background mat-elevation-z3\"\r\n [class.lf-navbar]=\"!isMobile\"\r\n [class.lf-navbar-mobile]=\"isMobile\"\r\n [ngClass]=\"navbarConfig.cssClass\">\r\n <!-- items -->\r\n <div [class.lf-navbar-items]=\"!isMobile\" [class.lf-navbar-mobile-items]=\"isMobile\">\r\n <!-- item -->\r\n @for (button of navbarConfig.menuButtons; track button.id; let i = $index) {\r\n @if (i < 5) {\r\n <div\r\n class=\"lf-navbar-item\"\r\n [class.lf-navbar-item-active]=\"isActive(button.id)\"\r\n [ngClass]=\"button.cssClass\"\r\n (click)=\"buttonClicked(button.id)\"\r\n tabindex=\"0\"\r\n role=\"button\"\r\n [matTooltip]=\"button.tooltip\">\r\n <!-- icon -->\r\n <lf-icon [matIcon]=\"button.matIcon!\" [svgIcon]=\"button.svgIcon!\"></lf-icon>\r\n <!-- label -->\r\n <!-- show a protected space on desktop so the icon doesn't move up and down -->\r\n @if (button?.label) {\r\n <span class=\"lf-navbar-item-label\">\r\n {{\r\n isActive(button.id) || navbarConfig.showAllLabels\r\n ? button.label\r\n : isMobile\r\n ? \"\"\r\n : \"&nbsp;\"\r\n }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n}\r\n", styles: [".lf-navbar{z-index:99;position:fixed;left:0;top:0;height:100vh;padding:80px 4px 0;border-right:solid 1px rgba(0,0,0,.12)}.lf-navbar .lf-navbar-items{display:flex;flex-flow:column;align-items:center}.lf-navbar-mobile{z-index:99;position:fixed;left:0;bottom:0;width:100vw;padding:4px 0;box-sizing:border-box;border-top:solid 1px rgba(0,0,0,.12)}.lf-navbar-mobile .lf-navbar-mobile-items{display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-evenly}.lf-navbar-mobile .lf-navbar-mobile-items .lf-navbar-item{height:56px!important}.lf-navbar-item{width:72px;height:72px;display:flex;align-items:center;justify-content:center;flex-flow:column;border-radius:16px;cursor:pointer}.lf-navbar-item.lf-navbar-item-active{color:var(--color-primary)}.lf-navbar-item .lf-navbar-item-icon{width:24px;height:24px;overflow:visible!important}.lf-navbar-item .lf-navbar-item-label{max-width:72px;white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;text-transform:none;vertical-align:top;font-size:12px;font-weight:500}\n"] }]
594
+ args: [{ selector: 'lf-navbar', animations: [
595
+ trigger('responsiveSlide', [
596
+ // States for desktop and mobile
597
+ state('desktop', style({ transform: 'translateX(0)' })),
598
+ state('mobile', style({ transform: 'translateY(0)' })),
599
+ // Desktop enter (slide in from left)
600
+ transition('void => desktop', [
601
+ style({ transform: 'translateX(-100%)' }),
602
+ animate('200ms linear')
603
+ ]),
604
+ // Desktop leave (slide back to left)
605
+ transition('desktop => void', [
606
+ animate('200ms linear', style({ transform: 'translateX(-100%)' }))
607
+ ]),
608
+ // Mobile enter (slide in from bottom)
609
+ transition('void => mobile', [
610
+ style({ transform: 'translateY(100%)' }),
611
+ animate('200ms linear')
612
+ ]),
613
+ // Mobile leave (slide back to bottom)
614
+ transition('mobile => void', [
615
+ animate('200ms linear', style({ transform: 'translateY(100%)' }))
616
+ ]),
617
+ ])
618
+ ], standalone: false, template: "@if (navbarConfig && navbarConfig.enable) {\r\n <div\r\n [@responsiveSlide]=\"isMobile ? 'mobile' : 'desktop'\"\r\n class=\"mat-app-background mat-elevation-z3\"\r\n [class.lf-navbar]=\"!isMobile\"\r\n [class.lf-navbar-mobile]=\"isMobile\"\r\n [ngClass]=\"navbarConfig.cssClass\">\r\n <!-- items -->\r\n <div [class.lf-navbar-items]=\"!isMobile\" [class.lf-navbar-mobile-items]=\"isMobile\">\r\n <!-- item -->\r\n @for (button of navbarConfig.menuButtons; track button.id; let i = $index) {\r\n @if (i < 5) {\r\n <div\r\n class=\"lf-navbar-item\"\r\n [class.lf-navbar-item-active]=\"isActive(button.id)\"\r\n [ngClass]=\"button.cssClass\"\r\n (click)=\"buttonClicked(button.id)\"\r\n tabindex=\"0\"\r\n role=\"button\"\r\n [matTooltip]=\"button.tooltip\">\r\n <!-- icon -->\r\n <lf-icon [matIcon]=\"button.matIcon!\" [svgIcon]=\"button.svgIcon!\"></lf-icon>\r\n <!-- label -->\r\n <!-- show a protected space on desktop so the icon doesn't move up and down -->\r\n @if (button?.label) {\r\n <span class=\"lf-navbar-item-label\">\r\n {{\r\n isActive(button.id) || navbarConfig.showAllLabels\r\n ? button.label\r\n : isMobile\r\n ? \"\"\r\n : \"&nbsp;\"\r\n }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n}\r\n", styles: [".lf-navbar{z-index:99;position:fixed;left:0;top:0;height:100vh;padding:80px 4px 0;border-right:solid 1px rgba(0,0,0,.12)}.lf-navbar .lf-navbar-items{display:flex;flex-flow:column;align-items:center}.lf-navbar-mobile{z-index:99;position:fixed;left:0;bottom:0;width:100vw;padding:4px 0;box-sizing:border-box;border-top:solid 1px rgba(0,0,0,.12)}.lf-navbar-mobile .lf-navbar-mobile-items{display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-evenly}.lf-navbar-mobile .lf-navbar-mobile-items .lf-navbar-item{height:56px!important}.lf-navbar-item{width:72px;height:72px;display:flex;align-items:center;justify-content:center;flex-flow:column;border-radius:16px;cursor:pointer}.lf-navbar-item.lf-navbar-item-active{color:var(--color-primary)}.lf-navbar-item .lf-navbar-item-icon{width:24px;height:24px;overflow:visible!important}.lf-navbar-item .lf-navbar-item-label{max-width:72px;white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;text-transform:none;vertical-align:top;font-size:12px;font-weight:500}\n"] }]
584
619
  }], propDecorators: { libraryConfig: [{
585
620
  type: Input
586
621
  }], navbarConfig: [{
@@ -1320,11 +1355,11 @@ class ScaffoldComponent {
1320
1355
  this.bottomBarButtonClickEvent.emit(id);
1321
1356
  }
1322
1357
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ScaffoldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1323
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: ScaffoldComponent, isStandalone: false, selector: "lf-scaffold", outputs: { headerButtonClickEvent: "headerButtonClickEvent", headerInputSubmitEvent: "headerInputSubmitEvent", headerInputChangeEvent: "headerInputChangeEvent", navbarButtonClickEvent: "navbarButtonClickEvent", floatingButtonClickEvent: "floatingButtonClickEvent", bottomBarButtonClickEvent: "bottomBarButtonClickEvent" }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, static: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }], ngImport: i0, template: "<!-- header-height: 64px; navbar-size: 80px; floating-button-bottom: 24px -->\r\n\r\n<div class=\"lf-scaffold mat-app-background mat-typography\" [ngClass]=\"scaffoldConfig?.cssClass\">\r\n <!-- loading overlay -->\r\n @if (scaffoldConfig?.loading) {\r\n <lf-loading-overlay></lf-loading-overlay>\r\n }\r\n <!-- header -->\r\n <lf-header\r\n [libraryConfig]=\"libraryConfig\"\r\n [headerConfig]=\"headerConfig\"\r\n [isMobile]=\"isMobile\"\r\n [routeLoading]=\"routeLoading\"\r\n [currentRoute]=\"currentRoute\"\r\n (headerConfigUpdateEvent)=\"headerConfigUpdated($event)\"\r\n (headerButtonClickEvent)=\"headerButtonClicked($event)\"\r\n (headerInputSubmitEvent)=\"headerInputSubmitted($event)\"\r\n (headerInputChangeEvent)=\"headerInputChanged($event)\"></lf-header>\r\n <!-- navbar -->\r\n <lf-navbar\r\n [libraryConfig]=\"libraryConfig\"\r\n [navbarConfig]=\"navbarConfig\"\r\n [isMobile]=\"isMobile\"\r\n [currentRoute]=\"currentRoute\"\r\n (navbarButtonClickEvent)=\"navbarButtonClicked($event)\"></lf-navbar>\r\n <!-- content wrapper -->\r\n <div\r\n class=\"lf-content-wrapper\"\r\n [class.lf-show-navbar]=\"navbarConfig?.enable && !isMobile\"\r\n [class.lf-show-header]=\"headerConfig?.enable && !(navbarConfig?.enable && isMobile)\"\r\n [class.lf-show-navbar-mobile]=\"navbarConfig?.enable && isMobile && !headerConfig?.enable\"\r\n [class.lf-show-header-and-navbar-mobile]=\"\r\n headerConfig?.enable && navbarConfig?.enable && isMobile\r\n \"\r\n #scrollContainer\r\n cdkScrollable>\r\n <!-- drawer -->\r\n <lf-drawer\r\n [libraryConfig]=\"libraryConfig\"\r\n [drawerConfig]=\"drawerConfig\"\r\n [drawerPortal]=\"drawerPortal\"\r\n [isMobile]=\"isMobile\"\r\n [fixedOffset]=\"headerConfig?.enable ? 64 : 0\"\r\n (drawerConfigUpdateEvent)=\"drawerConfigUpdated($event)\">\r\n <!-- drawer content -->\r\n <ng-content select=\"[drawerContent]\" drawerContent></ng-content>\r\n <!-- content title card -->\r\n <lf-content-title-card\r\n [libraryConfig]=\"libraryConfig\"\r\n [contentTitleCardConfig]=\"contentTitleCardConfig\"\r\n [isMobile]=\"isMobile\"\r\n [routeHistory]=\"routeHistory\"\r\n (backButtonClickEvent)=\"backButtonClicked()\"></lf-content-title-card>\r\n <!-- main content -->\r\n <div\r\n class=\"lf-content\"\r\n [class.lf-content-mobile]=\"isMobile\"\r\n [class.lf-show-footer]=\"footerConfig?.enable\"\r\n #content>\r\n <ng-content></ng-content>\r\n </div>\r\n <!-- footer -->\r\n <lf-footer [libraryConfig]=\"libraryConfig\" [footerConfig]=\"footerConfig\"></lf-footer>\r\n </lf-drawer>\r\n </div>\r\n <!-- to top button -->\r\n <lf-floating-button\r\n [libraryConfig]=\"libraryConfig\"\r\n [floatingButtonConfig]=\"floatingButtonConfig\"\r\n [onTop]=\"scrollTopPosition <= 0\"\r\n [isMobile]=\"isMobile && navbarConfig?.enable!\"\r\n [bottomBarEnabled]=\"bottomBarConfig?.enable!\"\r\n (floatingButtonConfigUpdateEvent)=\"floatingButtonConfigUpdated($event)\"\r\n (floatingButtonClickEvent)=\"floatingButtonClicked($event)\"></lf-floating-button>\r\n <!-- bottom bar -->\r\n <lf-bottom-bar\r\n [libraryConfig]=\"libraryConfig\"\r\n [bottomBarConfig]=\"bottomBarConfig\"\r\n [isMobile]=\"isMobile && navbarConfig?.enable!\"\r\n [navbarEnabled]=\"navbarConfig?.enable!\"\r\n (bottomBarCloseClickEvent)=\"bottomBarCloseClicked($event)\"\r\n (bottomBarButtonClickEvent)=\"bottomBarButtonClicked($event)\"></lf-bottom-bar>\r\n</div>\r\n", styles: [".lf-scaffold{height:100vh}.lf-scaffold .lf-content-wrapper{transition:height .3s;position:absolute;inset:0;overflow-y:auto}.lf-scaffold .lf-content-wrapper.lf-show-navbar{left:80px}.lf-scaffold .lf-content-wrapper.lf-show-header{top:64px;height:calc(100vh - 64px)}.lf-scaffold .lf-content-wrapper.lf-show-navbar-mobile{height:calc(100vh - 56px)}.lf-scaffold .lf-content-wrapper.lf-show-header-and-navbar-mobile{top:64px;height:calc(100vh - 120px)}.lf-scaffold .lf-content-wrapper .lf-content{padding-left:24px;padding-right:24px}.lf-scaffold .lf-content-wrapper .lf-content.lf-content-mobile{padding-left:16px;padding-right:16px}.lf-scaffold .lf-content-wrapper .lf-content.lf-show-footer{min-height:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$4.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: LoadingOverlayComponent, selector: "lf-loading-overlay" }, { kind: "component", type: HeaderComponent, selector: "lf-header", inputs: ["libraryConfig", "headerConfig", "isMobile", "routeLoading", "currentRoute"], outputs: ["headerConfigUpdateEvent", "headerButtonClickEvent", "headerInputSubmitEvent", "headerInputChangeEvent"] }, { kind: "component", type: NavbarComponent, selector: "lf-navbar", inputs: ["libraryConfig", "navbarConfig", "isMobile", "currentRoute"], outputs: ["navbarButtonClickEvent"] }, { kind: "component", type: DrawerComponent, selector: "lf-drawer", inputs: ["libraryConfig", "drawerConfig", "isMobile", "fixedOffset", "drawerPortal"], outputs: ["drawerConfigUpdateEvent"] }, { kind: "component", type: FooterComponent, selector: "lf-footer", inputs: ["libraryConfig", "footerConfig"] }, { kind: "component", type: ContentTitleCardComponent, selector: "lf-content-title-card", inputs: ["libraryConfig", "contentTitleCardConfig", "isMobile", "routeHistory"], outputs: ["backButtonClickEvent"] }, { kind: "component", type: FloatingButtonComponent, selector: "lf-floating-button", inputs: ["libraryConfig", "floatingButtonConfig", "onTop", "isMobile", "bottomBarEnabled"], outputs: ["floatingButtonConfigUpdateEvent", "floatingButtonClickEvent"] }, { kind: "component", type: BottomBarComponent, selector: "lf-bottom-bar", inputs: ["libraryConfig", "bottomBarConfig", "isMobile", "navbarEnabled"], outputs: ["bottomBarCloseClickEvent", "bottomBarButtonClickEvent"] }] }); }
1358
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: ScaffoldComponent, isStandalone: false, selector: "lf-scaffold", outputs: { headerButtonClickEvent: "headerButtonClickEvent", headerInputSubmitEvent: "headerInputSubmitEvent", headerInputChangeEvent: "headerInputChangeEvent", navbarButtonClickEvent: "navbarButtonClickEvent", floatingButtonClickEvent: "floatingButtonClickEvent", bottomBarButtonClickEvent: "bottomBarButtonClickEvent" }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, static: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }], ngImport: i0, template: "<!-- header-height: 64px; navbar-size: 80px; floating-button-bottom: 24px -->\r\n\r\n<div class=\"lf-scaffold mat-app-background mat-typography\" [ngClass]=\"scaffoldConfig?.cssClass\">\r\n <!-- loading overlay -->\r\n @if (scaffoldConfig?.loading) {\r\n <lf-loading-overlay></lf-loading-overlay>\r\n }\r\n <!-- header -->\r\n <lf-header\r\n [libraryConfig]=\"libraryConfig\"\r\n [headerConfig]=\"headerConfig\"\r\n [isMobile]=\"isMobile\"\r\n [routeLoading]=\"routeLoading\"\r\n [currentRoute]=\"currentRoute\"\r\n (headerConfigUpdateEvent)=\"headerConfigUpdated($event)\"\r\n (headerButtonClickEvent)=\"headerButtonClicked($event)\"\r\n (headerInputSubmitEvent)=\"headerInputSubmitted($event)\"\r\n (headerInputChangeEvent)=\"headerInputChanged($event)\"></lf-header>\r\n <!-- navbar -->\r\n <lf-navbar\r\n [libraryConfig]=\"libraryConfig\"\r\n [navbarConfig]=\"navbarConfig\"\r\n [isMobile]=\"isMobile\"\r\n [currentRoute]=\"currentRoute\"\r\n (navbarButtonClickEvent)=\"navbarButtonClicked($event)\"></lf-navbar>\r\n <!-- content wrapper -->\r\n <div\r\n class=\"lf-content-wrapper\"\r\n [class.lf-show-navbar]=\"navbarConfig?.enable && !isMobile\"\r\n [class.lf-show-header]=\"headerConfig?.enable && !(navbarConfig?.enable && isMobile)\"\r\n [class.lf-show-navbar-mobile]=\"navbarConfig?.enable && isMobile && !headerConfig?.enable\"\r\n [class.lf-show-header-and-navbar-mobile]=\"\r\n headerConfig?.enable && navbarConfig?.enable && isMobile\r\n \"\r\n #scrollContainer\r\n cdkScrollable>\r\n <!-- drawer -->\r\n <lf-drawer\r\n [libraryConfig]=\"libraryConfig\"\r\n [drawerConfig]=\"drawerConfig\"\r\n [drawerPortal]=\"drawerPortal\"\r\n [isMobile]=\"isMobile\"\r\n [fixedOffset]=\"headerConfig?.enable ? 64 : 0\"\r\n (drawerConfigUpdateEvent)=\"drawerConfigUpdated($event)\">\r\n <!-- drawer content -->\r\n <ng-content select=\"[drawerContent]\" drawerContent></ng-content>\r\n <!-- content title card -->\r\n <lf-content-title-card\r\n [libraryConfig]=\"libraryConfig\"\r\n [contentTitleCardConfig]=\"contentTitleCardConfig\"\r\n [isMobile]=\"isMobile\"\r\n [routeHistory]=\"routeHistory\"\r\n (backButtonClickEvent)=\"backButtonClicked()\"></lf-content-title-card>\r\n <!-- main content -->\r\n <div\r\n class=\"lf-content\"\r\n [class.lf-content-mobile]=\"isMobile\"\r\n [class.lf-show-footer]=\"footerConfig?.enable\"\r\n #content>\r\n <ng-content></ng-content>\r\n </div>\r\n <!-- footer -->\r\n <lf-footer [libraryConfig]=\"libraryConfig\" [footerConfig]=\"footerConfig\"></lf-footer>\r\n </lf-drawer>\r\n </div>\r\n <!-- to top button -->\r\n <lf-floating-button\r\n [libraryConfig]=\"libraryConfig\"\r\n [floatingButtonConfig]=\"floatingButtonConfig\"\r\n [onTop]=\"scrollTopPosition <= 0\"\r\n [isMobile]=\"isMobile && navbarConfig?.enable!\"\r\n [bottomBarEnabled]=\"bottomBarConfig?.enable!\"\r\n (floatingButtonConfigUpdateEvent)=\"floatingButtonConfigUpdated($event)\"\r\n (floatingButtonClickEvent)=\"floatingButtonClicked($event)\"></lf-floating-button>\r\n <!-- bottom bar -->\r\n <lf-bottom-bar\r\n [libraryConfig]=\"libraryConfig\"\r\n [bottomBarConfig]=\"bottomBarConfig\"\r\n [isMobile]=\"isMobile && navbarConfig?.enable!\"\r\n [navbarEnabled]=\"navbarConfig?.enable!\"\r\n (bottomBarCloseClickEvent)=\"bottomBarCloseClicked($event)\"\r\n (bottomBarButtonClickEvent)=\"bottomBarButtonClicked($event)\"></lf-bottom-bar>\r\n</div>\r\n", styles: [".lf-scaffold{transition:all .3s;height:100vh}.lf-scaffold .lf-content-wrapper{transition:all .3s;position:absolute;inset:0;overflow-y:auto}.lf-scaffold .lf-content-wrapper.lf-show-navbar{left:80px}.lf-scaffold .lf-content-wrapper.lf-show-header{top:64px;height:calc(100vh - 64px)}.lf-scaffold .lf-content-wrapper.lf-show-navbar-mobile{height:calc(100vh - 56px)}.lf-scaffold .lf-content-wrapper.lf-show-header-and-navbar-mobile{top:64px;height:calc(100vh - 120px)}.lf-scaffold .lf-content-wrapper .lf-content{padding-left:24px;padding-right:24px}.lf-scaffold .lf-content-wrapper .lf-content.lf-content-mobile{padding-left:16px;padding-right:16px}.lf-scaffold .lf-content-wrapper .lf-content.lf-show-footer{min-height:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$4.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: LoadingOverlayComponent, selector: "lf-loading-overlay" }, { kind: "component", type: HeaderComponent, selector: "lf-header", inputs: ["libraryConfig", "headerConfig", "isMobile", "routeLoading", "currentRoute"], outputs: ["headerConfigUpdateEvent", "headerButtonClickEvent", "headerInputSubmitEvent", "headerInputChangeEvent"] }, { kind: "component", type: NavbarComponent, selector: "lf-navbar", inputs: ["libraryConfig", "navbarConfig", "isMobile", "currentRoute"], outputs: ["navbarButtonClickEvent"] }, { kind: "component", type: DrawerComponent, selector: "lf-drawer", inputs: ["libraryConfig", "drawerConfig", "isMobile", "fixedOffset", "drawerPortal"], outputs: ["drawerConfigUpdateEvent"] }, { kind: "component", type: FooterComponent, selector: "lf-footer", inputs: ["libraryConfig", "footerConfig"] }, { kind: "component", type: ContentTitleCardComponent, selector: "lf-content-title-card", inputs: ["libraryConfig", "contentTitleCardConfig", "isMobile", "routeHistory"], outputs: ["backButtonClickEvent"] }, { kind: "component", type: FloatingButtonComponent, selector: "lf-floating-button", inputs: ["libraryConfig", "floatingButtonConfig", "onTop", "isMobile", "bottomBarEnabled"], outputs: ["floatingButtonConfigUpdateEvent", "floatingButtonClickEvent"] }, { kind: "component", type: BottomBarComponent, selector: "lf-bottom-bar", inputs: ["libraryConfig", "bottomBarConfig", "isMobile", "navbarEnabled"], outputs: ["bottomBarCloseClickEvent", "bottomBarButtonClickEvent"] }] }); }
1324
1359
  }
1325
1360
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ScaffoldComponent, decorators: [{
1326
1361
  type: Component,
1327
- args: [{ selector: 'lf-scaffold', standalone: false, template: "<!-- header-height: 64px; navbar-size: 80px; floating-button-bottom: 24px -->\r\n\r\n<div class=\"lf-scaffold mat-app-background mat-typography\" [ngClass]=\"scaffoldConfig?.cssClass\">\r\n <!-- loading overlay -->\r\n @if (scaffoldConfig?.loading) {\r\n <lf-loading-overlay></lf-loading-overlay>\r\n }\r\n <!-- header -->\r\n <lf-header\r\n [libraryConfig]=\"libraryConfig\"\r\n [headerConfig]=\"headerConfig\"\r\n [isMobile]=\"isMobile\"\r\n [routeLoading]=\"routeLoading\"\r\n [currentRoute]=\"currentRoute\"\r\n (headerConfigUpdateEvent)=\"headerConfigUpdated($event)\"\r\n (headerButtonClickEvent)=\"headerButtonClicked($event)\"\r\n (headerInputSubmitEvent)=\"headerInputSubmitted($event)\"\r\n (headerInputChangeEvent)=\"headerInputChanged($event)\"></lf-header>\r\n <!-- navbar -->\r\n <lf-navbar\r\n [libraryConfig]=\"libraryConfig\"\r\n [navbarConfig]=\"navbarConfig\"\r\n [isMobile]=\"isMobile\"\r\n [currentRoute]=\"currentRoute\"\r\n (navbarButtonClickEvent)=\"navbarButtonClicked($event)\"></lf-navbar>\r\n <!-- content wrapper -->\r\n <div\r\n class=\"lf-content-wrapper\"\r\n [class.lf-show-navbar]=\"navbarConfig?.enable && !isMobile\"\r\n [class.lf-show-header]=\"headerConfig?.enable && !(navbarConfig?.enable && isMobile)\"\r\n [class.lf-show-navbar-mobile]=\"navbarConfig?.enable && isMobile && !headerConfig?.enable\"\r\n [class.lf-show-header-and-navbar-mobile]=\"\r\n headerConfig?.enable && navbarConfig?.enable && isMobile\r\n \"\r\n #scrollContainer\r\n cdkScrollable>\r\n <!-- drawer -->\r\n <lf-drawer\r\n [libraryConfig]=\"libraryConfig\"\r\n [drawerConfig]=\"drawerConfig\"\r\n [drawerPortal]=\"drawerPortal\"\r\n [isMobile]=\"isMobile\"\r\n [fixedOffset]=\"headerConfig?.enable ? 64 : 0\"\r\n (drawerConfigUpdateEvent)=\"drawerConfigUpdated($event)\">\r\n <!-- drawer content -->\r\n <ng-content select=\"[drawerContent]\" drawerContent></ng-content>\r\n <!-- content title card -->\r\n <lf-content-title-card\r\n [libraryConfig]=\"libraryConfig\"\r\n [contentTitleCardConfig]=\"contentTitleCardConfig\"\r\n [isMobile]=\"isMobile\"\r\n [routeHistory]=\"routeHistory\"\r\n (backButtonClickEvent)=\"backButtonClicked()\"></lf-content-title-card>\r\n <!-- main content -->\r\n <div\r\n class=\"lf-content\"\r\n [class.lf-content-mobile]=\"isMobile\"\r\n [class.lf-show-footer]=\"footerConfig?.enable\"\r\n #content>\r\n <ng-content></ng-content>\r\n </div>\r\n <!-- footer -->\r\n <lf-footer [libraryConfig]=\"libraryConfig\" [footerConfig]=\"footerConfig\"></lf-footer>\r\n </lf-drawer>\r\n </div>\r\n <!-- to top button -->\r\n <lf-floating-button\r\n [libraryConfig]=\"libraryConfig\"\r\n [floatingButtonConfig]=\"floatingButtonConfig\"\r\n [onTop]=\"scrollTopPosition <= 0\"\r\n [isMobile]=\"isMobile && navbarConfig?.enable!\"\r\n [bottomBarEnabled]=\"bottomBarConfig?.enable!\"\r\n (floatingButtonConfigUpdateEvent)=\"floatingButtonConfigUpdated($event)\"\r\n (floatingButtonClickEvent)=\"floatingButtonClicked($event)\"></lf-floating-button>\r\n <!-- bottom bar -->\r\n <lf-bottom-bar\r\n [libraryConfig]=\"libraryConfig\"\r\n [bottomBarConfig]=\"bottomBarConfig\"\r\n [isMobile]=\"isMobile && navbarConfig?.enable!\"\r\n [navbarEnabled]=\"navbarConfig?.enable!\"\r\n (bottomBarCloseClickEvent)=\"bottomBarCloseClicked($event)\"\r\n (bottomBarButtonClickEvent)=\"bottomBarButtonClicked($event)\"></lf-bottom-bar>\r\n</div>\r\n", styles: [".lf-scaffold{height:100vh}.lf-scaffold .lf-content-wrapper{transition:height .3s;position:absolute;inset:0;overflow-y:auto}.lf-scaffold .lf-content-wrapper.lf-show-navbar{left:80px}.lf-scaffold .lf-content-wrapper.lf-show-header{top:64px;height:calc(100vh - 64px)}.lf-scaffold .lf-content-wrapper.lf-show-navbar-mobile{height:calc(100vh - 56px)}.lf-scaffold .lf-content-wrapper.lf-show-header-and-navbar-mobile{top:64px;height:calc(100vh - 120px)}.lf-scaffold .lf-content-wrapper .lf-content{padding-left:24px;padding-right:24px}.lf-scaffold .lf-content-wrapper .lf-content.lf-content-mobile{padding-left:16px;padding-right:16px}.lf-scaffold .lf-content-wrapper .lf-content.lf-show-footer{min-height:100%}\n"] }]
1362
+ args: [{ selector: 'lf-scaffold', standalone: false, template: "<!-- header-height: 64px; navbar-size: 80px; floating-button-bottom: 24px -->\r\n\r\n<div class=\"lf-scaffold mat-app-background mat-typography\" [ngClass]=\"scaffoldConfig?.cssClass\">\r\n <!-- loading overlay -->\r\n @if (scaffoldConfig?.loading) {\r\n <lf-loading-overlay></lf-loading-overlay>\r\n }\r\n <!-- header -->\r\n <lf-header\r\n [libraryConfig]=\"libraryConfig\"\r\n [headerConfig]=\"headerConfig\"\r\n [isMobile]=\"isMobile\"\r\n [routeLoading]=\"routeLoading\"\r\n [currentRoute]=\"currentRoute\"\r\n (headerConfigUpdateEvent)=\"headerConfigUpdated($event)\"\r\n (headerButtonClickEvent)=\"headerButtonClicked($event)\"\r\n (headerInputSubmitEvent)=\"headerInputSubmitted($event)\"\r\n (headerInputChangeEvent)=\"headerInputChanged($event)\"></lf-header>\r\n <!-- navbar -->\r\n <lf-navbar\r\n [libraryConfig]=\"libraryConfig\"\r\n [navbarConfig]=\"navbarConfig\"\r\n [isMobile]=\"isMobile\"\r\n [currentRoute]=\"currentRoute\"\r\n (navbarButtonClickEvent)=\"navbarButtonClicked($event)\"></lf-navbar>\r\n <!-- content wrapper -->\r\n <div\r\n class=\"lf-content-wrapper\"\r\n [class.lf-show-navbar]=\"navbarConfig?.enable && !isMobile\"\r\n [class.lf-show-header]=\"headerConfig?.enable && !(navbarConfig?.enable && isMobile)\"\r\n [class.lf-show-navbar-mobile]=\"navbarConfig?.enable && isMobile && !headerConfig?.enable\"\r\n [class.lf-show-header-and-navbar-mobile]=\"\r\n headerConfig?.enable && navbarConfig?.enable && isMobile\r\n \"\r\n #scrollContainer\r\n cdkScrollable>\r\n <!-- drawer -->\r\n <lf-drawer\r\n [libraryConfig]=\"libraryConfig\"\r\n [drawerConfig]=\"drawerConfig\"\r\n [drawerPortal]=\"drawerPortal\"\r\n [isMobile]=\"isMobile\"\r\n [fixedOffset]=\"headerConfig?.enable ? 64 : 0\"\r\n (drawerConfigUpdateEvent)=\"drawerConfigUpdated($event)\">\r\n <!-- drawer content -->\r\n <ng-content select=\"[drawerContent]\" drawerContent></ng-content>\r\n <!-- content title card -->\r\n <lf-content-title-card\r\n [libraryConfig]=\"libraryConfig\"\r\n [contentTitleCardConfig]=\"contentTitleCardConfig\"\r\n [isMobile]=\"isMobile\"\r\n [routeHistory]=\"routeHistory\"\r\n (backButtonClickEvent)=\"backButtonClicked()\"></lf-content-title-card>\r\n <!-- main content -->\r\n <div\r\n class=\"lf-content\"\r\n [class.lf-content-mobile]=\"isMobile\"\r\n [class.lf-show-footer]=\"footerConfig?.enable\"\r\n #content>\r\n <ng-content></ng-content>\r\n </div>\r\n <!-- footer -->\r\n <lf-footer [libraryConfig]=\"libraryConfig\" [footerConfig]=\"footerConfig\"></lf-footer>\r\n </lf-drawer>\r\n </div>\r\n <!-- to top button -->\r\n <lf-floating-button\r\n [libraryConfig]=\"libraryConfig\"\r\n [floatingButtonConfig]=\"floatingButtonConfig\"\r\n [onTop]=\"scrollTopPosition <= 0\"\r\n [isMobile]=\"isMobile && navbarConfig?.enable!\"\r\n [bottomBarEnabled]=\"bottomBarConfig?.enable!\"\r\n (floatingButtonConfigUpdateEvent)=\"floatingButtonConfigUpdated($event)\"\r\n (floatingButtonClickEvent)=\"floatingButtonClicked($event)\"></lf-floating-button>\r\n <!-- bottom bar -->\r\n <lf-bottom-bar\r\n [libraryConfig]=\"libraryConfig\"\r\n [bottomBarConfig]=\"bottomBarConfig\"\r\n [isMobile]=\"isMobile && navbarConfig?.enable!\"\r\n [navbarEnabled]=\"navbarConfig?.enable!\"\r\n (bottomBarCloseClickEvent)=\"bottomBarCloseClicked($event)\"\r\n (bottomBarButtonClickEvent)=\"bottomBarButtonClicked($event)\"></lf-bottom-bar>\r\n</div>\r\n", styles: [".lf-scaffold{transition:all .3s;height:100vh}.lf-scaffold .lf-content-wrapper{transition:all .3s;position:absolute;inset:0;overflow-y:auto}.lf-scaffold .lf-content-wrapper.lf-show-navbar{left:80px}.lf-scaffold .lf-content-wrapper.lf-show-header{top:64px;height:calc(100vh - 64px)}.lf-scaffold .lf-content-wrapper.lf-show-navbar-mobile{height:calc(100vh - 56px)}.lf-scaffold .lf-content-wrapper.lf-show-header-and-navbar-mobile{top:64px;height:calc(100vh - 120px)}.lf-scaffold .lf-content-wrapper .lf-content{padding-left:24px;padding-right:24px}.lf-scaffold .lf-content-wrapper .lf-content.lf-content-mobile{padding-left:16px;padding-right:16px}.lf-scaffold .lf-content-wrapper .lf-content.lf-show-footer{min-height:100%}\n"] }]
1328
1363
  }], propDecorators: { scrollContainer: [{
1329
1364
  type: ViewChild,
1330
1365
  args: ['scrollContainer', { static: true }]
@@ -1464,6 +1499,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
1464
1499
  type: Output
1465
1500
  }] } });
1466
1501
 
1502
+ class ListItemAvatarDirective {
1503
+ constructor() {
1504
+ this.templateRef = inject((TemplateRef));
1505
+ }
1506
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ListItemAvatarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
1507
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.5", type: ListItemAvatarDirective, isStandalone: true, selector: "[lfListItemAvatar]", ngImport: i0 }); }
1508
+ }
1509
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ListItemAvatarDirective, decorators: [{
1510
+ type: Directive,
1511
+ args: [{
1512
+ selector: '[lfListItemAvatar]'
1513
+ }]
1514
+ }] });
1515
+
1516
+ class ListItemButtonsDirective {
1517
+ constructor() {
1518
+ this.templateRef = inject((TemplateRef));
1519
+ }
1520
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ListItemButtonsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
1521
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.5", type: ListItemButtonsDirective, isStandalone: true, selector: "[lfListItemButtons]", ngImport: i0 }); }
1522
+ }
1523
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ListItemButtonsDirective, decorators: [{
1524
+ type: Directive,
1525
+ args: [{
1526
+ selector: '[lfListItemButtons]'
1527
+ }]
1528
+ }] });
1529
+
1530
+ class ListItemSubtitleDirective {
1531
+ constructor() {
1532
+ this.templateRef = inject((TemplateRef));
1533
+ }
1534
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ListItemSubtitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
1535
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.5", type: ListItemSubtitleDirective, isStandalone: true, selector: "[lfListItemSubtitle]", ngImport: i0 }); }
1536
+ }
1537
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ListItemSubtitleDirective, decorators: [{
1538
+ type: Directive,
1539
+ args: [{
1540
+ selector: '[lfListItemSubtitle]'
1541
+ }]
1542
+ }] });
1543
+
1544
+ class ListItemTitleDirective {
1545
+ constructor() {
1546
+ this.templateRef = inject((TemplateRef));
1547
+ }
1548
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ListItemTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
1549
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.5", type: ListItemTitleDirective, isStandalone: true, selector: "[lfListItemTitle]", ngImport: i0 }); }
1550
+ }
1551
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ListItemTitleDirective, decorators: [{
1552
+ type: Directive,
1553
+ args: [{
1554
+ selector: '[lfListItemTitle]'
1555
+ }]
1556
+ }] });
1557
+
1467
1558
  class ListComponent {
1468
1559
  constructor() {
1469
1560
  this.config = null;
@@ -1547,15 +1638,29 @@ class ListComponent {
1547
1638
  }
1548
1639
  // Stop click trough events
1549
1640
  stopPropagation(click) {
1641
+ // click.preventDefault();
1642
+ // click.stopPropagation();
1550
1643
  click.stopImmediatePropagation();
1551
1644
  }
1552
1645
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1553
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: ListComponent, isStandalone: true, selector: "lf-list", inputs: { config: "config", header: "header", items: "items", groupedItems: "groupedItems", buttons: "buttons", subtitleTemplate: "subtitleTemplate", dropListId: "dropListId", connectedDropListIds: "connectedDropListIds" }, outputs: { sortChangeEvent: "sortChangeEvent", selectionChangeEvent: "selectionChangeEvent", itemClickEvent: "itemClickEvent", itemDropEvent: "itemDropEvent", buttonClickEvent: "buttonClickEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"lf-list\" cdkDropListGroup>\r\n <!-- Header -->\r\n @if (header) {\r\n <div class=\"lf-list-item lf-list-item-header\">\r\n <!-- avatar -->\r\n @if (header.avatar) {\r\n <div class=\"lf-list-item-avatar px-2\">\r\n <img [src]=\"header.avatar\" alt=\"Avatar of header\" (error)=\"onImageError($event)\" />\r\n </div>\r\n } @else if (header.matIcon || header.svgIcon) {\r\n <div class=\"lf-list-item-avatar px-2\">\r\n <lf-icon [matIcon]=\"header.matIcon\" [svgIcon]=\"header.svgIcon\"></lf-icon>\r\n </div>\r\n } @else if (hasAvatars) {\r\n <div class=\"lf-list-item-avatar px-2\"></div>\r\n }\r\n\r\n <!-- title -->\r\n <div class=\"lf-list-item-title-wrapper flex-row px-2\">\r\n @for (item of header.items; track $index) {\r\n <span [class.clickable]=\"item.sortToken\" (click)=\"updateSortToken(item.sortToken)\">\r\n {{ item.title }}\r\n @if (sortToken === item.sortToken) {\r\n <mat-icon class=\"lf-list-item-sort-icon\">\r\n {{ sortAsc ? \"arrow_downward\" : \"arrow_upward\" }}\r\n </mat-icon>\r\n }\r\n </span>\r\n }\r\n </div>\r\n\r\n <!-- buttons -->\r\n <div class=\"lf-list-item-buttons\">\r\n @for (button of header.buttons; track button.id) {\r\n @if (button.label) {\r\n <button\r\n mat-button\r\n class=\"lf-list-item-button ml-2\"\r\n [class.disabled]=\"button.disabled\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"button.disabled\"\r\n [matTooltip]=\"button.tooltip\"\r\n (click)=\"clickButton({ buttonId: button.id, item: null! }, $event)\">\r\n @if (button.matIcon || button.svgIcon) {\r\n <lf-icon\r\n [matIcon]=\"button.matIcon\"\r\n [svgIcon]=\"button.svgIcon\"\r\n verticalAlign=\"bottom\"></lf-icon>\r\n }\r\n {{ button.label }}\r\n </button>\r\n } @else {\r\n <button\r\n mat-icon-button\r\n class=\"lf-list-item-icon ml-2\"\r\n [class.disabled]=\"button.disabled\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"button.disabled\"\r\n [matTooltip]=\"button.tooltip\"\r\n (click)=\"clickButton({ buttonId: button.id, item: null! }, $event)\">\r\n <lf-icon [matIcon]=\"button.matIcon\" [svgIcon]=\"button.svgIcon\"></lf-icon>\r\n </button>\r\n }\r\n }\r\n </div>\r\n\r\n <!-- checkbox -->\r\n @if (config?.enableSelection) {\r\n <div class=\"lf-list-item-checkbox ml-3\">\r\n <mat-checkbox\r\n [(ngModel)]=\"allSelected\"\r\n [indeterminate]=\"someSelected\"\r\n (change)=\"selectAll($event)\"></mat-checkbox>\r\n </div>\r\n }\r\n </div>\r\n <mat-divider></mat-divider>\r\n }\r\n\r\n <!-- Grouped Items -->\r\n @if (config?.mode === \"group\" && groupedItems) {\r\n @for (group of groupedItems | keyvalue; track group.key; let first = $first) {\r\n <div class=\"lf-list-group\" [class.mt-4]=\"!first\">\r\n @if (group.key) {\r\n <div class=\"lf-list-item lf-list-group-header\">\r\n <div class=\"lf-list-item-avatar px-2\"></div>\r\n <div class=\"lf-list-item-title-wrapper flex-row px-2\">\r\n <span>{{ group.key }}</span>\r\n </div>\r\n </div>\r\n }\r\n <div\r\n [id]=\"group.key\"\r\n cdkDropList\r\n [cdkDropListData]=\"group.value\"\r\n [cdkDropListDisabled]=\"!config?.enableDragging\"\r\n [cdkDropListConnectedTo]=\"connectedDropListIds\"\r\n (cdkDropListDropped)=\"dropItem($event, group.key)\"\r\n [class.drop-zone]=\"config?.enableDragging && group.value.length <= 0\">\r\n @for (item of group.value; track item.id; let last = $last) {\r\n <div\r\n cdkDrag\r\n [cdkDragData]=\"item\"\r\n [cdkDragDisabled]=\"item.disabled || !config?.enableDragging\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"listItemTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item, last: last }\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n <!-- Flat Items -->\r\n } @else {\r\n <div\r\n [id]=\"dropListId\"\r\n cdkDropList\r\n [cdkDropListData]=\"items\"\r\n [cdkDropListDisabled]=\"!config?.enableDragging\"\r\n [cdkDropListConnectedTo]=\"connectedDropListIds\"\r\n (cdkDropListDropped)=\"dropItem($event, dropListId)\"\r\n [class.drop-zone]=\"config?.enableDragging && items.length <= 0\">\r\n @for (item of items; track item.id; let last = $last) {\r\n <div\r\n cdkDrag\r\n [cdkDragData]=\"item\"\r\n [cdkDragDisabled]=\"item.disabled || !config?.enableDragging\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"listItemTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item, last: last }\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Item (template) -->\r\n <ng-template #listItemTemplate let-item let-last=\"last\">\r\n <div\r\n class=\"lf-list-item lf-list-item-data\"\r\n [class.active]=\"item.checked\"\r\n [class.disabled]=\"item.disabled\"\r\n [class.clickable]=\"item.clickable && !item.disabled\"\r\n [ngClass]=\"item.cssClass\"\r\n (click)=\"item.clickable && !item.disabled ? clickItem(item, $event) : null\">\r\n <!-- avatar -->\r\n @if (item.avatar) {\r\n <div class=\"lf-list-item-avatar px-2\">\r\n <img\r\n [src]=\"item.avatar\"\r\n [alt]=\"'Avatar of ' + item.title\"\r\n (error)=\"onImageError($event)\" />\r\n </div>\r\n } @else if (item.matIcon || item.svgIcon) {\r\n <div class=\"lf-list-item-avatar px-2\">\r\n <lf-icon [matIcon]=\"item.matIcon\" [svgIcon]=\"item.svgIcon\"></lf-icon>\r\n </div>\r\n }\r\n\r\n <!-- title -->\r\n <div class=\"lf-list-item-title-wrapper px-2\">\r\n <span class=\"lf-list-item-title\">\r\n {{ item.title }}\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\"\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 @let combinedButtons = getCombinedButtons(item);\r\n @for (button of combinedButtons; track button.id) {\r\n @if (!item.hiddenButtonIds?.includes(button.id)) {\r\n @let disabled =\r\n button.disabled || item.disabled || item.disabledButtonIds?.includes(button.id);\r\n @if (button.label) {\r\n <button\r\n mat-button\r\n class=\"lf-list-item-button ml-2\"\r\n [class.disabled]=\"disabled\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"disabled\"\r\n [matTooltip]=\"button.tooltip\"\r\n (click)=\"clickButton({ buttonId: button.id, item }, $event)\">\r\n @if (button.matIcon || button.svgIcon) {\r\n <lf-icon\r\n [matIcon]=\"button.matIcon\"\r\n [svgIcon]=\"button.svgIcon\"\r\n verticalAlign=\"bottom\"></lf-icon>\r\n }\r\n {{ button.label }}\r\n </button>\r\n } @else {\r\n <button\r\n mat-icon-button\r\n class=\"lf-list-item-icon ml-2\"\r\n [class.disabled]=\"disabled\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"disabled\"\r\n [matTooltip]=\"button.tooltip\"\r\n (click)=\"clickButton({ buttonId: button.id, item }, $event)\">\r\n <lf-icon [matIcon]=\"button.matIcon\" [svgIcon]=\"button.svgIcon\"></lf-icon>\r\n </button>\r\n }\r\n }\r\n }\r\n\r\n <!-- drag -->\r\n @if (config?.enableDragging) {\r\n <button\r\n mat-icon-button\r\n class=\"lf-list-item-icon ml-2\"\r\n [class.disabled]=\"item.disabled\"\r\n [disabled]=\"item.disabled\"\r\n (click)=\"stopPropagation($event)\"\r\n cdkDragHandle>\r\n <mat-icon>drag_indicator</mat-icon>\r\n </button>\r\n }\r\n </div>\r\n\r\n <!-- checkbox -->\r\n @if (config?.enableSelection) {\r\n <div class=\"lf-list-item-checkbox ml-3\">\r\n <mat-checkbox\r\n [(ngModel)]=\"item.checked\"\r\n [disabled]=\"item.disabled!\"\r\n (change)=\"selectItem(item, $event)\"\r\n (click)=\"stopPropagation($event)\"></mat-checkbox>\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (config?.showDividers && !last) {\r\n <mat-divider></mat-divider>\r\n }\r\n </ng-template>\r\n</div>\r\n", styles: [".lf-list,.lf-list .lf-list-group{width:100%}.lf-list .lf-list-group .lf-list-group-header{font-weight:500;height:56px}.lf-list-item{width:100%;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;height:72px;border-radius:4px;box-sizing:border-box;overflow:hidden}.lf-list-item.disabled .lf-list-item-title-wrapper{opacity:.64}.lf-list-item .lf-list-item-sort-icon{font-size:16px;width:16px;height:16px;vertical-align:text-top}.lf-list-item .lf-list-item-checkbox{flex:0 0 40px}.lf-list-item .lf-list-item-avatar{flex:0 0 48px;display:flex;align-items:center;justify-content:center}.lf-list-item .lf-list-item-avatar img{width:48px;height:48px;border-radius:50%;object-fit:cover}.lf-list-item .lf-list-item-title-wrapper{display:flex;flex-flow:column;align-items:flex-start;flex:1 1 200px;overflow:hidden}.lf-list-item .lf-list-item-title-wrapper .lf-list-item-title{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.lf-list-item .lf-list-item-title-wrapper .lf-list-item-subtitle{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.8rem}.lf-list-item .lf-list-item-buttons{flex:0 0 auto;display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between}.lf-list-item.lf-list-item-header{font-weight:500}.lf-list-item.lf-list-item-header .lf-list-item-title-wrapper span{width:80px}.lf-list-item.lf-list-item-data:hover{background-color:#00000014}.lf-list-item .flex-row{display:flex!important;flex-flow:row nowrap;align-items:center}.drop-zone{width:100%;height:72px;border:2px dashed rgba(128,128,128,.8);border-radius:4px;box-sizing:border-box}.clickable{cursor:pointer!important}.cdk-drag-preview{color:var(--mat-app-text-color, inherit)!important;background:var(--mat-app-background-color, inherit)!important;box-sizing:border-box;border-radius:4px;opacity:.8;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.4}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$3.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i2.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i8.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: i8.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i8.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: i8.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }, { kind: "component", type: IconComponent, selector: "lf-icon", inputs: ["matIcon", "svgIcon", "verticalAlign"] }] }); }
1646
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: ListComponent, isStandalone: true, selector: "lf-list", inputs: { config: "config", header: "header", items: "items", groupedItems: "groupedItems", buttons: "buttons", dropListId: "dropListId", connectedDropListIds: "connectedDropListIds" }, outputs: { sortChangeEvent: "sortChangeEvent", selectionChangeEvent: "selectionChangeEvent", itemClickEvent: "itemClickEvent", itemDropEvent: "itemDropEvent", buttonClickEvent: "buttonClickEvent" }, queries: [{ propertyName: "avatarTemplate", first: true, predicate: ListItemAvatarDirective, descendants: true }, { propertyName: "titleTemplate", first: true, predicate: ListItemTitleDirective, descendants: true }, { propertyName: "subtitleTemplate", first: true, predicate: ListItemSubtitleDirective, descendants: true }, { propertyName: "buttonsTemplate", first: true, predicate: ListItemButtonsDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"lf-list\" cdkDropListGroup>\r\n <!-- Header -->\r\n @if (header) {\r\n <div class=\"lf-list-item lf-list-item-header\">\r\n <!-- avatar -->\r\n @if (header.avatar) {\r\n <div class=\"lf-list-item-avatar px-2\">\r\n <img [src]=\"header.avatar\" alt=\"Avatar of header\" (error)=\"onImageError($event)\" />\r\n </div>\r\n } @else if (header.matIcon || header.svgIcon) {\r\n <div class=\"lf-list-item-avatar px-2\">\r\n <lf-icon [matIcon]=\"header.matIcon\" [svgIcon]=\"header.svgIcon\"></lf-icon>\r\n </div>\r\n } @else if (hasAvatars) {\r\n <div class=\"lf-list-item-avatar px-2\"></div>\r\n }\r\n\r\n <!-- title -->\r\n <div class=\"lf-list-item-title-wrapper flex-row px-2\">\r\n @for (item of header.items; track $index) {\r\n <span [class.clickable]=\"item.sortToken\" (click)=\"updateSortToken(item.sortToken)\">\r\n {{ item.title }}\r\n @if (sortToken === item.sortToken) {\r\n <mat-icon class=\"lf-list-item-sort-icon\">\r\n {{ sortAsc ? \"arrow_downward\" : \"arrow_upward\" }}\r\n </mat-icon>\r\n }\r\n </span>\r\n }\r\n </div>\r\n\r\n <!-- buttons -->\r\n <div class=\"lf-list-item-buttons\">\r\n @for (button of header.buttons; track button.id) {\r\n @if (button.label) {\r\n <button\r\n mat-button\r\n class=\"lf-list-item-button ml-2\"\r\n [class.disabled]=\"button.disabled\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"button.disabled\"\r\n [matTooltip]=\"button.tooltip\"\r\n (click)=\"clickButton({ buttonId: button.id, item: null! }, $event)\">\r\n @if (button.matIcon || button.svgIcon) {\r\n <lf-icon\r\n [matIcon]=\"button.matIcon\"\r\n [svgIcon]=\"button.svgIcon\"\r\n verticalAlign=\"bottom\"></lf-icon>\r\n }\r\n {{ button.label }}\r\n </button>\r\n } @else {\r\n <button\r\n mat-icon-button\r\n class=\"lf-list-item-icon ml-2\"\r\n [class.disabled]=\"button.disabled\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"button.disabled\"\r\n [matTooltip]=\"button.tooltip\"\r\n (click)=\"clickButton({ buttonId: button.id, item: null! }, $event)\">\r\n <lf-icon [matIcon]=\"button.matIcon\" [svgIcon]=\"button.svgIcon\"></lf-icon>\r\n </button>\r\n }\r\n }\r\n </div>\r\n\r\n <!-- checkbox -->\r\n @if (config?.enableSelection) {\r\n <div class=\"lf-list-item-checkbox ml-3\">\r\n <mat-checkbox\r\n [(ngModel)]=\"allSelected\"\r\n [indeterminate]=\"someSelected\"\r\n (change)=\"selectAll($event)\"></mat-checkbox>\r\n </div>\r\n }\r\n </div>\r\n <mat-divider></mat-divider>\r\n }\r\n\r\n <!-- Grouped Items -->\r\n @if (config?.mode === \"group\" && groupedItems) {\r\n @for (group of groupedItems | keyvalue; track group.key; let first = $first) {\r\n <div class=\"lf-list-group\" [class.mt-4]=\"!first\">\r\n @if (group.key) {\r\n <div class=\"lf-list-item lf-list-group-header\">\r\n <div class=\"lf-list-item-avatar px-2\"></div>\r\n <div class=\"lf-list-item-title-wrapper flex-row px-2\">\r\n <span>{{ group.key }}</span>\r\n </div>\r\n </div>\r\n }\r\n <div\r\n [id]=\"group.key\"\r\n cdkDropList\r\n [cdkDropListData]=\"group.value\"\r\n [cdkDropListDisabled]=\"!config?.enableDragging\"\r\n [cdkDropListConnectedTo]=\"connectedDropListIds\"\r\n (cdkDropListDropped)=\"dropItem($event, group.key)\"\r\n [class.drop-zone]=\"config?.enableDragging && group.value.length <= 0\">\r\n @for (item of group.value; track item.id; let last = $last) {\r\n <div\r\n cdkDrag\r\n [cdkDragData]=\"item\"\r\n [cdkDragDisabled]=\"item.disabled || !config?.enableDragging\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"listItemTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item, last: last }\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n <!-- Flat Items -->\r\n } @else {\r\n <div\r\n [id]=\"dropListId\"\r\n cdkDropList\r\n [cdkDropListData]=\"items\"\r\n [cdkDropListDisabled]=\"!config?.enableDragging\"\r\n [cdkDropListConnectedTo]=\"connectedDropListIds\"\r\n (cdkDropListDropped)=\"dropItem($event, dropListId)\"\r\n [class.drop-zone]=\"config?.enableDragging && items.length <= 0\">\r\n @for (item of items; track item.id; let last = $last) {\r\n <div\r\n cdkDrag\r\n [cdkDragData]=\"item\"\r\n [cdkDragDisabled]=\"item.disabled || !config?.enableDragging\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"listItemTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item, last: last }\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Item (template) -->\r\n <ng-template #listItemTemplate let-item let-last=\"last\">\r\n <div\r\n class=\"lf-list-item lf-list-item-data\"\r\n [class.active]=\"item.checked\"\r\n [class.disabled]=\"item.disabled\"\r\n [class.clickable]=\"item.clickable && !item.disabled\"\r\n [ngClass]=\"item.cssClass\"\r\n matRipple\r\n [matRippleDisabled]=\"!item.clickable\"\r\n (click)=\"item.clickable && !item.disabled ? clickItem(item, $event) : null\">\r\n <!-- avatar -->\r\n @if (avatarTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"avatarTemplate.templateRef\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n } @else if (item.avatar) {\r\n <div class=\"lf-list-item-avatar px-2\">\r\n <img\r\n [src]=\"item.avatar\"\r\n [alt]=\"'Avatar of ' + item.title\"\r\n (error)=\"onImageError($event)\" />\r\n </div>\r\n } @else if (item.matIcon || item.svgIcon) {\r\n <div class=\"lf-list-item-avatar px-2\">\r\n <lf-icon [matIcon]=\"item.matIcon\" [svgIcon]=\"item.svgIcon\"></lf-icon>\r\n </div>\r\n }\r\n\r\n <!-- title -->\r\n <div class=\"lf-list-item-title-wrapper px-2\">\r\n <span class=\"lf-list-item-title\">\r\n @if (titleTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"titleTemplate.templateRef\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n } @else {\r\n {{ item.title }}\r\n }\r\n </span>\r\n @if (item.subtitle || subtitleTemplate) {\r\n <span class=\"lf-list-item-subtitle\">\r\n @if (subtitleTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"subtitleTemplate.templateRef\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n } @else {\r\n {{ item.subtitle }}\r\n }\r\n </span>\r\n }\r\n </div>\r\n\r\n <!-- buttons -->\r\n <div class=\"lf-list-item-buttons\">\r\n @if (buttonsTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"buttonsTemplate.templateRef\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n } @else {\r\n @let combinedButtons = getCombinedButtons(item);\r\n @for (button of combinedButtons; track button.id) {\r\n @if (!item.hiddenButtonIds?.includes(button.id)) {\r\n @let disabled =\r\n button.disabled || item.disabled || item.disabledButtonIds?.includes(button.id);\r\n @if (button.label) {\r\n <button\r\n mat-button\r\n class=\"lf-list-item-button ml-2\"\r\n [class.disabled]=\"disabled\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"disabled\"\r\n [matTooltip]=\"button.tooltip\"\r\n (click)=\"clickButton({ buttonId: button.id, item }, $event)\">\r\n @if (button.matIcon || button.svgIcon) {\r\n <lf-icon\r\n [matIcon]=\"button.matIcon\"\r\n [svgIcon]=\"button.svgIcon\"\r\n verticalAlign=\"bottom\"></lf-icon>\r\n }\r\n {{ button.label }}\r\n </button>\r\n } @else {\r\n <button\r\n mat-icon-button\r\n class=\"lf-list-item-icon ml-2\"\r\n [class.disabled]=\"disabled\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"disabled\"\r\n [matTooltip]=\"button.tooltip\"\r\n (click)=\"clickButton({ buttonId: button.id, item }, $event)\">\r\n <lf-icon [matIcon]=\"button.matIcon\" [svgIcon]=\"button.svgIcon\"></lf-icon>\r\n </button>\r\n }\r\n }\r\n }\r\n }\r\n\r\n <!-- drag -->\r\n @if (config?.enableDragging) {\r\n <button\r\n mat-icon-button\r\n class=\"lf-list-item-icon ml-2\"\r\n [class.disabled]=\"item.disabled\"\r\n [disabled]=\"item.disabled\"\r\n (click)=\"stopPropagation($event)\"\r\n cdkDragHandle>\r\n <mat-icon>drag_indicator</mat-icon>\r\n </button>\r\n }\r\n </div>\r\n\r\n <!-- checkbox -->\r\n @if (config?.enableSelection) {\r\n <div class=\"lf-list-item-checkbox ml-3\">\r\n <mat-checkbox\r\n [(ngModel)]=\"item.checked\"\r\n [disabled]=\"item.disabled!\"\r\n (change)=\"selectItem(item, $event)\"\r\n (click)=\"stopPropagation($event)\"></mat-checkbox>\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (config?.showDividers && !last) {\r\n <mat-divider></mat-divider>\r\n }\r\n </ng-template>\r\n</div>\r\n", styles: [".lf-list,.lf-list .lf-list-group{width:100%}.lf-list .lf-list-group .lf-list-group-header{font-weight:500;height:56px}.lf-list-item{width:100%;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;height:72px;border-radius:4px;box-sizing:border-box;overflow:hidden}.lf-list-item.disabled .lf-list-item-title-wrapper{opacity:.64}.lf-list-item .lf-list-item-sort-icon{font-size:16px;width:16px;height:16px;vertical-align:text-top}.lf-list-item .lf-list-item-checkbox{flex:0 0 40px}.lf-list-item .lf-list-item-avatar{flex:0 0 48px;display:flex;align-items:center;justify-content:center}.lf-list-item .lf-list-item-avatar img{width:48px;height:48px;border-radius:50%;object-fit:cover}.lf-list-item .lf-list-item-title-wrapper{display:flex;flex-flow:column;align-items:flex-start;flex:1 1 200px;overflow:hidden}.lf-list-item .lf-list-item-title-wrapper .lf-list-item-title{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.lf-list-item .lf-list-item-title-wrapper .lf-list-item-subtitle{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.8rem}.lf-list-item .lf-list-item-buttons{flex:0 0 auto;display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between}.lf-list-item.lf-list-item-header{font-weight:500}.lf-list-item.lf-list-item-header .lf-list-item-title-wrapper span{width:80px}.lf-list-item.lf-list-item-data:hover{background-color:#00000014}.lf-list-item .flex-row{display:flex!important;flex-flow:row nowrap;align-items:center}.drop-zone{width:100%;height:72px;border:2px dashed rgba(128,128,128,.8);border-radius:4px;box-sizing:border-box}.clickable{cursor:pointer!important}.cdk-drag-preview{color:var(--mat-app-text-color, inherit)!important;background:var(--mat-app-background-color, inherit)!important;box-sizing:border-box;border-radius:4px;opacity:.8;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.4}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$3.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i2.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i8.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: i9.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i9.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i9.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i9.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }, { kind: "component", type: IconComponent, selector: "lf-icon", inputs: ["matIcon", "svgIcon", "verticalAlign"] }] }); }
1554
1647
  }
1555
1648
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ListComponent, decorators: [{
1556
1649
  type: Component,
1557
- args: [{ selector: 'lf-list', standalone: true, imports: [SharedModule, IconComponent], template: "<div class=\"lf-list\" cdkDropListGroup>\r\n <!-- Header -->\r\n @if (header) {\r\n <div class=\"lf-list-item lf-list-item-header\">\r\n <!-- avatar -->\r\n @if (header.avatar) {\r\n <div class=\"lf-list-item-avatar px-2\">\r\n <img [src]=\"header.avatar\" alt=\"Avatar of header\" (error)=\"onImageError($event)\" />\r\n </div>\r\n } @else if (header.matIcon || header.svgIcon) {\r\n <div class=\"lf-list-item-avatar px-2\">\r\n <lf-icon [matIcon]=\"header.matIcon\" [svgIcon]=\"header.svgIcon\"></lf-icon>\r\n </div>\r\n } @else if (hasAvatars) {\r\n <div class=\"lf-list-item-avatar px-2\"></div>\r\n }\r\n\r\n <!-- title -->\r\n <div class=\"lf-list-item-title-wrapper flex-row px-2\">\r\n @for (item of header.items; track $index) {\r\n <span [class.clickable]=\"item.sortToken\" (click)=\"updateSortToken(item.sortToken)\">\r\n {{ item.title }}\r\n @if (sortToken === item.sortToken) {\r\n <mat-icon class=\"lf-list-item-sort-icon\">\r\n {{ sortAsc ? \"arrow_downward\" : \"arrow_upward\" }}\r\n </mat-icon>\r\n }\r\n </span>\r\n }\r\n </div>\r\n\r\n <!-- buttons -->\r\n <div class=\"lf-list-item-buttons\">\r\n @for (button of header.buttons; track button.id) {\r\n @if (button.label) {\r\n <button\r\n mat-button\r\n class=\"lf-list-item-button ml-2\"\r\n [class.disabled]=\"button.disabled\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"button.disabled\"\r\n [matTooltip]=\"button.tooltip\"\r\n (click)=\"clickButton({ buttonId: button.id, item: null! }, $event)\">\r\n @if (button.matIcon || button.svgIcon) {\r\n <lf-icon\r\n [matIcon]=\"button.matIcon\"\r\n [svgIcon]=\"button.svgIcon\"\r\n verticalAlign=\"bottom\"></lf-icon>\r\n }\r\n {{ button.label }}\r\n </button>\r\n } @else {\r\n <button\r\n mat-icon-button\r\n class=\"lf-list-item-icon ml-2\"\r\n [class.disabled]=\"button.disabled\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"button.disabled\"\r\n [matTooltip]=\"button.tooltip\"\r\n (click)=\"clickButton({ buttonId: button.id, item: null! }, $event)\">\r\n <lf-icon [matIcon]=\"button.matIcon\" [svgIcon]=\"button.svgIcon\"></lf-icon>\r\n </button>\r\n }\r\n }\r\n </div>\r\n\r\n <!-- checkbox -->\r\n @if (config?.enableSelection) {\r\n <div class=\"lf-list-item-checkbox ml-3\">\r\n <mat-checkbox\r\n [(ngModel)]=\"allSelected\"\r\n [indeterminate]=\"someSelected\"\r\n (change)=\"selectAll($event)\"></mat-checkbox>\r\n </div>\r\n }\r\n </div>\r\n <mat-divider></mat-divider>\r\n }\r\n\r\n <!-- Grouped Items -->\r\n @if (config?.mode === \"group\" && groupedItems) {\r\n @for (group of groupedItems | keyvalue; track group.key; let first = $first) {\r\n <div class=\"lf-list-group\" [class.mt-4]=\"!first\">\r\n @if (group.key) {\r\n <div class=\"lf-list-item lf-list-group-header\">\r\n <div class=\"lf-list-item-avatar px-2\"></div>\r\n <div class=\"lf-list-item-title-wrapper flex-row px-2\">\r\n <span>{{ group.key }}</span>\r\n </div>\r\n </div>\r\n }\r\n <div\r\n [id]=\"group.key\"\r\n cdkDropList\r\n [cdkDropListData]=\"group.value\"\r\n [cdkDropListDisabled]=\"!config?.enableDragging\"\r\n [cdkDropListConnectedTo]=\"connectedDropListIds\"\r\n (cdkDropListDropped)=\"dropItem($event, group.key)\"\r\n [class.drop-zone]=\"config?.enableDragging && group.value.length <= 0\">\r\n @for (item of group.value; track item.id; let last = $last) {\r\n <div\r\n cdkDrag\r\n [cdkDragData]=\"item\"\r\n [cdkDragDisabled]=\"item.disabled || !config?.enableDragging\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"listItemTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item, last: last }\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n <!-- Flat Items -->\r\n } @else {\r\n <div\r\n [id]=\"dropListId\"\r\n cdkDropList\r\n [cdkDropListData]=\"items\"\r\n [cdkDropListDisabled]=\"!config?.enableDragging\"\r\n [cdkDropListConnectedTo]=\"connectedDropListIds\"\r\n (cdkDropListDropped)=\"dropItem($event, dropListId)\"\r\n [class.drop-zone]=\"config?.enableDragging && items.length <= 0\">\r\n @for (item of items; track item.id; let last = $last) {\r\n <div\r\n cdkDrag\r\n [cdkDragData]=\"item\"\r\n [cdkDragDisabled]=\"item.disabled || !config?.enableDragging\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"listItemTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item, last: last }\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Item (template) -->\r\n <ng-template #listItemTemplate let-item let-last=\"last\">\r\n <div\r\n class=\"lf-list-item lf-list-item-data\"\r\n [class.active]=\"item.checked\"\r\n [class.disabled]=\"item.disabled\"\r\n [class.clickable]=\"item.clickable && !item.disabled\"\r\n [ngClass]=\"item.cssClass\"\r\n (click)=\"item.clickable && !item.disabled ? clickItem(item, $event) : null\">\r\n <!-- avatar -->\r\n @if (item.avatar) {\r\n <div class=\"lf-list-item-avatar px-2\">\r\n <img\r\n [src]=\"item.avatar\"\r\n [alt]=\"'Avatar of ' + item.title\"\r\n (error)=\"onImageError($event)\" />\r\n </div>\r\n } @else if (item.matIcon || item.svgIcon) {\r\n <div class=\"lf-list-item-avatar px-2\">\r\n <lf-icon [matIcon]=\"item.matIcon\" [svgIcon]=\"item.svgIcon\"></lf-icon>\r\n </div>\r\n }\r\n\r\n <!-- title -->\r\n <div class=\"lf-list-item-title-wrapper px-2\">\r\n <span class=\"lf-list-item-title\">\r\n {{ item.title }}\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\"\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 @let combinedButtons = getCombinedButtons(item);\r\n @for (button of combinedButtons; track button.id) {\r\n @if (!item.hiddenButtonIds?.includes(button.id)) {\r\n @let disabled =\r\n button.disabled || item.disabled || item.disabledButtonIds?.includes(button.id);\r\n @if (button.label) {\r\n <button\r\n mat-button\r\n class=\"lf-list-item-button ml-2\"\r\n [class.disabled]=\"disabled\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"disabled\"\r\n [matTooltip]=\"button.tooltip\"\r\n (click)=\"clickButton({ buttonId: button.id, item }, $event)\">\r\n @if (button.matIcon || button.svgIcon) {\r\n <lf-icon\r\n [matIcon]=\"button.matIcon\"\r\n [svgIcon]=\"button.svgIcon\"\r\n verticalAlign=\"bottom\"></lf-icon>\r\n }\r\n {{ button.label }}\r\n </button>\r\n } @else {\r\n <button\r\n mat-icon-button\r\n class=\"lf-list-item-icon ml-2\"\r\n [class.disabled]=\"disabled\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"disabled\"\r\n [matTooltip]=\"button.tooltip\"\r\n (click)=\"clickButton({ buttonId: button.id, item }, $event)\">\r\n <lf-icon [matIcon]=\"button.matIcon\" [svgIcon]=\"button.svgIcon\"></lf-icon>\r\n </button>\r\n }\r\n }\r\n }\r\n\r\n <!-- drag -->\r\n @if (config?.enableDragging) {\r\n <button\r\n mat-icon-button\r\n class=\"lf-list-item-icon ml-2\"\r\n [class.disabled]=\"item.disabled\"\r\n [disabled]=\"item.disabled\"\r\n (click)=\"stopPropagation($event)\"\r\n cdkDragHandle>\r\n <mat-icon>drag_indicator</mat-icon>\r\n </button>\r\n }\r\n </div>\r\n\r\n <!-- checkbox -->\r\n @if (config?.enableSelection) {\r\n <div class=\"lf-list-item-checkbox ml-3\">\r\n <mat-checkbox\r\n [(ngModel)]=\"item.checked\"\r\n [disabled]=\"item.disabled!\"\r\n (change)=\"selectItem(item, $event)\"\r\n (click)=\"stopPropagation($event)\"></mat-checkbox>\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (config?.showDividers && !last) {\r\n <mat-divider></mat-divider>\r\n }\r\n </ng-template>\r\n</div>\r\n", styles: [".lf-list,.lf-list .lf-list-group{width:100%}.lf-list .lf-list-group .lf-list-group-header{font-weight:500;height:56px}.lf-list-item{width:100%;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;height:72px;border-radius:4px;box-sizing:border-box;overflow:hidden}.lf-list-item.disabled .lf-list-item-title-wrapper{opacity:.64}.lf-list-item .lf-list-item-sort-icon{font-size:16px;width:16px;height:16px;vertical-align:text-top}.lf-list-item .lf-list-item-checkbox{flex:0 0 40px}.lf-list-item .lf-list-item-avatar{flex:0 0 48px;display:flex;align-items:center;justify-content:center}.lf-list-item .lf-list-item-avatar img{width:48px;height:48px;border-radius:50%;object-fit:cover}.lf-list-item .lf-list-item-title-wrapper{display:flex;flex-flow:column;align-items:flex-start;flex:1 1 200px;overflow:hidden}.lf-list-item .lf-list-item-title-wrapper .lf-list-item-title{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.lf-list-item .lf-list-item-title-wrapper .lf-list-item-subtitle{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.8rem}.lf-list-item .lf-list-item-buttons{flex:0 0 auto;display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between}.lf-list-item.lf-list-item-header{font-weight:500}.lf-list-item.lf-list-item-header .lf-list-item-title-wrapper span{width:80px}.lf-list-item.lf-list-item-data:hover{background-color:#00000014}.lf-list-item .flex-row{display:flex!important;flex-flow:row nowrap;align-items:center}.drop-zone{width:100%;height:72px;border:2px dashed rgba(128,128,128,.8);border-radius:4px;box-sizing:border-box}.clickable{cursor:pointer!important}.cdk-drag-preview{color:var(--mat-app-text-color, inherit)!important;background:var(--mat-app-background-color, inherit)!important;box-sizing:border-box;border-radius:4px;opacity:.8;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.4}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}\n"] }]
1558
- }], propDecorators: { config: [{
1650
+ args: [{ selector: 'lf-list', standalone: true, imports: [SharedModule, IconComponent], template: "<div class=\"lf-list\" cdkDropListGroup>\r\n <!-- Header -->\r\n @if (header) {\r\n <div class=\"lf-list-item lf-list-item-header\">\r\n <!-- avatar -->\r\n @if (header.avatar) {\r\n <div class=\"lf-list-item-avatar px-2\">\r\n <img [src]=\"header.avatar\" alt=\"Avatar of header\" (error)=\"onImageError($event)\" />\r\n </div>\r\n } @else if (header.matIcon || header.svgIcon) {\r\n <div class=\"lf-list-item-avatar px-2\">\r\n <lf-icon [matIcon]=\"header.matIcon\" [svgIcon]=\"header.svgIcon\"></lf-icon>\r\n </div>\r\n } @else if (hasAvatars) {\r\n <div class=\"lf-list-item-avatar px-2\"></div>\r\n }\r\n\r\n <!-- title -->\r\n <div class=\"lf-list-item-title-wrapper flex-row px-2\">\r\n @for (item of header.items; track $index) {\r\n <span [class.clickable]=\"item.sortToken\" (click)=\"updateSortToken(item.sortToken)\">\r\n {{ item.title }}\r\n @if (sortToken === item.sortToken) {\r\n <mat-icon class=\"lf-list-item-sort-icon\">\r\n {{ sortAsc ? \"arrow_downward\" : \"arrow_upward\" }}\r\n </mat-icon>\r\n }\r\n </span>\r\n }\r\n </div>\r\n\r\n <!-- buttons -->\r\n <div class=\"lf-list-item-buttons\">\r\n @for (button of header.buttons; track button.id) {\r\n @if (button.label) {\r\n <button\r\n mat-button\r\n class=\"lf-list-item-button ml-2\"\r\n [class.disabled]=\"button.disabled\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"button.disabled\"\r\n [matTooltip]=\"button.tooltip\"\r\n (click)=\"clickButton({ buttonId: button.id, item: null! }, $event)\">\r\n @if (button.matIcon || button.svgIcon) {\r\n <lf-icon\r\n [matIcon]=\"button.matIcon\"\r\n [svgIcon]=\"button.svgIcon\"\r\n verticalAlign=\"bottom\"></lf-icon>\r\n }\r\n {{ button.label }}\r\n </button>\r\n } @else {\r\n <button\r\n mat-icon-button\r\n class=\"lf-list-item-icon ml-2\"\r\n [class.disabled]=\"button.disabled\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"button.disabled\"\r\n [matTooltip]=\"button.tooltip\"\r\n (click)=\"clickButton({ buttonId: button.id, item: null! }, $event)\">\r\n <lf-icon [matIcon]=\"button.matIcon\" [svgIcon]=\"button.svgIcon\"></lf-icon>\r\n </button>\r\n }\r\n }\r\n </div>\r\n\r\n <!-- checkbox -->\r\n @if (config?.enableSelection) {\r\n <div class=\"lf-list-item-checkbox ml-3\">\r\n <mat-checkbox\r\n [(ngModel)]=\"allSelected\"\r\n [indeterminate]=\"someSelected\"\r\n (change)=\"selectAll($event)\"></mat-checkbox>\r\n </div>\r\n }\r\n </div>\r\n <mat-divider></mat-divider>\r\n }\r\n\r\n <!-- Grouped Items -->\r\n @if (config?.mode === \"group\" && groupedItems) {\r\n @for (group of groupedItems | keyvalue; track group.key; let first = $first) {\r\n <div class=\"lf-list-group\" [class.mt-4]=\"!first\">\r\n @if (group.key) {\r\n <div class=\"lf-list-item lf-list-group-header\">\r\n <div class=\"lf-list-item-avatar px-2\"></div>\r\n <div class=\"lf-list-item-title-wrapper flex-row px-2\">\r\n <span>{{ group.key }}</span>\r\n </div>\r\n </div>\r\n }\r\n <div\r\n [id]=\"group.key\"\r\n cdkDropList\r\n [cdkDropListData]=\"group.value\"\r\n [cdkDropListDisabled]=\"!config?.enableDragging\"\r\n [cdkDropListConnectedTo]=\"connectedDropListIds\"\r\n (cdkDropListDropped)=\"dropItem($event, group.key)\"\r\n [class.drop-zone]=\"config?.enableDragging && group.value.length <= 0\">\r\n @for (item of group.value; track item.id; let last = $last) {\r\n <div\r\n cdkDrag\r\n [cdkDragData]=\"item\"\r\n [cdkDragDisabled]=\"item.disabled || !config?.enableDragging\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"listItemTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item, last: last }\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n <!-- Flat Items -->\r\n } @else {\r\n <div\r\n [id]=\"dropListId\"\r\n cdkDropList\r\n [cdkDropListData]=\"items\"\r\n [cdkDropListDisabled]=\"!config?.enableDragging\"\r\n [cdkDropListConnectedTo]=\"connectedDropListIds\"\r\n (cdkDropListDropped)=\"dropItem($event, dropListId)\"\r\n [class.drop-zone]=\"config?.enableDragging && items.length <= 0\">\r\n @for (item of items; track item.id; let last = $last) {\r\n <div\r\n cdkDrag\r\n [cdkDragData]=\"item\"\r\n [cdkDragDisabled]=\"item.disabled || !config?.enableDragging\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"listItemTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item, last: last }\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Item (template) -->\r\n <ng-template #listItemTemplate let-item let-last=\"last\">\r\n <div\r\n class=\"lf-list-item lf-list-item-data\"\r\n [class.active]=\"item.checked\"\r\n [class.disabled]=\"item.disabled\"\r\n [class.clickable]=\"item.clickable && !item.disabled\"\r\n [ngClass]=\"item.cssClass\"\r\n matRipple\r\n [matRippleDisabled]=\"!item.clickable\"\r\n (click)=\"item.clickable && !item.disabled ? clickItem(item, $event) : null\">\r\n <!-- avatar -->\r\n @if (avatarTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"avatarTemplate.templateRef\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n } @else if (item.avatar) {\r\n <div class=\"lf-list-item-avatar px-2\">\r\n <img\r\n [src]=\"item.avatar\"\r\n [alt]=\"'Avatar of ' + item.title\"\r\n (error)=\"onImageError($event)\" />\r\n </div>\r\n } @else if (item.matIcon || item.svgIcon) {\r\n <div class=\"lf-list-item-avatar px-2\">\r\n <lf-icon [matIcon]=\"item.matIcon\" [svgIcon]=\"item.svgIcon\"></lf-icon>\r\n </div>\r\n }\r\n\r\n <!-- title -->\r\n <div class=\"lf-list-item-title-wrapper px-2\">\r\n <span class=\"lf-list-item-title\">\r\n @if (titleTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"titleTemplate.templateRef\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n } @else {\r\n {{ item.title }}\r\n }\r\n </span>\r\n @if (item.subtitle || subtitleTemplate) {\r\n <span class=\"lf-list-item-subtitle\">\r\n @if (subtitleTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"subtitleTemplate.templateRef\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n } @else {\r\n {{ item.subtitle }}\r\n }\r\n </span>\r\n }\r\n </div>\r\n\r\n <!-- buttons -->\r\n <div class=\"lf-list-item-buttons\">\r\n @if (buttonsTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"buttonsTemplate.templateRef\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n } @else {\r\n @let combinedButtons = getCombinedButtons(item);\r\n @for (button of combinedButtons; track button.id) {\r\n @if (!item.hiddenButtonIds?.includes(button.id)) {\r\n @let disabled =\r\n button.disabled || item.disabled || item.disabledButtonIds?.includes(button.id);\r\n @if (button.label) {\r\n <button\r\n mat-button\r\n class=\"lf-list-item-button ml-2\"\r\n [class.disabled]=\"disabled\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"disabled\"\r\n [matTooltip]=\"button.tooltip\"\r\n (click)=\"clickButton({ buttonId: button.id, item }, $event)\">\r\n @if (button.matIcon || button.svgIcon) {\r\n <lf-icon\r\n [matIcon]=\"button.matIcon\"\r\n [svgIcon]=\"button.svgIcon\"\r\n verticalAlign=\"bottom\"></lf-icon>\r\n }\r\n {{ button.label }}\r\n </button>\r\n } @else {\r\n <button\r\n mat-icon-button\r\n class=\"lf-list-item-icon ml-2\"\r\n [class.disabled]=\"disabled\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"disabled\"\r\n [matTooltip]=\"button.tooltip\"\r\n (click)=\"clickButton({ buttonId: button.id, item }, $event)\">\r\n <lf-icon [matIcon]=\"button.matIcon\" [svgIcon]=\"button.svgIcon\"></lf-icon>\r\n </button>\r\n }\r\n }\r\n }\r\n }\r\n\r\n <!-- drag -->\r\n @if (config?.enableDragging) {\r\n <button\r\n mat-icon-button\r\n class=\"lf-list-item-icon ml-2\"\r\n [class.disabled]=\"item.disabled\"\r\n [disabled]=\"item.disabled\"\r\n (click)=\"stopPropagation($event)\"\r\n cdkDragHandle>\r\n <mat-icon>drag_indicator</mat-icon>\r\n </button>\r\n }\r\n </div>\r\n\r\n <!-- checkbox -->\r\n @if (config?.enableSelection) {\r\n <div class=\"lf-list-item-checkbox ml-3\">\r\n <mat-checkbox\r\n [(ngModel)]=\"item.checked\"\r\n [disabled]=\"item.disabled!\"\r\n (change)=\"selectItem(item, $event)\"\r\n (click)=\"stopPropagation($event)\"></mat-checkbox>\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (config?.showDividers && !last) {\r\n <mat-divider></mat-divider>\r\n }\r\n </ng-template>\r\n</div>\r\n", styles: [".lf-list,.lf-list .lf-list-group{width:100%}.lf-list .lf-list-group .lf-list-group-header{font-weight:500;height:56px}.lf-list-item{width:100%;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;height:72px;border-radius:4px;box-sizing:border-box;overflow:hidden}.lf-list-item.disabled .lf-list-item-title-wrapper{opacity:.64}.lf-list-item .lf-list-item-sort-icon{font-size:16px;width:16px;height:16px;vertical-align:text-top}.lf-list-item .lf-list-item-checkbox{flex:0 0 40px}.lf-list-item .lf-list-item-avatar{flex:0 0 48px;display:flex;align-items:center;justify-content:center}.lf-list-item .lf-list-item-avatar img{width:48px;height:48px;border-radius:50%;object-fit:cover}.lf-list-item .lf-list-item-title-wrapper{display:flex;flex-flow:column;align-items:flex-start;flex:1 1 200px;overflow:hidden}.lf-list-item .lf-list-item-title-wrapper .lf-list-item-title{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.lf-list-item .lf-list-item-title-wrapper .lf-list-item-subtitle{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.8rem}.lf-list-item .lf-list-item-buttons{flex:0 0 auto;display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between}.lf-list-item.lf-list-item-header{font-weight:500}.lf-list-item.lf-list-item-header .lf-list-item-title-wrapper span{width:80px}.lf-list-item.lf-list-item-data:hover{background-color:#00000014}.lf-list-item .flex-row{display:flex!important;flex-flow:row nowrap;align-items:center}.drop-zone{width:100%;height:72px;border:2px dashed rgba(128,128,128,.8);border-radius:4px;box-sizing:border-box}.clickable{cursor:pointer!important}.cdk-drag-preview{color:var(--mat-app-text-color, inherit)!important;background:var(--mat-app-background-color, inherit)!important;box-sizing:border-box;border-radius:4px;opacity:.8;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.4}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}\n"] }]
1651
+ }], propDecorators: { avatarTemplate: [{
1652
+ type: ContentChild,
1653
+ args: [ListItemAvatarDirective]
1654
+ }], titleTemplate: [{
1655
+ type: ContentChild,
1656
+ args: [ListItemTitleDirective]
1657
+ }], subtitleTemplate: [{
1658
+ type: ContentChild,
1659
+ args: [ListItemSubtitleDirective]
1660
+ }], buttonsTemplate: [{
1661
+ type: ContentChild,
1662
+ args: [ListItemButtonsDirective]
1663
+ }], config: [{
1559
1664
  type: Input
1560
1665
  }], header: [{
1561
1666
  type: Input
@@ -1565,8 +1670,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
1565
1670
  type: Input
1566
1671
  }], buttons: [{
1567
1672
  type: Input
1568
- }], subtitleTemplate: [{
1569
- type: Input
1570
1673
  }], dropListId: [{
1571
1674
  type: Input
1572
1675
  }], connectedDropListIds: [{
@@ -1633,5 +1736,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
1633
1736
  * Generated bundle index. Do not edit.
1634
1737
  */
1635
1738
 
1636
- export { BreakpointService, CONFIG, DialogService, FileUploadComponent, ListComponent, LocalStorageService, Logger, PlaceholderComponent, RouterService, ScaffoldComponent, ScaffoldLoadingInterceptor, ScaffoldModule, ScaffoldService, SeoService, SnackbarService, ThemeService };
1739
+ export { BreakpointService, CONFIG, DialogService, FileUploadComponent, ListComponent, ListItemAvatarDirective, ListItemButtonsDirective, ListItemSubtitleDirective, ListItemTitleDirective, LocalStorageService, Logger, PlaceholderComponent, RouterService, ScaffoldComponent, ScaffoldLoadingInterceptor, ScaffoldModule, ScaffoldService, SeoService, SnackbarService, ThemeService };
1637
1740
  //# sourceMappingURL=lukfel-ng-scaffold.mjs.map