@ng-matero/extensions 20.3.1 → 21.1.0

package/fesm2022/mtxColorpicker.mjs

@@ -3,15 +3,14 @@ import { Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
 import { ComponentPortal, PortalModule } from '@angular/cdk/portal';
 import { NgTemplateOutlet, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, ElementRef, ANIMATION_MODULE_TYPE, ChangeDetectorRef, NgZone, Renderer2, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, ViewContainerRef, DOCUMENT, EventEmitter, Injector, afterNextRender, booleanAttribute, Output, forwardRef, Directive, HostAttributeToken, ViewChild, ContentChild, NgModule } from '@angular/core';
+import { InjectionToken, inject, ElementRef, ChangeDetectorRef, NgZone, Renderer2, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, ViewContainerRef, DOCUMENT, EventEmitter, Injector, afterNextRender, booleanAttribute, Output, forwardRef, Directive, HostAttributeToken, ViewChild, ContentChild, NgModule } from '@angular/core';
 import { MatIconButton, MatButtonModule } from '@angular/material/button';
-import * as i1 from 'ngx-color/chrome';
-import { ColorChromeModule } from 'ngx-color/chrome';
+import { ColorPicker } from '@acrodata/color-picker';
 import { Directionality } from '@angular/cdk/bidi';
 import { hasModifierKey, ESCAPE, UP_ARROW, DOWN_ARROW } from '@angular/cdk/keycodes';
+import { _animationsDisabled } from '@angular/material/core';
 import { Subject, Subscription, merge, of } from 'rxjs';
 import { take, filter } from 'rxjs/operators';
-import { TinyColor } from '@ctrl/tinycolor';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, Validators } from '@angular/forms';
 import { MatFormField } from '@angular/material/form-field';
 import { MAT_INPUT_VALUE_ACCESSOR } from '@angular/material/input';
@@ -26,28 +25,10 @@ const MTX_COLORPICKER_SCROLL_STRATEGY = new InjectionToken('mtx-colorpicker-scro
         return () => overlay.scrollStrategies.reposition();
     },
 });
-/**
- * @docs-private
- * @deprecated No longer used, will be removed.
- * @breaking-change 21.0.0
- */
-function MTX_COLORPICKER_SCROLL_STRATEGY_FACTORY(overlay) {
-    return () => overlay.scrollStrategies.reposition();
-}
-/**
- * @docs-private
- * @deprecated No longer used, will be removed.
- * @breaking-change 21.0.0
- */
-const MTX_COLORPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER = {
-    provide: MTX_COLORPICKER_SCROLL_STRATEGY,
-    deps: [Overlay],
-    useFactory: MTX_COLORPICKER_SCROLL_STRATEGY_FACTORY,
-};
 class MtxColorpickerContent {
     constructor() {
         this._elementRef = inject(ElementRef);
-        this._animationsDisabled = inject(ANIMATION_MODULE_TYPE, { optional: true }) === 'NoopAnimations';
+        this._animationsDisabled = _animationsDisabled();
         this._changeDetectorRef = inject(ChangeDetectorRef);
         this._ngZone = inject(NgZone);
         /** Emits when an animation has finished. */
@@ -98,24 +79,16 @@ class MtxColorpickerContent {
             }, 200);
         }
     }
