@truenas/ui-components 0.1.22 → 0.1.23

package/fesm2022/truenas-ui-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, ChangeDetectionStrategy, Component, inject, Injectable, viewChild, signal, effect, computed, ViewEncapsulation, Directive, contentChildren, output, forwardRef, ElementRef, ViewContainerRef, contentChild, ChangeDetectorRef, HostListener, TemplateRef, IterableDiffers, Pipe, model, afterNextRender, PLATFORM_ID } from '@angular/core';
+import { input, ChangeDetectionStrategy, Component, inject, Injectable, viewChild, signal, effect, computed, ViewEncapsulation, Directive, contentChildren, output, forwardRef, ElementRef, ViewContainerRef, contentChild, ChangeDetectorRef, HostListener, TemplateRef, IterableDiffers, Pipe, model, afterNextRender, PLATFORM_ID, DestroyRef } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common';
 import { mdiCheckCircle, mdiAlertCircle, mdiAlert, mdiInformation, mdiDotsVertical, mdiClose, mdiFolderOpen, mdiLock, mdiLoading, mdiFolderPlus, mdiFolderNetwork, mdiHarddisk, mdiDatabase, mdiFile, mdiFolder } from '@mdi/js';
@@ -9643,6 +9643,10 @@ var TnTheme;
  * Default theme used when no theme is set
  */
 const DEFAULT_THEME = TnTheme.Dark;
+/**
+ * Light theme used when OS preference is light
+ */
+const LIGHT_THEME = TnTheme.Blue;
 /**
  * localStorage key for storing the current theme name
  */
