@lukfel/ng-scaffold 20.0.50 → 20.0.51
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.
|
@@ -54,8 +54,8 @@ import * as i2$4 from '@angular/cdk/scrolling';
|
|
|
54
54
|
const CONFIG = new InjectionToken('config');
|
|
55
55
|
|
|
56
56
|
class MaterialModule {
|
|
57
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
58
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.
|
|
57
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: MaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
58
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.13", ngImport: i0, type: MaterialModule, exports: [MatCheckboxModule,
|
|
59
59
|
MatButtonModule,
|
|
60
60
|
MatInputModule,
|
|
61
61
|
MatAutocompleteModule,
|
|
@@ -78,7 +78,7 @@ class MaterialModule {
|
|
|
78
78
|
MatRippleModule,
|
|
79
79
|
PortalModule,
|
|
80
80
|
DragDropModule] }); }
|
|
81
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.
|
|
81
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: MaterialModule, imports: [MatCheckboxModule,
|
|
82
82
|
MatButtonModule,
|
|
83
83
|
MatInputModule,
|
|
84
84
|
MatAutocompleteModule,
|
|
@@ -102,7 +102,7 @@ class MaterialModule {
|
|
|
102
102
|
PortalModule,
|
|
103
103
|
DragDropModule] }); }
|
|
104
104
|
}
|
|
105
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
105
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: MaterialModule, decorators: [{
|
|
106
106
|
type: NgModule,
|
|
107
107
|
args: [{
|
|
108
108
|
declarations: [],
|
|
@@ -137,19 +137,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
137
137
|
}] });
|
|
138
138
|
|
|
139
139
|
class SharedModule {
|
|
140
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
141
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.
|
|
140
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
141
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.13", ngImport: i0, type: SharedModule, imports: [CommonModule,
|
|
142
142
|
FormsModule,
|
|
143
143
|
MaterialModule], exports: [CommonModule,
|
|
144
144
|
FormsModule,
|
|
145
145
|
MaterialModule] }); }
|
|
146
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.
|
|
146
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SharedModule, imports: [CommonModule,
|
|
147
147
|
FormsModule,
|
|
148
148
|
MaterialModule, CommonModule,
|
|
149
149
|
FormsModule,
|
|
150
150
|
MaterialModule] }); }
|
|
151
151
|
}
|
|
152
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
152
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SharedModule, decorators: [{
|
|
153
153
|
type: NgModule,
|
|
154
154
|
args: [{
|
|
155
155
|
imports: [
|
|
@@ -170,10 +170,10 @@ class IconComponent {
|
|
|
170
170
|
this.libraryConfig = inject(CONFIG, { optional: true });
|
|
171
171
|
this.verticalAlign = null;
|
|
172
172
|
}
|
|
173
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
174
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
173
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
174
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: IconComponent, isStandalone: true, selector: "lf-icon", inputs: { matIcon: "matIcon", svgIcon: "svgIcon", verticalAlign: "verticalAlign" }, ngImport: i0, template: "<!-- mat icon -->\r\n@if (matIcon) {\r\n <mat-icon\r\n class=\"lf-icon\"\r\n [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\"\r\n [style.vertical-align]=\"verticalAlign\">\r\n {{ matIcon }}\r\n </mat-icon>\r\n <!-- svg icon -->\r\n} @else if (svgIcon) {\r\n <mat-icon class=\"lf-icon\" [svgIcon]=\"svgIcon\" [style.vertical-align]=\"verticalAlign\"></mat-icon>\r\n}\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
175
175
|
}
|
|
176
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
176
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: IconComponent, decorators: [{
|
|
177
177
|
type: Component,
|
|
178
178
|
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]=\"libraryConfig?.outlineIcons\"\r\n [style.vertical-align]=\"verticalAlign\">\r\n {{ matIcon }}\r\n </mat-icon>\r\n <!-- svg icon -->\r\n} @else if (svgIcon) {\r\n <mat-icon class=\"lf-icon\" [svgIcon]=\"svgIcon\" [style.vertical-align]=\"verticalAlign\"></mat-icon>\r\n}\r\n", styles: [":host{display:contents}\n"] }]
|
|
179
179
|
}], propDecorators: { matIcon: [{
|
|
@@ -202,8 +202,8 @@ class BottomBarComponent {
|
|
|
202
202
|
closeClicked(closeButtonId) {
|
|
203
203
|
this.bottomBarCloseClickEvent.emit(closeButtonId);
|
|
204
204
|
}
|
|
205
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
206
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
205
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: BottomBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
206
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", 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 lf-transitions 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{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
207
|
trigger('slideUpDown', [
|
|
208
208
|
state('void', style({ transform: 'translateY(100%)' })),
|
|
209
209
|
state('*', style({ transform: 'translateY(0)' })),
|
|
@@ -212,7 +212,7 @@ class BottomBarComponent {
|
|
|
212
212
|
])
|
|
213
213
|
] }); }
|
|
214
214
|
}
|
|
215
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
215
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: BottomBarComponent, decorators: [{
|
|
216
216
|
type: Component,
|
|
217
217
|
args: [{ selector: 'lf-bottom-bar', animations: [
|
|
218
218
|
trigger('slideUpDown', [
|
|
@@ -247,10 +247,10 @@ class ContentTitleCardComponent {
|
|
|
247
247
|
backButtonClicked() {
|
|
248
248
|
this.backButtonClickEvent.emit();
|
|
249
249
|
}
|
|
250
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
251
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
250
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ContentTitleCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
251
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: ContentTitleCardComponent, isStandalone: false, selector: "lf-content-title-card", inputs: { libraryConfig: "libraryConfig", contentTitleCardConfig: "contentTitleCardConfig", isMobile: "isMobile", routeHistory: "routeHistory" }, outputs: { backButtonClickEvent: "backButtonClickEvent" }, ngImport: i0, template: "@if (contentTitleCardConfig && contentTitleCardConfig.enable) {\r\n <mat-card\r\n class=\"lf-content-title-card mat-elevation-z2 px-4\"\r\n [ngClass]=\"contentTitleCardConfig.cssClass\">\r\n <!-- back button -->\r\n @if (contentTitleCardConfig.showBackButton && routeHistory.length > 1) {\r\n <button mat-icon-button color=\"accent\" (click)=\"backButtonClicked()\">\r\n <mat-icon>arrow_back_ios</mat-icon>\r\n </button>\r\n }\r\n <!-- spacer -->\r\n <div style=\"flex: 1 1 auto\"></div>\r\n <!-- label -->\r\n <span class=\"lf-content-title-card-label\">\r\n {{ contentTitleCardConfig.label || \"\" }}\r\n </span>\r\n <!-- spacer -->\r\n <div style=\"flex: 1 1 auto\"></div>\r\n <!-- empty button spacer -->\r\n <div\r\n [style.width]=\"\r\n contentTitleCardConfig.showBackButton && routeHistory.length > 1 ? '48px' : '0px'\r\n \"></div>\r\n </mat-card>\r\n}\r\n", styles: [".lf-content-title-card{z-index:98;height:80px;display:flex;flex-flow:row nowrap;align-items:center;border-radius:0}.lf-content-title-card .lf-content-title-card-label{font-size:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
252
252
|
}
|
|
253
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
253
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ContentTitleCardComponent, decorators: [{
|
|
254
254
|
type: Component,
|
|
255
255
|
args: [{ selector: 'lf-content-title-card', standalone: false, template: "@if (contentTitleCardConfig && contentTitleCardConfig.enable) {\r\n <mat-card\r\n class=\"lf-content-title-card mat-elevation-z2 px-4\"\r\n [ngClass]=\"contentTitleCardConfig.cssClass\">\r\n <!-- back button -->\r\n @if (contentTitleCardConfig.showBackButton && routeHistory.length > 1) {\r\n <button mat-icon-button color=\"accent\" (click)=\"backButtonClicked()\">\r\n <mat-icon>arrow_back_ios</mat-icon>\r\n </button>\r\n }\r\n <!-- spacer -->\r\n <div style=\"flex: 1 1 auto\"></div>\r\n <!-- label -->\r\n <span class=\"lf-content-title-card-label\">\r\n {{ contentTitleCardConfig.label || \"\" }}\r\n </span>\r\n <!-- spacer -->\r\n <div style=\"flex: 1 1 auto\"></div>\r\n <!-- empty button spacer -->\r\n <div\r\n [style.width]=\"\r\n contentTitleCardConfig.showBackButton && routeHistory.length > 1 ? '48px' : '0px'\r\n \"></div>\r\n </mat-card>\r\n}\r\n", styles: [".lf-content-title-card{z-index:98;height:80px;display:flex;flex-flow:row nowrap;align-items:center;border-radius:0}.lf-content-title-card .lf-content-title-card-label{font-size:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
|
|
256
256
|
}], propDecorators: { libraryConfig: [{
|
|
@@ -286,10 +286,10 @@ class DrawerComponent {
|
|
|
286
286
|
}
|
|
287
287
|
;
|
|
288
288
|
}
|
|
289
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
290
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
289
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
290
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", 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\r\n class=\"lf-drawer-container lf-transitions\"\r\n [ngClass]=\"drawerConfig.cssClass\">\r\n <!-- drawer -->\r\n <mat-sidenav\r\n class=\"lf-drawer mat-elevation-z2\"\r\n [class.mobile]=\"isMobile\"\r\n [mode]=\"isMobile ? 'over' : 'side'\"\r\n [opened]=\"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{z-index:97;width:208px}.lf-drawer-container .lf-drawer.mobile{z-index:101}\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"] }] }); }
|
|
291
291
|
}
|
|
292
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
292
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: DrawerComponent, decorators: [{
|
|
293
293
|
type: Component,
|
|
294
294
|
args: [{ selector: 'lf-drawer', standalone: false, template: "@if (drawerConfig && drawerConfig.enable) {\r\n <mat-sidenav-container\r\n class=\"lf-drawer-container lf-transitions\"\r\n [ngClass]=\"drawerConfig.cssClass\">\r\n <!-- drawer -->\r\n <mat-sidenav\r\n class=\"lf-drawer mat-elevation-z2\"\r\n [class.mobile]=\"isMobile\"\r\n [mode]=\"isMobile ? 'over' : 'side'\"\r\n [opened]=\"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{z-index:97;width:208px}.lf-drawer-container .lf-drawer.mobile{z-index:101}\n"] }]
|
|
295
295
|
}], propDecorators: { libraryConfig: [{
|
|
@@ -345,10 +345,10 @@ class FloatingButtonComponent {
|
|
|
345
345
|
}
|
|
346
346
|
return bottomPosition;
|
|
347
347
|
}
|
|
348
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
349
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
348
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: FloatingButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
349
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", 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 lf-transitions\"\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{z-index:100;position:fixed}.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"] }] }); }
|
|
350
350
|
}
|
|
351
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
351
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: FloatingButtonComponent, decorators: [{
|
|
352
352
|
type: Component,
|
|
353
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 lf-transitions\"\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{z-index:100;position:fixed}.lf-floating-button.left{left:24px}.lf-floating-button.center{left:50%;transform:translate(-50%)}.lf-floating-button.right{right:24px}\n"] }]
|
|
354
354
|
}], propDecorators: { libraryConfig: [{
|
|
@@ -372,10 +372,10 @@ class FooterComponent {
|
|
|
372
372
|
this.libraryConfig = null;
|
|
373
373
|
this.footerConfig = null;
|
|
374
374
|
}
|
|
375
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
376
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
375
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
376
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: FooterComponent, isStandalone: false, selector: "lf-footer", inputs: { libraryConfig: "libraryConfig", footerConfig: "footerConfig" }, ngImport: i0, template: "@if (footerConfig && footerConfig.enable) {\r\n <mat-card class=\"lf-footer lf-transitions mat-elevation-z2 p-4\" [ngClass]=\"footerConfig.cssClass\">\r\n <!-- svg logo -->\r\n @if (footerConfig.svgLogo) {\r\n <mat-icon\r\n class=\"lf-footer-logo mb-4\"\r\n color=\"primary\"\r\n [svgIcon]=\"footerConfig.svgLogo!\"></mat-icon>\r\n } @else {\r\n @if (footerConfig.imgLogo) {\r\n <img class=\"lf-footer-logo mb-4\" [src]=\"footerConfig.imgLogo\" alt=\"Logo\" />\r\n }\r\n }\r\n <!-- img logo -->\r\n <!-- links -->\r\n @if (footerConfig.links) {\r\n <div class=\"lf-footer-links mb-4\">\r\n @for (link of footerConfig.links; track $index; let i = $index) {\r\n <div class=\"lf-footer-link\" [class.mr-2]=\"i < footerConfig.links!.length - 1\">\r\n @if (link.routerLink) {\r\n <a [routerLink]=\"[link.routerLink]\">{{ link.label || \"\" }}</a>\r\n } @else {\r\n <a [href]=\"link.href\" [target]=\"link.externalTab ? '_blank' : null\">\r\n {{ link.label }}\r\n </a>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n <!-- copyright -->\r\n @if (footerConfig.copyright) {\r\n <span class=\"lf-footer-copyright\">\r\n {{ footerConfig.copyright }}\r\n </span>\r\n }\r\n </mat-card>\r\n}\r\n", styles: [".lf-footer{overflow:hidden;flex-flow:column;align-items:center;justify-content:center;min-height:100px;border-radius:0;border-top:solid 1px rgba(0,0,0,.12)}.lf-footer .lf-footer-logo{width:96px;height:96px}.lf-footer .lf-footer-links{display:flex;flex-flow:row wrap;align-items:center;justify-content:center}.lf-footer .lf-footer-links .lf-footer-link a{text-decoration:none;color:unset;font-size:12px}.lf-footer .lf-footer-links .lf-footer-link a:hover{color:var(--color-primary)}.lf-footer .lf-footer-copyright{font-size:12px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
377
377
|
}
|
|
378
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
378
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: FooterComponent, decorators: [{
|
|
379
379
|
type: Component,
|
|
380
380
|
args: [{ selector: 'lf-footer', standalone: false, template: "@if (footerConfig && footerConfig.enable) {\r\n <mat-card class=\"lf-footer lf-transitions mat-elevation-z2 p-4\" [ngClass]=\"footerConfig.cssClass\">\r\n <!-- svg logo -->\r\n @if (footerConfig.svgLogo) {\r\n <mat-icon\r\n class=\"lf-footer-logo mb-4\"\r\n color=\"primary\"\r\n [svgIcon]=\"footerConfig.svgLogo!\"></mat-icon>\r\n } @else {\r\n @if (footerConfig.imgLogo) {\r\n <img class=\"lf-footer-logo mb-4\" [src]=\"footerConfig.imgLogo\" alt=\"Logo\" />\r\n }\r\n }\r\n <!-- img logo -->\r\n <!-- links -->\r\n @if (footerConfig.links) {\r\n <div class=\"lf-footer-links mb-4\">\r\n @for (link of footerConfig.links; track $index; let i = $index) {\r\n <div class=\"lf-footer-link\" [class.mr-2]=\"i < footerConfig.links!.length - 1\">\r\n @if (link.routerLink) {\r\n <a [routerLink]=\"[link.routerLink]\">{{ link.label || \"\" }}</a>\r\n } @else {\r\n <a [href]=\"link.href\" [target]=\"link.externalTab ? '_blank' : null\">\r\n {{ link.label }}\r\n </a>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n <!-- copyright -->\r\n @if (footerConfig.copyright) {\r\n <span class=\"lf-footer-copyright\">\r\n {{ footerConfig.copyright }}\r\n </span>\r\n }\r\n </mat-card>\r\n}\r\n", styles: [".lf-footer{overflow:hidden;flex-flow:column;align-items:center;justify-content:center;min-height:100px;border-radius:0;border-top:solid 1px rgba(0,0,0,.12)}.lf-footer .lf-footer-logo{width:96px;height:96px}.lf-footer .lf-footer-links{display:flex;flex-flow:row wrap;align-items:center;justify-content:center}.lf-footer .lf-footer-links .lf-footer-link a{text-decoration:none;color:unset;font-size:12px}.lf-footer .lf-footer-links .lf-footer-link a:hover{color:var(--color-primary)}.lf-footer .lf-footer-copyright{font-size:12px}\n"] }]
|
|
381
381
|
}], propDecorators: { libraryConfig: [{
|
|
@@ -431,10 +431,10 @@ class InputComponent {
|
|
|
431
431
|
this.inputValue = '';
|
|
432
432
|
this.inputChangeEvent.emit(this.inputValue);
|
|
433
433
|
}
|
|
434
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
435
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
434
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
435
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: InputComponent, isStandalone: true, selector: "lf-input", inputs: { inputConfig: "inputConfig", isMobile: "isMobile" }, outputs: { inputSubmitEvent: "inputSubmitEvent", inputChangeEvent: "inputChangeEvent", inputPrefixActionEvent: "inputPrefixActionEvent" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "@if (inputConfig) {\r\n <mat-form-field class=\"lf-input\" appearance=\"fill\" [class.lf-hide-hint]=\"!inputConfig.hint\">\r\n <mat-label>{{ inputConfig.label || \"Search\" }}</mat-label>\r\n @if (inputConfig.hint) {\r\n <mat-hint>{{ inputConfig.hint }}</mat-hint>\r\n }\r\n <input\r\n matInput\r\n type=\"text\"\r\n [(ngModel)]=\"inputValue\"\r\n [disabled]=\"inputConfig.disabled!\"\r\n (keyup.enter)=\"inputSubmitted(inputValue)\"\r\n (ngModelChange)=\"inputChanged($event)\"\r\n #input />\r\n @if (isMobile) {\r\n <button mat-icon-button matPrefix color=\"accent\" (click)=\"inputPrefixAction()\">\r\n <mat-icon>arrow_back</mat-icon>\r\n </button>\r\n }\r\n @if (inputValue) {\r\n <button class=\"lf-input-close-button\" mat-icon-button matSuffix (click)=\"clearInput()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n }\r\n @if (inputConfig.matIconSubmit) {\r\n <button\r\n mat-icon-button\r\n matSuffix\r\n color=\"accent\"\r\n type=\"submit\"\r\n (click)=\"inputSubmitted(inputValue)\">\r\n <mat-icon>\r\n {{ inputConfig.matIconSubmit }}\r\n </mat-icon>\r\n </button>\r\n }\r\n </mat-form-field>\r\n}\r\n", styles: [".lf-input{width:100%}.lf-input ::ng-deep .mdc-text-field{border-radius:28px!important}.lf-input ::ng-deep .mdc-line-ripple:after{border-bottom-width:0!important}.lf-input ::ng-deep .mdc-line-ripple:before{border-bottom-width:0!important}.lf-input .lf-input-close-button{color:#808080cc}.lf-input.lf-hide-hint ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i3$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
436
436
|
}
|
|
437
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
437
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: InputComponent, decorators: [{
|
|
438
438
|
type: Component,
|
|
439
439
|
args: [{ selector: 'lf-input', standalone: true, imports: [SharedModule], template: "@if (inputConfig) {\r\n <mat-form-field class=\"lf-input\" appearance=\"fill\" [class.lf-hide-hint]=\"!inputConfig.hint\">\r\n <mat-label>{{ inputConfig.label || \"Search\" }}</mat-label>\r\n @if (inputConfig.hint) {\r\n <mat-hint>{{ inputConfig.hint }}</mat-hint>\r\n }\r\n <input\r\n matInput\r\n type=\"text\"\r\n [(ngModel)]=\"inputValue\"\r\n [disabled]=\"inputConfig.disabled!\"\r\n (keyup.enter)=\"inputSubmitted(inputValue)\"\r\n (ngModelChange)=\"inputChanged($event)\"\r\n #input />\r\n @if (isMobile) {\r\n <button mat-icon-button matPrefix color=\"accent\" (click)=\"inputPrefixAction()\">\r\n <mat-icon>arrow_back</mat-icon>\r\n </button>\r\n }\r\n @if (inputValue) {\r\n <button class=\"lf-input-close-button\" mat-icon-button matSuffix (click)=\"clearInput()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n }\r\n @if (inputConfig.matIconSubmit) {\r\n <button\r\n mat-icon-button\r\n matSuffix\r\n color=\"accent\"\r\n type=\"submit\"\r\n (click)=\"inputSubmitted(inputValue)\">\r\n <mat-icon>\r\n {{ inputConfig.matIconSubmit }}\r\n </mat-icon>\r\n </button>\r\n }\r\n </mat-form-field>\r\n}\r\n", styles: [".lf-input{width:100%}.lf-input ::ng-deep .mdc-text-field{border-radius:28px!important}.lf-input ::ng-deep .mdc-line-ripple:after{border-bottom-width:0!important}.lf-input ::ng-deep .mdc-line-ripple:before{border-bottom-width:0!important}.lf-input .lf-input-close-button{color:#808080cc}.lf-input.lf-hide-hint ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}\n"] }]
|
|
440
440
|
}], propDecorators: { input: [{
|
|
@@ -493,8 +493,8 @@ class HeaderComponent {
|
|
|
493
493
|
const route = this.currentRoute.substring(this.currentRoute.indexOf('/') + 1);
|
|
494
494
|
return route === id;
|
|
495
495
|
}
|
|
496
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
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 lf-transitions mat-elevation-z3\"\r\n [class.px-4]=\"!isMobile\"\r\n [class.px-1]=\"isMobile\"\r\n [ngClass]=\"headerConfig.cssClass\"\r\n color=\"primary\">\r\n <!-- left menu button -->\r\n <ng-container\r\n [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n menuButton: headerConfig.leftMenuButton!,\r\n hideLabel: true,\r\n }\"></ng-container>\r\n <!-- logo & title -->\r\n <div\r\n class=\"lf-header-logo-title-wrapper ml-1 mr-2\"\r\n [class.ml-10]=\"headerConfig.leftMenuButton && !isMobile\">\r\n <!-- link wrapper -->\r\n <div\r\n class=\"lf-header-logo-title-wrapper-link\"\r\n [class.lf-clickable]=\"headerConfig.titleRouterLink\"\r\n [routerLink]=\"headerConfig.titleRouterLink ? [headerConfig.titleRouterLink] : null\">\r\n <!-- svg logo -->\r\n @if (headerConfig.svgLogo) {\r\n <mat-icon\r\n class=\"lf-header-logo\"\r\n [class.mr-3]=\"headerConfig.title\"\r\n [svgIcon]=\"headerConfig.svgLogo!\"></mat-icon>\r\n } @else {\r\n @if (headerConfig.imgLogo) {\r\n <img\r\n class=\"lf-header-logo\"\r\n [class.mr-3]=\"headerConfig.title\"\r\n [src]=\"headerConfig.imgLogo\"\r\n alt=\"Logo\" />\r\n }\r\n }\r\n <!-- img logo -->\r\n <!-- title -->\r\n @if (headerConfig.title) {\r\n <div class=\"lf-header-title-wrapper\">\r\n @if (headerConfig.title) {\r\n <span class=\"lf-header-title\">\r\n {{ headerConfig.title }}\r\n </span>\r\n }\r\n @if (headerConfig.subtitle) {\r\n <span class=\"lf-header-subtitle\">\r\n {{ headerConfig.subtitle }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n <!-- input -->\r\n @if (headerConfig.inputConfig?.enable) {\r\n <div class=\"spacer\"></div>\r\n <lf-input\r\n [class.lf-header-input-mobile]=\"isMobile\"\r\n [class.mx-3]=\"!isMobile\"\r\n [inputConfig]=\"headerConfig.inputConfig!\"\r\n [isMobile]=\"isMobile\"\r\n (inputSubmitEvent)=\"inputSubmitted($event)\"\r\n (inputChangeEvent)=\"inputChanged($event)\"\r\n (inputPrefixActionEvent)=\"inputClosed()\"></lf-input>\r\n }\r\n <!-- spacer -->\r\n <div class=\"spacer\"></div>\r\n <!-- right menu buttons -->\r\n @for (button of headerConfig.rightMenuButtons; track button.id) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n menuButton: button,\r\n }\"></ng-container>\r\n }\r\n </mat-toolbar>\r\n <!-- loading bar -->\r\n @if (headerConfig.loading || (headerConfig.showRouteLoading && routeLoading)) {\r\n <mat-progress-bar\r\n class=\"lf-header-progress-bar\"\r\n color=\"accent\"\r\n mode=\"indeterminate\"></mat-progress-bar>\r\n }\r\n}\r\n\r\n<!-- header menu button -->\r\n<ng-template #menuButtonTemplate let-menuButton=\"menuButton\" let-hideLabel=\"hideLabel\">\r\n @if (menuButton) {\r\n <!-- icon button -->\r\n @if ((menuButton.matIcon || menuButton.svgIcon) && (!menuButton.label || hideLabel)) {\r\n <button\r\n mat-icon-button\r\n class=\"lf-header-menu-button\"\r\n [ngClass]=\"menuButton.cssClass\"\r\n (click)=\"buttonClicked(menuButton.id)\"\r\n [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n [matTooltip]=\"menuButton.tooltip\"\r\n [attr.aria-label]=\"menuButton.id\">\r\n <!-- icon -->\r\n <lf-icon [matIcon]=\"menuButton.matIcon\" [svgIcon]=\"menuButton.svgIcon\"></lf-icon>\r\n </button>\r\n } @else {\r\n @if (!hideLabel) {\r\n <button\r\n mat-button\r\n class=\"lf-header-menu-button\"\r\n [class.lf-header-menu-button-active]=\"isActive(menuButton.id)\"\r\n [ngClass]=\"menuButton.cssClass\"\r\n (click)=\"buttonClicked(menuButton.id)\"\r\n [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n [matTooltip]=\"menuButton.tooltip\">\r\n <!-- label -->\r\n {{ menuButton.label }}\r\n </button>\r\n }\r\n }\r\n <!-- text button -->\r\n <!-- menu -->\r\n <mat-menu #menu=\"matMenu\">\r\n <!-- label menu buttons -->\r\n @for (button of menuButton.menuButtons; track button.id) {\r\n <!-- menu button -->\r\n @if (button.label) {\r\n <button\r\n mat-menu-item\r\n [class.lf-header-menu-button-active]=\"isActive(button.id)\"\r\n [ngClass]=\"button.cssClass\"\r\n (click)=\"buttonClicked(button.id)\">\r\n <!-- icon -->\r\n <lf-icon\r\n [matIcon]=\"button.matIcon\"\r\n [svgIcon]=\"button.svgIcon\"\r\n verticalAlign=\"bottom\"></lf-icon>\r\n <!-- label -->\r\n @if (button.label) {\r\n <span>{{ button.label }}</span>\r\n }\r\n </button>\r\n }\r\n }\r\n <!-- icon menu buttons -->\r\n <div mat-menu-item class=\"lf-menu-icons px-1\">\r\n @for (button of menuButton.menuButtons; track button.id) {\r\n <!-- icon button -->\r\n @if (!button.label && (button.matIcon || button.svgIcon)) {\r\n <button\r\n mat-icon-button\r\n class=\"lf-menu-icon-button\"\r\n [ngClass]=\"button.cssClass\"\r\n (click)=\"buttonClicked(button.id)\"\r\n [matTooltip]=\"button.tooltip\"\r\n tabindex=\"0\">\r\n <!-- icon -->\r\n <lf-icon\r\n [matIcon]=\"button.matIcon\"\r\n [svgIcon]=\"button.svgIcon\"\r\n verticalAlign=\"top\"></lf-icon>\r\n </button>\r\n }\r\n }\r\n </div>\r\n </mat-menu>\r\n }\r\n</ng-template>\r\n", styles: [".lf-header{z-index: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: [
|
|
496
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
497
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: HeaderComponent, isStandalone: false, selector: "lf-header", inputs: { libraryConfig: "libraryConfig", headerConfig: "headerConfig", isMobile: "isMobile", routeLoading: "routeLoading", currentRoute: "currentRoute" }, outputs: { headerConfigUpdateEvent: "headerConfigUpdateEvent", headerButtonClickEvent: "headerButtonClickEvent", headerInputSubmitEvent: "headerInputSubmitEvent", headerInputChangeEvent: "headerInputChangeEvent" }, ngImport: i0, template: "@if (headerConfig && headerConfig.enable) {\r\n <mat-toolbar\r\n class=\"lf-header lf-transitions mat-elevation-z3\"\r\n [class.px-4]=\"!isMobile\"\r\n [class.px-1]=\"isMobile\"\r\n [ngClass]=\"headerConfig.cssClass\"\r\n color=\"primary\">\r\n <!-- left menu button -->\r\n <ng-container\r\n [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n menuButton: headerConfig.leftMenuButton!,\r\n hideLabel: true,\r\n }\"></ng-container>\r\n <!-- logo & title -->\r\n <div\r\n class=\"lf-header-logo-title-wrapper ml-1 mr-2\"\r\n [class.ml-10]=\"headerConfig.leftMenuButton && !isMobile\">\r\n <!-- link wrapper -->\r\n <div\r\n class=\"lf-header-logo-title-wrapper-link\"\r\n [class.lf-clickable]=\"headerConfig.titleRouterLink\"\r\n [routerLink]=\"headerConfig.titleRouterLink ? [headerConfig.titleRouterLink] : null\">\r\n <!-- svg logo -->\r\n @if (headerConfig.svgLogo) {\r\n <mat-icon\r\n class=\"lf-header-logo\"\r\n [class.mr-3]=\"headerConfig.title\"\r\n [svgIcon]=\"headerConfig.svgLogo!\"></mat-icon>\r\n } @else {\r\n @if (headerConfig.imgLogo) {\r\n <img\r\n class=\"lf-header-logo\"\r\n [class.mr-3]=\"headerConfig.title\"\r\n [src]=\"headerConfig.imgLogo\"\r\n alt=\"Logo\" />\r\n }\r\n }\r\n <!-- img logo -->\r\n <!-- title -->\r\n @if (headerConfig.title) {\r\n <div class=\"lf-header-title-wrapper\">\r\n @if (headerConfig.title) {\r\n <span class=\"lf-header-title\">\r\n {{ headerConfig.title }}\r\n </span>\r\n }\r\n @if (headerConfig.subtitle) {\r\n <span class=\"lf-header-subtitle\">\r\n {{ headerConfig.subtitle }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n <!-- input -->\r\n @if (headerConfig.inputConfig?.enable) {\r\n <div class=\"spacer\"></div>\r\n <lf-input\r\n [class.lf-header-input-mobile]=\"isMobile\"\r\n [class.mx-3]=\"!isMobile\"\r\n [inputConfig]=\"headerConfig.inputConfig!\"\r\n [isMobile]=\"isMobile\"\r\n (inputSubmitEvent)=\"inputSubmitted($event)\"\r\n (inputChangeEvent)=\"inputChanged($event)\"\r\n (inputPrefixActionEvent)=\"inputClosed()\"></lf-input>\r\n }\r\n <!-- spacer -->\r\n <div class=\"spacer\"></div>\r\n <!-- right menu buttons -->\r\n @for (button of headerConfig.rightMenuButtons; track button.id) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n menuButton: button,\r\n }\"></ng-container>\r\n }\r\n </mat-toolbar>\r\n <!-- loading bar -->\r\n @if (headerConfig.loading || (headerConfig.showRouteLoading && routeLoading)) {\r\n <mat-progress-bar\r\n class=\"lf-header-progress-bar\"\r\n color=\"accent\"\r\n mode=\"indeterminate\"></mat-progress-bar>\r\n }\r\n}\r\n\r\n<!-- header menu button -->\r\n<ng-template #menuButtonTemplate let-menuButton=\"menuButton\" let-hideLabel=\"hideLabel\">\r\n @if (menuButton) {\r\n <!-- icon button -->\r\n @if ((menuButton.matIcon || menuButton.svgIcon) && (!menuButton.label || hideLabel)) {\r\n <button\r\n mat-icon-button\r\n class=\"lf-header-menu-button\"\r\n [ngClass]=\"menuButton.cssClass\"\r\n (click)=\"buttonClicked(menuButton.id)\"\r\n [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n [matTooltip]=\"menuButton.tooltip\"\r\n [attr.aria-label]=\"menuButton.id\">\r\n <!-- icon -->\r\n <lf-icon [matIcon]=\"menuButton.matIcon\" [svgIcon]=\"menuButton.svgIcon\"></lf-icon>\r\n </button>\r\n } @else {\r\n @if (!hideLabel) {\r\n <button\r\n mat-button\r\n class=\"lf-header-menu-button\"\r\n [class.lf-header-menu-button-active]=\"isActive(menuButton.id)\"\r\n [ngClass]=\"menuButton.cssClass\"\r\n (click)=\"buttonClicked(menuButton.id)\"\r\n [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n [matTooltip]=\"menuButton.tooltip\">\r\n <!-- label -->\r\n {{ menuButton.label }}\r\n </button>\r\n }\r\n }\r\n <!-- text button -->\r\n <!-- menu -->\r\n <mat-menu #menu=\"matMenu\">\r\n <!-- label menu buttons -->\r\n @for (button of menuButton.menuButtons; track button.id) {\r\n <!-- menu button -->\r\n @if (button.label) {\r\n <button\r\n mat-menu-item\r\n [class.lf-header-menu-button-active]=\"isActive(button.id)\"\r\n [ngClass]=\"button.cssClass\"\r\n (click)=\"buttonClicked(button.id)\">\r\n <!-- icon -->\r\n <lf-icon\r\n [matIcon]=\"button.matIcon\"\r\n [svgIcon]=\"button.svgIcon\"\r\n verticalAlign=\"bottom\"></lf-icon>\r\n <!-- label -->\r\n @if (button.label) {\r\n <span>{{ button.label }}</span>\r\n }\r\n </button>\r\n }\r\n }\r\n <!-- icon menu buttons -->\r\n <div mat-menu-item class=\"lf-menu-icons px-1\">\r\n @for (button of menuButton.menuButtons; track button.id) {\r\n <!-- icon button -->\r\n @if (!button.label && (button.matIcon || button.svgIcon)) {\r\n <button\r\n mat-icon-button\r\n class=\"lf-menu-icon-button\"\r\n [ngClass]=\"button.cssClass\"\r\n (click)=\"buttonClicked(button.id)\"\r\n [matTooltip]=\"button.tooltip\"\r\n tabindex=\"0\">\r\n <!-- icon -->\r\n <lf-icon\r\n [matIcon]=\"button.matIcon\"\r\n [svgIcon]=\"button.svgIcon\"\r\n verticalAlign=\"top\"></lf-icon>\r\n </button>\r\n }\r\n }\r\n </div>\r\n </mat-menu>\r\n }\r\n</ng-template>\r\n", styles: [".lf-header{z-index: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
498
|
trigger('slideDownUp', [
|
|
499
499
|
state('void', style({ transform: 'translateY(-100%)' })),
|
|
500
500
|
state('*', style({ transform: 'translateY(0)' })),
|
|
@@ -503,7 +503,7 @@ class HeaderComponent {
|
|
|
503
503
|
])
|
|
504
504
|
] }); }
|
|
505
505
|
}
|
|
506
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
506
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: HeaderComponent, decorators: [{
|
|
507
507
|
type: Component,
|
|
508
508
|
args: [{ selector: 'lf-header', animations: [
|
|
509
509
|
trigger('slideDownUp', [
|
|
@@ -534,10 +534,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
534
534
|
}] } });
|
|
535
535
|
|
|
536
536
|
class LoadingOverlayComponent {
|
|
537
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
538
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.
|
|
537
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: LoadingOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
538
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.13", type: LoadingOverlayComponent, isStandalone: false, selector: "lf-loading-overlay", ngImport: i0, template: "<div class=\"lf-loading-overlay\">\r\n <mat-spinner class=\"lf-loading-spinner\" color=\"accent\" mode=\"indeterminate\"></mat-spinner>\r\n</div>\r\n", styles: [".lf-loading-overlay{z-index:101;position:fixed;inset:0;height:100%;width:100%;display:flex;align-items:center;justify-content:center;background-color:#00000029}\n"], dependencies: [{ kind: "component", type: i1$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
|
|
539
539
|
}
|
|
540
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
540
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: LoadingOverlayComponent, decorators: [{
|
|
541
541
|
type: Component,
|
|
542
542
|
args: [{ selector: 'lf-loading-overlay', standalone: false, template: "<div class=\"lf-loading-overlay\">\r\n <mat-spinner class=\"lf-loading-spinner\" color=\"accent\" mode=\"indeterminate\"></mat-spinner>\r\n</div>\r\n", styles: [".lf-loading-overlay{z-index:101;position:fixed;inset:0;height:100%;width:100%;display:flex;align-items:center;justify-content:center;background-color:#00000029}\n"] }]
|
|
543
543
|
}] });
|
|
@@ -562,8 +562,8 @@ class NavbarComponent {
|
|
|
562
562
|
const route = this.currentRoute.substring(this.currentRoute.indexOf('/') + 1);
|
|
563
563
|
return route === id;
|
|
564
564
|
}
|
|
565
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
566
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
565
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: NavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
566
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", 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 lf-transitions 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 : \" \"\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
567
|
trigger('responsiveSlide', [
|
|
568
568
|
// States for desktop and mobile
|
|
569
569
|
state('desktop', style({ transform: 'translateX(0)' })),
|
|
@@ -589,7 +589,7 @@ class NavbarComponent {
|
|
|
589
589
|
])
|
|
590
590
|
] }); }
|
|
591
591
|
}
|
|
592
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
592
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: NavbarComponent, decorators: [{
|
|
593
593
|
type: Component,
|
|
594
594
|
args: [{ selector: 'lf-navbar', animations: [
|
|
595
595
|
trigger('responsiveSlide', [
|
|
@@ -635,10 +635,10 @@ class BreakpointService {
|
|
|
635
635
|
.observe([Breakpoints.Large, Breakpoints.Medium, Breakpoints.Small, Breakpoints.XSmall])
|
|
636
636
|
.pipe(distinctUntilChanged());
|
|
637
637
|
}
|
|
638
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
639
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.
|
|
638
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: BreakpointService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
639
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: BreakpointService, providedIn: 'root' }); }
|
|
640
640
|
}
|
|
641
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
641
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: BreakpointService, decorators: [{
|
|
642
642
|
type: Injectable,
|
|
643
643
|
args: [{ providedIn: 'root' }]
|
|
644
644
|
}] });
|
|
@@ -647,10 +647,10 @@ class ConfirmDialogComponent {
|
|
|
647
647
|
constructor() {
|
|
648
648
|
this.config = inject(MAT_DIALOG_DATA);
|
|
649
649
|
}
|
|
650
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
651
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
650
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ConfirmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
651
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: ConfirmDialogComponent, isStandalone: false, selector: "lf-confirm-dialog", ngImport: i0, template: "@if (config) {\r\n @if (config.title) {\r\n <h2 mat-dialog-title>{{ config.title }}</h2>\r\n }\r\n\r\n <mat-dialog-content>\r\n @if (config.message) {\r\n <p>{{ config.message }}</p>\r\n }\r\n </mat-dialog-content>\r\n\r\n <mat-dialog-actions align=\"end\">\r\n @if (config.closeLabel) {\r\n <button mat-button [mat-dialog-close]=\"false\">\r\n {{ config.closeLabel }}\r\n </button>\r\n }\r\n @if (config.confirmLabel) {\r\n <button mat-button color=\"primary\" [mat-dialog-close]=\"true\">\r\n {{ config.confirmLabel }}\r\n </button>\r\n }\r\n </mat-dialog-actions>\r\n}\r\n", styles: [""], dependencies: [{ kind: "component", type: i2.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i2$3.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i2$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] }); }
|
|
652
652
|
}
|
|
653
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
653
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
|
|
654
654
|
type: Component,
|
|
655
655
|
args: [{ selector: 'lf-confirm-dialog', standalone: false, template: "@if (config) {\r\n @if (config.title) {\r\n <h2 mat-dialog-title>{{ config.title }}</h2>\r\n }\r\n\r\n <mat-dialog-content>\r\n @if (config.message) {\r\n <p>{{ config.message }}</p>\r\n }\r\n </mat-dialog-content>\r\n\r\n <mat-dialog-actions align=\"end\">\r\n @if (config.closeLabel) {\r\n <button mat-button [mat-dialog-close]=\"false\">\r\n {{ config.closeLabel }}\r\n </button>\r\n }\r\n @if (config.confirmLabel) {\r\n <button mat-button color=\"primary\" [mat-dialog-close]=\"true\">\r\n {{ config.confirmLabel }}\r\n </button>\r\n }\r\n </mat-dialog-actions>\r\n}\r\n" }]
|
|
656
656
|
}] });
|
|
@@ -699,10 +699,10 @@ class DialogService {
|
|
|
699
699
|
});
|
|
700
700
|
return firstValueFrom(dialogRef.afterClosed());
|
|
701
701
|
}
|
|
702
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
703
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.
|
|
702
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: DialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
703
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: DialogService, providedIn: 'root' }); }
|
|
704
704
|
}
|
|
705
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
705
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: DialogService, decorators: [{
|
|
706
706
|
type: Injectable,
|
|
707
707
|
args: [{
|
|
708
708
|
providedIn: 'root'
|
|
@@ -746,10 +746,10 @@ class Logger {
|
|
|
746
746
|
console.error(message, ...args); // eslint-disable-line no-console
|
|
747
747
|
}
|
|
748
748
|
}
|
|
749
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
750
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.
|
|
749
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: Logger, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
750
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: Logger, providedIn: 'root' }); }
|
|
751
751
|
}
|
|
752
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
752
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: Logger, decorators: [{
|
|
753
753
|
type: Injectable,
|
|
754
754
|
args: [{ providedIn: 'root' }]
|
|
755
755
|
}] });
|
|
@@ -875,10 +875,10 @@ class LocalStorageService {
|
|
|
875
875
|
}
|
|
876
876
|
return value;
|
|
877
877
|
}
|
|
878
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
879
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.
|
|
878
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: LocalStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
879
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: LocalStorageService, providedIn: 'root' }); }
|
|
880
880
|
}
|
|
881
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
881
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: LocalStorageService, decorators: [{
|
|
882
882
|
type: Injectable,
|
|
883
883
|
args: [{
|
|
884
884
|
providedIn: 'root'
|
|
@@ -954,10 +954,10 @@ class RouterService {
|
|
|
954
954
|
}
|
|
955
955
|
});
|
|
956
956
|
}
|
|
957
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
958
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.
|
|
957
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: RouterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
958
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: RouterService, providedIn: 'root' }); }
|
|
959
959
|
}
|
|
960
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
960
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: RouterService, decorators: [{
|
|
961
961
|
type: Injectable,
|
|
962
962
|
args: [{ providedIn: 'root' }]
|
|
963
963
|
}], ctorParameters: () => [] });
|
|
@@ -1019,10 +1019,10 @@ class ScaffoldService {
|
|
|
1019
1019
|
this.logger.log(`[UPDATE] ScaffoldConfig.${property}`, value);
|
|
1020
1020
|
this._scaffoldConfig$.next(updatedState);
|
|
1021
1021
|
}
|
|
1022
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1023
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.
|
|
1022
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ScaffoldService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1023
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ScaffoldService, providedIn: 'root' }); }
|
|
1024
1024
|
}
|
|
1025
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1025
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ScaffoldService, decorators: [{
|
|
1026
1026
|
type: Injectable,
|
|
1027
1027
|
args: [{ providedIn: 'root' }]
|
|
1028
1028
|
}] });
|
|
@@ -1086,10 +1086,10 @@ class SeoService {
|
|
|
1086
1086
|
this.metaTags.updateTag({ property: 'og:image', content: image });
|
|
1087
1087
|
this.metaTags.updateTag({ name: 'twitter:image', content: image });
|
|
1088
1088
|
}
|
|
1089
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1090
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.
|
|
1089
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SeoService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1090
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SeoService, providedIn: 'root' }); }
|
|
1091
1091
|
}
|
|
1092
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1092
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SeoService, decorators: [{
|
|
1093
1093
|
type: Injectable,
|
|
1094
1094
|
args: [{
|
|
1095
1095
|
providedIn: 'root'
|
|
@@ -1121,10 +1121,10 @@ class SnackbarService {
|
|
|
1121
1121
|
const snackbarRef = this.snackbar.open(message, action, config ? config : this.actionConfig);
|
|
1122
1122
|
return firstValueFrom(snackbarRef.onAction());
|
|
1123
1123
|
}
|
|
1124
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1125
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.
|
|
1124
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SnackbarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1125
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SnackbarService, providedIn: 'root' }); }
|
|
1126
1126
|
}
|
|
1127
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1127
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SnackbarService, decorators: [{
|
|
1128
1128
|
type: Injectable,
|
|
1129
1129
|
args: [{
|
|
1130
1130
|
providedIn: 'root'
|
|
@@ -1180,10 +1180,10 @@ class ThemeService {
|
|
|
1180
1180
|
}
|
|
1181
1181
|
this.setTheme(theme.replace(/"/g, ''));
|
|
1182
1182
|
}
|
|
1183
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1184
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.
|
|
1183
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1184
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ThemeService, providedIn: 'root' }); }
|
|
1185
1185
|
}
|
|
1186
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1186
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ThemeService, decorators: [{
|
|
1187
1187
|
type: Injectable,
|
|
1188
1188
|
args: [{
|
|
1189
1189
|
providedIn: 'root'
|
|
@@ -1383,10 +1383,10 @@ class ScaffoldComponent {
|
|
|
1383
1383
|
this.scaffoldService.buttonClickEventValue = id;
|
|
1384
1384
|
this.bottomBarButtonClickEvent.emit(id);
|
|
1385
1385
|
}
|
|
1386
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1387
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
1386
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ScaffoldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1387
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", 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\r\n class=\"lf-scaffold lf-transitions mat-app-background mat-typography\"\r\n [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 [class.lf-transitions]=\"initialized\"\r\n #scrollContainer\r\n cdkScrollable>\r\n <!-- drawer -->\r\n <lf-drawer\r\n [libraryConfig]=\"libraryConfig\"\r\n [drawerConfig]=\"drawerConfig\"\r\n [drawerPortal]=\"drawerPortal\"\r\n [isMobile]=\"isMobile\"\r\n [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{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"] }] }); }
|
|
1388
1388
|
}
|
|
1389
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1389
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ScaffoldComponent, decorators: [{
|
|
1390
1390
|
type: Component,
|
|
1391
1391
|
args: [{ selector: 'lf-scaffold', standalone: false, template: "<!-- header-height: 64px; navbar-size: 80px; floating-button-bottom: 24px -->\r\n\r\n<div\r\n class=\"lf-scaffold lf-transitions mat-app-background mat-typography\"\r\n [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 [class.lf-transitions]=\"initialized\"\r\n #scrollContainer\r\n cdkScrollable>\r\n <!-- drawer -->\r\n <lf-drawer\r\n [libraryConfig]=\"libraryConfig\"\r\n [drawerConfig]=\"drawerConfig\"\r\n [drawerPortal]=\"drawerPortal\"\r\n [isMobile]=\"isMobile\"\r\n [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{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"] }]
|
|
1392
1392
|
}], propDecorators: { scrollContainer: [{
|
|
@@ -1418,8 +1418,8 @@ class ScaffoldModule {
|
|
|
1418
1418
|
]
|
|
1419
1419
|
};
|
|
1420
1420
|
}
|
|
1421
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1422
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.
|
|
1421
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ScaffoldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1422
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.13", ngImport: i0, type: ScaffoldModule, declarations: [ScaffoldComponent,
|
|
1423
1423
|
LoadingOverlayComponent,
|
|
1424
1424
|
HeaderComponent,
|
|
1425
1425
|
NavbarComponent,
|
|
@@ -1433,13 +1433,13 @@ class ScaffoldModule {
|
|
|
1433
1433
|
SharedModule,
|
|
1434
1434
|
InputComponent,
|
|
1435
1435
|
IconComponent], exports: [ScaffoldComponent] }); }
|
|
1436
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.
|
|
1436
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ScaffoldModule, imports: [BrowserModule,
|
|
1437
1437
|
RouterModule,
|
|
1438
1438
|
SharedModule,
|
|
1439
1439
|
InputComponent,
|
|
1440
1440
|
IconComponent] }); }
|
|
1441
1441
|
}
|
|
1442
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1442
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ScaffoldModule, decorators: [{
|
|
1443
1443
|
type: NgModule,
|
|
1444
1444
|
args: [{
|
|
1445
1445
|
declarations: [
|
|
@@ -1471,10 +1471,10 @@ class PlaceholderComponent {
|
|
|
1471
1471
|
constructor() {
|
|
1472
1472
|
this.buttonClickEvent = new EventEmitter();
|
|
1473
1473
|
}
|
|
1474
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1475
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
1474
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: PlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1475
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: PlaceholderComponent, isStandalone: true, selector: "lf-placeholder", inputs: { placeholderConfig: "placeholderConfig" }, outputs: { buttonClickEvent: "buttonClickEvent" }, ngImport: i0, template: "@if (placeholderConfig) {\r\n <div class=\"lf-placeholder\" [ngClass]=\"placeholderConfig.cssClass\">\r\n <!-- icon -->\r\n <lf-icon\r\n [matIcon]=\"placeholderConfig.matIcon!\"\r\n [svgIcon]=\"placeholderConfig.svgIcon!\"></lf-icon>\r\n <!-- heading -->\r\n @if (placeholderConfig.title) {\r\n <p class=\"lf-placeholder-title\">\r\n {{ placeholderConfig.title }}\r\n </p>\r\n }\r\n <!-- message -->\r\n @if (placeholderConfig.message) {\r\n <p class=\"lf-placeholder-message\">\r\n {{ placeholderConfig.message }}\r\n </p>\r\n }\r\n <!-- action -->\r\n @if (placeholderConfig.button) {\r\n <button\r\n mat-button\r\n class=\"mt-4\"\r\n color=\"accent\"\r\n [ngClass]=\"placeholderConfig.button.cssClass\"\r\n (click)=\"buttonClickEvent.emit()\"\r\n [matTooltip]=\"placeholderConfig.button.tooltip\">\r\n @if (placeholderConfig.button.matIcon || placeholderConfig.button.svgIcon) {\r\n <lf-icon\r\n [matIcon]=\"placeholderConfig.button.matIcon\"\r\n [svgIcon]=\"placeholderConfig.button.svgIcon\"\r\n verticalAlign=\"bottom\"></lf-icon>\r\n }\r\n {{ placeholderConfig.button.label }}\r\n </button>\r\n }\r\n </div>\r\n}\r\n", styles: [".lf-placeholder{display:flex;flex-flow:column;align-items:center;justify-content:center;text-align:center}.lf-placeholder ::ng-deep .lf-icon{width:96px;height:96px;font-size:96px;color:#808080cc}.lf-placeholder .lf-placeholder-title{margin:0;font-size:28px;color:#808080cc}.lf-placeholder .lf-placeholder-message{margin:0;font-size:18px;color:#808080cc}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { 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: "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"] }] }); }
|
|
1476
1476
|
}
|
|
1477
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1477
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: PlaceholderComponent, decorators: [{
|
|
1478
1478
|
type: Component,
|
|
1479
1479
|
args: [{ selector: 'lf-placeholder', standalone: true, imports: [SharedModule, IconComponent], template: "@if (placeholderConfig) {\r\n <div class=\"lf-placeholder\" [ngClass]=\"placeholderConfig.cssClass\">\r\n <!-- icon -->\r\n <lf-icon\r\n [matIcon]=\"placeholderConfig.matIcon!\"\r\n [svgIcon]=\"placeholderConfig.svgIcon!\"></lf-icon>\r\n <!-- heading -->\r\n @if (placeholderConfig.title) {\r\n <p class=\"lf-placeholder-title\">\r\n {{ placeholderConfig.title }}\r\n </p>\r\n }\r\n <!-- message -->\r\n @if (placeholderConfig.message) {\r\n <p class=\"lf-placeholder-message\">\r\n {{ placeholderConfig.message }}\r\n </p>\r\n }\r\n <!-- action -->\r\n @if (placeholderConfig.button) {\r\n <button\r\n mat-button\r\n class=\"mt-4\"\r\n color=\"accent\"\r\n [ngClass]=\"placeholderConfig.button.cssClass\"\r\n (click)=\"buttonClickEvent.emit()\"\r\n [matTooltip]=\"placeholderConfig.button.tooltip\">\r\n @if (placeholderConfig.button.matIcon || placeholderConfig.button.svgIcon) {\r\n <lf-icon\r\n [matIcon]=\"placeholderConfig.button.matIcon\"\r\n [svgIcon]=\"placeholderConfig.button.svgIcon\"\r\n verticalAlign=\"bottom\"></lf-icon>\r\n }\r\n {{ placeholderConfig.button.label }}\r\n </button>\r\n }\r\n </div>\r\n}\r\n", styles: [".lf-placeholder{display:flex;flex-flow:column;align-items:center;justify-content:center;text-align:center}.lf-placeholder ::ng-deep .lf-icon{width:96px;height:96px;font-size:96px;color:#808080cc}.lf-placeholder .lf-placeholder-title{margin:0;font-size:28px;color:#808080cc}.lf-placeholder .lf-placeholder-message{margin:0;font-size:18px;color:#808080cc}\n"] }]
|
|
1480
1480
|
}], propDecorators: { placeholderConfig: [{
|
|
@@ -1503,10 +1503,10 @@ class FileUploadComponent {
|
|
|
1503
1503
|
triggerInput() {
|
|
1504
1504
|
this.fileElement.nativeElement.click();
|
|
1505
1505
|
}
|
|
1506
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1507
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
1506
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1507
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: FileUploadComponent, isStandalone: true, selector: "lf-file-upload", inputs: { color: "color", label: "label", matIcon: "matIcon", disabled: "disabled", accept: "accept", tooltip: "tooltip" }, outputs: { fileChangeEvent: "fileChangeEvent" }, viewQueries: [{ propertyName: "fileElement", first: true, predicate: ["file"], descendants: true }], ngImport: i0, template: "<input\r\n hidden\r\n #file\r\n type=\"file\"\r\n [accept]=\"accept\"\r\n onclick=\"this.value=null\"\r\n (change)=\"selectFile($event)\" />\r\n\r\n<button\r\n mat-flat-button\r\n class=\"lf-button\"\r\n type=\"button\"\r\n [color]=\"color\"\r\n [disabled]=\"disabled\"\r\n (click)=\"triggerInput()\"\r\n [matTooltip]=\"tooltip\">\r\n @if (matIcon) {\r\n <mat-icon>{{ matIcon }}</mat-icon>\r\n }\r\n {{ label }}\r\n</button>\r\n", styles: [".lf-button{width:inherit}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
1508
1508
|
}
|
|
1509
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1509
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: FileUploadComponent, decorators: [{
|
|
1510
1510
|
type: Component,
|
|
1511
1511
|
args: [{ selector: 'lf-file-upload', standalone: true, imports: [SharedModule], template: "<input\r\n hidden\r\n #file\r\n type=\"file\"\r\n [accept]=\"accept\"\r\n onclick=\"this.value=null\"\r\n (change)=\"selectFile($event)\" />\r\n\r\n<button\r\n mat-flat-button\r\n class=\"lf-button\"\r\n type=\"button\"\r\n [color]=\"color\"\r\n [disabled]=\"disabled\"\r\n (click)=\"triggerInput()\"\r\n [matTooltip]=\"tooltip\">\r\n @if (matIcon) {\r\n <mat-icon>{{ matIcon }}</mat-icon>\r\n }\r\n {{ label }}\r\n</button>\r\n", styles: [".lf-button{width:inherit}\n"] }]
|
|
1512
1512
|
}], propDecorators: { fileElement: [{
|
|
@@ -1532,10 +1532,10 @@ class ListItemAvatarDirective {
|
|
|
1532
1532
|
constructor() {
|
|
1533
1533
|
this.templateRef = inject((TemplateRef));
|
|
1534
1534
|
}
|
|
1535
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1536
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.
|
|
1535
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ListItemAvatarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1536
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.13", type: ListItemAvatarDirective, isStandalone: true, selector: "[lfListItemAvatar]", ngImport: i0 }); }
|
|
1537
1537
|
}
|
|
1538
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1538
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ListItemAvatarDirective, decorators: [{
|
|
1539
1539
|
type: Directive,
|
|
1540
1540
|
args: [{
|
|
1541
1541
|
selector: '[lfListItemAvatar]'
|
|
@@ -1546,10 +1546,10 @@ class ListItemButtonsDirective {
|
|
|
1546
1546
|
constructor() {
|
|
1547
1547
|
this.templateRef = inject((TemplateRef));
|
|
1548
1548
|
}
|
|
1549
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1550
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.
|
|
1549
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ListItemButtonsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1550
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.13", type: ListItemButtonsDirective, isStandalone: true, selector: "[lfListItemButtons]", ngImport: i0 }); }
|
|
1551
1551
|
}
|
|
1552
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1552
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ListItemButtonsDirective, decorators: [{
|
|
1553
1553
|
type: Directive,
|
|
1554
1554
|
args: [{
|
|
1555
1555
|
selector: '[lfListItemButtons]'
|
|
@@ -1560,10 +1560,10 @@ class ListItemSubtitleDirective {
|
|
|
1560
1560
|
constructor() {
|
|
1561
1561
|
this.templateRef = inject((TemplateRef));
|
|
1562
1562
|
}
|
|
1563
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1564
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.
|
|
1563
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ListItemSubtitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1564
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.13", type: ListItemSubtitleDirective, isStandalone: true, selector: "[lfListItemSubtitle]", ngImport: i0 }); }
|
|
1565
1565
|
}
|
|
1566
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1566
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ListItemSubtitleDirective, decorators: [{
|
|
1567
1567
|
type: Directive,
|
|
1568
1568
|
args: [{
|
|
1569
1569
|
selector: '[lfListItemSubtitle]'
|
|
@@ -1574,10 +1574,10 @@ class ListItemTitleDirective {
|
|
|
1574
1574
|
constructor() {
|
|
1575
1575
|
this.templateRef = inject((TemplateRef));
|
|
1576
1576
|
}
|
|
1577
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1578
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.
|
|
1577
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ListItemTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1578
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.13", type: ListItemTitleDirective, isStandalone: true, selector: "[lfListItemTitle]", ngImport: i0 }); }
|
|
1579
1579
|
}
|
|
1580
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1580
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ListItemTitleDirective, decorators: [{
|
|
1581
1581
|
type: Directive,
|
|
1582
1582
|
args: [{
|
|
1583
1583
|
selector: '[lfListItemTitle]'
|
|
@@ -1671,10 +1671,10 @@ class ListComponent {
|
|
|
1671
1671
|
// click.stopPropagation();
|
|
1672
1672
|
click.stopImmediatePropagation();
|
|
1673
1673
|
}
|
|
1674
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1675
|
-
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"] }] }); }
|
|
1674
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1675
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", 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: "component", type: IconComponent, selector: "lf-icon", inputs: ["matIcon", "svgIcon", "verticalAlign"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] }); }
|
|
1676
1676
|
}
|
|
1677
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1677
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ListComponent, decorators: [{
|
|
1678
1678
|
type: Component,
|
|
1679
1679
|
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"] }]
|
|
1680
1680
|
}], propDecorators: { avatarTemplate: [{
|
|
@@ -1749,10 +1749,10 @@ class ScaffoldLoadingInterceptor {
|
|
|
1749
1749
|
}
|
|
1750
1750
|
}));
|
|
1751
1751
|
}
|
|
1752
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1753
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.
|
|
1752
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ScaffoldLoadingInterceptor, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1753
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ScaffoldLoadingInterceptor }); }
|
|
1754
1754
|
}
|
|
1755
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1755
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ScaffoldLoadingInterceptor, decorators: [{
|
|
1756
1756
|
type: Injectable
|
|
1757
1757
|
}] });
|
|
1758
1758
|
|