@elderbyte/ngx-starter 14.4.0-beta.10 → 14.4.0-beta.11
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/esm2020/lib/components/shell/shell/elder-shell.component.mjs +14 -4
- package/fesm2015/elderbyte-ngx-starter.mjs +13 -3
- package/fesm2015/elderbyte-ngx-starter.mjs.map +1 -1
- package/fesm2020/elderbyte-ngx-starter.mjs +13 -3
- package/fesm2020/elderbyte-ngx-starter.mjs.map +1 -1
- package/lib/components/shell/shell/elder-shell.component.d.ts +4 -1
- package/package.json +1 -1
|
@@ -17131,6 +17131,7 @@ class ElderShellComponent {
|
|
|
17131
17131
|
this.destroy$ = new Subject();
|
|
17132
17132
|
this.color = 'primary';
|
|
17133
17133
|
this.menuColor$ = new BehaviorSubject('accent');
|
|
17134
|
+
this.menuIconColor$ = new BehaviorSubject(undefined);
|
|
17134
17135
|
this.headerTemplate$ = shellService.activeSlotTemplate('header').pipe(tap(() => this.checkSoon()));
|
|
17135
17136
|
this.centerTemplate$ = shellService.activeSlotTemplate('center').pipe(tap(() => this.checkSoon()));
|
|
17136
17137
|
this.footerTemplate$ = shellService.activeSlotTemplate('footer').pipe(tap(() => this.checkSoon()));
|
|
@@ -17164,6 +17165,12 @@ class ElderShellComponent {
|
|
|
17164
17165
|
get menuColor() {
|
|
17165
17166
|
return this.menuColor$.getValue();
|
|
17166
17167
|
}
|
|
17168
|
+
set menuIconColor(c) {
|
|
17169
|
+
this.menuIconColor$.next(c);
|
|
17170
|
+
}
|
|
17171
|
+
get menuIconColor() {
|
|
17172
|
+
return this.menuIconColor$.getValue();
|
|
17173
|
+
}
|
|
17167
17174
|
/***************************************************************************
|
|
17168
17175
|
* *
|
|
17169
17176
|
* Public API *
|
|
@@ -17195,7 +17202,8 @@ class ElderShellComponent {
|
|
|
17195
17202
|
* *
|
|
17196
17203
|
**************************************************************************/
|
|
17197
17204
|
adjustColorsForTheme(theme) {
|
|
17198
|
-
this.menuColor = theme?.dark ?
|
|
17205
|
+
this.menuColor = theme?.dark ? undefined : 'accent';
|
|
17206
|
+
this.menuIconColor = theme?.dark ? 'primary' : undefined;
|
|
17199
17207
|
}
|
|
17200
17208
|
isContained(child, id) {
|
|
17201
17209
|
if (child.id === id) {
|
|
@@ -17222,10 +17230,10 @@ class ElderShellComponent {
|
|
|
17222
17230
|
}
|
|
17223
17231
|
}
|
|
17224
17232
|
ElderShellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderShellComponent, deps: [{ token: ElderShellService }, { token: ElderRouteOutletDrawerService }, { token: i0.ChangeDetectorRef }, { token: ElderThemeService }], target: i0.ɵɵFactoryTarget.Component });
|
|
17225
|
-
ElderShellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderShellComponent, selector: "elder-shell, ebs-shell", inputs: { sideNavToggleEnabled: "sideNavToggleEnabled", leftSideAutoFocus: "leftSideAutoFocus", rightSideAutoFocus: "rightSideAutoFocus", color: "color", menuColor: "menuColor" }, 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: "\n<mat-sidenav-container\n elderThemeApplier\n style=\"height:100%; width: 100%\"\n (backdropClick)=\"onBackdropClick($event)\"\n>\n\n <!-- Left Side Nav -->\n <mat-sidenav position=\"start\"\n mode=\"over\"\n [fixedInViewport]=\"true\"\n [autoFocus]=\"leftSideAutoFocus\"\n [opened]=\"leftSideContentOpen$ | async\"\n (closed)=\"closeLeftSideContent()\">\n <div fxFill fxLayout=\"column\">\n <ng-container *ngTemplateOutlet=\"sideContentLeft || fallbackSideContentLeft;\"></ng-container>\n </div>\n </mat-sidenav>\n\n <!-- Main Content -->\n <mat-sidenav-content>\n <div fxLayout=\"column\" fxFill>\n <ng-container *ngTemplateOutlet=\"centerContent || fallbackCenterContent;\"></ng-container>\n </div>\n </mat-sidenav-content>\n\n <!-- Right Side Detail -->\n <mat-sidenav mode=\"over\" #rightSideDetail id=\"elder-right-side-detail\"\n position=\"end\"\n [fixedInViewport]=\"true\"\n [autoFocus]=\"rightSideAutoFocus\"\n [disableClose]=\"true\" (keydown.escape)=\"onEscapeRightSide($event)\">\n <div fxFill fxLayout=\"column\">\n <ng-container *ngTemplateOutlet=\"sideContentRight || fallbackSideContentRight;\"></ng-container>\n </div>\n </mat-sidenav>\n\n</mat-sidenav-container>\n\n<ng-template #fallbackSideContentLeft>\n <div fxLayout=\"column\" fxFlex>\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 fxLayout=\"column\" fxFill>\n\n <!-- Header -->\n <ng-container *ngTemplateOutlet=\"(headerTemplate$ | async) || defaultHeaderTemplate\"></ng-container>\n\n <!-- Center -->\n <ng-container *ngTemplateOutlet=\"(centerTemplate$ | async) || defaultCenterTemplate\"></ng-container>\n\n <!-- Footer -->\n <ng-container *ngTemplateOutlet=\"(footerTemplate$ | async) || defaultFooterTemplate\"></ng-container>\n\n </div>\n</ng-template>\n\n\n<ng-template #defaultHeaderTemplate>\n
|
|
17233
|
+
ElderShellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderShellComponent, selector: "elder-shell, ebs-shell", inputs: { sideNavToggleEnabled: "sideNavToggleEnabled", leftSideAutoFocus: "leftSideAutoFocus", rightSideAutoFocus: "rightSideAutoFocus", color: "color", 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: "\n<mat-sidenav-container\n elderThemeApplier\n style=\"height:100%; width: 100%\"\n (backdropClick)=\"onBackdropClick($event)\"\n>\n\n <!-- Left Side Nav -->\n <mat-sidenav position=\"start\"\n mode=\"over\"\n [fixedInViewport]=\"true\"\n [autoFocus]=\"leftSideAutoFocus\"\n [opened]=\"leftSideContentOpen$ | async\"\n (closed)=\"closeLeftSideContent()\">\n <div fxFill fxLayout=\"column\">\n <ng-container *ngTemplateOutlet=\"sideContentLeft || fallbackSideContentLeft;\"></ng-container>\n </div>\n </mat-sidenav>\n\n <!-- Main Content -->\n <mat-sidenav-content>\n <div fxLayout=\"column\" fxFill>\n <ng-container *ngTemplateOutlet=\"centerContent || fallbackCenterContent;\"></ng-container>\n </div>\n </mat-sidenav-content>\n\n <!-- Right Side Detail -->\n <mat-sidenav mode=\"over\" #rightSideDetail id=\"elder-right-side-detail\"\n position=\"end\"\n [fixedInViewport]=\"true\"\n [autoFocus]=\"rightSideAutoFocus\"\n [disableClose]=\"true\" (keydown.escape)=\"onEscapeRightSide($event)\">\n <div fxFill fxLayout=\"column\">\n <ng-container *ngTemplateOutlet=\"sideContentRight || fallbackSideContentRight;\"></ng-container>\n </div>\n </mat-sidenav>\n\n</mat-sidenav-container>\n\n<ng-template #fallbackSideContentLeft>\n <div fxLayout=\"column\" fxFlex>\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 fxLayout=\"column\" fxFill>\n\n <!-- Header -->\n <ng-container *ngTemplateOutlet=\"(headerTemplate$ | async) || defaultHeaderTemplate\"></ng-container>\n\n <!-- Center -->\n <ng-container *ngTemplateOutlet=\"(centerTemplate$ | async) || defaultCenterTemplate\"></ng-container>\n\n <!-- Footer -->\n <ng-container *ngTemplateOutlet=\"(footerTemplate$ | async) || defaultFooterTemplate\"></ng-container>\n\n </div>\n</ng-template>\n\n\n<ng-template #defaultHeaderTemplate>\n <elder-toolbar [color]=\"color\">\n <!-- Toolbar Prefix: Sidenav Toggle -->\n <mat-toolbar *ngIf=\"sideNavToggleEnabled\" fxFlex=\"0\"\n fxLayout=\"row\" fxLayoutAlign=\"center center\"\n [color]=\"menuColor$ | async\">\n <button mat-icon-button [color]=\"menuIconColor$ | async\" type=\"button\" (click)=\"toggleSideNav()\">\n <mat-icon>menu</mat-icon>\n </button>\n </mat-toolbar>\n </elder-toolbar>\n</ng-template>\n\n<ng-template #defaultCenterTemplate>\n <!-- Primary Router Outlet -->\n <router-outlet class=\"router-flex\"></router-outlet>\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-container{margin:0;width:100%;height:100%;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$4.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: i6$2.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i6$2.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i6$2.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "component", type: i7.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: ElderToolbarComponent, selector: "elder-toolbar, ebs-toolbar", inputs: ["color"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: ElderThemeApplierDirective, selector: "[elderThemeApplier]" }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
17226
17234
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderShellComponent, decorators: [{
|
|
17227
17235
|
type: Component,
|
|
17228
|
-
args: [{ selector: 'elder-shell, ebs-shell', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n<mat-sidenav-container\n elderThemeApplier\n style=\"height:100%; width: 100%\"\n (backdropClick)=\"onBackdropClick($event)\"\n>\n\n <!-- Left Side Nav -->\n <mat-sidenav position=\"start\"\n mode=\"over\"\n [fixedInViewport]=\"true\"\n [autoFocus]=\"leftSideAutoFocus\"\n [opened]=\"leftSideContentOpen$ | async\"\n (closed)=\"closeLeftSideContent()\">\n <div fxFill fxLayout=\"column\">\n <ng-container *ngTemplateOutlet=\"sideContentLeft || fallbackSideContentLeft;\"></ng-container>\n </div>\n </mat-sidenav>\n\n <!-- Main Content -->\n <mat-sidenav-content>\n <div fxLayout=\"column\" fxFill>\n <ng-container *ngTemplateOutlet=\"centerContent || fallbackCenterContent;\"></ng-container>\n </div>\n </mat-sidenav-content>\n\n <!-- Right Side Detail -->\n <mat-sidenav mode=\"over\" #rightSideDetail id=\"elder-right-side-detail\"\n position=\"end\"\n [fixedInViewport]=\"true\"\n [autoFocus]=\"rightSideAutoFocus\"\n [disableClose]=\"true\" (keydown.escape)=\"onEscapeRightSide($event)\">\n <div fxFill fxLayout=\"column\">\n <ng-container *ngTemplateOutlet=\"sideContentRight || fallbackSideContentRight;\"></ng-container>\n </div>\n </mat-sidenav>\n\n</mat-sidenav-container>\n\n<ng-template #fallbackSideContentLeft>\n <div fxLayout=\"column\" fxFlex>\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 fxLayout=\"column\" fxFill>\n\n <!-- Header -->\n <ng-container *ngTemplateOutlet=\"(headerTemplate$ | async) || defaultHeaderTemplate\"></ng-container>\n\n <!-- Center -->\n <ng-container *ngTemplateOutlet=\"(centerTemplate$ | async) || defaultCenterTemplate\"></ng-container>\n\n <!-- Footer -->\n <ng-container *ngTemplateOutlet=\"(footerTemplate$ | async) || defaultFooterTemplate\"></ng-container>\n\n </div>\n</ng-template>\n\n\n<ng-template #defaultHeaderTemplate>\n
|
|
17236
|
+
args: [{ selector: 'elder-shell, ebs-shell', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n<mat-sidenav-container\n elderThemeApplier\n style=\"height:100%; width: 100%\"\n (backdropClick)=\"onBackdropClick($event)\"\n>\n\n <!-- Left Side Nav -->\n <mat-sidenav position=\"start\"\n mode=\"over\"\n [fixedInViewport]=\"true\"\n [autoFocus]=\"leftSideAutoFocus\"\n [opened]=\"leftSideContentOpen$ | async\"\n (closed)=\"closeLeftSideContent()\">\n <div fxFill fxLayout=\"column\">\n <ng-container *ngTemplateOutlet=\"sideContentLeft || fallbackSideContentLeft;\"></ng-container>\n </div>\n </mat-sidenav>\n\n <!-- Main Content -->\n <mat-sidenav-content>\n <div fxLayout=\"column\" fxFill>\n <ng-container *ngTemplateOutlet=\"centerContent || fallbackCenterContent;\"></ng-container>\n </div>\n </mat-sidenav-content>\n\n <!-- Right Side Detail -->\n <mat-sidenav mode=\"over\" #rightSideDetail id=\"elder-right-side-detail\"\n position=\"end\"\n [fixedInViewport]=\"true\"\n [autoFocus]=\"rightSideAutoFocus\"\n [disableClose]=\"true\" (keydown.escape)=\"onEscapeRightSide($event)\">\n <div fxFill fxLayout=\"column\">\n <ng-container *ngTemplateOutlet=\"sideContentRight || fallbackSideContentRight;\"></ng-container>\n </div>\n </mat-sidenav>\n\n</mat-sidenav-container>\n\n<ng-template #fallbackSideContentLeft>\n <div fxLayout=\"column\" fxFlex>\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 fxLayout=\"column\" fxFill>\n\n <!-- Header -->\n <ng-container *ngTemplateOutlet=\"(headerTemplate$ | async) || defaultHeaderTemplate\"></ng-container>\n\n <!-- Center -->\n <ng-container *ngTemplateOutlet=\"(centerTemplate$ | async) || defaultCenterTemplate\"></ng-container>\n\n <!-- Footer -->\n <ng-container *ngTemplateOutlet=\"(footerTemplate$ | async) || defaultFooterTemplate\"></ng-container>\n\n </div>\n</ng-template>\n\n\n<ng-template #defaultHeaderTemplate>\n <elder-toolbar [color]=\"color\">\n <!-- Toolbar Prefix: Sidenav Toggle -->\n <mat-toolbar *ngIf=\"sideNavToggleEnabled\" fxFlex=\"0\"\n fxLayout=\"row\" fxLayoutAlign=\"center center\"\n [color]=\"menuColor$ | async\">\n <button mat-icon-button [color]=\"menuIconColor$ | async\" type=\"button\" (click)=\"toggleSideNav()\">\n <mat-icon>menu</mat-icon>\n </button>\n </mat-toolbar>\n </elder-toolbar>\n</ng-template>\n\n<ng-template #defaultCenterTemplate>\n <!-- Primary Router Outlet -->\n <router-outlet class=\"router-flex\"></router-outlet>\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-container{margin:0;width:100%;height:100%;overflow:hidden}\n"] }]
|
|
17229
17237
|
}], ctorParameters: function () { return [{ type: ElderShellService }, { type: ElderRouteOutletDrawerService }, { type: i0.ChangeDetectorRef }, { type: ElderThemeService }]; }, propDecorators: { sideNavToggleEnabled: [{
|
|
17230
17238
|
type: Input
|
|
17231
17239
|
}], leftSideAutoFocus: [{
|
|
@@ -17248,6 +17256,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
|
|
|
17248
17256
|
type: Input
|
|
17249
17257
|
}], menuColor: [{
|
|
17250
17258
|
type: Input
|
|
17259
|
+
}], menuIconColor: [{
|
|
17260
|
+
type: Input
|
|
17251
17261
|
}] } });
|
|
17252
17262
|
|
|
17253
17263
|
class ElderShellNavigationToggleComponent {
|