@ecodev/natural 66.0.14 → 66.0.15

package/fesm2022/ecodev-natural.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, Component, Injectable, DestroyRef, HostListener, HostBinding, Directive, InjectionToken, ElementRef, viewChild, ViewEncapsulation, Injector, Input, input, PLATFORM_ID, signal, provideAppInitializer, DOCUMENT, computed, effect, output, Pipe, LOCALE_ID, contentChild, TemplateRef, EnvironmentInjector, createEnvironmentInjector, createComponent, runInInjectionContext, ChangeDetectionStrategy, linkedSignal, ErrorHandler, importProvidersFrom } from '@angular/core';
+import { inject, Component, Injectable, DestroyRef, HostListener, HostBinding, Directive, InjectionToken, ElementRef, viewChild, ViewEncapsulation, Injector, Input, input, PLATFORM_ID, signal, makeEnvironmentProviders, provideAppInitializer, DOCUMENT, computed, effect, output, Pipe, LOCALE_ID, contentChild, TemplateRef, EnvironmentInjector, createEnvironmentInjector, createComponent, runInInjectionContext, ChangeDetectionStrategy, linkedSignal, ErrorHandler, importProvidersFrom } from '@angular/core';
 import * as i1$1 from '@angular/forms';
 import { FormGroup, FormArray, Validators, UntypedFormGroup, UntypedFormArray, FormControl, FormsModule, ReactiveFormsModule, UntypedFormControl, NgControl, FormControlDirective, FormControlName } from '@angular/forms';
 import { NavigationStart, NavigationEnd, ActivatedRoute, Router, RouteConfigLoadStart, RouteConfigLoadEnd, PRIMARY_OUTLET, RouterLink, NavigationError, DefaultUrlSerializer, UrlTree } from '@angular/router';
@@ -196,17 +196,18 @@ function formatIsoDateTime(date) {
     const timezoneOffsetInMinutes = Math.round(date.getTimezoneOffset());
     const timezoneOffsetInHours = -Math.trunc(timezoneOffsetInMinutes / 60); // UTC minus local time
     const sign = timezoneOffsetInHours >= 0 ? '+' : '-';
-    const remainderMinutes = -(timezoneOffsetInMinutes % 60);
+    const remainderMinutes = -timezoneOffsetInMinutes % 60;
     // It's a bit unfortunate that we need to construct a new Date instance,
     // but we don't want the original Date instance to be modified
     const correctedDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds());
     correctedDate.setHours(date.getHours() + timezoneOffsetInHours);
+    correctedDate.setMinutes(date.getMinutes() + remainderMinutes);
     const iso = correctedDate
         .toISOString()
         .replace(/\.\d{3}Z/, '')
         .replace('Z', '');
     const hours = Math.abs(timezoneOffsetInHours).toString().padStart(2, '0');
-    const minutes = remainderMinutes.toString().padStart(2, '0');
+    const minutes = Math.abs(remainderMinutes).toString().padStart(2, '0');
     return iso + sign + hours + ':' + minutes;
 }
 /**
@@ -5329,8 +5330,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
         }] });
 
 const NATURAL_THEMES_CONFIG = new InjectionToken('Configuration for Natural Theme');
+/**
+ * If you are using themes, or color scheme, then you must provide themes at the application level.
+ *
+ * If there is a only one theme, you still need to provide a name for it (eg: "my-app"), even if
+ * it is not used in the SCSS.
+ */
 function provideThemes(config) {
-    return [
+    return makeEnvironmentProviders([
         {
             provide: NATURAL_THEMES_CONFIG,
             useValue: config,
@@ -5338,7 +5345,7 @@ function provideThemes(config) {
         provideAppInitializer(() => {
             inject(NaturalThemeService);
         }),
-    ];
+    ]);
 }
 var ColorScheme;
 (function (ColorScheme) {
@@ -5351,11 +5358,17 @@ const colorSchemeOptions = [
     { value: ColorScheme.Light, label: $localize `Thème clair`, icon: 'light_mode' },
     { value: ColorScheme.Dark, label: $localize `Thème sombre`, icon: 'dark_mode' },
 ];
+/**
+ * The source of truth is the DOM. And thus the index.html (or equivalent) must use vanilla JavaScript
+ * to restore `data-color-scheme` and `data-theme` attributes on the `<html>` element (eg: from
+ * local storage, or from DB).
+ */
 class NaturalThemeService {
     allThemes = inject(NATURAL_THEMES_CONFIG);
     storage = inject(LOCAL_STORAGE);
     platformId = inject(PLATFORM_ID);
     document = inject(DOCUMENT);
+    htmlElement = this.document.documentElement;
     isDarkSystem = toSignal(isPlatformBrowser(this.platformId)
         ? fromEvent(this.document.defaultView.matchMedia('(prefers-color-scheme: dark)'), 'change').pipe(startWith$1(this.document.defaultView.matchMedia('(prefers-color-scheme: dark)')), map$1(e => e.matches))
         : of(false), { initialValue: false });
@@ -5374,28 +5387,28 @@ class NaturalThemeService {
     colorScheme = this._colorScheme.asReadonly();
     constructor() {
         effect(() => {
-            this.document.documentElement.setAttribute('data-is-dark', this.isDark() ? 'true' : 'false');
+            this.htmlElement.setAttribute('data-is-dark', this.isDark() ? 'true' : 'false');
         });
         const storedScheme = this.storage.getItem('color-scheme');
         const isValidScheme = storedScheme && Object.values(ColorScheme).includes(storedScheme);
         this._colorScheme.set(isValidScheme ? storedScheme : ColorScheme.Auto);
     }
     /**
-     * Set theme in memory, local storage and dom
+     * Set theme in memory and dom
      */
     setTheme(theme) {
         if (!this.allThemes.includes(theme)) {
             throw new Error(`Expecting one of the configured themes: ${this.allThemes.map(t => `'${t}'`).join(', ')}. But got invalid: '${theme}'`);
         }
         this._theme.set(theme);
-        this.document.documentElement.setAttribute('data-theme', theme);
+        this.htmlElement.setAttribute('data-theme', theme);
     }
     /**
      * Set dark/light/auto
      */
     setColorScheme(scheme, persistInStorage = true) {
         this._colorScheme.set(scheme); // memory
-        this.document.documentElement.setAttribute('data-color-scheme', scheme); // dom
+        this.htmlElement.setAttribute('data-color-scheme', scheme); // dom
         if (persistInStorage) {
             this.storage.setItem('color-scheme', this.colorScheme()); // storage
         }