@ngx-mce/color-picker 21.1.0

package/fesm2022/ngx-mce-color-picker.mjs

@@ -0,0 +1,1251 @@
+import * as i0 from '@angular/core';
+import { output, input, signal, Input, Directive, Component, ViewEncapsulation, Injectable, InjectionToken, viewChild, ChangeDetectionStrategy, EventEmitter, DOCUMENT, HostBinding, Output, Optional, Inject, forwardRef, effect, untracked, HostListener } from '@angular/core';
+import * as i3 from '@angular/forms';
+import { FormGroup, FormControl, Validators, ReactiveFormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
+import * as i1 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i2 from '@angular/material/input';
+import { MatInputModule, MAT_INPUT_VALUE_ACCESSOR } from '@angular/material/input';
+import { Subject, merge, Subscription, of } from 'rxjs';
+import { takeUntil, debounceTime, distinctUntilChanged, take, filter } from 'rxjs/operators';
+import { NgClass } from '@angular/common';
+import * as i1$1 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { ESCAPE, UP_ARROW, DOWN_ARROW } from '@angular/cdk/keycodes';
+import * as i2$1 from '@angular/cdk/overlay';
+import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import * as i1$2 from '@angular/material/dialog';
+import * as i4 from '@angular/cdk/bidi';
+import * as i2$2 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+
+const trimLeft = /^\s+/;
+const trimRight = /\s+$/;
+const tinyCounter = 0;
+const mathRound = Math.round;
+const mathMin = Math.min;
+const mathMax = Math.max;
+const mathRandom = Math.random;
+const NUMERIC_REGEX = /[^0-9]/g;
+const MAX_RGB = 255;
+const MIN_RGB = 0;
+/** List basic colors */
+const BASIC_COLORS = [
+    '#ffffff',
+    '#ffff00',
+    '#ff00ff',
+    '#ff0000',
+    '#c0c0c0',
+    '#808080',
+    '#808000',
+    '#800080',
+    '#800000',
+    '#00ffff',
+    '#00ff00',
+    '#008080',
+    '#008000',
+    '#0000ff',
+    '#000080',
+    '#000000',
+];
+/**
+ * Get color at position
+ * @param ctx
+ * @param x
+ * @param y
+ */
+function getColorAtPosition(ctx, x, y) {
+    const imageData = ctx.getImageData(x, y, 1, 1).data;
+    return { r: imageData[0], g: imageData[1], b: imageData[2] };
+}
+// `rgbaToHex`
+// Converts an RGBA color plus alpha transparency to hex
+// Assumes r, g, b are contained in the set [0, 255] and
+// a in [0, 1]. Returns a 4 or 8 character rgba hex
+function rgbaToHex(r, g, b, a, allow4Char) {
+    var hex = [
+        pad2(mathRound(r).toString(16)),
+        pad2(mathRound(g).toString(16)),
+        pad2(mathRound(b).toString(16)),
+        pad2(convertDecimalToHex(a)),
+    ];
+    // Return a 4 character hex if possible
+    if (allow4Char &&
+        hex[0].charAt(0) == hex[0].charAt(1) &&
+        hex[1].charAt(0) == hex[1].charAt(1) &&
+        hex[2].charAt(0) == hex[2].charAt(1) &&
+        hex[3].charAt(0) == hex[3].charAt(1)) {
+        return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0) + hex[3].charAt(0);
+    }
+    return hex.join('');
+}
+// Force a hex value to have 2 characters
+function pad2(c) {
+    return c.length == 1 ? '0' + c : '' + c;
+}
+// Converts a decimal to a hex value
+function convertDecimalToHex(d) {
+    return Math.round(parseFloat(d) * 255).toString(16);
+}
+// Converts a hex value to a decimal
+function convertHexToDecimal(h) {
+    return parseIntFromHex(h) / 255;
+}
+// Parse a base-16 hex value into a base-10 integer
+function parseIntFromHex(val) {
+    return parseInt(val, 16);
+}
+// `rgbToHex`
+// Converts an RGB color to hex
+// Assumes r, g, and b are contained in the set [0, 255]
+// Returns a 3 or 6 character hex
+function rgbToHex(r, g, b, allow3Char) {
+    var hex = [
+        pad2(mathRound(r).toString(16)),
+        pad2(mathRound(g).toString(16)),
+        pad2(mathRound(b).toString(16)),
+    ];
+    // Return a 3 character hex if possible
+    if (allow3Char &&
+        hex[0].charAt(0) == hex[0].charAt(1) &&
+        hex[1].charAt(0) == hex[1].charAt(1) &&
+        hex[2].charAt(0) == hex[2].charAt(1)) {
+        return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0);
+    }
+    return hex.join('');
+}
+// Actual matching.
+// Parentheses and commas are optional, but not required.
+// Whitespace can take the place of commas or opening parent
+const CSS_INTEGER = '[-\\+]?\\d+%?';
+const CSS_NUMBER = '[-\\+]?\\d*\\.\\d+%?';
+const CSS_UNIT = '(?:' + CSS_NUMBER + ')|(?:' + CSS_INTEGER + ')';
+const PERMISSIVE_MATCH3 = '[\\s|\\(]+(' + CSS_UNIT + ')[,|\\s]+(' + CSS_UNIT + ')[,|\\s]+(' + CSS_UNIT + ')\\s*\\)?';
+const PERMISSIVE_MATCH4 = '[\\s|\\(]+(' +
+    CSS_UNIT +
+    ')[,|\\s]+(' +
+    CSS_UNIT +
+    ')[,|\\s]+(' +
+    CSS_UNIT +
+    ')[,|\\s]+(' +
+    CSS_UNIT +
+    ')\\s*\\)?';
+const matchers = {
+    CSS_UNIT: new RegExp(CSS_UNIT),
+    rgb: new RegExp('rgb' + PERMISSIVE_MATCH3),
+    rgba: new RegExp('rgba' + PERMISSIVE_MATCH4),
+    hsl: new RegExp('hsl' + PERMISSIVE_MATCH3),
+    hsla: new RegExp('hsla' + PERMISSIVE_MATCH4),
+    hsv: new RegExp('hsv' + PERMISSIVE_MATCH3),
+    hsva: new RegExp('hsva' + PERMISSIVE_MATCH4),
+    hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
+    hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
+    hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
+    hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
+};
+// `stringInputToObject`
+// Permissive string parsing.  Take in a number of formats, and output an object
+// based on detected format.  Returns `{ r, g, b }` or `{ h, s, l }` or `{ h, s, v}`
+function stringInputToObject(color) {
+    color = color.replace(trimLeft, '').replace(trimRight, '').toLowerCase();
+    // Try to match string input using regular expressions.
+    // Keep most of the number bounding out of this function - don't worry about [0,1] or [0,100] or [0,360]
+    // Just return an object and let the conversion functions handle that.
+    // This way the result will be the same whether the tinycolor is initialized with string or object.
+    let match;
+    let obj;
+    if ((match = matchers.rgb.exec(color))) {
+        return { r: match[1], g: match[2], b: match[3], a: 1 };
+    }
+    if ((match = matchers.rgba.exec(color))) {
+        return { r: match[1], g: match[2], b: match[3], a: match[4] };
+    }
+    if ((match = matchers.hex8.exec(color))) {
+        return {
+            r: parseIntFromHex(match[1]),
+            g: parseIntFromHex(match[2]),
+            b: parseIntFromHex(match[3]),
+            a: convertHexToDecimal(match[4]),
+        };
+    }
+    if ((match = matchers.hex6.exec(color))) {
+        return {
+            r: parseIntFromHex(match[1]),
+            g: parseIntFromHex(match[2]),
+            b: parseIntFromHex(match[3]),
+            a: 1,
+        };
+    }
+    if ((match = matchers.hex4.exec(color))) {
+        return {
+            r: parseIntFromHex(match[1] + '' + match[1]),
+            g: parseIntFromHex(match[2] + '' + match[2]),
+            b: parseIntFromHex(match[3] + '' + match[3]),
+            a: convertHexToDecimal(match[4] + '' + match[4]),
+        };
+    }
+    if ((match = matchers.hex3.exec(color))) {
+        return {
+            r: parseIntFromHex(match[1] + '' + match[1]),
+            g: parseIntFromHex(match[2] + '' + match[2]),
+            b: parseIntFromHex(match[3] + '' + match[3]),
+            a: 1,
+        };
+    }
+    return null;
+}
+function createMissingDateImplError(provider) {
+    return Error(`NgxMatColorPicker: No provider found for ${provider}. You must define MAT_COLOR_FORMATS in your module`);
+}
+
+class Color {
+    constructor(_r, _g, _b, _a) {
+        this.r = _r > MAX_RGB ? MAX_RGB : _r;
+        this.g = _g > MAX_RGB ? MAX_RGB : _g;
+        this.b = _b > MAX_RGB ? MAX_RGB : _b;
+        if (_a != null) {
+            this.a = _a > 1 ? 1 : _a;
+        }
+        else {
+            this.a = 1;
+        }
+        this.roundA = Math.round(this.a);
+        this.hex = rgbToHex(this.r, this.g, this.b);
+        this.rgba = this.toRgba();
+    }
+    toHex(allow3Char) {
+        return rgbToHex(this.r, this.g, this.b, allow3Char);
+    }
+    toRgba() {
+        return `rgba(${this.r},${this.g},${this.b},${this.a})`;
+    }
+    toHexString(allow3Char) {
+        return '#' + this.toHex(allow3Char);
+    }
+    toRgbString() {
+        return this.a === 1
+            ? 'rgb(' + Math.round(this.r) + ', ' + Math.round(this.g) + ', ' + Math.round(this.b) + ')'
+            : 'rgba(' +
+                Math.round(this.r) +
+                ', ' +
+                Math.round(this.g) +
+                ', ' +
+                Math.round(this.b) +
+                ', ' +
+                this.roundA +
+                ')';
+    }
+    toHex8(allow4Char) {
+        return rgbaToHex(this.r, this.g, this.b, this.a, allow4Char);
+    }
+    toHex8String(allow4Char) {
+        return '#' + this.toHex8(allow4Char);
+    }
+    toString(format) {
+        let formatSet = !!format;
+        let formattedString;
+        let hasAlpha = this.a < 1 && this.a >= 0;
+        let needsAlphaFormat = !formatSet &&
+            hasAlpha &&
+            (format === 'hex' ||
+                format === 'hex6' ||
+                format === 'hex3' ||
+                format === 'hex4' ||
+                format === 'hex8');
+        if (needsAlphaFormat) {
+            return this.toRgbString();
+        }
+        if (format === 'rgb') {
+            formattedString = this.toRgbString();
+        }
+        if (format === 'hex' || format === 'hex6') {
+            formattedString = this.toHexString();
+        }
+        if (format === 'hex3') {
+            formattedString = this.toHexString(true);
+        }
+        if (format === 'hex4') {
+            formattedString = this.toHex8String(true);
+        }
+        if (format === 'hex8') {
+            formattedString = this.toHex8String();
+        }
+        return formattedString || this.toHexString();
+    }
+}
+
+class NgxMatBaseColorCanvas {
+    set setColor(color) {
+        this.color.set(color);
+    }
+    constructor(zone, elementId) {
+        this.zone = zone;
+        this.colorChanged = output();
+        this.theme = input(...(ngDevMode ? [undefined, { debugName: "theme" }] : []));
+        this.color = signal(null, ...(ngDevMode ? [{ debugName: "color" }] : []));
+        this.x = 0;
+        this.y = 0;
+        this.drag = false;
+        this._destroyed = new Subject();
+        this.elementId = elementId;
+    }
+    ngOnDestroy() {
+        this._destroyed.next();
+        this._destroyed.complete();
+    }
+    ngAfterViewInit() {
+        this.canvas = document.getElementById(this.elementId);
+        this.ctx = this.canvas.getContext('2d');
+        this.width = this.canvas.width;
+        this.height = this.canvas.height;
+        this.draw();
+    }
+    draw() {
+        this.ctx.clearRect(0, 0, this.width, this.height);
+        this.ctx.rect(0, 0, this.width, this.height);
+        this.fillGradient();
+        if (this.y != 0) {
+            this.redrawIndicator(this.x, this.y);
+        }
+    }
+    onMousedown(e) {
+        this.drag = true;
+        this.changeColor(e);
+        this.zone.runOutsideAngular(() => {
+            this.canvas.addEventListener('mousemove', this.onMousemove.bind(this));
+        });
+    }
+    onMousemove(e) {
+        if (this.drag) {
+            this.zone.run(() => {
+                this.changeColor(e);
+            });
+        }
+    }
+    onMouseup(e) {
+        this.drag = false;
+        this.canvas.removeEventListener('mousemove', this.onMousemove);
+    }
+    emitChange(color) {
+        this.colorChanged.emit(color);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: NgxMatBaseColorCanvas, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.3", type: NgxMatBaseColorCanvas, isStandalone: true, inputs: { theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, setColor: { classPropertyName: "setColor", publicName: "color", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { colorChanged: "colorChanged" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: NgxMatBaseColorCanvas, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [{ type: i0.NgZone }, { type: undefined }], propDecorators: { colorChanged: [{ type: i0.Output, args: ["colorChanged"] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], setColor: [{
+                type: Input,
+                args: [{
+                        alias: 'color',
+                    }]
+            }] } });
+
+class NgxMatColorSliderComponent extends NgxMatBaseColorCanvas {
+    constructor(zone) {
+        super(zone, 'color-strip');
+        this.zone = zone;
+    }
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+    }
+    fillGradient() {
+        const grd = this.ctx.createLinearGradient(0, 0, 0, this.height);
+        grd.addColorStop(0, 'rgba(255, 0, 0, 1)');
+        grd.addColorStop(0.17, 'rgba(255, 255, 0, 1)');
+        grd.addColorStop(0.34, 'rgba(0, 255, 0, 1)');
+        grd.addColorStop(0.51, 'rgba(0, 255, 255, 1)');
+        grd.addColorStop(0.68, 'rgba(0, 0, 255, 1)');
+        grd.addColorStop(0.85, 'rgba(255, 0, 255, 1)');
+        grd.addColorStop(1, 'rgba(255, 0, 0, 1)');
+        this.ctx.fillStyle = grd;
+        this.ctx.fill();
+    }
+    redrawIndicator(x, y) {
+        this.ctx.beginPath();
+        this.ctx.strokeStyle = 'white';
+        this.ctx.lineWidth = 2;
+        this.ctx.arc(7.5, y, 7.5, 0, 2 * Math.PI, false);
+        this.ctx.stroke();
+        this.ctx.closePath();
+    }
+    changeColor(e) {
+        this.x = e.offsetX;
+        this.y = e.offsetY;
+        this.draw();
+        const { r, g, b } = getColorAtPosition(this.ctx, e.offsetX, e.offsetY);
+        this.emitChange(new Color(r, g, b));
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: NgxMatColorSliderComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: NgxMatColorSliderComponent, isStandalone: true, selector: "ngx-mat-color-slider", usesInheritance: true, ngImport: i0, template: "<canvas\r\n  id=\"color-strip\"\r\n  class=\"zone-strip\"\r\n  (mousedown)=\"onMousedown($event)\"\r\n  (mouseup)=\"onMouseup($event)\"\r\n  width=\"15\"\r\n  height=\"234\"\r\n></canvas>\r\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: NgxMatColorSliderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-mat-color-slider', template: "<canvas\r\n  id=\"color-strip\"\r\n  class=\"zone-strip\"\r\n  (mousedown)=\"onMousedown($event)\"\r\n  (mouseup)=\"onMouseup($event)\"\r\n  width=\"15\"\r\n  height=\"234\"\r\n></canvas>\r\n" }]
+        }], ctorParameters: () => [{ type: i0.NgZone }] });
+
+const RADIUS_NOB = 5;
+class NgxMatColorCanvasComponent extends NgxMatBaseColorCanvas {
+    get rCtrl() {
+        return this.formGroup.get('r');
+    }
+    get gCtrl() {
+        return this.formGroup.get('g');
+    }
+    get bCtrl() {
+        return this.formGroup.get('b');
+    }
+    get aCtrl() {
+        return this.formGroup.get('a');
+    }
+    get hexCtrl() {
+        return this.formGroup.get('hex');
+    }
+    constructor(zone) {
+        super(zone, 'color-block');
+        this.zone = zone;
+        this._resetBaseColor = true;
+        this.formGroup = new FormGroup({
+            r: new FormControl(null, [Validators.required]),
+            g: new FormControl(null, [Validators.required]),
+            b: new FormControl(null, [Validators.required]),
+            a: new FormControl(null, [Validators.required]),
+            hex: new FormControl(null, [Validators.required, Validators.pattern(matchers.hex6)]),
+        });
+    }
+    ngOnInit() {
+        const rgbaCtrl$ = merge(this.rCtrl.valueChanges, this.gCtrl.valueChanges, this.bCtrl.valueChanges, this.aCtrl.valueChanges);
+        rgbaCtrl$.pipe(takeUntil(this._destroyed), debounceTime(400)).subscribe((_) => {
+            const color = new Color(Number(this.rCtrl.value), Number(this.gCtrl.value), Number(this.bCtrl.value), Number(this.aCtrl.value));
+            this.emitChange(color);
+        });
+        const hexCtrl$ = this.hexCtrl.valueChanges;
+        hexCtrl$
+            .pipe(takeUntil(this._destroyed), debounceTime(400), distinctUntilChanged())
+            .subscribe((hex) => {
+            const obj = stringInputToObject(hex);
+            if (obj != null) {
+                const color = new Color(obj.r, obj.g, obj.b, obj.a);
+                this.emitChange(color);
+            }
+        });
+    }
+    ngOnChanges(changes) {
+        if (changes.color && changes.color.currentValue) {
+            this.updateForm(changes.color.currentValue);
+            if (this._resetBaseColor) {
+                this._baseColor = changes.color.currentValue;
+            }
+            this._resetBaseColor = true;
+            if (!changes.color.firstChange) {
+                this.draw();
+            }
+        }
+    }
+    updateForm(val) {
+        const config = { emitEvent: false };
+        this.rCtrl.setValue(val.r, config);
+        this.gCtrl.setValue(val.g, config);
+        this.bCtrl.setValue(val.b, config);
+        this.aCtrl.setValue(val.a, config);
+        this.hexCtrl.setValue(val.hex, config);
+    }
+    redrawIndicator(x, y) {
+        this.ctx.beginPath();
+        this.ctx.strokeStyle = 'white';
+        this.ctx.arc(x, y, RADIUS_NOB, 0, 2 * Math.PI, false);
+        this.ctx.stroke();
+        this.ctx.closePath();
+    }
+    fillGradient() {
+        this.ctx.fillStyle = this._baseColor ? this._baseColor.rgba : 'rgba(255,255,255,1)';
+        this.ctx.fillRect(0, 0, this.width, this.height);
+        const grdWhite = this.ctx.createLinearGradient(0, 0, this.width, 0);
+        grdWhite.addColorStop(0, 'rgba(255,255,255,1)');
+        grdWhite.addColorStop(1, 'rgba(255,255,255,0)');
+        this.ctx.fillStyle = grdWhite;
+        this.ctx.fillRect(0, 0, this.width, this.height);
+        const grdBlack = this.ctx.createLinearGradient(0, 0, 0, this.height);
+        grdBlack.addColorStop(0, 'rgba(0,0,0,0)');
+        grdBlack.addColorStop(1, 'rgba(0,0,0,1)');
+        this.ctx.fillStyle = grdBlack;
+        this.ctx.fillRect(0, 0, this.width, this.height);
+    }
+    onSliderColorChanged(c) {
+        this._baseColor = c;
+        this.color.set(c);
+        this.fillGradient();
+        this.emitChange(c);
+    }
+    changeColor(e) {
+        this.x = e.offsetX;
+        this.y = e.offsetY;
+        this._resetBaseColor = false;
+        this.draw();
+        const { r, g, b } = getColorAtPosition(this.ctx, e.offsetX, e.offsetY);
+        this.emitChange(new Color(r, g, b));
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: NgxMatColorCanvasComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: NgxMatColorCanvasComponent, isStandalone: true, selector: "ngx-mat-color-canvas", host: { classAttribute: "ngx-mat-color-canvas" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"formGroup\">\r\n  <div class=\"color-canvas-row\">\r\n    <div class=\"zone-canvas\">\r\n      <canvas\r\n        id=\"color-block\"\r\n        class=\"zone-block\"\r\n        (mousedown)=\"onMousedown($event)\"\r\n        (mouseup)=\"onMouseup($event)\"\r\n        width=\"200\"\r\n        height=\"235\"\r\n      ></canvas>\r\n      <ngx-mat-color-slider (colorChanged)=\"onSliderColorChanged($event)\" />\r\n    </div>\r\n\r\n    <div class=\"zone-inputs\">\r\n      <mat-form-field [color]=\"theme\">\r\n        <mat-label>R</mat-label>\r\n        <input\r\n          matInput\r\n          formControlName=\"r\"\r\n          ngxMatNumericColorInput\r\n          autocomplete=\"off\"\r\n        />\r\n      </mat-form-field>\r\n\r\n      <mat-form-field [color]=\"theme\">\r\n        <mat-label>G</mat-label>\r\n        <input\r\n          matInput\r\n          formControlName=\"g\"\r\n          ngxMatNumericColorInput\r\n          autocomplete=\"off\"\r\n        />\r\n      </mat-form-field>\r\n\r\n      <mat-form-field [color]=\"theme\">\r\n        <mat-label>B</mat-label>\r\n        <input\r\n          matInput\r\n          formControlName=\"b\"\r\n          ngxMatNumericColorInput\r\n          autocomplete=\"off\"\r\n        />\r\n      </mat-form-field>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"color-canvas-row\">\r\n    <button\r\n      mat-mini-fab\r\n      [style.background-color]=\"color()?.rgba || 'transparent'\"\r\n      class=\"preview\"\r\n    ></button>\r\n    <mat-form-field [color]=\"theme\">\r\n      <mat-label>HEX6</mat-label>\r\n      <mat-label matPrefix class=\"symbol\">#&nbsp;</mat-label>\r\n      <input matInput formControlName=\"hex\" autocomplete=\"off\" />\r\n    </mat-form-field>\r\n    <mat-form-field class=\"input-opacity\" [color]=\"theme\">\r\n      <mat-label>A</mat-label>\r\n      <input\r\n        matInput\r\n        formControlName=\"a\"\r\n        type=\"number\"\r\n        min=\"0\"\r\n        max=\"1\"\r\n        step=\"0.1\"\r\n        autocomplete=\"off\"\r\n      />\r\n    </mat-form-field>\r\n  </div>\r\n</form>\r\n", styles: [".ngx-mat-color-canvas .color-canvas-row{display:flex}.ngx-mat-color-canvas .color-canvas-row:first-of-type{height:235px;margin-bottom:12px}.ngx-mat-color-canvas .color-canvas-row:first-of-type .card{height:180px}.ngx-mat-color-canvas .color-canvas-row canvas:hover{cursor:crosshair}.ngx-mat-color-canvas .color-canvas-row .zone{display:flex}.ngx-mat-color-canvas .color-canvas-row .zone-canvas{height:235px}.ngx-mat-color-canvas .color-canvas-row .zone-canvas .zone-block{border:1px solid rgba(0,0,0,.12)}.ngx-mat-color-canvas .color-canvas-row .zone-strip{flex-basis:auto;margin-left:10px}.ngx-mat-color-canvas .color-canvas-row .zone-inputs{display:flex;width:60px;height:235px;flex-direction:column;margin-left:16px;margin-top:12px}.ngx-mat-color-canvas .color-canvas-row:nth-of-type(2){display:flex}.ngx-mat-color-canvas .color-canvas-row:nth-of-type(2) .preview{min-width:40px;min-height:40px;height:40px;width:40px;margin-top:12px}.ngx-mat-color-canvas .color-canvas-row:nth-of-type(2) .mat-mdc-form-field{margin-left:16px}.ngx-mat-color-canvas .color-canvas-row:nth-of-type(2) .mat-mdc-form-field:first-of-type{width:170px}.ngx-mat-color-canvas .color-canvas-row:nth-of-type(2) .mat-mdc-form-field:first-of-type .symbol{font-weight:700;color:#0000008a}.ngx-mat-color-canvas .color-canvas-row:nth-of-type(2) .mat-mdc-form-field:last-of-type{width:60px}.ngx-mat-color-canvas .color-canvas-row:nth-of-type(2) .mat-mdc-form-field:last-of-type .mat-mdc-text-field-wrapper{padding:0 8px}.ngx-mat-color-canvas .mat-mdc-form-field-label{font-weight:700}.ngx-mat-color-canvas .mat-mdc-form-field .mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: NgxMatColorSliderComponent, selector: "ngx-mat-color-slider" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: NgxMatColorCanvasComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-mat-color-canvas', encapsulation: ViewEncapsulation.None, host: {
+                        class: 'ngx-mat-color-canvas',
+                    }, imports: [MatFormFieldModule, MatInputModule, NgxMatColorSliderComponent, ReactiveFormsModule], template: "<form [formGroup]=\"formGroup\">\r\n  <div class=\"color-canvas-row\">\r\n    <div class=\"zone-canvas\">\r\n      <canvas\r\n        id=\"color-block\"\r\n        class=\"zone-block\"\r\n        (mousedown)=\"onMousedown($event)\"\r\n        (mouseup)=\"onMouseup($event)\"\r\n        width=\"200\"\r\n        height=\"235\"\r\n      ></canvas>\r\n      <ngx-mat-color-slider (colorChanged)=\"onSliderColorChanged($event)\" />\r\n    </div>\r\n\r\n    <div class=\"zone-inputs\">\r\n      <mat-form-field [color]=\"theme\">\r\n        <mat-label>R</mat-label>\r\n        <input\r\n          matInput\r\n          formControlName=\"r\"\r\n          ngxMatNumericColorInput\r\n          autocomplete=\"off\"\r\n        />\r\n      </mat-form-field>\r\n\r\n      <mat-form-field [color]=\"theme\">\r\n        <mat-label>G</mat-label>\r\n        <input\r\n          matInput\r\n          formControlName=\"g\"\r\n          ngxMatNumericColorInput\r\n          autocomplete=\"off\"\r\n        />\r\n      </mat-form-field>\r\n\r\n      <mat-form-field [color]=\"theme\">\r\n        <mat-label>B</mat-label>\r\n        <input\r\n          matInput\r\n          formControlName=\"b\"\r\n          ngxMatNumericColorInput\r\n          autocomplete=\"off\"\r\n        />\r\n      </mat-form-field>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"color-canvas-row\">\r\n    <button\r\n      mat-mini-fab\r\n      [style.background-color]=\"color()?.rgba || 'transparent'\"\r\n      class=\"preview\"\r\n    ></button>\r\n    <mat-form-field [color]=\"theme\">\r\n      <mat-label>HEX6</mat-label>\r\n      <mat-label matPrefix class=\"symbol\">#&nbsp;</mat-label>\r\n      <input matInput formControlName=\"hex\" autocomplete=\"off\" />\r\n    </mat-form-field>\r\n    <mat-form-field class=\"input-opacity\" [color]=\"theme\">\r\n      <mat-label>A</mat-label>\r\n      <input\r\n        matInput\r\n        formControlName=\"a\"\r\n        type=\"number\"\r\n        min=\"0\"\r\n        max=\"1\"\r\n        step=\"0.1\"\r\n        autocomplete=\"off\"\r\n      />\r\n    </mat-form-field>\r\n  </div>\r\n</form>\r\n", styles: [".ngx-mat-color-canvas .color-canvas-row{display:flex}.ngx-mat-color-canvas .color-canvas-row:first-of-type{height:235px;margin-bottom:12px}.ngx-mat-color-canvas .color-canvas-row:first-of-type .card{height:180px}.ngx-mat-color-canvas .color-canvas-row canvas:hover{cursor:crosshair}.ngx-mat-color-canvas .color-canvas-row .zone{display:flex}.ngx-mat-color-canvas .color-canvas-row .zone-canvas{height:235px}.ngx-mat-color-canvas .color-canvas-row .zone-canvas .zone-block{border:1px solid rgba(0,0,0,.12)}.ngx-mat-color-canvas .color-canvas-row .zone-strip{flex-basis:auto;margin-left:10px}.ngx-mat-color-canvas .color-canvas-row .zone-inputs{display:flex;width:60px;height:235px;flex-direction:column;margin-left:16px;margin-top:12px}.ngx-mat-color-canvas .color-canvas-row:nth-of-type(2){display:flex}.ngx-mat-color-canvas .color-canvas-row:nth-of-type(2) .preview{min-width:40px;min-height:40px;height:40px;width:40px;margin-top:12px}.ngx-mat-color-canvas .color-canvas-row:nth-of-type(2) .mat-mdc-form-field{margin-left:16px}.ngx-mat-color-canvas .color-canvas-row:nth-of-type(2) .mat-mdc-form-field:first-of-type{width:170px}.ngx-mat-color-canvas .color-canvas-row:nth-of-type(2) .mat-mdc-form-field:first-of-type .symbol{font-weight:700;color:#0000008a}.ngx-mat-color-canvas .color-canvas-row:nth-of-type(2) .mat-mdc-form-field:last-of-type{width:60px}.ngx-mat-color-canvas .color-canvas-row:nth-of-type(2) .mat-mdc-form-field:last-of-type .mat-mdc-text-field-wrapper{padding:0 8px}.ngx-mat-color-canvas .mat-mdc-form-field-label{font-weight:700}.ngx-mat-color-canvas .mat-mdc-form-field .mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:transparent}\n"] }]
+        }], ctorParameters: () => [{ type: i0.NgZone }] });
+
+class NgxMatColorCollectionComponent {
+    constructor() {
+        this.colorChanged = output();
+        this.selectedColor = signal('', ...(ngDevMode ? [{ debugName: "selectedColor" }] : []));
+        this.colors1 = BASIC_COLORS.slice(0, 8);
+        this.colors2 = BASIC_COLORS.slice(8, 16);
+    }
+    set color(c) {
+        if (c) {
+            this.selectedColor.set(c.toHexString());
+        }
+    }
+    select(hex) {
+        this.selectedColor.set(hex);
+        const { r, g, b, a } = stringInputToObject(hex);
+        this.colorChanged.emit(new Color(r, g, b, a));
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: NgxMatColorCollectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: NgxMatColorCollectionComponent, isStandalone: true, selector: "ngx-mat-color-collection", inputs: { color: "color" }, outputs: { colorChanged: "colorChanged" }, host: { classAttribute: "ngx-mat-color-collection" }, ngImport: i0, template: "<div class=\"color-collection-row\">\r\n  @for (c of colors1; track c) {\r\n    <button\r\n      mat-mini-fab\r\n      [style.background-color]=\"c\"\r\n      class=\"btn-color\"\r\n      (click)=\"select(c)\"\r\n      [ngClass]=\"{ active: selectedColor() === c }\"\r\n      [disableRipple]=\"true\"></button>\r\n  }\r\n</div>\r\n<div class=\"color-collection-row\">\r\n  @for (c of colors2; track c) {\r\n    <button\r\n      mat-mini-fab\r\n      [style.background-color]=\"c\"\r\n      class=\"btn-color\"\r\n      (click)=\"select(c)\"\r\n      [ngClass]=\"{ active: selectedColor() === c }\"\r\n      [disableRipple]=\"true\"></button>\r\n  }\r\n</div>\r\n", styles: [".ngx-mat-color-collection .btn-color{height:20px;width:20px;margin-right:11px;box-shadow:none;opacity:.3;will-change:opacity;transition:opacity .3s linear}.ngx-mat-color-collection .btn-color.active{box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f;opacity:1}.ngx-mat-color-collection .btn-color .mat-mdc-button-touch-target{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: NgxMatColorCollectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-mat-color-collection', encapsulation: ViewEncapsulation.None, host: {
+                        class: 'ngx-mat-color-collection',
+                    }, imports: [MatButtonModule, NgClass], template: "<div class=\"color-collection-row\">\r\n  @for (c of colors1; track c) {\r\n    <button\r\n      mat-mini-fab\r\n      [style.background-color]=\"c\"\r\n      class=\"btn-color\"\r\n      (click)=\"select(c)\"\r\n      [ngClass]=\"{ active: selectedColor() === c }\"\r\n      [disableRipple]=\"true\"></button>\r\n  }\r\n</div>\r\n<div class=\"color-collection-row\">\r\n  @for (c of colors2; track c) {\r\n    <button\r\n      mat-mini-fab\r\n      [style.background-color]=\"c\"\r\n      class=\"btn-color\"\r\n      (click)=\"select(c)\"\r\n      [ngClass]=\"{ active: selectedColor() === c }\"\r\n      [disableRipple]=\"true\"></button>\r\n  }\r\n</div>\r\n", styles: [".ngx-mat-color-collection .btn-color{height:20px;width:20px;margin-right:11px;box-shadow:none;opacity:.3;will-change:opacity;transition:opacity .3s linear}.ngx-mat-color-collection .btn-color.active{box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f;opacity:1}.ngx-mat-color-collection .btn-color .mat-mdc-button-touch-target{display:none!important}\n"] }]
+        }], propDecorators: { colorChanged: [{ type: i0.Output, args: ["colorChanged"] }], color: [{
+                type: Input
+            }] } });
+
+class NgxMatColorPaletteComponent {
+    constructor() {
+        this.colorChanged = output();
+        this.color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : []));
+        this.theme = input(...(ngDevMode ? [undefined, { debugName: "theme" }] : []));
+    }
+    handleColorChanged(color) {
+        this.colorChanged.emit(color);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: NgxMatColorPaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.3", type: NgxMatColorPaletteComponent, isStandalone: true, selector: "ngx-mat-color-palette", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorChanged: "colorChanged" }, host: { classAttribute: "ngx-mat-color-palette" }, ngImport: i0, template: "<ngx-mat-color-canvas\r\n  (colorChanged)=\"handleColorChanged($event)\"\r\n  [color]=\"color()\"\r\n  [theme]=\"theme()\"\r\n/>\r\n\r\n<ngx-mat-color-collection\r\n  (colorChanged)=\"handleColorChanged($event)\"\r\n  [color]=\"color()\"\r\n/>\r\n", styles: [".ngx-mat-color-palette .actions{margin-top:10px;display:flex}.ngx-mat-color-palette .actions .left{display:flex;flex-direction:column;margin-right:15px}.ngx-mat-color-palette .actions .left .preview{flex:2 1 auto;margin-bottom:10px}.ngx-mat-color-palette .actions .right{display:flex;width:60px;flex-direction:column}\n"], dependencies: [{ kind: "component", type: NgxMatColorCollectionComponent, selector: "ngx-mat-color-collection", inputs: ["color"], outputs: ["colorChanged"] }, { kind: "component", type: NgxMatColorCanvasComponent, selector: "ngx-mat-color-canvas" }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: NgxMatColorPaletteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-mat-color-palette', encapsulation: ViewEncapsulation.None, host: {
+                        class: 'ngx-mat-color-palette',
+                    }, imports: [NgxMatColorCollectionComponent, NgxMatColorCanvasComponent], template: "<ngx-mat-color-canvas\r\n  (colorChanged)=\"handleColorChanged($event)\"\r\n  [color]=\"color()\"\r\n  [theme]=\"theme()\"\r\n/>\r\n\r\n<ngx-mat-color-collection\r\n  (colorChanged)=\"handleColorChanged($event)\"\r\n  [color]=\"color()\"\r\n/>\r\n", styles: [".ngx-mat-color-palette .actions{margin-top:10px;display:flex}.ngx-mat-color-palette .actions .left{display:flex;flex-direction:column;margin-right:15px}.ngx-mat-color-palette .actions .left .preview{flex:2 1 auto;margin-bottom:10px}.ngx-mat-color-palette .actions .right{display:flex;width:60px;flex-direction:column}\n"] }]
+        }], propDecorators: { colorChanged: [{ type: i0.Output, args: ["colorChanged"] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }] } });
+
+class ColorAdapter {
+    sameColor(a, b) {
+        if (a == null && b == null)
+            return true;
+        if (a != null && b != null)
+            return a.rgba === b.rgba;
+        return false;
+    }
+    format(c, format) {
+        return c.toString(format);
+    }
+    parse(value) {
+        const obj = stringInputToObject(value);
+        if (obj) {
+            return new Color(obj.r, obj.g, obj.b, obj.a);
+        }
+        return null;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ColorAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ColorAdapter }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ColorAdapter, decorators: [{
+            type: Injectable
+        }] });
+
+const NGX_MAT_COLOR_FORMATS = {
+    display: {
+        colorInput: 'hex',
+    },
+};
+const MAT_COLOR_FORMATS = new InjectionToken('mat-color-formats');
+
+/** Injection token that determines the scroll handling while the calendar is open. */
+const NGX_MAT_COLOR_PICKER_SCROLL_STRATEGY = new InjectionToken('ngx-mat-colorpicker-scroll-strategy');
+function NGX_MAT_COLOR_PICKER_SCROLL_STRATEGY_FACTORY(overlay) {
+    return () => overlay.scrollStrategies.reposition();
+}
+const NGX_MAT_COLOR_PICKER_SCROLL_STRATEGY_FACTORY_PROVIDER = {
+    provide: NGX_MAT_COLOR_PICKER_SCROLL_STRATEGY,
+    deps: [Overlay],
+    useFactory: NGX_MAT_COLOR_PICKER_SCROLL_STRATEGY_FACTORY,
+};
+class NgxMatColorPickerContentComponent {
+    constructor() {
+        /** Reference to the internal calendar component. */
+        this._palette = viewChild(NgxMatColorPaletteComponent, ...(ngDevMode ? [{ debugName: "_palette" }] : []));
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: NgxMatColorPickerContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.3", type: NgxMatColorPickerContentComponent, isStandalone: true, selector: "ngx-mat-color-picker-content", inputs: { color: "color" }, host: { properties: { "@transformPanel": "\"enter\"", "class.ngx-mat-colorpicker-content-touch": "picker.touchUi" }, classAttribute: "ngx-mat-colorpicker-content" }, viewQueries: [{ propertyName: "_palette", first: true, predicate: NgxMatColorPaletteComponent, descendants: true, isSignal: true }], exportAs: ["ngxMatColorPickerContent"], ngImport: i0, template: "<ngx-mat-color-palette\r\n  (colorChanged)=\"picker.select($event)\"\r\n  [color]=\"picker._selected\"\r\n  [theme]=\"color\"></ngx-mat-color-palette>\r\n", styles: [".ngx-mat-colorpicker-content{display:block;border-radius:4px;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f;background-color:#fff;color:#000000de;padding:16px}.ngx-mat-colorpicker-content .ngx-mat-color-palette{width:296px;height:354px}.ngx-mat-colorpicker-content-touch{display:block;max-height:80vh;overflow:auto}.ngx-mat-colorpicker-content-touch .ngx-mat-color-palette{min-width:250px;min-height:312px;max-width:750px;max-height:788px}@media all and (orientation:landscape){.mat-colorpicker-content-touch .ngx-mat-color-palette{width:64vh;height:80vh}}@media all and (orientation:portrait){.mat-colorpicker-content-touch .ngx-mat-color-palette{width:80vw;height:100vw}}\n"], dependencies: [{ kind: "component", type: NgxMatColorPaletteComponent, selector: "ngx-mat-color-palette", inputs: ["color", "theme"], outputs: ["colorChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: NgxMatColorPickerContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-mat-color-picker-content', host: {
+                        class: 'ngx-mat-colorpicker-content',
+                        '[@transformPanel]': '"enter"',
+                        '[class.ngx-mat-colorpicker-content-touch]': 'picker.touchUi',
+                    }, exportAs: 'ngxMatColorPickerContent', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, inputs: ['color'], imports: [NgxMatColorPaletteComponent], template: "<ngx-mat-color-palette\r\n  (colorChanged)=\"picker.select($event)\"\r\n  [color]=\"picker._selected\"\r\n  [theme]=\"color\"></ngx-mat-color-palette>\r\n", styles: [".ngx-mat-colorpicker-content{display:block;border-radius:4px;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f;background-color:#fff;color:#000000de;padding:16px}.ngx-mat-colorpicker-content .ngx-mat-color-palette{width:296px;height:354px}.ngx-mat-colorpicker-content-touch{display:block;max-height:80vh;overflow:auto}.ngx-mat-colorpicker-content-touch .ngx-mat-color-palette{min-width:250px;min-height:312px;max-width:750px;max-height:788px}@media all and (orientation:landscape){.mat-colorpicker-content-touch .ngx-mat-color-palette{width:64vh;height:80vh}}@media all and (orientation:portrait){.mat-colorpicker-content-touch .ngx-mat-color-palette{width:80vw;height:100vw}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { _palette: [{ type: i0.ViewChild, args: [i0.forwardRef(() => NgxMatColorPaletteComponent), { isSignal: true }] }] } });
+class NgxMatColorPickerComponent {
+    get disabled() {
+        return this._disabled === undefined && this._pickerInput
+            ? this._pickerInput.disabled
+            : !!this._disabled;
+    }
+    set disabled(value) {
+        const newValue = coerceBooleanProperty(value);
+        if (newValue !== this._disabled) {
+            this._disabled = newValue;
+            this._disabledChange.next(newValue);
+        }
+    }
+    get touchUi() {
+        return this._touchUi;
+    }
+    set touchUi(value) {
+        this._touchUi = coerceBooleanProperty(value);
+    }
+    /** Whether the calendar is open. */
+    get opened() {
+        return this._opened;
+    }
+    set opened(value) {
+        value ? this.open() : this.close();
+    }
+    /** Default Color palette to use on the datepicker's calendar. */
+    get defaultColor() {
+        return this._defaultColor;
+    }
+    set defaultColor(value) {
+        this._defaultColor = value;
+    }
+    /** Color palette to use on the datepicker's calendar. */
+    get color() {
+        return this._color || (this._pickerInput ? this._pickerInput.getThemePalette() : undefined);
+    }
+    set color(value) {
+        this._color = value;
+    }
+    get isPrimary() {
+        return this.color === 'primary';
+    }
+    get isAccent() {
+        return this.color === 'accent';
+    }
+    get isWarn() {
+        return this.color === 'warn';
+    }
+    /** The currently selected date. */
+    get _selected() {
+        return this._validSelected;
+    }
+    set _selected(value) {
+        this._validSelected = value;
+    }
+    constructor(_dialog, _overlay, _zone, _adapter, _dir, scrollStrategy, _document, _viewContainerRef) {
+        this._dialog = _dialog;
+        this._overlay = _overlay;
+        this._zone = _zone;
+        this._adapter = _adapter;
+        this._dir = _dir;
+        this._document = _document;
+        this._viewContainerRef = _viewContainerRef;
+        this.id = `ngx-mat-color-picker-${Math.floor(Math.random() * 1000000)}`;
+        /** Emits when the datepicker has been opened. */
+        this.openedStream = new EventEmitter();
+        /** Emits when the datepicker has been closed. */
+        this.closedStream = new EventEmitter();
+        this._touchUi = false;
+        this._opened = false;
+        this._defaultColor = 'primary';
+        this._validSelected = null;
+        /** Emits when the datepicker is disabled. */
+        this._disabledChange = new EventEmitter();
+        /** The element that was focused before the datepicker was opened. */
+        this._focusedElementBeforeOpen = null;
+        /** Subscription to value changes in the associated input element. */
+        this._inputSubscription = Subscription.EMPTY;
+        /** Emits new selected date when selected date changes. */
+        this._selectedChanged = new Subject();
+        this._scrollStrategy = scrollStrategy;
+    }
+    ngOnDestroy() {
+        this.close();
+        this._inputSubscription.unsubscribe();
+        this._disabledChange.complete();
+        if (this._popupRef) {
+            this._popupRef.dispose();
+            this._popupComponentRef = null;
+        }
+    }
+    /** Selects the given date */
+    select(nextVal) {
+        let oldValue = this._selected;
+        this._selected = nextVal;
+        if (!this._adapter.sameColor(oldValue, this._selected)) {
+            this._selectedChanged.next(nextVal);
+        }
+    }
+    /**
+     * Register an input with this datepicker.
+     * @param input The datepicker input to register with this datepicker.
+     */
+    registerInput(input) {
+        if (this._pickerInput) {
+            throw Error('A ColorPicker can only be associated with a single input.');
+        }
+        this._pickerInput = input;
+        this._inputSubscription = this._pickerInput._valueChange.subscribe((value) => (this._selected = value));
+    }
+    open() {
+        if (this._opened || this.disabled) {
+            return;
+        }
+        if (!this._pickerInput) {
+            throw Error('Attempted to open an ColorPicker with no associated input.');
+        }
+        if (this._document) {
+            this._focusedElementBeforeOpen = this._document.activeElement;
+        }
+        this.touchUi ? this._openAsDialog() : this._openAsPopup();
+        this._opened = true;
+        this.openedStream.emit();
+    }
+    /** Open the calendar as a dialog. */
+    _openAsDialog() {
+        if (this._dialogRef) {
+            this._dialogRef.close();
+        }
+        this._dialogRef = this._dialog.open(NgxMatColorPickerContentComponent, {
+            direction: this._dir ? this._dir.value : 'ltr',
+            viewContainerRef: this._viewContainerRef,
+            panelClass: 'ngx-mat-colorpicker-dialog',
+        });
+        this._dialogRef.afterClosed().subscribe(() => this.close());
+        this._dialogRef.componentInstance.picker = this;
+        this._setColor();
+    }
+    /** Open the calendar as a popup. */
+    _openAsPopup() {
+        if (!this._portal) {
+            this._portal = new ComponentPortal(NgxMatColorPickerContentComponent, this._viewContainerRef);
+        }
+        if (!this._popupRef) {
+            this._createPopup();
+        }
+        if (!this._popupRef.hasAttached()) {
+            this._popupComponentRef = this._popupRef.attach(this._portal);
+            this._popupComponentRef.instance.picker = this;
+            this._setColor();
+            // Update the position once the calendar has rendered.
+            this._zone.onStable
+                .asObservable()
+                .pipe(take(1))
+                .subscribe(() => {
+                this._popupRef.updatePosition();
+            });
+        }
+    }
+    /** Create the popup. */
+    _createPopup() {
+        const overlayConfig = new OverlayConfig({
+            positionStrategy: this._createPopupPositionStrategy(),
+            hasBackdrop: true,
+            backdropClass: 'mat-overlay-transparent-backdrop',
+            direction: this._dir,
+            scrollStrategy: this._scrollStrategy(),
+            panelClass: 'mat-colorpicker-popup',
+        });
+        this._popupRef = this._overlay.create(overlayConfig);
+        this._popupRef.overlayElement.setAttribute('role', 'dialog');
+        merge(this._popupRef.backdropClick(), this._popupRef.detachments(), this._popupRef.keydownEvents().pipe(filter((event) => {
+            // Closing on alt + up is only valid when there's an input associated with the datepicker.
+            return (event.keyCode === ESCAPE ||
+                (this._pickerInput && event.altKey && event.keyCode === UP_ARROW));
+        }))).subscribe((event) => {
+            if (event) {
+                event.preventDefault();
+            }
+            this.close();
+        });
+    }
+    close() {
+        if (!this._opened) {
+            return;
+        }
+        if (this._popupRef && this._popupRef.hasAttached()) {
+            this._popupRef.detach();
+        }
+        if (this._dialogRef) {
+            this._dialogRef.close();
+            this._dialogRef = null;
+        }
+        if (this._portal && this._portal.isAttached) {
+            this._portal.detach();
+        }
+        const completeClose = () => {
+            // The `_opened` could've been reset already if
+            // we got two events in quick succession.
+            if (this._opened) {
+                this._opened = false;
+                this.closedStream.emit();
+                this._focusedElementBeforeOpen = null;
+            }
+        };
+        if (this._focusedElementBeforeOpen &&
+            typeof this._focusedElementBeforeOpen.focus === 'function') {
+            // Because IE moves focus asynchronously, we can't count on it being restored before we've
+            // marked the datepicker as closed. If the event fires out of sequence and the element that
+            // we're refocusing opens the datepicker on focus, the user could be stuck with not being
+            // able to close the calendar at all. We work around it by making the logic, that marks
+            // the datepicker as closed, async as well.
+            this._focusedElementBeforeOpen.focus();
+            setTimeout(completeClose);
+        }
+        else {
+            completeClose();
+        }
+    }
+    /** Passes the current theme color along to the calendar overlay. */
+    _setColor() {
+        const color = this.color;
+        if (this._popupComponentRef) {
+            this._popupComponentRef.instance.color = color;
+        }
+        if (this._dialogRef) {
+            this._dialogRef.componentInstance.color = color;
+        }
+    }
+    /** Create the popup PositionStrategy. */
+    _createPopupPositionStrategy() {
+        return this._overlay
+            .position()
+            .flexibleConnectedTo(this._pickerInput.getConnectedOverlayOrigin())
+            .withTransformOriginOn('.ngx-mat-colorpicker-content')
+            .withFlexibleDimensions(false)
+            .withViewportMargin(8)
+            .withLockedPosition()
+            .withPositions([
+            {
+                originX: 'start',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'top',
+            },
+            {
+                originX: 'start',
+                originY: 'top',
+                overlayX: 'start',
+                overlayY: 'bottom',
+            },
+            {
+                originX: 'end',
+                originY: 'bottom',
+                overlayX: 'end',
+                overlayY: 'top',
+            },
+            {
+                originX: 'end',
+                originY: 'top',
+                overlayX: 'end',
+                overlayY: 'bottom',
+            },
+        ]);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: NgxMatColorPickerComponent, deps: [{ token: i1$2.MatDialog }, { token: i2$1.Overlay }, { token: i0.NgZone }, { token: ColorAdapter }, { token: i4.Directionality, optional: true }, { token: NGX_MAT_COLOR_PICKER_SCROLL_STRATEGY }, { token: DOCUMENT, optional: true }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: NgxMatColorPickerComponent, isStandalone: true, selector: "ngx-mat-color-picker", inputs: { id: "id", disabled: "disabled", touchUi: "touchUi", opened: "opened", defaultColor: "defaultColor", color: "color" }, outputs: { openedStream: "opened", closedStream: "closed" }, host: { properties: { "class.mat-primary": "this.isPrimary", "class.mat-accent": "this.isAccent", "class.mat-warn": "this.isWarn" } }, providers: [ColorAdapter, NGX_MAT_COLOR_PICKER_SCROLL_STRATEGY_FACTORY_PROVIDER], exportAs: ["ngxMatColorPicker"], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: NgxMatColorPickerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngx-mat-color-picker',
+                    template: '',
+                    exportAs: 'ngxMatColorPicker',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    providers: [ColorAdapter, NGX_MAT_COLOR_PICKER_SCROLL_STRATEGY_FACTORY_PROVIDER],
+                }]
+        }], ctorParameters: () => [{ type: i1$2.MatDialog }, { type: i2$1.Overlay }, { type: i0.NgZone }, { type: ColorAdapter }, { type: i4.Directionality, decorators: [{
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [NGX_MAT_COLOR_PICKER_SCROLL_STRATEGY]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: i0.ViewContainerRef }], propDecorators: { id: [{
+                type: Input
+            }], openedStream: [{
+                type: Output,
+                args: ['opened']
+            }], closedStream: [{
+                type: Output,
+                args: ['closed']
+            }], disabled: [{
+                type: Input
+            }], touchUi: [{
+                type: Input
+            }], opened: [{
+                type: Input
+            }], defaultColor: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], isPrimary: [{
+                type: HostBinding,
+                args: ['class.mat-primary']
+            }], isAccent: [{
+                type: HostBinding,
+                args: ['class.mat-accent']
+            }], isWarn: [{
+                type: HostBinding,
+                args: ['class.mat-warn']
+            }] } });
+
+class NgxMatColorPickerInputEvent {
+    constructor(
+    /** Reference to the colorpicker input component that emitted the event. */
+    target, 
+    /** Reference to the native input element associated with the colorpicker input. */
+    targetElement) {
+        this.target = target;
+        this.targetElement = targetElement;
+        this.value = this.target.value;
+    }
+}
+const MAT_COLORPICKER_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => NgxMatColorPickerInput),
+    multi: true,
+};
+const MAT_COLORPICKER_VALIDATORS = {
+    provide: NG_VALIDATORS,
+    useExisting: forwardRef(() => NgxMatColorPickerInput),
+    multi: true,
+};
+class NgxMatColorPickerInput {
+    set ngxMatColorPicker(value) {
+        if (!value) {
+            return;
+        }
+        this._picker = value;
+        this._picker.registerInput(this);
+        this._pickerSubscription.unsubscribe();
+        this._pickerSubscription = this._picker._selectedChanged.subscribe((selected) => {
+            this.value = selected;
+            this._cvaOnChange(selected);
+            this._onTouched();
+            this.colorInput.emit(new NgxMatColorPickerInputEvent(this, this._elementRef.nativeElement));
+            this.colorChange.emit(new NgxMatColorPickerInputEvent(this, this._elementRef.nativeElement));
+        });
+    }
+    /** Whether the colorpicker-input is disabled. */
+    get disabled() {
+        return !!this._disabled;
+    }
+    set disabled(value) {
+        const newValue = coerceBooleanProperty(value);
+        const element = this._elementRef.nativeElement;
+        if (this._disabled !== newValue) {
+            this._disabled = newValue;
+            this._disabledChange.emit(newValue);
+        }
+        // We need to null check the `blur` method, because it's undefined during SSR.
+        if (newValue && element.blur) {
+            // Normally, native input elements automatically blur if they turn disabled. This behavior
+            // is problematic, because it would mean that it triggers another change detection cycle,
+            // which then causes a changed after checked error if the input element was focused before.
+            element.blur();
+        }
+    }
+    /** The value of the input. */
+    get value() {
+        return this._value;
+    }
+    set value(value) {
+        const oldValue = this.value;
+        this._value = value;
+        this._formatValue(value);
+        if (!this._adapter.sameColor(oldValue, value)) {
+            this._valueChange.emit(value);
+        }
+    }
+    constructor(_elementRef, _formField, _colorFormats, _adapter) {
+        this._elementRef = _elementRef;
+        this._formField = _formField;
+        this._colorFormats = _colorFormats;
+        this._adapter = _adapter;
+        /** Emits when a `change` event is fired on this `<input>`. */
+        this.colorChange = output();
+        /** Emits when an `input` event is fired on this `<input>`. */
+        this.colorInput = output();
+        /** 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._cvaOnChange = () => { };
+        this._validatorOnChange = () => { };
+        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;
+        if (!this._colorFormats) {
+            throw createMissingDateImplError('MAT_COLOR_FORMATS');
+        }
+    }
+    /** Returns the palette used by the input's form field, if any. */
+    getThemePalette() {
+        return this._formField ? this._formField.color : undefined;
+    }
+    registerOnValidatorChange(fn) {
+        this._validatorOnChange = fn;
+    }
+    validate(c) {
+        return this._validator ? this._validator(c) : null;
+    }
+    /**
+     * @deprecated
+     * @breaking-change 8.0.0 Use `getConnectedOverlayOrigin` instead
+     */
+    getPopupConnectionElementRef() {
+        return this.getConnectedOverlayOrigin();
+    }
+    /**
+     * Gets the element that the colorpicker popup should be connected to.
+     * @return The element to connect the popup to.
+     */
+    getConnectedOverlayOrigin() {
+        return this._formField ? this._formField.getConnectedOverlayOrigin() : this._elementRef;
+    }
+    ngOnInit() { }
+    ngOnDestroy() {
+        this._pickerSubscription.unsubscribe();
+        this._valueChange.complete();
+        this._disabledChange.complete();
+    }
+    // Implemented as part of ControlValueAccessor.
+    writeValue(value) {
+        this.value = value;
+    }
+    // Implemented as part of ControlValueAccessor.
+    registerOnChange(fn) {
+        this._cvaOnChange = fn;
+    }
+    // Implemented as part of ControlValueAccessor.
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    // Implemented as part of ControlValueAccessor.
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    _onChange() {
+        this.colorChange.emit(new NgxMatColorPickerInputEvent(this, this._elementRef.nativeElement));
+    }
+    _onKeydown(event) {
+        const isAltDownArrow = event.altKey && event.keyCode === DOWN_ARROW;
+        if (this._picker && isAltDownArrow && !this._elementRef.nativeElement.readOnly) {
+            this._picker.open();
+            event.preventDefault();
+        }
+    }
+    /** Handles blur events on the input. */
+    _onBlur() {
+        // Reformat the input only if we have a valid value.
+        if (this.value) {
+            this._formatValue(this.value);
+        }
+        this._onTouched();
+    }
+    /** Formats a value and sets it on the input element. */
+    _formatValue(value) {
+        this._elementRef.nativeElement.value = value
+            ? this._adapter.format(value, this._colorFormats.display.colorInput)
+            : '';
+    }
+    _onInput(value) {
+        const lastValueWasValid = this._lastValueValid;
+        const nextValue = this._adapter.parse(value);
+        if (!this._adapter.sameColor(nextValue, this._value)) {
+            this._value = nextValue;
+            this._cvaOnChange(nextValue);
+            this._valueChange.emit(nextValue);
+            this.colorInput.emit(new NgxMatColorPickerInputEvent(this, this._elementRef.nativeElement));
+        }
+        else if (lastValueWasValid !== this._lastValueValid) {
+            this._validatorOnChange();
+        }
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: NgxMatColorPickerInput, deps: [{ token: i0.ElementRef }, { token: i1.MatFormField, optional: true }, { token: MAT_COLOR_FORMATS, optional: true }, { token: ColorAdapter }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: NgxMatColorPickerInput, isStandalone: true, selector: "input[ngxMatColorPicker]", inputs: { ngxMatColorPicker: "ngxMatColorPicker", disabled: "disabled", value: "value" }, 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" } }, providers: [
+            { provide: MAT_INPUT_VALUE_ACCESSOR, useExisting: NgxMatColorPickerInput },
+            ColorAdapter,
+            MAT_COLORPICKER_VALIDATORS,
+            MAT_COLORPICKER_VALUE_ACCESSOR,
+        ], exportAs: ["ngxMatColorPickerInput"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: NgxMatColorPickerInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[ngxMatColorPicker]',
+                    providers: [
+                        { provide: MAT_INPUT_VALUE_ACCESSOR, useExisting: NgxMatColorPickerInput },
+                        ColorAdapter,
+                        MAT_COLORPICKER_VALIDATORS,
+                        MAT_COLORPICKER_VALUE_ACCESSOR,
+                    ],
+                    host: {
+                        '[attr.aria-haspopup]': '_picker ? "dialog" : null',
+                        '[attr.aria-owns]': '(_picker?.opened && _picker.id) || null',
+                        '[disabled]': 'disabled',
+                        '(input)': '_onInput($event.target.value)',
+                        '(change)': '_onChange()',
+                        '(blur)': '_onBlur()',
+                        '(keydown)': '_onKeydown($event)',
+                    },
+                    exportAs: 'ngxMatColorPickerInput',
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.MatFormField, decorators: [{
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MAT_COLOR_FORMATS]
+                }] }, { type: ColorAdapter }], propDecorators: { ngxMatColorPicker: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], colorChange: [{ type: i0.Output, args: ["colorChange"] }], colorInput: [{ type: i0.Output, args: ["colorInput"] }] } });
+
+class NgxMatColorpickerToggleIcon {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: NgxMatColorpickerToggleIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: NgxMatColorpickerToggleIcon, isStandalone: true, selector: "[ngxMatColorpickerToggleIcon]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: NgxMatColorpickerToggleIcon, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngxMatColorpickerToggleIcon]',
+                }]
+        }] });
+class NgxMatColorToggleComponent {
+    get disabled() {
+        if (this._disabled == null && this.picker()) {
+            return this.picker().disabled;
+        }
+    }
+    set disabled(value) {
+        this._disabled = value;
+    }
+    constructor(_cd) {
+        this._cd = _cd;
+        this._stateChanges = Subscription.EMPTY;
+        this.picker = input(undefined, { ...(ngDevMode ? { debugName: "picker" } : {}), alias: 'for' });
+        this.tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
+        /** Whether ripples on the toggle should be disabled. */
+        this.disableRipple = input(...(ngDevMode ? [undefined, { debugName: "disableRipple" }] : []));
+        this._button = viewChild('button', ...(ngDevMode ? [{ debugName: "_button" }] : []));
+        effect(() => {
+            this.picker();
+            untracked(() => this._watchStateChanges());
+        });
+    }
+    ngOnDestroy() {
+        this._stateChanges.unsubscribe();
+    }
+    ngAfterContentInit() {
+        this._watchStateChanges();
+    }
+    open(event) {
+        if (this.picker() && !this.disabled) {
+            this.picker().open();
+            event.stopPropagation();
+        }
+    }
+    _watchStateChanges() {
+        const disabled$ = this.picker()?._disabledChange ?? new EventEmitter();
+        const inputDisabled$ = this.picker()?._pickerInput?._disabledChange ?? new EventEmitter();
+        const pickerToggled$ = this.picker()
+            ? merge(this.picker().openedStream, this.picker().closedStream)
+            : of();
+        this._stateChanges.unsubscribe();
+        this._stateChanges = merge(disabled$, inputDisabled$, pickerToggled$).subscribe(() => this._cd.markForCheck());
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: NgxMatColorToggleComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.3", type: NgxMatColorToggleComponent, isStandalone: true, selector: "ngx-mat-color-toggle", inputs: { picker: { classPropertyName: "picker", publicName: "for", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, disableRipple: { classPropertyName: "disableRipple", publicName: "disableRipple", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focus": "_button()?.focus()" }, properties: { "attr.tabindex": "-1", "class.ngx-mat-color-toggle-active": "picker && picker()?.opened", "class.mat-accent": "picker && picker()?.color === \"accent\"", "class.mat-warn": "picker && picker()?.color === \"warn\"" }, classAttribute: "ngx-mat-color-toggle" }, viewQueries: [{ propertyName: "_button", first: true, predicate: ["button"], descendants: true, isSignal: true }], exportAs: ["ngxMatColorPickerToggle"], ngImport: i0, template: "<button\r\n  #button\r\n  mat-icon-button\r\n  type=\"button\"\r\n  [attr.aria-haspopup]=\"picker() ? 'dialog' : null\"\r\n  [attr.tabindex]=\"disabled ? -1 : tabIndex()\"\r\n  [disabled]=\"disabled\"\r\n  (click)=\"open($event)\"\r\n  [disableRipple]=\"disableRipple()\"\r\n>\r\n  <ng-content select=\"[ngxMatColorpickerToggleIcon]\">\r\n    <mat-icon [style.color]=\"picker()?._selected?.rgba\">palette</mat-icon>\r\n  </ng-content>\r\n</button>\r\n", styles: [".mat-form-field-appearance .mat-form-field-prefix .ngx-mat-color-toggle-default-icon,.mat-form-field-appearance .mat-form-field-suffix .ngx-mat-color-toggle-default-icon{width:1em}.mat-form-field:not(.mat-form-field-appearance) .mat-form-field-prefix .ngx-mat-color-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance) .mat-form-field-suffix .ngx-mat-color-toggle-default-icon{display:block;width:1.5em;height:1.5em}.mat-form-field:not(.mat-form-field-appearance) .mat-form-field-prefix .mat-icon-button .ngx-mat-color-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance) .mat-form-field-suffix .mat-icon-button .ngx-mat-color-toggle-default-icon{margin:auto}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: NgxMatColorToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-mat-color-toggle', host: {
+                        class: 'ngx-mat-color-toggle',
+                        // Always set the tabindex to -1 so that it doesn't overlap with any custom tabindex the
+                        // consumer may have provided, while still being able to receive focus.
+                        '[attr.tabindex]': '-1',
+                        '[class.ngx-mat-color-toggle-active]': 'picker && picker()?.opened',
+                        '[class.mat-accent]': 'picker && picker()?.color === "accent"',
+                        '[class.mat-warn]': 'picker && picker()?.color === "warn"',
+                        '(focus)': '_button()?.focus()',
+                    }, exportAs: 'ngxMatColorPickerToggle', encapsulation: ViewEncapsulation.None, imports: [MatButtonModule, MatIconModule], template: "<button\r\n  #button\r\n  mat-icon-button\r\n  type=\"button\"\r\n  [attr.aria-haspopup]=\"picker() ? 'dialog' : null\"\r\n  [attr.tabindex]=\"disabled ? -1 : tabIndex()\"\r\n  [disabled]=\"disabled\"\r\n  (click)=\"open($event)\"\r\n  [disableRipple]=\"disableRipple()\"\r\n>\r\n  <ng-content select=\"[ngxMatColorpickerToggleIcon]\">\r\n    <mat-icon [style.color]=\"picker()?._selected?.rgba\">palette</mat-icon>\r\n  </ng-content>\r\n</button>\r\n", styles: [".mat-form-field-appearance .mat-form-field-prefix .ngx-mat-color-toggle-default-icon,.mat-form-field-appearance .mat-form-field-suffix .ngx-mat-color-toggle-default-icon{width:1em}.mat-form-field:not(.mat-form-field-appearance) .mat-form-field-prefix .ngx-mat-color-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance) .mat-form-field-suffix .ngx-mat-color-toggle-default-icon{display:block;width:1.5em;height:1.5em}.mat-form-field:not(.mat-form-field-appearance) .mat-form-field-prefix .mat-icon-button .ngx-mat-color-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance) .mat-form-field-suffix .mat-icon-button .ngx-mat-color-toggle-default-icon{margin:auto}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { picker: [{ type: i0.Input, args: [{ isSignal: true, alias: "for", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], disabled: [{
+                type: Input
+            }], disableRipple: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableRipple", required: false }] }], _button: [{ type: i0.ViewChild, args: ['button', { isSignal: true }] }] } });
+
+class NumericColorInputDirective {
+    onInput($event) {
+        this._formatInput($event.target);
+    }
+    /**
+     * Format input
+     * @param input
+     */
+    _formatInput(input) {
+        let val = Number(input.value.replace(NUMERIC_REGEX, ''));
+        val = isNaN(val) ? 0 : val;
+        input.value = val;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: NumericColorInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: NumericColorInputDirective, isStandalone: true, selector: "[ngxMatNumericColorInput]", host: { listeners: { "input": "onInput($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: NumericColorInputDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngxMatNumericColorInput]',
+                }]
+        }], propDecorators: { onInput: [{
+                type: HostListener,
+                args: ['input', ['$event']]
+            }] } });
+
+/*
+ * Public API Surface of color-picker
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BASIC_COLORS, Color, ColorAdapter, MAT_COLORPICKER_VALIDATORS, MAT_COLORPICKER_VALUE_ACCESSOR, MAT_COLOR_FORMATS, MAX_RGB, MIN_RGB, NGX_MAT_COLOR_FORMATS, NGX_MAT_COLOR_PICKER_SCROLL_STRATEGY, NGX_MAT_COLOR_PICKER_SCROLL_STRATEGY_FACTORY, NGX_MAT_COLOR_PICKER_SCROLL_STRATEGY_FACTORY_PROVIDER, NUMERIC_REGEX, NgxMatColorCanvasComponent, NgxMatColorCollectionComponent, NgxMatColorPaletteComponent, NgxMatColorPickerComponent, NgxMatColorPickerContentComponent, NgxMatColorPickerInput, NgxMatColorPickerInputEvent, NgxMatColorSliderComponent, NgxMatColorToggleComponent, NgxMatColorpickerToggleIcon, NumericColorInputDirective, convertDecimalToHex, createMissingDateImplError, getColorAtPosition, matchers, pad2, rgbToHex, rgbaToHex, stringInputToObject };
+//# sourceMappingURL=ngx-mce-color-picker.mjs.map