@elderbyte/ngx-starter 19.1.20 → 19.1.21
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 +17 -5
- 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 +10 -0
|
@@ -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
|