@lukfel/ng-scaffold 21.1.59 → 22.0.2
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.
- package/fesm2022/{lukfel-ng-scaffold-confirm-dialog.component-DAl-XH0n.mjs → lukfel-ng-scaffold-confirm-dialog.component-CeA4sNo4.mjs} +6 -5
- package/fesm2022/{lukfel-ng-scaffold-confirm-dialog.component-DAl-XH0n.mjs.map → lukfel-ng-scaffold-confirm-dialog.component-CeA4sNo4.mjs.map} +1 -1
- package/fesm2022/lukfel-ng-scaffold.mjs +281 -187
- package/fesm2022/lukfel-ng-scaffold.mjs.map +1 -1
- package/package.json +2 -1
- package/schematics/ng-add/add-component.js +34 -1
- package/schematics/ng-add/add-component.js.map +1 -1
- package/schematics/ng-add/add-config.js +34 -1
- package/schematics/ng-add/add-config.js.map +1 -1
|
@@ -56,10 +56,10 @@ class BreakpointService {
|
|
|
56
56
|
.observe([Breakpoints.Large, Breakpoints.Medium, Breakpoints.Small, Breakpoints.XSmall])
|
|
57
57
|
.pipe(distinctUntilChanged());
|
|
58
58
|
}
|
|
59
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
60
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
59
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: BreakpointService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
60
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: BreakpointService, providedIn: 'root' }); }
|
|
61
61
|
}
|
|
62
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
62
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: BreakpointService, decorators: [{
|
|
63
63
|
type: Injectable,
|
|
64
64
|
args: [{ providedIn: 'root' }]
|
|
65
65
|
}] });
|
|
@@ -75,7 +75,7 @@ class DialogService {
|
|
|
75
75
|
* @returns an asynchronous boolean response
|
|
76
76
|
*/
|
|
77
77
|
async openConfirmDialog(config) {
|
|
78
|
-
const { ConfirmDialogComponent } = await import('./lukfel-ng-scaffold-confirm-dialog.component-
|
|
78
|
+
const { ConfirmDialogComponent } = await import('./lukfel-ng-scaffold-confirm-dialog.component-CeA4sNo4.mjs');
|
|
79
79
|
const dialogRef = this.matDialog.open(ConfirmDialogComponent, {
|
|
80
80
|
autoFocus: false,
|
|
81
81
|
maxWidth: '368px',
|
|
@@ -110,10 +110,10 @@ class DialogService {
|
|
|
110
110
|
});
|
|
111
111
|
return firstValueFrom(dialogRef.afterClosed());
|
|
112
112
|
}
|
|
113
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
114
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
113
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
114
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DialogService, providedIn: 'root' }); }
|
|
115
115
|
}
|
|
116
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
116
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DialogService, decorators: [{
|
|
117
117
|
type: Injectable,
|
|
118
118
|
args: [{
|
|
119
119
|
providedIn: 'root',
|
|
@@ -157,10 +157,10 @@ class Logger {
|
|
|
157
157
|
console.error(message, ...args); // eslint-disable-line no-console
|
|
158
158
|
}
|
|
159
159
|
}
|
|
160
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
161
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
160
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: Logger, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
161
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: Logger, providedIn: 'root' }); }
|
|
162
162
|
}
|
|
163
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
163
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: Logger, decorators: [{
|
|
164
164
|
type: Injectable,
|
|
165
165
|
args: [{ providedIn: 'root' }]
|
|
166
166
|
}] });
|
|
@@ -301,10 +301,10 @@ class LocalStorageService {
|
|
|
301
301
|
}
|
|
302
302
|
return value;
|
|
303
303
|
}
|
|
304
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
305
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
304
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: LocalStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
305
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: LocalStorageService, providedIn: 'root' }); }
|
|
306
306
|
}
|
|
307
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
307
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: LocalStorageService, decorators: [{
|
|
308
308
|
type: Injectable,
|
|
309
309
|
args: [{
|
|
310
310
|
providedIn: 'root',
|
|
@@ -340,10 +340,10 @@ class OverlayService {
|
|
|
340
340
|
this.overlayRef.dispose();
|
|
341
341
|
this.overlayRef = null;
|
|
342
342
|
}
|
|
343
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
344
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
343
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
344
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OverlayService, providedIn: 'root' }); }
|
|
345
345
|
}
|
|
346
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
346
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OverlayService, decorators: [{
|
|
347
347
|
type: Injectable,
|
|
348
348
|
args: [{
|
|
349
349
|
providedIn: 'root',
|
|
@@ -431,10 +431,10 @@ class RouterService {
|
|
|
431
431
|
clearRouteHistory() {
|
|
432
432
|
this._routeHistory$.next([]);
|
|
433
433
|
}
|
|
434
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
435
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
434
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RouterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
435
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RouterService, providedIn: 'root' }); }
|
|
436
436
|
}
|
|
437
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
437
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RouterService, decorators: [{
|
|
438
438
|
type: Injectable,
|
|
439
439
|
args: [{ providedIn: 'root' }]
|
|
440
440
|
}], ctorParameters: () => [] });
|
|
@@ -503,10 +503,10 @@ class ScaffoldService {
|
|
|
503
503
|
this.logger.log(`[UPDATE] ScaffoldConfig.${property}`, newValue);
|
|
504
504
|
this._scaffoldConfig$.next({ ...currentState, [property]: newValue });
|
|
505
505
|
}
|
|
506
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
507
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
506
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ScaffoldService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
507
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ScaffoldService, providedIn: 'root' }); }
|
|
508
508
|
}
|
|
509
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
509
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ScaffoldService, decorators: [{
|
|
510
510
|
type: Injectable,
|
|
511
511
|
args: [{ providedIn: 'root' }]
|
|
512
512
|
}] });
|
|
@@ -578,10 +578,10 @@ class SeoService {
|
|
|
578
578
|
this.metaTags.updateTag({ property: 'og:image', content: image });
|
|
579
579
|
this.metaTags.updateTag({ name: 'twitter:image', content: image });
|
|
580
580
|
}
|
|
581
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
582
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
581
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SeoService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
582
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SeoService, providedIn: 'root' }); }
|
|
583
583
|
}
|
|
584
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
584
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SeoService, decorators: [{
|
|
585
585
|
type: Injectable,
|
|
586
586
|
args: [{
|
|
587
587
|
providedIn: 'root',
|
|
@@ -614,10 +614,10 @@ class SnackbarService {
|
|
|
614
614
|
const snackbarRef = this.snackbar.open(message, action, config ? config : this.actionConfig);
|
|
615
615
|
return firstValueFrom(snackbarRef.onAction());
|
|
616
616
|
}
|
|
617
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
618
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
617
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SnackbarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
618
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SnackbarService, providedIn: 'root' }); }
|
|
619
619
|
}
|
|
620
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
620
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SnackbarService, decorators: [{
|
|
621
621
|
type: Injectable,
|
|
622
622
|
args: [{
|
|
623
623
|
providedIn: 'root',
|
|
@@ -673,10 +673,10 @@ class ThemeService {
|
|
|
673
673
|
}
|
|
674
674
|
this.setTheme(theme.replace(/"/g, ''));
|
|
675
675
|
}
|
|
676
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
677
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
676
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
677
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ThemeService, providedIn: 'root' }); }
|
|
678
678
|
}
|
|
679
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
679
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ThemeService, decorators: [{
|
|
680
680
|
type: Injectable,
|
|
681
681
|
args: [{
|
|
682
682
|
providedIn: 'root',
|
|
@@ -685,10 +685,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
|
|
|
685
685
|
|
|
686
686
|
class BottomBarComponent {
|
|
687
687
|
constructor() {
|
|
688
|
-
this.libraryConfig = input(null,
|
|
689
|
-
|
|
690
|
-
this.
|
|
691
|
-
|
|
688
|
+
this.libraryConfig = input(null, /* @ts-ignore */
|
|
689
|
+
...(ngDevMode ? [{ debugName: "libraryConfig" }] : /* istanbul ignore next */ []));
|
|
690
|
+
this.bottomBarConfig = input(null, /* @ts-ignore */
|
|
691
|
+
...(ngDevMode ? [{ debugName: "bottomBarConfig" }] : /* istanbul ignore next */ []));
|
|
692
|
+
this.isMobile = input(false, /* @ts-ignore */
|
|
693
|
+
...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
|
|
694
|
+
this.navbarEnabled = input(false, /* @ts-ignore */
|
|
695
|
+
...(ngDevMode ? [{ debugName: "navbarEnabled" }] : /* istanbul ignore next */ []));
|
|
692
696
|
this.bottomBarCloseClickEvent = output();
|
|
693
697
|
this.bottomBarButtonClickEvent = output();
|
|
694
698
|
}
|
|
@@ -701,42 +705,52 @@ class BottomBarComponent {
|
|
|
701
705
|
closeClicked(closeButtonId) {
|
|
702
706
|
this.bottomBarCloseClickEvent.emit(closeButtonId);
|
|
703
707
|
}
|
|
704
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
705
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
708
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: BottomBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
709
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: BottomBarComponent, isStandalone: true, selector: "lf-bottom-bar", inputs: { libraryConfig: { classPropertyName: "libraryConfig", publicName: "libraryConfig", isSignal: true, isRequired: false, transformFunction: null }, bottomBarConfig: { classPropertyName: "bottomBarConfig", publicName: "bottomBarConfig", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, navbarEnabled: { classPropertyName: "navbarEnabled", publicName: "navbarEnabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { bottomBarCloseClickEvent: "bottomBarCloseClickEvent", bottomBarButtonClickEvent: "bottomBarButtonClickEvent" }, ngImport: i0, template: "@if (bottomBarConfig(); as config) {\r\n @if (config.enable) {\r\n <mat-toolbar\r\n animate.enter=\"lf-anim-slide-up-enter\"\r\n animate.leave=\"lf-anim-slide-up-leave\"\r\n class=\"lf-bottom-bar lf-transitions px-4\"\r\n color=\"accent\"\r\n [ngClass]=\"config.cssClass\"\r\n [class.lf-bottom-bar-show-navbar]=\"!isMobile() && navbarEnabled()\"\r\n [class.lf-bottom-bar-show-navbar-mobile]=\"isMobile() && navbarEnabled()\">\r\n @if (config.closeButtonId) {\r\n <button mat-icon-button (click)=\"closeClicked(config.closeButtonId)\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n }\r\n @if (config.message) {\r\n <span class=\"ml-2\">{{ config.message }}</span>\r\n }\r\n @if (config.buttons) {\r\n <div class=\"lf-bottom-bar-buttons ml-4\">\r\n @for (button of config.buttons; track button.id) {\r\n <!-- label button -->\r\n @if (button.label) {\r\n <button\r\n mat-button\r\n class=\"lf-bottom-bar-button ml-2\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"button.disabled\"\r\n (click)=\"buttonClicked(button.id)\"\r\n [matTooltip]=\"button.tooltip\">\r\n <!-- icon -->\r\n <!-- icon -->\r\n @if (button.matIcon) {\r\n <mat-icon>\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n } @else if (button.svgIcon) {\r\n <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n }\r\n <!-- label -->\r\n {{ button.label }}\r\n </button>\r\n <!-- icon button -->\r\n } @else {\r\n <button\r\n mat-icon-button\r\n color=\"accent\"\r\n class=\"lf-bottom-bar-button-icon ml-2\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"button.disabled\"\r\n (click)=\"buttonClicked(button.id)\"\r\n [matTooltip]=\"button.tooltip\">\r\n <!-- icon -->\r\n @if (button.matIcon) {\r\n <mat-icon>\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n } @else if (button.svgIcon) {\r\n <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n }\r\n </button>\r\n }\r\n }\r\n </div>\r\n }\r\n </mat-toolbar>\r\n }\r\n}\r\n", styles: [".lf-bottom-bar{z-index:var(--bottom-bar-z-index);position:fixed;left:0;bottom:0;right:0;height:var(--bottom-bar-height);font-size:var(--bottom-bar-font-size)}.lf-bottom-bar.lf-bottom-bar-show-navbar-mobile{bottom:calc(var(--navbar-height-mobile) + 2 * var(--navbar-padding))!important}.lf-bottom-bar.lf-bottom-bar-show-navbar{left:calc(var(--navbar-width) + 2 * var(--navbar-padding))!important}.lf-bottom-bar .lf-bottom-bar-buttons{display:flex;align-items:center}.lf-bottom-bar .lf-bottom-bar-buttons .lf-bottom-bar-button{color:var(--color-accent)!important;background-color:#fff!important}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.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: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
706
710
|
}
|
|
707
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
711
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: BottomBarComponent, decorators: [{
|
|
708
712
|
type: Component,
|
|
709
713
|
args: [{ selector: 'lf-bottom-bar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatButtonModule, MatIconModule, MatToolbarModule, MatTooltipModule, NgClass], template: "@if (bottomBarConfig(); as config) {\r\n @if (config.enable) {\r\n <mat-toolbar\r\n animate.enter=\"lf-anim-slide-up-enter\"\r\n animate.leave=\"lf-anim-slide-up-leave\"\r\n class=\"lf-bottom-bar lf-transitions px-4\"\r\n color=\"accent\"\r\n [ngClass]=\"config.cssClass\"\r\n [class.lf-bottom-bar-show-navbar]=\"!isMobile() && navbarEnabled()\"\r\n [class.lf-bottom-bar-show-navbar-mobile]=\"isMobile() && navbarEnabled()\">\r\n @if (config.closeButtonId) {\r\n <button mat-icon-button (click)=\"closeClicked(config.closeButtonId)\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n }\r\n @if (config.message) {\r\n <span class=\"ml-2\">{{ config.message }}</span>\r\n }\r\n @if (config.buttons) {\r\n <div class=\"lf-bottom-bar-buttons ml-4\">\r\n @for (button of config.buttons; track button.id) {\r\n <!-- label button -->\r\n @if (button.label) {\r\n <button\r\n mat-button\r\n class=\"lf-bottom-bar-button ml-2\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"button.disabled\"\r\n (click)=\"buttonClicked(button.id)\"\r\n [matTooltip]=\"button.tooltip\">\r\n <!-- icon -->\r\n <!-- icon -->\r\n @if (button.matIcon) {\r\n <mat-icon>\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n } @else if (button.svgIcon) {\r\n <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n }\r\n <!-- label -->\r\n {{ button.label }}\r\n </button>\r\n <!-- icon button -->\r\n } @else {\r\n <button\r\n mat-icon-button\r\n color=\"accent\"\r\n class=\"lf-bottom-bar-button-icon ml-2\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"button.disabled\"\r\n (click)=\"buttonClicked(button.id)\"\r\n [matTooltip]=\"button.tooltip\">\r\n <!-- icon -->\r\n @if (button.matIcon) {\r\n <mat-icon>\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n } @else if (button.svgIcon) {\r\n <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n }\r\n </button>\r\n }\r\n }\r\n </div>\r\n }\r\n </mat-toolbar>\r\n }\r\n}\r\n", styles: [".lf-bottom-bar{z-index:var(--bottom-bar-z-index);position:fixed;left:0;bottom:0;right:0;height:var(--bottom-bar-height);font-size:var(--bottom-bar-font-size)}.lf-bottom-bar.lf-bottom-bar-show-navbar-mobile{bottom:calc(var(--navbar-height-mobile) + 2 * var(--navbar-padding))!important}.lf-bottom-bar.lf-bottom-bar-show-navbar{left:calc(var(--navbar-width) + 2 * var(--navbar-padding))!important}.lf-bottom-bar .lf-bottom-bar-buttons{display:flex;align-items:center}.lf-bottom-bar .lf-bottom-bar-buttons .lf-bottom-bar-button{color:var(--color-accent)!important;background-color:#fff!important}\n"] }]
|
|
710
714
|
}], propDecorators: { libraryConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "libraryConfig", required: false }] }], bottomBarConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "bottomBarConfig", required: false }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], navbarEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "navbarEnabled", required: false }] }], bottomBarCloseClickEvent: [{ type: i0.Output, args: ["bottomBarCloseClickEvent"] }], bottomBarButtonClickEvent: [{ type: i0.Output, args: ["bottomBarButtonClickEvent"] }] } });
|
|
711
715
|
|
|
712
716
|
class ContentTitleCardComponent {
|
|
713
717
|
constructor() {
|
|
714
|
-
this.libraryConfig = input(null,
|
|
715
|
-
|
|
716
|
-
this.
|
|
717
|
-
|
|
718
|
+
this.libraryConfig = input(null, /* @ts-ignore */
|
|
719
|
+
...(ngDevMode ? [{ debugName: "libraryConfig" }] : /* istanbul ignore next */ []));
|
|
720
|
+
this.contentTitleCardConfig = input(null, /* @ts-ignore */
|
|
721
|
+
...(ngDevMode ? [{ debugName: "contentTitleCardConfig" }] : /* istanbul ignore next */ []));
|
|
722
|
+
this.isMobile = input(false, /* @ts-ignore */
|
|
723
|
+
...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
|
|
724
|
+
this.routeHistory = input([], /* @ts-ignore */
|
|
725
|
+
...(ngDevMode ? [{ debugName: "routeHistory" }] : /* istanbul ignore next */ []));
|
|
718
726
|
this.backButtonClickEvent = output();
|
|
719
727
|
}
|
|
720
728
|
backButtonClicked() {
|
|
721
729
|
this.backButtonClickEvent.emit();
|
|
722
730
|
}
|
|
723
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
724
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
731
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ContentTitleCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
732
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: ContentTitleCardComponent, isStandalone: true, selector: "lf-content-title-card", inputs: { libraryConfig: { classPropertyName: "libraryConfig", publicName: "libraryConfig", isSignal: true, isRequired: false, transformFunction: null }, contentTitleCardConfig: { classPropertyName: "contentTitleCardConfig", publicName: "contentTitleCardConfig", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, routeHistory: { classPropertyName: "routeHistory", publicName: "routeHistory", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { backButtonClickEvent: "backButtonClickEvent" }, ngImport: i0, template: "@if (contentTitleCardConfig(); as config) {\r\n @if (config.enable) {\r\n <mat-card\r\n class=\"lf-content-title-card mat-elevation-z2\"\r\n [class.lf-content-title-card-mobile]=\"isMobile()\"\r\n [class.px-4]=\"!isMobile()\"\r\n [class.px-2]=\"isMobile()\"\r\n [ngClass]=\"config.cssClass\">\r\n <!-- back button -->\r\n @if (config.showBackButton && routeHistory().length > 0) {\r\n <button mat-icon-button color=\"accent\" (click)=\"backButtonClicked()\">\r\n <mat-icon>arrow_back_ios</mat-icon>\r\n </button>\r\n }\r\n <!-- spacer -->\r\n <div class=\"flex-auto\"></div>\r\n <!-- label -->\r\n <span class=\"lf-content-title-card-label\">\r\n {{ config.label || '' }}\r\n </span>\r\n <!-- spacer -->\r\n <div class=\"flex-auto\"></div>\r\n <!-- empty button spacer -->\r\n <div\r\n [style.width]=\"config.showBackButton && routeHistory().length > 1 ? '48px' : '0px'\"></div>\r\n </mat-card>\r\n }\r\n}\r\n", styles: [".lf-content-title-card{z-index:var(--content-title-card-z-index);height:var(--content-title-card-height);display:flex;flex-flow:row nowrap;align-items:center;border-radius:0}.lf-content-title-card.lf-content-title-card-mobile .lf-content-title-card-label{font-size:var(--content-title-card-label-font-size-mobile)}.lf-content-title-card .lf-content-title-card-label{font-size:var(--content-title-card-label-font-size);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
725
733
|
}
|
|
726
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
734
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ContentTitleCardComponent, decorators: [{
|
|
727
735
|
type: Component,
|
|
728
736
|
args: [{ selector: 'lf-content-title-card', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatCardModule, MatButtonModule, MatIconModule, NgClass], template: "@if (contentTitleCardConfig(); as config) {\r\n @if (config.enable) {\r\n <mat-card\r\n class=\"lf-content-title-card mat-elevation-z2\"\r\n [class.lf-content-title-card-mobile]=\"isMobile()\"\r\n [class.px-4]=\"!isMobile()\"\r\n [class.px-2]=\"isMobile()\"\r\n [ngClass]=\"config.cssClass\">\r\n <!-- back button -->\r\n @if (config.showBackButton && routeHistory().length > 0) {\r\n <button mat-icon-button color=\"accent\" (click)=\"backButtonClicked()\">\r\n <mat-icon>arrow_back_ios</mat-icon>\r\n </button>\r\n }\r\n <!-- spacer -->\r\n <div class=\"flex-auto\"></div>\r\n <!-- label -->\r\n <span class=\"lf-content-title-card-label\">\r\n {{ config.label || '' }}\r\n </span>\r\n <!-- spacer -->\r\n <div class=\"flex-auto\"></div>\r\n <!-- empty button spacer -->\r\n <div\r\n [style.width]=\"config.showBackButton && routeHistory().length > 1 ? '48px' : '0px'\"></div>\r\n </mat-card>\r\n }\r\n}\r\n", styles: [".lf-content-title-card{z-index:var(--content-title-card-z-index);height:var(--content-title-card-height);display:flex;flex-flow:row nowrap;align-items:center;border-radius:0}.lf-content-title-card.lf-content-title-card-mobile .lf-content-title-card-label{font-size:var(--content-title-card-label-font-size-mobile)}.lf-content-title-card .lf-content-title-card-label{font-size:var(--content-title-card-label-font-size);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}\n"] }]
|
|
729
737
|
}], propDecorators: { libraryConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "libraryConfig", required: false }] }], contentTitleCardConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentTitleCardConfig", required: false }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], routeHistory: [{ type: i0.Input, args: [{ isSignal: true, alias: "routeHistory", required: false }] }], backButtonClickEvent: [{ type: i0.Output, args: ["backButtonClickEvent"] }] } });
|
|
730
738
|
|
|
731
739
|
class DrawerComponent {
|
|
732
740
|
constructor() {
|
|
733
|
-
this.libraryConfig = input(null,
|
|
734
|
-
|
|
735
|
-
this.
|
|
736
|
-
|
|
737
|
-
this.
|
|
741
|
+
this.libraryConfig = input(null, /* @ts-ignore */
|
|
742
|
+
...(ngDevMode ? [{ debugName: "libraryConfig" }] : /* istanbul ignore next */ []));
|
|
743
|
+
this.drawerConfig = input(null, /* @ts-ignore */
|
|
744
|
+
...(ngDevMode ? [{ debugName: "drawerConfig" }] : /* istanbul ignore next */ []));
|
|
745
|
+
this.isMobile = input(false, /* @ts-ignore */
|
|
746
|
+
...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
|
|
747
|
+
this.headerEnabled = input(false, /* @ts-ignore */
|
|
748
|
+
...(ngDevMode ? [{ debugName: "headerEnabled" }] : /* istanbul ignore next */ []));
|
|
749
|
+
this.drawerPortal = input(/* @ts-ignore */
|
|
750
|
+
...(ngDevMode ? [undefined, { debugName: "drawerPortal" }] : /* istanbul ignore next */ []));
|
|
738
751
|
this.drawerConfigUpdateEvent = output();
|
|
739
|
-
this.initialized = signal(false,
|
|
752
|
+
this.initialized = signal(false, /* @ts-ignore */
|
|
753
|
+
...(ngDevMode ? [{ debugName: "initialized" }] : /* istanbul ignore next */ []));
|
|
740
754
|
this.touchStartX = 0;
|
|
741
755
|
this.TOUCH_ZONE_WIDTH_PX = 40;
|
|
742
756
|
this.SWIPE_THRESHOLD_PX = 30;
|
|
@@ -773,10 +787,10 @@ class DrawerComponent {
|
|
|
773
787
|
this.drawerConfigUpdateEvent.emit({ open: true });
|
|
774
788
|
}
|
|
775
789
|
}
|
|
776
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
777
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
790
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
791
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DrawerComponent, isStandalone: true, selector: "lf-drawer", inputs: { libraryConfig: { classPropertyName: "libraryConfig", publicName: "libraryConfig", isSignal: true, isRequired: false, transformFunction: null }, drawerConfig: { classPropertyName: "drawerConfig", publicName: "drawerConfig", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, headerEnabled: { classPropertyName: "headerEnabled", publicName: "headerEnabled", isSignal: true, isRequired: false, transformFunction: null }, drawerPortal: { classPropertyName: "drawerPortal", publicName: "drawerPortal", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { drawerConfigUpdateEvent: "drawerConfigUpdateEvent" }, host: { listeners: { "document:touchstart": "onTouchStart($event)", "document:touchend": "onTouchEnd($event)" } }, ngImport: i0, template: "@if (drawerConfig(); as config) {\r\n @if (config.enable) {\r\n <mat-sidenav-container class=\"lf-drawer-container lf-transitions\" [ngClass]=\"config.cssClass\">\r\n <!-- drawer -->\r\n <mat-sidenav\r\n #drawer\r\n class=\"lf-drawer mat-elevation-z2\"\r\n [class.mobile]=\"isMobile()\"\r\n [mode]=\"isMobile() ? 'over' : 'side'\"\r\n [opened]=\"config.open\"\r\n [autoFocus]=\"false\"\r\n [fixedInViewport]=\"config.fixed\"\r\n [class.lf-drawer-show-header]=\"headerEnabled() && config.fixed\"\r\n (closed)=\"drawerClosed()\">\r\n <!-- drawer content -->\r\n <!-- <ng-content select=\"[drawerContent]\"></ng-content> -->\r\n @if (drawerPortal()) {\r\n <ng-template [cdkPortalOutlet]=\"drawerPortal()\"></ng-template>\r\n } @else {\r\n <ng-content select=\"[drawerContent]\"></ng-content>\r\n }\r\n </mat-sidenav>\r\n <mat-sidenav-content class=\"overflow-unset\">\r\n <!-- main content -->\r\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n </mat-sidenav-content>\r\n </mat-sidenav-container>\r\n } @else {\r\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n }\r\n} @else {\r\n <!-- render content without drawer -->\r\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n}\r\n\r\n<!-- this template is required to allow multiple <ng-content></ng-content> -->\r\n<ng-template #content><ng-content></ng-content></ng-template>\r\n", styles: [".lf-drawer-container{z-index:unset!important;overflow:unset!important}.lf-drawer-container .lf-drawer{z-index:var(--drawer-z-index);width:var(--drawer-width);border-right:1px solid var(--mat-sys-outline-variant, rgba(0, 0, 0, .12))}.lf-drawer-container .lf-drawer.mobile{z-index:var(--drawer-z-index-mobile)}.lf-drawer-container .lf-drawer.lf-drawer-show-header{top:var(--header-height)!important}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "ngmodule", type: MatSidenavModule }, { 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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
778
792
|
}
|
|
779
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
793
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DrawerComponent, decorators: [{
|
|
780
794
|
type: Component,
|
|
781
795
|
args: [{ selector: 'lf-drawer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [PortalModule, MatSidenavModule, NgClass, NgTemplateOutlet], host: {
|
|
782
796
|
'(document:touchstart)': 'onTouchStart($event)',
|
|
@@ -786,16 +800,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
|
|
|
786
800
|
|
|
787
801
|
class FloatingButtonComponent {
|
|
788
802
|
constructor() {
|
|
789
|
-
this.libraryConfig = input(null,
|
|
790
|
-
|
|
791
|
-
this.
|
|
792
|
-
|
|
793
|
-
this.
|
|
794
|
-
|
|
795
|
-
this.
|
|
803
|
+
this.libraryConfig = input(null, /* @ts-ignore */
|
|
804
|
+
...(ngDevMode ? [{ debugName: "libraryConfig" }] : /* istanbul ignore next */ []));
|
|
805
|
+
this.floatingButtonConfig = input(null, /* @ts-ignore */
|
|
806
|
+
...(ngDevMode ? [{ debugName: "floatingButtonConfig" }] : /* istanbul ignore next */ []));
|
|
807
|
+
this.onTop = input(false, /* @ts-ignore */
|
|
808
|
+
...(ngDevMode ? [{ debugName: "onTop" }] : /* istanbul ignore next */ []));
|
|
809
|
+
this.isMobile = input(false, /* @ts-ignore */
|
|
810
|
+
...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
|
|
811
|
+
this.drawerEnabled = input(false, /* @ts-ignore */
|
|
812
|
+
...(ngDevMode ? [{ debugName: "drawerEnabled" }] : /* istanbul ignore next */ []));
|
|
813
|
+
this.navbarEnabled = input(false, /* @ts-ignore */
|
|
814
|
+
...(ngDevMode ? [{ debugName: "navbarEnabled" }] : /* istanbul ignore next */ []));
|
|
815
|
+
this.bottomBarEnabled = input(false, /* @ts-ignore */
|
|
816
|
+
...(ngDevMode ? [{ debugName: "bottomBarEnabled" }] : /* istanbul ignore next */ []));
|
|
796
817
|
this.floatingButtonConfigUpdateEvent = output();
|
|
797
818
|
this.floatingButtonClickEvent = output();
|
|
798
|
-
this.initialized = signal(false,
|
|
819
|
+
this.initialized = signal(false, /* @ts-ignore */
|
|
820
|
+
...(ngDevMode ? [{ debugName: "initialized" }] : /* istanbul ignore next */ []));
|
|
799
821
|
effect(() => {
|
|
800
822
|
const floatingButtonConfig = this.floatingButtonConfig();
|
|
801
823
|
if (!floatingButtonConfig || this.initialized())
|
|
@@ -815,23 +837,25 @@ class FloatingButtonComponent {
|
|
|
815
837
|
buttonClicked(id) {
|
|
816
838
|
this.floatingButtonClickEvent.emit(id || '');
|
|
817
839
|
}
|
|
818
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
819
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
840
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FloatingButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
841
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FloatingButtonComponent, isStandalone: true, selector: "lf-floating-button", inputs: { libraryConfig: { classPropertyName: "libraryConfig", publicName: "libraryConfig", isSignal: true, isRequired: false, transformFunction: null }, floatingButtonConfig: { classPropertyName: "floatingButtonConfig", publicName: "floatingButtonConfig", isSignal: true, isRequired: false, transformFunction: null }, onTop: { classPropertyName: "onTop", publicName: "onTop", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, drawerEnabled: { classPropertyName: "drawerEnabled", publicName: "drawerEnabled", isSignal: true, isRequired: false, transformFunction: null }, navbarEnabled: { classPropertyName: "navbarEnabled", publicName: "navbarEnabled", isSignal: true, isRequired: false, transformFunction: null }, bottomBarEnabled: { classPropertyName: "bottomBarEnabled", publicName: "bottomBarEnabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { floatingButtonConfigUpdateEvent: "floatingButtonConfigUpdateEvent", floatingButtonClickEvent: "floatingButtonClickEvent" }, ngImport: i0, template: "@if (floatingButtonConfig(); as config) {\r\n @if (config.enable && (!config.autoHide || !onTop())) {\r\n <button\r\n mat-fab\r\n color=\"accent\"\r\n class=\"lf-floating-button lf-transitions\"\r\n [ngClass]=\"config.cssClass + ' ' + config.horizontalPosition\"\r\n [class.sticky]=\"config.sticky\"\r\n [class.show-navbar]=\"isMobile() && navbarEnabled() && !bottomBarEnabled()\"\r\n [class.show-bottom-bar]=\"bottomBarEnabled() && !(isMobile() && navbarEnabled())\"\r\n [class.show-navbar-and-bottom-bar]=\"isMobile() && navbarEnabled() && bottomBarEnabled()\"\r\n [class.show-drawer]=\"!isMobile() && drawerEnabled()\"\r\n [extended]=\"!!config.label\"\r\n [disabled]=\"config.disabled\"\r\n (click)=\"buttonClicked(config.id)\"\r\n [matTooltip]=\"config.tooltip!\">\r\n <!-- icon -->\r\n @if (config.matIcon) {\r\n <mat-icon>\r\n {{ config.matIcon }}\r\n </mat-icon>\r\n } @else if (config.svgIcon) {\r\n <mat-icon [svgIcon]=\"config.svgIcon\"></mat-icon>\r\n }\r\n <!-- svg icon -->\r\n <!-- label -->\r\n @if (config.label) {\r\n <span class=\"lf-floating-button-label\">\r\n {{ config.label }}\r\n </span>\r\n }\r\n </button>\r\n }\r\n}\r\n", styles: [".lf-floating-button{z-index:var(--floating-button-z-index);bottom:var(--floating-button-bottom)}.lf-floating-button.sticky{position:sticky!important}.lf-floating-button.sticky.show-bottom-bar,.lf-floating-button.sticky.show-navbar-and-bottom-bar{bottom:calc(var(--floating-button-bottom) + var(--bottom-bar-height))}.lf-floating-button.sticky.center{left:50%;transform:translate(-50%)}.lf-floating-button.sticky.center.show-drawer{left:calc(50% + var(--drawer-width) / 2)!important}.lf-floating-button.sticky.right{left:100%}.lf-floating-button:not(.sticky){position:fixed!important}.lf-floating-button:not(.sticky).show-navbar{bottom:calc(var(--floating-button-bottom) + var(--navbar-height-mobile))}.lf-floating-button:not(.sticky).show-bottom-bar{bottom:calc(var(--floating-button-bottom) + var(--bottom-bar-height))}.lf-floating-button:not(.sticky).show-navbar-and-bottom-bar{bottom:calc(var(--floating-button-bottom) + var(--navbar-height-mobile) + var(--bottom-bar-height))}.lf-floating-button:not(.sticky).center{left:calc(50% - 4px);transform:translate(-50%)}.lf-floating-button:not(.sticky).center.show-drawer{left:calc(50% + var(--drawer-width) / 2 - 4px)!important}.lf-floating-button:not(.sticky).right{left:calc(100% - (var(--floating-button-right) + 8px));transform:translate(-100%)}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
820
842
|
}
|
|
821
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
843
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FloatingButtonComponent, decorators: [{
|
|
822
844
|
type: Component,
|
|
823
845
|
args: [{ selector: 'lf-floating-button', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatButtonModule, MatIconModule, MatTooltipModule, NgClass], template: "@if (floatingButtonConfig(); as config) {\r\n @if (config.enable && (!config.autoHide || !onTop())) {\r\n <button\r\n mat-fab\r\n color=\"accent\"\r\n class=\"lf-floating-button lf-transitions\"\r\n [ngClass]=\"config.cssClass + ' ' + config.horizontalPosition\"\r\n [class.sticky]=\"config.sticky\"\r\n [class.show-navbar]=\"isMobile() && navbarEnabled() && !bottomBarEnabled()\"\r\n [class.show-bottom-bar]=\"bottomBarEnabled() && !(isMobile() && navbarEnabled())\"\r\n [class.show-navbar-and-bottom-bar]=\"isMobile() && navbarEnabled() && bottomBarEnabled()\"\r\n [class.show-drawer]=\"!isMobile() && drawerEnabled()\"\r\n [extended]=\"!!config.label\"\r\n [disabled]=\"config.disabled\"\r\n (click)=\"buttonClicked(config.id)\"\r\n [matTooltip]=\"config.tooltip!\">\r\n <!-- icon -->\r\n @if (config.matIcon) {\r\n <mat-icon>\r\n {{ config.matIcon }}\r\n </mat-icon>\r\n } @else if (config.svgIcon) {\r\n <mat-icon [svgIcon]=\"config.svgIcon\"></mat-icon>\r\n }\r\n <!-- svg icon -->\r\n <!-- label -->\r\n @if (config.label) {\r\n <span class=\"lf-floating-button-label\">\r\n {{ config.label }}\r\n </span>\r\n }\r\n </button>\r\n }\r\n}\r\n", styles: [".lf-floating-button{z-index:var(--floating-button-z-index);bottom:var(--floating-button-bottom)}.lf-floating-button.sticky{position:sticky!important}.lf-floating-button.sticky.show-bottom-bar,.lf-floating-button.sticky.show-navbar-and-bottom-bar{bottom:calc(var(--floating-button-bottom) + var(--bottom-bar-height))}.lf-floating-button.sticky.center{left:50%;transform:translate(-50%)}.lf-floating-button.sticky.center.show-drawer{left:calc(50% + var(--drawer-width) / 2)!important}.lf-floating-button.sticky.right{left:100%}.lf-floating-button:not(.sticky){position:fixed!important}.lf-floating-button:not(.sticky).show-navbar{bottom:calc(var(--floating-button-bottom) + var(--navbar-height-mobile))}.lf-floating-button:not(.sticky).show-bottom-bar{bottom:calc(var(--floating-button-bottom) + var(--bottom-bar-height))}.lf-floating-button:not(.sticky).show-navbar-and-bottom-bar{bottom:calc(var(--floating-button-bottom) + var(--navbar-height-mobile) + var(--bottom-bar-height))}.lf-floating-button:not(.sticky).center{left:calc(50% - 4px);transform:translate(-50%)}.lf-floating-button:not(.sticky).center.show-drawer{left:calc(50% + var(--drawer-width) / 2 - 4px)!important}.lf-floating-button:not(.sticky).right{left:calc(100% - (var(--floating-button-right) + 8px));transform:translate(-100%)}\n"] }]
|
|
824
846
|
}], ctorParameters: () => [], propDecorators: { libraryConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "libraryConfig", required: false }] }], floatingButtonConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatingButtonConfig", required: false }] }], onTop: [{ type: i0.Input, args: [{ isSignal: true, alias: "onTop", required: false }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], drawerEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerEnabled", required: false }] }], navbarEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "navbarEnabled", required: false }] }], bottomBarEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "bottomBarEnabled", required: false }] }], floatingButtonConfigUpdateEvent: [{ type: i0.Output, args: ["floatingButtonConfigUpdateEvent"] }], floatingButtonClickEvent: [{ type: i0.Output, args: ["floatingButtonClickEvent"] }] } });
|
|
825
847
|
|
|
826
848
|
class FooterComponent {
|
|
827
849
|
constructor() {
|
|
828
|
-
this.libraryConfig = input(null,
|
|
829
|
-
|
|
850
|
+
this.libraryConfig = input(null, /* @ts-ignore */
|
|
851
|
+
...(ngDevMode ? [{ debugName: "libraryConfig" }] : /* istanbul ignore next */ []));
|
|
852
|
+
this.footerConfig = input(null, /* @ts-ignore */
|
|
853
|
+
...(ngDevMode ? [{ debugName: "footerConfig" }] : /* istanbul ignore next */ []));
|
|
830
854
|
}
|
|
831
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
832
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
855
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
856
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FooterComponent, isStandalone: true, selector: "lf-footer", inputs: { libraryConfig: { classPropertyName: "libraryConfig", publicName: "libraryConfig", isSignal: true, isRequired: false, transformFunction: null }, footerConfig: { classPropertyName: "footerConfig", publicName: "footerConfig", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (footerConfig(); as config) {\r\n @if (config.enable) {\r\n <mat-card class=\"lf-footer lf-transitions mat-elevation-z2 p-4\" [ngClass]=\"config.cssClass\">\r\n <!-- svg logo -->\r\n @if (config.svgLogo) {\r\n <mat-icon\r\n class=\"lf-footer-logo mb-4\"\r\n color=\"primary\"\r\n [svgIcon]=\"config.svgLogo!\"></mat-icon>\r\n } @else {\r\n @if (config.imgLogo) {\r\n <img class=\"lf-footer-logo mb-4\" [src]=\"config.imgLogo\" alt=\"Logo\" />\r\n }\r\n }\r\n <!-- img logo -->\r\n <!-- links -->\r\n @if (config.links) {\r\n <div class=\"lf-footer-links mb-4\">\r\n @for (link of config.links; track $index; let i = $index) {\r\n <div class=\"lf-footer-link\" [class.mr-2]=\"i < config.links!.length - 1\">\r\n @if (link.routerLink) {\r\n <a [routerLink]=\"[link.routerLink]\">{{ link.label || '' }}</a>\r\n } @else {\r\n <a [href]=\"link.href\" [target]=\"link.externalTab ? '_blank' : null\">\r\n {{ link.label }}\r\n </a>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n <!-- copyright -->\r\n @if (config.copyright) {\r\n <span class=\"lf-footer-copyright\">\r\n {{ config.copyright }}\r\n </span>\r\n }\r\n </mat-card>\r\n }\r\n}\r\n", styles: [".lf-footer{overflow:hidden;flex-flow:column;align-items:center;justify-content:center;min-height:var(--footer-height);border-radius:0;border-top:1px solid var(--mat-sys-outline-variant, rgba(0, 0, 0, .12))}.lf-footer .lf-footer-logo{width:var(--footer-logo-size);height:var(--footer-logo-size)}.lf-footer .lf-footer-links{display:flex;flex-flow:row wrap;align-items:center;justify-content:center}.lf-footer .lf-footer-links .lf-footer-link a{text-decoration:none;color:unset;font-size:var(--footer-font-size)}.lf-footer .lf-footer-links .lf-footer-link a:hover{color:var(--color-primary)}.lf-footer .lf-footer-copyright{font-size:var(--footer-font-size)}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
833
857
|
}
|
|
834
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
858
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FooterComponent, decorators: [{
|
|
835
859
|
type: Component,
|
|
836
860
|
args: [{ selector: 'lf-footer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [RouterModule, MatCardModule, MatIconModule, NgClass], template: "@if (footerConfig(); as config) {\r\n @if (config.enable) {\r\n <mat-card class=\"lf-footer lf-transitions mat-elevation-z2 p-4\" [ngClass]=\"config.cssClass\">\r\n <!-- svg logo -->\r\n @if (config.svgLogo) {\r\n <mat-icon\r\n class=\"lf-footer-logo mb-4\"\r\n color=\"primary\"\r\n [svgIcon]=\"config.svgLogo!\"></mat-icon>\r\n } @else {\r\n @if (config.imgLogo) {\r\n <img class=\"lf-footer-logo mb-4\" [src]=\"config.imgLogo\" alt=\"Logo\" />\r\n }\r\n }\r\n <!-- img logo -->\r\n <!-- links -->\r\n @if (config.links) {\r\n <div class=\"lf-footer-links mb-4\">\r\n @for (link of config.links; track $index; let i = $index) {\r\n <div class=\"lf-footer-link\" [class.mr-2]=\"i < config.links!.length - 1\">\r\n @if (link.routerLink) {\r\n <a [routerLink]=\"[link.routerLink]\">{{ link.label || '' }}</a>\r\n } @else {\r\n <a [href]=\"link.href\" [target]=\"link.externalTab ? '_blank' : null\">\r\n {{ link.label }}\r\n </a>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n <!-- copyright -->\r\n @if (config.copyright) {\r\n <span class=\"lf-footer-copyright\">\r\n {{ config.copyright }}\r\n </span>\r\n }\r\n </mat-card>\r\n }\r\n}\r\n", styles: [".lf-footer{overflow:hidden;flex-flow:column;align-items:center;justify-content:center;min-height:var(--footer-height);border-radius:0;border-top:1px solid var(--mat-sys-outline-variant, rgba(0, 0, 0, .12))}.lf-footer .lf-footer-logo{width:var(--footer-logo-size);height:var(--footer-logo-size)}.lf-footer .lf-footer-links{display:flex;flex-flow:row wrap;align-items:center;justify-content:center}.lf-footer .lf-footer-links .lf-footer-link a{text-decoration:none;color:unset;font-size:var(--footer-font-size)}.lf-footer .lf-footer-links .lf-footer-link a:hover{color:var(--color-primary)}.lf-footer .lf-footer-copyright{font-size:var(--footer-font-size)}\n"] }]
|
|
837
861
|
}], propDecorators: { libraryConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "libraryConfig", required: false }] }], footerConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerConfig", required: false }] }] } });
|
|
@@ -841,14 +865,19 @@ class InputComponent {
|
|
|
841
865
|
this.dialogRef = inject(MatDialogRef, { optional: true });
|
|
842
866
|
this.inputConfigDialog = inject(MAT_DIALOG_DATA, { optional: true });
|
|
843
867
|
this.destroyRef = inject(DestroyRef);
|
|
844
|
-
this.input = viewChild('input',
|
|
845
|
-
|
|
846
|
-
this.
|
|
868
|
+
this.input = viewChild('input', /* @ts-ignore */
|
|
869
|
+
...(ngDevMode ? [{ debugName: "input" }] : /* istanbul ignore next */ []));
|
|
870
|
+
this.inputConfig = input(null, /* @ts-ignore */
|
|
871
|
+
...(ngDevMode ? [{ debugName: "inputConfig" }] : /* istanbul ignore next */ []));
|
|
872
|
+
this.isMobile = input(false, /* @ts-ignore */
|
|
873
|
+
...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
|
|
847
874
|
this.inputSubmitEvent = output();
|
|
848
875
|
this.inputChangeEvent = output();
|
|
849
876
|
this.inputPrefixActionEvent = output();
|
|
850
|
-
this.inputConfigComputed = computed(() => this.inputConfigDialog ?? this.inputConfig() ?? {},
|
|
851
|
-
|
|
877
|
+
this.inputConfigComputed = computed(() => this.inputConfigDialog ?? this.inputConfig() ?? {}, /* @ts-ignore */
|
|
878
|
+
...(ngDevMode ? [{ debugName: "inputConfigComputed" }] : /* istanbul ignore next */ []));
|
|
879
|
+
this.inputValue = model('', /* @ts-ignore */
|
|
880
|
+
...(ngDevMode ? [{ debugName: "inputValue" }] : /* istanbul ignore next */ []));
|
|
852
881
|
effect(() => {
|
|
853
882
|
const input = this.input();
|
|
854
883
|
if (input && this.inputConfigComputed().autoFocus) {
|
|
@@ -886,10 +915,10 @@ class InputComponent {
|
|
|
886
915
|
this.inputChangeEvent.emit(this.inputValue());
|
|
887
916
|
}
|
|
888
917
|
}
|
|
889
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
890
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
918
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
919
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: InputComponent, isStandalone: true, selector: "lf-input", inputs: { inputConfig: { classPropertyName: "inputConfig", publicName: "inputConfig", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, inputValue: { classPropertyName: "inputValue", publicName: "inputValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputSubmitEvent: "inputSubmitEvent", inputChangeEvent: "inputChangeEvent", inputPrefixActionEvent: "inputPrefixActionEvent", inputValue: "inputValueChange" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (inputConfigComputed(); as config) {\r\n @if (config) {\r\n <mat-form-field class=\"lf-input\" appearance=\"fill\" [class.lf-hide-hint]=\"!config.hint\">\r\n <mat-label>{{ config.label || 'Search' }}</mat-label>\r\n @if (config.hint) {\r\n <mat-hint>{{ config.hint }}</mat-hint>\r\n }\r\n <input\r\n matInput\r\n type=\"text\"\r\n [(ngModel)]=\"inputValue\"\r\n [disabled]=\"config.disabled!\"\r\n (keyup.enter)=\"inputSubmitted(inputValue())\"\r\n (ngModelChange)=\"inputChanged($event)\"\r\n #input />\r\n @if (isMobile()) {\r\n <button mat-icon-button matPrefix color=\"accent\" (click)=\"inputPrefixAction()\">\r\n <mat-icon>arrow_back</mat-icon>\r\n </button>\r\n }\r\n @if (inputValue()) {\r\n <button class=\"lf-input-close-button\" mat-icon-button matSuffix (click)=\"clearInput()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n }\r\n @if (config.matIconSubmit) {\r\n <button\r\n mat-icon-button\r\n matSuffix\r\n color=\"accent\"\r\n type=\"submit\"\r\n (click)=\"inputSubmitted(inputValue())\">\r\n <mat-icon>\r\n {{ config.matIconSubmit }}\r\n </mat-icon>\r\n </button>\r\n }\r\n </mat-form-field>\r\n }\r\n}\r\n", styles: [".lf-input{width:100%}.lf-input ::ng-deep .mdc-text-field{border-radius:var(--header-input-border-radius)!important}.lf-input ::ng-deep .mdc-line-ripple:after{border-bottom-width:0!important}.lf-input ::ng-deep .mdc-line-ripple:before{border-bottom-width:0!important}.lf-input .lf-input-close-button{color:var(--color-gray)}.lf-input.lf-hide-hint ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
891
920
|
}
|
|
892
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
921
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: InputComponent, decorators: [{
|
|
893
922
|
type: Component,
|
|
894
923
|
args: [{ selector: 'lf-input', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [FormsModule, MatFormFieldModule, MatInputModule, MatButtonModule, MatIconModule], template: "@if (inputConfigComputed(); as config) {\r\n @if (config) {\r\n <mat-form-field class=\"lf-input\" appearance=\"fill\" [class.lf-hide-hint]=\"!config.hint\">\r\n <mat-label>{{ config.label || 'Search' }}</mat-label>\r\n @if (config.hint) {\r\n <mat-hint>{{ config.hint }}</mat-hint>\r\n }\r\n <input\r\n matInput\r\n type=\"text\"\r\n [(ngModel)]=\"inputValue\"\r\n [disabled]=\"config.disabled!\"\r\n (keyup.enter)=\"inputSubmitted(inputValue())\"\r\n (ngModelChange)=\"inputChanged($event)\"\r\n #input />\r\n @if (isMobile()) {\r\n <button mat-icon-button matPrefix color=\"accent\" (click)=\"inputPrefixAction()\">\r\n <mat-icon>arrow_back</mat-icon>\r\n </button>\r\n }\r\n @if (inputValue()) {\r\n <button class=\"lf-input-close-button\" mat-icon-button matSuffix (click)=\"clearInput()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n }\r\n @if (config.matIconSubmit) {\r\n <button\r\n mat-icon-button\r\n matSuffix\r\n color=\"accent\"\r\n type=\"submit\"\r\n (click)=\"inputSubmitted(inputValue())\">\r\n <mat-icon>\r\n {{ config.matIconSubmit }}\r\n </mat-icon>\r\n </button>\r\n }\r\n </mat-form-field>\r\n }\r\n}\r\n", styles: [".lf-input{width:100%}.lf-input ::ng-deep .mdc-text-field{border-radius:var(--header-input-border-radius)!important}.lf-input ::ng-deep .mdc-line-ripple:after{border-bottom-width:0!important}.lf-input ::ng-deep .mdc-line-ripple:before{border-bottom-width:0!important}.lf-input .lf-input-close-button{color:var(--color-gray)}.lf-input.lf-hide-hint ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}\n"] }]
|
|
895
924
|
}], ctorParameters: () => [], propDecorators: { input: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], inputConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputConfig", required: false }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], inputSubmitEvent: [{ type: i0.Output, args: ["inputSubmitEvent"] }], inputChangeEvent: [{ type: i0.Output, args: ["inputChangeEvent"] }], inputPrefixActionEvent: [{ type: i0.Output, args: ["inputPrefixActionEvent"] }], inputValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputValue", required: false }] }, { type: i0.Output, args: ["inputValueChange"] }] } });
|
|
@@ -901,11 +930,16 @@ var input_component = /*#__PURE__*/Object.freeze({
|
|
|
901
930
|
|
|
902
931
|
class HeaderComponent {
|
|
903
932
|
constructor() {
|
|
904
|
-
this.libraryConfig = input(null,
|
|
905
|
-
|
|
906
|
-
this.
|
|
907
|
-
|
|
908
|
-
this.
|
|
933
|
+
this.libraryConfig = input(null, /* @ts-ignore */
|
|
934
|
+
...(ngDevMode ? [{ debugName: "libraryConfig" }] : /* istanbul ignore next */ []));
|
|
935
|
+
this.headerConfig = input(null, /* @ts-ignore */
|
|
936
|
+
...(ngDevMode ? [{ debugName: "headerConfig" }] : /* istanbul ignore next */ []));
|
|
937
|
+
this.isMobile = input(false, /* @ts-ignore */
|
|
938
|
+
...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
|
|
939
|
+
this.routeLoading = input(false, /* @ts-ignore */
|
|
940
|
+
...(ngDevMode ? [{ debugName: "routeLoading" }] : /* istanbul ignore next */ []));
|
|
941
|
+
this.currentRoute = input(/* @ts-ignore */
|
|
942
|
+
...(ngDevMode ? [undefined, { debugName: "currentRoute" }] : /* istanbul ignore next */ []));
|
|
909
943
|
this.headerConfigUpdateEvent = output();
|
|
910
944
|
this.headerButtonClickEvent = output();
|
|
911
945
|
this.headerInputSubmitEvent = output();
|
|
@@ -914,7 +948,8 @@ class HeaderComponent {
|
|
|
914
948
|
const currentRoute = this.currentRoute();
|
|
915
949
|
const route = currentRoute?.substring(currentRoute.indexOf('/') + 1) || '';
|
|
916
950
|
return (id) => !!route && !!id && route === id;
|
|
917
|
-
},
|
|
951
|
+
}, /* @ts-ignore */
|
|
952
|
+
...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
|
|
918
953
|
this.rightMobileButton = computed(() => {
|
|
919
954
|
const headerConfig = this.headerConfig();
|
|
920
955
|
const rightMenuButtons = headerConfig?.rightMenuButtons ?? [];
|
|
@@ -931,7 +966,8 @@ class HeaderComponent {
|
|
|
931
966
|
label: config.label,
|
|
932
967
|
menuButtons: includedButtons,
|
|
933
968
|
};
|
|
934
|
-
},
|
|
969
|
+
}, /* @ts-ignore */
|
|
970
|
+
...(ngDevMode ? [{ debugName: "rightMobileButton" }] : /* istanbul ignore next */ []));
|
|
935
971
|
this.rightExcludedButtons = computed(() => {
|
|
936
972
|
const headerConfig = this.headerConfig();
|
|
937
973
|
const rightMenuButtons = headerConfig?.rightMenuButtons ?? [];
|
|
@@ -941,7 +977,8 @@ class HeaderComponent {
|
|
|
941
977
|
if (!config?.enable)
|
|
942
978
|
return null;
|
|
943
979
|
return rightMenuButtons.filter((button) => config.excludeButtonIds?.includes(button.id));
|
|
944
|
-
},
|
|
980
|
+
}, /* @ts-ignore */
|
|
981
|
+
...(ngDevMode ? [{ debugName: "rightExcludedButtons" }] : /* istanbul ignore next */ []));
|
|
945
982
|
}
|
|
946
983
|
buttonClicked(id) {
|
|
947
984
|
if (!id) {
|
|
@@ -958,10 +995,10 @@ class HeaderComponent {
|
|
|
958
995
|
inputClosed() {
|
|
959
996
|
this.headerConfigUpdateEvent.emit({ inputConfig: { enable: false } });
|
|
960
997
|
}
|
|
961
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
962
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: HeaderComponent, isStandalone: true, selector: "lf-header", inputs: { libraryConfig: { classPropertyName: "libraryConfig", publicName: "libraryConfig", isSignal: true, isRequired: false, transformFunction: null }, headerConfig: { classPropertyName: "headerConfig", publicName: "headerConfig", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, routeLoading: { classPropertyName: "routeLoading", publicName: "routeLoading", isSignal: true, isRequired: false, transformFunction: null }, currentRoute: { classPropertyName: "currentRoute", publicName: "currentRoute", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { headerConfigUpdateEvent: "headerConfigUpdateEvent", headerButtonClickEvent: "headerButtonClickEvent", headerInputSubmitEvent: "headerInputSubmitEvent", headerInputChangeEvent: "headerInputChangeEvent" }, ngImport: i0, template: "@if (headerConfig(); as config) {\r\n @if (config.enable) {\r\n <mat-toolbar\r\n class=\"lf-header lf-transitions mat-elevation-z3\"\r\n [class.px-4]=\"!isMobile()\"\r\n [class.px-1]=\"isMobile()\"\r\n [ngClass]=\"config.cssClass\"\r\n [class.lf-gradient]=\"config.gradient\"\r\n color=\"primary\">\r\n <!-- left menu button -->\r\n <ng-container\r\n [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n menuButton: config.leftMenuButton!,\r\n hideLabel: true,\r\n }\"></ng-container>\r\n <!-- logo & title -->\r\n <div\r\n class=\"lf-header-logo-title-wrapper ml-1 mr-2\"\r\n [class.ml-10]=\"config.leftMenuButton && !isMobile()\">\r\n <!-- link wrapper -->\r\n <div\r\n class=\"lf-header-logo-title-wrapper-link\"\r\n [class.lf-clickable]=\"config.titleRouterLink\"\r\n [routerLink]=\"config.titleRouterLink ? [config.titleRouterLink] : null\">\r\n <!-- svg logo -->\r\n @if (config.svgLogo) {\r\n <mat-icon\r\n class=\"lf-header-logo\"\r\n [class.mr-3]=\"config.title\"\r\n [svgIcon]=\"config.svgLogo!\"></mat-icon>\r\n <!-- img logo -->\r\n } @else {\r\n @if (config.imgLogo) {\r\n <img\r\n class=\"lf-header-logo\"\r\n [class.mr-3]=\"config.title\"\r\n [src]=\"config.imgLogo\"\r\n alt=\"Logo\" />\r\n }\r\n }\r\n <!-- title -->\r\n @if (config.title) {\r\n <div class=\"lf-header-title-wrapper\">\r\n @if (config.title) {\r\n <span class=\"lf-header-title\">\r\n {{ config.title }}\r\n </span>\r\n }\r\n @if (config.subtitle) {\r\n <span class=\"lf-header-subtitle\">\r\n {{ config.subtitle }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n <!-- input -->\r\n @if (config.inputConfig?.enable) {\r\n <div class=\"spacer\"></div>\r\n <lf-input\r\n [class.lf-header-input-mobile]=\"isMobile()\"\r\n [class.mx-3]=\"!isMobile()\"\r\n [inputConfig]=\"config.inputConfig!\"\r\n [isMobile]=\"isMobile()\"\r\n (inputSubmitEvent)=\"inputSubmitted($event)\"\r\n (inputChangeEvent)=\"inputChanged($event)\"\r\n (inputPrefixActionEvent)=\"inputClosed()\"></lf-input>\r\n }\r\n <!-- spacer -->\r\n <div class=\"spacer\"></div>\r\n <!-- right menu buttons -->\r\n @if (config.responsiveConfig?.enable && isMobile()) {\r\n @let exludedButtons = rightExcludedButtons();\r\n @for (button of exludedButtons; track button.id) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n menuButton: button,\r\n }\"></ng-container>\r\n }\r\n @let mobileButton = rightMobileButton();\r\n <ng-container\r\n [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n menuButton: mobileButton,\r\n }\"></ng-container>\r\n } @else {\r\n @for (button of config.rightMenuButtons; track button.id) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n menuButton: button,\r\n }\"></ng-container>\r\n }\r\n }\r\n </mat-toolbar>\r\n <!-- loading bar -->\r\n @if (config.loading || (config.showRouteLoading && routeLoading())) {\r\n <mat-progress-bar\r\n class=\"lf-header-progress-bar\"\r\n color=\"accent\"\r\n mode=\"indeterminate\"></mat-progress-bar>\r\n }\r\n }\r\n}\r\n\r\n<!-- header menu button -->\r\n<ng-template #menuButtonTemplate let-menuButton=\"menuButton\" let-hideLabel=\"hideLabel\">\r\n @if (menuButton) {\r\n <!-- label button -->\r\n @if (menuButton.label && !hideLabel) {\r\n <button\r\n mat-button\r\n class=\"lf-header-menu-button\"\r\n [class.lf-header-menu-button-active]=\"isActive()(menuButton.id) && !menuButton.disabled\"\r\n [ngClass]=\"menuButton.cssClass\"\r\n [disabled]=\"menuButton.disabled\"\r\n (click)=\"buttonClicked(menuButton.id)\"\r\n [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n [aria-label]=\"menuButton.label || menuButton.tooltip\"\r\n [matTooltip]=\"menuButton.tooltip\">\r\n <!-- icon -->\r\n @if (menuButton.matIcon) {\r\n <mat-icon>\r\n {{ menuButton.matIcon }}\r\n </mat-icon>\r\n } @else if (menuButton.svgIcon) {\r\n <mat-icon [svgIcon]=\"menuButton.svgIcon\"></mat-icon>\r\n }\r\n <!-- label -->\r\n {{ menuButton.label }}\r\n </button>\r\n <!-- icon button -->\r\n } @else if (menuButton.matIcon || menuButton.svgIcon) {\r\n <button\r\n mat-icon-button\r\n class=\"lf-header-menu-button\"\r\n [ngClass]=\"menuButton.cssClass\"\r\n [disabled]=\"menuButton.disabled\"\r\n (click)=\"buttonClicked(menuButton.id)\"\r\n [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n [matTooltip]=\"menuButton.tooltip\"\r\n [aria-label]=\"menuButton.id || menuButton.tooltip\">\r\n <!-- icon -->\r\n @if (menuButton.matIcon) {\r\n <mat-icon>\r\n {{ menuButton.matIcon }}\r\n </mat-icon>\r\n } @else if (menuButton.svgIcon) {\r\n <mat-icon [svgIcon]=\"menuButton.svgIcon\"></mat-icon>\r\n }\r\n </button>\r\n <!-- img button -->\r\n } @else if (menuButton.imgIcon) {\r\n <img\r\n class=\"lf-header-menu-img\"\r\n [src]=\"menuButton.imgIcon\"\r\n width=\"48\"\r\n height=\"48\"\r\n [ngClass]=\"menuButton.cssClass\"\r\n (click)=\"buttonClicked(menuButton.id)\"\r\n [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n [matTooltip]=\"menuButton.tooltip\"\r\n [aria-label]=\"menuButton.id || menuButton.tooltip\" />\r\n }\r\n <!-- menu -->\r\n <mat-menu #menu=\"matMenu\">\r\n <!-- label menu buttons -->\r\n @for (button of menuButton.menuButtons; track button.id) {\r\n <!-- menu button -->\r\n @if (button.label) {\r\n <button\r\n mat-menu-item\r\n [class.lf-header-menu-button-active]=\"isActive()(button.id)\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"button.disabled\"\r\n (click)=\"buttonClicked(button.id)\"\r\n [matTooltip]=\"button.tooltip\"\r\n [aria-label]=\"button.label\">\r\n <!-- icon -->\r\n @if (button.matIcon) {\r\n <mat-icon>\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n } @else if (button.svgIcon) {\r\n <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n }\r\n <!-- label -->\r\n <span>{{ button.label }}</span>\r\n </button>\r\n }\r\n }\r\n <!-- icon menu buttons -->\r\n <div mat-menu-item class=\"lf-menu-icons px-1\" [disableRipple]=\"true\">\r\n @for (button of menuButton.menuButtons; track button.id) {\r\n <!-- icon button -->\r\n @if (!button.label && (button.matIcon || button.svgIcon)) {\r\n <button\r\n mat-icon-button\r\n class=\"lf-menu-icon-button\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"button.disabled\"\r\n (click)=\"buttonClicked(button.id)\"\r\n [matTooltip]=\"button.tooltip\"\r\n [aria-label]=\"button.id || button.tooltip\"\r\n tabindex=\"0\">\r\n <!-- icon -->\r\n @if (button.matIcon) {\r\n <mat-icon>\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n } @else if (button.svgIcon) {\r\n <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n }\r\n </button>\r\n }\r\n }\r\n </div>\r\n </mat-menu>\r\n }\r\n</ng-template>\r\n", styles: [".lf-header{z-index:var(--header-z-index);position:fixed;top:0;height:var(--header-height)}.lf-header .lf-header-menu-button{flex-shrink:0;max-width:var(--header-menu-button-max-width)}.lf-header .lf-header-menu-button ::ng-deep .mdc-button__label{overflow:hidden;text-overflow:ellipsis}.lf-header .lf-header-menu-button.lf-header-menu-button-active{background-color:#fff}.lf-header .lf-header-menu-img{width:var(--header-menu-img-size);height:var(--header-menu-img-size);border-radius:50%;flex-shrink:0;object-fit:cover;box-sizing:border-box;cursor:pointer}.lf-header .lf-header-logo-title-wrapper{flex:0 0 auto;max-width:var(--header-logo-title-wrapper-max-width);overflow:hidden;display:flex}.lf-header .lf-header-logo-title-wrapper .lf-header-logo-title-wrapper-link{display:flex;flex-flow:row nowrap;align-items:center;flex:0}.lf-header .lf-header-logo-title-wrapper .lf-header-logo-title-wrapper-link.lf-clickable{cursor:pointer}.lf-header .lf-header-logo-title-wrapper .lf-header-logo{width:var(--header-logo-size);height:var(--header-logo-size);min-width:var(--header-logo-size);min-height:var(--header-logo-size)}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper{display:flex;flex-flow:column}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-title{font-size:var(--header-title-font-size);line-height:calc(var(--header-title-font-size) + 8px)}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-subtitle{font-size:var(--header-subtitle-font-size);line-height:var(--header-subtitle-font-size)}.lf-header lf-input{z-index:var(--header-z-index);flex:1 1 var(--header-input-max-width)}.lf-header lf-input.lf-header-input-mobile{position:fixed!important;left:4px!important;right:4px!important;width:unset!important;max-width:unset!important}.lf-header .spacer{flex:1 0 auto}.lf-menu-icons{min-height:unset!important;cursor:unset!important}.lf-menu-icons:hover{background:transparent!important}.lf-header-progress-bar{z-index:var(--header-z-index);position:fixed;top:var(--header-height)}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$3.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: i3$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.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: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputComponent, selector: "lf-input", inputs: ["inputConfig", "isMobile", "inputValue"], outputs: ["inputSubmitEvent", "inputChangeEvent", "inputPrefixActionEvent", "inputValueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
998
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
999
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: HeaderComponent, isStandalone: true, selector: "lf-header", inputs: { libraryConfig: { classPropertyName: "libraryConfig", publicName: "libraryConfig", isSignal: true, isRequired: false, transformFunction: null }, headerConfig: { classPropertyName: "headerConfig", publicName: "headerConfig", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, routeLoading: { classPropertyName: "routeLoading", publicName: "routeLoading", isSignal: true, isRequired: false, transformFunction: null }, currentRoute: { classPropertyName: "currentRoute", publicName: "currentRoute", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { headerConfigUpdateEvent: "headerConfigUpdateEvent", headerButtonClickEvent: "headerButtonClickEvent", headerInputSubmitEvent: "headerInputSubmitEvent", headerInputChangeEvent: "headerInputChangeEvent" }, ngImport: i0, template: "@if (headerConfig(); as config) {\r\n @if (config.enable) {\r\n <mat-toolbar\r\n class=\"lf-header lf-transitions mat-elevation-z3\"\r\n [class.px-4]=\"!isMobile()\"\r\n [class.px-1]=\"isMobile()\"\r\n [ngClass]=\"config.cssClass\"\r\n [class.lf-gradient]=\"config.gradient\"\r\n color=\"primary\">\r\n <!-- left menu button -->\r\n <ng-container\r\n [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n menuButton: config.leftMenuButton!,\r\n hideLabel: true,\r\n }\"></ng-container>\r\n <!-- logo & title -->\r\n <div\r\n class=\"lf-header-logo-title-wrapper ml-1 mr-2\"\r\n [class.ml-10]=\"config.leftMenuButton && !isMobile()\">\r\n <!-- link wrapper -->\r\n <div\r\n class=\"lf-header-logo-title-wrapper-link\"\r\n [class.lf-clickable]=\"config.titleRouterLink\"\r\n [routerLink]=\"config.titleRouterLink ? [config.titleRouterLink] : null\">\r\n <!-- svg logo -->\r\n @if (config.svgLogo) {\r\n <mat-icon\r\n class=\"lf-header-logo\"\r\n [class.mr-3]=\"config.title\"\r\n [svgIcon]=\"config.svgLogo!\"></mat-icon>\r\n <!-- img logo -->\r\n } @else {\r\n @if (config.imgLogo) {\r\n <img\r\n class=\"lf-header-logo\"\r\n [class.mr-3]=\"config.title\"\r\n [src]=\"config.imgLogo\"\r\n alt=\"Logo\" />\r\n }\r\n }\r\n <!-- title -->\r\n @if (config.title) {\r\n <div class=\"lf-header-title-wrapper\">\r\n @if (config.title) {\r\n <span class=\"lf-header-title\">\r\n {{ config.title }}\r\n </span>\r\n }\r\n @if (config.subtitle) {\r\n <span class=\"lf-header-subtitle\">\r\n {{ config.subtitle }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n <!-- input -->\r\n @if (config.inputConfig?.enable) {\r\n <div class=\"spacer\"></div>\r\n <lf-input\r\n [class.lf-header-input-mobile]=\"isMobile()\"\r\n [class.mx-3]=\"!isMobile()\"\r\n [inputConfig]=\"config.inputConfig!\"\r\n [isMobile]=\"isMobile()\"\r\n (inputSubmitEvent)=\"inputSubmitted($event)\"\r\n (inputChangeEvent)=\"inputChanged($event)\"\r\n (inputPrefixActionEvent)=\"inputClosed()\"></lf-input>\r\n }\r\n <!-- spacer -->\r\n <div class=\"spacer\"></div>\r\n <!-- right menu buttons -->\r\n @if (config.responsiveConfig?.enable && isMobile()) {\r\n @let exludedButtons = rightExcludedButtons();\r\n @for (button of exludedButtons; track button.id) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n menuButton: button,\r\n }\"></ng-container>\r\n }\r\n @let mobileButton = rightMobileButton();\r\n <ng-container\r\n [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n menuButton: mobileButton,\r\n }\"></ng-container>\r\n } @else {\r\n @for (button of config.rightMenuButtons; track button.id) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"menuButtonTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n menuButton: button,\r\n }\"></ng-container>\r\n }\r\n }\r\n </mat-toolbar>\r\n <!-- loading bar -->\r\n @if (config.loading || (config.showRouteLoading && routeLoading())) {\r\n <mat-progress-bar\r\n class=\"lf-header-progress-bar\"\r\n color=\"accent\"\r\n mode=\"indeterminate\"></mat-progress-bar>\r\n }\r\n }\r\n}\r\n\r\n<!-- header menu button -->\r\n<ng-template #menuButtonTemplate let-menuButton=\"menuButton\" let-hideLabel=\"hideLabel\">\r\n @if (menuButton) {\r\n <!-- label button -->\r\n @if (menuButton.label && !hideLabel) {\r\n <button\r\n mat-button\r\n class=\"lf-header-menu-button\"\r\n [class.lf-header-menu-button-active]=\"isActive()(menuButton.id) && !menuButton.disabled\"\r\n [ngClass]=\"menuButton.cssClass\"\r\n [disabled]=\"menuButton.disabled\"\r\n (click)=\"buttonClicked(menuButton.id)\"\r\n [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n [aria-label]=\"menuButton.label || menuButton.tooltip\"\r\n [matTooltip]=\"menuButton.tooltip\">\r\n <!-- icon -->\r\n @if (menuButton.matIcon) {\r\n <mat-icon>\r\n {{ menuButton.matIcon }}\r\n </mat-icon>\r\n } @else if (menuButton.svgIcon) {\r\n <mat-icon [svgIcon]=\"menuButton.svgIcon\"></mat-icon>\r\n }\r\n <!-- label -->\r\n {{ menuButton.label }}\r\n </button>\r\n <!-- icon button -->\r\n } @else if (menuButton.matIcon || menuButton.svgIcon) {\r\n <button\r\n mat-icon-button\r\n class=\"lf-header-menu-button\"\r\n [ngClass]=\"menuButton.cssClass\"\r\n [disabled]=\"menuButton.disabled\"\r\n (click)=\"buttonClicked(menuButton.id)\"\r\n [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n [matTooltip]=\"menuButton.tooltip\"\r\n [aria-label]=\"menuButton.id || menuButton.tooltip\">\r\n <!-- icon -->\r\n @if (menuButton.matIcon) {\r\n <mat-icon>\r\n {{ menuButton.matIcon }}\r\n </mat-icon>\r\n } @else if (menuButton.svgIcon) {\r\n <mat-icon [svgIcon]=\"menuButton.svgIcon\"></mat-icon>\r\n }\r\n </button>\r\n <!-- img button -->\r\n } @else if (menuButton.imgIcon) {\r\n <img\r\n class=\"lf-header-menu-img\"\r\n [src]=\"menuButton.imgIcon\"\r\n width=\"48\"\r\n height=\"48\"\r\n [ngClass]=\"menuButton.cssClass\"\r\n (click)=\"buttonClicked(menuButton.id)\"\r\n [matMenuTriggerFor]=\"menuButton.menuButtons ? menu : null\"\r\n [matTooltip]=\"menuButton.tooltip\"\r\n [aria-label]=\"menuButton.id || menuButton.tooltip\" />\r\n }\r\n <!-- menu -->\r\n <mat-menu #menu=\"matMenu\">\r\n <!-- label menu buttons -->\r\n @for (button of menuButton.menuButtons; track button.id) {\r\n <!-- menu button -->\r\n @if (button.label) {\r\n <button\r\n mat-menu-item\r\n [class.lf-header-menu-button-active]=\"isActive()(button.id)\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"button.disabled\"\r\n (click)=\"buttonClicked(button.id)\"\r\n [matTooltip]=\"button.tooltip\"\r\n [aria-label]=\"button.label\">\r\n <!-- icon -->\r\n @if (button.matIcon) {\r\n <mat-icon>\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n } @else if (button.svgIcon) {\r\n <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n }\r\n <!-- label -->\r\n <span>{{ button.label }}</span>\r\n </button>\r\n }\r\n }\r\n <!-- icon menu buttons -->\r\n <div mat-menu-item class=\"lf-menu-icons px-1\" [disableRipple]=\"true\">\r\n @for (button of menuButton.menuButtons; track button.id) {\r\n <!-- icon button -->\r\n @if (!button.label && (button.matIcon || button.svgIcon)) {\r\n <button\r\n mat-icon-button\r\n class=\"lf-menu-icon-button\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"button.disabled\"\r\n (click)=\"buttonClicked(button.id)\"\r\n [matTooltip]=\"button.tooltip\"\r\n [aria-label]=\"button.id || button.tooltip\"\r\n tabindex=\"0\">\r\n <!-- icon -->\r\n @if (button.matIcon) {\r\n <mat-icon>\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n } @else if (button.svgIcon) {\r\n <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n }\r\n </button>\r\n }\r\n }\r\n </div>\r\n </mat-menu>\r\n }\r\n</ng-template>\r\n", styles: [".lf-header{z-index:var(--header-z-index);position:fixed;top:0;height:var(--header-height)}.lf-header .lf-header-menu-button{flex-shrink:0;max-width:var(--header-menu-button-max-width)}.lf-header .lf-header-menu-button ::ng-deep .mdc-button__label{overflow:hidden;text-overflow:ellipsis}.lf-header .lf-header-menu-button.lf-header-menu-button-active{background-color:#fff}.lf-header .lf-header-menu-img{width:var(--header-menu-img-size);height:var(--header-menu-img-size);border-radius:50%;flex-shrink:0;object-fit:cover;box-sizing:border-box;cursor:pointer}.lf-header .lf-header-logo-title-wrapper{flex:0 0 auto;max-width:var(--header-logo-title-wrapper-max-width);overflow:hidden;display:flex}.lf-header .lf-header-logo-title-wrapper .lf-header-logo-title-wrapper-link{display:flex;flex-flow:row nowrap;align-items:center;flex:0}.lf-header .lf-header-logo-title-wrapper .lf-header-logo-title-wrapper-link.lf-clickable{cursor:pointer}.lf-header .lf-header-logo-title-wrapper .lf-header-logo{width:var(--header-logo-size);height:var(--header-logo-size);min-width:var(--header-logo-size);min-height:var(--header-logo-size)}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper{display:flex;flex-flow:column}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-title{font-size:var(--header-title-font-size);line-height:calc(var(--header-title-font-size) + 8px)}.lf-header .lf-header-logo-title-wrapper .lf-header-title-wrapper .lf-header-subtitle{font-size:var(--header-subtitle-font-size);line-height:var(--header-subtitle-font-size)}.lf-header lf-input{z-index:var(--header-z-index);flex:1 1 var(--header-input-max-width)}.lf-header lf-input.lf-header-input-mobile{position:fixed!important;left:4px!important;right:4px!important;width:unset!important;max-width:unset!important}.lf-header .spacer{flex:1 0 auto}.lf-menu-icons{min-height:unset!important;cursor:unset!important}.lf-menu-icons:hover{background:transparent!important}.lf-header-progress-bar{z-index:var(--header-z-index);position:fixed;top:var(--header-height)}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$3.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: i3$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.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: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputComponent, selector: "lf-input", inputs: ["inputConfig", "isMobile", "inputValue"], outputs: ["inputSubmitEvent", "inputChangeEvent", "inputPrefixActionEvent", "inputValueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
963
1000
|
}
|
|
964
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1001
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: HeaderComponent, decorators: [{
|
|
965
1002
|
type: Component,
|
|
966
1003
|
args: [{ selector: 'lf-header', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
|
|
967
1004
|
RouterModule,
|
|
@@ -981,34 +1018,41 @@ class LoadingOverlayComponent {
|
|
|
981
1018
|
constructor() {
|
|
982
1019
|
this.libraryConfig = inject(CONFIG, { optional: true });
|
|
983
1020
|
this.scaffoldService = inject(ScaffoldService);
|
|
984
|
-
this.loadingOverlayConfig = signal(null,
|
|
985
|
-
|
|
1021
|
+
this.loadingOverlayConfig = signal(null, /* @ts-ignore */
|
|
1022
|
+
...(ngDevMode ? [{ debugName: "loadingOverlayConfig" }] : /* istanbul ignore next */ []));
|
|
1023
|
+
this.portal = signal(null, /* @ts-ignore */
|
|
1024
|
+
...(ngDevMode ? [{ debugName: "portal" }] : /* istanbul ignore next */ []));
|
|
986
1025
|
this.loadingOverlayConfig.set(this.scaffoldService.scaffoldConfig?.loadingOverlayConfig || null);
|
|
987
1026
|
const customComponent = this.loadingOverlayConfig()?.customComponent || null;
|
|
988
1027
|
if (customComponent) {
|
|
989
1028
|
this.portal.set(new ComponentPortal(customComponent));
|
|
990
1029
|
}
|
|
991
1030
|
}
|
|
992
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
993
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1031
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: LoadingOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1032
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: LoadingOverlayComponent, isStandalone: true, selector: "lf-loading-overlay", ngImport: i0, template: "@if (portal(); as portal) {\r\n <ng-template [cdkPortalOutlet]=\"portal\"></ng-template>\r\n} @else {\r\n <div\r\n [ngClass]=\"$safeNavigationMigration(loadingOverlayConfig()?.cssClass)\"\r\n [class.lf-gradient-spinner]=\"loadingOverlayConfig()?.gradient\">\r\n <mat-progress-spinner mode=\"indeterminate\"></mat-progress-spinner>\r\n </div>\r\n}\r\n", styles: [".lf-gradient-spinner{position:relative;display:inline-block}.lf-gradient-spinner mat-progress-spinner,.lf-gradient-spinner mat-spinner{opacity:0}.lf-gradient-spinner:before{content:\"\";position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--color-primary),var(--color-accent));-webkit-mask:radial-gradient(farthest-side,transparent 78%,black 79%);mask:radial-gradient(farthest-side,transparent 78%,black 79%);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
994
1033
|
}
|
|
995
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1034
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: LoadingOverlayComponent, decorators: [{
|
|
996
1035
|
type: Component,
|
|
997
|
-
args: [{ selector: 'lf-loading-overlay', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [PortalModule, MatProgressSpinner, NgClass], template: "@if (portal(); as portal) {\r\n <ng-template [cdkPortalOutlet]=\"portal\"></ng-template>\r\n} @else {\r\n <div\r\n [ngClass]=\"loadingOverlayConfig()?.cssClass\"\r\n [class.lf-gradient-spinner]=\"loadingOverlayConfig()?.gradient\">\r\n <mat-progress-spinner mode=\"indeterminate\"></mat-progress-spinner>\r\n </div>\r\n}\r\n", styles: [".lf-gradient-spinner{position:relative;display:inline-block}.lf-gradient-spinner mat-progress-spinner,.lf-gradient-spinner mat-spinner{opacity:0}.lf-gradient-spinner:before{content:\"\";position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--color-primary),var(--color-accent));-webkit-mask:radial-gradient(farthest-side,transparent 78%,black 79%);mask:radial-gradient(farthest-side,transparent 78%,black 79%);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
|
|
1036
|
+
args: [{ selector: 'lf-loading-overlay', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [PortalModule, MatProgressSpinner, NgClass], template: "@if (portal(); as portal) {\r\n <ng-template [cdkPortalOutlet]=\"portal\"></ng-template>\r\n} @else {\r\n <div\r\n [ngClass]=\"$safeNavigationMigration(loadingOverlayConfig()?.cssClass)\"\r\n [class.lf-gradient-spinner]=\"loadingOverlayConfig()?.gradient\">\r\n <mat-progress-spinner mode=\"indeterminate\"></mat-progress-spinner>\r\n </div>\r\n}\r\n", styles: [".lf-gradient-spinner{position:relative;display:inline-block}.lf-gradient-spinner mat-progress-spinner,.lf-gradient-spinner mat-spinner{opacity:0}.lf-gradient-spinner:before{content:\"\";position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--color-primary),var(--color-accent));-webkit-mask:radial-gradient(farthest-side,transparent 78%,black 79%);mask:radial-gradient(farthest-side,transparent 78%,black 79%);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
|
|
998
1037
|
}], ctorParameters: () => [] });
|
|
999
1038
|
|
|
1000
1039
|
class NavbarComponent {
|
|
1001
1040
|
constructor() {
|
|
1002
|
-
this.libraryConfig = input(null,
|
|
1003
|
-
|
|
1004
|
-
this.
|
|
1005
|
-
|
|
1041
|
+
this.libraryConfig = input(null, /* @ts-ignore */
|
|
1042
|
+
...(ngDevMode ? [{ debugName: "libraryConfig" }] : /* istanbul ignore next */ []));
|
|
1043
|
+
this.navbarConfig = input(null, /* @ts-ignore */
|
|
1044
|
+
...(ngDevMode ? [{ debugName: "navbarConfig" }] : /* istanbul ignore next */ []));
|
|
1045
|
+
this.isMobile = input(false, /* @ts-ignore */
|
|
1046
|
+
...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
|
|
1047
|
+
this.currentRoute = input(/* @ts-ignore */
|
|
1048
|
+
...(ngDevMode ? [undefined, { debugName: "currentRoute" }] : /* istanbul ignore next */ []));
|
|
1006
1049
|
this.navbarButtonClickEvent = output();
|
|
1007
1050
|
this.isActive = computed(() => {
|
|
1008
1051
|
const currentRoute = this.currentRoute();
|
|
1009
1052
|
const route = currentRoute?.substring(currentRoute.indexOf('/') + 1) || '';
|
|
1010
1053
|
return (id) => !!route && !!id && route === id;
|
|
1011
|
-
},
|
|
1054
|
+
}, /* @ts-ignore */
|
|
1055
|
+
...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
|
|
1012
1056
|
}
|
|
1013
1057
|
buttonClicked(id) {
|
|
1014
1058
|
if (!id) {
|
|
@@ -1016,10 +1060,10 @@ class NavbarComponent {
|
|
|
1016
1060
|
}
|
|
1017
1061
|
this.navbarButtonClickEvent.emit(id);
|
|
1018
1062
|
}
|
|
1019
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1020
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1063
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1064
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NavbarComponent, isStandalone: true, selector: "lf-navbar", inputs: { libraryConfig: { classPropertyName: "libraryConfig", publicName: "libraryConfig", isSignal: true, isRequired: false, transformFunction: null }, navbarConfig: { classPropertyName: "navbarConfig", publicName: "navbarConfig", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, currentRoute: { classPropertyName: "currentRoute", publicName: "currentRoute", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navbarButtonClickEvent: "navbarButtonClickEvent" }, ngImport: i0, template: "@if (navbarConfig(); as config) {\r\n @if (config.enable) {\r\n <div\r\n [animate.enter]=\"isMobile() ? 'lf-anim-slide-up-enter' : 'lf-anim-slide-left-enter'\"\r\n [animate.leave]=\"isMobile() ? 'lf-anim-slide-up-leave' : 'lf-anim-slide-left-leave'\"\r\n class=\"mat-app-background lf-transitions mat-elevation-z3\"\r\n [class.lf-navbar]=\"!isMobile()\"\r\n [class.lf-navbar-mobile]=\"isMobile()\"\r\n [ngClass]=\"config.cssClass\">\r\n <!-- items -->\r\n <div [class.lf-navbar-items]=\"!isMobile()\" [class.lf-navbar-mobile-items]=\"isMobile()\">\r\n <!-- item -->\r\n @for (button of config.buttons; track button.id; let i = $index) {\r\n @if (i < 5) {\r\n <div\r\n class=\"lf-navbar-item\"\r\n [class.lf-navbar-item-active]=\"isActive()(button.id)\"\r\n [ngClass]=\"button.cssClass\"\r\n (click)=\"buttonClicked(button.id)\"\r\n tabindex=\"0\"\r\n role=\"button\"\r\n [matTooltip]=\"button.tooltip\">\r\n <!-- icon -->\r\n @if (button.matIcon) {\r\n <mat-icon>\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n } @else if (button.svgIcon) {\r\n <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n }\r\n <!-- label -->\r\n <!-- show a protected space on desktop so the icon doesn't move up and down -->\r\n @if (button?.label) {\r\n <span class=\"lf-navbar-item-label\">\r\n {{\r\n isActive()(button.id) || config.showAllLabels\r\n ? button.label\r\n : isMobile()\r\n ? ''\r\n : ' '\r\n }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n }\r\n}\r\n", styles: [".lf-navbar{z-index:var(--navbar-z-index);position:fixed;left:0;top:0;height:100dvh;padding:calc(var(--header-height) + 16px) var(--navbar-padding) 0 var(--navbar-padding);border-right:solid 1px rgba(0,0,0,.12)}.lf-navbar .lf-navbar-items{display:flex;flex-flow:column;align-items:center}.lf-navbar-mobile{z-index:var(--navbar-z-index);position:fixed;left:0;bottom:0;width:100vw;padding:var(--navbar-padding) 0;box-sizing:border-box;border-top:solid 1px rgba(0,0,0,.12)}.lf-navbar-mobile .lf-navbar-mobile-items{display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-evenly}.lf-navbar-mobile .lf-navbar-mobile-items .lf-navbar-item{height:var(--navbar-height-mobile)!important}.lf-navbar-item{width:var(--navbar-width);height:var(--navbar-height);display:flex;align-items:center;justify-content:center;flex-flow:column;border-radius:var(--navbar-item-border-radius);cursor:pointer}.lf-navbar-item.lf-navbar-item-active{color:var(--color-primary)}.lf-navbar-item .lf-navbar-item-icon{width:calc(var(--navbar-width) / 3);height:calc(var(--navbar-height) / 3);overflow:visible!important}.lf-navbar-item .lf-navbar-item-label{max-width:var(--navbar-width);white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;text-transform:none;vertical-align:top;font-size:var(--navbar-item-label-font-size);font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1021
1065
|
}
|
|
1022
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1066
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NavbarComponent, decorators: [{
|
|
1023
1067
|
type: Component,
|
|
1024
1068
|
args: [{ selector: 'lf-navbar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatIconModule, MatTooltipModule, NgClass], template: "@if (navbarConfig(); as config) {\r\n @if (config.enable) {\r\n <div\r\n [animate.enter]=\"isMobile() ? 'lf-anim-slide-up-enter' : 'lf-anim-slide-left-enter'\"\r\n [animate.leave]=\"isMobile() ? 'lf-anim-slide-up-leave' : 'lf-anim-slide-left-leave'\"\r\n class=\"mat-app-background lf-transitions mat-elevation-z3\"\r\n [class.lf-navbar]=\"!isMobile()\"\r\n [class.lf-navbar-mobile]=\"isMobile()\"\r\n [ngClass]=\"config.cssClass\">\r\n <!-- items -->\r\n <div [class.lf-navbar-items]=\"!isMobile()\" [class.lf-navbar-mobile-items]=\"isMobile()\">\r\n <!-- item -->\r\n @for (button of config.buttons; track button.id; let i = $index) {\r\n @if (i < 5) {\r\n <div\r\n class=\"lf-navbar-item\"\r\n [class.lf-navbar-item-active]=\"isActive()(button.id)\"\r\n [ngClass]=\"button.cssClass\"\r\n (click)=\"buttonClicked(button.id)\"\r\n tabindex=\"0\"\r\n role=\"button\"\r\n [matTooltip]=\"button.tooltip\">\r\n <!-- icon -->\r\n @if (button.matIcon) {\r\n <mat-icon>\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n } @else if (button.svgIcon) {\r\n <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n }\r\n <!-- label -->\r\n <!-- show a protected space on desktop so the icon doesn't move up and down -->\r\n @if (button?.label) {\r\n <span class=\"lf-navbar-item-label\">\r\n {{\r\n isActive()(button.id) || config.showAllLabels\r\n ? button.label\r\n : isMobile()\r\n ? ''\r\n : ' '\r\n }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n }\r\n}\r\n", styles: [".lf-navbar{z-index:var(--navbar-z-index);position:fixed;left:0;top:0;height:100dvh;padding:calc(var(--header-height) + 16px) var(--navbar-padding) 0 var(--navbar-padding);border-right:solid 1px rgba(0,0,0,.12)}.lf-navbar .lf-navbar-items{display:flex;flex-flow:column;align-items:center}.lf-navbar-mobile{z-index:var(--navbar-z-index);position:fixed;left:0;bottom:0;width:100vw;padding:var(--navbar-padding) 0;box-sizing:border-box;border-top:solid 1px rgba(0,0,0,.12)}.lf-navbar-mobile .lf-navbar-mobile-items{display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-evenly}.lf-navbar-mobile .lf-navbar-mobile-items .lf-navbar-item{height:var(--navbar-height-mobile)!important}.lf-navbar-item{width:var(--navbar-width);height:var(--navbar-height);display:flex;align-items:center;justify-content:center;flex-flow:column;border-radius:var(--navbar-item-border-radius);cursor:pointer}.lf-navbar-item.lf-navbar-item-active{color:var(--color-primary)}.lf-navbar-item .lf-navbar-item-icon{width:calc(var(--navbar-width) / 3);height:calc(var(--navbar-height) / 3);overflow:visible!important}.lf-navbar-item .lf-navbar-item-label{max-width:var(--navbar-width);white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;text-transform:none;vertical-align:top;font-size:var(--navbar-item-label-font-size);font-weight:500}\n"] }]
|
|
1025
1069
|
}], propDecorators: { libraryConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "libraryConfig", required: false }] }], navbarConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "navbarConfig", required: false }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], currentRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentRoute", required: false }] }], navbarButtonClickEvent: [{ type: i0.Output, args: ["navbarButtonClickEvent"] }] } });
|
|
@@ -1035,8 +1079,10 @@ class ScaffoldComponent {
|
|
|
1035
1079
|
this.document = inject(DOCUMENT);
|
|
1036
1080
|
this.logger = inject(Logger);
|
|
1037
1081
|
this.destroyRef = inject(DestroyRef);
|
|
1038
|
-
this.scrollContainer = viewChild('scrollContainer',
|
|
1039
|
-
|
|
1082
|
+
this.scrollContainer = viewChild('scrollContainer', /* @ts-ignore */
|
|
1083
|
+
...(ngDevMode ? [{ debugName: "scrollContainer" }] : /* istanbul ignore next */ []));
|
|
1084
|
+
this.content = viewChild('content', /* @ts-ignore */
|
|
1085
|
+
...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
|
|
1040
1086
|
this.headerButtonClickEvent = output();
|
|
1041
1087
|
this.headerInputSubmitEvent = output();
|
|
1042
1088
|
this.headerInputChangeEvent = output();
|
|
@@ -1046,14 +1092,21 @@ class ScaffoldComponent {
|
|
|
1046
1092
|
this.scaffoldConfig = toSignal(this.scaffoldService.scaffoldConfig$, {
|
|
1047
1093
|
initialValue: null,
|
|
1048
1094
|
});
|
|
1049
|
-
this.headerConfig = computed(() => this.scaffoldConfig()?.headerConfig || null,
|
|
1050
|
-
|
|
1051
|
-
this.
|
|
1095
|
+
this.headerConfig = computed(() => this.scaffoldConfig()?.headerConfig || null, /* @ts-ignore */
|
|
1096
|
+
...(ngDevMode ? [{ debugName: "headerConfig" }] : /* istanbul ignore next */ []));
|
|
1097
|
+
this.navbarConfig = computed(() => this.scaffoldConfig()?.navbarConfig || null, /* @ts-ignore */
|
|
1098
|
+
...(ngDevMode ? [{ debugName: "navbarConfig" }] : /* istanbul ignore next */ []));
|
|
1099
|
+
this.drawerConfig = computed(() => this.scaffoldConfig()?.drawerConfig || null, /* @ts-ignore */
|
|
1100
|
+
...(ngDevMode ? [{ debugName: "drawerConfig" }] : /* istanbul ignore next */ []));
|
|
1052
1101
|
this.drawerPortal = toSignal(this.scaffoldService.drawerPortal$);
|
|
1053
|
-
this.footerConfig = computed(() => this.scaffoldConfig()?.footerConfig || null,
|
|
1054
|
-
|
|
1055
|
-
this.
|
|
1056
|
-
|
|
1102
|
+
this.footerConfig = computed(() => this.scaffoldConfig()?.footerConfig || null, /* @ts-ignore */
|
|
1103
|
+
...(ngDevMode ? [{ debugName: "footerConfig" }] : /* istanbul ignore next */ []));
|
|
1104
|
+
this.contentTitleCardConfig = computed(() => this.scaffoldConfig()?.contentTitleCardConfig || null, /* @ts-ignore */
|
|
1105
|
+
...(ngDevMode ? [{ debugName: "contentTitleCardConfig" }] : /* istanbul ignore next */ []));
|
|
1106
|
+
this.floatingButtonConfig = computed(() => this.scaffoldConfig()?.floatingButtonConfig || null, /* @ts-ignore */
|
|
1107
|
+
...(ngDevMode ? [{ debugName: "floatingButtonConfig" }] : /* istanbul ignore next */ []));
|
|
1108
|
+
this.bottomBarConfig = computed(() => this.scaffoldConfig()?.bottomBarConfig || null, /* @ts-ignore */
|
|
1109
|
+
...(ngDevMode ? [{ debugName: "bottomBarConfig" }] : /* istanbul ignore next */ []));
|
|
1057
1110
|
this.routeHistory = toSignal(this.routerService.routeHistory$.pipe(tap((routeHistory) => {
|
|
1058
1111
|
if (this.libraryConfig?.debugging)
|
|
1059
1112
|
this.logger.log('[RouteHistory]', routeHistory);
|
|
@@ -1070,8 +1123,10 @@ class ScaffoldComponent {
|
|
|
1070
1123
|
return (breakpointState.breakpoints[Breakpoints.XSmall] ||
|
|
1071
1124
|
breakpointState.breakpoints[Breakpoints.Small]);
|
|
1072
1125
|
})));
|
|
1073
|
-
this.scrollTopPosition = signal(0,
|
|
1074
|
-
|
|
1126
|
+
this.scrollTopPosition = signal(0, /* @ts-ignore */
|
|
1127
|
+
...(ngDevMode ? [{ debugName: "scrollTopPosition" }] : /* istanbul ignore next */ []));
|
|
1128
|
+
this.initialized = signal(false, /* @ts-ignore */
|
|
1129
|
+
...(ngDevMode ? [{ debugName: "initialized" }] : /* istanbul ignore next */ []));
|
|
1075
1130
|
this.fragmentAnimationFrameId = null;
|
|
1076
1131
|
this.FRAGMENT_SCROLL_MAX_ATTEMPTS = 180;
|
|
1077
1132
|
effect(() => {
|
|
@@ -1209,10 +1264,10 @@ class ScaffoldComponent {
|
|
|
1209
1264
|
defaultView.cancelAnimationFrame(this.fragmentAnimationFrameId);
|
|
1210
1265
|
this.fragmentAnimationFrameId = null;
|
|
1211
1266
|
}
|
|
1212
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1213
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "
|
|
1267
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ScaffoldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1268
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.5", type: ScaffoldComponent, isStandalone: true, selector: "lf-scaffold", outputs: { headerButtonClickEvent: "headerButtonClickEvent", headerInputSubmitEvent: "headerInputSubmitEvent", headerInputChangeEvent: "headerInputChangeEvent", navbarButtonClickEvent: "navbarButtonClickEvent", floatingButtonClickEvent: "floatingButtonClickEvent", bottomBarButtonClickEvent: "bottomBarButtonClickEvent" }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n class=\"lf-scaffold lf-transitions mat-app-background mat-typography\"\r\n [ngClass]=\"$safeNavigationMigration(scaffoldConfig()?.cssClass)\">\r\n <!-- header -->\r\n <lf-header\r\n [libraryConfig]=\"libraryConfig\"\r\n [headerConfig]=\"headerConfig()\"\r\n [isMobile]=\"isMobile()!\"\r\n [routeLoading]=\"routeLoading()!\"\r\n [currentRoute]=\"currentRoute()\"\r\n (headerConfigUpdateEvent)=\"headerConfigUpdated($event)\"\r\n (headerButtonClickEvent)=\"headerButtonClicked($event)\"\r\n (headerInputSubmitEvent)=\"headerInputSubmitted($event)\"\r\n (headerInputChangeEvent)=\"headerInputChanged($event)\"></lf-header>\r\n <!-- navbar -->\r\n <lf-navbar\r\n [libraryConfig]=\"libraryConfig\"\r\n [navbarConfig]=\"navbarConfig()\"\r\n [isMobile]=\"isMobile()!\"\r\n [currentRoute]=\"currentRoute()\"\r\n (navbarButtonClickEvent)=\"navbarButtonClicked($event)\"></lf-navbar>\r\n <!-- content wrapper -->\r\n <div\r\n class=\"lf-content-wrapper\"\r\n [class.lf-show-navbar]=\"navbarConfig()?.enable && !isMobile()\"\r\n [class.lf-show-header]=\"headerConfig()?.enable && !(navbarConfig()?.enable && isMobile())\"\r\n [class.lf-show-navbar-mobile]=\"navbarConfig()?.enable && isMobile() && !headerConfig()?.enable\"\r\n [class.lf-show-header-and-navbar-mobile]=\"\r\n headerConfig()?.enable && navbarConfig()?.enable && isMobile()\r\n \"\r\n [class.lf-transitions]=\"initialized()\"\r\n #scrollContainer\r\n cdkScrollable>\r\n <!-- drawer -->\r\n <lf-drawer\r\n [libraryConfig]=\"libraryConfig\"\r\n [drawerConfig]=\"drawerConfig()\"\r\n [drawerPortal]=\"drawerPortal()\"\r\n [isMobile]=\"isMobile()!\"\r\n [headerEnabled]=\"$safeNavigationMigration(headerConfig()?.enable)!\"\r\n (drawerConfigUpdateEvent)=\"drawerConfigUpdated($event)\">\r\n <!-- drawer content -->\r\n <ng-content select=\"[drawerContent]\" drawerContent></ng-content>\r\n <!-- content title card -->\r\n <lf-content-title-card\r\n [libraryConfig]=\"libraryConfig\"\r\n [contentTitleCardConfig]=\"contentTitleCardConfig()\"\r\n [isMobile]=\"isMobile()!\"\r\n [routeHistory]=\"routeHistory()!\"\r\n (backButtonClickEvent)=\"backButtonClicked()\"></lf-content-title-card>\r\n <!-- main content -->\r\n <div\r\n class=\"lf-content\"\r\n [class.lf-content-mobile]=\"isMobile()\"\r\n [class.lf-show-footer]=\"footerConfig()?.enable\"\r\n #content>\r\n <ng-content></ng-content>\r\n <!-- to top button -->\r\n <lf-floating-button\r\n [libraryConfig]=\"libraryConfig\"\r\n [floatingButtonConfig]=\"floatingButtonConfig()\"\r\n [onTop]=\"scrollTopPosition() <= 0\"\r\n [isMobile]=\"isMobile()!\"\r\n [drawerEnabled]=\"drawerConfig()?.enable! && drawerConfig()?.open!\"\r\n [navbarEnabled]=\"$safeNavigationMigration(navbarConfig()?.enable)!\"\r\n [bottomBarEnabled]=\"$safeNavigationMigration(bottomBarConfig()?.enable)!\"\r\n (floatingButtonConfigUpdateEvent)=\"floatingButtonConfigUpdated($event)\"\r\n (floatingButtonClickEvent)=\"floatingButtonClicked($event)\"></lf-floating-button>\r\n </div>\r\n <!-- footer -->\r\n <lf-footer [libraryConfig]=\"libraryConfig\" [footerConfig]=\"footerConfig()\"></lf-footer>\r\n </lf-drawer>\r\n </div>\r\n <!-- bottom bar -->\r\n <lf-bottom-bar\r\n [libraryConfig]=\"libraryConfig\"\r\n [bottomBarConfig]=\"bottomBarConfig()\"\r\n [isMobile]=\"isMobile()! && navbarConfig()?.enable!\"\r\n [navbarEnabled]=\"$safeNavigationMigration(navbarConfig()?.enable)!\"\r\n (bottomBarCloseClickEvent)=\"bottomBarCloseClicked($event)\"\r\n (bottomBarButtonClickEvent)=\"bottomBarButtonClicked($event)\"></lf-bottom-bar>\r\n</div>\r\n", styles: [".lf-scaffold{height:100dvh}.lf-scaffold .lf-content-wrapper{position:absolute;inset:0;overflow-y:auto}.lf-scaffold .lf-content-wrapper.lf-show-navbar{left:calc(var(--navbar-height) + 2 * var(--navbar-padding))}.lf-scaffold .lf-content-wrapper.lf-show-header{top:var(--header-height);height:calc(100dvh - var(--header-height))}.lf-scaffold .lf-content-wrapper.lf-show-navbar-mobile{height:calc(100dvh - var(--navbar-height-mobile))}.lf-scaffold .lf-content-wrapper.lf-show-header-and-navbar-mobile{top:var(--header-height);height:calc(100dvh - var(--header-height) - var(--navbar-height-mobile))}.lf-scaffold .lf-content-wrapper .lf-content{padding-left:var(--content-padding);padding-right:var(--content-padding);padding-bottom:var(--content-padding)}.lf-scaffold .lf-content-wrapper .lf-content.lf-content-mobile{padding-left:var(--content-padding-mobile);padding-right:var(--content-padding-mobile);padding-bottom:var(--content-padding-mobile)}.lf-scaffold .lf-content-wrapper .lf-content.lf-show-footer{min-height:100%}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: HeaderComponent, selector: "lf-header", inputs: ["libraryConfig", "headerConfig", "isMobile", "routeLoading", "currentRoute"], outputs: ["headerConfigUpdateEvent", "headerButtonClickEvent", "headerInputSubmitEvent", "headerInputChangeEvent"] }, { kind: "component", type: NavbarComponent, selector: "lf-navbar", inputs: ["libraryConfig", "navbarConfig", "isMobile", "currentRoute"], outputs: ["navbarButtonClickEvent"] }, { kind: "component", type: DrawerComponent, selector: "lf-drawer", inputs: ["libraryConfig", "drawerConfig", "isMobile", "headerEnabled", "drawerPortal"], outputs: ["drawerConfigUpdateEvent"] }, { kind: "component", type: FooterComponent, selector: "lf-footer", inputs: ["libraryConfig", "footerConfig"] }, { kind: "component", type: ContentTitleCardComponent, selector: "lf-content-title-card", inputs: ["libraryConfig", "contentTitleCardConfig", "isMobile", "routeHistory"], outputs: ["backButtonClickEvent"] }, { kind: "component", type: FloatingButtonComponent, selector: "lf-floating-button", inputs: ["libraryConfig", "floatingButtonConfig", "onTop", "isMobile", "drawerEnabled", "navbarEnabled", "bottomBarEnabled"], outputs: ["floatingButtonConfigUpdateEvent", "floatingButtonClickEvent"] }, { kind: "component", type: BottomBarComponent, selector: "lf-bottom-bar", inputs: ["libraryConfig", "bottomBarConfig", "isMobile", "navbarEnabled"], outputs: ["bottomBarCloseClickEvent", "bottomBarButtonClickEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1214
1269
|
}
|
|
1215
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1270
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ScaffoldComponent, decorators: [{
|
|
1216
1271
|
type: Component,
|
|
1217
1272
|
args: [{ selector: 'lf-scaffold', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
|
|
1218
1273
|
NgClass,
|
|
@@ -1223,27 +1278,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
|
|
|
1223
1278
|
ContentTitleCardComponent,
|
|
1224
1279
|
FloatingButtonComponent,
|
|
1225
1280
|
BottomBarComponent,
|
|
1226
|
-
], template: "<div\r\n class=\"lf-scaffold lf-transitions mat-app-background mat-typography\"\r\n [ngClass]=\"scaffoldConfig()?.cssClass\">\r\n <!-- header -->\r\n <lf-header\r\n [libraryConfig]=\"libraryConfig\"\r\n [headerConfig]=\"headerConfig()\"\r\n [isMobile]=\"isMobile()!\"\r\n [routeLoading]=\"routeLoading()!\"\r\n [currentRoute]=\"currentRoute()\"\r\n (headerConfigUpdateEvent)=\"headerConfigUpdated($event)\"\r\n (headerButtonClickEvent)=\"headerButtonClicked($event)\"\r\n (headerInputSubmitEvent)=\"headerInputSubmitted($event)\"\r\n (headerInputChangeEvent)=\"headerInputChanged($event)\"></lf-header>\r\n <!-- navbar -->\r\n <lf-navbar\r\n [libraryConfig]=\"libraryConfig\"\r\n [navbarConfig]=\"navbarConfig()\"\r\n [isMobile]=\"isMobile()!\"\r\n [currentRoute]=\"currentRoute()\"\r\n (navbarButtonClickEvent)=\"navbarButtonClicked($event)\"></lf-navbar>\r\n <!-- content wrapper -->\r\n <div\r\n class=\"lf-content-wrapper\"\r\n [class.lf-show-navbar]=\"navbarConfig()?.enable && !isMobile()\"\r\n [class.lf-show-header]=\"headerConfig()?.enable && !(navbarConfig()?.enable && isMobile())\"\r\n [class.lf-show-navbar-mobile]=\"navbarConfig()?.enable && isMobile() && !headerConfig()?.enable\"\r\n [class.lf-show-header-and-navbar-mobile]=\"\r\n headerConfig()?.enable && navbarConfig()?.enable && isMobile()\r\n \"\r\n [class.lf-transitions]=\"initialized()\"\r\n #scrollContainer\r\n cdkScrollable>\r\n <!-- drawer -->\r\n <lf-drawer\r\n [libraryConfig]=\"libraryConfig\"\r\n [drawerConfig]=\"drawerConfig()\"\r\n [drawerPortal]=\"drawerPortal()\"\r\n [isMobile]=\"isMobile()!\"\r\n [headerEnabled]=\"headerConfig()?.enable!\"\r\n (drawerConfigUpdateEvent)=\"drawerConfigUpdated($event)\">\r\n <!-- drawer content -->\r\n <ng-content select=\"[drawerContent]\" drawerContent></ng-content>\r\n <!-- content title card -->\r\n <lf-content-title-card\r\n [libraryConfig]=\"libraryConfig\"\r\n [contentTitleCardConfig]=\"contentTitleCardConfig()\"\r\n [isMobile]=\"isMobile()!\"\r\n [routeHistory]=\"routeHistory()!\"\r\n (backButtonClickEvent)=\"backButtonClicked()\"></lf-content-title-card>\r\n <!-- main content -->\r\n <div\r\n class=\"lf-content\"\r\n [class.lf-content-mobile]=\"isMobile()\"\r\n [class.lf-show-footer]=\"footerConfig()?.enable\"\r\n #content>\r\n <ng-content></ng-content>\r\n <!-- to top button -->\r\n <lf-floating-button\r\n [libraryConfig]=\"libraryConfig\"\r\n [floatingButtonConfig]=\"floatingButtonConfig()\"\r\n [onTop]=\"scrollTopPosition() <= 0\"\r\n [isMobile]=\"isMobile()!\"\r\n [drawerEnabled]=\"drawerConfig()?.enable! && drawerConfig()?.open!\"\r\n [navbarEnabled]=\"navbarConfig()?.enable!\"\r\n [bottomBarEnabled]=\"bottomBarConfig()?.enable!\"\r\n (floatingButtonConfigUpdateEvent)=\"floatingButtonConfigUpdated($event)\"\r\n (floatingButtonClickEvent)=\"floatingButtonClicked($event)\"></lf-floating-button>\r\n </div>\r\n <!-- footer -->\r\n <lf-footer [libraryConfig]=\"libraryConfig\" [footerConfig]=\"footerConfig()\"></lf-footer>\r\n </lf-drawer>\r\n </div>\r\n <!-- bottom bar -->\r\n <lf-bottom-bar\r\n [libraryConfig]=\"libraryConfig\"\r\n [bottomBarConfig]=\"bottomBarConfig()\"\r\n [isMobile]=\"isMobile()! && navbarConfig()?.enable!\"\r\n [navbarEnabled]=\"navbarConfig()?.enable!\"\r\n (bottomBarCloseClickEvent)=\"bottomBarCloseClicked($event)\"\r\n (bottomBarButtonClickEvent)=\"bottomBarButtonClicked($event)\"></lf-bottom-bar>\r\n</div>\r\n", styles: [".lf-scaffold{height:100dvh}.lf-scaffold .lf-content-wrapper{position:absolute;inset:0;overflow-y:auto}.lf-scaffold .lf-content-wrapper.lf-show-navbar{left:calc(var(--navbar-height) + 2 * var(--navbar-padding))}.lf-scaffold .lf-content-wrapper.lf-show-header{top:var(--header-height);height:calc(100dvh - var(--header-height))}.lf-scaffold .lf-content-wrapper.lf-show-navbar-mobile{height:calc(100dvh - var(--navbar-height-mobile))}.lf-scaffold .lf-content-wrapper.lf-show-header-and-navbar-mobile{top:var(--header-height);height:calc(100dvh - var(--header-height) - var(--navbar-height-mobile))}.lf-scaffold .lf-content-wrapper .lf-content{padding-left:var(--content-padding);padding-right:var(--content-padding);padding-bottom:var(--content-padding)}.lf-scaffold .lf-content-wrapper .lf-content.lf-content-mobile{padding-left:var(--content-padding-mobile);padding-right:var(--content-padding-mobile);padding-bottom:var(--content-padding-mobile)}.lf-scaffold .lf-content-wrapper .lf-content.lf-show-footer{min-height:100%}\n"] }]
|
|
1281
|
+
], template: "<div\r\n class=\"lf-scaffold lf-transitions mat-app-background mat-typography\"\r\n [ngClass]=\"$safeNavigationMigration(scaffoldConfig()?.cssClass)\">\r\n <!-- header -->\r\n <lf-header\r\n [libraryConfig]=\"libraryConfig\"\r\n [headerConfig]=\"headerConfig()\"\r\n [isMobile]=\"isMobile()!\"\r\n [routeLoading]=\"routeLoading()!\"\r\n [currentRoute]=\"currentRoute()\"\r\n (headerConfigUpdateEvent)=\"headerConfigUpdated($event)\"\r\n (headerButtonClickEvent)=\"headerButtonClicked($event)\"\r\n (headerInputSubmitEvent)=\"headerInputSubmitted($event)\"\r\n (headerInputChangeEvent)=\"headerInputChanged($event)\"></lf-header>\r\n <!-- navbar -->\r\n <lf-navbar\r\n [libraryConfig]=\"libraryConfig\"\r\n [navbarConfig]=\"navbarConfig()\"\r\n [isMobile]=\"isMobile()!\"\r\n [currentRoute]=\"currentRoute()\"\r\n (navbarButtonClickEvent)=\"navbarButtonClicked($event)\"></lf-navbar>\r\n <!-- content wrapper -->\r\n <div\r\n class=\"lf-content-wrapper\"\r\n [class.lf-show-navbar]=\"navbarConfig()?.enable && !isMobile()\"\r\n [class.lf-show-header]=\"headerConfig()?.enable && !(navbarConfig()?.enable && isMobile())\"\r\n [class.lf-show-navbar-mobile]=\"navbarConfig()?.enable && isMobile() && !headerConfig()?.enable\"\r\n [class.lf-show-header-and-navbar-mobile]=\"\r\n headerConfig()?.enable && navbarConfig()?.enable && isMobile()\r\n \"\r\n [class.lf-transitions]=\"initialized()\"\r\n #scrollContainer\r\n cdkScrollable>\r\n <!-- drawer -->\r\n <lf-drawer\r\n [libraryConfig]=\"libraryConfig\"\r\n [drawerConfig]=\"drawerConfig()\"\r\n [drawerPortal]=\"drawerPortal()\"\r\n [isMobile]=\"isMobile()!\"\r\n [headerEnabled]=\"$safeNavigationMigration(headerConfig()?.enable)!\"\r\n (drawerConfigUpdateEvent)=\"drawerConfigUpdated($event)\">\r\n <!-- drawer content -->\r\n <ng-content select=\"[drawerContent]\" drawerContent></ng-content>\r\n <!-- content title card -->\r\n <lf-content-title-card\r\n [libraryConfig]=\"libraryConfig\"\r\n [contentTitleCardConfig]=\"contentTitleCardConfig()\"\r\n [isMobile]=\"isMobile()!\"\r\n [routeHistory]=\"routeHistory()!\"\r\n (backButtonClickEvent)=\"backButtonClicked()\"></lf-content-title-card>\r\n <!-- main content -->\r\n <div\r\n class=\"lf-content\"\r\n [class.lf-content-mobile]=\"isMobile()\"\r\n [class.lf-show-footer]=\"footerConfig()?.enable\"\r\n #content>\r\n <ng-content></ng-content>\r\n <!-- to top button -->\r\n <lf-floating-button\r\n [libraryConfig]=\"libraryConfig\"\r\n [floatingButtonConfig]=\"floatingButtonConfig()\"\r\n [onTop]=\"scrollTopPosition() <= 0\"\r\n [isMobile]=\"isMobile()!\"\r\n [drawerEnabled]=\"drawerConfig()?.enable! && drawerConfig()?.open!\"\r\n [navbarEnabled]=\"$safeNavigationMigration(navbarConfig()?.enable)!\"\r\n [bottomBarEnabled]=\"$safeNavigationMigration(bottomBarConfig()?.enable)!\"\r\n (floatingButtonConfigUpdateEvent)=\"floatingButtonConfigUpdated($event)\"\r\n (floatingButtonClickEvent)=\"floatingButtonClicked($event)\"></lf-floating-button>\r\n </div>\r\n <!-- footer -->\r\n <lf-footer [libraryConfig]=\"libraryConfig\" [footerConfig]=\"footerConfig()\"></lf-footer>\r\n </lf-drawer>\r\n </div>\r\n <!-- bottom bar -->\r\n <lf-bottom-bar\r\n [libraryConfig]=\"libraryConfig\"\r\n [bottomBarConfig]=\"bottomBarConfig()\"\r\n [isMobile]=\"isMobile()! && navbarConfig()?.enable!\"\r\n [navbarEnabled]=\"$safeNavigationMigration(navbarConfig()?.enable)!\"\r\n (bottomBarCloseClickEvent)=\"bottomBarCloseClicked($event)\"\r\n (bottomBarButtonClickEvent)=\"bottomBarButtonClicked($event)\"></lf-bottom-bar>\r\n</div>\r\n", styles: [".lf-scaffold{height:100dvh}.lf-scaffold .lf-content-wrapper{position:absolute;inset:0;overflow-y:auto}.lf-scaffold .lf-content-wrapper.lf-show-navbar{left:calc(var(--navbar-height) + 2 * var(--navbar-padding))}.lf-scaffold .lf-content-wrapper.lf-show-header{top:var(--header-height);height:calc(100dvh - var(--header-height))}.lf-scaffold .lf-content-wrapper.lf-show-navbar-mobile{height:calc(100dvh - var(--navbar-height-mobile))}.lf-scaffold .lf-content-wrapper.lf-show-header-and-navbar-mobile{top:var(--header-height);height:calc(100dvh - var(--header-height) - var(--navbar-height-mobile))}.lf-scaffold .lf-content-wrapper .lf-content{padding-left:var(--content-padding);padding-right:var(--content-padding);padding-bottom:var(--content-padding)}.lf-scaffold .lf-content-wrapper .lf-content.lf-content-mobile{padding-left:var(--content-padding-mobile);padding-right:var(--content-padding-mobile);padding-bottom:var(--content-padding-mobile)}.lf-scaffold .lf-content-wrapper .lf-content.lf-show-footer{min-height:100%}\n"] }]
|
|
1227
1282
|
}], ctorParameters: () => [], propDecorators: { scrollContainer: [{ type: i0.ViewChild, args: ['scrollContainer', { isSignal: true }] }], content: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }], headerButtonClickEvent: [{ type: i0.Output, args: ["headerButtonClickEvent"] }], headerInputSubmitEvent: [{ type: i0.Output, args: ["headerInputSubmitEvent"] }], headerInputChangeEvent: [{ type: i0.Output, args: ["headerInputChangeEvent"] }], navbarButtonClickEvent: [{ type: i0.Output, args: ["navbarButtonClickEvent"] }], floatingButtonClickEvent: [{ type: i0.Output, args: ["floatingButtonClickEvent"] }], bottomBarButtonClickEvent: [{ type: i0.Output, args: ["bottomBarButtonClickEvent"] }] } });
|
|
1228
1283
|
|
|
1229
1284
|
class ColorPickerComponent {
|
|
1230
1285
|
constructor() {
|
|
1231
1286
|
this.libraryConfig = inject(CONFIG, { optional: true });
|
|
1232
1287
|
this.platformId = inject(PLATFORM_ID);
|
|
1233
|
-
this.color = input('primary',
|
|
1234
|
-
|
|
1235
|
-
this.
|
|
1236
|
-
|
|
1237
|
-
this.
|
|
1288
|
+
this.color = input('primary', /* @ts-ignore */
|
|
1289
|
+
...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
|
|
1290
|
+
this.label = input(/* @ts-ignore */
|
|
1291
|
+
...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1292
|
+
this.matIcon = input(/* @ts-ignore */
|
|
1293
|
+
...(ngDevMode ? [undefined, { debugName: "matIcon" }] : /* istanbul ignore next */ []));
|
|
1294
|
+
this.disabled = input(false, /* @ts-ignore */
|
|
1295
|
+
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
1296
|
+
this.tooltip = input(/* @ts-ignore */
|
|
1297
|
+
...(ngDevMode ? [undefined, { debugName: "tooltip" }] : /* istanbul ignore next */ []));
|
|
1238
1298
|
this.colorChangeEvent = output();
|
|
1239
|
-
this.isSafari = signal(false,
|
|
1299
|
+
this.isSafari = signal(false, /* @ts-ignore */
|
|
1300
|
+
...(ngDevMode ? [{ debugName: "isSafari" }] : /* istanbul ignore next */ []));
|
|
1240
1301
|
this.selectedColor = linkedSignal(() => {
|
|
1241
1302
|
const color = this.color();
|
|
1242
1303
|
if (color && color !== 'primary' && color !== 'accent' && color !== 'warn') {
|
|
1243
1304
|
return color;
|
|
1244
1305
|
}
|
|
1245
1306
|
return '';
|
|
1246
|
-
},
|
|
1307
|
+
}, /* @ts-ignore */
|
|
1308
|
+
...(ngDevMode ? [{ debugName: "selectedColor" }] : /* istanbul ignore next */ []));
|
|
1247
1309
|
this.labelColor = computed(() => {
|
|
1248
1310
|
const hex = this.selectedColor().replace('#', '');
|
|
1249
1311
|
const r = parseInt(hex.substr(0, 2), 16);
|
|
@@ -1251,7 +1313,8 @@ class ColorPickerComponent {
|
|
|
1251
1313
|
const b = parseInt(hex.substr(4, 2), 16);
|
|
1252
1314
|
const brightness = (r * 299 + g * 587 + b * 114) / 1000;
|
|
1253
1315
|
return brightness > 128 ? '#000000' : '#ffffff';
|
|
1254
|
-
},
|
|
1316
|
+
}, /* @ts-ignore */
|
|
1317
|
+
...(ngDevMode ? [{ debugName: "labelColor" }] : /* istanbul ignore next */ []));
|
|
1255
1318
|
if (isPlatformBrowser(this.platformId)) {
|
|
1256
1319
|
this.isSafari.set(/^((?!chrome|android).)*safari/i.test(navigator.userAgent));
|
|
1257
1320
|
}
|
|
@@ -1260,10 +1323,10 @@ class ColorPickerComponent {
|
|
|
1260
1323
|
this.selectedColor.set(event);
|
|
1261
1324
|
this.colorChangeEvent.emit(event);
|
|
1262
1325
|
}
|
|
1263
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1264
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1326
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1327
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: ColorPickerComponent, isStandalone: true, selector: "lf-color-picker", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, matIcon: { classPropertyName: "matIcon", publicName: "matIcon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorChangeEvent: "colorChangeEvent" }, ngImport: i0, template: "@if (!isSafari()) {\r\n <input\r\n style=\"opacity: 0; position: absolute; width: 0; height: 36px; border: none\"\r\n #colorPicker\r\n type=\"color\"\r\n onclick=\"this.value = null\"\r\n [ngModel]=\"selectedColor()\"\r\n (ngModelChange)=\"selectColor($event)\" />\r\n\r\n <button\r\n mat-flat-button\r\n class=\"lf-button\"\r\n type=\"button\"\r\n [color]=\"selectedColor() ? null : color()\"\r\n [style.background]=\"selectedColor()\"\r\n [style.color]=\"labelColor()\"\r\n [disabled]=\"disabled()\"\r\n (click)=\"colorPicker.click()\"\r\n [matTooltip]=\"tooltip()\">\r\n <!-- icon -->\r\n @if (matIcon()) {\r\n <mat-icon>\r\n {{ matIcon() }}\r\n </mat-icon>\r\n }\r\n <!-- @else if (svgIcon) {\r\n <mat-icon [svgIcon]=\"svgIcon\"></mat-icon>\r\n } -->\r\n {{ label() }}\r\n </button>\r\n} @else {\r\n <input\r\n style=\"width: 36px; height: 36px\"\r\n #colorPicker\r\n type=\"color\"\r\n [ngModel]=\"selectedColor()\"\r\n (ngModelChange)=\"selectColor($event)\" />\r\n}\r\n", styles: [".lf-button{width:inherit}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1265
1328
|
}
|
|
1266
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1329
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ColorPickerComponent, decorators: [{
|
|
1267
1330
|
type: Component,
|
|
1268
1331
|
args: [{ selector: 'lf-color-picker', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [FormsModule, MatButtonModule, MatIconModule, MatTooltipModule], template: "@if (!isSafari()) {\r\n <input\r\n style=\"opacity: 0; position: absolute; width: 0; height: 36px; border: none\"\r\n #colorPicker\r\n type=\"color\"\r\n onclick=\"this.value = null\"\r\n [ngModel]=\"selectedColor()\"\r\n (ngModelChange)=\"selectColor($event)\" />\r\n\r\n <button\r\n mat-flat-button\r\n class=\"lf-button\"\r\n type=\"button\"\r\n [color]=\"selectedColor() ? null : color()\"\r\n [style.background]=\"selectedColor()\"\r\n [style.color]=\"labelColor()\"\r\n [disabled]=\"disabled()\"\r\n (click)=\"colorPicker.click()\"\r\n [matTooltip]=\"tooltip()\">\r\n <!-- icon -->\r\n @if (matIcon()) {\r\n <mat-icon>\r\n {{ matIcon() }}\r\n </mat-icon>\r\n }\r\n <!-- @else if (svgIcon) {\r\n <mat-icon [svgIcon]=\"svgIcon\"></mat-icon>\r\n } -->\r\n {{ label() }}\r\n </button>\r\n} @else {\r\n <input\r\n style=\"width: 36px; height: 36px\"\r\n #colorPicker\r\n type=\"color\"\r\n [ngModel]=\"selectedColor()\"\r\n (ngModelChange)=\"selectColor($event)\" />\r\n}\r\n", styles: [".lf-button{width:inherit}\n"] }]
|
|
1269
1332
|
}], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], matIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "matIcon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], colorChangeEvent: [{ type: i0.Output, args: ["colorChangeEvent"] }] } });
|
|
@@ -1272,13 +1335,19 @@ class FileUploadComponent {
|
|
|
1272
1335
|
constructor() {
|
|
1273
1336
|
this.libraryConfig = inject(CONFIG, { optional: true });
|
|
1274
1337
|
this.logger = inject(Logger);
|
|
1275
|
-
this.color = input('primary',
|
|
1276
|
-
|
|
1277
|
-
this.
|
|
1338
|
+
this.color = input('primary', /* @ts-ignore */
|
|
1339
|
+
...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
|
|
1340
|
+
this.label = input(/* @ts-ignore */
|
|
1341
|
+
...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1342
|
+
this.matIcon = input(/* @ts-ignore */
|
|
1343
|
+
...(ngDevMode ? [undefined, { debugName: "matIcon" }] : /* istanbul ignore next */ []));
|
|
1278
1344
|
// @Input() public loading: boolean;
|
|
1279
|
-
this.disabled = input(false,
|
|
1280
|
-
|
|
1281
|
-
this.
|
|
1345
|
+
this.disabled = input(false, /* @ts-ignore */
|
|
1346
|
+
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
1347
|
+
this.accept = input(/* @ts-ignore */
|
|
1348
|
+
...(ngDevMode ? [undefined, { debugName: "accept" }] : /* istanbul ignore next */ []));
|
|
1349
|
+
this.tooltip = input(/* @ts-ignore */
|
|
1350
|
+
...(ngDevMode ? [undefined, { debugName: "tooltip" }] : /* istanbul ignore next */ []));
|
|
1282
1351
|
this.fileChangeEvent = output();
|
|
1283
1352
|
}
|
|
1284
1353
|
selectFile(event) {
|
|
@@ -1291,10 +1360,10 @@ class FileUploadComponent {
|
|
|
1291
1360
|
this.logger.log('[FileUploadComponent]', file);
|
|
1292
1361
|
this.fileChangeEvent.emit(file);
|
|
1293
1362
|
}
|
|
1294
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1295
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1363
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1364
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FileUploadComponent, isStandalone: true, selector: "lf-file-upload", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, matIcon: { classPropertyName: "matIcon", publicName: "matIcon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileChangeEvent: "fileChangeEvent" }, ngImport: i0, template: "<input\r\n hidden\r\n #file\r\n type=\"file\"\r\n onclick=\"this.value = null\"\r\n [accept]=\"accept()\"\r\n (change)=\"selectFile($event)\" />\r\n\r\n<button\r\n mat-flat-button\r\n class=\"lf-button\"\r\n type=\"button\"\r\n [color]=\"color()\"\r\n [disabled]=\"disabled()\"\r\n (click)=\"file.click()\"\r\n [matTooltip]=\"tooltip()\">\r\n <!-- icon -->\r\n @if (matIcon()) {\r\n <mat-icon>\r\n {{ matIcon() }}\r\n </mat-icon>\r\n }\r\n <!-- @else if (svgIcon) {\r\n <mat-icon [svgIcon]=\"svgIcon\"></mat-icon>\r\n } -->\r\n <!-- } -->\r\n {{ label() }}\r\n <!-- </span> -->\r\n</button>\r\n", styles: [".lf-button{width:inherit}.lf-button .lf-button-content{display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1296
1365
|
}
|
|
1297
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1366
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FileUploadComponent, decorators: [{
|
|
1298
1367
|
type: Component,
|
|
1299
1368
|
args: [{ selector: 'lf-file-upload', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [FormsModule, MatButtonModule, MatIconModule, MatTooltipModule], template: "<input\r\n hidden\r\n #file\r\n type=\"file\"\r\n onclick=\"this.value = null\"\r\n [accept]=\"accept()\"\r\n (change)=\"selectFile($event)\" />\r\n\r\n<button\r\n mat-flat-button\r\n class=\"lf-button\"\r\n type=\"button\"\r\n [color]=\"color()\"\r\n [disabled]=\"disabled()\"\r\n (click)=\"file.click()\"\r\n [matTooltip]=\"tooltip()\">\r\n <!-- icon -->\r\n @if (matIcon()) {\r\n <mat-icon>\r\n {{ matIcon() }}\r\n </mat-icon>\r\n }\r\n <!-- @else if (svgIcon) {\r\n <mat-icon [svgIcon]=\"svgIcon\"></mat-icon>\r\n } -->\r\n <!-- } -->\r\n {{ label() }}\r\n <!-- </span> -->\r\n</button>\r\n", styles: [".lf-button{width:inherit}.lf-button .lf-button-content{display:flex;align-items:center;justify-content:center}\n"] }]
|
|
1300
1369
|
}], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], matIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "matIcon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], fileChangeEvent: [{ type: i0.Output, args: ["fileChangeEvent"] }] } });
|
|
@@ -1303,10 +1372,10 @@ class ListItemAvatarDirective {
|
|
|
1303
1372
|
constructor() {
|
|
1304
1373
|
this.templateRef = inject((TemplateRef));
|
|
1305
1374
|
}
|
|
1306
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1307
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1375
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ListItemAvatarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1376
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: ListItemAvatarDirective, isStandalone: true, selector: "[lfListItemAvatar]", ngImport: i0 }); }
|
|
1308
1377
|
}
|
|
1309
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1378
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ListItemAvatarDirective, decorators: [{
|
|
1310
1379
|
type: Directive,
|
|
1311
1380
|
args: [{
|
|
1312
1381
|
selector: '[lfListItemAvatar]',
|
|
@@ -1317,10 +1386,10 @@ class ListItemButtonsDirective {
|
|
|
1317
1386
|
constructor() {
|
|
1318
1387
|
this.templateRef = inject((TemplateRef));
|
|
1319
1388
|
}
|
|
1320
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1321
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1389
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ListItemButtonsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1390
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: ListItemButtonsDirective, isStandalone: true, selector: "[lfListItemButtons]", ngImport: i0 }); }
|
|
1322
1391
|
}
|
|
1323
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1392
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ListItemButtonsDirective, decorators: [{
|
|
1324
1393
|
type: Directive,
|
|
1325
1394
|
args: [{
|
|
1326
1395
|
selector: '[lfListItemButtons]',
|
|
@@ -1331,10 +1400,10 @@ class ListItemSubtitleDirective {
|
|
|
1331
1400
|
constructor() {
|
|
1332
1401
|
this.templateRef = inject((TemplateRef));
|
|
1333
1402
|
}
|
|
1334
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1335
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1403
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ListItemSubtitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1404
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: ListItemSubtitleDirective, isStandalone: true, selector: "[lfListItemSubtitle]", ngImport: i0 }); }
|
|
1336
1405
|
}
|
|
1337
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1406
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ListItemSubtitleDirective, decorators: [{
|
|
1338
1407
|
type: Directive,
|
|
1339
1408
|
args: [{
|
|
1340
1409
|
selector: '[lfListItemSubtitle]',
|
|
@@ -1345,10 +1414,10 @@ class ListItemTitleDirective {
|
|
|
1345
1414
|
constructor() {
|
|
1346
1415
|
this.templateRef = inject((TemplateRef));
|
|
1347
1416
|
}
|
|
1348
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1349
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1417
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ListItemTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1418
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: ListItemTitleDirective, isStandalone: true, selector: "[lfListItemTitle]", ngImport: i0 }); }
|
|
1350
1419
|
}
|
|
1351
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1420
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ListItemTitleDirective, decorators: [{
|
|
1352
1421
|
type: Directive,
|
|
1353
1422
|
args: [{
|
|
1354
1423
|
selector: '[lfListItemTitle]',
|
|
@@ -1367,26 +1436,40 @@ class ListComponent {
|
|
|
1367
1436
|
constructor() {
|
|
1368
1437
|
this.libraryConfig = inject(CONFIG, { optional: true });
|
|
1369
1438
|
this.breakpointService = inject(BreakpointService);
|
|
1370
|
-
this.avatarTemplate = contentChild(ListItemAvatarDirective,
|
|
1371
|
-
|
|
1372
|
-
this.
|
|
1373
|
-
|
|
1374
|
-
this.
|
|
1375
|
-
|
|
1376
|
-
this.
|
|
1377
|
-
|
|
1378
|
-
this.
|
|
1379
|
-
|
|
1380
|
-
this.
|
|
1439
|
+
this.avatarTemplate = contentChild(ListItemAvatarDirective, /* @ts-ignore */
|
|
1440
|
+
...(ngDevMode ? [{ debugName: "avatarTemplate" }] : /* istanbul ignore next */ []));
|
|
1441
|
+
this.titleTemplate = contentChild(ListItemTitleDirective, /* @ts-ignore */
|
|
1442
|
+
...(ngDevMode ? [{ debugName: "titleTemplate" }] : /* istanbul ignore next */ []));
|
|
1443
|
+
this.subtitleTemplate = contentChild(ListItemSubtitleDirective, /* @ts-ignore */
|
|
1444
|
+
...(ngDevMode ? [{ debugName: "subtitleTemplate" }] : /* istanbul ignore next */ []));
|
|
1445
|
+
this.buttonsTemplate = contentChild(ListItemButtonsDirective, /* @ts-ignore */
|
|
1446
|
+
...(ngDevMode ? [{ debugName: "buttonsTemplate" }] : /* istanbul ignore next */ []));
|
|
1447
|
+
this.config = input(null, /* @ts-ignore */
|
|
1448
|
+
...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
|
|
1449
|
+
this.header = input(null, /* @ts-ignore */
|
|
1450
|
+
...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
|
|
1451
|
+
this.items = input([], /* @ts-ignore */
|
|
1452
|
+
...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
1453
|
+
this.groupedItems = input(new Map(), /* @ts-ignore */
|
|
1454
|
+
...(ngDevMode ? [{ debugName: "groupedItems" }] : /* istanbul ignore next */ []));
|
|
1455
|
+
this.buttons = input([], /* @ts-ignore */
|
|
1456
|
+
...(ngDevMode ? [{ debugName: "buttons" }] : /* istanbul ignore next */ []));
|
|
1457
|
+
this.dropListId = input(/* @ts-ignore */
|
|
1458
|
+
...(ngDevMode ? [undefined, { debugName: "dropListId" }] : /* istanbul ignore next */ []));
|
|
1459
|
+
this.connectedDropListIds = input(/* @ts-ignore */
|
|
1460
|
+
...(ngDevMode ? [undefined, { debugName: "connectedDropListIds" }] : /* istanbul ignore next */ []));
|
|
1381
1461
|
this.sortChangeEvent = output();
|
|
1382
1462
|
this.selectionChangeEvent = output();
|
|
1383
1463
|
this.itemClickEvent = output();
|
|
1384
1464
|
this.itemDropEvent = output();
|
|
1385
1465
|
this.buttonClickEvent = output();
|
|
1386
1466
|
this.isMobile = toSignal(this.breakpointService.breakpoint$.pipe(map((state) => state.breakpoints[Breakpoints.XSmall])));
|
|
1387
|
-
this.sortToken = signal('',
|
|
1388
|
-
|
|
1389
|
-
this.
|
|
1467
|
+
this.sortToken = signal('', /* @ts-ignore */
|
|
1468
|
+
...(ngDevMode ? [{ debugName: "sortToken" }] : /* istanbul ignore next */ []));
|
|
1469
|
+
this.sortAsc = signal(true, /* @ts-ignore */
|
|
1470
|
+
...(ngDevMode ? [{ debugName: "sortAsc" }] : /* istanbul ignore next */ []));
|
|
1471
|
+
this.allSelected = model(false, /* @ts-ignore */
|
|
1472
|
+
...(ngDevMode ? [{ debugName: "allSelected" }] : /* istanbul ignore next */ []));
|
|
1390
1473
|
effect(() => {
|
|
1391
1474
|
const config = this.config();
|
|
1392
1475
|
if (!config)
|
|
@@ -1464,10 +1547,10 @@ class ListComponent {
|
|
|
1464
1547
|
// click.stopPropagation();
|
|
1465
1548
|
click.stopImmediatePropagation();
|
|
1466
1549
|
}
|
|
1467
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1468
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ListComponent, isStandalone: true, selector: "lf-list", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, groupedItems: { classPropertyName: "groupedItems", publicName: "groupedItems", isSignal: true, isRequired: false, transformFunction: null }, buttons: { classPropertyName: "buttons", publicName: "buttons", isSignal: true, isRequired: false, transformFunction: null }, dropListId: { classPropertyName: "dropListId", publicName: "dropListId", isSignal: true, isRequired: false, transformFunction: null }, connectedDropListIds: { classPropertyName: "connectedDropListIds", publicName: "connectedDropListIds", isSignal: true, isRequired: false, transformFunction: null }, allSelected: { classPropertyName: "allSelected", publicName: "allSelected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChangeEvent: "sortChangeEvent", selectionChangeEvent: "selectionChangeEvent", itemClickEvent: "itemClickEvent", itemDropEvent: "itemDropEvent", buttonClickEvent: "buttonClickEvent", allSelected: "allSelectedChange" }, queries: [{ propertyName: "avatarTemplate", first: true, predicate: ListItemAvatarDirective, descendants: true, isSignal: true }, { propertyName: "titleTemplate", first: true, predicate: ListItemTitleDirective, descendants: true, isSignal: true }, { propertyName: "subtitleTemplate", first: true, predicate: ListItemSubtitleDirective, descendants: true, isSignal: true }, { propertyName: "buttonsTemplate", first: true, predicate: ListItemButtonsDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"lf-list\" cdkDropListGroup>\r\n <!-- Header -->\r\n @if (header(); as header) {\r\n <div\r\n class=\"lf-list-item lf-list-item-header\"\r\n [class.gap-2]=\"!isMobile()\"\r\n [class.gap-1]=\"isMobile()\">\r\n <!-- avatar -->\r\n @if (header.avatar) {\r\n <div class=\"lf-list-item-avatar px-1\">\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-1\">\r\n <!-- icon -->\r\n @if (header.matIcon) {\r\n <mat-icon>\r\n {{ header.matIcon }}\r\n </mat-icon>\r\n } @else if (header.svgIcon) {\r\n <mat-icon [svgIcon]=\"header.svgIcon\"></mat-icon>\r\n }\r\n </div>\r\n } @else if (hasAvatars) {\r\n <div class=\"lf-list-item-avatar px-1\"></div>\r\n }\r\n\r\n <!-- title -->\r\n <div class=\"lf-list-item-title-wrapper flex-row\">\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\" [class.gap-2]=\"!isMobile()\" [class.gap-1]=\"isMobile()\">\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\"\r\n [class.disabled]=\"button.disabled\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"button.disabled\"\r\n [matTooltip]=\"button.tooltip\"\r\n (click)=\"clickButton({ buttonId: button.id, item: null! }, $event)\">\r\n <!-- icon -->\r\n @if (button.matIcon) {\r\n <mat-icon>\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n } @else if (button.svgIcon) {\r\n <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n }\r\n {{ button.label }}\r\n </button>\r\n } @else {\r\n <button\r\n mat-icon-button\r\n class=\"lf-list-item-icon\"\r\n [class.disabled]=\"button.disabled\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"button.disabled\"\r\n [matTooltip]=\"button.tooltip\"\r\n [aria-label]=\"button.id || button.tooltip\"\r\n (click)=\"clickButton({ buttonId: button.id, item: null! }, $event)\">\r\n <!-- icon -->\r\n @if (button.matIcon) {\r\n <mat-icon>\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n } @else if (button.svgIcon) {\r\n <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n }\r\n </button>\r\n }\r\n }\r\n </div>\r\n\r\n <!-- checkbox -->\r\n @if (config()?.enableSelection && !config()?.disableMultiselect) {\r\n <div class=\"lf-list-item-checkbox\">\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\r\n class=\"lf-list-item lf-list-group-header\"\r\n [class.gap-2]=\"!isMobile()\"\r\n [class.gap-1]=\"isMobile()\">\r\n <div class=\"lf-list-item-avatar px-1\"></div>\r\n <div class=\"lf-list-item-title-wrapper flex-row\">\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.gap-2]=\"!isMobile()\"\r\n [class.gap-1]=\"isMobile()\"\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-1\">\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-1\">\r\n <!-- icon -->\r\n @if (item.matIcon) {\r\n <mat-icon>\r\n {{ item.matIcon }}\r\n </mat-icon>\r\n } @else if (item.svgIcon) {\r\n <mat-icon [svgIcon]=\"item.svgIcon\"></mat-icon>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- title -->\r\n <div class=\"lf-list-item-title-wrapper\">\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\" [class.gap-2]=\"!isMobile()\" [class.gap-1]=\"isMobile()\">\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\"\r\n [class.disabled]=\"disabled\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"disabled\"\r\n [matTooltip]=\"button.tooltip\"\r\n (click)=\"clickButton({ buttonId: button.id, item }, $event)\">\r\n <!-- icon -->\r\n @if (button.matIcon) {\r\n <mat-icon>\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n } @else if (button.svgIcon) {\r\n <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n }\r\n {{ button.label }}\r\n </button>\r\n } @else {\r\n <button\r\n mat-icon-button\r\n class=\"lf-list-item-icon\"\r\n [class.disabled]=\"disabled\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"disabled\"\r\n [matTooltip]=\"button.tooltip\"\r\n [aria-label]=\"button.id || button.tooltip\"\r\n (click)=\"clickButton({ buttonId: button.id, item }, $event)\">\r\n <!-- icon -->\r\n @if (button.matIcon) {\r\n <mat-icon>\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n } @else if (button.svgIcon) {\r\n <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n }\r\n </button>\r\n }\r\n }\r\n }\r\n }\r\n\r\n <!-- drag -->\r\n @if (config()?.enableDragging) {\r\n <button\r\n mat-icon-button\r\n class=\"lf-list-item-icon\"\r\n [class.disabled]=\"item.disabled\"\r\n [disabled]=\"item.disabled\"\r\n [aria-label]=\"'Drag handle'\"\r\n (click)=\"stopPropagation($event)\"\r\n cdkDragHandle>\r\n <mat-icon>drag_indicator</mat-icon>\r\n </button>\r\n }\r\n </div>\r\n\r\n <!-- checkbox -->\r\n @if (config()?.enableSelection) {\r\n <div class=\"lf-list-item-checkbox\">\r\n <mat-checkbox\r\n [(ngModel)]=\"item.checked\"\r\n [disabled]=\"item.disabled!\"\r\n (change)=\"selectItem(item, $event)\"\r\n (click)=\"stopPropagation($event)\"></mat-checkbox>\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (config()?.showDividers && !last) {\r\n <mat-divider></mat-divider>\r\n }\r\n </ng-template>\r\n</div>\r\n", styles: [".lf-list,.lf-list .lf-list-group{width:100%}.lf-list .lf-list-group .lf-list-group-header{font-weight:500;height:calc(var(--list-item-height) - 16px)}.lf-list-item{width:100%;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;height:var(--list-item-height);border-radius:var(--list-item-border-radius);box-sizing:border-box;overflow:hidden}.lf-list-item.disabled .lf-list-item-title-wrapper{opacity:.64}.lf-list-item .lf-list-item-sort-icon{font-size:var(--list-item-sort-icon-size);width:var(--list-item-sort-icon-size);height:var(--list-item-sort-icon-size);vertical-align:text-top}.lf-list-item .lf-list-item-checkbox{flex:0 0 var(--list-item-checkbox-width)}.lf-list-item .lf-list-item-avatar{flex:0 0 var(--list-item-avatar-size);display:flex;align-items:center;justify-content:center}.lf-list-item .lf-list-item-avatar img{width:var(--list-item-avatar-size);height:var(--list-item-avatar-size);border-radius:50%;object-fit:cover}.lf-list-item .lf-list-item-title-wrapper{display:flex;flex-flow:column;align-items:flex-start;flex:1 1 var(--list-item-title-width);overflow:hidden}.lf-list-item .lf-list-item-title-wrapper .lf-list-item-title{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.lf-list-item .lf-list-item-title-wrapper .lf-list-item-subtitle{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.8rem}.lf-list-item .lf-list-item-buttons{flex:0 0 auto;display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between}.lf-list-item.lf-list-item-header{font-weight:500}.lf-list-item.lf-list-item-header .lf-list-item-title-wrapper span{width:var(--list-item-title-wrapper-width)}.lf-list-item.lf-list-item-data:hover{background-color:#00000014}.lf-list-item .flex-row{display:flex!important;flex-flow:row nowrap;align-items:center}.drop-zone{width:100%;height:var(--list-item-height);border:2px dashed var(--color-gray);border-radius:var(--list-item-border-radius);box-sizing:border-box}.clickable{cursor:pointer!important}.cdk-drag-preview{color:var(--mat-app-text-color, inherit)!important;background:var(--mat-app-background-color, inherit)!important;box-sizing:border-box;border-radius:var(--list-item-border-radius);opacity:.8;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.4}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2$3.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: i2$3.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i2$3.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: i2$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.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: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i5.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i8.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1550
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1551
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: ListComponent, isStandalone: true, selector: "lf-list", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, groupedItems: { classPropertyName: "groupedItems", publicName: "groupedItems", isSignal: true, isRequired: false, transformFunction: null }, buttons: { classPropertyName: "buttons", publicName: "buttons", isSignal: true, isRequired: false, transformFunction: null }, dropListId: { classPropertyName: "dropListId", publicName: "dropListId", isSignal: true, isRequired: false, transformFunction: null }, connectedDropListIds: { classPropertyName: "connectedDropListIds", publicName: "connectedDropListIds", isSignal: true, isRequired: false, transformFunction: null }, allSelected: { classPropertyName: "allSelected", publicName: "allSelected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChangeEvent: "sortChangeEvent", selectionChangeEvent: "selectionChangeEvent", itemClickEvent: "itemClickEvent", itemDropEvent: "itemDropEvent", buttonClickEvent: "buttonClickEvent", allSelected: "allSelectedChange" }, queries: [{ propertyName: "avatarTemplate", first: true, predicate: ListItemAvatarDirective, descendants: true, isSignal: true }, { propertyName: "titleTemplate", first: true, predicate: ListItemTitleDirective, descendants: true, isSignal: true }, { propertyName: "subtitleTemplate", first: true, predicate: ListItemSubtitleDirective, descendants: true, isSignal: true }, { propertyName: "buttonsTemplate", first: true, predicate: ListItemButtonsDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"lf-list\" cdkDropListGroup>\r\n <!-- Header -->\r\n @if (header(); as header) {\r\n <div\r\n class=\"lf-list-item lf-list-item-header\"\r\n [class.gap-2]=\"!isMobile()\"\r\n [class.gap-1]=\"isMobile()\">\r\n <!-- avatar -->\r\n @if (header.avatar) {\r\n <div class=\"lf-list-item-avatar px-1\">\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-1\">\r\n <!-- icon -->\r\n @if (header.matIcon) {\r\n <mat-icon>\r\n {{ header.matIcon }}\r\n </mat-icon>\r\n } @else if (header.svgIcon) {\r\n <mat-icon [svgIcon]=\"header.svgIcon\"></mat-icon>\r\n }\r\n </div>\r\n } @else if (hasAvatars) {\r\n <div class=\"lf-list-item-avatar px-1\"></div>\r\n }\r\n\r\n <!-- title -->\r\n <div class=\"lf-list-item-title-wrapper flex-row\">\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\" [class.gap-2]=\"!isMobile()\" [class.gap-1]=\"isMobile()\">\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\"\r\n [class.disabled]=\"button.disabled\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"button.disabled\"\r\n [matTooltip]=\"button.tooltip\"\r\n (click)=\"clickButton({ buttonId: button.id, item: null! }, $event)\">\r\n <!-- icon -->\r\n @if (button.matIcon) {\r\n <mat-icon>\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n } @else if (button.svgIcon) {\r\n <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n }\r\n {{ button.label }}\r\n </button>\r\n } @else {\r\n <button\r\n mat-icon-button\r\n class=\"lf-list-item-icon\"\r\n [class.disabled]=\"button.disabled\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"button.disabled\"\r\n [matTooltip]=\"button.tooltip\"\r\n [aria-label]=\"button.id || button.tooltip\"\r\n (click)=\"clickButton({ buttonId: button.id, item: null! }, $event)\">\r\n <!-- icon -->\r\n @if (button.matIcon) {\r\n <mat-icon>\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n } @else if (button.svgIcon) {\r\n <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n }\r\n </button>\r\n }\r\n }\r\n </div>\r\n\r\n <!-- checkbox -->\r\n @if (config()?.enableSelection && !config()?.disableMultiselect) {\r\n <div class=\"lf-list-item-checkbox\">\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\r\n class=\"lf-list-item lf-list-group-header\"\r\n [class.gap-2]=\"!isMobile()\"\r\n [class.gap-1]=\"isMobile()\">\r\n <div class=\"lf-list-item-avatar px-1\"></div>\r\n <div class=\"lf-list-item-title-wrapper flex-row\">\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.gap-2]=\"!isMobile()\"\r\n [class.gap-1]=\"isMobile()\"\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-1\">\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-1\">\r\n <!-- icon -->\r\n @if (item.matIcon) {\r\n <mat-icon>\r\n {{ item.matIcon }}\r\n </mat-icon>\r\n } @else if (item.svgIcon) {\r\n <mat-icon [svgIcon]=\"item.svgIcon\"></mat-icon>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- title -->\r\n <div class=\"lf-list-item-title-wrapper\">\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\" [class.gap-2]=\"!isMobile()\" [class.gap-1]=\"isMobile()\">\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\"\r\n [class.disabled]=\"disabled\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"disabled\"\r\n [matTooltip]=\"button.tooltip\"\r\n (click)=\"clickButton({ buttonId: button.id, item }, $event)\">\r\n <!-- icon -->\r\n @if (button.matIcon) {\r\n <mat-icon>\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n } @else if (button.svgIcon) {\r\n <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n }\r\n {{ button.label }}\r\n </button>\r\n } @else {\r\n <button\r\n mat-icon-button\r\n class=\"lf-list-item-icon\"\r\n [class.disabled]=\"disabled\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"disabled\"\r\n [matTooltip]=\"button.tooltip\"\r\n [aria-label]=\"button.id || button.tooltip\"\r\n (click)=\"clickButton({ buttonId: button.id, item }, $event)\">\r\n <!-- icon -->\r\n @if (button.matIcon) {\r\n <mat-icon>\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n } @else if (button.svgIcon) {\r\n <mat-icon [svgIcon]=\"button.svgIcon\"></mat-icon>\r\n }\r\n </button>\r\n }\r\n }\r\n }\r\n }\r\n\r\n <!-- drag -->\r\n @if (config()?.enableDragging) {\r\n <button\r\n mat-icon-button\r\n class=\"lf-list-item-icon\"\r\n [class.disabled]=\"item.disabled\"\r\n [disabled]=\"item.disabled\"\r\n [aria-label]=\"'Drag handle'\"\r\n (click)=\"stopPropagation($event)\"\r\n cdkDragHandle>\r\n <mat-icon>drag_indicator</mat-icon>\r\n </button>\r\n }\r\n </div>\r\n\r\n <!-- checkbox -->\r\n @if (config()?.enableSelection) {\r\n <div class=\"lf-list-item-checkbox\">\r\n <mat-checkbox\r\n [(ngModel)]=\"item.checked\"\r\n [disabled]=\"item.disabled!\"\r\n (change)=\"selectItem(item, $event)\"\r\n (click)=\"stopPropagation($event)\"></mat-checkbox>\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (config()?.showDividers && !last) {\r\n <mat-divider></mat-divider>\r\n }\r\n </ng-template>\r\n</div>\r\n", styles: [".lf-list,.lf-list .lf-list-group{width:100%}.lf-list .lf-list-group .lf-list-group-header{font-weight:500;height:calc(var(--list-item-height) - 16px)}.lf-list-item{width:100%;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;height:var(--list-item-height);border-radius:var(--list-item-border-radius);box-sizing:border-box;overflow:hidden}.lf-list-item.disabled .lf-list-item-title-wrapper{opacity:.64}.lf-list-item .lf-list-item-sort-icon{font-size:var(--list-item-sort-icon-size);width:var(--list-item-sort-icon-size);height:var(--list-item-sort-icon-size);vertical-align:text-top}.lf-list-item .lf-list-item-checkbox{flex:0 0 var(--list-item-checkbox-width)}.lf-list-item .lf-list-item-avatar{flex:0 0 var(--list-item-avatar-size);display:flex;align-items:center;justify-content:center}.lf-list-item .lf-list-item-avatar img{width:var(--list-item-avatar-size);height:var(--list-item-avatar-size);border-radius:50%;object-fit:cover}.lf-list-item .lf-list-item-title-wrapper{display:flex;flex-flow:column;align-items:flex-start;flex:1 1 var(--list-item-title-width);overflow:hidden}.lf-list-item .lf-list-item-title-wrapper .lf-list-item-title{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.lf-list-item .lf-list-item-title-wrapper .lf-list-item-subtitle{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.8rem}.lf-list-item .lf-list-item-buttons{flex:0 0 auto;display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between}.lf-list-item.lf-list-item-header{font-weight:500}.lf-list-item.lf-list-item-header .lf-list-item-title-wrapper span{width:var(--list-item-title-wrapper-width)}.lf-list-item.lf-list-item-data:hover{background-color:#00000014}.lf-list-item .flex-row{display:flex!important;flex-flow:row nowrap;align-items:center}.drop-zone{width:100%;height:var(--list-item-height);border:2px dashed var(--color-gray);border-radius:var(--list-item-border-radius);box-sizing:border-box}.clickable{cursor:pointer!important}.cdk-drag-preview{color:var(--mat-app-text-color, inherit)!important;background:var(--mat-app-background-color, inherit)!important;box-sizing:border-box;border-radius:var(--list-item-border-radius);opacity:.8;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.4}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2$3.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: i2$3.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i2$3.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: i2$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.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: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i5.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i8.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1469
1552
|
}
|
|
1470
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1553
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ListComponent, decorators: [{
|
|
1471
1554
|
type: Component,
|
|
1472
1555
|
args: [{ selector: 'lf-list', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
|
|
1473
1556
|
FormsModule,
|
|
@@ -1487,23 +1570,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
|
|
|
1487
1570
|
class NotificationComponent {
|
|
1488
1571
|
constructor() {
|
|
1489
1572
|
this.breakpointService = inject(BreakpointService);
|
|
1490
|
-
this.color = input('primary',
|
|
1491
|
-
|
|
1492
|
-
this.
|
|
1493
|
-
|
|
1494
|
-
this.
|
|
1495
|
-
|
|
1496
|
-
this.
|
|
1497
|
-
|
|
1498
|
-
this.
|
|
1499
|
-
|
|
1573
|
+
this.color = input('primary', /* @ts-ignore */
|
|
1574
|
+
...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
|
|
1575
|
+
this.message = input('', /* @ts-ignore */
|
|
1576
|
+
...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
|
|
1577
|
+
this.link = input('', /* @ts-ignore */
|
|
1578
|
+
...(ngDevMode ? [{ debugName: "link" }] : /* istanbul ignore next */ []));
|
|
1579
|
+
this.linkText = input('', /* @ts-ignore */
|
|
1580
|
+
...(ngDevMode ? [{ debugName: "linkText" }] : /* istanbul ignore next */ []));
|
|
1581
|
+
this.action = input('', /* @ts-ignore */
|
|
1582
|
+
...(ngDevMode ? [{ debugName: "action" }] : /* istanbul ignore next */ []));
|
|
1583
|
+
this.matIcon = input('', /* @ts-ignore */
|
|
1584
|
+
...(ngDevMode ? [{ debugName: "matIcon" }] : /* istanbul ignore next */ []));
|
|
1585
|
+
this.svgIcon = input('', /* @ts-ignore */
|
|
1586
|
+
...(ngDevMode ? [{ debugName: "svgIcon" }] : /* istanbul ignore next */ []));
|
|
1587
|
+
this.static = input(false, /* @ts-ignore */
|
|
1588
|
+
...(ngDevMode ? [{ debugName: "static" }] : /* istanbul ignore next */ []));
|
|
1589
|
+
this.minimal = input(false, /* @ts-ignore */
|
|
1590
|
+
...(ngDevMode ? [{ debugName: "minimal" }] : /* istanbul ignore next */ []));
|
|
1591
|
+
this.cssClass = input('', /* @ts-ignore */
|
|
1592
|
+
...(ngDevMode ? [{ debugName: "cssClass" }] : /* istanbul ignore next */ []));
|
|
1500
1593
|
this.clickEvent = output();
|
|
1501
1594
|
this.isMobile = toSignal(this.breakpointService.breakpoint$.pipe(map((state) => state.breakpoints[Breakpoints.XSmall])));
|
|
1502
1595
|
}
|
|
1503
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1504
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1596
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1597
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NotificationComponent, isStandalone: true, selector: "lf-notification", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, linkText: { classPropertyName: "linkText", publicName: "linkText", isSignal: true, isRequired: false, transformFunction: null }, action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: false, transformFunction: null }, matIcon: { classPropertyName: "matIcon", publicName: "matIcon", isSignal: true, isRequired: false, transformFunction: null }, svgIcon: { classPropertyName: "svgIcon", publicName: "svgIcon", isSignal: true, isRequired: false, transformFunction: null }, static: { classPropertyName: "static", publicName: "static", isSignal: true, isRequired: false, transformFunction: null }, minimal: { classPropertyName: "minimal", publicName: "minimal", isSignal: true, isRequired: false, transformFunction: null }, cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickEvent: "clickEvent" }, ngImport: i0, template: "<div\r\n class=\"lf-notification\"\r\n [class.mat-elevation-z2]=\"!static()\"\r\n [class.lf-notification-fixed]=\"!static()\"\r\n [class.lf-notification-static]=\"static()\"\r\n [class.lf-notification-minimal]=\"minimal()\"\r\n [class.lf-mobile]=\"isMobile()\"\r\n [class]=\"[cssClass(), color()]\"\r\n animate.enter=\"lf-anim-scale-enter\">\r\n <div\r\n class=\"lf-notification-content flex-row-nowrap gap-2\"\r\n [class.justify-center]=\"minimal()\"\r\n [class.justify-between]=\"!minimal()\"\r\n [class.flex-col]=\"isMobile()\"\r\n [class.align-center]=\"!isMobile()\"\r\n [class.align-start]=\"isMobile()\">\r\n <span\r\n class=\"lf-notification-message flex-row-nowrap align-center justify-start\"\r\n [class.gap-4]=\"!isMobile()\"\r\n [class.gap-2]=\"isMobile()\">\r\n @if (matIcon()) {\r\n <mat-icon class=\"flex-none\" [color]=\"color()\">{{ matIcon() }}</mat-icon>\r\n }\r\n <span [class.ml-1]=\"!matIcon()\">\r\n {{ message() }}\r\n @if (link() && linkText()) {\r\n <a class=\"lf-notification-link\" [href]=\"link()\">{{ linkText() }}</a>\r\n }\r\n </span>\r\n </span>\r\n\r\n @if (action(); as action) {\r\n <button\r\n mat-flat-button\r\n class=\"lf-notification-action\"\r\n [class.align-self-end]=\"isMobile()\"\r\n [color]=\"color()\"\r\n (click)=\"clickEvent.emit()\">\r\n {{ action }}\r\n </button>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".lf-notification{overflow:hidden;padding:var(--notification-padding);box-sizing:border-box;border-radius:var(--border-radius);color:var(--mat-snack-bar-supporting-text-color, var(--mat-sys-inverse-on-surface));background-color:var(--mat-snack-bar-container-color, var(--mat-sys-inverse-surface));outline-width:2px;outline-style:solid;outline-color:transparent}.lf-notification.lf-mobile.lf-notification-fixed{position:fixed;inset:auto 0 0;max-width:100vw!important;min-width:0!important}.lf-notification.lf-notification-fixed{z-index:1000;position:fixed;inset:auto 0 0 auto;display:inline-table;max-width:var(--notification-max-width);min-width:var(--notification-min-width);margin:var(--notification-fixed-margin)}.lf-notification.lf-notification-static{margin:var(--notification-static-margin)}.lf-notification.lf-notification-minimal{padding:var(--notification-padding-minimal);outline:none!important;margin:0!important}.lf-notification.primary{color:unset!important;background-color:color-mix(in srgb,var(--color-primary) 12%,transparent);outline-color:var(--color-primary-200)}.lf-notification.primary .lf-notification-link{color:unset!important}.lf-notification.accent{color:unset!important;background-color:color-mix(in srgb,var(--color-accent) 12%,transparent);outline-color:var(--color-accent-200)}.lf-notification.accent .lf-notification-link{color:unset!important}.lf-notification.warn{color:unset!important;background-color:color-mix(in srgb,var(--color-warn) 12%,transparent);outline-color:var(--color-warn-200)}.lf-notification.warn .lf-notification-link{color:unset!important}.lf-notification .lf-notification-content .lf-notification-message{font-size:var(--notification-font-size)}.lf-notification .lf-notification-content .lf-notification-message .lf-notification-link{color:var(--mat-snack-bar-supporting-text-color, var(--mat-sys-inverse-on-surface));text-decoration:underline}.lf-notification .lf-notification-content .lf-notification-action{min-width:unset!important;flex-shrink:0;margin:-8px 0 -8px 8px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1505
1598
|
}
|
|
1506
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1599
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NotificationComponent, decorators: [{
|
|
1507
1600
|
type: Component,
|
|
1508
1601
|
args: [{ selector: 'lf-notification', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatButtonModule, MatIconModule], template: "<div\r\n class=\"lf-notification\"\r\n [class.mat-elevation-z2]=\"!static()\"\r\n [class.lf-notification-fixed]=\"!static()\"\r\n [class.lf-notification-static]=\"static()\"\r\n [class.lf-notification-minimal]=\"minimal()\"\r\n [class.lf-mobile]=\"isMobile()\"\r\n [class]=\"[cssClass(), color()]\"\r\n animate.enter=\"lf-anim-scale-enter\">\r\n <div\r\n class=\"lf-notification-content flex-row-nowrap gap-2\"\r\n [class.justify-center]=\"minimal()\"\r\n [class.justify-between]=\"!minimal()\"\r\n [class.flex-col]=\"isMobile()\"\r\n [class.align-center]=\"!isMobile()\"\r\n [class.align-start]=\"isMobile()\">\r\n <span\r\n class=\"lf-notification-message flex-row-nowrap align-center justify-start\"\r\n [class.gap-4]=\"!isMobile()\"\r\n [class.gap-2]=\"isMobile()\">\r\n @if (matIcon()) {\r\n <mat-icon class=\"flex-none\" [color]=\"color()\">{{ matIcon() }}</mat-icon>\r\n }\r\n <span [class.ml-1]=\"!matIcon()\">\r\n {{ message() }}\r\n @if (link() && linkText()) {\r\n <a class=\"lf-notification-link\" [href]=\"link()\">{{ linkText() }}</a>\r\n }\r\n </span>\r\n </span>\r\n\r\n @if (action(); as action) {\r\n <button\r\n mat-flat-button\r\n class=\"lf-notification-action\"\r\n [class.align-self-end]=\"isMobile()\"\r\n [color]=\"color()\"\r\n (click)=\"clickEvent.emit()\">\r\n {{ action }}\r\n </button>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".lf-notification{overflow:hidden;padding:var(--notification-padding);box-sizing:border-box;border-radius:var(--border-radius);color:var(--mat-snack-bar-supporting-text-color, var(--mat-sys-inverse-on-surface));background-color:var(--mat-snack-bar-container-color, var(--mat-sys-inverse-surface));outline-width:2px;outline-style:solid;outline-color:transparent}.lf-notification.lf-mobile.lf-notification-fixed{position:fixed;inset:auto 0 0;max-width:100vw!important;min-width:0!important}.lf-notification.lf-notification-fixed{z-index:1000;position:fixed;inset:auto 0 0 auto;display:inline-table;max-width:var(--notification-max-width);min-width:var(--notification-min-width);margin:var(--notification-fixed-margin)}.lf-notification.lf-notification-static{margin:var(--notification-static-margin)}.lf-notification.lf-notification-minimal{padding:var(--notification-padding-minimal);outline:none!important;margin:0!important}.lf-notification.primary{color:unset!important;background-color:color-mix(in srgb,var(--color-primary) 12%,transparent);outline-color:var(--color-primary-200)}.lf-notification.primary .lf-notification-link{color:unset!important}.lf-notification.accent{color:unset!important;background-color:color-mix(in srgb,var(--color-accent) 12%,transparent);outline-color:var(--color-accent-200)}.lf-notification.accent .lf-notification-link{color:unset!important}.lf-notification.warn{color:unset!important;background-color:color-mix(in srgb,var(--color-warn) 12%,transparent);outline-color:var(--color-warn-200)}.lf-notification.warn .lf-notification-link{color:unset!important}.lf-notification .lf-notification-content .lf-notification-message{font-size:var(--notification-font-size)}.lf-notification .lf-notification-content .lf-notification-message .lf-notification-link{color:var(--mat-snack-bar-supporting-text-color, var(--mat-sys-inverse-on-surface));text-decoration:underline}.lf-notification .lf-notification-content .lf-notification-action{min-width:unset!important;flex-shrink:0;margin:-8px 0 -8px 8px}\n"] }]
|
|
1509
1602
|
}], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }], linkText: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkText", required: false }] }], action: [{ type: i0.Input, args: [{ isSignal: true, alias: "action", required: false }] }], matIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "matIcon", required: false }] }], svgIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "svgIcon", required: false }] }], static: [{ type: i0.Input, args: [{ isSignal: true, alias: "static", required: false }] }], minimal: [{ type: i0.Input, args: [{ isSignal: true, alias: "minimal", required: false }] }], cssClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "cssClass", required: false }] }], clickEvent: [{ type: i0.Output, args: ["clickEvent"] }] } });
|
|
@@ -1511,13 +1604,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
|
|
|
1511
1604
|
class PlaceholderComponent {
|
|
1512
1605
|
constructor() {
|
|
1513
1606
|
this.libraryConfig = inject(CONFIG, { optional: true });
|
|
1514
|
-
this.placeholderConfig = input(
|
|
1607
|
+
this.placeholderConfig = input(/* @ts-ignore */
|
|
1608
|
+
...(ngDevMode ? [undefined, { debugName: "placeholderConfig" }] : /* istanbul ignore next */ []));
|
|
1515
1609
|
this.buttonClickEvent = output();
|
|
1516
1610
|
}
|
|
1517
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1518
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1611
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1612
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: PlaceholderComponent, isStandalone: true, selector: "lf-placeholder", inputs: { placeholderConfig: { classPropertyName: "placeholderConfig", publicName: "placeholderConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClickEvent: "buttonClickEvent" }, ngImport: i0, template: "@if (placeholderConfig(); as config) {\r\n <div class=\"lf-placeholder\" [ngClass]=\"config.cssClass\">\r\n <!-- icon -->\r\n @if (config.matIcon) {\r\n <mat-icon class=\"lf-placeholder-icon\">\r\n {{ config.matIcon }}\r\n </mat-icon>\r\n } @else if (config.svgIcon) {\r\n <mat-icon class=\"lf-placeholder-icon\" [svgIcon]=\"config.svgIcon\"></mat-icon>\r\n } @else if (config.imgIcon) {\r\n <img\r\n class=\"lf-placeholder-image\"\r\n [src]=\"config.imgIcon\"\r\n width=\"96\"\r\n alt=\"Placeholder image\"\r\n loading=\"lazy\" />\r\n }\r\n <!-- heading -->\r\n @if (config.title) {\r\n <p class=\"lf-placeholder-title mt-2\">\r\n {{ config.title }}\r\n </p>\r\n }\r\n <!-- message -->\r\n @if (config.message) {\r\n <p class=\"lf-placeholder-message mt-1\">\r\n {{ config.message }}\r\n </p>\r\n }\r\n <!-- action -->\r\n @if (config.button) {\r\n <button\r\n mat-button\r\n class=\"mt-4\"\r\n color=\"accent\"\r\n [ngClass]=\"config.button.cssClass\"\r\n [disabled]=\"config.button.disabled\"\r\n (click)=\"buttonClickEvent.emit()\"\r\n [matTooltip]=\"config.button.tooltip\">\r\n <!-- icon -->\r\n @if (config.button.matIcon) {\r\n <mat-icon>\r\n {{ config.button.matIcon }}\r\n </mat-icon>\r\n } @else if (config.button.svgIcon) {\r\n <mat-icon [svgIcon]=\"config.button.svgIcon\"></mat-icon>\r\n }\r\n {{ config.button.label }}\r\n </button>\r\n }\r\n </div>\r\n}\r\n", styles: [".lf-placeholder{display:flex;flex-flow:column;align-items:center;justify-content:center;text-align:center}.lf-placeholder .lf-placeholder-icon{width:var(--placeholder-icon-size);height:var(--placeholder-icon-size);font-size:var(--placeholder-icon-size);line-height:var(--placeholder-icon-size);color:var(--color-gray)}.lf-placeholder .lf-placeholder-image{width:var(--placeholder-icon-size);height:var(--placeholder-icon-size);object-fit:contain}.lf-placeholder .lf-placeholder-title{margin:0;font-size:var(--placeholder-title-font-size);font-weight:500}.lf-placeholder .lf-placeholder-message{margin:0;font-size:var(--placeholder-message-font-size)}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1519
1613
|
}
|
|
1520
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1614
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PlaceholderComponent, decorators: [{
|
|
1521
1615
|
type: Component,
|
|
1522
1616
|
args: [{ selector: 'lf-placeholder', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatButtonModule, MatIconModule, MatTooltipModule, NgClass], template: "@if (placeholderConfig(); as config) {\r\n <div class=\"lf-placeholder\" [ngClass]=\"config.cssClass\">\r\n <!-- icon -->\r\n @if (config.matIcon) {\r\n <mat-icon class=\"lf-placeholder-icon\">\r\n {{ config.matIcon }}\r\n </mat-icon>\r\n } @else if (config.svgIcon) {\r\n <mat-icon class=\"lf-placeholder-icon\" [svgIcon]=\"config.svgIcon\"></mat-icon>\r\n } @else if (config.imgIcon) {\r\n <img\r\n class=\"lf-placeholder-image\"\r\n [src]=\"config.imgIcon\"\r\n width=\"96\"\r\n alt=\"Placeholder image\"\r\n loading=\"lazy\" />\r\n }\r\n <!-- heading -->\r\n @if (config.title) {\r\n <p class=\"lf-placeholder-title mt-2\">\r\n {{ config.title }}\r\n </p>\r\n }\r\n <!-- message -->\r\n @if (config.message) {\r\n <p class=\"lf-placeholder-message mt-1\">\r\n {{ config.message }}\r\n </p>\r\n }\r\n <!-- action -->\r\n @if (config.button) {\r\n <button\r\n mat-button\r\n class=\"mt-4\"\r\n color=\"accent\"\r\n [ngClass]=\"config.button.cssClass\"\r\n [disabled]=\"config.button.disabled\"\r\n (click)=\"buttonClickEvent.emit()\"\r\n [matTooltip]=\"config.button.tooltip\">\r\n <!-- icon -->\r\n @if (config.button.matIcon) {\r\n <mat-icon>\r\n {{ config.button.matIcon }}\r\n </mat-icon>\r\n } @else if (config.button.svgIcon) {\r\n <mat-icon [svgIcon]=\"config.button.svgIcon\"></mat-icon>\r\n }\r\n {{ config.button.label }}\r\n </button>\r\n }\r\n </div>\r\n}\r\n", styles: [".lf-placeholder{display:flex;flex-flow:column;align-items:center;justify-content:center;text-align:center}.lf-placeholder .lf-placeholder-icon{width:var(--placeholder-icon-size);height:var(--placeholder-icon-size);font-size:var(--placeholder-icon-size);line-height:var(--placeholder-icon-size);color:var(--color-gray)}.lf-placeholder .lf-placeholder-image{width:var(--placeholder-icon-size);height:var(--placeholder-icon-size);object-fit:contain}.lf-placeholder .lf-placeholder-title{margin:0;font-size:var(--placeholder-title-font-size);font-weight:500}.lf-placeholder .lf-placeholder-message{margin:0;font-size:var(--placeholder-message-font-size)}\n"] }]
|
|
1523
1617
|
}], propDecorators: { placeholderConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderConfig", required: false }] }], buttonClickEvent: [{ type: i0.Output, args: ["buttonClickEvent"] }] } });
|
|
@@ -1559,10 +1653,10 @@ class ScaffoldLoadingInterceptor {
|
|
|
1559
1653
|
}
|
|
1560
1654
|
}));
|
|
1561
1655
|
}
|
|
1562
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1563
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1656
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ScaffoldLoadingInterceptor, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1657
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ScaffoldLoadingInterceptor }); }
|
|
1564
1658
|
}
|
|
1565
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1659
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ScaffoldLoadingInterceptor, decorators: [{
|
|
1566
1660
|
type: Injectable
|
|
1567
1661
|
}] });
|
|
1568
1662
|
|