@elderbyte/ngx-starter 14.1.1 → 14.2.2

package/lib/components/navigation/toolbar/toolbar/elder-toolbar.component.d.ts

@@ -1,11 +1,13 @@
-import { OnInit, TemplateRef } from '@angular/core';
+import { OnDestroy, OnInit, TemplateRef } from '@angular/core';
 import { ElderToolbarService } from '../elder-toolbar.service';
-import { Observable } from 'rxjs';
+import { BehaviorSubject, Observable } from 'rxjs';
 import { ToolbarColumnPosition } from '../toolbar-column-position';
 import { ThemePalette } from '@angular/material/core';
+import { ElderThemeService } from '../../../theme/elder-theme.service';
 import * as i0 from "@angular/core";
-export declare class ElderToolbarComponent implements OnInit {
+export declare class ElderToolbarComponent implements OnInit, OnDestroy {
     private toolbarService;
+    private themeService;
     /***************************************************************************
      *                                                                         *
      * Fields                                                                  *
@@ -13,19 +15,22 @@ export declare class ElderToolbarComponent implements OnInit {
      **************************************************************************/
     private readonly logger;
     /** The color of the Toolbar */
-    color: ThemePalette;
+    readonly color$: BehaviorSubject<ThemePalette>;
+    private readonly destroy$;
+    set color(c: ThemePalette);
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(toolbarService: ElderToolbarService);
+    constructor(toolbarService: ElderToolbarService, themeService: ElderThemeService);
     /***************************************************************************
      *                                                                         *
      * Life Cycle                                                              *
      *                                                                         *
      **************************************************************************/
     ngOnInit(): void;
+    ngOnDestroy(): void;
     /***************************************************************************
      *                                                                         *
      * Public API                                                              *

package/lib/components/public_api.d.ts

@@ -1,3 +1,4 @@
+export * from './theme/public_api';
 export * from './access-denied/elder-access-denied.module';
 export * from './expand-toggle-button/elder-expand-toggle-button.module';
 export * from './multi-autocomplete/elder-multi-auto-complete.module';

package/lib/components/shell/elder-shell.module.d.ts

@@ -14,6 +14,7 @@ import * as i12 from "../navigation/toolbar/elder-toolbar.module";
 import * as i13 from "@angular/flex-layout";
 import * as i14 from "@ngx-translate/core";
 import * as i15 from "../panels/elder-panel.module";
+import * as i16 from "../theme/elder-theme.module";
 export * from './shell/elder-shell.component';
 export { ElderShellNavigationToggleComponent } from './shell-navigation-toggle/elder-shell-navigation-toggle.component';
 export { DrawerOutletBinding } from './drawers/drawer-outlet-binding';
@@ -25,6 +26,6 @@ export { ShellContentSlot } from './shell-content-slot';
 export { ElderAppHeaderComponent } from './header/elder-app-header/elder-app-header.component';
 export declare class ElderShellModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ElderShellModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ElderShellModule, [typeof i1.ElderShellComponent, typeof i1.ElderShellSideLeftDirective, typeof i1.ElderShellSideRightDirective, typeof i1.ElderShellCenterDirective, typeof i2.ElderShellNavigationToggleComponent, typeof i3.ElderShellSlotDirective, typeof i4.ElderAppHeaderComponent], [typeof i5.CommonModule, typeof i6.RouterModule, typeof i7.MatSidenavModule, typeof i8.MatToolbarModule, typeof i9.MatIconModule, typeof i10.MatListModule, typeof i11.MatButtonModule, typeof i12.ElderToolbarModule, typeof i13.FlexLayoutModule, typeof i14.TranslateModule, typeof i15.ElderPanelModule], [typeof i1.ElderShellComponent, typeof i1.ElderShellSideLeftDirective, typeof i1.ElderShellSideRightDirective, typeof i1.ElderShellCenterDirective, typeof i2.ElderShellNavigationToggleComponent, typeof i3.ElderShellSlotDirective, typeof i4.ElderAppHeaderComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ElderShellModule, [typeof i1.ElderShellComponent, typeof i1.ElderShellSideLeftDirective, typeof i1.ElderShellSideRightDirective, typeof i1.ElderShellCenterDirective, typeof i2.ElderShellNavigationToggleComponent, typeof i3.ElderShellSlotDirective, typeof i4.ElderAppHeaderComponent], [typeof i5.CommonModule, typeof i6.RouterModule, typeof i7.MatSidenavModule, typeof i8.MatToolbarModule, typeof i9.MatIconModule, typeof i10.MatListModule, typeof i11.MatButtonModule, typeof i12.ElderToolbarModule, typeof i13.FlexLayoutModule, typeof i14.TranslateModule, typeof i15.ElderPanelModule, typeof i16.ElderThemeModule], [typeof i1.ElderShellComponent, typeof i1.ElderShellSideLeftDirective, typeof i1.ElderShellSideRightDirective, typeof i1.ElderShellCenterDirective, typeof i2.ElderShellNavigationToggleComponent, typeof i3.ElderShellSlotDirective, typeof i4.ElderAppHeaderComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ElderShellModule>;
 }

package/lib/components/shell/header/elder-app-header/elder-app-header.component.d.ts

@@ -1,16 +1,43 @@
-import { OnInit } from '@angular/core';
+import { OnInit, OnDestroy } from '@angular/core';
 import { ThemePalette } from '@angular/material/core';
+import { ElderThemeService } from '../../../theme/elder-theme.service';
+import { BehaviorSubject } from 'rxjs';
 import * as i0 from "@angular/core";
-export declare class ElderAppHeaderComponent implements OnInit {
+export declare class ElderAppHeaderComponent implements OnInit, OnDestroy {
+    private readonly themeService;
+    /***************************************************************************
+     *                                                                         *
+     * Fields                                                                  *
+     *                                                                         *
+     **************************************************************************/
     icon: string;
-    iconColor: ThemePalette;
     title: string;
     subTitle: string;
     subTitleLink: string;
     version: string;
-    color: ThemePalette;
-    constructor();
+    readonly color$: BehaviorSubject<ThemePalette>;
+    readonly iconColor$: BehaviorSubject<ThemePalette>;
+    private readonly destroy$;
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor(themeService: ElderThemeService);
+    /***************************************************************************
+     *                                                                         *
+     * Life Cycle                                                              *
+     *                                                                         *
+     **************************************************************************/
     ngOnInit(): void;
+    ngOnDestroy(): void;
+    /***************************************************************************
+     *                                                                         *
+     * Properties                                                              *
+     *                                                                         *
+     **************************************************************************/
+    set color(c: ThemePalette);
+    set iconColor(c: ThemePalette);
     static ɵfac: i0.ɵɵFactoryDeclaration<ElderAppHeaderComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ElderAppHeaderComponent, "elder-app-header", never, { "icon": "icon"; "iconColor": "iconColor"; "title": "title"; "subTitle": "subTitle"; "subTitleLink": "subTitleLink"; "version": "version"; "color": "color"; }, {}, never, ["*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ElderAppHeaderComponent, "elder-app-header", never, { "icon": "icon"; "title": "title"; "subTitle": "subTitle"; "subTitleLink": "subTitleLink"; "version": "version"; "color": "color"; "iconColor": "iconColor"; }, {}, never, ["*"], false>;
 }

package/lib/components/shell/shell/elder-shell.component.d.ts

@@ -2,8 +2,9 @@ import { ChangeDetectorRef, OnDestroy, OnInit, TemplateRef, ViewContainerRef } f
 import { ElderShellService } from '../elder-shell.service';
 import { MatSidenav } from '@angular/material/sidenav';
 import { ElderRouteOutletDrawerService } from '../drawers/elder-route-outlet-drawer.service';
-import { Observable } from 'rxjs';
+import { BehaviorSubject, Observable } from 'rxjs';
 import { ThemePalette } from '@angular/material/core';
+import { ElderThemeService } from '../../theme/elder-theme.service';
 import * as i0 from "@angular/core";
 export declare class ElderShellSideLeftDirective {
     templateRef: TemplateRef<any>;
@@ -30,6 +31,7 @@ export declare class ElderShellComponent implements OnInit, OnDestroy {
     private shellService;
     private outletDrawerService;
     private changeDetectorRef;
+    private themeService;
     /***************************************************************************
      *                                                                         *
      * Fields                                                                  *
@@ -38,8 +40,6 @@ export declare class ElderShellComponent implements OnInit, OnDestroy {
     private readonly logger;
     /** Controls if the SideNav toggle should be displayed. Default: true */
     sideNavToggleEnabled: boolean;
-    color: ThemePalette;
-    menuColor: ThemePalette;
     leftSideAutoFocus: boolean;
     rightSideAutoFocus: boolean;
     sideContentLeft: TemplateRef<any>;
@@ -51,13 +51,15 @@ export declare class ElderShellComponent implements OnInit, OnDestroy {
     readonly headerTemplate$: Observable<TemplateRef<any>>;
     readonly centerTemplate$: Observable<TemplateRef<any>>;
     readonly footerTemplate$: Observable<TemplateRef<any>>;
-    private _sub;
+    private readonly destroy$;
+    color: ThemePalette;
+    readonly menuColor$: BehaviorSubject<ThemePalette>;
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(shellService: ElderShellService, outletDrawerService: ElderRouteOutletDrawerService, changeDetectorRef: ChangeDetectorRef);
+    constructor(shellService: ElderShellService, outletDrawerService: ElderRouteOutletDrawerService, changeDetectorRef: ChangeDetectorRef, themeService: ElderThemeService);
     /***************************************************************************
      *                                                                         *
      * Life Cycle                                                              *
@@ -65,6 +67,13 @@ export declare class ElderShellComponent implements OnInit, OnDestroy {
      **************************************************************************/
     ngOnInit(): void;
     ngOnDestroy(): void;
+    /***************************************************************************
+     *                                                                         *
+     * Properties                                                              *
+     *                                                                         *
+     **************************************************************************/
+    set menuColor(c: ThemePalette);
+    get menuColor(): ThemePalette;
     /***************************************************************************
      *                                                                         *
      * Public API                                                              *
@@ -79,8 +88,9 @@ export declare class ElderShellComponent implements OnInit, OnDestroy {
      * Private methods                                                         *
      *                                                                         *
      **************************************************************************/
+    private adjustColorsForTheme;
     private isContained;
     private checkSoon;
     static ɵfac: i0.ɵɵFactoryDeclaration<ElderShellComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ElderShellComponent, "elder-shell, ebs-shell", never, { "sideNavToggleEnabled": "sideNavToggleEnabled"; "color": "color"; "menuColor": "menuColor"; "leftSideAutoFocus": "leftSideAutoFocus"; "rightSideAutoFocus": "rightSideAutoFocus"; }, {}, ["sideContentLeft", "sideContentRight", "centerContent"], never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ElderShellComponent, "elder-shell, ebs-shell", never, { "sideNavToggleEnabled": "sideNavToggleEnabled"; "leftSideAutoFocus": "leftSideAutoFocus"; "rightSideAutoFocus": "rightSideAutoFocus"; "color": "color"; "menuColor": "menuColor"; }, {}, ["sideContentLeft", "sideContentRight", "centerContent"], never, false>;
 }

package/lib/components/theme/elder-theme-applier.directive.d.ts

@@ -0,0 +1,36 @@
+import { OnDestroy, OnInit, Renderer2 } from '@angular/core';
+import { ElderThemeService } from './elder-theme.service';
+import * as i0 from "@angular/core";
+export declare class ElderThemeApplierDirective implements OnInit, OnDestroy {
+    private readonly themeService;
+    private readonly renderer;
+    /***************************************************************************
+     *                                                                         *
+     * Fields                                                                  *
+     *                                                                         *
+     **************************************************************************/
+    private readonly logger;
+    private activeThemeCss;
+    private readonly destroy$;
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor(themeService: ElderThemeService, renderer: Renderer2);
+    /***************************************************************************
+     *                                                                         *
+     * Life Cycle                                                              *
+     *                                                                         *
+     **************************************************************************/
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    /***************************************************************************
+     *                                                                         *
+     * Private methods                                                         *
+     *                                                                         *
+     **************************************************************************/
+    private activateTheme;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderThemeApplierDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ElderThemeApplierDirective, "[elderThemeApplier]", never, {}, {}, never, never, false>;
+}

package/lib/components/theme/elder-theme-preference.service.d.ts

@@ -0,0 +1,33 @@
+import { ElderThemeService } from './elder-theme.service';
+import { WebLocalStorage } from '@elderbyte/ngx-simple-webstorage';
+import * as i0 from "@angular/core";
+export declare class ElderThemePreferenceService {
+    private readonly themeService;
+    private readonly localStorage;
+    /***************************************************************************
+     *                                                                         *
+     * Fields                                                                  *
+     *                                                                         *
+     **************************************************************************/
+    private readonly THEME_PREFERENCE_KEY;
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor(themeService: ElderThemeService, localStorage: WebLocalStorage);
+    /***************************************************************************
+     *                                                                         *
+     * Public API                                                              *
+     *                                                                         *
+     **************************************************************************/
+    activateThemeAndSave(themeId: string): void;
+    /***************************************************************************
+     *                                                                         *
+     * Private methods                                                         *
+     *                                                                         *
+     **************************************************************************/
+    private guessInitialTheme;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderThemePreferenceService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ElderThemePreferenceService>;
+}

package/lib/components/theme/elder-theme-toggle/elder-theme-toggle.component.d.ts

@@ -0,0 +1,37 @@
+import { ElderThemeService } from '../elder-theme.service';
+import { Observable } from 'rxjs';
+import { ElderThemePreferenceService } from '../elder-theme-preference.service';
+import * as i0 from "@angular/core";
+declare type ToggleTheme = 'default' | 'secondary';
+export declare class ElderThemeToggleComponent {
+    private readonly themeService;
+    private readonly themePreferenceService;
+    /***************************************************************************
+     *                                                                         *
+     * Fields                                                                  *
+     *                                                                         *
+     **************************************************************************/
+    private readonly logger;
+    readonly activeToggleTheme$: Observable<ToggleTheme>;
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor(themeService: ElderThemeService, themePreferenceService: ElderThemePreferenceService);
+    /***************************************************************************
+     *                                                                         *
+     * Public API                                                              *
+     *                                                                         *
+     **************************************************************************/
+    onToggle(tggl: boolean): void;
+    /***************************************************************************
+     *                                                                         *
+     * Private methods                                                         *
+     *                                                                         *
+     **************************************************************************/
+    private decideToggleTheme;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderThemeToggleComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ElderThemeToggleComponent, "elder-theme-toggle", never, {}, {}, never, never, false>;
+}
+export {};

package/lib/components/theme/elder-theme.directive.d.ts

@@ -0,0 +1,38 @@
+import { OnDestroy, OnInit } from '@angular/core';
+import { ElderThemeService } from './elder-theme.service';
+import { MatToolbar } from '@angular/material/toolbar';
+import * as i0 from "@angular/core";
+/**
+ * Applies material theme palettes to material components.
+ */
+export declare class ElderThemeDirective implements OnInit, OnDestroy {
+    private readonly matToolbar;
+    private readonly themeService;
+    /***************************************************************************
+     *                                                                         *
+     * Fields                                                                  *
+     *                                                                         *
+     **************************************************************************/
+    private readonly destroy$;
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor(matToolbar: MatToolbar, themeService: ElderThemeService);
+    /***************************************************************************
+     *                                                                         *
+     * Life Cycle                                                              *
+     *                                                                         *
+     **************************************************************************/
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    /***************************************************************************
+     *                                                                         *
+     * Private methods                                                         *
+     *                                                                         *
+     **************************************************************************/
+    private applyTheme;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderThemeDirective, [{ optional: true; host: true; }, null]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ElderThemeDirective, "[elderTheme]", never, {}, {}, never, never, false>;
+}

package/lib/components/theme/elder-theme.module.d.ts

@@ -0,0 +1,22 @@
+import { ElderThemePreferenceService } from './elder-theme-preference.service';
+import * as i0 from "@angular/core";
+import * as i1 from "./elder-theme-applier.directive";
+import * as i2 from "./elder-theme-toggle/elder-theme-toggle.component";
+import * as i3 from "./elder-theme.directive";
+import * as i4 from "@angular/common";
+import * as i5 from "@angular/material/slide-toggle";
+import * as i6 from "@angular/material/icon";
+import * as i7 from "@angular/forms";
+export { ThemeSpec } from './theme-spec';
+export { KnownElderThemes } from './known-elder-themes';
+export { ElderThemeService } from './elder-theme.service';
+export { ElderThemePreferenceService } from './elder-theme-preference.service';
+export { ElderThemeApplierDirective } from './elder-theme-applier.directive';
+export { ElderThemeToggleComponent } from './elder-theme-toggle/elder-theme-toggle.component';
+export { ElderThemeDirective } from './elder-theme.directive';
+export declare function themeInit(thpref: ElderThemePreferenceService): () => void;
+export declare class ElderThemeModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderThemeModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ElderThemeModule, [typeof i1.ElderThemeApplierDirective, typeof i2.ElderThemeToggleComponent, typeof i3.ElderThemeDirective], [typeof i4.CommonModule, typeof i5.MatSlideToggleModule, typeof i6.MatIconModule, typeof i7.FormsModule], [typeof i1.ElderThemeApplierDirective, typeof i2.ElderThemeToggleComponent, typeof i3.ElderThemeDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<ElderThemeModule>;
+}

package/lib/components/theme/elder-theme.service.d.ts

@@ -0,0 +1,51 @@
+import { Observable } from 'rxjs';
+import { ThemeSpec } from './theme-spec';
+import * as i0 from "@angular/core";
+export declare class ElderThemeService {
+    /***************************************************************************
+     *                                                                         *
+     * Fields                                                                  *
+     *                                                                         *
+     **************************************************************************/
+    private readonly logger;
+    private readonly _activeTheme$;
+    private readonly _defaultTheme$;
+    private readonly _themes$;
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor();
+    /***************************************************************************
+     *                                                                         *
+     * Properties                                                              *
+     *                                                                         *
+     **************************************************************************/
+    get defaultTheme$(): Observable<ThemeSpec>;
+    get defaultThemeSnapshot(): ThemeSpec;
+    get themes$(): Observable<ThemeSpec[]>;
+    get themesSnapshot(): ThemeSpec[];
+    get activeThemeSnapshot(): ThemeSpec;
+    get activeTheme$(): Observable<ThemeSpec>;
+    /***************************************************************************
+     *                                                                         *
+     * Public API                                                              *
+     *                                                                         *
+     **************************************************************************/
+    activateTheme(themeId: string): void;
+    defaultTheme(themeId: string): void;
+    registerTheme(theme: ThemeSpec, markDefault?: boolean): void;
+    unregisterTheme(themeId: string): void;
+    clearThemes(): void;
+    /***************************************************************************
+     *                                                                         *
+     * Private methods                                                         *
+     *                                                                         *
+     **************************************************************************/
+    private findTheme;
+    private modifyThemes;
+    private cleanUpDefaultTheme;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderThemeService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ElderThemeService>;
+}

package/lib/components/theme/known-elder-themes.d.ts

@@ -0,0 +1,5 @@
+import { ThemeSpec } from './theme-spec';
+export declare class KnownElderThemes {
+    static ELDER_LIGHT: ThemeSpec;
+    static ELDER_DARK: ThemeSpec;
+}

package/lib/components/theme/public_api.d.ts

@@ -0,0 +1 @@
+export * from './elder-theme.module';

package/lib/components/theme/theme-spec.d.ts

@@ -0,0 +1,18 @@
+import { ThemePalette } from '@angular/material/core';
+export declare class ThemeSpec {
+    readonly id: string;
+    readonly name: string;
+    readonly cssClass: string;
+    readonly dark: boolean;
+    /**
+     * Hero Background is a background color which should
+     * highlight the app theme. Usually its the primary palette.
+     */
+    readonly heroBackground: ThemePalette;
+    /**
+     * Hero Icon is the color of icons which are displayed on
+     * top of hero backgrounds. It should look well on it.
+     */
+    readonly heroIconColor: ThemePalette;
+    constructor(id: string, name: string, cssClass: string, dark: boolean, heroBackground?: ThemePalette, heroIconColor?: ThemePalette);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elderbyte/ngx-starter",
-  "version": "14.1.1",
+  "version": "14.2.2",
   "peerDependencies": {
     "@angular/common": "^14.0.1",
     "@angular/core": "^14.0.1",

package/theming/_elder-scrollbar-theme.scss

@@ -10,7 +10,7 @@
 
   /* width */
   ::-webkit-scrollbar {
-    width: 10px;
+    width: 6px;
   }
 
   /* Track */