@ng-matero/extensions 18.4.1 → 19.0.0

package/fesm2022/mtxColorpicker.mjs

@@ -1,22 +1,21 @@
 import { A11yModule } from '@angular/cdk/a11y';
-import * as i2 from '@angular/cdk/overlay';
 import { Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
 import { ComponentPortal, PortalModule } from '@angular/cdk/portal';
 import { NgTemplateOutlet, DOCUMENT, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, EventEmitter, Injector, afterNextRender, booleanAttribute, Inject, Optional, Output, forwardRef, Directive, Attribute, ContentChild, ViewChild, NgModule } from '@angular/core';
+import { InjectionToken, inject, ChangeDetectorRef, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, ViewContainerRef, EventEmitter, Injector, afterNextRender, booleanAttribute, Output, forwardRef, ElementRef, Directive, HostAttributeToken, ContentChild, ViewChild, 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 { Directionality } from '@angular/cdk/bidi';
 import { ESCAPE, hasModifierKey, UP_ARROW, DOWN_ARROW } from '@angular/cdk/keycodes';
 import { Subject, Subscription, merge, of } from 'rxjs';
 import { take, filter } from 'rxjs/operators';
 import { TinyColor } from '@ctrl/tinycolor';
 import { trigger, transition, animate, keyframes, style } from '@angular/animations';
-import * as i3 from '@angular/cdk/bidi';
 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';
-import * as i1$1 from '@angular/material/form-field';
 
 /**
  * Animations used by the colorpicker.
@@ -52,8 +51,8 @@ const MTX_COLORPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER = {
     useFactory: MTX_COLORPICKER_SCROLL_STRATEGY_FACTORY,
 };
 class MtxColorpickerContent {
-    constructor(_changeDetectorRef) {
-        this._changeDetectorRef = _changeDetectorRef;
+    constructor() {
+        this._changeDetectorRef = inject(ChangeDetectorRef);
         /** Current state of the animation. */
         this._animationState = 'enter-dropdown';
         /** Emits when an animation has finished. */
@@ -74,21 +73,56 @@ class MtxColorpickerContent {
             hsv: new TinyColor(e.color.hsv).toHsvString(),
         }[this.picker.format];
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxColorpickerContent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: MtxColorpickerContent, isStandalone: true, selector: "mtx-colorpicker-content", inputs: { color: "color" }, host: { listeners: { "@transformPanel.done": "_animationDone.next()" }, properties: { "class": "color ? \"mat-\" + color : \"\"", "@transformPanel": "_animationState" }, 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 [color]=\"picker.selected\" (onChangeComplete)=\"picker.select(getColorString($event))\" />\n}\n", styles: [".mtx-colorpicker-content{display:block;border-radius:4px}\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"] }], animations: [mtxColorpickerAnimations.transformPanel], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxColorpickerContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: MtxColorpickerContent, isStandalone: true, selector: "mtx-colorpicker-content", inputs: { color: "color" }, host: { listeners: { "@transformPanel.done": "_animationDone.next()" }, properties: { "class": "color ? \"mat-\" + color : \"\"", "@transformPanel": "_animationState" }, 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: [".mtx-colorpicker-content{display:block;border-radius:4px}\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"] }], animations: [mtxColorpickerAnimations.transformPanel], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxColorpickerContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxColorpickerContent, decorators: [{
             type: Component,
             args: [{ selector: 'mtx-colorpicker-content', host: {
                         'class': 'mtx-colorpicker-content',
                         '[class]': 'color ? "mat-" + color : ""',
                         '[@transformPanel]': '_animationState',
                         '(@transformPanel.done)': '_animationDone.next()',
-                    }, animations: [mtxColorpickerAnimations.transformPanel], exportAs: 'mtxColorpickerContent', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [ColorChromeModule, NgTemplateOutlet], template: "@if (picker.content) {\n  <ng-template [ngTemplateOutlet]=\"picker.content\"></ng-template>\n} @else {\n  <color-chrome [color]=\"picker.selected\" (onChangeComplete)=\"picker.select(getColorString($event))\" />\n}\n", styles: [".mtx-colorpicker-content{display:block;border-radius:4px}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { color: [{
+                    }, animations: [mtxColorpickerAnimations.transformPanel], 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: [".mtx-colorpicker-content{display:block;border-radius:4px}\n"] }]
+        }], propDecorators: { color: [{
                 type: Input
             }] } });
 class MtxColorpicker {
+    constructor() {
+        this._overlay = inject(Overlay);
+        this._viewContainerRef = inject(ViewContainerRef);
+        this._dir = inject(Directionality, { optional: true });
+        this._document = inject(DOCUMENT, { optional: true });
+        this._scrollStrategy = inject(MTX_COLORPICKER_SCROLL_STRATEGY);
+        this._inputStateChanges = Subscription.EMPTY;
+        /** Emits when the colorpicker has been opened. */
+        this.openedStream = new EventEmitter();
+        /** Emits when the colorpicker has been closed. */
+        this.closedStream = new EventEmitter();
+        /** Preferred position of the colorpicker in the X axis. */
+        this.xPosition = 'start';
+        /** Preferred position of the colorpicker in the Y axis. */
+        this.yPosition = 'below';
+        /**
+         * Whether to restore focus to the previously-focused element when the panel is closed.
+         * Note that automatic focus restoration is an accessibility feature and it is recommended that
+         * you provide your own equivalent, if you decide to turn it off.
+         */
+        this.restoreFocus = true;
+        this._opened = false;
+        /** The id for the colorpicker panel. */
+        this.id = `mtx-colorpicker-${colorpickerUid++}`;
+        this._validSelected = '';
+        /** The element that was focused before the colorpicker was opened. */
+        this._focusedElementBeforeOpen = null;
+        /** Unique class that will be added to the backdrop so that the test harnesses can look it up. */
+        this._backdropHarnessClass = `${this.id}-backdrop`;
+        /** Emits when the colorpicker is disabled. */
+        this._disabledChange = new Subject();
+        /** Emits new selected color when selected color changes. */
+        this._selectedChanged = new Subject();
+        this._injector = inject(Injector);
+    }
     get disabled() {
         return this._disabled === undefined && this.pickerInput
             ? this.pickerInput.disabled
@@ -128,41 +162,6 @@ class MtxColorpicker {
     set selected(value) {
         this._validSelected = value;
     }
-    constructor(_overlay, _viewContainerRef, scrollStrategy, _dir, _document) {
-        this._overlay = _overlay;
-        this._viewContainerRef = _viewContainerRef;
-        this._dir = _dir;
-        this._document = _document;
-        this._inputStateChanges = Subscription.EMPTY;
-        /** Emits when the colorpicker has been opened. */
-        this.openedStream = new EventEmitter();
-        /** Emits when the colorpicker has been closed. */
-        this.closedStream = new EventEmitter();
-        /** Preferred position of the colorpicker in the X axis. */
-        this.xPosition = 'start';
-        /** Preferred position of the colorpicker in the Y axis. */
-        this.yPosition = 'below';
-        /**
-         * Whether to restore focus to the previously-focused element when the panel is closed.
-         * Note that automatic focus restoration is an accessibility feature and it is recommended that
-         * you provide your own equivalent, if you decide to turn it off.
-         */
-        this.restoreFocus = true;
-        this._opened = false;
-        /** The id for the colorpicker panel. */
-        this.id = `mtx-colorpicker-${colorpickerUid++}`;
-        this._validSelected = '';
-        /** The element that was focused before the colorpicker was opened. */
-        this._focusedElementBeforeOpen = null;
-        /** Unique class that will be added to the backdrop so that the test harnesses can look it up. */
-        this._backdropHarnessClass = `${this.id}-backdrop`;
-        /** Emits when the colorpicker is disabled. */
-        this._disabledChange = new Subject();
-        /** Emits new selected color when selected color changes. */
-        this._selectedChanged = new Subject();
-        this._injector = inject(Injector);
-        this._scrollStrategy = scrollStrategy;
-    }
     ngOnChanges() { }
     ngOnDestroy() {
         this._destroyOverlay();
@@ -251,7 +250,7 @@ class MtxColorpicker {
             positionStrategy: this._getDropdownStrategy(),
             hasBackdrop: true,
             backdropClass: ['mat-overlay-transparent-backdrop', this._backdropHarnessClass],
-            direction: this._dir,
+            direction: this._dir || undefined,
             scrollStrategy: this._scrollStrategy(),
             panelClass: `mtx-colorpicker-popup`,
         })));
@@ -332,10 +331,10 @@ class MtxColorpicker {
                 (this.pickerInput && hasModifierKey(event, 'altKey') && event.keyCode === UP_ARROW));
         })));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxColorpicker, deps: [{ token: i2.Overlay }, { token: i0.ViewContainerRef }, { token: MTX_COLORPICKER_SCROLL_STRATEGY }, { token: i3.Directionality, optional: true }, { token: DOCUMENT, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.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: "19.0.4", ngImport: i0, type: MtxColorpicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.4", 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: "18.2.0", ngImport: i0, type: MtxColorpicker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxColorpicker, decorators: [{
             type: Component,
             args: [{
                     selector: 'mtx-colorpicker',
@@ -343,19 +342,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     exportAs: 'mtxColorpicker',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
-                    standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i2.Overlay }, { type: i0.ViewContainerRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MTX_COLORPICKER_SCROLL_STRATEGY]
-                }] }, { type: i3.Directionality, decorators: [{
-                    type: Optional
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }], propDecorators: { content: [{
+        }], propDecorators: { content: [{
                 type: Input
             }], openedStream: [{
                 type: Output,
@@ -404,6 +392,28 @@ const MTX_COLORPICKER_VALIDATORS = {
     multi: true,
 };
 class MtxColorpickerInput {
+    constructor() {
+        this._elementRef = inject(ElementRef);
+        this._formField = inject(MatFormField, { optional: true });
+        /** The input and output color format. */
+        this.format = 'hex';
+        /** Emits when a `change` event is fired on this `<input>`. */
+        this.colorChange = new EventEmitter();
+        /** Emits when an `input` event is fired on this `<input>`. */
+        this.colorInput = new EventEmitter();
+        /** Emits when the disabled state has changed */
+        this._disabledChange = new EventEmitter();
+        /** Emits when the value changes (either due to user input or programmatic change). */
+        this._valueChange = new EventEmitter();
+        this._onTouched = () => { };
+        this._validatorOnChange = () => { };
+        this._cvaOnChange = () => { };
+        this._pickerSubscription = Subscription.EMPTY;
+        /** The combined form control validator for this input. */
+        this._validator = Validators.compose([]);
+        /** Whether the last value set on the input was valid. */
+        this._lastValueValid = false;
+    }
     set mtxColorpicker(value) {
         if (!value) {
             return;
@@ -450,28 +460,6 @@ class MtxColorpickerInput {
         this._formatValue(value);
         this._valueChange.emit(value);
     }
-    constructor(_elementRef, _formField) {
-        this._elementRef = _elementRef;
-        this._formField = _formField;
-        /** The input and output color format. */
-        this.format = 'hex';
-        /** Emits when a `change` event is fired on this `<input>`. */
-        this.colorChange = new EventEmitter();
-        /** Emits when an `input` event is fired on this `<input>`. */
-        this.colorInput = new EventEmitter();
-        /** Emits when the disabled state has changed */
-        this._disabledChange = new EventEmitter();
-        /** Emits when the value changes (either due to user input or programmatic change). */
-        this._valueChange = new EventEmitter();
-        this._onTouched = () => { };
-        this._validatorOnChange = () => { };
-        this._cvaOnChange = () => { };
-        this._pickerSubscription = Subscription.EMPTY;
-        /** The combined form control validator for this input. */
-        this._validator = Validators.compose([]);
-        /** Whether the last value set on the input was valid. */
-        this._lastValueValid = false;
-    }
     ngAfterViewInit() {
         this._isInitialized = true;
     }
@@ -557,14 +545,14 @@ class MtxColorpickerInput {
     _formatValue(value) {
         this._elementRef.nativeElement.value = value ? value : '';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxColorpickerInput, deps: [{ token: i0.ElementRef }, { token: i1$1.MatFormField, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.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: "19.0.4", ngImport: i0, type: MtxColorpickerInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.0.4", 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: [
             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: "18.2.0", ngImport: i0, type: MtxColorpickerInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxColorpickerInput, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[mtxColorpicker]',
@@ -584,11 +572,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         '(keydown)': '_onKeydown($event)',
                     },
                     exportAs: 'mtxColorpickerInput',
-                    standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.MatFormField, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { mtxColorpicker: [{
+        }], propDecorators: { mtxColorpicker: [{
                 type: Input
             }], disabled: [{
                 type: Input,
@@ -605,14 +590,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.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: "18.2.0", ngImport: i0, type: MtxColorpickerToggleIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: MtxColorpickerToggleIcon, isStandalone: true, selector: "[mtxColorpickerToggleIcon]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxColorpickerToggleIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.4", type: MtxColorpickerToggleIcon, isStandalone: true, selector: "[mtxColorpickerToggleIcon]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxColorpickerToggleIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxColorpickerToggleIcon, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mtxColorpickerToggleIcon]',
-                    standalone: true,
                 }]
         }] });
 class MtxColorpickerToggle {
@@ -626,9 +610,10 @@ class MtxColorpickerToggle {
     set disabled(value) {
         this._disabled = value;
     }
-    constructor(_changeDetectorRef, defaultTabIndex) {
-        this._changeDetectorRef = _changeDetectorRef;
+    constructor() {
+        this._changeDetectorRef = inject(ChangeDetectorRef);
         this._stateChanges = Subscription.EMPTY;
+        const defaultTabIndex = inject(new HostAttributeToken('tabindex'), { optional: true });
         const parsedTabIndex = Number(defaultTabIndex);
         this.tabIndex = parsedTabIndex || parsedTabIndex === 0 ? parsedTabIndex : null;
     }
@@ -660,10 +645,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: "18.2.0", ngImport: i0, type: MtxColorpickerToggle, deps: [{ token: i0.ChangeDetectorRef }, { token: 'tabindex', attribute: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.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 #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      <path 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    </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-app-on-surface-variant))}.mtx-colorpicker-toggle-active{color:var(--mtx-colorpicker-toggle-active-state-icon-color, var(--mat-app-on-surface-variant))}.cdk-high-contrast-active .mtx-colorpicker-toggle-default-icon{color:CanvasText}\n"], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxColorpickerToggle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", 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]", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxColorpickerToggle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxColorpickerToggle, decorators: [{
             type: Component,
             args: [{ selector: 'mtx-colorpicker-toggle', host: {
                         'class': 'mtx-colorpicker-toggle',
@@ -675,11 +660,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.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, standalone: true, imports: [MatIconButton], template: "<button #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      <path 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    </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-app-on-surface-variant))}.mtx-colorpicker-toggle-active{color:var(--mtx-colorpicker-toggle-active-state-icon-color, var(--mat-app-on-surface-variant))}.cdk-high-contrast-active .mtx-colorpicker-toggle-default-icon{color:CanvasText}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
-                    type: Attribute,
-                    args: ['tabindex']
-                }] }], propDecorators: { picker: [{
+                    }, 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"] }]
+        }], ctorParameters: () => [], propDecorators: { picker: [{
                 type: Input,
                 args: ['for']
             }], tabIndex: [{
@@ -702,8 +684,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
             }] } });
 
 class MtxColorpickerModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxColorpickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: MtxColorpickerModule, imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxColorpickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.4", ngImport: i0, type: MtxColorpickerModule, imports: [CommonModule,
             OverlayModule,
             A11yModule,
             PortalModule,
@@ -718,7 +700,7 @@ class MtxColorpickerModule {
             MtxColorpickerInput,
             MtxColorpickerToggle,
             MtxColorpickerToggleIcon] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.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: "19.0.4", ngImport: i0, type: MtxColorpickerModule, providers: [MTX_COLORPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER], imports: [CommonModule,
             OverlayModule,
             A11yModule,
             PortalModule,
@@ -727,7 +709,7 @@ class MtxColorpickerModule {
             MtxColorpickerContent,
             MtxColorpickerToggle] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxColorpickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxColorpickerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [