@yuuvis/client-framework 2.10.2 → 2.11.0

package/autocomplete/lib/autocomplete.component.d.ts

@@ -45,13 +45,13 @@ export declare class AutocompleteComponent extends AbstractMatFormField<Autocomp
      * list item has been selected (usually every key stroke is changing the form controls value)
      */
     forceSelection: import("@angular/core").InputSignal<boolean>;
-    _acValues: import("@angular/core").WritableSignal<AutocompleteItem[]>;
-    autocompleteValues: import("@angular/core").InputSignal<AutocompleteItem[]>;
+    _acValues: import("@angular/core").WritableSignal<AutocompleteItem<unknown>[]>;
+    autocompleteValues: import("@angular/core").InputSignal<AutocompleteItem<unknown>[]>;
     autocompleteFnc: import("@angular/core").OutputEmitterRef<string>;
     acBlur: import("@angular/core").OutputEmitterRef<void>;
     chipsInputDisabled: import("@angular/core").Signal<boolean | null>;
-    chipsControl: FormControl<AutocompleteItem[] | null>;
-    inputControl: FormControl<string | AutocompleteItem>;
+    chipsControl: FormControl<AutocompleteItem<unknown>[] | null>;
+    inputControl: FormControl<string | AutocompleteItem<unknown>>;
     ngControl: import("@angular/forms").NgControl | null;
     displayFn(i: AutocompleteItem): string;
     acOptionSelected(event: MatAutocompleteSelectedEvent): void;

package/autocomplete/lib/autocomplete.interface.d.ts

