@ecodev/natural 66.0.13 → 66.0.15

package/README.md

@@ -4,7 +4,6 @@
 [![Total Downloads](https://img.shields.io/npm/dt/@ecodev/natural.svg)](https://www.npmjs.com/package/@ecodev/natural)
 [![Latest Stable Version](https://img.shields.io/npm/v/@ecodev/natural.svg)](https://www.npmjs.com/package/@ecodev/natural)
 [![License](https://img.shields.io/npm/l/@ecodev/natural.svg)](https://www.npmjs.com/package/@ecodev/natural)
-[![Join the chat at https://gitter.im/Ecodev/natural](https://badges.gitter.im/Ecodev/natural.svg)](https://gitter.im/Ecodev/natural)
 
 This project is a collection of Angular Material components and various utilities classes for Angular projects.
 

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) {
@@ -5346,11 +5353,22 @@ var ColorScheme;
     ColorScheme["Dark"] = "dark";
     ColorScheme["Auto"] = "auto";
 })(ColorScheme || (ColorScheme = {}));
+const colorSchemeOptions = [
+    { value: ColorScheme.Auto, label: $localize `Thème de l'appareil`, icon: 'routine' },
+    { 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 });
@@ -5369,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
         }
@@ -9393,7 +9411,7 @@ class NaturalFileComponent {
         return subject.asObservable();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: NaturalFileComponent, isStandalone: true, selector: "natural-file", inputs: { height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: false, transformFunction: null }, backgroundSize: { classPropertyName: "backgroundSize", publicName: "backgroundSize", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, uploader: { classPropertyName: "uploader", publicName: "uploader", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: false, isRequired: false, transformFunction: null }, formCtrl: { classPropertyName: "formCtrl", publicName: "formCtrl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { modelChange: "modelChange" }, host: { properties: { "style.height.px": "height()" } }, usesOnChanges: true, ngImport: i0, template: "<a\n    naturalFileDrop\n    matRipple\n    target=\"_blank\"\n    [selectable]=\"true\"\n    [accept]=\"accept()\"\n    [attr.href]=\"getDownloadLink()\"\n    [class.has-action]=\"!!action()\"\n    [class.suggest-upload]=\"!model && action() === 'upload'\"\n    [fileSelectionDisabled]=\"action() !== 'upload'\"\n    [matRippleDisabled]=\"!action()\"\n    [naturalBackgroundDensity]=\"imagePreview\"\n    [style.backgroundSize]=\"backgroundSize()\"\n    (fileChange)=\"upload($event)\"\n>\n    @if (filePreview) {\n        <div class=\"file-preview\" [style.font-size.px]=\"fontSize()\">\n            <mat-icon naturalIcon=\"attachment\" [size]=\"iconHeight()\" />\n            {{ filePreview | uppercase }}\n        </div>\n    }\n\n    <div class=\"action-overlay\" [style.font-size.px]=\"fontSize()\">\n        @if (action() === 'upload') {\n            <mat-icon naturalIcon=\"cloud_upload\" [size]=\"iconHeight()\" />\n        }\n        @if (action() === 'download') {\n            <mat-icon naturalIcon=\"get_app\" [size]=\"iconHeight()\" />\n        }\n        {{ action() | capitalize }}\n    </div>\n</a>\n", styles: [":host{display:flex;position:relative;flex-direction:row;border-color:var(--mat-sys-secondary-container);background-color:var(--mat-sys-secondary-container);overflow:hidden}:host>a{position:relative;flex:1;background-position:center;background-repeat:no-repeat;background-color:var(--mat-sys-surface-container-lowest)}:host>a.has-action{cursor:pointer}:host>a.has-action.suggest-upload .action-overlay{opacity:.66}:host>a.has-action:hover .action-overlay,:host>a.has-action.natural-file-over .action-overlay{opacity:1}:host .action-overlay,:host .file-preview{display:flex;position:absolute;inset:0;flex-direction:column;justify-content:center;align-items:center;font-size:36px;line-height:1.3em;text-align:center}:host a[naturalFileDrop]{border:1px dashed var(--mat-sys-secondary-container)}:host .action-overlay,:host .file-preview{background-color:var(--mat-sys-secondary-fixed);color:var(--mat-sys-on-secondary-fixed)}:host .action-overlay{opacity:0}:host .action-overlay>div{display:flex;position:absolute;inset:0;justify-content:center;align-items:center;opacity:0}\n"], dependencies: [{ kind: "directive", type: NaturalFileDropDirective, selector: ":not([naturalFileSelect])[naturalFileDrop]", outputs: ["fileOver"] }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "directive", type: NaturalBackgroundDensityDirective, selector: "[naturalBackgroundDensity]", inputs: ["naturalBackgroundDensity"] }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: NaturalCapitalizePipe, name: "capitalize" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: NaturalFileComponent, isStandalone: true, selector: "natural-file", inputs: { height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: false, transformFunction: null }, backgroundSize: { classPropertyName: "backgroundSize", publicName: "backgroundSize", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, uploader: { classPropertyName: "uploader", publicName: "uploader", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: false, isRequired: false, transformFunction: null }, formCtrl: { classPropertyName: "formCtrl", publicName: "formCtrl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { modelChange: "modelChange" }, host: { properties: { "style.height.px": "height()" } }, usesOnChanges: true, ngImport: i0, template: "<a\n    naturalFileDrop\n    matRipple\n    target=\"_blank\"\n    [selectable]=\"true\"\n    [accept]=\"accept()\"\n    [attr.href]=\"getDownloadLink()\"\n    [class.has-action]=\"!!action()\"\n    [class.suggest-upload]=\"!model && action() === 'upload'\"\n    [fileSelectionDisabled]=\"action() !== 'upload'\"\n    [matRippleDisabled]=\"!action()\"\n    [naturalBackgroundDensity]=\"imagePreview\"\n    [style.backgroundSize]=\"backgroundSize()\"\n    (fileChange)=\"upload($event)\"\n>\n    @if (filePreview) {\n        <div class=\"file-preview\" [style.font-size.px]=\"fontSize()\">\n            <mat-icon naturalIcon=\"attachment\" [size]=\"iconHeight()\" />\n            {{ filePreview | uppercase }}\n        </div>\n    }\n\n    <div class=\"action-overlay\" [style.font-size.px]=\"fontSize()\">\n        @if (action() === 'upload') {\n            <mat-icon naturalIcon=\"cloud_upload\" [size]=\"iconHeight()\" />\n        }\n        @if (action() === 'download') {\n            <mat-icon naturalIcon=\"get_app\" [size]=\"iconHeight()\" />\n        }\n        {{ action() | capitalize }}\n    </div>\n</a>\n", styles: [":host{display:flex;position:relative;flex-direction:row;border-color:var(--mat-sys-secondary-container);background-color:var(--mat-sys-secondary-container);overflow:hidden}:host>a{position:relative;flex:1;background-position:center;background-repeat:no-repeat;background-color:var(--mat-sys-surface-container-lowest)}:host>a.has-action{cursor:pointer}:host>a.has-action.suggest-upload .action-overlay{opacity:.66}:host>a.has-action:hover .action-overlay,:host>a.has-action.natural-file-over .action-overlay{opacity:1}:host .action-overlay,:host .file-preview{display:flex;position:absolute;inset:0;flex-direction:column;justify-content:center;align-items:center;font-size:36px;line-height:1.3em;text-align:center}:host .action-overlay{background-color:color-mix(in srgb,var(--mat-sys-primary-fixed) 85%,transparent);color:var(--mat-sys-on-primary-fixed)}:host .file-preview{background-color:color-mix(in srgb,var(--mat-sys-tertiary-fixed) 85%,transparent);color:var(--mat-sys-on-tertiary-fixed)}:host .action-overlay{opacity:0}:host .action-overlay>div{display:flex;position:absolute;inset:0;justify-content:center;align-items:center;opacity:0}\n"], dependencies: [{ kind: "directive", type: NaturalFileDropDirective, selector: ":not([naturalFileSelect])[naturalFileDrop]", outputs: ["fileOver"] }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "directive", type: NaturalBackgroundDensityDirective, selector: "[naturalBackgroundDensity]", inputs: ["naturalBackgroundDensity"] }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: NaturalCapitalizePipe, name: "capitalize" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalFileComponent, decorators: [{
             type: Component,
@@ -9407,7 +9425,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                         NaturalBackgroundDensityDirective,
                     ], host: {
                         '[style.height.px]': 'height()',
-                    }, template: "<a\n    naturalFileDrop\n    matRipple\n    target=\"_blank\"\n    [selectable]=\"true\"\n    [accept]=\"accept()\"\n    [attr.href]=\"getDownloadLink()\"\n    [class.has-action]=\"!!action()\"\n    [class.suggest-upload]=\"!model && action() === 'upload'\"\n    [fileSelectionDisabled]=\"action() !== 'upload'\"\n    [matRippleDisabled]=\"!action()\"\n    [naturalBackgroundDensity]=\"imagePreview\"\n    [style.backgroundSize]=\"backgroundSize()\"\n    (fileChange)=\"upload($event)\"\n>\n    @if (filePreview) {\n        <div class=\"file-preview\" [style.font-size.px]=\"fontSize()\">\n            <mat-icon naturalIcon=\"attachment\" [size]=\"iconHeight()\" />\n            {{ filePreview | uppercase }}\n        </div>\n    }\n\n    <div class=\"action-overlay\" [style.font-size.px]=\"fontSize()\">\n        @if (action() === 'upload') {\n            <mat-icon naturalIcon=\"cloud_upload\" [size]=\"iconHeight()\" />\n        }\n        @if (action() === 'download') {\n            <mat-icon naturalIcon=\"get_app\" [size]=\"iconHeight()\" />\n        }\n        {{ action() | capitalize }}\n    </div>\n</a>\n", styles: [":host{display:flex;position:relative;flex-direction:row;border-color:var(--mat-sys-secondary-container);background-color:var(--mat-sys-secondary-container);overflow:hidden}:host>a{position:relative;flex:1;background-position:center;background-repeat:no-repeat;background-color:var(--mat-sys-surface-container-lowest)}:host>a.has-action{cursor:pointer}:host>a.has-action.suggest-upload .action-overlay{opacity:.66}:host>a.has-action:hover .action-overlay,:host>a.has-action.natural-file-over .action-overlay{opacity:1}:host .action-overlay,:host .file-preview{display:flex;position:absolute;inset:0;flex-direction:column;justify-content:center;align-items:center;font-size:36px;line-height:1.3em;text-align:center}:host a[naturalFileDrop]{border:1px dashed var(--mat-sys-secondary-container)}:host .action-overlay,:host .file-preview{background-color:var(--mat-sys-secondary-fixed);color:var(--mat-sys-on-secondary-fixed)}:host .action-overlay{opacity:0}:host .action-overlay>div{display:flex;position:absolute;inset:0;justify-content:center;align-items:center;opacity:0}\n"] }]
+                    }, template: "<a\n    naturalFileDrop\n    matRipple\n    target=\"_blank\"\n    [selectable]=\"true\"\n    [accept]=\"accept()\"\n    [attr.href]=\"getDownloadLink()\"\n    [class.has-action]=\"!!action()\"\n    [class.suggest-upload]=\"!model && action() === 'upload'\"\n    [fileSelectionDisabled]=\"action() !== 'upload'\"\n    [matRippleDisabled]=\"!action()\"\n    [naturalBackgroundDensity]=\"imagePreview\"\n    [style.backgroundSize]=\"backgroundSize()\"\n    (fileChange)=\"upload($event)\"\n>\n    @if (filePreview) {\n        <div class=\"file-preview\" [style.font-size.px]=\"fontSize()\">\n            <mat-icon naturalIcon=\"attachment\" [size]=\"iconHeight()\" />\n            {{ filePreview | uppercase }}\n        </div>\n    }\n\n    <div class=\"action-overlay\" [style.font-size.px]=\"fontSize()\">\n        @if (action() === 'upload') {\n            <mat-icon naturalIcon=\"cloud_upload\" [size]=\"iconHeight()\" />\n        }\n        @if (action() === 'download') {\n            <mat-icon naturalIcon=\"get_app\" [size]=\"iconHeight()\" />\n        }\n        {{ action() | capitalize }}\n    </div>\n</a>\n", styles: [":host{display:flex;position:relative;flex-direction:row;border-color:var(--mat-sys-secondary-container);background-color:var(--mat-sys-secondary-container);overflow:hidden}:host>a{position:relative;flex:1;background-position:center;background-repeat:no-repeat;background-color:var(--mat-sys-surface-container-lowest)}:host>a.has-action{cursor:pointer}:host>a.has-action.suggest-upload .action-overlay{opacity:.66}:host>a.has-action:hover .action-overlay,:host>a.has-action.natural-file-over .action-overlay{opacity:1}:host .action-overlay,:host .file-preview{display:flex;position:absolute;inset:0;flex-direction:column;justify-content:center;align-items:center;font-size:36px;line-height:1.3em;text-align:center}:host .action-overlay{background-color:color-mix(in srgb,var(--mat-sys-primary-fixed) 85%,transparent);color:var(--mat-sys-on-primary-fixed)}:host .file-preview{background-color:color-mix(in srgb,var(--mat-sys-tertiary-fixed) 85%,transparent);color:var(--mat-sys-on-tertiary-fixed)}:host .action-overlay{opacity:0}:host .action-overlay>div{display:flex;position:absolute;inset:0;justify-content:center;align-items:center;opacity:0}\n"] }]
         }], propDecorators: { height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], action: [{ type: i0.Input, args: [{ isSignal: true, alias: "action", required: false }] }], backgroundSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundSize", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], uploader: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploader", required: false }] }], model: [{
                 type: Input
             }], formCtrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "formCtrl", required: false }] }], modelChange: [{ type: i0.Output, args: ["modelChange"] }] } });