-    getColorString(e) {
-        return {
-            hex: e.color.rgb.a === 1 ? e.color.hex : new TinyColor(e.color.rgb).toHex8String(),
-            rgb: new TinyColor(e.color.rgb).toRgbString(),
-            hsl: new TinyColor(e.color.hsl).toHslString(),
-            hsv: new TinyColor(e.color.hsv).toHsvString(),
-        }[this.picker.format];
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MtxColorpickerContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: MtxColorpickerContent, isStandalone: true, selector: "mtx-colorpicker-content", inputs: { color: "color" }, host: { properties: { "class": "color ? \"mat-\" + color : \"\"", "class.mtx-colorpicker-content-animations-enabled": "!_animationsDisabled" }, classAttribute: "mtx-colorpicker-content" }, exportAs: ["mtxColorpickerContent"], ngImport: i0, template: "@if (picker.content) {\n  <ng-template [ngTemplateOutlet]=\"picker.content\"></ng-template>\n} @else {\n  <color-chrome\n    [color]=\"picker.selected\"\n    (onChangeComplete)=\"picker.select(getColorString($event))\"\n  />\n}\n", styles: ["@keyframes _mtx-colorpicker-content-dropdown-enter{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:none}}@keyframes _mtx-colorpicker-content-exit{0%{opacity:1}to{opacity:0}}.mtx-colorpicker-content{display:block;border-radius:4px}.mtx-colorpicker-content.mtx-colorpicker-content-animations-enabled{animation:_mtx-colorpicker-content-dropdown-enter .12s cubic-bezier(0,0,.2,1)}.mtx-colorpicker-content-exit.mtx-colorpicker-content-animations-enabled{animation:_mtx-colorpicker-content-exit .1s linear}\n"], dependencies: [{ kind: "ngmodule", type: ColorChromeModule }, { kind: "component", type: i1.ChromeComponent, selector: "color-chrome", inputs: ["disableAlpha"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxColorpickerContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: MtxColorpickerContent, isStandalone: true, selector: "mtx-colorpicker-content", inputs: { color: "color" }, host: { properties: { "class": "color ? \"mat-\" + color : \"\"", "class.mtx-colorpicker-content-animations-enabled": "!_animationsDisabled" }, classAttribute: "mtx-colorpicker-content" }, exportAs: ["mtxColorpickerContent"], ngImport: i0, template: "@if (picker.content) {\n  <ng-template [ngTemplateOutlet]=\"picker.content\"></ng-template>\n} @else {\n  <color-picker\n    [format]=\"picker.format\"\n    [color]=\"picker.selected\"\n    (colorChange)=\"picker.select($event)\"\n  />\n}\n", styles: ["@keyframes _mtx-colorpicker-content-dropdown-enter{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:none}}@keyframes _mtx-colorpicker-content-exit{0%{opacity:1}to{opacity:0}}.mtx-colorpicker-content{display:block;border-radius:4px}.mtx-colorpicker-content.mtx-colorpicker-content-animations-enabled{animation:_mtx-colorpicker-content-dropdown-enter .12s cubic-bezier(0,0,.2,1)}.mtx-colorpicker-content-exit.mtx-colorpicker-content-animations-enabled{animation:_mtx-colorpicker-content-exit .1s linear}\n"], dependencies: [{ kind: "component", type: ColorPicker, selector: "color-picker", inputs: ["format", "color", "hideAlpha", "disabled"], outputs: ["formatChange", "colorChange", "valueChange", "valueChanged"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MtxColorpickerContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxColorpickerContent, decorators: [{
             type: Component,
             args: [{ selector: 'mtx-colorpicker-content', host: {
                         'class': 'mtx-colorpicker-content',
                         '[class]': 'color ? "mat-" + color : ""',
                         '[class.mtx-colorpicker-content-animations-enabled]': '!_animationsDisabled',
-                    }, exportAs: 'mtxColorpickerContent', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [ColorChromeModule, NgTemplateOutlet], template: "@if (picker.content) {\n  <ng-template [ngTemplateOutlet]=\"picker.content\"></ng-template>\n} @else {\n  <color-chrome\n    [color]=\"picker.selected\"\n    (onChangeComplete)=\"picker.select(getColorString($event))\"\n  />\n}\n", styles: ["@keyframes _mtx-colorpicker-content-dropdown-enter{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:none}}@keyframes _mtx-colorpicker-content-exit{0%{opacity:1}to{opacity:0}}.mtx-colorpicker-content{display:block;border-radius:4px}.mtx-colorpicker-content.mtx-colorpicker-content-animations-enabled{animation:_mtx-colorpicker-content-dropdown-enter .12s cubic-bezier(0,0,.2,1)}.mtx-colorpicker-content-exit.mtx-colorpicker-content-animations-enabled{animation:_mtx-colorpicker-content-exit .1s linear}\n"] }]
+                    }, exportAs: 'mtxColorpickerContent', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [ColorPicker, NgTemplateOutlet], template: "@if (picker.content) {\n  <ng-template [ngTemplateOutlet]=\"picker.content\"></ng-template>\n} @else {\n  <color-picker\n    [format]=\"picker.format\"\n    [color]=\"picker.selected\"\n    (colorChange)=\"picker.select($event)\"\n  />\n}\n", styles: ["@keyframes _mtx-colorpicker-content-dropdown-enter{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:none}}@keyframes _mtx-colorpicker-content-exit{0%{opacity:1}to{opacity:0}}.mtx-colorpicker-content{display:block;border-radius:4px}.mtx-colorpicker-content.mtx-colorpicker-content-animations-enabled{animation:_mtx-colorpicker-content-dropdown-enter .12s cubic-bezier(0,0,.2,1)}.mtx-colorpicker-content-exit.mtx-colorpicker-content-animations-enabled{animation:_mtx-colorpicker-content-exit .1s linear}\n"] }]
         }], ctorParameters: () => [], propDecorators: { color: [{
                 type: Input
             }] } });
@@ -182,7 +155,7 @@ class MtxColorpicker {
     }
     /** The input and output color format. */
     get format() {
-        return this._format || this.pickerInput?.format || this.getColorFormat();
+        return this._format || this.pickerInput?.format;
     }
     set format(value) {
         this._format = value;
@@ -201,15 +174,6 @@ class MtxColorpicker {
         this._inputStateChanges.unsubscribe();
         this._disabledChange.complete();
     }
-    getColorFormat() {
-        const color = new TinyColor(this.selected);
-        if (color.format === 'rgb' || color.format === 'hsl' || color.format === 'hsv') {
-            return color.format;
-        }
-        else {
-            return 'hex';
-        }
-    }
     /** Selects the given color. */
     select(nextVal) {
         const oldValue = this.selected;
@@ -372,10 +336,10 @@ class MtxColorpicker {
                 (this.pickerInput && hasModifierKey(event, 'altKey') && event.keyCode === UP_ARROW));
         })));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MtxColorpicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.0", type: MtxColorpicker, isStandalone: true, selector: "mtx-colorpicker", inputs: { content: "content", disabled: ["disabled", "disabled", booleanAttribute], xPosition: "xPosition", yPosition: "yPosition", restoreFocus: ["restoreFocus", "restoreFocus", booleanAttribute], opened: ["opened", "opened", booleanAttribute], color: "color", format: "format" }, outputs: { openedStream: "opened", closedStream: "closed" }, exportAs: ["mtxColorpicker"], usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxColorpicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.1", type: MtxColorpicker, isStandalone: true, selector: "mtx-colorpicker", inputs: { content: "content", disabled: ["disabled", "disabled", booleanAttribute], xPosition: "xPosition", yPosition: "yPosition", restoreFocus: ["restoreFocus", "restoreFocus", booleanAttribute], opened: ["opened", "opened", booleanAttribute], color: "color", format: "format" }, outputs: { openedStream: "opened", closedStream: "closed" }, exportAs: ["mtxColorpicker"], usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MtxColorpicker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxColorpicker, decorators: [{
             type: Component,
             args: [{
                     selector: 'mtx-colorpicker',
@@ -566,7 +530,8 @@ class MtxColorpickerInput {
         }
         this._onTouched();
     }
-    _onInput(value) {
+    _onInput(event) {
+        const value = event.target.value;
         const nextValue = value;
         this._value = nextValue;
         this._cvaOnChange(nextValue);
@@ -584,14 +549,14 @@ class MtxColorpickerInput {
     _formatValue(value) {
         this._elementRef.nativeElement.value = value ? value : '';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MtxColorpickerInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.0", type: MtxColorpickerInput, isStandalone: true, selector: "input[mtxColorpicker]", inputs: { mtxColorpicker: "mtxColorpicker", disabled: ["disabled", "disabled", booleanAttribute], value: "value", format: "format" }, outputs: { colorChange: "colorChange", colorInput: "colorInput" }, host: { listeners: { "input": "_onInput($event.target.value)", "change": "_onChange()", "blur": "_onBlur()", "keydown": "_onKeydown($event)" }, properties: { "attr.aria-haspopup": "_picker ? \"dialog\" : null", "attr.aria-owns": "(_picker?.opened && _picker.id) || null", "disabled": "disabled" }, classAttribute: "mtx-colorpicker-input" }, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxColorpickerInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.1", type: MtxColorpickerInput, isStandalone: true, selector: "input[mtxColorpicker]", inputs: { mtxColorpicker: "mtxColorpicker", disabled: ["disabled", "disabled", booleanAttribute], value: "value", format: "format" }, outputs: { colorChange: "colorChange", colorInput: "colorInput" }, host: { listeners: { "input": "_onInput($event)", "change": "_onChange()", "blur": "_onBlur()", "keydown": "_onKeydown($event)" }, properties: { "attr.aria-haspopup": "_picker ? \"dialog\" : null", "attr.aria-owns": "(_picker?.opened && _picker.id) || null", "disabled": "disabled" }, classAttribute: "mtx-colorpicker-input" }, providers: [
             MTX_COLORPICKER_VALUE_ACCESSOR,
             MTX_COLORPICKER_VALIDATORS,
             { provide: MAT_INPUT_VALUE_ACCESSOR, useExisting: MtxColorpickerInput },
         ], exportAs: ["mtxColorpickerInput"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MtxColorpickerInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxColorpickerInput, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[mtxColorpicker]',
@@ -605,7 +570,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         '[attr.aria-haspopup]': '_picker ? "dialog" : null',
                         '[attr.aria-owns]': '(_picker?.opened && _picker.id) || null',
                         '[disabled]': 'disabled',
-                        '(input)': '_onInput($event.target.value)',
+                        '(input)': '_onInput($event)',
                         '(change)': '_onChange()',
                         '(blur)': '_onBlur()',
                         '(keydown)': '_onKeydown($event)',
@@ -629,10 +594,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
 
 /** Can be used to override the icon of a `mtxColorpickerToggle`. */
 class MtxColorpickerToggleIcon {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MtxColorpickerToggleIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: MtxColorpickerToggleIcon, isStandalone: true, selector: "[mtxColorpickerToggleIcon]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxColorpickerToggleIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.1", type: MtxColorpickerToggleIcon, isStandalone: true, selector: "[mtxColorpickerToggleIcon]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MtxColorpickerToggleIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxColorpickerToggleIcon, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mtxColorpickerToggleIcon]',
@@ -684,10 +649,10 @@ class MtxColorpickerToggle {
         this._stateChanges.unsubscribe();
         this._stateChanges = merge(pickerDisabled, inputDisabled, pickerToggled).subscribe(() => this._changeDetectorRef.markForCheck());
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MtxColorpickerToggle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: MtxColorpickerToggle, isStandalone: true, selector: "mtx-colorpicker-toggle", inputs: { picker: ["for", "picker"], tabIndex: "tabIndex", ariaLabel: ["aria-label", "ariaLabel"], disabled: ["disabled", "disabled", booleanAttribute], disableRipple: ["disableRipple", "disableRipple", booleanAttribute] }, host: { listeners: { "click": "_open($event)" }, properties: { "attr.tabindex": "null", "class.mtx-colorpicker-toggle-active": "picker && picker.opened", "class.mat-accent": "picker && picker.color === \"accent\"", "class.mat-warn": "picker && picker.color === \"warn\"" }, classAttribute: "mtx-colorpicker-toggle" }, queries: [{ propertyName: "_customIcon", first: true, predicate: MtxColorpickerToggleIcon, descendants: true }], viewQueries: [{ propertyName: "_button", first: true, predicate: ["button"], descendants: true }], exportAs: ["mtxColorpickerToggle"], usesOnChanges: true, ngImport: i0, template: "<button\n  #button\n  mat-icon-button\n  type=\"button\"\n  [attr.aria-haspopup]=\"picker ? 'dialog' : null\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n  [disabled]=\"disabled\"\n  [disableRipple]=\"disableRipple\"\n>\n  @if (!_customIcon) {\n    <svg\n      class=\"mtx-colorpicker-toggle-default-icon\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      height=\"24px\"\n      fill=\"currentColor\"\n      focusable=\"false\"\n    >\n      <path\n        d=\"M17.5,12A1.5,1.5 0 0,1 16,10.5A1.5,1.5 0 0,1 17.5,9A1.5,1.5 0 0,1 19,10.5A1.5,1.5 0 0,1 17.5,12M14.5,8A1.5,1.5 0 0,1 13,6.5A1.5,1.5 0 0,1 14.5,5A1.5,1.5 0 0,1 16,6.5A1.5,1.5 0 0,1 14.5,8M9.5,8A1.5,1.5 0 0,1 8,6.5A1.5,1.5 0 0,1 9.5,5A1.5,1.5 0 0,1 11,6.5A1.5,1.5 0 0,1 9.5,8M6.5,12A1.5,1.5 0 0,1 5,10.5A1.5,1.5 0 0,1 6.5,9A1.5,1.5 0 0,1 8,10.5A1.5,1.5 0 0,1 6.5,12M12,3A9,9 0 0,0 3,12A9,9 0 0,0 12,21A1.5,1.5 0 0,0 13.5,19.5C13.5,19.11 13.35,18.76 13.11,18.5C12.88,18.23 12.73,17.88 12.73,17.5A1.5,1.5 0 0,1 14.23,16H16A5,5 0 0,0 21,11C21,6.58 16.97,3 12,3Z\"\n      />\n    </svg>\n  }\n\n  <ng-content select=\"[mtxColorpickerToggleIcon]\"></ng-content>\n</button>\n", styles: [".mtx-colorpicker-toggle{pointer-events:auto;color:var(--mtx-colorpicker-toggle-icon-color, var(--mat-sys-on-surface-variant))}.mtx-colorpicker-toggle-active{color:var(--mtx-colorpicker-toggle-active-state-icon-color, var(--mat-sys-on-surface-variant))}@media (forced-colors: active){.mtx-colorpicker-toggle-default-icon{color:CanvasText}}\n"], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxColorpickerToggle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: MtxColorpickerToggle, isStandalone: true, selector: "mtx-colorpicker-toggle", inputs: { picker: ["for", "picker"], tabIndex: "tabIndex", ariaLabel: ["aria-label", "ariaLabel"], disabled: ["disabled", "disabled", booleanAttribute], disableRipple: ["disableRipple", "disableRipple", booleanAttribute] }, host: { listeners: { "click": "_open($event)" }, properties: { "attr.tabindex": "null", "class.mtx-colorpicker-toggle-active": "picker && picker.opened", "class.mat-accent": "picker && picker.color === \"accent\"", "class.mat-warn": "picker && picker.color === \"warn\"" }, classAttribute: "mtx-colorpicker-toggle" }, queries: [{ propertyName: "_customIcon", first: true, predicate: MtxColorpickerToggleIcon, descendants: true }], viewQueries: [{ propertyName: "_button", first: true, predicate: ["button"], descendants: true }], exportAs: ["mtxColorpickerToggle"], usesOnChanges: true, ngImport: i0, template: "<button\n  #button\n  matIconButton\n  type=\"button\"\n  [attr.aria-haspopup]=\"picker ? 'dialog' : null\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n  [disabled]=\"disabled\"\n  [disableRipple]=\"disableRipple\"\n>\n  @if (!_customIcon) {\n    <svg\n      class=\"mtx-colorpicker-toggle-default-icon\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      height=\"24px\"\n      fill=\"currentColor\"\n      focusable=\"false\"\n    >\n      <path\n        d=\"M17.5,12A1.5,1.5 0 0,1 16,10.5A1.5,1.5 0 0,1 17.5,9A1.5,1.5 0 0,1 19,10.5A1.5,1.5 0 0,1 17.5,12M14.5,8A1.5,1.5 0 0,1 13,6.5A1.5,1.5 0 0,1 14.5,5A1.5,1.5 0 0,1 16,6.5A1.5,1.5 0 0,1 14.5,8M9.5,8A1.5,1.5 0 0,1 8,6.5A1.5,1.5 0 0,1 9.5,5A1.5,1.5 0 0,1 11,6.5A1.5,1.5 0 0,1 9.5,8M6.5,12A1.5,1.5 0 0,1 5,10.5A1.5,1.5 0 0,1 6.5,9A1.5,1.5 0 0,1 8,10.5A1.5,1.5 0 0,1 6.5,12M12,3A9,9 0 0,0 3,12A9,9 0 0,0 12,21A1.5,1.5 0 0,0 13.5,19.5C13.5,19.11 13.35,18.76 13.11,18.5C12.88,18.23 12.73,17.88 12.73,17.5A1.5,1.5 0 0,1 14.23,16H16A5,5 0 0,0 21,11C21,6.58 16.97,3 12,3Z\"\n      />\n    </svg>\n  }\n\n  <ng-content select=\"[mtxColorpickerToggleIcon]\"></ng-content>\n</button>\n", styles: [".mtx-colorpicker-toggle{pointer-events:auto;color:var(--mtx-colorpicker-toggle-icon-color, var(--mat-sys-on-surface-variant))}.mtx-colorpicker-toggle-active{color:var(--mtx-colorpicker-toggle-active-state-icon-color, var(--mat-sys-on-surface-variant))}@media(forced-colors:active){.mtx-colorpicker-toggle-default-icon{color:CanvasText}}\n"], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MtxColorpickerToggle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxColorpickerToggle, decorators: [{
             type: Component,
             args: [{ selector: 'mtx-colorpicker-toggle', host: {
                         'class': 'mtx-colorpicker-toggle',
@@ -699,7 +664,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         // `stopPropagation` on it without affecting the user's `click` handlers. We need to stop
                         // it so that the input doesn't get focused automatically by the form field (See #21836).
                         '(click)': '_open($event)',
-                    }, exportAs: 'mtxColorpickerToggle', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIconButton], template: "<button\n  #button\n  mat-icon-button\n  type=\"button\"\n  [attr.aria-haspopup]=\"picker ? 'dialog' : null\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n  [disabled]=\"disabled\"\n  [disableRipple]=\"disableRipple\"\n>\n  @if (!_customIcon) {\n    <svg\n      class=\"mtx-colorpicker-toggle-default-icon\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      height=\"24px\"\n      fill=\"currentColor\"\n      focusable=\"false\"\n    >\n      <path\n        d=\"M17.5,12A1.5,1.5 0 0,1 16,10.5A1.5,1.5 0 0,1 17.5,9A1.5,1.5 0 0,1 19,10.5A1.5,1.5 0 0,1 17.5,12M14.5,8A1.5,1.5 0 0,1 13,6.5A1.5,1.5 0 0,1 14.5,5A1.5,1.5 0 0,1 16,6.5A1.5,1.5 0 0,1 14.5,8M9.5,8A1.5,1.5 0 0,1 8,6.5A1.5,1.5 0 0,1 9.5,5A1.5,1.5 0 0,1 11,6.5A1.5,1.5 0 0,1 9.5,8M6.5,12A1.5,1.5 0 0,1 5,10.5A1.5,1.5 0 0,1 6.5,9A1.5,1.5 0 0,1 8,10.5A1.5,1.5 0 0,1 6.5,12M12,3A9,9 0 0,0 3,12A9,9 0 0,0 12,21A1.5,1.5 0 0,0 13.5,19.5C13.5,19.11 13.35,18.76 13.11,18.5C12.88,18.23 12.73,17.88 12.73,17.5A1.5,1.5 0 0,1 14.23,16H16A5,5 0 0,0 21,11C21,6.58 16.97,3 12,3Z\"\n      />\n    </svg>\n  }\n\n  <ng-content select=\"[mtxColorpickerToggleIcon]\"></ng-content>\n</button>\n", styles: [".mtx-colorpicker-toggle{pointer-events:auto;color:var(--mtx-colorpicker-toggle-icon-color, var(--mat-sys-on-surface-variant))}.mtx-colorpicker-toggle-active{color:var(--mtx-colorpicker-toggle-active-state-icon-color, var(--mat-sys-on-surface-variant))}@media (forced-colors: active){.mtx-colorpicker-toggle-default-icon{color:CanvasText}}\n"] }]
+                    }, exportAs: 'mtxColorpickerToggle', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIconButton], template: "<button\n  #button\n  matIconButton\n  type=\"button\"\n  [attr.aria-haspopup]=\"picker ? 'dialog' : null\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n  [disabled]=\"disabled\"\n  [disableRipple]=\"disableRipple\"\n>\n  @if (!_customIcon) {\n    <svg\n      class=\"mtx-colorpicker-toggle-default-icon\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      height=\"24px\"\n      fill=\"currentColor\"\n      focusable=\"false\"\n    >\n      <path\n        d=\"M17.5,12A1.5,1.5 0 0,1 16,10.5A1.5,1.5 0 0,1 17.5,9A1.5,1.5 0 0,1 19,10.5A1.5,1.5 0 0,1 17.5,12M14.5,8A1.5,1.5 0 0,1 13,6.5A1.5,1.5 0 0,1 14.5,5A1.5,1.5 0 0,1 16,6.5A1.5,1.5 0 0,1 14.5,8M9.5,8A1.5,1.5 0 0,1 8,6.5A1.5,1.5 0 0,1 9.5,5A1.5,1.5 0 0,1 11,6.5A1.5,1.5 0 0,1 9.5,8M6.5,12A1.5,1.5 0 0,1 5,10.5A1.5,1.5 0 0,1 6.5,9A1.5,1.5 0 0,1 8,10.5A1.5,1.5 0 0,1 6.5,12M12,3A9,9 0 0,0 3,12A9,9 0 0,0 12,21A1.5,1.5 0 0,0 13.5,19.5C13.5,19.11 13.35,18.76 13.11,18.5C12.88,18.23 12.73,17.88 12.73,17.5A1.5,1.5 0 0,1 14.23,16H16A5,5 0 0,0 21,11C21,6.58 16.97,3 12,3Z\"\n      />\n    </svg>\n  }\n\n  <ng-content select=\"[mtxColorpickerToggleIcon]\"></ng-content>\n</button>\n", styles: [".mtx-colorpicker-toggle{pointer-events:auto;color:var(--mtx-colorpicker-toggle-icon-color, var(--mat-sys-on-surface-variant))}.mtx-colorpicker-toggle-active{color:var(--mtx-colorpicker-toggle-active-state-icon-color, var(--mat-sys-on-surface-variant))}@media(forced-colors:active){.mtx-colorpicker-toggle-default-icon{color:CanvasText}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { picker: [{
                 type: Input,
                 args: ['for']
@@ -723,32 +688,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             }] } });
 
 class MtxColorpickerModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MtxColorpickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MtxColorpickerModule, imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxColorpickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.1", ngImport: i0, type: MtxColorpickerModule, imports: [CommonModule,
             OverlayModule,
             A11yModule,
             PortalModule,
             MatButtonModule,
-            ColorChromeModule,
             MtxColorpicker,
             MtxColorpickerContent,
             MtxColorpickerInput,
             MtxColorpickerToggle,
-            MtxColorpickerToggleIcon], exports: [MtxColorpicker,
+            MtxColorpickerToggleIcon,
+            ColorPicker], exports: [MtxColorpicker,
             MtxColorpickerContent,
             MtxColorpickerInput,
             MtxColorpickerToggle,
             MtxColorpickerToggleIcon] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MtxColorpickerModule, providers: [MTX_COLORPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER], imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxColorpickerModule, imports: [CommonModule,
             OverlayModule,
             A11yModule,
             PortalModule,
             MatButtonModule,
-            ColorChromeModule,
             MtxColorpickerContent,
-            MtxColorpickerToggle] }); }
+            MtxColorpickerToggle,
+            ColorPicker] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MtxColorpickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxColorpickerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -757,12 +722,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         A11yModule,
                         PortalModule,
                         MatButtonModule,
