@ecodev/natural 66.0.24 → 66.0.26

package/fesm2022/ecodev-natural.mjs

@@ -9414,7 +9414,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 .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" }] });
+    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:var(--mat-sys-primary-fixed)}@supports (color: color-mix(in srgb,red,blue)){:host .action-overlay{background-color:color-mix(in srgb,var(--mat-sys-primary-fixed) 85%,transparent)}}:host .action-overlay{color:var(--mat-sys-on-primary-fixed)}:host .file-preview{background-color:var(--mat-sys-tertiary-fixed)}@supports (color: color-mix(in srgb,red,blue)){:host .file-preview{background-color:color-mix(in srgb,var(--mat-sys-tertiary-fixed) 85%,transparent)}}:host .file-preview{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,
@@ -9428,7 +9428,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 .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"] }]
+                    }, 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:var(--mat-sys-primary-fixed)}@supports (color: color-mix(in srgb,red,blue)){:host .action-overlay{background-color:color-mix(in srgb,var(--mat-sys-primary-fixed) 85%,transparent)}}:host .action-overlay{color:var(--mat-sys-on-primary-fixed)}:host .file-preview{background-color:var(--mat-sys-tertiary-fixed)}@supports (color: color-mix(in srgb,red,blue)){:host .file-preview{background-color:color-mix(in srgb,var(--mat-sys-tertiary-fixed) 85%,transparent)}}:host .file-preview{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"] }] } });
@@ -11439,11 +11439,11 @@ class NaturalColorSchemerComponent {
     themeService = inject(NaturalThemeService);
     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: "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 });
+    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}@supports not (color: light-dark(white,black)){:host{display:none}}.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, 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"] }]
+            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}@supports not (color: light-dark(white,black)){:host{display:none}}.wrapper{border-radius:var(--mat-sys-corner-full);background:var(--mat-sys-surface-bright);padding:5px}\n"] }]
         }] });
 
 /*
@@ -11455,11 +11455,11 @@ class NaturalCompactColorSchemerComponent {
     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 });
+    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", styles: ["@supports not (color: light-dark(white,black)){:host{display:none}}\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" }]
+            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", styles: ["@supports not (color: light-dark(white,black)){:host{display:none}}\n"] }]
         }] });
 
 /*