@elderbyte/ngx-starter 19.1.18 → 19.1.19
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 +7 -5
- package/fesm2022/elderbyte-ngx-starter.mjs.map +1 -1
- package/lib/components/headers/elder-header/elder-header.component.d.ts +2 -1
- package/package.json +1 -1
- package/src/lib/components/shell/shell/elder-shell.component.scss +0 -1
- package/theming/utilities/_elder-common-utils.scss +8 -0
|
@@ -13394,7 +13394,9 @@ class ElderHeaderComponent {
|
|
|
13394
13394
|
* Constructor *
|
|
13395
13395
|
* *
|
|
13396
13396
|
**************************************************************************/
|
|
13397
|
-
constructor() {
|
|
13397
|
+
constructor() {
|
|
13398
|
+
this.truncateHeader = input(false, { transform: booleanTransformFn });
|
|
13399
|
+
}
|
|
13398
13400
|
/***************************************************************************
|
|
13399
13401
|
* *
|
|
13400
13402
|
* Life Cycle *
|
|
@@ -13402,11 +13404,11 @@ class ElderHeaderComponent {
|
|
|
13402
13404
|
**************************************************************************/
|
|
13403
13405
|
ngOnInit() { }
|
|
13404
13406
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ElderHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13405
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
13407
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: ElderHeaderComponent, isStandalone: true, selector: "elder-header", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: false, isRequired: false, transformFunction: null }, subheader: { classPropertyName: "subheader", publicName: "subheader", isSignal: false, isRequired: false, transformFunction: null }, truncateHeader: { classPropertyName: "truncateHeader", publicName: "truncateHeader", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"layout-col\">\n <h2 [class]=\"[(truncateHeader() ? 'truncate-line' : undefined)]\">{{ header ? header : ('-' | translate) }}</h2>\n <span [class]=\"['mat-caption', (truncateHeader() ? 'truncate-line' : undefined)]\">{{ subheader ? subheader : ('-' | translate) }}</span>\n</div>\n", styles: ["h2{margin:0;font:var(--md-sys-typescale-title-large);letter-spacing:var(--md-sys-typescale-title-large-tracking)}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
|
|
13406
13408
|
}
|
|
13407
13409
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ElderHeaderComponent, decorators: [{
|
|
13408
13410
|
type: Component,
|
|
13409
|
-
args: [{ selector: 'elder-header', imports: [TranslateModule], template: "<div class=\"layout-col\">\n <h2
|
|
13411
|
+
args: [{ selector: 'elder-header', imports: [TranslateModule], template: "<div class=\"layout-col\">\n <h2 [class]=\"[(truncateHeader() ? 'truncate-line' : undefined)]\">{{ header ? header : ('-' | translate) }}</h2>\n <span [class]=\"['mat-caption', (truncateHeader() ? 'truncate-line' : undefined)]\">{{ subheader ? subheader : ('-' | translate) }}</span>\n</div>\n", styles: ["h2{margin:0;font:var(--md-sys-typescale-title-large);letter-spacing:var(--md-sys-typescale-title-large-tracking)}\n"] }]
|
|
13410
13412
|
}], ctorParameters: () => [], propDecorators: { header: [{
|
|
13411
13413
|
type: Input
|
|
13412
13414
|
}], subheader: [{
|
|
@@ -27808,7 +27810,7 @@ class ElderShellComponent {
|
|
|
27808
27810
|
}, 5);
|
|
27809
27811
|
}
|
|
27810
27812
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ElderShellComponent, deps: [{ token: ElderShellService }, { token: ElderRouteOutletDrawerService }, { token: i0.ChangeDetectorRef }, { token: ElderThemeService }, { token: GlobalDragDropService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
27811
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", 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\"\n style=\"width: auto\"\n >\n <button\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 <!-- <img\n class=\"m-auto\"\n style=\"width: 44px\"\n src=\"/assets/brand/assets/elderbyte-logo/light/elderbyte-logomark-color.svg\"\n alt=\"\"\n /> -->\n <!-- <img\n class=\"main-nav-logo m-auto\"\n style=\"width: 44px\"\n src=\"/assets/brand/assets/elderbyte-logo/dark/elderbyte-logomark-dark-mono-gold.svg\"\n alt=\"\"\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-toolbar-main-nav-button:focus,.elder-toolbar-main-nav-button:hover,.elder-toolbar-main-nav-button:active{background-color:#00000012}.elder-logo-btn{display:flex;padding:5px;justify-content:center;align-items:center;--mdc-icon-button-icon-size: 36px !important}.elder-logo-btn .mat-icon{height:var(--mdc-icon-button-icon-size);width:var(--mdc-icon-button-icon-size)
|
|
27813
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", 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\"\n style=\"width: auto\"\n >\n <button\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 <!-- <img\n class=\"m-auto\"\n style=\"width: 44px\"\n src=\"/assets/brand/assets/elderbyte-logo/light/elderbyte-logomark-color.svg\"\n alt=\"\"\n /> -->\n <!-- <img\n class=\"main-nav-logo m-auto\"\n style=\"width: 44px\"\n src=\"/assets/brand/assets/elderbyte-logo/dark/elderbyte-logomark-dark-mono-gold.svg\"\n alt=\"\"\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-toolbar-main-nav-button:focus,.elder-toolbar-main-nav-button:hover,.elder-toolbar-main-nav-button:active{background-color:#00000012}.elder-logo-btn{display:flex;padding:5px;justify-content:center;align-items:center;--mdc-icon-button-icon-size: 36px !important}.elder-logo-btn .mat-icon{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 }); }
|
|
27812
27814
|
}
|
|
27813
27815
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ElderShellComponent, decorators: [{
|
|
27814
27816
|
type: Component,
|
|
@@ -27825,7 +27827,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
27825
27827
|
MatIconButton,
|
|
27826
27828
|
MatIcon,
|
|
27827
27829
|
AsyncPipe,
|
|
27828
|
-
], 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\"\n style=\"width: auto\"\n >\n <button\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 <!-- <img\n class=\"m-auto\"\n style=\"width: 44px\"\n src=\"/assets/brand/assets/elderbyte-logo/light/elderbyte-logomark-color.svg\"\n alt=\"\"\n /> -->\n <!-- <img\n class=\"main-nav-logo m-auto\"\n style=\"width: 44px\"\n src=\"/assets/brand/assets/elderbyte-logo/dark/elderbyte-logomark-dark-mono-gold.svg\"\n alt=\"\"\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-toolbar-main-nav-button:focus,.elder-toolbar-main-nav-button:hover,.elder-toolbar-main-nav-button:active{background-color:#00000012}.elder-logo-btn{display:flex;padding:5px;justify-content:center;align-items:center;--mdc-icon-button-icon-size: 36px !important}.elder-logo-btn .mat-icon{height:var(--mdc-icon-button-icon-size);width:var(--mdc-icon-button-icon-size)
|
|
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\"\n style=\"width: auto\"\n >\n <button\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 <!-- <img\n class=\"m-auto\"\n style=\"width: 44px\"\n src=\"/assets/brand/assets/elderbyte-logo/light/elderbyte-logomark-color.svg\"\n alt=\"\"\n /> -->\n <!-- <img\n class=\"main-nav-logo m-auto\"\n style=\"width: 44px\"\n src=\"/assets/brand/assets/elderbyte-logo/dark/elderbyte-logomark-dark-mono-gold.svg\"\n alt=\"\"\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-toolbar-main-nav-button:focus,.elder-toolbar-main-nav-button:hover,.elder-toolbar-main-nav-button:active{background-color:#00000012}.elder-logo-btn{display:flex;padding:5px;justify-content:center;align-items:center;--mdc-icon-button-icon-size: 36px !important}.elder-logo-btn .mat-icon{height:var(--mdc-icon-button-icon-size);width:var(--mdc-icon-button-icon-size)}\n"] }]
|
|
27829
27831
|
}], ctorParameters: () => [{ type: ElderShellService }, { type: ElderRouteOutletDrawerService }, { type: i0.ChangeDetectorRef }, { type: ElderThemeService }, { type: GlobalDragDropService }], propDecorators: { sideNavToggleEnabled: [{
|
|
27830
27832
|
type: Input
|
|
27831
27833
|
}], leftSideAutoFocus: [{
|