@ecodev/natural 66.0.13 → 66.0.14

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

@@ -5346,6 +5346,11 @@ 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' },
+];
 class NaturalThemeService {
     allThemes = inject(NATURAL_THEMES_CONFIG);
     storage = inject(LOCAL_STORAGE);
@@ -9393,7 +9398,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 +9412,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 +11379,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 +11473,6 @@ const naturalProviders = [
     importProvidersFrom([MatDialogModule, MatSnackBarModule]),
     sessionStorageProvider,
     localStorageProvider,
-    provideThemes(['natural']),
 ];
 
 function getOperations(req) {
@@ -11505,5 +11525,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