@@ -11374,13 +11392,29 @@ function provideErrorHandler(url, extraService) {
 
 class NaturalColorSchemerComponent {
     themeService = inject(NaturalThemeService);
-    ColorScheme = ColorScheme;
+    colorSchemeOptions = colorSchemeOptions;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalColorSchemerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: NaturalColorSchemerComponent, isStandalone: true, selector: "natural-color-schemer", ngImport: i0, template: "<div class=\"nat-horizontal wrapper\">\n    <button\n        matIconButton\n        matTooltip=\"Th\u00E8me de l'appareil\"\n        i18n-matTooltip\n        matTooltipPosition=\"below\"\n        (click)=\"themeService.setColorScheme(ColorScheme.Auto)\"\n    >\n        <mat-icon naturalIcon=\"routine\" />\n    </button>\n    <button\n        matIconButton\n        matTooltip=\"Th\u00E8me clair\"\n        i18n-matTooltip\n        matTooltipPosition=\"below\"\n        (click)=\"themeService.setColorScheme(ColorScheme.Light)\"\n    >\n        <mat-icon naturalIcon=\"light_mode\" />\n    </button>\n    <button\n        matIconButton\n        matTooltip=\"Th\u00E8me sombre\"\n        i18n-matTooltip\n        matTooltipPosition=\"below\"\n        (click)=\"themeService.setColorScheme(ColorScheme.Dark)\"\n    >\n        <mat-icon naturalIcon=\"dark_mode\" />\n    </button>\n</div>\n", styles: [":host{display:block;width:fit-content}.wrapper{border-radius:var(--mat-sys-corner-full);background:var(--mat-sys-surface-bright);padding:5px}\n"], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: NaturalColorSchemerComponent, isStandalone: true, selector: "natural-color-schemer", ngImport: i0, template: "<div class=\"nat-horizontal wrapper\">\n    @for (option of colorSchemeOptions; track $index) {\n        <button\n            matIconButton\n            matTooltipPosition=\"below\"\n            i18n-matTooltip\n            [matTooltip]=\"option.label\"\n            (click)=\"themeService.setColorScheme(option.value)\"\n        >\n            <mat-icon [fontIcon]=\"option.icon\" />\n        </button>\n    }\n</div>\n", styles: [":host{display:block;width:fit-content}.wrapper{border-radius:var(--mat-sys-corner-full);background:var(--mat-sys-surface-bright);padding:5px}\n"], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalColorSchemerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'natural-color-schemer', imports: [MatIconButton, MatTooltip, NaturalIconDirective, FormsModule, MatIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"nat-horizontal wrapper\">\n    <button\n        matIconButton\n        matTooltip=\"Th\u00E8me de l'appareil\"\n        i18n-matTooltip\n        matTooltipPosition=\"below\"\n        (click)=\"themeService.setColorScheme(ColorScheme.Auto)\"\n    >\n        <mat-icon naturalIcon=\"routine\" />\n    </button>\n    <button\n        matIconButton\n        matTooltip=\"Th\u00E8me clair\"\n        i18n-matTooltip\n        matTooltipPosition=\"below\"\n        (click)=\"themeService.setColorScheme(ColorScheme.Light)\"\n    >\n        <mat-icon naturalIcon=\"light_mode\" />\n    </button>\n    <button\n        matIconButton\n        matTooltip=\"Th\u00E8me sombre\"\n        i18n-matTooltip\n        matTooltipPosition=\"below\"\n        (click)=\"themeService.setColorScheme(ColorScheme.Dark)\"\n    >\n        <mat-icon naturalIcon=\"dark_mode\" />\n    </button>\n</div>\n", styles: [":host{display:block;width:fit-content}.wrapper{border-radius:var(--mat-sys-corner-full);background:var(--mat-sys-surface-bright);padding:5px}\n"] }]
+            args: [{ selector: 'natural-color-schemer', imports: [MatIconButton, MatTooltip, MatIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"nat-horizontal wrapper\">\n    @for (option of colorSchemeOptions; track $index) {\n        <button\n            matIconButton\n            matTooltipPosition=\"below\"\n            i18n-matTooltip\n            [matTooltip]=\"option.label\"\n            (click)=\"themeService.setColorScheme(option.value)\"\n        >\n            <mat-icon [fontIcon]=\"option.icon\" />\n        </button>\n    }\n</div>\n", styles: [":host{display:block;width:fit-content}.wrapper{border-radius:var(--mat-sys-corner-full);background:var(--mat-sys-surface-bright);padding:5px}\n"] }]
+        }] });
+
+/*
+ * Public API Surface of natural
+ */
+
+class NaturalCompactColorSchemerComponent {
+    themeService = inject(NaturalThemeService);
+    colorSchemeOptions = colorSchemeOptions;
+    current = computed(() => colorSchemeOptions.find(choice => this.themeService.colorScheme() === choice.value), ...(ngDevMode ? [{ debugName: "current" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalCompactColorSchemerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: NaturalCompactColorSchemerComponent, isStandalone: true, selector: "natural-compact-color-schemer", ngImport: i0, template: "<button\n    matIconButton\n    matTooltipPosition=\"below\"\n    i18n-matTooltip\n    [matTooltip]=\"current()?.label\"\n    [matMenuTriggerFor]=\"menu\"\n    ><mat-icon [fontIcon]=\"current()?.icon ?? ''\"\n/></button>\n<mat-menu #menu=\"matMenu\">\n    @for (option of colorSchemeOptions; track $index) {\n        <button mat-menu-item (click)=\"themeService.setColorScheme(option.value)\">\n            <mat-icon [fontIcon]=\"themeService.colorScheme() === option.value ? 'check' : ''\" />\n            {{ option.label }}</button\n        >\n    }\n</mat-menu>\n", dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalCompactColorSchemerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'natural-compact-color-schemer', imports: [MatIconButton, MatTooltip, MatIcon, MatMenu, MatMenuItem, MatMenuTrigger], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n    matIconButton\n    matTooltipPosition=\"below\"\n    i18n-matTooltip\n    [matTooltip]=\"current()?.label\"\n    [matMenuTriggerFor]=\"menu\"\n    ><mat-icon [fontIcon]=\"current()?.icon ?? ''\"\n/></button>\n<mat-menu #menu=\"matMenu\">\n    @for (option of colorSchemeOptions; track $index) {\n        <button mat-menu-item (click)=\"themeService.setColorScheme(option.value)\">\n            <mat-icon [fontIcon]=\"themeService.colorScheme() === option.value ? 'check' : ''\" />\n            {{ option.label }}</button\n        >\n    }\n</mat-menu>\n" }]
         }] });
 
 /*
@@ -11452,7 +11486,6 @@ const naturalProviders = [
     importProvidersFrom([MatDialogModule, MatSnackBarModule]),
     sessionStorageProvider,
     localStorageProvider,
-    provideThemes(['natural']),
 ];
 
 function getOperations(req) {
@@ -11505,5 +11538,5 @@ function graphqlQuerySigner(key) {
  * Generated bundle index. Do not edit.
  */
 