@@ -1,4 +1,4 @@
-export interface AutocompleteItem {
+export interface AutocompleteItem<T = unknown> {
     label: string;
-    value: unknown;
+    value: T;
 }

package/common/lib/services/index.d.ts

@@ -1,3 +1,4 @@
 export * from './layout-settings/layout-settings.interface';
 export * from './layout-settings/layout-settings.service';
 export * from './form-translate/form-translate.service';
+export * from './theme';

package/common/lib/services/layout-settings/layout-settings.service.d.ts

@@ -9,9 +9,21 @@ import * as i0 from "@angular/core";
 export declare class LayoutSettingsService {
     #private;
     DEFAULT_SPLIT_VIEW_GUTTER_SIZE: number;
+    /**
+     * @deprecated Use `ThemeService.mode` instead.
+     */
     themeMode: import("@angular/core").WritableSignal<LayoutMode>;
+    /**
+     * @deprecated Use `ThemeService.mode` instead.
+     */
     mode: import("@angular/core").Signal<LayoutMode>;
+    /**
+     * @deprecated Theme initialization is now handled by `ThemeService` internally.
+     */
     init(): void;
+    /**
+     * @deprecated Use `ThemeService.toggleTheme()` instead.
+     */
     setMode(mode: LayoutMode): void;
     saveSettings(key: string, settings: unknown): boolean;
     getSettings(key: string): unknown | undefined;
@@ -19,6 +31,9 @@ export declare class LayoutSettingsService {
      * Clears all layout settings.
      */
     clearSettings(): void;
+    /**
+     * @deprecated Use `ThemeService.toggleTheme()` instead.
+     */
     applyLayoutMode(mode?: LayoutMode): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<LayoutSettingsService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<LayoutSettingsService>;

package/common/lib/services/theme/index.d.ts

@@ -0,0 +1,3 @@
+export * from './theme.service';
+export * from './theme.provider';
+export * from './theme.models';

package/common/lib/services/theme/theme.models.d.ts

@@ -0,0 +1,16 @@
+export type Mode = 'light' | 'dark';
+export interface CustomThemeSettings {
+    key: string;
+    label: string;
+    description: string;
+    hasDarkTheme?: boolean;
+    hasLightTheme?: boolean;
+}
+export declare enum ThemeStorageKeys {
+    THEME_MODE = "yuv.theme:app.theme.mode",
+    CUSTOM_THEME = "yuv.theme:app.theme.custom"
+}
+export declare const DEFAULT_THEME_KEY = "yuv-default";
+export declare const DEFAULT_THEME: CustomThemeSettings;
+export declare const HIGH_CONTRAST_THEME_KEY = "yuv-high-contrast";
+export declare const HIGH_CONTRAST_THEME: CustomThemeSettings;

package/common/lib/services/theme/theme.provider.d.ts

@@ -0,0 +1,4 @@
+import { EnvironmentProviders, InjectionToken } from '@angular/core';
+import { CustomThemeSettings } from './theme.models';
+export declare const YUV_CUSTOM_THEME: InjectionToken<CustomThemeSettings[]>;
+export declare const provideYuvCustomTheme: (customTheme: CustomThemeSettings[]) => EnvironmentProviders;

package/common/lib/services/theme/theme.service.d.ts

@@ -0,0 +1,16 @@
+import { CustomThemeSettings, Mode } from './theme.models';
+import * as i0 from "@angular/core";
+export declare class ThemeService {
+    #private;
+    mode: import("@angular/core").Signal<Mode>;
+    customTheme: import("@angular/core").WritableSignal<CustomThemeSettings>;
+    customThemes: import("@angular/core").Signal<CustomThemeSettings[]>;
+    currentTheme: import("@angular/core").Signal<string>;
+    disableMode: import("@angular/core").Signal<boolean>;
+    constructor();
+    setMode(mode: Mode): void;
+    setCustomTheme(key: string): void;
+    toggleTheme(theme: Mode): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ThemeService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ThemeService>;
+}

package/fesm2022/yuuvis-client-framework-common.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, ChangeDetectionStrategy, Component, inject, ElementRef, Input, Directive, computed, output, signal, EnvironmentInjector, ViewContainerRef, effect, EventEmitter, HostListener, Output, NgZone, contentChildren, Injectable, HostBinding, forwardRef, NgModule } from '@angular/core';
+import { input, ChangeDetectionStrategy, Component, inject, ElementRef, Input, Directive, computed, output, signal, EnvironmentInjector, ViewContainerRef, effect, EventEmitter, HostListener, Output, NgZone, contentChildren, Injectable, HostBinding, forwardRef, NgModule, InjectionToken, makeEnvironmentProviders, RendererFactory2 } from '@angular/core';
 import { CommonModule, DOCUMENT } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
 import * as i2 from '@angular/material/dialog';
@@ -7,14 +7,15 @@ import { MatDialogActions, MatDialogTitle, MatDialogContent, MAT_DIALOG_DATA, Ma
 import * as i1 from '@ngx-translate/core';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { YmtButtonDirective, YmtIconButtonDirective } from '@yuuvis/material';
-import { TranslateModule as TranslateModule$1, RetentionService, LocaleDatePipe } from '@yuuvis/client-core';
+import { TranslateModule as TranslateModule$1, AppCacheService, RetentionService, LocaleDatePipe } from '@yuuvis/client-core';
 import { MatProgressSpinner } from '@angular/material/progress-spinner';
 import * as i1$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { Subject, fromEvent, merge, timer, of } from 'rxjs';
+import { Subject, fromEvent, merge, timer, of, forkJoin, map as map$1 } from 'rxjs';
 import { debounceTime, tap, filter, switchMap, map, takeUntil } from 'rxjs/operators';
 import { NG_VALUE_ACCESSOR, NgControl, FormControlDirective, FormControlName, NgModel } from '@angular/forms';
+import { marker } from '@colsen1991/ngx-translate-extract-marker';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 
 class DialogComponent {
@@ -1060,18 +1061,36 @@ function getFirstFocusableChild(element) {
 class LayoutSettingsService {
     constructor() {
         this.#STORAGE_PREFIX = 'yuv.layout:';
+        /**
+         * @deprecated Theme storage is now handled by `ThemeService`.
+         */
         this.#MODE_STORAGE_KEY = 'app.layout.mode';
         this.DEFAULT_SPLIT_VIEW_GUTTER_SIZE = 16;
+        /**
+         * @deprecated Use `ThemeService.mode` instead.
+         */
         this.themeMode = signal('system');
+        /**
+         * @deprecated Use `ThemeService.mode` instead.
+         */
         this.mode = this.themeMode.asReadonly();
     }
     #STORAGE_PREFIX;
+    /**
+     * @deprecated Theme storage is now handled by `ThemeService`.
+     */
     #MODE_STORAGE_KEY;
+    /**
+     * @deprecated Theme initialization is now handled by `ThemeService` internally.
+     */
     init() {
         // set configured mode
         const modeSettings = this.getSettings(this.#MODE_STORAGE_KEY);
         this.applyLayoutMode(modeSettings?.mode || undefined);
     }
+    /**
+     * @deprecated Use `ThemeService.toggleTheme()` instead.
+     */
     setMode(mode) {
         this.saveSettings(this.#MODE_STORAGE_KEY, { mode });
     }
@@ -1106,6 +1125,9 @@ class LayoutSettingsService {
             }
         });
     }
+    /**
+     * @deprecated Use `ThemeService.toggleTheme()` instead.
+     */
     applyLayoutMode(mode) {
         const body = document.getElementsByTagName('body')[0];
         body.style.colorScheme = mode === 'dark' || mode === 'light' ? mode : 'inherit';
@@ -1189,6 +1211,193 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 }]
         }] });
 
