@ecodev/natural 66.0.0 → 66.0.1

package/fesm2022/ecodev-natural.mjs

@@ -8,8 +8,8 @@ import * as i1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatButton, MatIconButton, MatFabButton } from '@angular/material/button';
-import { Observable, switchMap, take, BehaviorSubject, of, timer, tap, endWith, last, EMPTY, finalize, Subject, merge as merge$1, first as first$1, takeUntil as takeUntil$1, map as map$1, ReplaySubject, debounceTime, raceWith, mergeMap, shareReplay, catchError, forkJoin, combineLatest, from, filter as filter$1, startWith as startWith$1, asyncScheduler, throwError } from 'rxjs';
-import { takeUntilDestroyed, outputFromObservable } from '@angular/core/rxjs-interop';
+import { Observable, switchMap, take, BehaviorSubject, of, timer, tap, endWith, last, EMPTY, finalize, Subject, merge as merge$1, first as first$1, takeUntil as takeUntil$1, map as map$1, ReplaySubject, debounceTime, raceWith, mergeMap, shareReplay, catchError, forkJoin, combineLatest, from, fromEvent, filter as filter$1, startWith as startWith$1, asyncScheduler, throwError } from 'rxjs';
+import { takeUntilDestroyed, toSignal, outputFromObservable } from '@angular/core/rxjs-interop';
 import { filter, switchMap as switchMap$1, first, map, takeUntil, takeWhile, debounceTime as debounceTime$1, tap as tap$1, shareReplay as shareReplay$1, startWith, distinctUntilChanged, finalize as finalize$1, throttleTime } from 'rxjs/operators';
 import { mergeWith, defaultsDeep, pick, defaults, isEmpty, isEqual as isEqual$1 } from 'es-toolkit/compat';
 import { MatTableDataSource, MatTable, MatHeaderCellDef, MatHeaderRowDef, MatColumnDef, MatCellDef, MatRowDef, MatHeaderCell, MatCell, MatHeaderRow, MatRow } from '@angular/material/table';
@@ -5327,9 +5327,19 @@ class NaturalThemeService {
     storage = inject(LOCAL_STORAGE);
     platformId = inject(PLATFORM_ID);
     document = inject(DOCUMENT);
-    isDark = signal(false, ...(ngDevMode ? [{ debugName: "isDark" }] : []));
+    isDarkSystem = toSignal(isPlatformBrowser(this.platformId)
+        ? fromEvent(this.document.defaultView.matchMedia('(prefers-color-scheme: dark)'), 'change').pipe(startWith(this.document.defaultView.matchMedia('(prefers-color-scheme: dark)')), map$1(e => e.matches))
+        : of(false), { initialValue: false });
+    isDark = computed(() => {
+        return (this.colorScheme() === ColorScheme.Dark || (this.colorScheme() === ColorScheme.Auto && this.isDarkSystem()));
+    }, ...(ngDevMode ? [{ debugName: "isDark" }] : []));
     theme = signal(this.allThemes[0], ...(ngDevMode ? [{ debugName: "theme" }] : []));
-    colorScheme = signal(ColorScheme.Light, ...(ngDevMode ? [{ debugName: "colorScheme" }] : []));
+    colorScheme = signal(ColorScheme.Auto, ...(ngDevMode ? [{ debugName: "colorScheme" }] : []));
+    constructor() {
+        effect(() => {
+            this.document.documentElement.setAttribute('data-is-dark', this.isDark() ? 'true' : 'false');
+        });
+    }
     /**
      * Set theme in memory, local storage and dom
      */
@@ -5339,18 +5349,11 @@ class NaturalThemeService {
         this.document.documentElement.setAttribute('data-theme', name);
     }
     /**
-     * Set color scheme in memory, local storage and dom and keep in sync isDark property
+     * Set dark/light/auto
      */
     setColorScheme(scheme, persistInStorage = true) {
         this.colorScheme.set(scheme); // memory
         this.document.documentElement.setAttribute('data-color-scheme', scheme); // dom
-        // If manual dark, or auto + dark system
-        const dark = scheme === ColorScheme.Dark ||
-            (scheme === ColorScheme.Auto &&
-                isPlatformBrowser(this.platformId) &&
-                !!this.document.defaultView?.matchMedia('(prefers-color-scheme: dark)').matches);
-        this.isDark.set(dark); // memory
-        this.document.documentElement.setAttribute('data-is-dark', dark ? 'true' : 'false'); // dom;
         if (persistInStorage) {
             this.storage.setItem('color-scheme', this.colorScheme()); // storage
         }
@@ -5363,7 +5366,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 const patterns = [
     /^(?<day>\d{1,2})\.(?<month>\d{1,2})\.(?<year>\d{4}|\d{2})$/,