@elderbyte/ngx-starter 19.1.17 → 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 +12 -6
- package/fesm2022/elderbyte-ngx-starter.mjs.map +1 -1
- package/lib/components/data-view/common/elder-data-toolbar/elder-data-toolbar.component.d.ts +1 -1
- package/lib/components/headers/elder-header/elder-header.component.d.ts +2 -1
- package/lib/components/navigation/toolbar/elder-toolbar-column.directive.d.ts +4 -0
- 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>{{ header ? header : ('-' | translate) }}</h2>\n <span class=\"mat-caption\">{{ 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"] }]
|
|
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: [{
|
|
@@ -13704,7 +13706,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
13704
13706
|
|
|
13705
13707
|
/**
|
|
13706
13708
|
* This directive projects content identified by a placeholder id
|
|
13707
|
-
* into the toolbar at the corresponding
|
|
13709
|
+
* into the elder-data-toolbar at the corresponding ElderToolbarContentSlot.
|
|
13708
13710
|
*/
|
|
13709
13711
|
class ElderToolbarContentDirective {
|
|
13710
13712
|
constructor(templateRef) {
|
|
@@ -19520,6 +19522,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
19520
19522
|
}]
|
|
19521
19523
|
}], ctorParameters: () => [] });
|
|
19522
19524
|
|
|
19525
|
+
/**
|
|
19526
|
+
* This directive projects content identified by a placeholder id
|
|
19527
|
+
* into the elder-toolbar at the corresponding ToolbarColumnPosition.
|
|
19528
|
+
*/
|
|
19523
19529
|
class ElderToolbarColumnDirective {
|
|
19524
19530
|
/***************************************************************************
|
|
19525
19531
|
* *
|
|
@@ -27804,7 +27810,7 @@ class ElderShellComponent {
|
|
|
27804
27810
|
}, 5);
|
|
27805
27811
|
}
|
|
27806
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 }); }
|
|
27807
|
-
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 }); }
|
|
27808
27814
|
}
|
|
27809
27815
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ElderShellComponent, decorators: [{
|
|
27810
27816
|
type: Component,
|
|
@@ -27821,7 +27827,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
27821
27827
|
MatIconButton,
|
|
27822
27828
|
MatIcon,
|
|
27823
27829
|
AsyncPipe,
|
|
27824
|
-
], 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"] }]
|
|
27825
27831
|
}], ctorParameters: () => [{ type: ElderShellService }, { type: ElderRouteOutletDrawerService }, { type: i0.ChangeDetectorRef }, { type: ElderThemeService }, { type: GlobalDragDropService }], propDecorators: { sideNavToggleEnabled: [{
|
|
27826
27832
|
type: Input
|
|
27827
27833
|
}], leftSideAutoFocus: [{
|