@@ -9711,7 +9715,8 @@ const THEME_MAP = new Map(TN_THEME_DEFINITIONS.map((theme) => [theme.name, theme
  *
  * Features:
  * - Signal-based reactive theme state
- * - LocalStorage persistence (key: 'tn-theme')
+ * - OS color scheme detection (prefers-color-scheme)
+ * - LocalStorage persistence for explicit user choices (key: 'tn-theme')
  * - Automatic CSS class application to document root
  * - SSR-safe (checks for browser platform)
  *
@@ -9731,9 +9736,12 @@ const THEME_MAP = new Map(TN_THEME_DEFINITIONS.map((theme) => [theme.name, theme
  *     // Get current theme (signal)
  *     const currentTheme = this.themeService.currentTheme();
  *
- *     // Set theme using enum (recommended)
+ *     // Set theme using enum (recommended) — persists to localStorage
  *     this.themeService.setTheme(TnTheme.Blue);
  *
+ *     // Clear user preference and follow OS theme
+ *     this.themeService.clearPreference();
+ *
  *     // React to theme changes
  *     effect(() => {
  *       console.log('Theme changed to:', this.themeService.currentTheme()?.label);
@@ -9745,10 +9753,28 @@ const THEME_MAP = new Map(TN_THEME_DEFINITIONS.map((theme) => [theme.name, theme
 class TnThemeService {
     platformId = inject(PLATFORM_ID);
     isBrowser = isPlatformBrowser(this.platformId);
+    destroyRef = inject(DestroyRef);
     /**
      * Internal signal holding the current theme enum value
      */
     currentThemeSignal = signal(DEFAULT_THEME, ...(ngDevMode ? [{ debugName: "currentThemeSignal" }] : []));
+    /**
+     * Whether the user has explicitly selected a theme (vs OS-detected default).
+     * When true, theme is persisted to localStorage and OS changes are ignored.
+     */
+    userSelected = signal(false, ...(ngDevMode ? [{ debugName: "userSelected" }] : []));
+    /**
+     * Reference to the prefers-color-scheme media query for cleanup
+     */
+    colorSchemeQuery = null;
+    /**
+     * Bound listener reference for cleanup
+     */
+    colorSchemeListener = (event) => {
+        if (!this.userSelected()) {
+            this.currentThemeSignal.set(event.matches ? DEFAULT_THEME : LIGHT_THEME);
+        }
+    };
     /**
      * Computed signal that returns the full theme definition for the current theme
      */
@@ -9762,12 +9788,16 @@ class TnThemeService {
     currentThemeClass = computed(() => {
         return this.currentTheme()?.className ?? TnTheme.Dark;
     }, ...(ngDevMode ? [{ debugName: "currentThemeClass" }] : []));
+    /**
+     * Whether the current theme is based on OS preference (no explicit user choice)
+     */
+    isUsingSystemTheme = computed(() => !this.userSelected(), ...(ngDevMode ? [{ debugName: "isUsingSystemTheme" }] : []));
     /**
      * All available theme definitions in the library (readonly array)
      */
     availableThemes = TN_THEME_DEFINITIONS;
     constructor() {
-        // Initialize theme from localStorage or default
+        // Initialize theme from localStorage or OS preference
         this.initializeTheme();
         // Effect to apply theme CSS class to document root whenever theme changes
         effect(() => {
@@ -9775,9 +9805,9 @@ class TnThemeService {
                 this.applyThemeToDOM(this.currentThemeClass());
             }
         });
-        // Effect to persist theme to localStorage whenever it changes
+        // Effect to persist theme to localStorage only for explicit user choices
         effect(() => {
-            if (this.isBrowser) {
+            if (this.isBrowser && this.userSelected()) {
                 const theme = this.currentTheme();
                 if (theme) {
                     this.persistThemeToStorage(theme);
@@ -9787,7 +9817,8 @@ class TnThemeService {
     }
     /**
      * Set the current theme.
-     * Updates the signal, which triggers effects to apply CSS and save to localStorage.
+     * Marks this as an explicit user choice, persists to localStorage,
+     * and stops following OS color scheme changes.
      *
      * @param theme - The theme to set (use TnTheme enum)
      * @returns true if theme was found and set, false otherwise
@@ -9800,6 +9831,7 @@ class TnThemeService {
     setTheme(theme) {
         const themeDefinition = THEME_MAP.get(theme);
         if (themeDefinition) {
+            this.userSelected.set(true);
             this.currentThemeSignal.set(theme);
             return true;
         }
@@ -9813,10 +9845,27 @@ class TnThemeService {
         return this.currentThemeSignal();
     }
     /**
-     * Reset theme to default
+     * Reset theme to default by clearing user preference and reverting to OS detection.
      */
     resetToDefault() {
-        this.setTheme(DEFAULT_THEME);
+        this.clearPreference();
+    }
+    /**
+     * Clear user preference and revert to OS-based theme detection.
+     * Removes the stored theme from localStorage and follows the OS color scheme.
+     */
+    clearPreference() {
+        if (this.isBrowser) {
+            try {
+                localStorage.removeItem(THEME_STORAGE_KEY);
+            }
+            catch (error) {
+                console.error('[TnThemeService] Error removing from localStorage:', error);
+            }
+        }
+        this.userSelected.set(false);
+        this.applySystemTheme();
+        this.listenForColorSchemeChanges();
     }
     /**
      * Check if a theme exists
@@ -9825,7 +9874,7 @@ class TnThemeService {
         return THEME_MAP.has(theme);
     }
     /**
-     * Initialize theme from localStorage or use default
+     * Initialize theme from localStorage or OS color scheme preference
      */
     initializeTheme() {
         if (!this.isBrowser) {
@@ -9834,18 +9883,54 @@ class TnThemeService {
         try {
             const storedTheme = localStorage.getItem(THEME_STORAGE_KEY);
             if (storedTheme && this.hasTheme(storedTheme)) {
+                this.userSelected.set(true);
                 this.currentThemeSignal.set(storedTheme);
             }
             else {
-                // If no valid stored theme, use default
-                this.currentThemeSignal.set(DEFAULT_THEME);
+                // No valid stored theme — detect from OS preference
+                this.applySystemTheme();
+                this.listenForColorSchemeChanges();
             }
         }
         catch (error) {
             console.error('[TnThemeService] Error reading from localStorage:', error);
+            this.applySystemTheme();
+            this.listenForColorSchemeChanges();
+        }
+    }
+    /**
+     * Detect OS color scheme preference and apply corresponding theme
+     */
+    applySystemTheme() {
+        if (!this.isBrowser) {
+            return;
+        }
+        try {
+            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+            this.currentThemeSignal.set(prefersDark ? DEFAULT_THEME : LIGHT_THEME);
+        }
+        catch {
             this.currentThemeSignal.set(DEFAULT_THEME);
         }
     }
+    /**
+     * Listen for OS color scheme changes and apply them when no user preference is set
+     */
+    listenForColorSchemeChanges() {
+        if (!this.isBrowser || this.colorSchemeQuery) {
+            return;
+        }
+        try {
+            this.colorSchemeQuery = window.matchMedia('(prefers-color-scheme: dark)');
+            this.colorSchemeQuery.addEventListener('change', this.colorSchemeListener);
+            this.destroyRef.onDestroy(() => {
+                this.colorSchemeQuery?.removeEventListener('change', this.colorSchemeListener);
+            });
+        }
+        catch {
+            // matchMedia not supported — fall through silently
+        }
+    }
     /**
      * Apply theme CSS class to document root.
      * Removes all other theme classes first to avoid conflicts.
@@ -9904,5 +9989,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CommonShortcuts, DEFAULT_THEME, DiskIconComponent, DiskType, FileSizePipe, InputType, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, StripMntPrefixPipe, THEME_MAP, THEME_STORAGE_KEY, TN_THEME_DEFINITIONS, TnBannerActionDirective, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnCalendarComponent, TnCalendarHeaderComponent, TnCardComponent, TnCellDefDirective, TnCheckboxComponent, TnChipComponent, TnConfirmDialogComponent, TnDateInputComponent, TnDateRangeInputComponent, TnDialog, TnDialogHarness, TnDialogShellComponent, TnDialogTesting, TnDividerComponent, TnDividerDirective, TnEmptyComponent, TnEmptyHarness, TnExpansionPanelComponent, TnFilePickerComponent, TnFilePickerPopupComponent, TnFormFieldComponent, TnHeaderCellDefDirective, TnIconButtonComponent, TnIconButtonHarness, TnIconComponent, TnIconHarness, TnIconRegistryService, TnIconTesting, TnInputComponent, TnInputDirective, TnInputHarness, TnKeyboardShortcutComponent, TnKeyboardShortcutService, TnListAvatarDirective, TnListComponent, TnListIconDirective, TnListItemComponent, TnListItemLineDirective, TnListItemPrimaryDirective, TnListItemSecondaryDirective, TnListItemTitleDirective, TnListItemTrailingDirective, TnListOptionComponent, TnListSubheaderComponent, TnMenuActivateHoverDirective, TnMenuComponent, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnSelectComponent, TnSelectHarness, TnSelectionListComponent, TnSidePanelActionDirective, TnSidePanelComponent, TnSidePanelHarness, TnSidePanelHeaderActionDirective, TnSlideToggleComponent, TnSliderComponent, TnSliderThumbDirective, TnSliderWithLabelDirective, TnSpinnerComponent, TnSpriteLoaderService, TnStepComponent, TnStepperComponent, TnTabComponent, TnTabHarness, TnTabPanelComponent, TnTabPanelHarness, TnTableColumnDirective, TnTableComponent, TnTabsComponent, TnTabsHarness, TnTheme, TnThemeService, TnTimeInputComponent, TnTooltipComponent, TnTooltipDirective, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeNodeComponent, TnTreeNodeOutletDirective, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, createLucideLibrary, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, libIconMarker, registerLucideIcons, setupLucideIntegration, tnIconMarker };
+export { CommonShortcuts, DEFAULT_THEME, DiskIconComponent, DiskType, FileSizePipe, InputType, LIGHT_THEME, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, StripMntPrefixPipe, THEME_MAP, THEME_STORAGE_KEY, TN_THEME_DEFINITIONS, TnBannerActionDirective, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnCalendarComponent, TnCalendarHeaderComponent, TnCardComponent, TnCellDefDirective, TnCheckboxComponent, TnChipComponent, TnConfirmDialogComponent, TnDateInputComponent, TnDateRangeInputComponent, TnDialog, TnDialogHarness, TnDialogShellComponent, TnDialogTesting, TnDividerComponent, TnDividerDirective, TnEmptyComponent, TnEmptyHarness, TnExpansionPanelComponent, TnFilePickerComponent, TnFilePickerPopupComponent, TnFormFieldComponent, TnHeaderCellDefDirective, TnIconButtonComponent, TnIconButtonHarness, TnIconComponent, TnIconHarness, TnIconRegistryService, TnIconTesting, TnInputComponent, TnInputDirective, TnInputHarness, TnKeyboardShortcutComponent, TnKeyboardShortcutService, TnListAvatarDirective, TnListComponent, TnListIconDirective, TnListItemComponent, TnListItemLineDirective, TnListItemPrimaryDirective, TnListItemSecondaryDirective, TnListItemTitleDirective, TnListItemTrailingDirective, TnListOptionComponent, TnListSubheaderComponent, TnMenuActivateHoverDirective, TnMenuComponent, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnSelectComponent, TnSelectHarness, TnSelectionListComponent, TnSidePanelActionDirective, TnSidePanelComponent, TnSidePanelHarness, TnSidePanelHeaderActionDirective, TnSlideToggleComponent, TnSliderComponent, TnSliderThumbDirective, TnSliderWithLabelDirective, TnSpinnerComponent, TnSpriteLoaderService, TnStepComponent, TnStepperComponent, TnTabComponent, TnTabHarness, TnTabPanelComponent, TnTabPanelHarness, TnTableColumnDirective, TnTableComponent, TnTabsComponent, TnTabsHarness, TnTheme, TnThemeService, TnTimeInputComponent, TnTooltipComponent, TnTooltipDirective, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeNodeComponent, TnTreeNodeOutletDirective, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, createLucideLibrary, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, libIconMarker, registerLucideIcons, setupLucideIntegration, tnIconMarker };
 //# sourceMappingURL=truenas-ui-components.mjs.map