-                        ColorChromeModule,
                         MtxColorpicker,
                         MtxColorpickerContent,
                         MtxColorpickerInput,
                         MtxColorpickerToggle,
                         MtxColorpickerToggleIcon,
+                        ColorPicker,
                     ],
                     exports: [
                         MtxColorpicker,
@@ -771,70 +736,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         MtxColorpickerToggle,
                         MtxColorpickerToggleIcon,
                     ],
-                    providers: [MTX_COLORPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER],
                 }]
         }] });
 
-/**
- * Animations used by the colorpicker.
- * @docs-private
- * @deprecated No longer used, will be removed.
- * @breaking-change 21.0.0
- */
-const mtxColorpickerAnimations = {
-    // Represents:
-    // transformPanel: trigger('transformPanel', [
-    //   transition(
-    //     'void => enter-dropdown',
-    //     animate(
-    //       '120ms cubic-bezier(0, 0, 0.2, 1)',
-    //       keyframes([
-    //         style({ opacity: 0, transform: 'scale(1, 0.8)' }),
-    //         style({ opacity: 1, transform: 'scale(1, 1)' }),
-    //       ])
-    //     )
-    //   ),
-    //   transition('* => void', animate('100ms linear', style({ opacity: 0 }))),
-    // ]),
-    /** Transforms the height of the colorpicker's panel. */
-    transformPanel: {
-        type: 7,
-        name: 'transformPanel',
-        definitions: [
-            {
-                type: 1,
-                expr: 'void => enter-dropdown',
-                animation: {
-                    type: 4,
-                    styles: {
-                        type: 5,
-                        steps: [
-                            { type: 6, styles: { opacity: 0, transform: 'scale(1, 0.8)' }, offset: null },
-                            { type: 6, styles: { opacity: 1, transform: 'scale(1, 1)' }, offset: null },
-                        ],
-                    },
-                    timings: '120ms cubic-bezier(0, 0, 0.2, 1)',
-                },
-                options: null,
-            },
-            {
-                type: 1,
-                expr: '* => void',
-                animation: {
-                    type: 4,
-                    styles: { type: 6, styles: { opacity: 0 }, offset: null },
-                    timings: '100ms linear',
-                },
-                options: null,
-            },
-        ],
-        options: {},
-    },
-};
-
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { MTX_COLORPICKER_SCROLL_STRATEGY, MTX_COLORPICKER_SCROLL_STRATEGY_FACTORY, MTX_COLORPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER, MTX_COLORPICKER_VALIDATORS, MTX_COLORPICKER_VALUE_ACCESSOR, MtxColorpicker, MtxColorpickerContent, MtxColorpickerInput, MtxColorpickerModule, MtxColorpickerToggle, MtxColorpickerToggleIcon, mtxColorpickerAnimations };
+export { MTX_COLORPICKER_SCROLL_STRATEGY, MTX_COLORPICKER_VALIDATORS, MTX_COLORPICKER_VALUE_ACCESSOR, MtxColorPickerInputEvent, MtxColorpicker, MtxColorpickerContent, MtxColorpickerInput, MtxColorpickerModule, MtxColorpickerToggle, MtxColorpickerToggleIcon };
 //# sourceMappingURL=mtxColorpicker.mjs.map