@elderbyte/ngx-starter 19.1.1 → 19.1.3
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 +2 -2
- package/fesm2022/elderbyte-ngx-starter.mjs.map +1 -1
- package/lib/common/theme-sizes.d.ts +1 -1
- package/package.json +1 -1
- package/theming/abstracts/_elder-design-tokens.scss +161 -19
- package/theming/abstracts/_elder-starter-theme.scss +3 -0
- package/theming/abstracts/_elder-theme-main.scss +2 -2
- package/theming/base/_elder-fixes-base.scss +8 -15
- package/theming/components/_elder-scrollbar-theme.scss +45 -0
- package/theming/utilities/_elder-color-utils.scss +13 -0
- package/theming/utilities/_elder-common-utils.scss +10 -0
|
@@ -27668,7 +27668,7 @@ class ElderShellComponent {
|
|
|
27668
27668
|
}, 5);
|
|
27669
27669
|
}
|
|
27670
27670
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ElderShellComponent, deps: [{ token: ElderShellService }, { token: ElderRouteOutletDrawerService }, { token: i0.ChangeDetectorRef }, { token: ElderThemeService }, { token: GlobalDragDropService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
27671
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: ElderShellComponent, isStandalone: true, selector: "elder-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: "<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 >\n <
|
|
27671
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: ElderShellComponent, isStandalone: true, selector: "elder-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: "<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 style=\"\n display: flex;\n padding: 5px;\n \"\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}\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: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
27672
27672
|
}
|
|
27673
27673
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ElderShellComponent, decorators: [{
|
|
27674
27674
|
type: Component,
|
|
@@ -27685,7 +27685,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
|
|
|
27685
27685
|
MatIconButton,
|
|
27686
27686
|
MatIcon,
|
|
27687
27687
|
AsyncPipe,
|
|
27688
|
-
], 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 >\n <
|
|
27688
|
+
], 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 style=\"\n display: flex;\n padding: 5px;\n \"\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}\n"] }]
|
|
27689
27689
|
}], ctorParameters: () => [{ type: ElderShellService }, { type: ElderRouteOutletDrawerService }, { type: i0.ChangeDetectorRef }, { type: ElderThemeService }, { type: GlobalDragDropService }], propDecorators: { sideNavToggleEnabled: [{
|
|
27690
27690
|
type: Input
|
|
27691
27691
|
}], leftSideAutoFocus: [{
|