@lukfel/ng-scaffold 21.1.38 → 21.1.40
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.
|
@@ -704,7 +704,7 @@ class BottomBarComponent {
|
|
|
704
704
|
this.bottomBarCloseClickEvent.emit(closeButtonId);
|
|
705
705
|
}
|
|
706
706
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: BottomBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
707
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", 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 <div\r\n [@slideUpDown]\r\n class=\"lf-bottom-bar lf-transitions px-4\"\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
|
|
707
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", 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 <div\r\n [@slideUpDown]\r\n class=\"lf-bottom-bar lf-transitions px-4\"\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 </div>\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);display:flex;align-items:center;box-sizing:border-box;background-color:var(--color-accent);color:#fff}.lf-bottom-bar.lf-bottom-bar-show-navbar-mobile{bottom: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}.lf-bottom-bar .lf-bottom-bar-buttons .lf-bottom-bar-button-icon{color:#fff!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], animations: [
|
|
708
708
|
trigger('slideUpDown', [
|
|
709
709
|
state('void', style({ transform: 'translateY(100%)' })),
|
|
710
710
|
state('*', style({ transform: 'translateY(0)' })),
|
|
@@ -727,7 +727,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
727
727
|
MatButtonModule,
|
|
728
728
|
MatIconModule,
|
|
729
729
|
MatTooltipModule
|
|
730
|
-
], template: "@if (bottomBarConfig(); as config) {\r\n @if (config.enable) {\r\n <div\r\n [@slideUpDown]\r\n class=\"lf-bottom-bar lf-transitions px-4\"\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
|
|
730
|
+
], template: "@if (bottomBarConfig(); as config) {\r\n @if (config.enable) {\r\n <div\r\n [@slideUpDown]\r\n class=\"lf-bottom-bar lf-transitions px-4\"\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 </div>\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);display:flex;align-items:center;box-sizing:border-box;background-color:var(--color-accent);color:#fff}.lf-bottom-bar.lf-bottom-bar-show-navbar-mobile{bottom: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}.lf-bottom-bar .lf-bottom-bar-buttons .lf-bottom-bar-button-icon{color:#fff!important}\n"] }]
|
|
731
731
|
}], 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"] }] } });
|
|
732
732
|
|
|
733
733
|
class ContentTitleCardComponent {
|
|
@@ -817,7 +817,7 @@ class FloatingButtonComponent {
|
|
|
817
817
|
this.floatingButtonClickEvent.emit(id || '');
|
|
818
818
|
}
|
|
819
819
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FloatingButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
820
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", 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
|
|
820
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", 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: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
821
821
|
}
|
|
822
822
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FloatingButtonComponent, decorators: [{
|
|
823
823
|
type: Component,
|
|
@@ -826,7 +826,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
826
826
|
MatButtonModule,
|
|
827
827
|
MatIconModule,
|
|
828
828
|
MatTooltipModule
|
|
829
|
-
], 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
|
|
829
|
+
], 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"] }]
|
|
830
830
|
}], 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"] }] } });
|
|
831
831
|
|
|
832
832
|
class FooterComponent {
|
|
@@ -971,7 +971,7 @@ class HeaderComponent {
|
|
|
971
971
|
this.headerConfigUpdateEvent.emit({ inputConfig: { enable: false } });
|
|
972
972
|
}
|
|
973
973
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
974
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", 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 [class.material-icons-outlined]=\"libraryConfig()?.outlineIcons\">\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 [class.material-icons-outlined]=\"libraryConfig()?.outlineIcons\">\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 px-1\"\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 [class.material-icons-outlined]=\"libraryConfig()?.outlineIcons\">\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 [class.material-icons-outlined]=\"libraryConfig()?.outlineIcons\">\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;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: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i3$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.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: i2.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i7.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: InputComponent, selector: "lf-input", inputs: ["inputConfig", "isMobile", "inputValue"], outputs: ["inputSubmitEvent", "inputChangeEvent", "inputPrefixActionEvent", "inputValueChange"] }], animations: [
|
|
974
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", 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 px-1\"\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;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: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i3$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.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: i2.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i7.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: InputComponent, selector: "lf-input", inputs: ["inputConfig", "isMobile", "inputValue"], outputs: ["inputSubmitEvent", "inputChangeEvent", "inputPrefixActionEvent", "inputValueChange"] }], animations: [
|
|
975
975
|
trigger('slideDownUp', [
|
|
976
976
|
state('void', style({ transform: 'translateY(-100%)' })),
|
|
977
977
|
state('*', style({ transform: 'translateY(0)' })),
|
|
@@ -999,7 +999,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
999
999
|
MatProgressBarModule,
|
|
1000
1000
|
MatTooltipModule,
|
|
1001
1001
|
InputComponent
|
|
1002
|
-
], 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 [class.material-icons-outlined]=\"libraryConfig()?.outlineIcons\">\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 [class.material-icons-outlined]=\"libraryConfig()?.outlineIcons\">\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 px-1\"\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 [class.material-icons-outlined]=\"libraryConfig()?.outlineIcons\">\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 [class.material-icons-outlined]=\"libraryConfig()?.outlineIcons\">\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;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"] }]
|
|
1002
|
+
], 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 px-1\"\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;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"] }]
|
|
1003
1003
|
}], propDecorators: { libraryConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "libraryConfig", required: false }] }], headerConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerConfig", required: false }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], routeLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "routeLoading", required: false }] }], currentRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentRoute", required: false }] }], headerConfigUpdateEvent: [{ type: i0.Output, args: ["headerConfigUpdateEvent"] }], headerButtonClickEvent: [{ type: i0.Output, args: ["headerButtonClickEvent"] }], headerInputSubmitEvent: [{ type: i0.Output, args: ["headerInputSubmitEvent"] }], headerInputChangeEvent: [{ type: i0.Output, args: ["headerInputChangeEvent"] }] } });
|
|
1004
1004
|
|
|
1005
1005
|
class LoadingOverlayComponent {
|
|
@@ -1048,7 +1048,7 @@ class NavbarComponent {
|
|
|
1048
1048
|
this.navbarButtonClickEvent.emit(id);
|
|
1049
1049
|
}
|
|
1050
1050
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: NavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1051
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", 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 [@responsiveSlide]=\"isMobile() ? 'mobile' : 'desktop'\"\r\n class=\"mat-app-background lf-transitions mat-elevation-z3\"\r\n [class.lf-navbar]=\"!isMobile()\"\r\n [class.lf-navbar-mobile]=\"isMobile()\"\r\n [ngClass]=\"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
|
|
1051
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", 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 [@responsiveSlide]=\"isMobile() ? 'mobile' : 'desktop'\"\r\n class=\"mat-app-background lf-transitions mat-elevation-z3\"\r\n [class.lf-navbar]=\"!isMobile()\"\r\n [class.lf-navbar-mobile]=\"isMobile()\"\r\n [ngClass]=\"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: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], animations: [
|
|
1052
1052
|
trigger('responsiveSlide', [
|
|
1053
1053
|
// States for desktop and mobile
|
|
1054
1054
|
state('desktop', style({ transform: 'translateX(0)' })),
|
|
@@ -1104,7 +1104,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
1104
1104
|
CommonModule,
|
|
1105
1105
|
MatIconModule,
|
|
1106
1106
|
MatTooltipModule
|
|
1107
|
-
], template: "@if (navbarConfig(); as config) {\r\n @if (config.enable) {\r\n <div\r\n [@responsiveSlide]=\"isMobile() ? 'mobile' : 'desktop'\"\r\n class=\"mat-app-background lf-transitions mat-elevation-z3\"\r\n [class.lf-navbar]=\"!isMobile()\"\r\n [class.lf-navbar-mobile]=\"isMobile()\"\r\n [ngClass]=\"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
|
|
1107
|
+
], template: "@if (navbarConfig(); as config) {\r\n @if (config.enable) {\r\n <div\r\n [@responsiveSlide]=\"isMobile() ? 'mobile' : 'desktop'\"\r\n class=\"mat-app-background lf-transitions mat-elevation-z3\"\r\n [class.lf-navbar]=\"!isMobile()\"\r\n [class.lf-navbar-mobile]=\"isMobile()\"\r\n [ngClass]=\"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"] }]
|
|
1108
1108
|
}], 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"] }] } });
|
|
1109
1109
|
|
|
1110
1110
|
class ScaffoldComponent {
|
|
@@ -1262,7 +1262,7 @@ class ScaffoldComponent {
|
|
|
1262
1262
|
}
|
|
1263
1263
|
}
|
|
1264
1264
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ScaffoldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1265
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.3", 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:
|
|
1265
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.3", 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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.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 }); }
|
|
1266
1266
|
}
|
|
1267
1267
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ScaffoldComponent, decorators: [{
|
|
1268
1268
|
type: Component,
|
|
@@ -1276,7 +1276,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
1276
1276
|
FloatingButtonComponent,
|
|
1277
1277
|
BottomBarComponent,
|
|
1278
1278
|
LoadingOverlayComponent
|
|
1279
|
-
], 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:
|
|
1279
|
+
], 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"] }]
|
|
1280
1280
|
}], 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"] }] } });
|
|
1281
1281
|
|
|
1282
1282
|
class ListItemAvatarDirective {
|
|
@@ -1434,7 +1434,7 @@ class ListComponent {
|
|
|
1434
1434
|
click.stopImmediatePropagation();
|
|
1435
1435
|
}
|
|
1436
1436
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1437
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", 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 }], usesOnChanges: true, ngImport: i0, template: "<div class=\"lf-list\" cdkDropListGroup>\r\n <!-- Header -->\r\n @if (header(); as header) {\r\n <div class=\"lf-list-item lf-list-item-header\">\r\n <!-- avatar -->\r\n @if (header.avatar) {\r\n <div class=\"lf-list-item-avatar px-2\">\r\n <img [src]=\"header.avatar\" alt=\"Avatar of header\" (error)=\"onImageError($event)\" />\r\n </div>\r\n } @else if (header.matIcon || header.svgIcon) {\r\n <div class=\"lf-list-item-avatar px-2\">\r\n <!-- icon -->\r\n @if (header.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\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-2\"></div>\r\n }\r\n\r\n <!-- title -->\r\n <div class=\"lf-list-item-title-wrapper flex-row px-2\">\r\n @for (item of header.items; track $index) {\r\n <span [class.clickable]=\"item.sortToken\" (click)=\"updateSortToken(item.sortToken)\">\r\n {{ item.title }}\r\n @if (sortToken() === item.sortToken) {\r\n <mat-icon class=\"lf-list-item-sort-icon\">\r\n {{ sortAsc() ? \"arrow_downward\" : \"arrow_upward\" }}\r\n </mat-icon>\r\n }\r\n </span>\r\n }\r\n </div>\r\n\r\n <!-- buttons -->\r\n <div class=\"lf-list-item-buttons\">\r\n @for (button of header.buttons; track button.id) {\r\n @if (button.label) {\r\n <button\r\n mat-button\r\n class=\"lf-list-item-button ml-2\"\r\n [class.disabled]=\"button.disabled\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"button.disabled\"\r\n [matTooltip]=\"button.tooltip\"\r\n (click)=\"clickButton({ buttonId: button.id, item: null! }, $event)\">\r\n <!-- icon -->\r\n @if (button.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\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 ml-2\"\r\n [class.disabled]=\"button.disabled\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"button.disabled\"\r\n [matTooltip]=\"button.tooltip\"\r\n [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 [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\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 ml-3\">\r\n <mat-checkbox\r\n [(ngModel)]=\"allSelected\"\r\n [indeterminate]=\"someSelected\"\r\n (change)=\"selectAll($event)\"></mat-checkbox>\r\n </div>\r\n }\r\n </div>\r\n <mat-divider></mat-divider>\r\n }\r\n\r\n <!-- Grouped Items -->\r\n @if (config()?.mode === \"group\" && groupedItems()) {\r\n @for (group of groupedItems() | keyvalue; track group.key; let first = $first) {\r\n <div class=\"lf-list-group\" [class.mt-4]=\"!first\">\r\n @if (group.key) {\r\n <div class=\"lf-list-item lf-list-group-header\">\r\n <div class=\"lf-list-item-avatar px-2\"></div>\r\n <div class=\"lf-list-item-title-wrapper flex-row px-2\">\r\n <span>{{ group.key }}</span>\r\n </div>\r\n </div>\r\n }\r\n <div\r\n [id]=\"group.key\"\r\n cdkDropList\r\n [cdkDropListData]=\"group.value\"\r\n [cdkDropListDisabled]=\"!config()?.enableDragging\"\r\n [cdkDropListConnectedTo]=\"connectedDropListIds()!\"\r\n (cdkDropListDropped)=\"dropItem($event, group.key)\"\r\n [class.drop-zone]=\"config()?.enableDragging && group.value.length <= 0\">\r\n @for (item of group.value; track item.id; let last = $last) {\r\n <div\r\n cdkDrag\r\n [cdkDragData]=\"item\"\r\n [cdkDragDisabled]=\"item.disabled || !config()?.enableDragging\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"listItemTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item, last: last }\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n <!-- Flat Items -->\r\n } @else {\r\n <div\r\n [id]=\"dropListId()!\"\r\n cdkDropList\r\n [cdkDropListData]=\"items()\"\r\n [cdkDropListDisabled]=\"!config()?.enableDragging\"\r\n [cdkDropListConnectedTo]=\"connectedDropListIds()!\"\r\n (cdkDropListDropped)=\"dropItem($event, dropListId()!)\"\r\n [class.drop-zone]=\"config()?.enableDragging && items().length <= 0\">\r\n @for (item of items(); track item.id; let last = $last) {\r\n <div\r\n cdkDrag\r\n [cdkDragData]=\"item\"\r\n [cdkDragDisabled]=\"item.disabled || !config()?.enableDragging\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"listItemTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item, last: last }\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Item (template) -->\r\n <ng-template #listItemTemplate let-item let-last=\"last\">\r\n <div\r\n class=\"lf-list-item lf-list-item-data\"\r\n [class.active]=\"item.checked\"\r\n [class.disabled]=\"item.disabled\"\r\n [class.clickable]=\"item.clickable && !item.disabled\"\r\n [ngClass]=\"item.cssClass\"\r\n matRipple\r\n [matRippleDisabled]=\"!item.clickable\"\r\n (click)=\"item.clickable && !item.disabled ? clickItem(item, $event) : null\">\r\n <!-- avatar -->\r\n @if (avatarTemplate()) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"avatarTemplate()!.templateRef\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n } @else if (item.avatar) {\r\n <div class=\"lf-list-item-avatar px-2\">\r\n <img\r\n [src]=\"item.avatar\"\r\n [alt]=\"'Avatar of ' + item.title\"\r\n (error)=\"onImageError($event)\" />\r\n </div>\r\n } @else if (item.matIcon || item.svgIcon) {\r\n <div class=\"lf-list-item-avatar px-2\">\r\n <!-- icon -->\r\n @if (item.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\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 px-2\">\r\n <span class=\"lf-list-item-title\">\r\n @if (titleTemplate()) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"titleTemplate()!.templateRef\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n } @else {\r\n {{ item.title }}\r\n }\r\n </span>\r\n @if (item.subtitle || subtitleTemplate()) {\r\n <span class=\"lf-list-item-subtitle\">\r\n @if (subtitleTemplate()) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"subtitleTemplate()!.templateRef\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n } @else {\r\n {{ item.subtitle }}\r\n }\r\n </span>\r\n }\r\n </div>\r\n\r\n <!-- buttons -->\r\n <div class=\"lf-list-item-buttons\">\r\n @if (buttonsTemplate()) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"buttonsTemplate()!.templateRef\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n } @else {\r\n @let combinedButtons = getCombinedButtons(item);\r\n @for (button of combinedButtons; track button.id) {\r\n @if (!item.hiddenButtonIds?.includes(button.id)) {\r\n @let disabled =\r\n button.disabled || item.disabled || item.disabledButtonIds?.includes(button.id);\r\n @if (button.label) {\r\n <button\r\n mat-button\r\n class=\"lf-list-item-button ml-2\"\r\n [class.disabled]=\"disabled\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"disabled\"\r\n [matTooltip]=\"button.tooltip\"\r\n (click)=\"clickButton({ buttonId: button.id, item }, $event)\">\r\n <!-- icon -->\r\n @if (button.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\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 ml-2\"\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 [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\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 ml-2\"\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 ml-3\">\r\n <mat-checkbox\r\n [(ngModel)]=\"item.checked\"\r\n [disabled]=\"item.disabled!\"\r\n (change)=\"selectItem(item, $event)\"\r\n (click)=\"stopPropagation($event)\"></mat-checkbox>\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (config()?.showDividers && !last) {\r\n <mat-divider></mat-divider>\r\n }\r\n </ng-template>\r\n</div>\r\n", styles: [".lf-list,.lf-list .lf-list-group{width:100%}.lf-list .lf-list-group .lf-list-group-header{font-weight:500;height: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: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3$4.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: i3$4.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i3$4.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: i3$4.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i5.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: i6.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i9.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1437
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", 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 }], usesOnChanges: true, ngImport: i0, template: "<div class=\"lf-list\" cdkDropListGroup>\r\n <!-- Header -->\r\n @if (header(); as header) {\r\n <div class=\"lf-list-item lf-list-item-header\">\r\n <!-- avatar -->\r\n @if (header.avatar) {\r\n <div class=\"lf-list-item-avatar px-2\">\r\n <img [src]=\"header.avatar\" alt=\"Avatar of header\" (error)=\"onImageError($event)\" />\r\n </div>\r\n } @else if (header.matIcon || header.svgIcon) {\r\n <div class=\"lf-list-item-avatar px-2\">\r\n <!-- 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-2\"></div>\r\n }\r\n\r\n <!-- title -->\r\n <div class=\"lf-list-item-title-wrapper flex-row px-2\">\r\n @for (item of header.items; track $index) {\r\n <span [class.clickable]=\"item.sortToken\" (click)=\"updateSortToken(item.sortToken)\">\r\n {{ item.title }}\r\n @if (sortToken() === item.sortToken) {\r\n <mat-icon class=\"lf-list-item-sort-icon\">\r\n {{ sortAsc() ? \"arrow_downward\" : \"arrow_upward\" }}\r\n </mat-icon>\r\n }\r\n </span>\r\n }\r\n </div>\r\n\r\n <!-- buttons -->\r\n <div class=\"lf-list-item-buttons\">\r\n @for (button of header.buttons; track button.id) {\r\n @if (button.label) {\r\n <button\r\n mat-button\r\n class=\"lf-list-item-button ml-2\"\r\n [class.disabled]=\"button.disabled\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"button.disabled\"\r\n [matTooltip]=\"button.tooltip\"\r\n (click)=\"clickButton({ buttonId: button.id, item: null! }, $event)\">\r\n <!-- 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 ml-2\"\r\n [class.disabled]=\"button.disabled\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"button.disabled\"\r\n [matTooltip]=\"button.tooltip\"\r\n [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 ml-3\">\r\n <mat-checkbox\r\n [(ngModel)]=\"allSelected\"\r\n [indeterminate]=\"someSelected\"\r\n (change)=\"selectAll($event)\"></mat-checkbox>\r\n </div>\r\n }\r\n </div>\r\n <mat-divider></mat-divider>\r\n }\r\n\r\n <!-- Grouped Items -->\r\n @if (config()?.mode === \"group\" && groupedItems()) {\r\n @for (group of groupedItems() | keyvalue; track group.key; let first = $first) {\r\n <div class=\"lf-list-group\" [class.mt-4]=\"!first\">\r\n @if (group.key) {\r\n <div class=\"lf-list-item lf-list-group-header\">\r\n <div class=\"lf-list-item-avatar px-2\"></div>\r\n <div class=\"lf-list-item-title-wrapper flex-row px-2\">\r\n <span>{{ group.key }}</span>\r\n </div>\r\n </div>\r\n }\r\n <div\r\n [id]=\"group.key\"\r\n cdkDropList\r\n [cdkDropListData]=\"group.value\"\r\n [cdkDropListDisabled]=\"!config()?.enableDragging\"\r\n [cdkDropListConnectedTo]=\"connectedDropListIds()!\"\r\n (cdkDropListDropped)=\"dropItem($event, group.key)\"\r\n [class.drop-zone]=\"config()?.enableDragging && group.value.length <= 0\">\r\n @for (item of group.value; track item.id; let last = $last) {\r\n <div\r\n cdkDrag\r\n [cdkDragData]=\"item\"\r\n [cdkDragDisabled]=\"item.disabled || !config()?.enableDragging\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"listItemTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item, last: last }\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n <!-- Flat Items -->\r\n } @else {\r\n <div\r\n [id]=\"dropListId()!\"\r\n cdkDropList\r\n [cdkDropListData]=\"items()\"\r\n [cdkDropListDisabled]=\"!config()?.enableDragging\"\r\n [cdkDropListConnectedTo]=\"connectedDropListIds()!\"\r\n (cdkDropListDropped)=\"dropItem($event, dropListId()!)\"\r\n [class.drop-zone]=\"config()?.enableDragging && items().length <= 0\">\r\n @for (item of items(); track item.id; let last = $last) {\r\n <div\r\n cdkDrag\r\n [cdkDragData]=\"item\"\r\n [cdkDragDisabled]=\"item.disabled || !config()?.enableDragging\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"listItemTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item, last: last }\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Item (template) -->\r\n <ng-template #listItemTemplate let-item let-last=\"last\">\r\n <div\r\n class=\"lf-list-item lf-list-item-data\"\r\n [class.active]=\"item.checked\"\r\n [class.disabled]=\"item.disabled\"\r\n [class.clickable]=\"item.clickable && !item.disabled\"\r\n [ngClass]=\"item.cssClass\"\r\n matRipple\r\n [matRippleDisabled]=\"!item.clickable\"\r\n (click)=\"item.clickable && !item.disabled ? clickItem(item, $event) : null\">\r\n <!-- avatar -->\r\n @if (avatarTemplate()) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"avatarTemplate()!.templateRef\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n } @else if (item.avatar) {\r\n <div class=\"lf-list-item-avatar px-2\">\r\n <img\r\n [src]=\"item.avatar\"\r\n [alt]=\"'Avatar of ' + item.title\"\r\n (error)=\"onImageError($event)\" />\r\n </div>\r\n } @else if (item.matIcon || item.svgIcon) {\r\n <div class=\"lf-list-item-avatar px-2\">\r\n <!-- 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 px-2\">\r\n <span class=\"lf-list-item-title\">\r\n @if (titleTemplate()) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"titleTemplate()!.templateRef\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n } @else {\r\n {{ item.title }}\r\n }\r\n </span>\r\n @if (item.subtitle || subtitleTemplate()) {\r\n <span class=\"lf-list-item-subtitle\">\r\n @if (subtitleTemplate()) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"subtitleTemplate()!.templateRef\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n } @else {\r\n {{ item.subtitle }}\r\n }\r\n </span>\r\n }\r\n </div>\r\n\r\n <!-- buttons -->\r\n <div class=\"lf-list-item-buttons\">\r\n @if (buttonsTemplate()) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"buttonsTemplate()!.templateRef\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n } @else {\r\n @let combinedButtons = getCombinedButtons(item);\r\n @for (button of combinedButtons; track button.id) {\r\n @if (!item.hiddenButtonIds?.includes(button.id)) {\r\n @let disabled =\r\n button.disabled || item.disabled || item.disabledButtonIds?.includes(button.id);\r\n @if (button.label) {\r\n <button\r\n mat-button\r\n class=\"lf-list-item-button ml-2\"\r\n [class.disabled]=\"disabled\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"disabled\"\r\n [matTooltip]=\"button.tooltip\"\r\n (click)=\"clickButton({ buttonId: button.id, item }, $event)\">\r\n <!-- 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 ml-2\"\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 ml-2\"\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 ml-3\">\r\n <mat-checkbox\r\n [(ngModel)]=\"item.checked\"\r\n [disabled]=\"item.disabled!\"\r\n (change)=\"selectItem(item, $event)\"\r\n (click)=\"stopPropagation($event)\"></mat-checkbox>\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (config()?.showDividers && !last) {\r\n <mat-divider></mat-divider>\r\n }\r\n </ng-template>\r\n</div>\r\n", styles: [".lf-list,.lf-list .lf-list-group{width:100%}.lf-list .lf-list-group .lf-list-group-header{font-weight:500;height: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: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3$4.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: i3$4.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i3$4.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: i3$4.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i5.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: i6.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i9.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1438
1438
|
}
|
|
1439
1439
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ListComponent, decorators: [{
|
|
1440
1440
|
type: Component,
|
|
@@ -1448,7 +1448,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
1448
1448
|
MatIconModule,
|
|
1449
1449
|
MatTooltipModule,
|
|
1450
1450
|
MatDividerModule
|
|
1451
|
-
], template: "<div class=\"lf-list\" cdkDropListGroup>\r\n <!-- Header -->\r\n @if (header(); as header) {\r\n <div class=\"lf-list-item lf-list-item-header\">\r\n <!-- avatar -->\r\n @if (header.avatar) {\r\n <div class=\"lf-list-item-avatar px-2\">\r\n <img [src]=\"header.avatar\" alt=\"Avatar of header\" (error)=\"onImageError($event)\" />\r\n </div>\r\n } @else if (header.matIcon || header.svgIcon) {\r\n <div class=\"lf-list-item-avatar px-2\">\r\n <!-- icon -->\r\n @if (header.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\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-2\"></div>\r\n }\r\n\r\n <!-- title -->\r\n <div class=\"lf-list-item-title-wrapper flex-row px-2\">\r\n @for (item of header.items; track $index) {\r\n <span [class.clickable]=\"item.sortToken\" (click)=\"updateSortToken(item.sortToken)\">\r\n {{ item.title }}\r\n @if (sortToken() === item.sortToken) {\r\n <mat-icon class=\"lf-list-item-sort-icon\">\r\n {{ sortAsc() ? \"arrow_downward\" : \"arrow_upward\" }}\r\n </mat-icon>\r\n }\r\n </span>\r\n }\r\n </div>\r\n\r\n <!-- buttons -->\r\n <div class=\"lf-list-item-buttons\">\r\n @for (button of header.buttons; track button.id) {\r\n @if (button.label) {\r\n <button\r\n mat-button\r\n class=\"lf-list-item-button ml-2\"\r\n [class.disabled]=\"button.disabled\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"button.disabled\"\r\n [matTooltip]=\"button.tooltip\"\r\n (click)=\"clickButton({ buttonId: button.id, item: null! }, $event)\">\r\n <!-- icon -->\r\n @if (button.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\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 ml-2\"\r\n [class.disabled]=\"button.disabled\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"button.disabled\"\r\n [matTooltip]=\"button.tooltip\"\r\n [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 [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\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 ml-3\">\r\n <mat-checkbox\r\n [(ngModel)]=\"allSelected\"\r\n [indeterminate]=\"someSelected\"\r\n (change)=\"selectAll($event)\"></mat-checkbox>\r\n </div>\r\n }\r\n </div>\r\n <mat-divider></mat-divider>\r\n }\r\n\r\n <!-- Grouped Items -->\r\n @if (config()?.mode === \"group\" && groupedItems()) {\r\n @for (group of groupedItems() | keyvalue; track group.key; let first = $first) {\r\n <div class=\"lf-list-group\" [class.mt-4]=\"!first\">\r\n @if (group.key) {\r\n <div class=\"lf-list-item lf-list-group-header\">\r\n <div class=\"lf-list-item-avatar px-2\"></div>\r\n <div class=\"lf-list-item-title-wrapper flex-row px-2\">\r\n <span>{{ group.key }}</span>\r\n </div>\r\n </div>\r\n }\r\n <div\r\n [id]=\"group.key\"\r\n cdkDropList\r\n [cdkDropListData]=\"group.value\"\r\n [cdkDropListDisabled]=\"!config()?.enableDragging\"\r\n [cdkDropListConnectedTo]=\"connectedDropListIds()!\"\r\n (cdkDropListDropped)=\"dropItem($event, group.key)\"\r\n [class.drop-zone]=\"config()?.enableDragging && group.value.length <= 0\">\r\n @for (item of group.value; track item.id; let last = $last) {\r\n <div\r\n cdkDrag\r\n [cdkDragData]=\"item\"\r\n [cdkDragDisabled]=\"item.disabled || !config()?.enableDragging\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"listItemTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item, last: last }\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n <!-- Flat Items -->\r\n } @else {\r\n <div\r\n [id]=\"dropListId()!\"\r\n cdkDropList\r\n [cdkDropListData]=\"items()\"\r\n [cdkDropListDisabled]=\"!config()?.enableDragging\"\r\n [cdkDropListConnectedTo]=\"connectedDropListIds()!\"\r\n (cdkDropListDropped)=\"dropItem($event, dropListId()!)\"\r\n [class.drop-zone]=\"config()?.enableDragging && items().length <= 0\">\r\n @for (item of items(); track item.id; let last = $last) {\r\n <div\r\n cdkDrag\r\n [cdkDragData]=\"item\"\r\n [cdkDragDisabled]=\"item.disabled || !config()?.enableDragging\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"listItemTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item, last: last }\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Item (template) -->\r\n <ng-template #listItemTemplate let-item let-last=\"last\">\r\n <div\r\n class=\"lf-list-item lf-list-item-data\"\r\n [class.active]=\"item.checked\"\r\n [class.disabled]=\"item.disabled\"\r\n [class.clickable]=\"item.clickable && !item.disabled\"\r\n [ngClass]=\"item.cssClass\"\r\n matRipple\r\n [matRippleDisabled]=\"!item.clickable\"\r\n (click)=\"item.clickable && !item.disabled ? clickItem(item, $event) : null\">\r\n <!-- avatar -->\r\n @if (avatarTemplate()) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"avatarTemplate()!.templateRef\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n } @else if (item.avatar) {\r\n <div class=\"lf-list-item-avatar px-2\">\r\n <img\r\n [src]=\"item.avatar\"\r\n [alt]=\"'Avatar of ' + item.title\"\r\n (error)=\"onImageError($event)\" />\r\n </div>\r\n } @else if (item.matIcon || item.svgIcon) {\r\n <div class=\"lf-list-item-avatar px-2\">\r\n <!-- icon -->\r\n @if (item.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\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 px-2\">\r\n <span class=\"lf-list-item-title\">\r\n @if (titleTemplate()) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"titleTemplate()!.templateRef\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n } @else {\r\n {{ item.title }}\r\n }\r\n </span>\r\n @if (item.subtitle || subtitleTemplate()) {\r\n <span class=\"lf-list-item-subtitle\">\r\n @if (subtitleTemplate()) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"subtitleTemplate()!.templateRef\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n } @else {\r\n {{ item.subtitle }}\r\n }\r\n </span>\r\n }\r\n </div>\r\n\r\n <!-- buttons -->\r\n <div class=\"lf-list-item-buttons\">\r\n @if (buttonsTemplate()) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"buttonsTemplate()!.templateRef\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n } @else {\r\n @let combinedButtons = getCombinedButtons(item);\r\n @for (button of combinedButtons; track button.id) {\r\n @if (!item.hiddenButtonIds?.includes(button.id)) {\r\n @let disabled =\r\n button.disabled || item.disabled || item.disabledButtonIds?.includes(button.id);\r\n @if (button.label) {\r\n <button\r\n mat-button\r\n class=\"lf-list-item-button ml-2\"\r\n [class.disabled]=\"disabled\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"disabled\"\r\n [matTooltip]=\"button.tooltip\"\r\n (click)=\"clickButton({ buttonId: button.id, item }, $event)\">\r\n <!-- icon -->\r\n @if (button.matIcon) {\r\n <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\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 ml-2\"\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 [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\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 ml-2\"\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 ml-3\">\r\n <mat-checkbox\r\n [(ngModel)]=\"item.checked\"\r\n [disabled]=\"item.disabled!\"\r\n (change)=\"selectItem(item, $event)\"\r\n (click)=\"stopPropagation($event)\"></mat-checkbox>\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (config()?.showDividers && !last) {\r\n <mat-divider></mat-divider>\r\n }\r\n </ng-template>\r\n</div>\r\n", styles: [".lf-list,.lf-list .lf-list-group{width:100%}.lf-list .lf-list-group .lf-list-group-header{font-weight:500;height: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"] }]
|
|
1451
|
+
], template: "<div class=\"lf-list\" cdkDropListGroup>\r\n <!-- Header -->\r\n @if (header(); as header) {\r\n <div class=\"lf-list-item lf-list-item-header\">\r\n <!-- avatar -->\r\n @if (header.avatar) {\r\n <div class=\"lf-list-item-avatar px-2\">\r\n <img [src]=\"header.avatar\" alt=\"Avatar of header\" (error)=\"onImageError($event)\" />\r\n </div>\r\n } @else if (header.matIcon || header.svgIcon) {\r\n <div class=\"lf-list-item-avatar px-2\">\r\n <!-- 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-2\"></div>\r\n }\r\n\r\n <!-- title -->\r\n <div class=\"lf-list-item-title-wrapper flex-row px-2\">\r\n @for (item of header.items; track $index) {\r\n <span [class.clickable]=\"item.sortToken\" (click)=\"updateSortToken(item.sortToken)\">\r\n {{ item.title }}\r\n @if (sortToken() === item.sortToken) {\r\n <mat-icon class=\"lf-list-item-sort-icon\">\r\n {{ sortAsc() ? \"arrow_downward\" : \"arrow_upward\" }}\r\n </mat-icon>\r\n }\r\n </span>\r\n }\r\n </div>\r\n\r\n <!-- buttons -->\r\n <div class=\"lf-list-item-buttons\">\r\n @for (button of header.buttons; track button.id) {\r\n @if (button.label) {\r\n <button\r\n mat-button\r\n class=\"lf-list-item-button ml-2\"\r\n [class.disabled]=\"button.disabled\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"button.disabled\"\r\n [matTooltip]=\"button.tooltip\"\r\n (click)=\"clickButton({ buttonId: button.id, item: null! }, $event)\">\r\n <!-- 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 ml-2\"\r\n [class.disabled]=\"button.disabled\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"button.disabled\"\r\n [matTooltip]=\"button.tooltip\"\r\n [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 ml-3\">\r\n <mat-checkbox\r\n [(ngModel)]=\"allSelected\"\r\n [indeterminate]=\"someSelected\"\r\n (change)=\"selectAll($event)\"></mat-checkbox>\r\n </div>\r\n }\r\n </div>\r\n <mat-divider></mat-divider>\r\n }\r\n\r\n <!-- Grouped Items -->\r\n @if (config()?.mode === \"group\" && groupedItems()) {\r\n @for (group of groupedItems() | keyvalue; track group.key; let first = $first) {\r\n <div class=\"lf-list-group\" [class.mt-4]=\"!first\">\r\n @if (group.key) {\r\n <div class=\"lf-list-item lf-list-group-header\">\r\n <div class=\"lf-list-item-avatar px-2\"></div>\r\n <div class=\"lf-list-item-title-wrapper flex-row px-2\">\r\n <span>{{ group.key }}</span>\r\n </div>\r\n </div>\r\n }\r\n <div\r\n [id]=\"group.key\"\r\n cdkDropList\r\n [cdkDropListData]=\"group.value\"\r\n [cdkDropListDisabled]=\"!config()?.enableDragging\"\r\n [cdkDropListConnectedTo]=\"connectedDropListIds()!\"\r\n (cdkDropListDropped)=\"dropItem($event, group.key)\"\r\n [class.drop-zone]=\"config()?.enableDragging && group.value.length <= 0\">\r\n @for (item of group.value; track item.id; let last = $last) {\r\n <div\r\n cdkDrag\r\n [cdkDragData]=\"item\"\r\n [cdkDragDisabled]=\"item.disabled || !config()?.enableDragging\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"listItemTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item, last: last }\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n <!-- Flat Items -->\r\n } @else {\r\n <div\r\n [id]=\"dropListId()!\"\r\n cdkDropList\r\n [cdkDropListData]=\"items()\"\r\n [cdkDropListDisabled]=\"!config()?.enableDragging\"\r\n [cdkDropListConnectedTo]=\"connectedDropListIds()!\"\r\n (cdkDropListDropped)=\"dropItem($event, dropListId()!)\"\r\n [class.drop-zone]=\"config()?.enableDragging && items().length <= 0\">\r\n @for (item of items(); track item.id; let last = $last) {\r\n <div\r\n cdkDrag\r\n [cdkDragData]=\"item\"\r\n [cdkDragDisabled]=\"item.disabled || !config()?.enableDragging\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"listItemTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item, last: last }\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Item (template) -->\r\n <ng-template #listItemTemplate let-item let-last=\"last\">\r\n <div\r\n class=\"lf-list-item lf-list-item-data\"\r\n [class.active]=\"item.checked\"\r\n [class.disabled]=\"item.disabled\"\r\n [class.clickable]=\"item.clickable && !item.disabled\"\r\n [ngClass]=\"item.cssClass\"\r\n matRipple\r\n [matRippleDisabled]=\"!item.clickable\"\r\n (click)=\"item.clickable && !item.disabled ? clickItem(item, $event) : null\">\r\n <!-- avatar -->\r\n @if (avatarTemplate()) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"avatarTemplate()!.templateRef\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n } @else if (item.avatar) {\r\n <div class=\"lf-list-item-avatar px-2\">\r\n <img\r\n [src]=\"item.avatar\"\r\n [alt]=\"'Avatar of ' + item.title\"\r\n (error)=\"onImageError($event)\" />\r\n </div>\r\n } @else if (item.matIcon || item.svgIcon) {\r\n <div class=\"lf-list-item-avatar px-2\">\r\n <!-- 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 px-2\">\r\n <span class=\"lf-list-item-title\">\r\n @if (titleTemplate()) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"titleTemplate()!.templateRef\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n } @else {\r\n {{ item.title }}\r\n }\r\n </span>\r\n @if (item.subtitle || subtitleTemplate()) {\r\n <span class=\"lf-list-item-subtitle\">\r\n @if (subtitleTemplate()) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"subtitleTemplate()!.templateRef\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n } @else {\r\n {{ item.subtitle }}\r\n }\r\n </span>\r\n }\r\n </div>\r\n\r\n <!-- buttons -->\r\n <div class=\"lf-list-item-buttons\">\r\n @if (buttonsTemplate()) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"buttonsTemplate()!.templateRef\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n } @else {\r\n @let combinedButtons = getCombinedButtons(item);\r\n @for (button of combinedButtons; track button.id) {\r\n @if (!item.hiddenButtonIds?.includes(button.id)) {\r\n @let disabled =\r\n button.disabled || item.disabled || item.disabledButtonIds?.includes(button.id);\r\n @if (button.label) {\r\n <button\r\n mat-button\r\n class=\"lf-list-item-button ml-2\"\r\n [class.disabled]=\"disabled\"\r\n [ngClass]=\"button.cssClass\"\r\n [disabled]=\"disabled\"\r\n [matTooltip]=\"button.tooltip\"\r\n (click)=\"clickButton({ buttonId: button.id, item }, $event)\">\r\n <!-- 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 ml-2\"\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 ml-2\"\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 ml-3\">\r\n <mat-checkbox\r\n [(ngModel)]=\"item.checked\"\r\n [disabled]=\"item.disabled!\"\r\n (change)=\"selectItem(item, $event)\"\r\n (click)=\"stopPropagation($event)\"></mat-checkbox>\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (config()?.showDividers && !last) {\r\n <mat-divider></mat-divider>\r\n }\r\n </ng-template>\r\n</div>\r\n", styles: [".lf-list,.lf-list .lf-list-group{width:100%}.lf-list .lf-list-group .lf-list-group-header{font-weight:500;height: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"] }]
|
|
1452
1452
|
}], propDecorators: { avatarTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ListItemAvatarDirective), { isSignal: true }] }], titleTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ListItemTitleDirective), { isSignal: true }] }], subtitleTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ListItemSubtitleDirective), { isSignal: true }] }], buttonsTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ListItemButtonsDirective), { isSignal: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], groupedItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupedItems", required: false }] }], buttons: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttons", required: false }] }], dropListId: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropListId", required: false }] }], connectedDropListIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectedDropListIds", required: false }] }], sortChangeEvent: [{ type: i0.Output, args: ["sortChangeEvent"] }], selectionChangeEvent: [{ type: i0.Output, args: ["selectionChangeEvent"] }], itemClickEvent: [{ type: i0.Output, args: ["itemClickEvent"] }], itemDropEvent: [{ type: i0.Output, args: ["itemDropEvent"] }], buttonClickEvent: [{ type: i0.Output, args: ["buttonClickEvent"] }], allSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "allSelected", required: false }] }, { type: i0.Output, args: ["allSelectedChange"] }] } });
|
|
1453
1453
|
|
|
1454
1454
|
class FileUploadComponent {
|
|
@@ -1475,7 +1475,7 @@ class FileUploadComponent {
|
|
|
1475
1475
|
this.fileChangeEvent.emit(file);
|
|
1476
1476
|
}
|
|
1477
1477
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1478
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", 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 [accept]=\"accept()\"\r\n onclick=\"this.value = null\"\r\n (change)=\"selectFile($event)\" />\r\n\r\n<button\r\n mat-flat-button\r\n class=\"lf-button\"\r\n type=\"button\"\r\n [color]=\"color()\"\r\n [disabled]=\"disabled()\"\r\n (click)=\"file.click()\"\r\n [matTooltip]=\"tooltip()\">\r\n <!-- icon -->\r\n @if (matIcon()) {\r\n <mat-icon
|
|
1478
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", 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 [accept]=\"accept()\"\r\n onclick=\"this.value = null\"\r\n (change)=\"selectFile($event)\" />\r\n\r\n<button\r\n mat-flat-button\r\n class=\"lf-button\"\r\n type=\"button\"\r\n [color]=\"color()\"\r\n [disabled]=\"disabled()\"\r\n (click)=\"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: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1479
1479
|
}
|
|
1480
1480
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FileUploadComponent, decorators: [{
|
|
1481
1481
|
type: Component,
|
|
@@ -1485,7 +1485,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
1485
1485
|
MatButtonModule,
|
|
1486
1486
|
MatIconModule,
|
|
1487
1487
|
MatTooltipModule
|
|
1488
|
-
], template: "<input\r\n hidden\r\n #file\r\n type=\"file\"\r\n [accept]=\"accept()\"\r\n onclick=\"this.value = null\"\r\n (change)=\"selectFile($event)\" />\r\n\r\n<button\r\n mat-flat-button\r\n class=\"lf-button\"\r\n type=\"button\"\r\n [color]=\"color()\"\r\n [disabled]=\"disabled()\"\r\n (click)=\"file.click()\"\r\n [matTooltip]=\"tooltip()\">\r\n <!-- icon -->\r\n @if (matIcon()) {\r\n <mat-icon
|
|
1488
|
+
], template: "<input\r\n hidden\r\n #file\r\n type=\"file\"\r\n [accept]=\"accept()\"\r\n onclick=\"this.value = null\"\r\n (change)=\"selectFile($event)\" />\r\n\r\n<button\r\n mat-flat-button\r\n class=\"lf-button\"\r\n type=\"button\"\r\n [color]=\"color()\"\r\n [disabled]=\"disabled()\"\r\n (click)=\"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"] }]
|
|
1489
1489
|
}], 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"] }] } });
|
|
1490
1490
|
|
|
1491
1491
|
class ColorPickerComponent {
|
|
@@ -1518,7 +1518,7 @@ class ColorPickerComponent {
|
|
|
1518
1518
|
this.colorChangeEvent.emit(event);
|
|
1519
1519
|
}
|
|
1520
1520
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1521
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", 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: "<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
|
|
1521
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", 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: "<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", styles: [".lf-button{width:inherit}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1522
1522
|
}
|
|
1523
1523
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ColorPickerComponent, decorators: [{
|
|
1524
1524
|
type: Component,
|
|
@@ -1528,7 +1528,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
1528
1528
|
MatButtonModule,
|
|
1529
1529
|
MatIconModule,
|
|
1530
1530
|
MatTooltipModule
|
|
1531
|
-
], template: "<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
|
|
1531
|
+
], template: "<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", styles: [".lf-button{width:inherit}\n"] }]
|
|
1532
1532
|
}], 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"] }] } });
|
|
1533
1533
|
|
|
1534
1534
|
class PlaceholderComponent {
|
|
@@ -1538,7 +1538,7 @@ class PlaceholderComponent {
|
|
|
1538
1538
|
this.buttonClickEvent = output();
|
|
1539
1539
|
}
|
|
1540
1540
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: PlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1541
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", 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
|
|
1541
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", 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: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1542
1542
|
}
|
|
1543
1543
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: PlaceholderComponent, decorators: [{
|
|
1544
1544
|
type: Component,
|
|
@@ -1547,7 +1547,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
1547
1547
|
MatButtonModule,
|
|
1548
1548
|
MatIconModule,
|
|
1549
1549
|
MatTooltipModule
|
|
1550
|
-
], 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
|
|
1550
|
+
], 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"] }]
|
|
1551
1551
|
}], propDecorators: { placeholderConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderConfig", required: false }] }], buttonClickEvent: [{ type: i0.Output, args: ["buttonClickEvent"] }] } });
|
|
1552
1552
|
|
|
1553
1553
|
class ScaffoldLoadingInterceptor {
|