@lukfel/ng-scaffold 20.0.12 → 20.0.13
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import {
|
|
2
|
+
import { NgModule, Input, Component, EventEmitter, Output, inject, ChangeDetectorRef, ViewChild, Injectable, DOCUMENT, InjectionToken } from '@angular/core';
|
|
3
3
|
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
|
4
4
|
import * as i2$2 from '@angular/router';
|
|
5
5
|
import { Router, RouteConfigLoadStart, RouteConfigLoadEnd, NavigationEnd, ActivatedRoute, RouterModule } from '@angular/router';
|
|
@@ -11,27 +11,19 @@ import * as i4 from '@angular/material/icon';
|
|
|
11
11
|
import { MatIconModule } from '@angular/material/icon';
|
|
12
12
|
import * as i4$1 from '@angular/material/tooltip';
|
|
13
13
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
14
|
-
import * as i3 from '@angular/material/card';
|
|
15
|
-
import { MatCardModule } from '@angular/material/card';
|
|
16
|
-
import * as i2$1 from '@angular/material/sidenav';
|
|
17
|
-
import { MatSidenavModule } from '@angular/material/sidenav';
|
|
18
14
|
import * as i3$1 from '@angular/cdk/portal';
|
|
19
15
|
import { PortalModule, ComponentPortal } from '@angular/cdk/portal';
|
|
20
|
-
import * as i4$2 from '@angular/material/menu';
|
|
21
|
-
import { MatMenuModule } from '@angular/material/menu';
|
|
22
|
-
import * as i5 from '@angular/material/toolbar';
|
|
23
|
-
import { MatToolbarModule } from '@angular/material/toolbar';
|
|
24
|
-
import * as i7 from '@angular/material/progress-bar';
|
|
25
|
-
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
|
26
|
-
import * as i2$3 from '@angular/material/dialog';
|
|
27
|
-
import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
|
|
28
16
|
import { MatAutocompleteModule } from '@angular/material/autocomplete';
|
|
29
17
|
import { MatButtonToggleModule } from '@angular/material/button-toggle';
|
|
18
|
+
import * as i3 from '@angular/material/card';
|
|
19
|
+
import { MatCardModule } from '@angular/material/card';
|
|
30
20
|
import * as i2$5 from '@angular/material/checkbox';
|
|
31
21
|
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
32
22
|
import { MatChipsModule } from '@angular/material/chips';
|
|
33
23
|
import { MatRippleModule } from '@angular/material/core';
|
|
34
24
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
25
|
+
import * as i2$3 from '@angular/material/dialog';
|
|
26
|
+
import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
|
|
35
27
|
import { MatExpansionModule } from '@angular/material/expansion';
|
|
36
28
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
37
29
|
import { MatGridListModule } from '@angular/material/grid-list';
|
|
@@ -39,11 +31,17 @@ import * as i3$2 from '@angular/material/input';
|
|
|
39
31
|
import { MatInputModule } from '@angular/material/input';
|
|
40
32
|
import * as i4$3 from '@angular/material/list';
|
|
41
33
|
import { MatListModule } from '@angular/material/list';
|
|
34
|
+
import * as i4$2 from '@angular/material/menu';
|
|
35
|
+
import { MatMenuModule } from '@angular/material/menu';
|
|
42
36
|
import { MatPaginatorModule } from '@angular/material/paginator';
|
|
37
|
+
import * as i7 from '@angular/material/progress-bar';
|
|
38
|
+
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
|
43
39
|
import * as i1$2 from '@angular/material/progress-spinner';
|
|
44
40
|
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
|
45
41
|
import { MatRadioModule } from '@angular/material/radio';
|
|
46
42
|
import { MatSelectModule } from '@angular/material/select';
|
|
43
|
+
import * as i2$1 from '@angular/material/sidenav';
|
|
44
|
+
import { MatSidenavModule } from '@angular/material/sidenav';
|
|
47
45
|
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
|
48
46
|
import { MatSliderModule } from '@angular/material/slider';
|
|
49
47
|
import { MatSnackBarModule, MatSnackBar } from '@angular/material/snack-bar';
|
|
@@ -51,6 +49,8 @@ import { MatSortModule } from '@angular/material/sort';
|
|
|
51
49
|
import { MatStepperModule } from '@angular/material/stepper';
|
|
52
50
|
import { MatTableModule } from '@angular/material/table';
|
|
53
51
|
import { MatTabsModule } from '@angular/material/tabs';
|
|
52
|
+
import * as i5 from '@angular/material/toolbar';
|
|
53
|
+
import { MatToolbarModule } from '@angular/material/toolbar';
|
|
54
54
|
import * as i1$1 from '@angular/forms';
|
|
55
55
|
import { FormsModule } from '@angular/forms';
|
|
56
56
|
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
|
|
@@ -58,6 +58,169 @@ import { distinctUntilChanged, firstValueFrom, BehaviorSubject, take, Subscripti
|
|
|
58
58
|
import { Title, Meta } from '@angular/platform-browser';
|
|
59
59
|
import * as i2$4 from '@angular/cdk/scrolling';
|
|
60
60
|
|
|
61
|
+
class MaterialModule {
|
|
62
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: MaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
63
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.5", ngImport: i0, type: MaterialModule, exports: [MatCheckboxModule,
|
|
64
|
+
MatCheckboxModule,
|
|
65
|
+
MatButtonModule,
|
|
66
|
+
MatInputModule,
|
|
67
|
+
MatAutocompleteModule,
|
|
68
|
+
MatDatepickerModule,
|
|
69
|
+
MatFormFieldModule,
|
|
70
|
+
MatRadioModule,
|
|
71
|
+
MatSelectModule,
|
|
72
|
+
MatSliderModule,
|
|
73
|
+
MatSlideToggleModule,
|
|
74
|
+
MatMenuModule,
|
|
75
|
+
MatSidenavModule,
|
|
76
|
+
MatToolbarModule,
|
|
77
|
+
MatListModule,
|
|
78
|
+
MatGridListModule,
|
|
79
|
+
MatCardModule,
|
|
80
|
+
MatStepperModule,
|
|
81
|
+
MatTabsModule,
|
|
82
|
+
MatExpansionModule,
|
|
83
|
+
MatButtonToggleModule,
|
|
84
|
+
MatChipsModule,
|
|
85
|
+
MatIconModule,
|
|
86
|
+
MatProgressSpinnerModule,
|
|
87
|
+
MatProgressBarModule,
|
|
88
|
+
MatRippleModule,
|
|
89
|
+
MatDialogModule,
|
|
90
|
+
MatTooltipModule,
|
|
91
|
+
MatSnackBarModule,
|
|
92
|
+
MatTableModule,
|
|
93
|
+
MatSortModule,
|
|
94
|
+
MatPaginatorModule,
|
|
95
|
+
PortalModule] }); }
|
|
96
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: MaterialModule, imports: [MatCheckboxModule,
|
|
97
|
+
MatCheckboxModule,
|
|
98
|
+
MatButtonModule,
|
|
99
|
+
MatInputModule,
|
|
100
|
+
MatAutocompleteModule,
|
|
101
|
+
MatDatepickerModule,
|
|
102
|
+
MatFormFieldModule,
|
|
103
|
+
MatRadioModule,
|
|
104
|
+
MatSelectModule,
|
|
105
|
+
MatSliderModule,
|
|
106
|
+
MatSlideToggleModule,
|
|
107
|
+
MatMenuModule,
|
|
108
|
+
MatSidenavModule,
|
|
109
|
+
MatToolbarModule,
|
|
110
|
+
MatListModule,
|
|
111
|
+
MatGridListModule,
|
|
112
|
+
MatCardModule,
|
|
113
|
+
MatStepperModule,
|
|
114
|
+
MatTabsModule,
|
|
115
|
+
MatExpansionModule,
|
|
116
|
+
MatButtonToggleModule,
|
|
117
|
+
MatChipsModule,
|
|
118
|
+
MatIconModule,
|
|
119
|
+
MatProgressSpinnerModule,
|
|
120
|
+
MatProgressBarModule,
|
|
121
|
+
MatRippleModule,
|
|
122
|
+
MatDialogModule,
|
|
123
|
+
MatTooltipModule,
|
|
124
|
+
MatSnackBarModule,
|
|
125
|
+
MatTableModule,
|
|
126
|
+
MatSortModule,
|
|
127
|
+
MatPaginatorModule,
|
|
128
|
+
PortalModule] }); }
|
|
129
|
+
}
|
|
130
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: MaterialModule, decorators: [{
|
|
131
|
+
type: NgModule,
|
|
132
|
+
args: [{
|
|
133
|
+
declarations: [],
|
|
134
|
+
exports: [
|
|
135
|
+
MatCheckboxModule,
|
|
136
|
+
MatCheckboxModule,
|
|
137
|
+
MatButtonModule,
|
|
138
|
+
MatInputModule,
|
|
139
|
+
MatAutocompleteModule,
|
|
140
|
+
MatDatepickerModule,
|
|
141
|
+
MatFormFieldModule,
|
|
142
|
+
MatRadioModule,
|
|
143
|
+
MatSelectModule,
|
|
144
|
+
MatSliderModule,
|
|
145
|
+
MatSlideToggleModule,
|
|
146
|
+
MatMenuModule,
|
|
147
|
+
MatSidenavModule,
|
|
148
|
+
MatToolbarModule,
|
|
149
|
+
MatListModule,
|
|
150
|
+
MatGridListModule,
|
|
151
|
+
MatCardModule,
|
|
152
|
+
MatStepperModule,
|
|
153
|
+
MatTabsModule,
|
|
154
|
+
MatExpansionModule,
|
|
155
|
+
MatButtonToggleModule,
|
|
156
|
+
MatChipsModule,
|
|
157
|
+
MatIconModule,
|
|
158
|
+
MatProgressSpinnerModule,
|
|
159
|
+
MatProgressBarModule,
|
|
160
|
+
MatRippleModule,
|
|
161
|
+
MatDialogModule,
|
|
162
|
+
MatTooltipModule,
|
|
163
|
+
MatSnackBarModule,
|
|
164
|
+
MatTableModule,
|
|
165
|
+
MatSortModule,
|
|
166
|
+
MatPaginatorModule,
|
|
167
|
+
PortalModule
|
|
168
|
+
],
|
|
169
|
+
providers: [],
|
|
170
|
+
bootstrap: []
|
|
171
|
+
}]
|
|
172
|
+
}] });
|
|
173
|
+
|
|
174
|
+
class SharedModule {
|
|
175
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
176
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.5", ngImport: i0, type: SharedModule, imports: [CommonModule,
|
|
177
|
+
FormsModule,
|
|
178
|
+
MaterialModule], exports: [CommonModule,
|
|
179
|
+
FormsModule,
|
|
180
|
+
MaterialModule] }); }
|
|
181
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SharedModule, imports: [CommonModule,
|
|
182
|
+
FormsModule,
|
|
183
|
+
MaterialModule, CommonModule,
|
|
184
|
+
FormsModule,
|
|
185
|
+
MaterialModule] }); }
|
|
186
|
+
}
|
|
187
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SharedModule, decorators: [{
|
|
188
|
+
type: NgModule,
|
|
189
|
+
args: [{
|
|
190
|
+
imports: [
|
|
191
|
+
CommonModule,
|
|
192
|
+
FormsModule,
|
|
193
|
+
MaterialModule
|
|
194
|
+
],
|
|
195
|
+
exports: [
|
|
196
|
+
CommonModule,
|
|
197
|
+
FormsModule,
|
|
198
|
+
MaterialModule
|
|
199
|
+
]
|
|
200
|
+
}]
|
|
201
|
+
}] });
|
|
202
|
+
|
|
203
|
+
class IconComponent {
|
|
204
|
+
constructor() {
|
|
205
|
+
this.outlineIcon = false;
|
|
206
|
+
this.alignMiddle = false;
|
|
207
|
+
}
|
|
208
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
209
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: IconComponent, isStandalone: true, selector: "lf-icon", inputs: { matIcon: "matIcon", svgIcon: "svgIcon", outlineIcon: "outlineIcon", alignMiddle: "alignMiddle" }, ngImport: i0, template: "<!-- mat icon -->\r\n@if (matIcon) {\r\n <mat-icon\r\n class=\"lf-icon\"\r\n [class.material-icons-outlined]=\"outlineIcon\"\r\n [class.lf-icon-align-middle]=\"alignMiddle\">\r\n {{ matIcon }}\r\n </mat-icon>\r\n} @else {\r\n @if (svgIcon) {\r\n <mat-icon\r\n class=\"lf-icon\"\r\n [svgIcon]=\"svgIcon\"\r\n [class.lf-icon-align-middle]=\"alignMiddle\"></mat-icon>\r\n }\r\n}\r\n<!-- svg icon -->\r\n", styles: [":host{display:contents}.lf-icon-align-middle{vertical-align:bottom}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
210
|
+
}
|
|
211
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: IconComponent, decorators: [{
|
|
212
|
+
type: Component,
|
|
213
|
+
args: [{ selector: 'lf-icon', standalone: true, imports: [SharedModule], template: "<!-- mat icon -->\r\n@if (matIcon) {\r\n <mat-icon\r\n class=\"lf-icon\"\r\n [class.material-icons-outlined]=\"outlineIcon\"\r\n [class.lf-icon-align-middle]=\"alignMiddle\">\r\n {{ matIcon }}\r\n </mat-icon>\r\n} @else {\r\n @if (svgIcon) {\r\n <mat-icon\r\n class=\"lf-icon\"\r\n [svgIcon]=\"svgIcon\"\r\n [class.lf-icon-align-middle]=\"alignMiddle\"></mat-icon>\r\n }\r\n}\r\n<!-- svg icon -->\r\n", styles: [":host{display:contents}.lf-icon-align-middle{vertical-align:bottom}\n"] }]
|
|
214
|
+
}], propDecorators: { matIcon: [{
|
|
215
|
+
type: Input
|
|
216
|
+
}], svgIcon: [{
|
|
217
|
+
type: Input
|
|
218
|
+
}], outlineIcon: [{
|
|
219
|
+
type: Input
|
|
220
|
+
}], alignMiddle: [{
|
|
221
|
+
type: Input
|
|
222
|
+
}] } });
|
|
223
|
+
|
|
61
224
|
class BottomBarComponent {
|
|
62
225
|
constructor() {
|
|
63
226
|
this.bottomBarConfig = null;
|
|
@@ -76,11 +239,11 @@ class BottomBarComponent {
|
|
|
76
239
|
this.bottomBarCloseClickEvent.emit('bottom-bar_close');
|
|
77
240
|
}
|
|
78
241
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BottomBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
79
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: BottomBarComponent, isStandalone: false, selector: "lf-bottom-bar", inputs: { bottomBarConfig: "bottomBarConfig", isMobile: "isMobile", navbarEnabled: "navbarEnabled" }, outputs: { bottomBarCloseClickEvent: "bottomBarCloseClickEvent", bottomBarButtonClickEvent: "bottomBarButtonClickEvent" }, ngImport: i0, template: "@if (bottomBarConfig && bottomBarConfig.enable) {\r\n <div\r\n class=\"lf-bottom-bar px-4\"\r\n [ngClass]=\"bottomBarConfig.class\"\r\n [class.lf-bottom-bar-show-navbar]=\"!isMobile && navbarEnabled\"\r\n [class.lf-bottom-bar-show-navbar-mobile]=\"isMobile && navbarEnabled\">\r\n <button mat-icon-button (click)=\"closeClicked()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n @if (bottomBarConfig.message) {\r\n <span class=\"ml-2\">{{ bottomBarConfig.message }}</span>\r\n }\r\n @if (bottomBarConfig.actions) {\r\n <div class=\"lf-bottom-bar-actions ml-4\">\r\n @for (action of bottomBarConfig.actions; track action) {\r\n <button\r\n mat-button\r\n
|
|
242
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: BottomBarComponent, isStandalone: false, selector: "lf-bottom-bar", inputs: { bottomBarConfig: "bottomBarConfig", isMobile: "isMobile", navbarEnabled: "navbarEnabled" }, outputs: { bottomBarCloseClickEvent: "bottomBarCloseClickEvent", bottomBarButtonClickEvent: "bottomBarButtonClickEvent" }, ngImport: i0, template: "@if (bottomBarConfig && bottomBarConfig.enable) {\r\n <div\r\n class=\"lf-bottom-bar px-4\"\r\n [ngClass]=\"bottomBarConfig.class\"\r\n [class.lf-bottom-bar-show-navbar]=\"!isMobile && navbarEnabled\"\r\n [class.lf-bottom-bar-show-navbar-mobile]=\"isMobile && navbarEnabled\">\r\n <button mat-icon-button (click)=\"closeClicked()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n @if (bottomBarConfig.message) {\r\n <span class=\"ml-2\">{{ bottomBarConfig.message }}</span>\r\n }\r\n @if (bottomBarConfig.actions) {\r\n <div class=\"lf-bottom-bar-actions ml-4\">\r\n @for (action of bottomBarConfig.actions; track action) {\r\n @if (action.label) {\r\n <button\r\n mat-button\r\n class=\"lf-bottom-bar-action ml-2\"\r\n [ngClass]=\"action.class\"\r\n (click)=\"actionClicked(action.id)\"\r\n [matTooltip]=\"action.tooltip\">\r\n <lf-icon\r\n [matIcon]=\"action.matIcon\"\r\n [svgIcon]=\"action.svgIcon\"\r\n [outlineIcon]=\"action.outlineIcon!\"\r\n [alignMiddle]=\"true\"></lf-icon>\r\n {{ action.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-action-icon ml-2\"\r\n [ngClass]=\"action.class\"\r\n (click)=\"actionClicked(action.id)\"\r\n [matTooltip]=\"action.tooltip\">\r\n <lf-icon\r\n [matIcon]=\"action.matIcon\"\r\n [svgIcon]=\"action.svgIcon\"\r\n [outlineIcon]=\"action.outlineIcon!\"></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-actions{display:flex;align-items:center}.lf-bottom-bar .lf-bottom-bar-actions .lf-bottom-bar-action{color:var(--color-accent)!important;background-color:#fff!important}.lf-bottom-bar .lf-bottom-bar-actions .lf-bottom-bar-action-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", "outlineIcon", "alignMiddle"] }] }); }
|
|
80
243
|
}
|
|
81
244
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BottomBarComponent, decorators: [{
|
|
82
245
|
type: Component,
|
|
83
|
-
args: [{ selector: 'lf-bottom-bar', standalone: false, template: "@if (bottomBarConfig && bottomBarConfig.enable) {\r\n <div\r\n class=\"lf-bottom-bar px-4\"\r\n [ngClass]=\"bottomBarConfig.class\"\r\n [class.lf-bottom-bar-show-navbar]=\"!isMobile && navbarEnabled\"\r\n [class.lf-bottom-bar-show-navbar-mobile]=\"isMobile && navbarEnabled\">\r\n <button mat-icon-button (click)=\"closeClicked()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n @if (bottomBarConfig.message) {\r\n <span class=\"ml-2\">{{ bottomBarConfig.message }}</span>\r\n }\r\n @if (bottomBarConfig.actions) {\r\n <div class=\"lf-bottom-bar-actions ml-4\">\r\n @for (action of bottomBarConfig.actions; track action) {\r\n <button\r\n mat-button\r\n
|
|
246
|
+
args: [{ selector: 'lf-bottom-bar', standalone: false, template: "@if (bottomBarConfig && bottomBarConfig.enable) {\r\n <div\r\n class=\"lf-bottom-bar px-4\"\r\n [ngClass]=\"bottomBarConfig.class\"\r\n [class.lf-bottom-bar-show-navbar]=\"!isMobile && navbarEnabled\"\r\n [class.lf-bottom-bar-show-navbar-mobile]=\"isMobile && navbarEnabled\">\r\n <button mat-icon-button (click)=\"closeClicked()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n @if (bottomBarConfig.message) {\r\n <span class=\"ml-2\">{{ bottomBarConfig.message }}</span>\r\n }\r\n @if (bottomBarConfig.actions) {\r\n <div class=\"lf-bottom-bar-actions ml-4\">\r\n @for (action of bottomBarConfig.actions; track action) {\r\n @if (action.label) {\r\n <button\r\n mat-button\r\n class=\"lf-bottom-bar-action ml-2\"\r\n [ngClass]=\"action.class\"\r\n (click)=\"actionClicked(action.id)\"\r\n [matTooltip]=\"action.tooltip\">\r\n <lf-icon\r\n [matIcon]=\"action.matIcon\"\r\n [svgIcon]=\"action.svgIcon\"\r\n [outlineIcon]=\"action.outlineIcon!\"\r\n [alignMiddle]=\"true\"></lf-icon>\r\n {{ action.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-action-icon ml-2\"\r\n [ngClass]=\"action.class\"\r\n (click)=\"actionClicked(action.id)\"\r\n [matTooltip]=\"action.tooltip\">\r\n <lf-icon\r\n [matIcon]=\"action.matIcon\"\r\n [svgIcon]=\"action.svgIcon\"\r\n [outlineIcon]=\"action.outlineIcon!\"></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-actions{display:flex;align-items:center}.lf-bottom-bar .lf-bottom-bar-actions .lf-bottom-bar-action{color:var(--color-accent)!important;background-color:#fff!important}.lf-bottom-bar .lf-bottom-bar-actions .lf-bottom-bar-action-icon{color:#fff!important}\n"] }]
|
|
84
247
|
}], propDecorators: { bottomBarConfig: [{
|
|
85
248
|
type: Input
|
|
86
249
|
}], isMobile: [{
|
|
@@ -222,148 +385,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
222
385
|
type: Input
|
|
223
386
|
}] } });
|
|
224
387
|
|
|
225
|
-
class MaterialModule {
|
|
226
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: MaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
227
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.5", ngImport: i0, type: MaterialModule, exports: [MatCheckboxModule,
|
|
228
|
-
MatCheckboxModule,
|
|
229
|
-
MatButtonModule,
|
|
230
|
-
MatInputModule,
|
|
231
|
-
MatAutocompleteModule,
|
|
232
|
-
MatDatepickerModule,
|
|
233
|
-
MatFormFieldModule,
|
|
234
|
-
MatRadioModule,
|
|
235
|
-
MatSelectModule,
|
|
236
|
-
MatSliderModule,
|
|
237
|
-
MatSlideToggleModule,
|
|
238
|
-
MatMenuModule,
|
|
239
|
-
MatSidenavModule,
|
|
240
|
-
MatToolbarModule,
|
|
241
|
-
MatListModule,
|
|
242
|
-
MatGridListModule,
|
|
243
|
-
MatCardModule,
|
|
244
|
-
MatStepperModule,
|
|
245
|
-
MatTabsModule,
|
|
246
|
-
MatExpansionModule,
|
|
247
|
-
MatButtonToggleModule,
|
|
248
|
-
MatChipsModule,
|
|
249
|
-
MatIconModule,
|
|
250
|
-
MatProgressSpinnerModule,
|
|
251
|
-
MatProgressBarModule,
|
|
252
|
-
MatRippleModule,
|
|
253
|
-
MatDialogModule,
|
|
254
|
-
MatTooltipModule,
|
|
255
|
-
MatSnackBarModule,
|
|
256
|
-
MatTableModule,
|
|
257
|
-
MatSortModule,
|
|
258
|
-
MatPaginatorModule,
|
|
259
|
-
PortalModule] }); }
|
|
260
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: MaterialModule, imports: [MatCheckboxModule,
|
|
261
|
-
MatCheckboxModule,
|
|
262
|
-
MatButtonModule,
|
|
263
|
-
MatInputModule,
|
|
264
|
-
MatAutocompleteModule,
|
|
265
|
-
MatDatepickerModule,
|
|
266
|
-
MatFormFieldModule,
|
|
267
|
-
MatRadioModule,
|
|
268
|
-
MatSelectModule,
|
|
269
|
-
MatSliderModule,
|
|
270
|
-
MatSlideToggleModule,
|
|
271
|
-
MatMenuModule,
|
|
272
|
-
MatSidenavModule,
|
|
273
|
-
MatToolbarModule,
|
|
274
|
-
MatListModule,
|
|
275
|
-
MatGridListModule,
|
|
276
|
-
MatCardModule,
|
|
277
|
-
MatStepperModule,
|
|
278
|
-
MatTabsModule,
|
|
279
|
-
MatExpansionModule,
|
|
280
|
-
MatButtonToggleModule,
|
|
281
|
-
MatChipsModule,
|
|
282
|
-
MatIconModule,
|
|
283
|
-
MatProgressSpinnerModule,
|
|
284
|
-
MatProgressBarModule,
|
|
285
|
-
MatRippleModule,
|
|
286
|
-
MatDialogModule,
|
|
287
|
-
MatTooltipModule,
|
|
288
|
-
MatSnackBarModule,
|
|
289
|
-
MatTableModule,
|
|
290
|
-
MatSortModule,
|
|
291
|
-
MatPaginatorModule,
|
|
292
|
-
PortalModule] }); }
|
|
293
|
-
}
|
|
294
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: MaterialModule, decorators: [{
|
|
295
|
-
type: NgModule,
|
|
296
|
-
args: [{
|
|
297
|
-
declarations: [],
|
|
298
|
-
exports: [
|
|
299
|
-
MatCheckboxModule,
|
|
300
|
-
MatCheckboxModule,
|
|
301
|
-
MatButtonModule,
|
|
302
|
-
MatInputModule,
|
|
303
|
-
MatAutocompleteModule,
|
|
304
|
-
MatDatepickerModule,
|
|
305
|
-
MatFormFieldModule,
|
|
306
|
-
MatRadioModule,
|
|
307
|
-
MatSelectModule,
|
|
308
|
-
MatSliderModule,
|
|
309
|
-
MatSlideToggleModule,
|
|
310
|
-
MatMenuModule,
|
|
311
|
-
MatSidenavModule,
|
|
312
|
-
MatToolbarModule,
|
|
313
|
-
MatListModule,
|
|
314
|
-
MatGridListModule,
|
|
315
|
-
MatCardModule,
|
|
316
|
-
MatStepperModule,
|
|
317
|
-
MatTabsModule,
|
|
318
|
-
MatExpansionModule,
|
|
319
|
-
MatButtonToggleModule,
|
|
320
|
-
MatChipsModule,
|
|
321
|
-
MatIconModule,
|
|
322
|
-
MatProgressSpinnerModule,
|
|
323
|
-
MatProgressBarModule,
|
|
324
|
-
MatRippleModule,
|
|
325
|
-
MatDialogModule,
|
|
326
|
-
MatTooltipModule,
|
|
327
|
-
MatSnackBarModule,
|
|
328
|
-
MatTableModule,
|
|
329
|
-
MatSortModule,
|
|
330
|
-
MatPaginatorModule,
|
|
331
|
-
PortalModule
|
|
332
|
-
],
|
|
333
|
-
providers: [],
|
|
334
|
-
bootstrap: []
|
|
335
|
-
}]
|
|
336
|
-
}] });
|
|
337
|
-
|
|
338
|
-
class SharedModule {
|
|
339
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
340
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.5", ngImport: i0, type: SharedModule, imports: [CommonModule,
|
|
341
|
-
FormsModule,
|
|
342
|
-
MaterialModule], exports: [CommonModule,
|
|
343
|
-
FormsModule,
|
|
344
|
-
MaterialModule] }); }
|
|
345
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SharedModule, imports: [CommonModule,
|
|
346
|
-
FormsModule,
|
|
347
|
-
MaterialModule, CommonModule,
|
|
348
|
-
FormsModule,
|
|
349
|
-
MaterialModule] }); }
|
|
350
|
-
}
|
|
351
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SharedModule, decorators: [{
|
|
352
|
-
type: NgModule,
|
|
353
|
-
args: [{
|
|
354
|
-
imports: [
|
|
355
|
-
CommonModule,
|
|
356
|
-
FormsModule,
|
|
357
|
-
MaterialModule
|
|
358
|
-
],
|
|
359
|
-
exports: [
|
|
360
|
-
CommonModule,
|
|
361
|
-
FormsModule,
|
|
362
|
-
MaterialModule
|
|
363
|
-
]
|
|
364
|
-
}]
|
|
365
|
-
}] });
|
|
366
|
-
|
|
367
388
|
class InputComponent {
|
|
368
389
|
constructor() {
|
|
369
390
|
this.dialogRef = inject(MatDialogRef, { optional: true });
|
|
@@ -432,27 +453,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
432
453
|
args: ['input']
|
|
433
454
|
}] } });
|
|
434
455
|
|
|
435
|
-
class IconComponent {
|
|
436
|
-
constructor() {
|
|
437
|
-
this.outlineIcon = false;
|
|
438
|
-
this.alignMiddle = false;
|
|
439
|
-
}
|
|
440
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
441
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: IconComponent, isStandalone: true, selector: "lf-icon", inputs: { matIcon: "matIcon", svgIcon: "svgIcon", outlineIcon: "outlineIcon", alignMiddle: "alignMiddle" }, ngImport: i0, template: "<!-- mat icon -->\r\n@if (matIcon) {\r\n <mat-icon\r\n class=\"lf-icon\"\r\n [class.material-icons-outlined]=\"outlineIcon\"\r\n [class.lf-icon-align-middle]=\"alignMiddle\">\r\n {{ matIcon }}\r\n </mat-icon>\r\n} @else {\r\n @if (svgIcon) {\r\n <mat-icon\r\n class=\"lf-icon\"\r\n [svgIcon]=\"svgIcon\"\r\n [class.lf-icon-align-middle]=\"alignMiddle\"></mat-icon>\r\n }\r\n}\r\n<!-- svg icon -->\r\n", styles: [":host{display:contents}.lf-icon-align-middle{vertical-align:bottom}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
442
|
-
}
|
|
443
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: IconComponent, decorators: [{
|
|
444
|
-
type: Component,
|
|
445
|
-
args: [{ selector: 'lf-icon', standalone: true, imports: [SharedModule], template: "<!-- mat icon -->\r\n@if (matIcon) {\r\n <mat-icon\r\n class=\"lf-icon\"\r\n [class.material-icons-outlined]=\"outlineIcon\"\r\n [class.lf-icon-align-middle]=\"alignMiddle\">\r\n {{ matIcon }}\r\n </mat-icon>\r\n} @else {\r\n @if (svgIcon) {\r\n <mat-icon\r\n class=\"lf-icon\"\r\n [svgIcon]=\"svgIcon\"\r\n [class.lf-icon-align-middle]=\"alignMiddle\"></mat-icon>\r\n }\r\n}\r\n<!-- svg icon -->\r\n", styles: [":host{display:contents}.lf-icon-align-middle{vertical-align:bottom}\n"] }]
|
|
446
|
-
}], propDecorators: { matIcon: [{
|
|
447
|
-
type: Input
|
|
448
|
-
}], svgIcon: [{
|
|
449
|
-
type: Input
|
|
450
|
-
}], outlineIcon: [{
|
|
451
|
-
type: Input
|
|
452
|
-
}], alignMiddle: [{
|
|
453
|
-
type: Input
|
|
454
|
-
}] } });
|
|
455
|
-
|
|
456
456
|
class HeaderComponent {
|
|
457
457
|
constructor() {
|
|
458
458
|
this.headerConfig = null;
|
|
@@ -488,11 +488,11 @@ class HeaderComponent {
|
|
|
488
488
|
return route === id;
|
|
489
489
|
}
|
|
490
490
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
491
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: HeaderComponent, isStandalone: false, selector: "lf-header", inputs: { headerConfig: "headerConfig", isMobile: "isMobile", routeLoading: "routeLoading", currentRoute: "currentRoute" }, outputs: { headerButtonClickEvent: "headerButtonClickEvent", headerInputSubmitEvent: "headerInputSubmitEvent", headerInputChangeEvent: "headerInputChangeEvent" }, ngImport: i0, template: "@if (headerConfig && headerConfig.enable) {\r\n <mat-toolbar\r\n class=\"lf-header mat-elevation-z3\"\r\n [class.px-4]=\"!isMobile\"\r\n [class.px-1]=\"isMobile\"\r\n [ngClass]=\"headerConfig.class\"\r\n color=\"primary\">\r\n <!-- left menu button -->\r\n <ng-container\r\n [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n menuButton: headerConfig.leftMenuButton!,\r\n hideLabel: true,\r\n }\"></ng-container>\r\n <!-- logo & title -->\r\n <div\r\n class=\"lf-header-logo-title-wrapper ml-1 mr-2\"\r\n [class.ml-10]=\"headerConfig.leftMenuButton && !isMobile\">\r\n <!-- link wrapper -->\r\n <div\r\n class=\"lf-header-logo-title-wrapper-link\"\r\n [class.lf-clickable]=\"headerConfig.titleRouterLink\"\r\n [routerLink]=\"headerConfig.titleRouterLink ? [headerConfig.titleRouterLink] : null\">\r\n <!-- svg logo -->\r\n @if (headerConfig.svgLogo) {\r\n <mat-icon\r\n class=\"lf-header-logo\"\r\n [class.mr-3]=\"headerConfig.title\"\r\n [svgIcon]=\"headerConfig.svgLogo!\"></mat-icon>\r\n } @else {\r\n @if (headerConfig.imgLogo) {\r\n <img\r\n class=\"lf-header-logo\"\r\n [class.mr-3]=\"headerConfig.title\"\r\n [src]=\"headerConfig.imgLogo\"\r\n alt=\"Logo\" />\r\n }\r\n }\r\n <!-- img logo -->\r\n <!-- title -->\r\n @if (headerConfig.title) {\r\n <div class=\"lf-header-title-wrapper\">\r\n @if (headerConfig.title) {\r\n <span class=\"lf-header-title\">\r\n {{ headerConfig.title }}\r\n </span>\r\n }\r\n @if (headerConfig.subtitle) {\r\n <span class=\"lf-header-subtitle\">\r\n {{ headerConfig.subtitle }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n <!-- input -->\r\n @if (headerConfig.inputConfig?.enable) {\r\n <div class=\"spacer\"></div>\r\n <lf-input\r\n [class.lf-header-input-mobile]=\"isMobile\"\r\n [class.mx-3]=\"!isMobile\"\r\n [inputConfig]=\"headerConfig.inputConfig!\"\r\n [isMobile]=\"isMobile\"\r\n (inputSubmitEvent)=\"inputSubmitted($event)\"\r\n (inputChangeEvent)=\"inputChanged($event)\"\r\n (inputPrefixActionEvent)=\"headerConfig.inputConfig!.enable = false\"></lf-input>\r\n }\r\n <!-- spacer -->\r\n <div class=\"spacer\"></div>\r\n <!-- right menu buttons -->\r\n @for (button of headerConfig.rightMenuButtons; track button) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n menuButton: button,\r\n }\"></ng-container>\r\n }\r\n </mat-toolbar>\r\n <!-- loading bar -->\r\n @if (headerConfig.loading || (headerConfig.showRouteLoading && routeLoading)) {\r\n <mat-progress-bar\r\n class=\"lf-header-progress-bar\"\r\n color=\"accent\"\r\n mode=\"indeterminate\"></mat-progress-bar>\r\n }\r\n}\r\n\r\n<!-- header menu button -->\r\n<ng-template #menuButtonTemplate let-menuButton=\"menuButton\" let-hideLabel=\"hideLabel\">\r\n @if (menuButton) {\r\n <!-- icon button -->\r\n @if ((menuButton.matIcon || menuButton.svgIcon) && (!menuButton.label || hideLabel)) {\r\n <button\r\n mat-icon-button\r\n class=\"lf-header-menu-button\"\r\n [ngClass]=\"menuButton.class\"\r\n (click)=\"buttonClicked(menuButton.id)\"\r\n [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n [matTooltip]=\"menuButton.tooltip\"\r\n [attr.aria-label]=\"menuButton.id\">\r\n <!-- icon -->\r\n <lf-icon\r\n [matIcon]=\"menuButton.matIcon\"\r\n [svgIcon]=\"menuButton.svgIcon\"\r\n [outlineIcon]=\"menuButton.outlineIcon\"></lf-icon>\r\n </button>\r\n } @else {\r\n @if (!hideLabel) {\r\n <button\r\n mat-button\r\n class=\"lf-header-menu-button\"\r\n [class.lf-header-menu-button-active]=\"isActive(menuButton.id)\"\r\n [ngClass]=\"menuButton.class\"\r\n (click)=\"buttonClicked(menuButton.id)\"\r\n [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n [matTooltip]=\"menuButton.tooltip\">\r\n {{ menuButton.label }}\r\n </button>\r\n }\r\n }\r\n <!-- text button -->\r\n <!-- menu -->\r\n <mat-menu #menu=\"matMenu\">\r\n <!-- label menu buttons -->\r\n @for (button of menuButton.menuButtons; track button) {\r\n <!-- menu button -->\r\n @if (button.label) {\r\n <button\r\n mat-menu-item\r\n [class.lf-header-menu-button-active]=\"isActive(button.id)\"\r\n [ngClass]=\"button.class\"\r\n (click)=\"buttonClicked(button.id)\">\r\n <!-- icon -->\r\n <lf-icon\r\n [matIcon]=\"button.matIcon\"\r\n [svgIcon]=\"button.svgIcon\"\r\n [outlineIcon]=\"button.outlineIcon\"\r\n [alignMiddle]=\"true\"></lf-icon>\r\n <!-- label -->\r\n @if (button.label) {\r\n <span>{{ button.label }}</span>\r\n }\r\n </button>\r\n }\r\n }\r\n <!-- icon menu buttons -->\r\n <div class=\"lf-menu-icons px-1\">\r\n @for (button of menuButton.menuButtons; track button) {\r\n <!-- icon button -->\r\n @if (!button.label && (button.matIcon || button.svgIcon)) {\r\n <button\r\n mat-button\r\n class=\"lf-menu-icon-button\"\r\n [ngClass]=\"button.class\"\r\n (click)=\"buttonClicked(button.id)\"\r\n [matTooltip]=\"button.tooltip\">\r\n <!-- icon -->\r\n <lf-icon\r\n [matIcon]=\"button.matIcon\"\r\n [svgIcon]=\"button.svgIcon\"\r\n [outlineIcon]=\"button.outlineIcon\"\r\n [alignMiddle]=\"true\"></lf-icon>\r\n </button>\r\n }\r\n }\r\n </div>\r\n </mat-menu>\r\n }\r\n</ng-template>\r\n", styles: [".lf-header{transition:top .3s;z-index:100;position:fixed;top:0;height:64px}.lf-header .lf-header-menu-button{flex-shrink:0;max-width:144px}.lf-header .lf-header-menu-button ::ng-deep .mdc-button__label{overflow:hidden;text-overflow:ellipsis}.lf-header .lf-header-menu-button.lf-header-menu-button-active{background-color:#fff}.lf-header .lf-header-logo-title-wrapper{flex:0 0 auto;max-width:480px;overflow:hidden;display:flex}.lf-header .lf-header-logo-title-wrapper .lf-header-logo-title-wrapper-link{display:flex;flex-flow:row nowrap;align-items:center;flex:0}.lf-header .lf-header-logo-title-wrapper .lf-header-logo-title-wrapper-link.lf-clickable{cursor:pointer}.lf-header .lf-header-logo-title-wrapper .lf-header-logo{width:40px;height:40px;min-width:40px;min-height:40px}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper{display:flex;flex-flow:column}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-title{font-size:20px;line-height:28px}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-subtitle{font-size:12px;line-height:12px}.lf-header lf-input{z-index:100;flex:1 1 480px}.lf-header lf-input.lf-header-input-mobile{position:fixed!important;left:4px!important;right:4px!important;width:unset!important;max-width:unset!important}.lf-header .spacer{flex:1 0 auto}.lf-menu-icons{display:flex;flex-flow:row wrap;align-items:center;justify-content:flex-start}.lf-menu-icons .lf-menu-icon-button{width:48px;min-width:unset;height:48px;margin:0;padding:0;border-radius:50%}.lf-header-progress-bar{z-index:100;position:fixed;top:64px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i2.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: InputComponent, selector: "lf-input", inputs: ["inputConfig", "isMobile"], outputs: ["inputSubmitEvent", "inputChangeEvent", "inputPrefixActionEvent"] }, { kind: "component", type: IconComponent, selector: "lf-icon", inputs: ["matIcon", "svgIcon", "outlineIcon", "alignMiddle"] }] }); }
|
|
491
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: HeaderComponent, isStandalone: false, selector: "lf-header", inputs: { headerConfig: "headerConfig", isMobile: "isMobile", routeLoading: "routeLoading", currentRoute: "currentRoute" }, outputs: { headerButtonClickEvent: "headerButtonClickEvent", headerInputSubmitEvent: "headerInputSubmitEvent", headerInputChangeEvent: "headerInputChangeEvent" }, ngImport: i0, template: "@if (headerConfig && headerConfig.enable) {\r\n <mat-toolbar\r\n class=\"lf-header mat-elevation-z3\"\r\n [class.px-4]=\"!isMobile\"\r\n [class.px-1]=\"isMobile\"\r\n [ngClass]=\"headerConfig.class\"\r\n color=\"primary\">\r\n <!-- left menu button -->\r\n <ng-container\r\n [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n menuButton: headerConfig.leftMenuButton!,\r\n hideLabel: true,\r\n }\"></ng-container>\r\n <!-- logo & title -->\r\n <div\r\n class=\"lf-header-logo-title-wrapper ml-1 mr-2\"\r\n [class.ml-10]=\"headerConfig.leftMenuButton && !isMobile\">\r\n <!-- link wrapper -->\r\n <div\r\n class=\"lf-header-logo-title-wrapper-link\"\r\n [class.lf-clickable]=\"headerConfig.titleRouterLink\"\r\n [routerLink]=\"headerConfig.titleRouterLink ? [headerConfig.titleRouterLink] : null\">\r\n <!-- svg logo -->\r\n @if (headerConfig.svgLogo) {\r\n <mat-icon\r\n class=\"lf-header-logo\"\r\n [class.mr-3]=\"headerConfig.title\"\r\n [svgIcon]=\"headerConfig.svgLogo!\"></mat-icon>\r\n } @else {\r\n @if (headerConfig.imgLogo) {\r\n <img\r\n class=\"lf-header-logo\"\r\n [class.mr-3]=\"headerConfig.title\"\r\n [src]=\"headerConfig.imgLogo\"\r\n alt=\"Logo\" />\r\n }\r\n }\r\n <!-- img logo -->\r\n <!-- title -->\r\n @if (headerConfig.title) {\r\n <div class=\"lf-header-title-wrapper\">\r\n @if (headerConfig.title) {\r\n <span class=\"lf-header-title\">\r\n {{ headerConfig.title }}\r\n </span>\r\n }\r\n @if (headerConfig.subtitle) {\r\n <span class=\"lf-header-subtitle\">\r\n {{ headerConfig.subtitle }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n <!-- input -->\r\n @if (headerConfig.inputConfig?.enable) {\r\n <div class=\"spacer\"></div>\r\n <lf-input\r\n [class.lf-header-input-mobile]=\"isMobile\"\r\n [class.mx-3]=\"!isMobile\"\r\n [inputConfig]=\"headerConfig.inputConfig!\"\r\n [isMobile]=\"isMobile\"\r\n (inputSubmitEvent)=\"inputSubmitted($event)\"\r\n (inputChangeEvent)=\"inputChanged($event)\"\r\n (inputPrefixActionEvent)=\"headerConfig.inputConfig!.enable = false\"></lf-input>\r\n }\r\n <!-- spacer -->\r\n <div class=\"spacer\"></div>\r\n <!-- right menu buttons -->\r\n @for (button of headerConfig.rightMenuButtons; track button) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n menuButton: button,\r\n }\"></ng-container>\r\n }\r\n </mat-toolbar>\r\n <!-- loading bar -->\r\n @if (headerConfig.loading || (headerConfig.showRouteLoading && routeLoading)) {\r\n <mat-progress-bar\r\n class=\"lf-header-progress-bar\"\r\n color=\"accent\"\r\n mode=\"indeterminate\"></mat-progress-bar>\r\n }\r\n}\r\n\r\n<!-- header menu button -->\r\n<ng-template #menuButtonTemplate let-menuButton=\"menuButton\" let-hideLabel=\"hideLabel\">\r\n @if (menuButton) {\r\n <!-- icon button -->\r\n @if ((menuButton.matIcon || menuButton.svgIcon) && (!menuButton.label || hideLabel)) {\r\n <button\r\n mat-icon-button\r\n class=\"lf-header-menu-button\"\r\n [ngClass]=\"menuButton.class\"\r\n (click)=\"buttonClicked(menuButton.id)\"\r\n [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n [matTooltip]=\"menuButton.tooltip\"\r\n [attr.aria-label]=\"menuButton.id\">\r\n <!-- icon -->\r\n <lf-icon\r\n [matIcon]=\"menuButton.matIcon\"\r\n [svgIcon]=\"menuButton.svgIcon\"\r\n [outlineIcon]=\"menuButton.outlineIcon\"></lf-icon>\r\n </button>\r\n } @else {\r\n @if (!hideLabel) {\r\n <button\r\n mat-button\r\n class=\"lf-header-menu-button\"\r\n [class.lf-header-menu-button-active]=\"isActive(menuButton.id)\"\r\n [ngClass]=\"menuButton.class\"\r\n (click)=\"buttonClicked(menuButton.id)\"\r\n [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n [matTooltip]=\"menuButton.tooltip\">\r\n <!-- 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) {\r\n <!-- menu button -->\r\n @if (button.label) {\r\n <button\r\n mat-menu-item\r\n [class.lf-header-menu-button-active]=\"isActive(button.id)\"\r\n [ngClass]=\"button.class\"\r\n (click)=\"buttonClicked(button.id)\">\r\n <!-- icon -->\r\n <lf-icon\r\n [matIcon]=\"button.matIcon\"\r\n [svgIcon]=\"button.svgIcon\"\r\n [outlineIcon]=\"button.outlineIcon\"\r\n [alignMiddle]=\"true\"></lf-icon>\r\n <!-- label -->\r\n @if (button.label) {\r\n <span>{{ button.label }}</span>\r\n }\r\n </button>\r\n }\r\n }\r\n <!-- icon menu buttons -->\r\n <div class=\"lf-menu-icons px-1\">\r\n @for (button of menuButton.menuButtons; track button) {\r\n <!-- icon button -->\r\n @if (!button.label && (button.matIcon || button.svgIcon)) {\r\n <button\r\n mat-icon-button\r\n class=\"lf-menu-icon-button\"\r\n [ngClass]=\"button.class\"\r\n (click)=\"buttonClicked(button.id)\"\r\n [matTooltip]=\"button.tooltip\">\r\n <!-- icon -->\r\n <lf-icon\r\n [matIcon]=\"button.matIcon\"\r\n [svgIcon]=\"button.svgIcon\"\r\n [outlineIcon]=\"button.outlineIcon\"></lf-icon>\r\n </button>\r\n }\r\n }\r\n </div>\r\n </mat-menu>\r\n }\r\n</ng-template>\r\n", styles: [".lf-header{transition:top .3s;z-index:100;position:fixed;top:0;height:64px}.lf-header .lf-header-menu-button{flex-shrink:0;max-width:144px}.lf-header .lf-header-menu-button ::ng-deep .mdc-button__label{overflow:hidden;text-overflow:ellipsis}.lf-header .lf-header-menu-button.lf-header-menu-button-active{background-color:#fff}.lf-header .lf-header-logo-title-wrapper{flex:0 0 auto;max-width:480px;overflow:hidden;display:flex}.lf-header .lf-header-logo-title-wrapper .lf-header-logo-title-wrapper-link{display:flex;flex-flow:row nowrap;align-items:center;flex:0}.lf-header .lf-header-logo-title-wrapper .lf-header-logo-title-wrapper-link.lf-clickable{cursor:pointer}.lf-header .lf-header-logo-title-wrapper .lf-header-logo{width:40px;height:40px;min-width:40px;min-height:40px}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper{display:flex;flex-flow:column}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-title{font-size:20px;line-height:28px}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-subtitle{font-size:12px;line-height:12px}.lf-header lf-input{z-index:100;flex:1 1 480px}.lf-header lf-input.lf-header-input-mobile{position:fixed!important;left:4px!important;right:4px!important;width:unset!important;max-width:unset!important}.lf-header .spacer{flex:1 0 auto}.lf-menu-icons{display:flex;flex-flow:row wrap;align-items:center;justify-content:flex-start}.lf-header-progress-bar{z-index:100;position:fixed;top:64px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i2.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: InputComponent, selector: "lf-input", inputs: ["inputConfig", "isMobile"], outputs: ["inputSubmitEvent", "inputChangeEvent", "inputPrefixActionEvent"] }, { kind: "component", type: IconComponent, selector: "lf-icon", inputs: ["matIcon", "svgIcon", "outlineIcon", "alignMiddle"] }] }); }
|
|
492
492
|
}
|
|
493
493
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: HeaderComponent, decorators: [{
|
|
494
494
|
type: Component,
|
|
495
|
-
args: [{ selector: 'lf-header', standalone: false, template: "@if (headerConfig && headerConfig.enable) {\r\n <mat-toolbar\r\n class=\"lf-header mat-elevation-z3\"\r\n [class.px-4]=\"!isMobile\"\r\n [class.px-1]=\"isMobile\"\r\n [ngClass]=\"headerConfig.class\"\r\n color=\"primary\">\r\n <!-- left menu button -->\r\n <ng-container\r\n [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n menuButton: headerConfig.leftMenuButton!,\r\n hideLabel: true,\r\n }\"></ng-container>\r\n <!-- logo & title -->\r\n <div\r\n class=\"lf-header-logo-title-wrapper ml-1 mr-2\"\r\n [class.ml-10]=\"headerConfig.leftMenuButton && !isMobile\">\r\n <!-- link wrapper -->\r\n <div\r\n class=\"lf-header-logo-title-wrapper-link\"\r\n [class.lf-clickable]=\"headerConfig.titleRouterLink\"\r\n [routerLink]=\"headerConfig.titleRouterLink ? [headerConfig.titleRouterLink] : null\">\r\n <!-- svg logo -->\r\n @if (headerConfig.svgLogo) {\r\n <mat-icon\r\n class=\"lf-header-logo\"\r\n [class.mr-3]=\"headerConfig.title\"\r\n [svgIcon]=\"headerConfig.svgLogo!\"></mat-icon>\r\n } @else {\r\n @if (headerConfig.imgLogo) {\r\n <img\r\n class=\"lf-header-logo\"\r\n [class.mr-3]=\"headerConfig.title\"\r\n [src]=\"headerConfig.imgLogo\"\r\n alt=\"Logo\" />\r\n }\r\n }\r\n <!-- img logo -->\r\n <!-- title -->\r\n @if (headerConfig.title) {\r\n <div class=\"lf-header-title-wrapper\">\r\n @if (headerConfig.title) {\r\n <span class=\"lf-header-title\">\r\n {{ headerConfig.title }}\r\n </span>\r\n }\r\n @if (headerConfig.subtitle) {\r\n <span class=\"lf-header-subtitle\">\r\n {{ headerConfig.subtitle }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n <!-- input -->\r\n @if (headerConfig.inputConfig?.enable) {\r\n <div class=\"spacer\"></div>\r\n <lf-input\r\n [class.lf-header-input-mobile]=\"isMobile\"\r\n [class.mx-3]=\"!isMobile\"\r\n [inputConfig]=\"headerConfig.inputConfig!\"\r\n [isMobile]=\"isMobile\"\r\n (inputSubmitEvent)=\"inputSubmitted($event)\"\r\n (inputChangeEvent)=\"inputChanged($event)\"\r\n (inputPrefixActionEvent)=\"headerConfig.inputConfig!.enable = false\"></lf-input>\r\n }\r\n <!-- spacer -->\r\n <div class=\"spacer\"></div>\r\n <!-- right menu buttons -->\r\n @for (button of headerConfig.rightMenuButtons; track button) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n menuButton: button,\r\n }\"></ng-container>\r\n }\r\n </mat-toolbar>\r\n <!-- loading bar -->\r\n @if (headerConfig.loading || (headerConfig.showRouteLoading && routeLoading)) {\r\n <mat-progress-bar\r\n class=\"lf-header-progress-bar\"\r\n color=\"accent\"\r\n mode=\"indeterminate\"></mat-progress-bar>\r\n }\r\n}\r\n\r\n<!-- header menu button -->\r\n<ng-template #menuButtonTemplate let-menuButton=\"menuButton\" let-hideLabel=\"hideLabel\">\r\n @if (menuButton) {\r\n <!-- icon button -->\r\n @if ((menuButton.matIcon || menuButton.svgIcon) && (!menuButton.label || hideLabel)) {\r\n <button\r\n mat-icon-button\r\n class=\"lf-header-menu-button\"\r\n [ngClass]=\"menuButton.class\"\r\n (click)=\"buttonClicked(menuButton.id)\"\r\n [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n [matTooltip]=\"menuButton.tooltip\"\r\n [attr.aria-label]=\"menuButton.id\">\r\n <!-- icon -->\r\n <lf-icon\r\n [matIcon]=\"menuButton.matIcon\"\r\n [svgIcon]=\"menuButton.svgIcon\"\r\n [outlineIcon]=\"menuButton.outlineIcon\"></lf-icon>\r\n </button>\r\n } @else {\r\n @if (!hideLabel) {\r\n <button\r\n mat-button\r\n class=\"lf-header-menu-button\"\r\n [class.lf-header-menu-button-active]=\"isActive(menuButton.id)\"\r\n [ngClass]=\"menuButton.class\"\r\n (click)=\"buttonClicked(menuButton.id)\"\r\n [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n [matTooltip]=\"menuButton.tooltip\">\r\n {{ menuButton.label }}\r\n </button>\r\n }\r\n }\r\n <!-- text button -->\r\n <!-- menu -->\r\n <mat-menu #menu=\"matMenu\">\r\n <!-- label menu buttons -->\r\n @for (button of menuButton.menuButtons; track button) {\r\n <!-- menu button -->\r\n @if (button.label) {\r\n <button\r\n mat-menu-item\r\n [class.lf-header-menu-button-active]=\"isActive(button.id)\"\r\n [ngClass]=\"button.class\"\r\n (click)=\"buttonClicked(button.id)\">\r\n <!-- icon -->\r\n <lf-icon\r\n [matIcon]=\"button.matIcon\"\r\n [svgIcon]=\"button.svgIcon\"\r\n [outlineIcon]=\"button.outlineIcon\"\r\n [alignMiddle]=\"true\"></lf-icon>\r\n <!-- label -->\r\n @if (button.label) {\r\n <span>{{ button.label }}</span>\r\n }\r\n </button>\r\n }\r\n }\r\n <!-- icon menu buttons -->\r\n <div class=\"lf-menu-icons px-1\">\r\n @for (button of menuButton.menuButtons; track button) {\r\n <!-- icon button -->\r\n @if (!button.label && (button.matIcon || button.svgIcon)) {\r\n <button\r\n mat-button\r\n class=\"lf-menu-icon-button\"\r\n [ngClass]=\"button.class\"\r\n (click)=\"buttonClicked(button.id)\"\r\n [matTooltip]=\"button.tooltip\">\r\n <!-- icon -->\r\n <lf-icon\r\n [matIcon]=\"button.matIcon\"\r\n [svgIcon]=\"button.svgIcon\"\r\n [outlineIcon]=\"button.outlineIcon\"
|
|
495
|
+
args: [{ selector: 'lf-header', standalone: false, template: "@if (headerConfig && headerConfig.enable) {\r\n <mat-toolbar\r\n class=\"lf-header mat-elevation-z3\"\r\n [class.px-4]=\"!isMobile\"\r\n [class.px-1]=\"isMobile\"\r\n [ngClass]=\"headerConfig.class\"\r\n color=\"primary\">\r\n <!-- left menu button -->\r\n <ng-container\r\n [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n menuButton: headerConfig.leftMenuButton!,\r\n hideLabel: true,\r\n }\"></ng-container>\r\n <!-- logo & title -->\r\n <div\r\n class=\"lf-header-logo-title-wrapper ml-1 mr-2\"\r\n [class.ml-10]=\"headerConfig.leftMenuButton && !isMobile\">\r\n <!-- link wrapper -->\r\n <div\r\n class=\"lf-header-logo-title-wrapper-link\"\r\n [class.lf-clickable]=\"headerConfig.titleRouterLink\"\r\n [routerLink]=\"headerConfig.titleRouterLink ? [headerConfig.titleRouterLink] : null\">\r\n <!-- svg logo -->\r\n @if (headerConfig.svgLogo) {\r\n <mat-icon\r\n class=\"lf-header-logo\"\r\n [class.mr-3]=\"headerConfig.title\"\r\n [svgIcon]=\"headerConfig.svgLogo!\"></mat-icon>\r\n } @else {\r\n @if (headerConfig.imgLogo) {\r\n <img\r\n class=\"lf-header-logo\"\r\n [class.mr-3]=\"headerConfig.title\"\r\n [src]=\"headerConfig.imgLogo\"\r\n alt=\"Logo\" />\r\n }\r\n }\r\n <!-- img logo -->\r\n <!-- title -->\r\n @if (headerConfig.title) {\r\n <div class=\"lf-header-title-wrapper\">\r\n @if (headerConfig.title) {\r\n <span class=\"lf-header-title\">\r\n {{ headerConfig.title }}\r\n </span>\r\n }\r\n @if (headerConfig.subtitle) {\r\n <span class=\"lf-header-subtitle\">\r\n {{ headerConfig.subtitle }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n <!-- input -->\r\n @if (headerConfig.inputConfig?.enable) {\r\n <div class=\"spacer\"></div>\r\n <lf-input\r\n [class.lf-header-input-mobile]=\"isMobile\"\r\n [class.mx-3]=\"!isMobile\"\r\n [inputConfig]=\"headerConfig.inputConfig!\"\r\n [isMobile]=\"isMobile\"\r\n (inputSubmitEvent)=\"inputSubmitted($event)\"\r\n (inputChangeEvent)=\"inputChanged($event)\"\r\n (inputPrefixActionEvent)=\"headerConfig.inputConfig!.enable = false\"></lf-input>\r\n }\r\n <!-- spacer -->\r\n <div class=\"spacer\"></div>\r\n <!-- right menu buttons -->\r\n @for (button of headerConfig.rightMenuButtons; track button) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n menuButton: button,\r\n }\"></ng-container>\r\n }\r\n </mat-toolbar>\r\n <!-- loading bar -->\r\n @if (headerConfig.loading || (headerConfig.showRouteLoading && routeLoading)) {\r\n <mat-progress-bar\r\n class=\"lf-header-progress-bar\"\r\n color=\"accent\"\r\n mode=\"indeterminate\"></mat-progress-bar>\r\n }\r\n}\r\n\r\n<!-- header menu button -->\r\n<ng-template #menuButtonTemplate let-menuButton=\"menuButton\" let-hideLabel=\"hideLabel\">\r\n @if (menuButton) {\r\n <!-- icon button -->\r\n @if ((menuButton.matIcon || menuButton.svgIcon) && (!menuButton.label || hideLabel)) {\r\n <button\r\n mat-icon-button\r\n class=\"lf-header-menu-button\"\r\n [ngClass]=\"menuButton.class\"\r\n (click)=\"buttonClicked(menuButton.id)\"\r\n [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n [matTooltip]=\"menuButton.tooltip\"\r\n [attr.aria-label]=\"menuButton.id\">\r\n <!-- icon -->\r\n <lf-icon\r\n [matIcon]=\"menuButton.matIcon\"\r\n [svgIcon]=\"menuButton.svgIcon\"\r\n [outlineIcon]=\"menuButton.outlineIcon\"></lf-icon>\r\n </button>\r\n } @else {\r\n @if (!hideLabel) {\r\n <button\r\n mat-button\r\n class=\"lf-header-menu-button\"\r\n [class.lf-header-menu-button-active]=\"isActive(menuButton.id)\"\r\n [ngClass]=\"menuButton.class\"\r\n (click)=\"buttonClicked(menuButton.id)\"\r\n [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n [matTooltip]=\"menuButton.tooltip\">\r\n <!-- 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) {\r\n <!-- menu button -->\r\n @if (button.label) {\r\n <button\r\n mat-menu-item\r\n [class.lf-header-menu-button-active]=\"isActive(button.id)\"\r\n [ngClass]=\"button.class\"\r\n (click)=\"buttonClicked(button.id)\">\r\n <!-- icon -->\r\n <lf-icon\r\n [matIcon]=\"button.matIcon\"\r\n [svgIcon]=\"button.svgIcon\"\r\n [outlineIcon]=\"button.outlineIcon\"\r\n [alignMiddle]=\"true\"></lf-icon>\r\n <!-- label -->\r\n @if (button.label) {\r\n <span>{{ button.label }}</span>\r\n }\r\n </button>\r\n }\r\n }\r\n <!-- icon menu buttons -->\r\n <div class=\"lf-menu-icons px-1\">\r\n @for (button of menuButton.menuButtons; track button) {\r\n <!-- icon button -->\r\n @if (!button.label && (button.matIcon || button.svgIcon)) {\r\n <button\r\n mat-icon-button\r\n class=\"lf-menu-icon-button\"\r\n [ngClass]=\"button.class\"\r\n (click)=\"buttonClicked(button.id)\"\r\n [matTooltip]=\"button.tooltip\">\r\n <!-- icon -->\r\n <lf-icon\r\n [matIcon]=\"button.matIcon\"\r\n [svgIcon]=\"button.svgIcon\"\r\n [outlineIcon]=\"button.outlineIcon\"></lf-icon>\r\n </button>\r\n }\r\n }\r\n </div>\r\n </mat-menu>\r\n }\r\n</ng-template>\r\n", styles: [".lf-header{transition:top .3s;z-index:100;position:fixed;top:0;height:64px}.lf-header .lf-header-menu-button{flex-shrink:0;max-width:144px}.lf-header .lf-header-menu-button ::ng-deep .mdc-button__label{overflow:hidden;text-overflow:ellipsis}.lf-header .lf-header-menu-button.lf-header-menu-button-active{background-color:#fff}.lf-header .lf-header-logo-title-wrapper{flex:0 0 auto;max-width:480px;overflow:hidden;display:flex}.lf-header .lf-header-logo-title-wrapper .lf-header-logo-title-wrapper-link{display:flex;flex-flow:row nowrap;align-items:center;flex:0}.lf-header .lf-header-logo-title-wrapper .lf-header-logo-title-wrapper-link.lf-clickable{cursor:pointer}.lf-header .lf-header-logo-title-wrapper .lf-header-logo{width:40px;height:40px;min-width:40px;min-height:40px}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper{display:flex;flex-flow:column}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-title{font-size:20px;line-height:28px}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-subtitle{font-size:12px;line-height:12px}.lf-header lf-input{z-index:100;flex:1 1 480px}.lf-header lf-input.lf-header-input-mobile{position:fixed!important;left:4px!important;right:4px!important;width:unset!important;max-width:unset!important}.lf-header .spacer{flex:1 0 auto}.lf-menu-icons{display:flex;flex-flow:row wrap;align-items:center;justify-content:flex-start}.lf-header-progress-bar{z-index:100;position:fixed;top:64px}\n"] }]
|
|
496
496
|
}], propDecorators: { headerConfig: [{
|
|
497
497
|
type: Input
|
|
498
498
|
}], isMobile: [{
|