-export { AvatarService, ColorScheme, InvalidWithValueStateMatcher$1 as InvalidWithValueStateMatcher, LOCAL_STORAGE, NATURAL_DROPDOWN_DATA, NATURAL_ICONS_CONFIG, NATURAL_PERSISTENCE_VALIDATOR, NATURAL_SEO_CONFIG, NaturalAbstractDetail, NaturalAbstractEditableList, NaturalAbstractList, NaturalAbstractModelService, NaturalAbstractNavigableList, NaturalAbstractPanel, NaturalAlertService, NaturalAvatarComponent, NaturalBackgroundDensityDirective, NaturalCapitalizePipe, NaturalColorSchemerComponent, NaturalColumnsPickerComponent, NaturalConfirmComponent, NaturalDataSource, NaturalDebounceService, NaturalDetailHeaderComponent, NaturalDialogTriggerComponent, NaturalDropdownRef, NaturalEllipsisPipe, NaturalEnumPipe, NaturalEnumService, NaturalErrorHandler, NaturalErrorMessagePipe, NaturalFileComponent, NaturalFileDropDirective, NaturalFileSelectDirective, NaturalFileService, NaturalFixedButtonComponent, NaturalFixedButtonDetailComponent, NaturalHierarchicSelectorComponent, NaturalHierarchicSelectorDialogComponent, NaturalHierarchicSelectorDialogService, NaturalHierarchicSelectorService, NaturalHttpPrefixDirective, NaturalIconDirective, NaturalLinkMutationService, NaturalLinkableTabDirective, NaturalLoggerConfigExtra, NaturalLoggerConfigUrl, NaturalMatomoService, NaturalMemoryStorage, NaturalPanelsComponent, NaturalPanelsService, NaturalPersistenceService, NaturalQueryVariablesManager, NaturalRelationsComponent, NaturalSearchComponent, NaturalSelectComponent, NaturalSelectEnumComponent, NaturalSelectHierarchicComponent, NaturalSeoService, NaturalSidenavComponent, NaturalSidenavContainerComponent, NaturalSidenavContentComponent, NaturalSidenavService, NaturalSidenavStackService, NaturalSrcDensityDirective, NaturalStampComponent, NaturalSwissParsingDateAdapter, NaturalTableButtonComponent, NaturalThemeChangerComponent, NaturalThemeService, NaturalTimeAgoPipe, NetworkActivityService, PanelsHooksConfig, SESSION_STORAGE, SortingOrder, TypeBooleanComponent, TypeDateComponent, TypeDateRangeComponent, TypeHierarchicSelectorComponent, TypeNaturalSelectComponent, TypeNumberComponent, TypeOptionsComponent, TypeSelectComponent, TypeTextComponent, activityInterceptor, available, cancellableTimeout, cloneDeepButSkipFile, collectErrors, commonImageMimeTypes, copyToClipboard, createHttpLink, debug, decimal, deepFreeze, deliverableEmail, ensureHttpPrefix, fallbackIfNoOpenedPanels, formatIsoDate, formatIsoDateTime, fromUrl, getForegroundColor, graphqlQuerySigner, greaterThan, hasFilesAndProcessDate, ifValid, integer, isFile, localStorageFactory, localStorageProvider, makePlural, memoryLocalStorageProvider, memorySessionStorageProvider, mergeOverrideArray, money, naturalPanelsUrlMatcher, naturalProviders, nfcCardHex, onHistoryEvent, possibleComparableOperators, possibleNullComparableOperators, provideErrorHandler, provideIcons, providePanels, provideSeo, provideThemes, relationsToIds, replaceObjectKeepingReference, replaceOperatorByField, replaceOperatorByName, rgbToHex, sessionStorageFactory, sessionStorageProvider, time, toGraphQLDoctrineFilter, toNavigationParameters, toUrl, unique, upperCaseFirstLetter, url, urlPattern, validTlds, validateAllFormControls, validateColumns, validatePagination, validateSorting, wrapLike, wrapPrefix, wrapSuffix };
+export { AvatarService, ColorScheme, InvalidWithValueStateMatcher$1 as InvalidWithValueStateMatcher, LOCAL_STORAGE, NATURAL_DROPDOWN_DATA, NATURAL_ICONS_CONFIG, NATURAL_PERSISTENCE_VALIDATOR, NATURAL_SEO_CONFIG, NaturalAbstractDetail, NaturalAbstractEditableList, NaturalAbstractList, NaturalAbstractModelService, NaturalAbstractNavigableList, NaturalAbstractPanel, NaturalAlertService, NaturalAvatarComponent, NaturalBackgroundDensityDirective, NaturalCapitalizePipe, NaturalColorSchemerComponent, NaturalColumnsPickerComponent, NaturalCompactColorSchemerComponent, NaturalConfirmComponent, NaturalDataSource, NaturalDebounceService, NaturalDetailHeaderComponent, NaturalDialogTriggerComponent, NaturalDropdownRef, NaturalEllipsisPipe, NaturalEnumPipe, NaturalEnumService, NaturalErrorHandler, NaturalErrorMessagePipe, NaturalFileComponent, NaturalFileDropDirective, NaturalFileSelectDirective, NaturalFileService, NaturalFixedButtonComponent, NaturalFixedButtonDetailComponent, NaturalHierarchicSelectorComponent, NaturalHierarchicSelectorDialogComponent, NaturalHierarchicSelectorDialogService, NaturalHierarchicSelectorService, NaturalHttpPrefixDirective, NaturalIconDirective, NaturalLinkMutationService, NaturalLinkableTabDirective, NaturalLoggerConfigExtra, NaturalLoggerConfigUrl, NaturalMatomoService, NaturalMemoryStorage, NaturalPanelsComponent, NaturalPanelsService, NaturalPersistenceService, NaturalQueryVariablesManager, NaturalRelationsComponent, NaturalSearchComponent, NaturalSelectComponent, NaturalSelectEnumComponent, NaturalSelectHierarchicComponent, NaturalSeoService, NaturalSidenavComponent, NaturalSidenavContainerComponent, NaturalSidenavContentComponent, NaturalSidenavService, NaturalSidenavStackService, NaturalSrcDensityDirective, NaturalStampComponent, NaturalSwissParsingDateAdapter, NaturalTableButtonComponent, NaturalThemeChangerComponent, NaturalThemeService, NaturalTimeAgoPipe, NetworkActivityService, PanelsHooksConfig, SESSION_STORAGE, SortingOrder, TypeBooleanComponent, TypeDateComponent, TypeDateRangeComponent, TypeHierarchicSelectorComponent, TypeNaturalSelectComponent, TypeNumberComponent, TypeOptionsComponent, TypeSelectComponent, TypeTextComponent, activityInterceptor, available, cancellableTimeout, cloneDeepButSkipFile, collectErrors, commonImageMimeTypes, copyToClipboard, createHttpLink, debug, decimal, deepFreeze, deliverableEmail, ensureHttpPrefix, fallbackIfNoOpenedPanels, formatIsoDate, formatIsoDateTime, fromUrl, getForegroundColor, graphqlQuerySigner, greaterThan, hasFilesAndProcessDate, ifValid, integer, isFile, localStorageFactory, localStorageProvider, makePlural, memoryLocalStorageProvider, memorySessionStorageProvider, mergeOverrideArray, money, naturalPanelsUrlMatcher, naturalProviders, nfcCardHex, onHistoryEvent, possibleComparableOperators, possibleNullComparableOperators, provideErrorHandler, provideIcons, providePanels, provideSeo, provideThemes, relationsToIds, replaceObjectKeepingReference, replaceOperatorByField, replaceOperatorByName, rgbToHex, sessionStorageFactory, sessionStorageProvider, time, toGraphQLDoctrineFilter, toNavigationParameters, toUrl, unique, upperCaseFirstLetter, url, urlPattern, validTlds, validateAllFormControls, validateColumns, validatePagination, validateSorting, wrapLike, wrapPrefix, wrapSuffix };
 //# sourceMappingURL=ecodev-natural.mjs.map