@elderbyte/ngx-starter 19.1.20 → 19.1.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/elderbyte-ngx-starter.mjs +21 -9
- package/fesm2022/elderbyte-ngx-starter.mjs.map +1 -1
- package/lib/components/shell/shell/elder-shell.component.d.ts +4 -2
- package/package.json +1 -1
- package/src/lib/components/shell/shell/elder-shell.component.scss +0 -6
- package/theming/abstracts/_elder-design-tokens.scss +20 -0
- package/theming/base/_elder-fixes-base.scss +2 -3
|
@@ -20040,7 +20040,7 @@ class ElderPaneTitleComponent {
|
|
|
20040
20040
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: ElderPaneTitleComponent, isStandalone: true, selector: "elder-pane-title", ngImport: i0, template: `<!-- template -->
|
|
20041
20041
|
<h3 class="elder-pane-title text-title-large">
|
|
20042
20042
|
<ng-content></ng-content>
|
|
20043
|
-
</h3> `, isInline: true, styles: [".elder-pane-title{margin-top:2px;margin-bottom:
|
|
20043
|
+
</h3> `, isInline: true, styles: [".elder-pane-title{margin-top:2px;margin-bottom:var(--elder-pane-title-margin-bottom)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
20044
20044
|
}
|
|
20045
20045
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: ElderPaneTitleComponent, decorators: [{
|
|
20046
20046
|
type: Component,
|
|
@@ -20049,7 +20049,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
|
|
|
20049
20049
|
}, template: `<!-- template -->
|
|
20050
20050
|
<h3 class="elder-pane-title text-title-large">
|
|
20051
20051
|
<ng-content></ng-content>
|
|
20052
|
-
</h3> `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".elder-pane-title{margin-top:2px;margin-bottom:
|
|
20052
|
+
</h3> `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".elder-pane-title{margin-top:2px;margin-bottom:var(--elder-pane-title-margin-bottom)}\n"] }]
|
|
20053
20053
|
}] });
|
|
20054
20054
|
|
|
20055
20055
|
class ElderPaneHeaderComponent {
|
|
@@ -20115,7 +20115,7 @@ class ElderPaneSubtitleComponent {
|
|
|
20115
20115
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: ElderPaneSubtitleComponent, isStandalone: true, selector: "elder-pane-subtitle", ngImport: i0, template: `<!-- template -->
|
|
20116
20116
|
<h4 class="elder-pane-subtitle text-title-medium">
|
|
20117
20117
|
<ng-content></ng-content>
|
|
20118
|
-
</h4> `, isInline: true, styles: [".elder-pane-subtitle{margin-top:0!important;padding-bottom:0!important;margin-bottom:
|
|
20118
|
+
</h4> `, isInline: true, styles: [".elder-pane-subtitle{margin-top:0!important;padding-bottom:0!important;margin-bottom:var(--elder-pane-subtitle-margin-bottom)!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
20119
20119
|
}
|
|
20120
20120
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: ElderPaneSubtitleComponent, decorators: [{
|
|
20121
20121
|
type: Component,
|
|
@@ -20124,7 +20124,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
|
|
|
20124
20124
|
}, template: `<!-- template -->
|
|
20125
20125
|
<h4 class="elder-pane-subtitle text-title-medium">
|
|
20126
20126
|
<ng-content></ng-content>
|
|
20127
|
-
</h4> `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".elder-pane-subtitle{margin-top:0!important;padding-bottom:0!important;margin-bottom:
|
|
20127
|
+
</h4> `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".elder-pane-subtitle{margin-top:0!important;padding-bottom:0!important;margin-bottom:var(--elder-pane-subtitle-margin-bottom)!important}\n"] }]
|
|
20128
20128
|
}] });
|
|
20129
20129
|
|
|
20130
20130
|
class ElderPaneActionsComponent {
|
|
@@ -27683,12 +27683,13 @@ class ElderShellComponent {
|
|
|
27683
27683
|
* Constructor *
|
|
27684
27684
|
* *
|
|
27685
27685
|
**************************************************************************/
|
|
27686
|
-
constructor(shellService, outletDrawerService, changeDetectorRef, themeService, globalDragDropService) {
|
|
27686
|
+
constructor(shellService, outletDrawerService, changeDetectorRef, themeService, globalDragDropService, renderer) {
|
|
27687
27687
|
this.shellService = shellService;
|
|
27688
27688
|
this.outletDrawerService = outletDrawerService;
|
|
27689
27689
|
this.changeDetectorRef = changeDetectorRef;
|
|
27690
27690
|
this.themeService = themeService;
|
|
27691
27691
|
this.globalDragDropService = globalDragDropService;
|
|
27692
|
+
this.renderer = renderer;
|
|
27692
27693
|
/***************************************************************************
|
|
27693
27694
|
* *
|
|
27694
27695
|
* Fields *
|
|
@@ -27757,6 +27758,17 @@ class ElderShellComponent {
|
|
|
27757
27758
|
* Public API *
|
|
27758
27759
|
* *
|
|
27759
27760
|
**************************************************************************/
|
|
27761
|
+
blurNavIconFocus() {
|
|
27762
|
+
try {
|
|
27763
|
+
const activeElement = this.renderer.selectRootElement(document.activeElement, true);
|
|
27764
|
+
if (activeElement instanceof HTMLElement) {
|
|
27765
|
+
activeElement.blur();
|
|
27766
|
+
}
|
|
27767
|
+
}
|
|
27768
|
+
catch (error) {
|
|
27769
|
+
this.logger.warn('Failed to blur active element:', error);
|
|
27770
|
+
}
|
|
27771
|
+
}
|
|
27760
27772
|
closeLeftSideContent() {
|
|
27761
27773
|
this.shellService.closeSideNav();
|
|
27762
27774
|
}
|
|
@@ -27809,8 +27821,8 @@ class ElderShellComponent {
|
|
|
27809
27821
|
this.changeDetectorRef.markForCheck();
|
|
27810
27822
|
}, 5);
|
|
27811
27823
|
}
|
|
27812
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: ElderShellComponent, deps: [{ token: ElderShellService }, { token: ElderRouteOutletDrawerService }, { token: i0.ChangeDetectorRef }, { token: ElderThemeService }, { token: GlobalDragDropService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
27813
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: ElderShellComponent, isStandalone: true, selector: "elder-shell", inputs: { sideNavToggleEnabled: "sideNavToggleEnabled", leftSideAutoFocus: "leftSideAutoFocus", rightSideAutoFocus: "rightSideAutoFocus", color: "color", navMenuSvgIcon: "navMenuSvgIcon", menuColor: "menuColor", menuIconColor: "menuIconColor" }, queries: [{ propertyName: "sideContentLeft", first: true, predicate: ElderShellSideLeftDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "sideContentRight", first: true, predicate: ElderShellSideRightDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "centerContent", first: true, predicate: ElderShellCenterDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "rightSideDrawer", first: true, predicate: ["rightSideDetail"], descendants: true, static: true }], ngImport: i0, template: "<mat-sidenav-container\n elderThemeApplier\n class=\"full-width\"\n (backdropClick)=\"onBackdropClick($event)\"\n>\n <!-- Left Side Nav -->\n <mat-sidenav\n position=\"start\"\n mode=\"over\"\n [fixedInViewport]=\"true\"\n [autoFocus]=\"leftSideAutoFocus\"\n [opened]=\"leftSideContentOpen$ | async\"\n (closed)=\"closeLeftSideContent()\"\n >\n <div class=\"layout-col full elder-side-nav\">\n <ng-container *ngTemplateOutlet=\"sideContentLeft || fallbackSideContentLeft\"></ng-container>\n </div>\n </mat-sidenav>\n\n <!-- Main Content -->\n <mat-sidenav-content>\n <div class=\"layout-col full\">\n <ng-container *ngTemplateOutlet=\"centerContent || fallbackCenterContent\"></ng-container>\n </div>\n </mat-sidenav-content>\n\n <!-- Right Side Detail -->\n <mat-sidenav\n mode=\"over\"\n #rightSideDetail\n id=\"elder-right-side-detail\"\n position=\"end\"\n [fixedInViewport]=\"true\"\n [autoFocus]=\"rightSideAutoFocus\"\n [disableClose]=\"true\"\n (keydown.escape)=\"onEscapeRightSide($event)\"\n >\n <div class=\"layout-col full\">\n <ng-container *ngTemplateOutlet=\"sideContentRight || fallbackSideContentRight\"></ng-container>\n </div>\n </mat-sidenav>\n</mat-sidenav-container>\n\n<ng-template #fallbackSideContentLeft>\n <div class=\"layout-col flex\">\n <p class=\"noselect\">No Left Side Content Defined!</p>\n </div>\n</ng-template>\n\n<ng-template #fallbackSideContentRight>\n <router-outlet name=\"side\" class=\"router-flex\"></router-outlet>\n</ng-template>\n\n<ng-template #fallbackCenterContent>\n <div class=\"layout-col full\">\n <!-- Header -->\n <ng-container\n *ngTemplateOutlet=\"(headerTemplate$ | async) || defaultHeaderTemplate\"\n ></ng-container>\n\n <!-- Center -->\n <ng-container\n *ngTemplateOutlet=\"(centerTemplate$ | async) || defaultCenterTemplate\"\n ></ng-container>\n\n <!-- Footer -->\n <ng-container\n *ngTemplateOutlet=\"(footerTemplate$ | async) || defaultFooterTemplate\"\n ></ng-container>\n </div>\n</ng-template>\n\n<ng-template #defaultHeaderTemplate>\n <elder-toolbar\n [color]=\"color\"\n class=\"elder-main-toolbar flex-none\"\n style=\"max-width: 100%; min-width: 100%\"\n >\n <!-- Toolbar Prefix: Sidenav Toggle -->\n <mat-toolbar\n *ngIf=\"sideNavToggleEnabled\"\n [color]=\"menuColor$ | async\"\n class=\"flex-none elder-toolbar-main-nav-button-container pl-lg\"\n style=\"width: auto\"\n >\n <button\n class=\"elder-logo-btn\"\n mat-icon-button\n [color]=\"menuIconColor$ | async\"\n type=\"button\"\n (click)=\"toggleSideNav()\"\n class=\"elder-toolbar-main-nav-button\"\n [class.elder-logo-btn]=\"!!navMenuSvgIcon\"\n >\n @if (navMenuSvgIcon) {\n <mat-icon [svgIcon]=\"navMenuSvgIcon\"></mat-icon>\n } @else {\n <mat-icon>menu</mat-icon>\n }\n </button>\n </mat-toolbar>\n </elder-toolbar>\n</ng-template>\n\n<ng-template #defaultCenterTemplate>\n <div class=\"flex layout-row\">\n <!-- Primary Router Outlet -->\n <router-outlet class=\"router-flex\"></router-outlet>\n </div>\n</ng-template>\n\n<ng-template #defaultFooterTemplate>\n <!-- Default Footer is empty -->\n</ng-template>\n", styles: ["mat-sidenav{margin:0;height:100%;overflow:hidden}mat-sidenav .elder-side-nav{min-width:350px}mat-sidenav-container{margin:0;width:100%;height:100%;overflow:hidden}.elder-logo-btn{display:flex;justify-content:center;align-items:center;padding:0!important}.elder-logo-btn .mat-icon{--mdc-icon-button-icon-size: 48px !important;height:var(--mdc-icon-button-icon-size);width:var(--mdc-icon-button-icon-size)}
|
|
27824
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: ElderShellComponent, deps: [{ token: ElderShellService }, { token: ElderRouteOutletDrawerService }, { token: i0.ChangeDetectorRef }, { token: ElderThemeService }, { token: GlobalDragDropService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
27825
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: ElderShellComponent, isStandalone: true, selector: "elder-shell", inputs: { sideNavToggleEnabled: "sideNavToggleEnabled", leftSideAutoFocus: "leftSideAutoFocus", rightSideAutoFocus: "rightSideAutoFocus", color: "color", navMenuSvgIcon: "navMenuSvgIcon", menuColor: "menuColor", menuIconColor: "menuIconColor" }, queries: [{ propertyName: "sideContentLeft", first: true, predicate: ElderShellSideLeftDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "sideContentRight", first: true, predicate: ElderShellSideRightDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "centerContent", first: true, predicate: ElderShellCenterDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "rightSideDrawer", first: true, predicate: ["rightSideDetail"], descendants: true, static: true }], ngImport: i0, template: "<mat-sidenav-container\n elderThemeApplier\n class=\"full-width\"\n (backdropClick)=\"onBackdropClick($event)\"\n>\n <!-- Left Side Nav -->\n <mat-sidenav\n position=\"start\"\n mode=\"over\"\n [fixedInViewport]=\"true\"\n [autoFocus]=\"leftSideAutoFocus\"\n [opened]=\"leftSideContentOpen$ | async\"\n (closedStart)=\"blurNavIconFocus()\"\n (closed)=\"closeLeftSideContent()\"\n restoreFocus=\"false\"\n >\n <div class=\"layout-col full elder-side-nav\">\n <ng-container *ngTemplateOutlet=\"sideContentLeft || fallbackSideContentLeft\"></ng-container>\n </div>\n </mat-sidenav>\n\n <!-- Main Content -->\n <mat-sidenav-content>\n <div class=\"layout-col full\">\n <ng-container *ngTemplateOutlet=\"centerContent || fallbackCenterContent\"></ng-container>\n </div>\n </mat-sidenav-content>\n\n <!-- Right Side Detail -->\n <mat-sidenav\n mode=\"over\"\n #rightSideDetail\n id=\"elder-right-side-detail\"\n position=\"end\"\n [fixedInViewport]=\"true\"\n [autoFocus]=\"rightSideAutoFocus\"\n [disableClose]=\"true\"\n (keydown.escape)=\"onEscapeRightSide($event)\"\n >\n <div class=\"layout-col full\">\n <ng-container *ngTemplateOutlet=\"sideContentRight || fallbackSideContentRight\"></ng-container>\n </div>\n </mat-sidenav>\n</mat-sidenav-container>\n\n<ng-template #fallbackSideContentLeft>\n <div class=\"layout-col flex\">\n <p class=\"noselect\">No Left Side Content Defined!</p>\n </div>\n</ng-template>\n\n<ng-template #fallbackSideContentRight>\n <router-outlet name=\"side\" class=\"router-flex\"></router-outlet>\n</ng-template>\n\n<ng-template #fallbackCenterContent>\n <div class=\"layout-col full\">\n <!-- Header -->\n <ng-container\n *ngTemplateOutlet=\"(headerTemplate$ | async) || defaultHeaderTemplate\"\n ></ng-container>\n\n <!-- Center -->\n <ng-container\n *ngTemplateOutlet=\"(centerTemplate$ | async) || defaultCenterTemplate\"\n ></ng-container>\n\n <!-- Footer -->\n <ng-container\n *ngTemplateOutlet=\"(footerTemplate$ | async) || defaultFooterTemplate\"\n ></ng-container>\n </div>\n</ng-template>\n\n<ng-template #defaultHeaderTemplate>\n <elder-toolbar\n [color]=\"color\"\n class=\"elder-main-toolbar flex-none\"\n style=\"max-width: 100%; min-width: 100%\"\n >\n <!-- Toolbar Prefix: Sidenav Toggle -->\n <mat-toolbar\n *ngIf=\"sideNavToggleEnabled\"\n [color]=\"menuColor$ | async\"\n class=\"flex-none elder-toolbar-main-nav-button-container pl-lg\"\n style=\"width: auto\"\n >\n <button\n class=\"elder-logo-btn\"\n mat-icon-button\n [color]=\"menuIconColor$ | async\"\n type=\"button\"\n (click)=\"toggleSideNav()\"\n class=\"elder-toolbar-main-nav-button\"\n [class.elder-logo-btn]=\"!!navMenuSvgIcon\"\n >\n @if (navMenuSvgIcon) {\n <mat-icon [svgIcon]=\"navMenuSvgIcon\"></mat-icon>\n } @else {\n <mat-icon>menu</mat-icon>\n }\n </button>\n </mat-toolbar>\n </elder-toolbar>\n</ng-template>\n\n<ng-template #defaultCenterTemplate>\n <div class=\"flex layout-row\">\n <!-- Primary Router Outlet -->\n <router-outlet class=\"router-flex\"></router-outlet>\n </div>\n</ng-template>\n\n<ng-template #defaultFooterTemplate>\n <!-- Default Footer is empty -->\n</ng-template>\n", styles: ["mat-sidenav{margin:0;height:100%;overflow:hidden}mat-sidenav .elder-side-nav{min-width:350px}mat-sidenav-container{margin:0;width:100%;height:100%;overflow:hidden}.elder-logo-btn{display:flex;justify-content:center;align-items:center;padding:0!important}.elder-logo-btn .mat-icon{--mdc-icon-button-icon-size: 48px !important;height:var(--mdc-icon-button-icon-size);width:var(--mdc-icon-button-icon-size)}\n"], dependencies: [{ kind: "component", type: MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "directive", type: ElderThemeApplierDirective, selector: "[elderThemeApplier]" }, { kind: "component", type: MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: ElderToolbarComponent, selector: "elder-toolbar", inputs: ["color"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
27814
27826
|
}
|
|
27815
27827
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: ElderShellComponent, decorators: [{
|
|
27816
27828
|
type: Component,
|
|
@@ -27827,8 +27839,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
|
|
|
27827
27839
|
MatIconButton,
|
|
27828
27840
|
MatIcon,
|
|
27829
27841
|
AsyncPipe,
|
|
27830
|
-
], template: "<mat-sidenav-container\n elderThemeApplier\n class=\"full-width\"\n (backdropClick)=\"onBackdropClick($event)\"\n>\n <!-- Left Side Nav -->\n <mat-sidenav\n position=\"start\"\n mode=\"over\"\n [fixedInViewport]=\"true\"\n [autoFocus]=\"leftSideAutoFocus\"\n [opened]=\"leftSideContentOpen$ | async\"\n (closed)=\"closeLeftSideContent()\"\n >\n <div class=\"layout-col full elder-side-nav\">\n <ng-container *ngTemplateOutlet=\"sideContentLeft || fallbackSideContentLeft\"></ng-container>\n </div>\n </mat-sidenav>\n\n <!-- Main Content -->\n <mat-sidenav-content>\n <div class=\"layout-col full\">\n <ng-container *ngTemplateOutlet=\"centerContent || fallbackCenterContent\"></ng-container>\n </div>\n </mat-sidenav-content>\n\n <!-- Right Side Detail -->\n <mat-sidenav\n mode=\"over\"\n #rightSideDetail\n id=\"elder-right-side-detail\"\n position=\"end\"\n [fixedInViewport]=\"true\"\n [autoFocus]=\"rightSideAutoFocus\"\n [disableClose]=\"true\"\n (keydown.escape)=\"onEscapeRightSide($event)\"\n >\n <div class=\"layout-col full\">\n <ng-container *ngTemplateOutlet=\"sideContentRight || fallbackSideContentRight\"></ng-container>\n </div>\n </mat-sidenav>\n</mat-sidenav-container>\n\n<ng-template #fallbackSideContentLeft>\n <div class=\"layout-col flex\">\n <p class=\"noselect\">No Left Side Content Defined!</p>\n </div>\n</ng-template>\n\n<ng-template #fallbackSideContentRight>\n <router-outlet name=\"side\" class=\"router-flex\"></router-outlet>\n</ng-template>\n\n<ng-template #fallbackCenterContent>\n <div class=\"layout-col full\">\n <!-- Header -->\n <ng-container\n *ngTemplateOutlet=\"(headerTemplate$ | async) || defaultHeaderTemplate\"\n ></ng-container>\n\n <!-- Center -->\n <ng-container\n *ngTemplateOutlet=\"(centerTemplate$ | async) || defaultCenterTemplate\"\n ></ng-container>\n\n <!-- Footer -->\n <ng-container\n *ngTemplateOutlet=\"(footerTemplate$ | async) || defaultFooterTemplate\"\n ></ng-container>\n </div>\n</ng-template>\n\n<ng-template #defaultHeaderTemplate>\n <elder-toolbar\n [color]=\"color\"\n class=\"elder-main-toolbar flex-none\"\n style=\"max-width: 100%; min-width: 100%\"\n >\n <!-- Toolbar Prefix: Sidenav Toggle -->\n <mat-toolbar\n *ngIf=\"sideNavToggleEnabled\"\n [color]=\"menuColor$ | async\"\n class=\"flex-none elder-toolbar-main-nav-button-container pl-lg\"\n style=\"width: auto\"\n >\n <button\n class=\"elder-logo-btn\"\n mat-icon-button\n [color]=\"menuIconColor$ | async\"\n type=\"button\"\n (click)=\"toggleSideNav()\"\n class=\"elder-toolbar-main-nav-button\"\n [class.elder-logo-btn]=\"!!navMenuSvgIcon\"\n >\n @if (navMenuSvgIcon) {\n <mat-icon [svgIcon]=\"navMenuSvgIcon\"></mat-icon>\n } @else {\n <mat-icon>menu</mat-icon>\n }\n </button>\n </mat-toolbar>\n </elder-toolbar>\n</ng-template>\n\n<ng-template #defaultCenterTemplate>\n <div class=\"flex layout-row\">\n <!-- Primary Router Outlet -->\n <router-outlet class=\"router-flex\"></router-outlet>\n </div>\n</ng-template>\n\n<ng-template #defaultFooterTemplate>\n <!-- Default Footer is empty -->\n</ng-template>\n", styles: ["mat-sidenav{margin:0;height:100%;overflow:hidden}mat-sidenav .elder-side-nav{min-width:350px}mat-sidenav-container{margin:0;width:100%;height:100%;overflow:hidden}.elder-logo-btn{display:flex;justify-content:center;align-items:center;padding:0!important}.elder-logo-btn .mat-icon{--mdc-icon-button-icon-size: 48px !important;height:var(--mdc-icon-button-icon-size);width:var(--mdc-icon-button-icon-size)}
|
|
27831
|
-
}], ctorParameters: () => [{ type: ElderShellService }, { type: ElderRouteOutletDrawerService }, { type: i0.ChangeDetectorRef }, { type: ElderThemeService }, { type: GlobalDragDropService }], propDecorators: { sideNavToggleEnabled: [{
|
|
27842
|
+
], template: "<mat-sidenav-container\n elderThemeApplier\n class=\"full-width\"\n (backdropClick)=\"onBackdropClick($event)\"\n>\n <!-- Left Side Nav -->\n <mat-sidenav\n position=\"start\"\n mode=\"over\"\n [fixedInViewport]=\"true\"\n [autoFocus]=\"leftSideAutoFocus\"\n [opened]=\"leftSideContentOpen$ | async\"\n (closedStart)=\"blurNavIconFocus()\"\n (closed)=\"closeLeftSideContent()\"\n restoreFocus=\"false\"\n >\n <div class=\"layout-col full elder-side-nav\">\n <ng-container *ngTemplateOutlet=\"sideContentLeft || fallbackSideContentLeft\"></ng-container>\n </div>\n </mat-sidenav>\n\n <!-- Main Content -->\n <mat-sidenav-content>\n <div class=\"layout-col full\">\n <ng-container *ngTemplateOutlet=\"centerContent || fallbackCenterContent\"></ng-container>\n </div>\n </mat-sidenav-content>\n\n <!-- Right Side Detail -->\n <mat-sidenav\n mode=\"over\"\n #rightSideDetail\n id=\"elder-right-side-detail\"\n position=\"end\"\n [fixedInViewport]=\"true\"\n [autoFocus]=\"rightSideAutoFocus\"\n [disableClose]=\"true\"\n (keydown.escape)=\"onEscapeRightSide($event)\"\n >\n <div class=\"layout-col full\">\n <ng-container *ngTemplateOutlet=\"sideContentRight || fallbackSideContentRight\"></ng-container>\n </div>\n </mat-sidenav>\n</mat-sidenav-container>\n\n<ng-template #fallbackSideContentLeft>\n <div class=\"layout-col flex\">\n <p class=\"noselect\">No Left Side Content Defined!</p>\n </div>\n</ng-template>\n\n<ng-template #fallbackSideContentRight>\n <router-outlet name=\"side\" class=\"router-flex\"></router-outlet>\n</ng-template>\n\n<ng-template #fallbackCenterContent>\n <div class=\"layout-col full\">\n <!-- Header -->\n <ng-container\n *ngTemplateOutlet=\"(headerTemplate$ | async) || defaultHeaderTemplate\"\n ></ng-container>\n\n <!-- Center -->\n <ng-container\n *ngTemplateOutlet=\"(centerTemplate$ | async) || defaultCenterTemplate\"\n ></ng-container>\n\n <!-- Footer -->\n <ng-container\n *ngTemplateOutlet=\"(footerTemplate$ | async) || defaultFooterTemplate\"\n ></ng-container>\n </div>\n</ng-template>\n\n<ng-template #defaultHeaderTemplate>\n <elder-toolbar\n [color]=\"color\"\n class=\"elder-main-toolbar flex-none\"\n style=\"max-width: 100%; min-width: 100%\"\n >\n <!-- Toolbar Prefix: Sidenav Toggle -->\n <mat-toolbar\n *ngIf=\"sideNavToggleEnabled\"\n [color]=\"menuColor$ | async\"\n class=\"flex-none elder-toolbar-main-nav-button-container pl-lg\"\n style=\"width: auto\"\n >\n <button\n class=\"elder-logo-btn\"\n mat-icon-button\n [color]=\"menuIconColor$ | async\"\n type=\"button\"\n (click)=\"toggleSideNav()\"\n class=\"elder-toolbar-main-nav-button\"\n [class.elder-logo-btn]=\"!!navMenuSvgIcon\"\n >\n @if (navMenuSvgIcon) {\n <mat-icon [svgIcon]=\"navMenuSvgIcon\"></mat-icon>\n } @else {\n <mat-icon>menu</mat-icon>\n }\n </button>\n </mat-toolbar>\n </elder-toolbar>\n</ng-template>\n\n<ng-template #defaultCenterTemplate>\n <div class=\"flex layout-row\">\n <!-- Primary Router Outlet -->\n <router-outlet class=\"router-flex\"></router-outlet>\n </div>\n</ng-template>\n\n<ng-template #defaultFooterTemplate>\n <!-- Default Footer is empty -->\n</ng-template>\n", styles: ["mat-sidenav{margin:0;height:100%;overflow:hidden}mat-sidenav .elder-side-nav{min-width:350px}mat-sidenav-container{margin:0;width:100%;height:100%;overflow:hidden}.elder-logo-btn{display:flex;justify-content:center;align-items:center;padding:0!important}.elder-logo-btn .mat-icon{--mdc-icon-button-icon-size: 48px !important;height:var(--mdc-icon-button-icon-size);width:var(--mdc-icon-button-icon-size)}\n"] }]
|
|
27843
|
+
}], ctorParameters: () => [{ type: ElderShellService }, { type: ElderRouteOutletDrawerService }, { type: i0.ChangeDetectorRef }, { type: ElderThemeService }, { type: GlobalDragDropService }, { type: i0.Renderer2 }], propDecorators: { sideNavToggleEnabled: [{
|
|
27832
27844
|
type: Input
|
|
27833
27845
|
}], leftSideAutoFocus: [{
|
|
27834
27846
|
type: Input
|