@lukfel/ng-scaffold 22.1.13 → 22.1.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { MediaMatcher, BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { inject, PLATFORM_ID, REQUEST, Injectable, InjectionToken, makeEnvironmentProviders, DOCUMENT, signal, input, output, ChangeDetectionStrategy, Component, effect, DestroyRef, viewChild,
|
|
3
|
+
import { inject, PLATFORM_ID, REQUEST, Injectable, InjectionToken, makeEnvironmentProviders, DOCUMENT, signal, computed, input, output, ChangeDetectionStrategy, Component, effect, DestroyRef, viewChild, model, afterNextRender, linkedSignal, TemplateRef, Directive, contentChild } from '@angular/core';
|
|
4
4
|
import { isPlatformBrowser, NgClass, NgTemplateOutlet, KeyValuePipe } from '@angular/common';
|
|
5
5
|
import { toObservable, toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
6
6
|
import * as i1$3 from '@angular/router';
|
|
@@ -686,16 +686,33 @@ class SnackbarService {
|
|
|
686
686
|
horizontalPosition: this.SNACKBAR_POSITION_HORIZONTAL,
|
|
687
687
|
verticalPosition: this.SNACKBAR_POSITION_VERTICAL,
|
|
688
688
|
};
|
|
689
|
+
this.bottomOpenCount = signal(0, /* @ts-ignore */
|
|
690
|
+
...(ngDevMode ? [{ debugName: "bottomOpenCount" }] : /* istanbul ignore next */ []));
|
|
691
|
+
this.bottomSnackbarOpen = computed(() => this.bottomOpenCount() > 0, /* @ts-ignore */
|
|
692
|
+
...(ngDevMode ? [{ debugName: "bottomSnackbarOpen" }] : /* istanbul ignore next */ []));
|
|
689
693
|
}
|
|
690
694
|
// Opens a generic snackbar with a message
|
|
691
695
|
openSnackbar(message, closeLabel, config) {
|
|
692
|
-
|
|
696
|
+
const snackbarConfig = config ? config : this.defaultConfig;
|
|
697
|
+
this.track(this.snackbar.open(message, closeLabel, snackbarConfig), snackbarConfig);
|
|
693
698
|
}
|
|
694
699
|
// Opens a snackbar with an action to wait for
|
|
695
700
|
openSnackbarWithAction(message, action, config) {
|
|
696
|
-
const
|
|
701
|
+
const snackbarConfig = config ? config : this.actionConfig;
|
|
702
|
+
const snackbarRef = this.snackbar.open(message, action, snackbarConfig);
|
|
703
|
+
this.track(snackbarRef, snackbarConfig);
|
|
697
704
|
return firstValueFrom(snackbarRef.onAction());
|
|
698
705
|
}
|
|
706
|
+
track(snackbarRef, config) {
|
|
707
|
+
// MatSnackBarConfig itself defaults to 'bottom', so an unset position is a bottom one
|
|
708
|
+
if ((config.verticalPosition ?? 'bottom') !== 'bottom')
|
|
709
|
+
return;
|
|
710
|
+
this.bottomOpenCount.update((count) => count + 1);
|
|
711
|
+
// afterDismissed completes once the snackbar is gone, so there is nothing to unsubscribe
|
|
712
|
+
snackbarRef
|
|
713
|
+
.afterDismissed()
|
|
714
|
+
.subscribe(() => this.bottomOpenCount.update((count) => Math.max(0, count - 1)));
|
|
715
|
+
}
|
|
699
716
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SnackbarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
700
717
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SnackbarService, providedIn: 'root' }); }
|
|
701
718
|
}
|
|
@@ -1071,6 +1088,8 @@ class FloatingButtonComponent {
|
|
|
1071
1088
|
...(ngDevMode ? [{ debugName: "navbarEnabled" }] : /* istanbul ignore next */ []));
|
|
1072
1089
|
this.bottomBarEnabled = input(false, /* @ts-ignore */
|
|
1073
1090
|
...(ngDevMode ? [{ debugName: "bottomBarEnabled" }] : /* istanbul ignore next */ []));
|
|
1091
|
+
this.bottomSnackbarOpen = input(false, /* @ts-ignore */
|
|
1092
|
+
...(ngDevMode ? [{ debugName: "bottomSnackbarOpen" }] : /* istanbul ignore next */ []));
|
|
1074
1093
|
this.floatingButtonConfigUpdateEvent = output();
|
|
1075
1094
|
this.floatingButtonClickEvent = output();
|
|
1076
1095
|
this.initialized = signal(false, /* @ts-ignore */
|
|
@@ -1095,12 +1114,12 @@ class FloatingButtonComponent {
|
|
|
1095
1114
|
this.floatingButtonClickEvent.emit(id || '');
|
|
1096
1115
|
}
|
|
1097
1116
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FloatingButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1098
|
-
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 }); }
|
|
1117
|
+
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 }, bottomSnackbarOpen: { classPropertyName: "bottomSnackbarOpen", publicName: "bottomSnackbarOpen", 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-snackbar]=\"bottomSnackbarOpen()\"\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:calc(var(--floating-button-bottom) + var(--lf-fab-snackbar-offset, 0px))}.lf-floating-button.show-snackbar{--lf-fab-snackbar-offset: var(--floating-button-snackbar-offset)}.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) + var(--lf-fab-snackbar-offset, 0px))}.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) + var(--lf-fab-snackbar-offset, 0px))}.lf-floating-button:not(.sticky).show-bottom-bar{bottom:calc(var(--floating-button-bottom) + var(--bottom-bar-height) + var(--lf-fab-snackbar-offset, 0px))}.lf-floating-button:not(.sticky).show-navbar-and-bottom-bar{bottom:calc(var(--floating-button-bottom) + var(--navbar-height-mobile) + var(--bottom-bar-height) + var(--lf-fab-snackbar-offset, 0px))}.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 }); }
|
|
1099
1118
|
}
|
|
1100
1119
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FloatingButtonComponent, decorators: [{
|
|
1101
1120
|
type: Component,
|
|
1102
|
-
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"] }]
|
|
1103
|
-
}], 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"] }] } });
|
|
1121
|
+
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-snackbar]=\"bottomSnackbarOpen()\"\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:calc(var(--floating-button-bottom) + var(--lf-fab-snackbar-offset, 0px))}.lf-floating-button.show-snackbar{--lf-fab-snackbar-offset: var(--floating-button-snackbar-offset)}.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) + var(--lf-fab-snackbar-offset, 0px))}.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) + var(--lf-fab-snackbar-offset, 0px))}.lf-floating-button:not(.sticky).show-bottom-bar{bottom:calc(var(--floating-button-bottom) + var(--bottom-bar-height) + var(--lf-fab-snackbar-offset, 0px))}.lf-floating-button:not(.sticky).show-navbar-and-bottom-bar{bottom:calc(var(--floating-button-bottom) + var(--navbar-height-mobile) + var(--bottom-bar-height) + var(--lf-fab-snackbar-offset, 0px))}.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"] }]
|
|
1122
|
+
}], 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 }] }], bottomSnackbarOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "bottomSnackbarOpen", required: false }] }], floatingButtonConfigUpdateEvent: [{ type: i0.Output, args: ["floatingButtonConfigUpdateEvent"] }], floatingButtonClickEvent: [{ type: i0.Output, args: ["floatingButtonClickEvent"] }] } });
|
|
1104
1123
|
|
|
1105
1124
|
class FooterComponent {
|
|
1106
1125
|
constructor() {
|
|
@@ -1330,6 +1349,7 @@ class ScaffoldComponent {
|
|
|
1330
1349
|
this.libraryConfig = inject(CONFIG, { optional: true });
|
|
1331
1350
|
this.scaffoldService = inject(ScaffoldService);
|
|
1332
1351
|
this.breakpointService = inject(BreakpointService);
|
|
1352
|
+
this.snackbarService = inject(SnackbarService);
|
|
1333
1353
|
this.routerService = inject(RouterService);
|
|
1334
1354
|
this.overlayService = inject(OverlayService);
|
|
1335
1355
|
this.route = inject(ActivatedRoute);
|
|
@@ -1364,6 +1384,8 @@ class ScaffoldComponent {
|
|
|
1364
1384
|
...(ngDevMode ? [{ debugName: "floatingButtonConfig" }] : /* istanbul ignore next */ []));
|
|
1365
1385
|
this.bottomBarConfig = computed(() => this.scaffoldConfig()?.bottomBarConfig || null, /* @ts-ignore */
|
|
1366
1386
|
...(ngDevMode ? [{ debugName: "bottomBarConfig" }] : /* istanbul ignore next */ []));
|
|
1387
|
+
// The floating button lifts itself clear of a snackbar along the bottom edge
|
|
1388
|
+
this.bottomSnackbarOpen = this.snackbarService.bottomSnackbarOpen;
|
|
1367
1389
|
this.routeHistory = toSignal(this.routerService.routeHistory$.pipe(tap((routeHistory) => {
|
|
1368
1390
|
if (this.libraryConfig?.debugging)
|
|
1369
1391
|
this.logger.log('[RouteHistory]', routeHistory);
|
|
@@ -1522,7 +1544,7 @@ class ScaffoldComponent {
|
|
|
1522
1544
|
this.fragmentAnimationFrameId = null;
|
|
1523
1545
|
}
|
|
1524
1546
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ScaffoldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1525
|
-
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]=\"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"], 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 }); }
|
|
1547
|
+
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]=\"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 [bottomSnackbarOpen]=\"bottomSnackbarOpen()\"\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"], 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", "bottomSnackbarOpen"], outputs: ["floatingButtonConfigUpdateEvent", "floatingButtonClickEvent"] }, { kind: "component", type: BottomBarComponent, selector: "lf-bottom-bar", inputs: ["libraryConfig", "bottomBarConfig", "isMobile", "navbarEnabled"], outputs: ["bottomBarCloseClickEvent", "bottomBarButtonClickEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1526
1548
|
}
|
|
1527
1549
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ScaffoldComponent, decorators: [{
|
|
1528
1550
|
type: Component,
|
|
@@ -1535,7 +1557,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
1535
1557
|
ContentTitleCardComponent,
|
|
1536
1558
|
FloatingButtonComponent,
|
|
1537
1559
|
BottomBarComponent,
|
|
1538
|
-
], 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"] }]
|
|
1560
|
+
], 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 [bottomSnackbarOpen]=\"bottomSnackbarOpen()\"\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"] }]
|
|
1539
1561
|
}], 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"] }] } });
|
|
1540
1562
|
|
|
1541
1563
|
class ColorPickerComponent {
|