+var ThemeStorageKeys;
+(function (ThemeStorageKeys) {
+    ThemeStorageKeys["THEME_MODE"] = "yuv.theme:app.theme.mode";
+    ThemeStorageKeys["CUSTOM_THEME"] = "yuv.theme:app.theme.custom";
+})(ThemeStorageKeys || (ThemeStorageKeys = {}));
+const DEFAULT_THEME_KEY = 'yuv-default';
+const DEFAULT_THEME = {
+    key: DEFAULT_THEME_KEY,
+    label: 'yuv.theme.default.label',
+    description: 'yuv.theme.default.description',
+    hasLightTheme: true,
+    hasDarkTheme: true
+};
+const HIGH_CONTRAST_THEME_KEY = 'yuv-high-contrast';
+const HIGH_CONTRAST_THEME = {
+    key: HIGH_CONTRAST_THEME_KEY,
+    label: 'yuv.theme.highContrast.label',
+    description: 'yuv.theme.highContrast.description',
+    hasLightTheme: true,
+    hasDarkTheme: true
+};
+
+const YUV_CUSTOM_THEME = new InjectionToken('CUSTOM_THEME', { factory: () => [HIGH_CONTRAST_THEME] });
+const provideYuvCustomTheme = (customTheme) => makeEnvironmentProviders([{ provide: YUV_CUSTOM_THEME, useValue: [HIGH_CONTRAST_THEME, ...customTheme] }]);
+
+class ThemeService {
+    #rendererFactory;
+    #customThemesToken;
+    #document;
+    #storage;
+    #MODE_STORAGE_KEY;
+    #CUSTOM_THEME_STORAGE_KEY;
+    #renderer;
+    #mode;
+    #currentTheme;
+    #disableMode;
+    // Effect to apply classes and save to localStorage
+    #setThemeModeEffect;
+    constructor() {
+        this.#rendererFactory = inject(RendererFactory2);
+        this.#customThemesToken = inject(YUV_CUSTOM_THEME, { optional: true });
+        this.#document = inject(DOCUMENT);
+        this.#storage = inject(AppCacheService);
+        this.#MODE_STORAGE_KEY = ThemeStorageKeys.THEME_MODE;
+        this.#CUSTOM_THEME_STORAGE_KEY = ThemeStorageKeys.CUSTOM_THEME;
+        this.#renderer = this.#rendererFactory.createRenderer(null, null);
+        this.#mode = signal('light');
+        this.mode = this.#mode.asReadonly();
+        this.customTheme = signal(DEFAULT_THEME);
+        this.customThemes = computed(() => {
+            const customThemesToken = this.#customThemesToken || [];
+            return customThemesToken.map((theme) => {
+                const { key, label, description, hasLightTheme, hasDarkTheme } = theme;
+                return {
+                    key,
+                    label,
+                    description,
+                    hasLightTheme: hasLightTheme ?? true,
+                    hasDarkTheme: hasDarkTheme ?? false
+                };
+            });
+        });
+        this.#currentTheme = signal(DEFAULT_THEME_KEY);
+        this.currentTheme = this.#currentTheme.asReadonly();
+        this.#disableMode = signal(false);
+        this.disableMode = this.#disableMode.asReadonly();
+        // Effect to apply classes and save to localStorage
+        this.#setThemeModeEffect = effect(() => {
+            const currentTheme = this.#mode();
+            const body = this.#document.getElementsByTagName('body')[0];
+            this.setMode(currentTheme);
+            // Theme class
+            if (currentTheme === 'dark') {
+                this.#renderer.setAttribute(body, 'style', 'color-scheme: dark');
+            }
+            else if (currentTheme === 'light') {
+                this.#renderer.setAttribute(body, 'style', 'color-scheme: light');
+            }
+            else {
+                this.#renderer.removeAttribute(body, 'style');
+            }
+        });
+        this.#initializeModes();
+    }
+    #saveSettings(key, settings) {
+        if (typeof settings === 'object') {
+            this.#storage.setItem(key, JSON.stringify(settings)).subscribe();
+            return true;
+        }
+        else
+            return false;
+    }
+    #deleteSettings(key) {
+        this.#storage.removeItem(key).subscribe();
+        return true;
+    }
+    #checkPrefersContrast() {
+        const prefersHighContrast = window.matchMedia('(prefers-contrast: more)').matches;
+    }
+    #initializeModes() {
+        // Theme initialization
+        forkJoin([this.#storage.getItem(this.#MODE_STORAGE_KEY), this.#storage.getItem(this.#CUSTOM_THEME_STORAGE_KEY)])
+            .pipe(map$1(([savedTheme, savedCustomTheme]) => {
+            if (savedTheme) {
+                try {
+                    this.#mode.set(JSON.parse(savedTheme).mode);
+                }
+                catch (error) {
+                    this.#mode.set(this.#mode());
+                }
+            }
+            else {
+                const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+                this.#mode.set(prefersDark ? 'dark' : 'light');
+            }
+            // Contrast initialization
+            this.#checkPrefersContrast();
+            // Custom Theme initialization
+            if (savedCustomTheme) {
+                try {
+                    const customThemeKey = JSON.parse(savedCustomTheme).customTheme;
+                    this.setCustomTheme(customThemeKey);
+                }
+                catch (error) {
+                    // ignore
+                }
+            }
+        }))
+            .subscribe();
+    }
+    setMode(mode) {
+        this.#saveSettings(this.#MODE_STORAGE_KEY, { mode });
+    }
+    setCustomTheme(key) {
+        // Reset contrast to system on custom theme change
+        const previousTheme = this.customTheme();
+        const body = this.#document.getElementsByTagName('body')[0];
+        previousTheme && previousTheme.key && this.#renderer.removeClass(body, previousTheme.key);
+        const selectedTheme = this.customThemes().find((theme) => theme.key === key);
+        if (selectedTheme) {
+            this.customTheme.set(selectedTheme);
+            this.#currentTheme.set(selectedTheme.key);
+            selectedTheme.key && this.#renderer.addClass(body, selectedTheme.key);
+            // Check if custom theme has light or dark mode
+            if ((selectedTheme.hasDarkTheme && selectedTheme.hasLightTheme) || (!selectedTheme.hasDarkTheme && !selectedTheme.hasLightTheme)) {
+                // If both, do nothing further with this (enable group)
+                this.#disableMode.set(false);
+            }
+            else {
+                // Else disable mode button group and set the corresponding mode active
+                if (selectedTheme.hasDarkTheme) {
+                    this.#mode.set('dark');
+                }
+                else if (selectedTheme.hasLightTheme) {
+                    this.#mode.set('light');
+                }
+                this.#disableMode.set(true);
+            }
+            this.#saveSettings(this.#CUSTOM_THEME_STORAGE_KEY, { customTheme: key });
+        }
+        else {
+            if (key === DEFAULT_THEME_KEY) {
+                this.#disableMode.set(false);
+                this.#renderer.removeClass(body, HIGH_CONTRAST_THEME_KEY);
+                this.#deleteSettings(this.#CUSTOM_THEME_STORAGE_KEY);
+            }
+            // Default theme or no theme found
+        }
+    }
+    toggleTheme(theme) {
+        this.#mode.set(theme);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ThemeService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ThemeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+marker('yuv.theme.default.label');
+marker('yuv.theme.default.description');
+marker('yuv.theme.highContrast.label');
+marker('yuv.theme.highContrast.description');
+
 // eslint-disable-next-line @angular-eslint/component-class-suffix
 class AbstractMatFormField {
     constructor() {
@@ -1375,5 +1584,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractMatFormField, AutofocusChildDirective, AutofocusDelayedDirective, BusyOverlayComponent, BusyOverlayDirective, ClickDoubleDirective, ConfirmComponent, ConfirmService, ContainerSizeDirective, DialogComponent, DialogSize, DragScrollDirective, DragSelectDirective, DragSelectItemDirective, FileDropZoneDirective, FocusWithinDirective, FormTranslateService, HaloFocusComponent, LayoutSettingsService, LightDismissDirective, LongPressDirective, NoopValueAccessorDirective, RetentionBadgeComponent, YuvCommonModule, getFirstFocusableChild, getFocusableChildren, injectNgControl };
+export { AbstractMatFormField, AutofocusChildDirective, AutofocusDelayedDirective, BusyOverlayComponent, BusyOverlayDirective, ClickDoubleDirective, ConfirmComponent, ConfirmService, ContainerSizeDirective, DEFAULT_THEME, DEFAULT_THEME_KEY, DialogComponent, DialogSize, DragScrollDirective, DragSelectDirective, DragSelectItemDirective, FileDropZoneDirective, FocusWithinDirective, FormTranslateService, HIGH_CONTRAST_THEME, HIGH_CONTRAST_THEME_KEY, HaloFocusComponent, LayoutSettingsService, LightDismissDirective, LongPressDirective, NoopValueAccessorDirective, RetentionBadgeComponent, ThemeService, ThemeStorageKeys, YUV_CUSTOM_THEME, YuvCommonModule, getFirstFocusableChild, getFocusableChildren, injectNgControl, provideYuvCustomTheme };
 //# sourceMappingURL=yuuvis-client-framework-common.mjs.map