cmat 0.0.87 → 0.0.88

package/fesm2022/cmat-components-color-picker.mjs

@@ -0,0 +1,841 @@
+import { DOCUMENT, NgStyle, NgClass } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, output, inject, ElementRef, Directive, signal, effect, untracked, ChangeDetectionStrategy, ViewEncapsulation, Component, model, forwardRef } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { TinyColor } from '@ctrl/tinycolor';
+import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
+import * as i2 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+
+class CmatColorCoordinates {
+    constructor() {
+        this.percentX = input(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "percentX" }] : /* istanbul ignore next */ []));
+        this.percentY = input(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "percentY" }] : /* istanbul ignore next */ []));
+        this.coordinatesChange = output();
+        this._document = inject(DOCUMENT);
+        this._el = inject(ElementRef);
+        this.onDrag = (e) => {
+            e.preventDefault();
+            this._handleChange(e);
+        };
+        this.onDragEnd = () => {
+            this._document.removeEventListener('pointermove', this.onDrag);
+            this._document.removeEventListener('pointerup', this.onDragEnd);
+        };
+    }
+    onDragStart(e) {
+        this._document.addEventListener('pointermove', this.onDrag, { passive: false });
+        this._document.addEventListener('pointerup', this.onDragEnd, { passive: false });
+        e.preventDefault();
+        this._handleChange(e);
+    }
+    onKeyDown(e) {
+        const arrowKeys = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
+        if (!arrowKeys.includes(e.key))
+            return;
+        e.preventDefault();
+        const rect = this._el.nativeElement.getBoundingClientRect();
+        const multiplier = e.shiftKey ? 10 : 1;
+        const stepX = (rect.width / 100) * multiplier;
+        const stepY = (rect.height / 100) * multiplier;
+        let vX = 0;
+        let vY = 0;
+        if (this.percentX != null && this.percentY != null) {
+            vX = rect.left + rect.width * (this.percentX() / 100);
+            vY = rect.top + rect.height * (this.percentY() / 100);
+            switch (e.key) {
+                case 'ArrowLeft':
+                    vX -= stepX;
+                    break;
+                case 'ArrowRight':
+                    vX += stepX;
+                    break;
+                case 'ArrowUp':
+                    vY -= stepY;
+                    break;
+                case 'ArrowDown':
+                    vY += stepY;
+                    break;
+            }
+        }
+        else if (this.percentX != null) {
+            vX = rect.left + rect.width * (this.percentX() / 100);
+            switch (e.key) {
+                case 'ArrowLeft':
+                case 'ArrowDown':
+                    vX -= stepX;
+                    break;
+                case 'ArrowRight':
+                case 'ArrowUp':
+                    vX += stepX;
+                    break;
+            }
+        }
+        else if (this.percentY != null) {
+            vY = rect.top + rect.height * (this.percentY() / 100);
+            switch (e.key) {
+                case 'ArrowLeft':
+                case 'ArrowDown':
+                    vY += stepY;
+                    break;
+                case 'ArrowRight':
+                case 'ArrowUp':
+                    vY -= stepY;
+                    break;
+            }
+        }
+        this._handleChange({ clientX: vX, clientY: vY });
+    }
+    _handleChange(e) {
+        const containerRect = this._el.nativeElement.getBoundingClientRect();
+        const containerWidth = containerRect.width;
+        const containerHeight = containerRect.height;
+        const { clientX, clientY } = e;
+        const left = clientX - containerRect.left;
+        const top = clientY - containerRect.top;
+        this.coordinatesChange.emit({
+            containerWidth,
+            containerHeight,
+            left,
+            top,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatColorCoordinates, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: CmatColorCoordinates, isStandalone: true, selector: "[cmat-color-coordinates], [cmatColorCoordinates]", inputs: { percentX: { classPropertyName: "percentX", publicName: "percentX", isSignal: true, isRequired: false, transformFunction: null }, percentY: { classPropertyName: "percentY", publicName: "percentY", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { coordinatesChange: "coordinatesChange" }, host: { listeners: { "pointerdown": "onDragStart($event)", "keydown": "onKeyDown($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatColorCoordinates, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cmat-color-coordinates], [cmatColorCoordinates]',
+                    host: {
+                        // eslint-disable-next-line @typescript-eslint/naming-convention
+                        '(pointerdown)': 'onDragStart($event)',
+                        // eslint-disable-next-line @typescript-eslint/naming-convention
+                        '(keydown)': 'onKeyDown($event)',
+                    },
+                }]
+        }], propDecorators: { percentX: [{ type: i0.Input, args: [{ isSignal: true, alias: "percentX", required: false }] }], percentY: [{ type: i0.Input, args: [{ isSignal: true, alias: "percentY", required: false }] }], coordinatesChange: [{ type: i0.Output, args: ["coordinatesChange"] }] } });
+
+class CmatColorAlphaSlider {
+    constructor() {
+        this.color = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+        this.direction = input('horizontal', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
+        this.change = output();
+        this.hsl = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hsl" }] : /* istanbul ignore next */ []));
+        this.rgb = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rgb" }] : /* istanbul ignore next */ []));
+        this.gradient = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "gradient" }] : /* istanbul ignore next */ []));
+        this.posX = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "posX" }] : /* istanbul ignore next */ []));
+        this.posY = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "posY" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const color = this.color();
+            this.hsl.set(color.hsl);
+            this.rgb.set(color.rgb);
+            const rgb = this.rgb();
+            if (rgb) {
+                if (this.direction() === 'vertical') {
+                    untracked(() => {
+                        this.gradient.set(`linear-gradient(to top, rgba(${rgb.r},${rgb.g},${rgb.b}, 0) 0%, rgba(${rgb.r},${rgb.g},${rgb.b}, 1) 100%)`);
+                        this.posX.set(0);
+                        this.posY.set((1 - rgb.a) * 100);
+                    });
+                }
+                else {
+                    untracked(() => {
+                        this.gradient.set(`linear-gradient(to right, rgba(${rgb.r},${rgb.g},${rgb.b}, 0) 0%, rgba(${rgb.r},${rgb.g},${rgb.b}, 1) 100%)`);
+                        this.posY.set(0);
+                        this.posX.set(rgb.a * 100);
+                    });
+                }
+            }
+        });
+    }
+    handleChange(e) {
+        const { top, left, containerHeight, containerWidth } = e;
+        const isVertical = this.direction() === 'vertical';
+        const pos = isVertical ? top : left;
+        const size = isVertical ? containerHeight : containerWidth;
+        const ratio = Math.max(0, Math.min(pos, size)) / size;
+        const alpha = isVertical ? 1 - ratio : ratio;
+        const a = Math.round(alpha * 100) / 100;
+        const hsl = this.hsl();
+        if (hsl && hsl.a !== a) {
+            this.change.emit({ ...hsl, a, source: 'rgb' });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatColorAlphaSlider, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: CmatColorAlphaSlider, isStandalone: true, selector: "cmat-color-alpha-slider", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, host: { properties: { "class.cmat-color-alpha-vertical": "direction()=== \"vertical\"", "class.cmat-color-alpha-horizontal": "direction() === \"horizontal\"" }, classAttribute: "cmat-color-alpha-slider" }, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n<div class=\"cmat-color-alpha-slider-track\" cmatColorCoordinates [style.background-image]=\"gradient()\" [percentX]=\"posX()\"\r\n    [percentY]=\"posY()\" (coordinatesChange)=\"handleChange($event)\">\r\n    <div class=\"cmat-color-alpha-slider-pointer\" [style.left.%]=\"posX()\" [style.top.%]=\"posY()\">\r\n        <button class=\"cmat-color-alpha-slider-thumb\" type=\"button\">\r\n            <!--  -->\r\n        </button>\r\n    </div>\r\n</div>", styles: [".cmat-color-alpha-slider{position:relative;display:block;width:var(--cp-slider-width, auto);height:var(--cp-slider-height, 10px);border-radius:var(--cp-slider-shape, 2px);background-color:#fff;background-image:conic-gradient(transparent 25%,#ccc 25% 50%,transparent 50% 75%,#ccc 75%);background-size:10px 10px}.cmat-color-alpha-slider.cmat-color-alpha-vertical{width:var(--cp-slider-width, 10px);height:var(--cp-slider-height, auto)}.cmat-color-alpha-slider-track{position:relative;width:100%;height:100%;border-radius:var(--cp-slider-shape, 2px);touch-action:none}.cmat-color-alpha-slider-pointer{position:absolute}.cmat-color-alpha-slider-thumb{display:block;width:var(--cp-slider-thumb-width, 12px);height:var(--cp-slider-thumb-height, 12px);padding:0;border:none;border-radius:var(--cp-slider-thumb-shape, 6px);transform:translate(-50%,calc((var(--cp-slider-thumb-height, 12px) - var(--cp-slider-height, 10px)) / -2));background-color:var(--cp-slider-thumb-background-color, #f2f2f2);outline:1px solid var(--cp-slider-thumb-outline-color, rgba(0, 0, 0, .04));box-shadow:var(--cp-slider-thumb-shadow, 0 1px 4px 0 rgba(0, 0, 0, .32), 0 2px 8px 0 rgba(0, 0, 0, .16))}.cmat-color-alpha-slider-thumb:focus-visible{outline-color:var(--cp-slider-thumb-focus-outline-color, var(--cp-input-focus-outline-color, #0d99ff))}.cmat-color-alpha-vertical .cmat-color-alpha-slider-thumb{transform:translate(calc((var(--cp-slider-thumb-width, 12px) - var(--cp-slider-width, 10px)) / -2),-50%)}\n"], dependencies: [{ kind: "directive", type: CmatColorCoordinates, selector: "[cmat-color-coordinates], [cmatColorCoordinates]", inputs: ["percentX", "percentY"], outputs: ["coordinatesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatColorAlphaSlider, decorators: [{
+            type: Component,
+            args: [{ selector: 'cmat-color-alpha-slider', imports: [CmatColorCoordinates], host: {
+                        'class': 'cmat-color-alpha-slider',
+                        // eslint-disable-next-line @typescript-eslint/naming-convention
+                        '[class.cmat-color-alpha-vertical]': 'direction()=== "vertical"',
+                        // eslint-disable-next-line @typescript-eslint/naming-convention
+                        '[class.cmat-color-alpha-horizontal]': 'direction() === "horizontal"',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n<div class=\"cmat-color-alpha-slider-track\" cmatColorCoordinates [style.background-image]=\"gradient()\" [percentX]=\"posX()\"\r\n    [percentY]=\"posY()\" (coordinatesChange)=\"handleChange($event)\">\r\n    <div class=\"cmat-color-alpha-slider-pointer\" [style.left.%]=\"posX()\" [style.top.%]=\"posY()\">\r\n        <button class=\"cmat-color-alpha-slider-thumb\" type=\"button\">\r\n            <!--  -->\r\n        </button>\r\n    </div>\r\n</div>", styles: [".cmat-color-alpha-slider{position:relative;display:block;width:var(--cp-slider-width, auto);height:var(--cp-slider-height, 10px);border-radius:var(--cp-slider-shape, 2px);background-color:#fff;background-image:conic-gradient(transparent 25%,#ccc 25% 50%,transparent 50% 75%,#ccc 75%);background-size:10px 10px}.cmat-color-alpha-slider.cmat-color-alpha-vertical{width:var(--cp-slider-width, 10px);height:var(--cp-slider-height, auto)}.cmat-color-alpha-slider-track{position:relative;width:100%;height:100%;border-radius:var(--cp-slider-shape, 2px);touch-action:none}.cmat-color-alpha-slider-pointer{position:absolute}.cmat-color-alpha-slider-thumb{display:block;width:var(--cp-slider-thumb-width, 12px);height:var(--cp-slider-thumb-height, 12px);padding:0;border:none;border-radius:var(--cp-slider-thumb-shape, 6px);transform:translate(-50%,calc((var(--cp-slider-thumb-height, 12px) - var(--cp-slider-height, 10px)) / -2));background-color:var(--cp-slider-thumb-background-color, #f2f2f2);outline:1px solid var(--cp-slider-thumb-outline-color, rgba(0, 0, 0, .04));box-shadow:var(--cp-slider-thumb-shadow, 0 1px 4px 0 rgba(0, 0, 0, .32), 0 2px 8px 0 rgba(0, 0, 0, .16))}.cmat-color-alpha-slider-thumb:focus-visible{outline-color:var(--cp-slider-thumb-focus-outline-color, var(--cp-input-focus-outline-color, #0d99ff))}.cmat-color-alpha-vertical .cmat-color-alpha-slider-thumb{transform:translate(calc((var(--cp-slider-thumb-width, 12px) - var(--cp-slider-width, 10px)) / -2),-50%)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: true }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], change: [{ type: i0.Output, args: ["change"] }] } });
+
+class CmatColorHueSlider {
+    constructor() {
+        this.color = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+        this.direction = input('horizontal', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
+        this.change = output();
+        this.hsl = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hsl" }] : /* istanbul ignore next */ []));
+        this.posX = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "posX" }] : /* istanbul ignore next */ []));
+        this.posY = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "posY" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const color = this.color();
+            this.hsl.set(color.hsl);
+            if (!color.hsl) {
+                return;
+            }
+            if (this.direction() === 'vertical') {
+                untracked(() => {
+                    this.posX.set(0);
+                    this.posY.set(100 - (this.hsl().h * 100) / 360);
+                });
+            }
+            else {
+                untracked(() => {
+                    this.posY.set(0);
+                    this.posX.set((this.hsl().h * 100) / 360);
+                });
+            }
+        });
+    }
+    handleChange(e) {
+        const { top, left, containerHeight, containerWidth } = e;
+        const isVertical = this.direction() === 'vertical';
+        const pos = isVertical ? top : left;
+        const size = isVertical ? containerHeight : containerWidth;
+        const ratio = Math.max(0, Math.min(pos, size)) / size;
+        const hue = isVertical ? (1 - ratio) * 360 : ratio * 360;
+        const h = hue >= 360 ? 359 : hue;
+        const hsl = this.hsl();
+        if (hsl && hsl.h !== h) {
+            this.change.emit({ ...hsl, h, source: 'rgb' });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatColorHueSlider, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: CmatColorHueSlider, isStandalone: true, selector: "cmat-color-hue-slider", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, host: { properties: { "class.cmat-color-hue-vertical": "direction() === \"vertical\"", "class.cmat-color-hue-horizontal": "direction() === \"horizontal\"" }, classAttribute: "cmat-color-hue-slider" }, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n<div class=\"cmat-color-hue-slider-track\" cmatColorCoordinates [percentX]=\"posX()\" [percentY]=\"posY()\"\r\n    (coordinatesChange)=\"handleChange($event)\">\r\n    <div class=\"cmat-color-hue-slider-pointer\" [style.left.%]=\"posX()\" [style.top.%]=\"posY()\">\r\n        <button class=\"cmat-color-hue-slider-thumb\" type=\"button\">\r\n            <!--  -->\r\n        </button>\r\n    </div>\r\n</div>", styles: [".cmat-color-hue-slider{position:relative;display:block;width:var(--cp-slider-width, auto);height:var(--cp-slider-height, 10px);border-radius:var(--cp-slider-shape, 2px);background-image:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}.cmat-color-hue-slider.cmat-color-hue-vertical{width:var(--cp-slider-width, 10px);height:var(--cp-slider-height, auto);background-image:linear-gradient(to top,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}.cmat-color-hue-slider-track{position:relative;width:100%;height:100%;border-radius:var(--cp-slider-shape, 2px);touch-action:none}.cmat-color-hue-slider-pointer{position:absolute}.cmat-color-hue-slider-thumb{display:block;width:var(--cp-slider-thumb-width, 12px);height:var(--cp-slider-thumb-height, 12px);padding:0;border:none;border-radius:var(--cp-slider-thumb-shape, 6px);transform:translate(-50%,calc((var(--cp-slider-thumb-height, 12px) - var(--cp-slider-height, 10px)) / -2));background-color:var(--cp-slider-thumb-background-color, #f2f2f2);outline:1px solid var(--cp-slider-thumb-outline-color, rgba(0, 0, 0, .04));box-shadow:var(--cp-slider-thumb-shadow, 0 1px 4px 0 rgba(0, 0, 0, .32), 0 2px 8px 0 rgba(0, 0, 0, .16))}.cmat-color-hue-slider-thumb:focus-visible{outline-color:var(--cp-slider-thumb-focus-outline-color, var(--cp-input-focus-outline-color, #0d99ff))}.cmat-color-hue-vertical .cmat-color-hue-slider-thumb{transform:translate(calc((var(--cp-slider-thumb-width, 12px) - var(--cp-slider-width, 10px)) / -2),-50%)}\n"], dependencies: [{ kind: "directive", type: CmatColorCoordinates, selector: "[cmat-color-coordinates], [cmatColorCoordinates]", inputs: ["percentX", "percentY"], outputs: ["coordinatesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatColorHueSlider, decorators: [{
+            type: Component,
+            args: [{ selector: 'cmat-color-hue-slider', imports: [CmatColorCoordinates], host: {
+                        'class': 'cmat-color-hue-slider',
+                        // eslint-disable-next-line @typescript-eslint/naming-convention
+                        '[class.cmat-color-hue-vertical]': 'direction() === "vertical"',
+                        // eslint-disable-next-line @typescript-eslint/naming-convention
+                        '[class.cmat-color-hue-horizontal]': 'direction() === "horizontal"',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n<div class=\"cmat-color-hue-slider-track\" cmatColorCoordinates [percentX]=\"posX()\" [percentY]=\"posY()\"\r\n    (coordinatesChange)=\"handleChange($event)\">\r\n    <div class=\"cmat-color-hue-slider-pointer\" [style.left.%]=\"posX()\" [style.top.%]=\"posY()\">\r\n        <button class=\"cmat-color-hue-slider-thumb\" type=\"button\">\r\n            <!--  -->\r\n        </button>\r\n    </div>\r\n</div>", styles: [".cmat-color-hue-slider{position:relative;display:block;width:var(--cp-slider-width, auto);height:var(--cp-slider-height, 10px);border-radius:var(--cp-slider-shape, 2px);background-image:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}.cmat-color-hue-slider.cmat-color-hue-vertical{width:var(--cp-slider-width, 10px);height:var(--cp-slider-height, auto);background-image:linear-gradient(to top,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}.cmat-color-hue-slider-track{position:relative;width:100%;height:100%;border-radius:var(--cp-slider-shape, 2px);touch-action:none}.cmat-color-hue-slider-pointer{position:absolute}.cmat-color-hue-slider-thumb{display:block;width:var(--cp-slider-thumb-width, 12px);height:var(--cp-slider-thumb-height, 12px);padding:0;border:none;border-radius:var(--cp-slider-thumb-shape, 6px);transform:translate(-50%,calc((var(--cp-slider-thumb-height, 12px) - var(--cp-slider-height, 10px)) / -2));background-color:var(--cp-slider-thumb-background-color, #f2f2f2);outline:1px solid var(--cp-slider-thumb-outline-color, rgba(0, 0, 0, .04));box-shadow:var(--cp-slider-thumb-shadow, 0 1px 4px 0 rgba(0, 0, 0, .32), 0 2px 8px 0 rgba(0, 0, 0, .16))}.cmat-color-hue-slider-thumb:focus-visible{outline-color:var(--cp-slider-thumb-focus-outline-color, var(--cp-input-focus-outline-color, #0d99ff))}.cmat-color-hue-vertical .cmat-color-hue-slider-thumb{transform:translate(calc((var(--cp-slider-thumb-width, 12px) - var(--cp-slider-width, 10px)) / -2),-50%)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: true }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], change: [{ type: i0.Output, args: ["change"] }] } });
+
+class CmatColorIconButton {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatColorIconButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.2", type: CmatColorIconButton, isStandalone: true, selector: "cmat-color-icon-button", host: { classAttribute: "cmat-color-icon-button" }, ngImport: i0, template: `
+    <ng-content />
+  `, isInline: true, styles: [".cmat-color-icon-button{display:inline-block;width:24px;height:24px}.cmat-color-icon-button button{width:100%;height:100%;padding:2px;color:var(--cp-icon-button-text-color, inherit);background-color:var(--cp-icon-button-background-color, transparent);border:none;border-radius:var(--cp-icon-button-shape, 4px)}.cmat-color-icon-button button:hover{background-color:var(--cp-icon-button-hover-background-color, rgba(0, 0, 0, .06))}.cmat-color-icon-button button:active{background-color:var(--cp-icon-button-active-background-color, rgba(0, 0, 0, .12))}.cmat-color-icon-button button:focus-visible{background-color:var(--cp-icon-button-focus-background-color, transparent);outline:1px solid var(--cp-icon-button-focus-outline-color, #0d99ff);outline-offset:-1px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatColorIconButton, decorators: [{
+            type: Component,
+            args: [{ selector: 'cmat-color-icon-button', imports: [], template: `
+    <ng-content />
+  `, host: {
+                        class: 'cmat-color-icon-button',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".cmat-color-icon-button{display:inline-block;width:24px;height:24px}.cmat-color-icon-button button{width:100%;height:100%;padding:2px;color:var(--cp-icon-button-text-color, inherit);background-color:var(--cp-icon-button-background-color, transparent);border:none;border-radius:var(--cp-icon-button-shape, 4px)}.cmat-color-icon-button button:hover{background-color:var(--cp-icon-button-hover-background-color, rgba(0, 0, 0, .06))}.cmat-color-icon-button button:active{background-color:var(--cp-icon-button-active-background-color, rgba(0, 0, 0, .12))}.cmat-color-icon-button button:focus-visible{background-color:var(--cp-icon-button-focus-background-color, transparent);outline:1px solid var(--cp-icon-button-focus-outline-color, #0d99ff);outline-offset:-1px}\n"] }]
+        }] });
+
+let nextUniqueId = 0;
+class CmatColorInputField {
+    constructor() {
+        this.label = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        this.step = input(1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+        this.placeholder = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        this.value = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.valueChange = output();
+        this.uniqueId = `cmat-color-input-${++nextUniqueId}`;
+        this.focus = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "focus" }] : /* istanbul ignore next */ []));
+        this.currentValue = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currentValue" }] : /* istanbul ignore next */ []));
+        this.blurValue = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "blurValue" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            if (!this.focus()) {
+                this.currentValue.set(String(this.value()));
+                this.blurValue.set(String(this.value()));
+            }
+            else {
+                this.blurValue.set(String(this.value()));
+            }
+        });
+    }
+    handleFocus(e) {
+        this.focus.set(true);
+        e.preventDefault();
+    }
+    handleFocusOut(e) {
+        this.focus.set(false);
+        this.currentValue.set(this.blurValue());
+        e.preventDefault();
+    }
+    handleKeydown(e) {
+        const target = e.target;
+        const inputValue = String(target.value);
+        const isPercentage = inputValue.includes('%');
+        const num = Number(inputValue.replace(/%/g, ''));
+        if (isNaN(num)) {
+            return;
+        }
+        const step = this.step() || 1;
+        if (e.key === 'ArrowUp') {
+            if (this.label()) {
+                this.valueChange.emit({ [this.label()]: num + step });
+            }
+            else {
+                this.valueChange.emit(num + step);
+            }
+            if (isPercentage) {
+                this.currentValue.set(`${num + step}%`);
+            }
+            else {
+                this.currentValue.set(num + step);
+            }
+        }
+        if (e.key === 'ArrowDown') {
+            if (this.label()) {
+                this.valueChange.emit({ [this.label()]: num - step });
+            }
+            else {
+                this.valueChange.emit(num - step);
+            }
+            if (isPercentage) {
+                this.currentValue.set(`${num - step}%`);
+            }
+            else {
+                this.currentValue.set(num - step);
+            }
+        }
+    }
+    handleKeyup(e) {
+        const target = e.target;
+        if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+            return;
+        }
+        if (`${this.currentValue()}` === target.value) {
+            return;
+        }
+        if (this.label()) {
+            this.valueChange.emit({ [this.label()]: target.value });
+        }
+        else {
+            this.valueChange.emit(target.value);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatColorInputField, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CmatColorInputField, isStandalone: true, selector: "cmat-color-input-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { classAttribute: "cmat-color-input-field" }, ngImport: i0, template: "<input spellCheck=\"false\" [value]=\"currentValue()\" [placeholder]=\"placeholder()\" [attr.aria-labelledby]=\"uniqueId\"\r\n    (keydown)=\"handleKeydown($event)\" (keyup)=\"handleKeyup($event)\" (focus)=\"handleFocus($event)\"\r\n    (focusout)=\"handleFocusOut($event)\" />\r\n@if (label()) {\r\n<span [id]=\"uniqueId\">{{ label() }}</span>\r\n}", styles: [".cmat-color-input-field{font-size:11px;text-align:center}.cmat-color-input-field input{box-sizing:border-box;width:100%;height:24px;border:none;border-radius:var(--cp-input-shape, 4px);background-color:var(--cp-input-background-color, transparent);outline:1px solid var(--cp-input-outline-color, #e6e6e6);font-family:var(--cp-input-text-font, monospace);font-size:inherit;text-align:inherit}.cmat-color-input-field input:hover{outline-color:var(--cp-input-hover-outline-color, #d6d6d6)}.cmat-color-input-field input:focus{outline-color:var(--cp-input-focus-outline-color, #0d99ff)}.cmat-color-input-field span{display:block;margin-top:8px;color:#969696;text-transform:uppercase}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatColorInputField, decorators: [{
+            type: Component,
+            args: [{ selector: 'cmat-color-input-field', host: {
+                        class: 'cmat-color-input-field',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<input spellCheck=\"false\" [value]=\"currentValue()\" [placeholder]=\"placeholder()\" [attr.aria-labelledby]=\"uniqueId\"\r\n    (keydown)=\"handleKeydown($event)\" (keyup)=\"handleKeyup($event)\" (focus)=\"handleFocus($event)\"\r\n    (focusout)=\"handleFocusOut($event)\" />\r\n@if (label()) {\r\n<span [id]=\"uniqueId\">{{ label() }}</span>\r\n}", styles: [".cmat-color-input-field{font-size:11px;text-align:center}.cmat-color-input-field input{box-sizing:border-box;width:100%;height:24px;border:none;border-radius:var(--cp-input-shape, 4px);background-color:var(--cp-input-background-color, transparent);outline:1px solid var(--cp-input-outline-color, #e6e6e6);font-family:var(--cp-input-text-font, monospace);font-size:inherit;text-align:inherit}.cmat-color-input-field input:hover{outline-color:var(--cp-input-hover-outline-color, #d6d6d6)}.cmat-color-input-field input:focus{outline-color:var(--cp-input-focus-outline-color, #0d99ff)}.cmat-color-input-field span{display:block;margin-top:8px;color:#969696;text-transform:uppercase}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+function simpleCheckForValidColor(data) {
+    const keysToCheck = ['r', 'g', 'b', 'a', 'h', 's', 'l', 'v'];
+    let checked = 0;
+    let passed = 0;
+    keysToCheck.forEach((letter) => {
+        if (!(letter in data)) {
+            return;
+        }
+        checked += 1;
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        const value = data[letter];
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        if (!isNaN(value)) {
+            passed += 1;
+        }
+        if (letter === 's' || letter === 'l') {
+            const percentPatt = /^\d+%$/;
+            if (percentPatt.test(String(value))) {
+                passed += 1;
+            }
+        }
+    });
+    return checked === passed;
+}
+function parseColor(data, oldHue = 0, hideAlpha = false) {
+    const color = data && typeof data !== 'string' && 'hex' in data
+        ? new TinyColor(data.hex)
+        : new TinyColor(data);
+    if (hideAlpha) {
+        color.setAlpha(1);
+    }
+    const rgb = color.toRgb();
+    let hsl;
+    let hsv;
+    // Check if data is HSLAsource
+    if (data && typeof data === 'object' && 's' in data && 'l' in data) {
+        hsl = {
+            h: data.h ?? oldHue,
+            s: data.s,
+            l: data.l,
+            a: data.a ?? 1,
+        };
+        hsv = hslToHsv(hsl.h, hsl.s, hsl.l, hsl.a);
+    }
+    else if (data && typeof data === 'object' && 's' in data && 'v' in data) {
+        // Check if data is HSVAsource
+        hsv = {
+            h: data.h ?? oldHue,
+            s: data.s,
+            v: data.v,
+            a: data.a ?? 1,
+        };
+        hsl = hsvToHsl(hsv.h, hsv.s, hsv.v, hsv.a);
+    }
+    else {
+        hsl = color.toHsl();
+        hsv = color.toHsv();
+    }
+    if (hsl.s === 0) {
+        hsl.h = oldHue;
+        hsv.h = oldHue;
+    }
+    return {
+        hsl,
+        hslString: toHslString(hsl),
+        hsv,
+        hsvString: toHsvString(hsv),
+        rgb,
+        rgbString: color.toRgbString(),
+        hex: rgb.a === 1 ? color.toHexString() : color.toHex8String(),
+        oldHue: data && typeof data === 'object' && 'h' in data ? (data.h ?? oldHue ?? hsl.h) : (oldHue ?? hsl.h),
+        source: data && typeof data === 'object' ? data.source : '',
+    };
+}
+function hslToHsv(h, s, l, a) {
+    const v = l + s * Math.min(l, 1 - l);
+    const sv = v === 0 ? 0 : 2 * (1 - l / v);
+    return { h, s: sv, v, a };
+}
+function hsvToHsl(h, s, v, a) {
+    const l = v * (1 - s / 2);
+    const sl = l === 0 || l === 1 ? 0 : (v - l) / Math.min(l, 1 - l);
+    return { h, s: sl, l, a };
+}
+function toHslString(hsl) {
+    const h = Math.round(hsl.h);
+    const s = Math.round(hsl.s * 100);
+    const l = Math.round(hsl.l * 100);
+    return hsl.a === 1 ? `hsl(${h}, ${s}%, ${l}%)` : `hsla(${h}, ${s}%, ${l}%, ${hsl.a})`;
+}
+function toHsvString(hsv) {
+    const h = Math.round(hsv.h);
+    const s = Math.round(hsv.s * 100);
+    const v = Math.round(hsv.v * 100);
+    return hsv.a === 1 ? `hsv(${h}, ${s}%, ${v}%)` : `hsva(${h}, ${s}%, ${v}%, ${hsv.a})`;
+}
+function isValidHex(hex) {
+    const tinyColor = new TinyColor(hex);
+    return tinyColor.isValid;
+}
+
+class CmatColorInputFields {
+    constructor() {
+        this.color = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+        this.format = model('hex', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+        this.hideAlpha = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hideAlpha" }] : /* istanbul ignore next */ []));
+        this.formatChanged = output();
+        this.valueChange = output();
+        this.hsl = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hsl" }] : /* istanbul ignore next */ []));
+        this.rgb = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rgb" }] : /* istanbul ignore next */ []));
+        this.hex = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hex" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const color = this.color();
+            this.hsl.set(color.hsl);
+            this.rgb.set(color.rgb);
+            this.hex.set(color.hex);
+            untracked(() => {
+                if (!this.format()) {
+                    this.format.set('hex');
+                }
+                else if (this.format() === 'hsv') {
+                    this.format.set('hsl');
+                }
+            });
+        });
+    }
+    round(value) {
+        return Math.round(value);
+    }
+    toggleColorFormat() {
+        let format;
+        let fieldVal = {};
+        if (this.format() === 'hex') {
+            format = 'rgb';
+            fieldVal = { ...this.rgb() };
+        }
+        else if (this.format() === 'rgb') {
+            format = 'hsl';
+            fieldVal = { ...this.hsl(), s: this.hsl().s * 100, l: this.hsl().l * 100 };
+        }
+        else if (this.format() === 'hsl') {
+            format = 'hex';
+            fieldVal = { hex: this.hex() };
+        }
+        this.format.set(format);
+        this.formatChanged.emit(format);
+        this.handleChange(fieldVal);
+    }
+    handleChange(e) {
+        if (typeof e === 'string' || typeof e === 'number') {
+            return;
+        }
+        if (e.hex) {
+            if (isValidHex(e.hex)) {
+                const color = new TinyColor(e.hex);
+                this.valueChange.emit({
+                    hex: this.hideAlpha() ? color.toHex() : color.toHex8(),
+                    source: 'hex',
+                });
+            }
+        }
+        else if (e.r || e.g || e.b) {
+            this.valueChange.emit({
+                r: e.r ?? this.rgb().r,
+                g: e.g ?? this.rgb().g,
+                b: e.b ?? this.rgb().b,
+                a: Math.round((e.a ?? this.rgb().a) * 100) / 100,
+                source: 'rgb',
+            });
+        }
+        else if (e.h || e.s || e.l) {
+            const s = (typeof e.s === 'string' ? Number(e.s.replace('%', '')) : e.s ?? 0) / 100;
+            const l = (typeof e.l === 'string' ? Number(e.l.replace('%', '')) : e.l ?? 0) / 100;
+            this.valueChange.emit({
+                h: e.h ?? this.hsl().h,
+                s: s ?? this.hsl().s,
+                l: l ?? this.hsl().l,
+                a: Math.round((e.a ?? this.hsl().a) * 100) / 100,
+                source: 'hsl',
+            });
+        }
+        else if (e.a) {
+            let a = Math.max(0, Math.min(1, e.a));
+            if (this.hideAlpha()) {
+                a = 1;
+            }
+            this.valueChange.emit({
+                h: this.hsl().h,
+                s: this.hsl().s,
+                l: this.hsl().l,
+                a: Math.round(a * 100) / 100,
+                source: 'rgb',
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatColorInputFields, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CmatColorInputFields, isStandalone: true, selector: "cmat-color-input-fields", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, hideAlpha: { classPropertyName: "hideAlpha", publicName: "hideAlpha", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { format: "formatChange", formatChanged: "formatChanged", valueChange: "valueChange" }, host: { classAttribute: "cmat-color-input-fields" }, ngImport: i0, template: "<div class=\"cmat-color-input-field-wrapper\">\r\n    @if (format() === 'hex') {\r\n    <cmat-color-input-field label=\"hex\" [value]=\"hex()\" (valueChange)=\"handleChange($event)\" />\r\n    }\r\n    @if (format() === 'rgb') {\r\n    <cmat-color-input-field label=\"r\" [value]=\"rgb()!.r\" (valueChange)=\"handleChange($event)\" />\r\n    <cmat-color-input-field label=\"g\" [value]=\"rgb()!.g\" (valueChange)=\"handleChange($event)\" />\r\n    <cmat-color-input-field label=\"b\" [value]=\"rgb()!.b\" (valueChange)=\"handleChange($event)\" />\r\n\r\n    @if (!hideAlpha()) {\r\n    <cmat-color-input-field label=\"a\" [step]=\"0.01\" [value]=\"rgb()!.a\" (valueChange)=\"handleChange($event)\" />\r\n    }\r\n    }\r\n    @if (format() === 'hsl') {\r\n    <cmat-color-input-field label=\"h\" [value]=\"round(hsl()!.h)\" (valueChange)=\"handleChange($event)\" />\r\n    <cmat-color-input-field label=\"s\" [value]=\"round(hsl()!.s * 100) + '%'\" (valueChange)=\"handleChange($event)\" />\r\n    <cmat-color-input-field label=\"l\" [value]=\"round(hsl()!.l * 100) + '%'\" (valueChange)=\"handleChange($event)\" />\r\n\r\n    @if (!hideAlpha()) {\r\n    <cmat-color-input-field label=\"a\" [step]=\"0.01\" [value]=\"hsl()!.a\" (valueChange)=\"handleChange($event)\" />\r\n    }\r\n    }\r\n</div>\r\n\r\n<cmat-color-icon-button>\r\n    <button type=\"button\" (click)=\"toggleColorFormat()\">\r\n        <svg viewBox=\"0 0 24 24\">\r\n            <path fill=\"currentColor\"\r\n                d=\"M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z\" />\r\n        </svg>\r\n    </button>\r\n</cmat-color-icon-button>", styles: [".cmat-color-input-fields{display:flex;align-items:center;gap:8px;width:100%}.cmat-color-input-field-wrapper{flex:1;display:flex;gap:8px}.cmat-color-input-field-wrapper .cmat-color-input-field{flex:1}\n"], dependencies: [{ kind: "component", type: CmatColorInputField, selector: "cmat-color-input-field", inputs: ["label", "step", "placeholder", "value"], outputs: ["valueChange"] }, { kind: "component", type: CmatColorIconButton, selector: "cmat-color-icon-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatColorInputFields, decorators: [{
+            type: Component,
+            args: [{ selector: 'cmat-color-input-fields', imports: [CmatColorInputField, CmatColorIconButton], host: {
+                        class: 'cmat-color-input-fields',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cmat-color-input-field-wrapper\">\r\n    @if (format() === 'hex') {\r\n    <cmat-color-input-field label=\"hex\" [value]=\"hex()\" (valueChange)=\"handleChange($event)\" />\r\n    }\r\n    @if (format() === 'rgb') {\r\n    <cmat-color-input-field label=\"r\" [value]=\"rgb()!.r\" (valueChange)=\"handleChange($event)\" />\r\n    <cmat-color-input-field label=\"g\" [value]=\"rgb()!.g\" (valueChange)=\"handleChange($event)\" />\r\n    <cmat-color-input-field label=\"b\" [value]=\"rgb()!.b\" (valueChange)=\"handleChange($event)\" />\r\n\r\n    @if (!hideAlpha()) {\r\n    <cmat-color-input-field label=\"a\" [step]=\"0.01\" [value]=\"rgb()!.a\" (valueChange)=\"handleChange($event)\" />\r\n    }\r\n    }\r\n    @if (format() === 'hsl') {\r\n    <cmat-color-input-field label=\"h\" [value]=\"round(hsl()!.h)\" (valueChange)=\"handleChange($event)\" />\r\n    <cmat-color-input-field label=\"s\" [value]=\"round(hsl()!.s * 100) + '%'\" (valueChange)=\"handleChange($event)\" />\r\n    <cmat-color-input-field label=\"l\" [value]=\"round(hsl()!.l * 100) + '%'\" (valueChange)=\"handleChange($event)\" />\r\n\r\n    @if (!hideAlpha()) {\r\n    <cmat-color-input-field label=\"a\" [step]=\"0.01\" [value]=\"hsl()!.a\" (valueChange)=\"handleChange($event)\" />\r\n    }\r\n    }\r\n</div>\r\n\r\n<cmat-color-icon-button>\r\n    <button type=\"button\" (click)=\"toggleColorFormat()\">\r\n        <svg viewBox=\"0 0 24 24\">\r\n            <path fill=\"currentColor\"\r\n                d=\"M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z\" />\r\n        </svg>\r\n    </button>\r\n</cmat-color-icon-button>", styles: [".cmat-color-input-fields{display:flex;align-items:center;gap:8px;width:100%}.cmat-color-input-field-wrapper{flex:1;display:flex;gap:8px}.cmat-color-input-field-wrapper .cmat-color-input-field{flex:1}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: true }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }, { type: i0.Output, args: ["formatChange"] }], hideAlpha: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideAlpha", required: false }] }], formatChanged: [{ type: i0.Output, args: ["formatChanged"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+
+class CmatColorSaturationPicker {
+    constructor() {
+        this.color = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+        this.change = output();
+        this.hsl = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hsl" }] : /* istanbul ignore next */ []));
+        this.hsv = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hsv" }] : /* istanbul ignore next */ []));
+        this.bgColor = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "bgColor" }] : /* istanbul ignore next */ []));
+        this.posX = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "posX" }] : /* istanbul ignore next */ []));
+        this.posY = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "posY" }] : /* istanbul ignore next */ []));
+        this._el = inject(ElementRef);
+        effect(() => {
+            const color = this.color();
+            this.hsl.set(color.hsl);
+            this.hsv.set(color.hsv);
+            untracked(() => {
+                if (this.hsl()) {
+                    this.bgColor.set(`hsl(${this.hsl().h}, 100%, 50%)`);
+                }
+                if (this.hsv()) {
+                    this.posX.set(this.hsv().s * 100);
+                    this.posY.set(100 - this.hsv().v * 100);
+                }
+            });
+        });
+    }
+    handleChange(e) {
+        const { top, left, containerHeight, containerWidth } = e;
+        const s = Math.max(0, Math.min(left, containerWidth)) / containerWidth;
+        const v = 1 - Math.max(0, Math.min(top, containerHeight)) / containerHeight;
+        const hsv = this.hsv();
+        if (hsv) {
+            this.change.emit({ ...hsv, s, v, source: 'hsva' });
+        }
+    }
+    onScroll() {
+        const el = this._el.nativeElement;
+        if (el.scrollTop !== 0 || el.scrollLeft !== 0) {
+            el.scrollTop = 0;
+            el.scrollLeft = 0;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatColorSaturationPicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: CmatColorSaturationPicker, isStandalone: true, selector: "cmat-color-saturation-picker", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { change: "change" }, host: { listeners: { "scroll": "onScroll()" }, classAttribute: "cmat-color-saturation-picker" }, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n<div class=\"cmat-color-saturation-picker-content\" cmatColorCoordinates [percentX]=\"posX()\" [percentY]=\"posY()\"\r\n    [style.background-color]=\"bgColor()\" (coordinatesChange)=\"handleChange($event)\">\r\n    <div class=\"cmat-color-saturation-picker-pointer\"\r\n     [style.left.%]=\"posX()\" [style.top.%]=\"posY()\">\r\n        <button class=\"cmat-color-saturation-picker-thumb\" type=\"button\">\r\n            <!--  -->\r\n        </button>\r\n    </div>\r\n</div>", styles: [".cmat-color-saturation-picker{position:relative;display:block;width:100%;padding-bottom:55%;border-radius:var(--cp-saturation-picker-shape, 4px);overflow:hidden;box-shadow:0 0 0 1px #ffffff1f,0 0 0 1px #0000001f}.cmat-color-saturation-picker-content{position:absolute;inset:0;touch-action:none;background-image:linear-gradient(to top,#000,#0000),linear-gradient(to right,#fff,#fff0)}.cmat-color-saturation-picker-pointer{position:absolute}.cmat-color-saturation-picker-thumb{display:block;width:var(--cp-saturation-picker-thumb-size, 12px);height:var(--cp-saturation-picker-thumb-size, 12px);padding:0;border-radius:var(--cp-saturation-picker-thumb-shape, 6px);border:none;background:none;outline:1px solid var(--cp-saturation-picker-thumb-outline-color, #fff);outline-offset:-1px;transform:translate(-50%,-50%);box-shadow:var(--cp-saturation-picker-thumb-shadow, 0 2px 6px 0 rgba(0, 0, 0, .32))}.cmat-color-saturation-picker-thumb:focus-visible{outline-color:var(--cp-saturation-picker-thumb-focus-outline-color, var(--cp-input-focus-outline-color, #0d99ff))}\n"], dependencies: [{ kind: "directive", type: CmatColorCoordinates, selector: "[cmat-color-coordinates], [cmatColorCoordinates]", inputs: ["percentX", "percentY"], outputs: ["coordinatesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatColorSaturationPicker, decorators: [{
+            type: Component,
+            args: [{ selector: 'cmat-color-saturation-picker', imports: [CmatColorCoordinates], host: {
+                        'class': 'cmat-color-saturation-picker',
+                        // eslint-disable-next-line @typescript-eslint/naming-convention
+                        '(scroll)': 'onScroll()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n<div class=\"cmat-color-saturation-picker-content\" cmatColorCoordinates [percentX]=\"posX()\" [percentY]=\"posY()\"\r\n    [style.background-color]=\"bgColor()\" (coordinatesChange)=\"handleChange($event)\">\r\n    <div class=\"cmat-color-saturation-picker-pointer\"\r\n     [style.left.%]=\"posX()\" [style.top.%]=\"posY()\">\r\n        <button class=\"cmat-color-saturation-picker-thumb\" type=\"button\">\r\n            <!--  -->\r\n        </button>\r\n    </div>\r\n</div>", styles: [".cmat-color-saturation-picker{position:relative;display:block;width:100%;padding-bottom:55%;border-radius:var(--cp-saturation-picker-shape, 4px);overflow:hidden;box-shadow:0 0 0 1px #ffffff1f,0 0 0 1px #0000001f}.cmat-color-saturation-picker-content{position:absolute;inset:0;touch-action:none;background-image:linear-gradient(to top,#000,#0000),linear-gradient(to right,#fff,#fff0)}.cmat-color-saturation-picker-pointer{position:absolute}.cmat-color-saturation-picker-thumb{display:block;width:var(--cp-saturation-picker-thumb-size, 12px);height:var(--cp-saturation-picker-thumb-size, 12px);padding:0;border-radius:var(--cp-saturation-picker-thumb-shape, 6px);border:none;background:none;outline:1px solid var(--cp-saturation-picker-thumb-outline-color, #fff);outline-offset:-1px;transform:translate(-50%,-50%);box-shadow:var(--cp-saturation-picker-thumb-shadow, 0 2px 6px 0 rgba(0, 0, 0, .32))}.cmat-color-saturation-picker-thumb:focus-visible{outline-color:var(--cp-saturation-picker-thumb-focus-outline-color, var(--cp-input-focus-outline-color, #0d99ff))}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: true }] }], change: [{ type: i0.Output, args: ["change"] }] } });
+
+class CmatColorPickerComponent {
+    constructor() {
+        this.format = model('hex', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+        this.value = model('#000', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.hideAlpha = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hideAlpha" }] : /* istanbul ignore next */ []));
+        this.disabled = model(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.formatChanged = output();
+        this.valueChanged = output();
+        this.colorChanged = output();
+        this.parsedColor = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "parsedColor" }] : /* istanbul ignore next */ []));
+        this.isCopied = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isCopied" }] : /* istanbul ignore next */ []));
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/naming-convention, @typescript-eslint/no-unsafe-member-access
+        this.EyeDropper = window.EyeDropper;
+        this.supportEyeDropper = !!this.EyeDropper;
+        this._oldHue = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_oldHue" }] : /* istanbul ignore next */ []));
+        this._oldValue = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_oldValue" }] : /* istanbul ignore next */ []));
+        this.onChange = () => {
+        };
+        this.onTouched = () => {
+        };
+        effect(() => {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const format = this.format();
+            untracked(() => {
+                this.getColorFormat();
+            });
+        });
+        effect(() => {
+            const value = this.value();
+            untracked(() => {
+                if (value !== this._oldValue()) {
+                    this.getParsedColor(this.value(), this._oldHue());
+                }
+            });
+        });
+    }
+    ngOnInit() {
+        this.getParsedColor(this.value());
+    }
+    writeValue(value) {
+        if (value) {
+            this.value.set(value);
+            this.getColorFormat();
+            this.getParsedColor(value, this._oldHue());
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+    }
+    getParsedColor(data, oldHue = 0) {
+        this.parsedColor.set(parseColor(data, oldHue, this.hideAlpha()));
+        this._oldHue.set(this.parsedColor().oldHue);
+    }
+    handleChange(e) {
+        const isValidColor = simpleCheckForValidColor(e);
+        if (isValidColor) {
+            this.getParsedColor(e, e.h || this._oldHue());
+            this.getColorString(this.parsedColor());
+            this.onChange(this.value());
+            this.valueChanged.emit(this.value());
+            this.colorChanged.emit({ value: this.value(), color: this.parsedColor() });
+        }
+    }
+    getColorFormat() {
+        if (!this.format()) {
+            const color = new TinyColor(this.value());
+            if (color.format === 'rgb' || color.format === 'hsl' || color.format === 'hsv') {
+                this.format.set(color.format);
+            }
+            else {
+                this.format.set('hex');
+            }
+        }
+    }
+    getColorString(color) {
+        switch (this.format()) {
+            case 'rgb':
+                this.value.set(color.rgbString);
+                break;
+            case 'hsl':
+                this.value.set(color.hslString);
+                break;
+            case 'hsv':
+                this.value.set(color.hsvString);
+                break;
+            default:
+                this.value.set(color.hex);
+                break;
+        }
+        this._oldValue.set(this.value());
+    }
+    handleFormatChange() {
+        this.formatChanged.emit(this.format());
+    }
+    async openEyeDropper(e) {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call
+        const eyeDropper = new this.EyeDropper();
+        try {
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
+            const result = await eyeDropper.open();
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
+            this.handleChange({ hex: result.sRGBHex, source: 'rgb' });
+            e.preventDefault();
+        }
+        catch (err) {
+            console.warn(err);
+        }
+    }
+    async copyColor() {
+        try {
+            await navigator.clipboard.writeText(this.value());
+            this.isCopied.set(true);
+            setTimeout(() => {
+                this.isCopied.set(false);
+            }, 1000);
+        }
+        catch (err) {
+            console.warn(err);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CmatColorPickerComponent, isStandalone: true, selector: "cmat-color-picker", inputs: { format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, hideAlpha: { classPropertyName: "hideAlpha", publicName: "hideAlpha", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { format: "formatChange", value: "valueChange", disabled: "disabledChange", formatChanged: "formatChanged", valueChanged: "valueChanged", colorChanged: "colorChanged" }, host: { classAttribute: "cmat-color-picker" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => CmatColorPickerComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<cmat-color-saturation-picker [color]=\"parsedColor()!\" (change)=\"handleChange($event)\" />\r\n\r\n<div class=\"cmat-color-picker-controls\">\r\n  @if (supportEyeDropper) {\r\n  <cmat-color-icon-button>\r\n    <button type=\"button\" (click)=\"openEyeDropper($event)\">\r\n      <svg viewBox=\"0 0 24 24\">\r\n        <path fill=\"currentColor\"\r\n          d=\"M19.35,11.72L17.22,13.85L15.81,12.43L8.1,20.14L3.5,22L2,20.5L3.86,15.9L11.57,8.19L10.15,6.78L12.28,4.65L19.35,11.72M16.76,3C17.93,1.83 19.83,1.83 21,3C22.17,4.17 22.17,6.07 21,7.24L19.08,9.16L14.84,4.92L16.76,3M5.56,17.03L4.5,19.5L6.97,18.44L14.4,11L13,9.6L5.56,17.03Z\" />\r\n      </svg>\r\n    </button>\r\n  </cmat-color-icon-button>\r\n  }\r\n\r\n  <button class=\"cmat-color-preview\" type=\"button\" (click)=\"copyColor()\">\r\n    <div class=\"cmat-color-preview-bg\" [ngStyle]=\"{'background-color':value()}\"></div>\r\n      <div class=\"cmat-color-preview-backdrop\">\r\n        @if (this.isCopied()) {\r\n        <svg viewBox=\"0 0 24 24\">\r\n          <path fill=\"currentColor\" d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\" />\r\n        </svg>\r\n        } @else {\r\n        <svg viewBox=\"0 0 24 24\">\r\n          <path fill=\"currentColor\"\r\n            d=\"M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z\" />\r\n        </svg>\r\n        }\r\n      </div>\r\n  </button>\r\n\r\n  <div class=\"cmat-color-hue-alpha\">\r\n    <cmat-color-hue-slider [color]=\"parsedColor()!\" (change)=\"handleChange($event)\" />\r\n\r\n    @if (!hideAlpha()) {\r\n    <cmat-color-alpha-slider [color]=\"parsedColor()!\" (change)=\"handleChange($event)\" />\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<div class=\"cmat-color-picker-controls\">\r\n  <cmat-color-input-fields [color]=\"parsedColor()!\" [hideAlpha]=\"hideAlpha()\" [(format)]=\"format\"\r\n    (valueChange)=\"handleChange($event)\" (formatChange)=\"handleFormatChange()\" />\r\n</div>", styles: [".cmat-color-picker{--cp-container-text-color: rgba(0, 0, 0, .9);--cp-container-background-color: #fff;--cp-input-outline-color: #e6e6e6;--cp-input-hover-outline-color: #d6d6d6;--cp-input-focus-outline-color: #0d99ff;--cp-icon-button-hover-background-color: rgba(0, 0, 0, .06);--cp-icon-button-active-background-color: rgba(0, 0, 0, .12);--cp-slider-thumb-background-color: #f2f2f2;--cp-slider-thumb-outline-color: rgba(0, 0, 0, .04)}.cmat-color-picker:is(.dark *){--cp-container-text-color: #fff;--cp-container-background-color: #2c2c2c;--cp-input-outline-color: #444;--cp-input-hover-outline-color: #545454;--cp-input-focus-outline-color: #0c8ce9;--cp-icon-button-hover-background-color: rgba(255, 255, 255, .06);--cp-icon-button-active-background-color: rgba(255, 255, 255, .12);--cp-slider-thumb-background-color: #3c3c3c;--cp-slider-thumb-outline-color: rgba(255, 255, 255, .24)}.cmat-color-picker{box-sizing:border-box;display:block;width:var(--cp-container-width, 240px);padding:var(--cp-container-padding, 12px);margin:var(--cp-container-margin, 0);color:var(--cp-container-text-color);background-color:var(--cp-container-background-color);border-radius:var(--cp-container-shape, 8px);box-shadow:var(--cp-container-elevation-shadow, inset 0 0 1px 0 rgba(255, 255, 255, .64), 0 2px 4px 0 rgba(0, 0, 0, .16), 0 8px 16px 0 rgba(0, 0, 0, .12), 0 0 1px 0 rgba(0, 0, 0, .12))}.cmat-color-picker-controls{display:flex;align-items:center;gap:10px;margin-top:16px}.cmat-color-preview{width:32px;height:32px;border-radius:16px;position:relative;overflow:hidden;border:none;outline:none;background-color:#fff;background-image:conic-gradient(transparent 25%,#ccc 25% 50%,transparent 50% 75%,#ccc 75%);background-size:10px 10px;box-shadow:0 0 0 1px #ffffff1f,0 0 0 1px #0000001f;cursor:pointer}.cmat-color-preview:hover .cmat-color-preview-backdrop,.cmat-color-preview:focus-visible .cmat-color-preview-backdrop{opacity:1}.cmat-color-preview-bg{position:absolute;inset:0}.cmat-color-preview-backdrop{position:absolute;inset:0;padding:6px;background-color:#00000052;color:#fff;opacity:0;pointer-events:none}.cmat-color-hue-alpha{flex:1;display:flex;flex-direction:column;gap:8px}\n"], dependencies: [{ kind: "component", type: CmatColorSaturationPicker, selector: "cmat-color-saturation-picker", inputs: ["color"], outputs: ["change"] }, { kind: "component", type: CmatColorHueSlider, selector: "cmat-color-hue-slider", inputs: ["color", "direction"], outputs: ["change"] }, { kind: "component", type: CmatColorAlphaSlider, selector: "cmat-color-alpha-slider", inputs: ["color", "direction"], outputs: ["change"] }, { kind: "component", type: CmatColorInputFields, selector: "cmat-color-input-fields", inputs: ["color", "format", "hideAlpha"], outputs: ["formatChange", "formatChanged", "valueChange"] }, { kind: "component", type: CmatColorIconButton, selector: "cmat-color-icon-button" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatColorPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cmat-color-picker', imports: [
+                        CmatColorSaturationPicker,
+                        CmatColorHueSlider,
+                        CmatColorAlphaSlider,
+                        CmatColorInputFields,
+                        CmatColorIconButton,
+                        NgStyle
+                    ], host: {
+                        class: 'cmat-color-picker',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => CmatColorPickerComponent),
+                            multi: true,
+                        },
+                    ], template: "<cmat-color-saturation-picker [color]=\"parsedColor()!\" (change)=\"handleChange($event)\" />\r\n\r\n<div class=\"cmat-color-picker-controls\">\r\n  @if (supportEyeDropper) {\r\n  <cmat-color-icon-button>\r\n    <button type=\"button\" (click)=\"openEyeDropper($event)\">\r\n      <svg viewBox=\"0 0 24 24\">\r\n        <path fill=\"currentColor\"\r\n          d=\"M19.35,11.72L17.22,13.85L15.81,12.43L8.1,20.14L3.5,22L2,20.5L3.86,15.9L11.57,8.19L10.15,6.78L12.28,4.65L19.35,11.72M16.76,3C17.93,1.83 19.83,1.83 21,3C22.17,4.17 22.17,6.07 21,7.24L19.08,9.16L14.84,4.92L16.76,3M5.56,17.03L4.5,19.5L6.97,18.44L14.4,11L13,9.6L5.56,17.03Z\" />\r\n      </svg>\r\n    </button>\r\n  </cmat-color-icon-button>\r\n  }\r\n\r\n  <button class=\"cmat-color-preview\" type=\"button\" (click)=\"copyColor()\">\r\n    <div class=\"cmat-color-preview-bg\" [ngStyle]=\"{'background-color':value()}\"></div>\r\n      <div class=\"cmat-color-preview-backdrop\">\r\n        @if (this.isCopied()) {\r\n        <svg viewBox=\"0 0 24 24\">\r\n          <path fill=\"currentColor\" d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\" />\r\n        </svg>\r\n        } @else {\r\n        <svg viewBox=\"0 0 24 24\">\r\n          <path fill=\"currentColor\"\r\n            d=\"M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z\" />\r\n        </svg>\r\n        }\r\n      </div>\r\n  </button>\r\n\r\n  <div class=\"cmat-color-hue-alpha\">\r\n    <cmat-color-hue-slider [color]=\"parsedColor()!\" (change)=\"handleChange($event)\" />\r\n\r\n    @if (!hideAlpha()) {\r\n    <cmat-color-alpha-slider [color]=\"parsedColor()!\" (change)=\"handleChange($event)\" />\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<div class=\"cmat-color-picker-controls\">\r\n  <cmat-color-input-fields [color]=\"parsedColor()!\" [hideAlpha]=\"hideAlpha()\" [(format)]=\"format\"\r\n    (valueChange)=\"handleChange($event)\" (formatChange)=\"handleFormatChange()\" />\r\n</div>", styles: [".cmat-color-picker{--cp-container-text-color: rgba(0, 0, 0, .9);--cp-container-background-color: #fff;--cp-input-outline-color: #e6e6e6;--cp-input-hover-outline-color: #d6d6d6;--cp-input-focus-outline-color: #0d99ff;--cp-icon-button-hover-background-color: rgba(0, 0, 0, .06);--cp-icon-button-active-background-color: rgba(0, 0, 0, .12);--cp-slider-thumb-background-color: #f2f2f2;--cp-slider-thumb-outline-color: rgba(0, 0, 0, .04)}.cmat-color-picker:is(.dark *){--cp-container-text-color: #fff;--cp-container-background-color: #2c2c2c;--cp-input-outline-color: #444;--cp-input-hover-outline-color: #545454;--cp-input-focus-outline-color: #0c8ce9;--cp-icon-button-hover-background-color: rgba(255, 255, 255, .06);--cp-icon-button-active-background-color: rgba(255, 255, 255, .12);--cp-slider-thumb-background-color: #3c3c3c;--cp-slider-thumb-outline-color: rgba(255, 255, 255, .24)}.cmat-color-picker{box-sizing:border-box;display:block;width:var(--cp-container-width, 240px);padding:var(--cp-container-padding, 12px);margin:var(--cp-container-margin, 0);color:var(--cp-container-text-color);background-color:var(--cp-container-background-color);border-radius:var(--cp-container-shape, 8px);box-shadow:var(--cp-container-elevation-shadow, inset 0 0 1px 0 rgba(255, 255, 255, .64), 0 2px 4px 0 rgba(0, 0, 0, .16), 0 8px 16px 0 rgba(0, 0, 0, .12), 0 0 1px 0 rgba(0, 0, 0, .12))}.cmat-color-picker-controls{display:flex;align-items:center;gap:10px;margin-top:16px}.cmat-color-preview{width:32px;height:32px;border-radius:16px;position:relative;overflow:hidden;border:none;outline:none;background-color:#fff;background-image:conic-gradient(transparent 25%,#ccc 25% 50%,transparent 50% 75%,#ccc 75%);background-size:10px 10px;box-shadow:0 0 0 1px #ffffff1f,0 0 0 1px #0000001f;cursor:pointer}.cmat-color-preview:hover .cmat-color-preview-backdrop,.cmat-color-preview:focus-visible .cmat-color-preview-backdrop{opacity:1}.cmat-color-preview-bg{position:absolute;inset:0}.cmat-color-preview-backdrop{position:absolute;inset:0;padding:6px;background-color:#00000052;color:#fff;opacity:0;pointer-events:none}.cmat-color-hue-alpha{flex:1;display:flex;flex-direction:column;gap:8px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }, { type: i0.Output, args: ["formatChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], hideAlpha: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideAlpha", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], formatChanged: [{ type: i0.Output, args: ["formatChanged"] }], valueChanged: [{ type: i0.Output, args: ["valueChanged"] }], colorChanged: [{ type: i0.Output, args: ["colorChanged"] }] } });
+
+class CmatColorPickerButtonComponent {
+    constructor() {
+        this.format = model('hex', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+        this.value = model('#000', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.hideAlpha = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hideAlpha" }] : /* istanbul ignore next */ []));
+        this.disabled = model(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.placeholder = input('请输入', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        this.label = input('颜色', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        this.formatChanged = output();
+        this.valueChanged = output();
+        this.colorChanged = output();
+        this.isOpen = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    }
+    toggleMenu() {
+        this.isOpen.update(v => !v);
+    }
+    closeMenu() {
+        this.isOpen.set(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatColorPickerButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: CmatColorPickerButtonComponent, isStandalone: true, selector: "cmat-color-picker-button", inputs: { format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, hideAlpha: { classPropertyName: "hideAlpha", publicName: "hideAlpha", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { format: "formatChange", value: "valueChange", disabled: "disabledChange", formatChanged: "formatChanged", valueChanged: "valueChanged", colorChanged: "colorChanged" }, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n<section>\r\n  <mat-form-field class=\"w-full\">\r\n    <mat-label>{{ label() }}</mat-label>\r\n    <input matInput type=\"text\" [placeholder]=\"placeholder()\" [disabled]=\"disabled()\" [(ngModel)]=\"value\"\r\n      (ngModelChange)=\"valueChanged.emit($event);colorChanged.emit($event);\" />\r\n    <button #trigger=\"cdkOverlayOrigin\" matPrefix cdkOverlayOrigin class=\"ml-2\"\r\n      [ngClass]=\"{'pointer-events-none':disabled()}\"\r\n      [style.color]=\"value()\" (click)=\"toggleMenu()\">\r\n      <span></span>\r\n    </button>\r\n  </mat-form-field>\r\n</section>\r\n\r\n<ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger\" [cdkConnectedOverlayOpen]=\"isOpen()\"\r\n  (overlayOutsideClick)=\"closeMenu()\" (detach)=\"closeMenu()\">\r\n  <cmat-color-picker [format]=\"format()\" [hideAlpha]=\"hideAlpha()\" [disabled]=\"disabled()\" [(value)]=\"value\"\r\n    (formatChanged)=\"formatChanged.emit($event)\" (valueChanged)=\"valueChanged.emit($event)\"\r\n    (colorChanged)=\"colorChanged.emit($event)\" />\r\n</ng-template>", styles: ["cmat-color-picker-button section{--outline-color: #b4b4b4;--hover-outline-color: var(--cmat-primary)}cmat-color-picker-button section:is(.dark *){--outline-color: #4d4d4d}cmat-color-picker-button section{display:flex;gap:8px}cmat-color-picker-button .input-group{display:flex;gap:8px}cmat-color-picker-button .input-group input{flex:1}cmat-color-picker-button button{display:inline-flex;width:32px;height:32px;padding:4px;background:none;border-radius:8px;border:1px solid var(--outline-color);cursor:pointer}cmat-color-picker-button button:after{content:\"\";display:inline-block;width:100%;height:100%;background-color:currentColor;border-radius:3px}cmat-color-picker-button button:hover,cmat-color-picker-button button:focus{border-color:var(--hover-outline-color)}cmat-color-picker-button input{padding:4px 8px;border-radius:8px;border:1px solid var(--outline-color);display:flex;flex:1 auto}cmat-color-picker-button input:hover,cmat-color-picker-button input:focus{border-color:var(--hover-outline-color)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CmatColorPickerComponent, selector: "cmat-color-picker", inputs: ["format", "value", "hideAlpha", "disabled"], outputs: ["formatChange", "valueChange", "disabledChange", "formatChanged", "valueChanged", "colorChanged"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { 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: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatColorPickerButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cmat-color-picker-button', imports: [
+                        FormsModule, CmatColorPickerComponent, CdkConnectedOverlay, CdkOverlayOrigin,
+                        MatInputModule, ReactiveFormsModule, NgClass
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n<section>\r\n  <mat-form-field class=\"w-full\">\r\n    <mat-label>{{ label() }}</mat-label>\r\n    <input matInput type=\"text\" [placeholder]=\"placeholder()\" [disabled]=\"disabled()\" [(ngModel)]=\"value\"\r\n      (ngModelChange)=\"valueChanged.emit($event);colorChanged.emit($event);\" />\r\n    <button #trigger=\"cdkOverlayOrigin\" matPrefix cdkOverlayOrigin class=\"ml-2\"\r\n      [ngClass]=\"{'pointer-events-none':disabled()}\"\r\n      [style.color]=\"value()\" (click)=\"toggleMenu()\">\r\n      <span></span>\r\n    </button>\r\n  </mat-form-field>\r\n</section>\r\n\r\n<ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger\" [cdkConnectedOverlayOpen]=\"isOpen()\"\r\n  (overlayOutsideClick)=\"closeMenu()\" (detach)=\"closeMenu()\">\r\n  <cmat-color-picker [format]=\"format()\" [hideAlpha]=\"hideAlpha()\" [disabled]=\"disabled()\" [(value)]=\"value\"\r\n    (formatChanged)=\"formatChanged.emit($event)\" (valueChanged)=\"valueChanged.emit($event)\"\r\n    (colorChanged)=\"colorChanged.emit($event)\" />\r\n</ng-template>", styles: ["cmat-color-picker-button section{--outline-color: #b4b4b4;--hover-outline-color: var(--cmat-primary)}cmat-color-picker-button section:is(.dark *){--outline-color: #4d4d4d}cmat-color-picker-button section{display:flex;gap:8px}cmat-color-picker-button .input-group{display:flex;gap:8px}cmat-color-picker-button .input-group input{flex:1}cmat-color-picker-button button{display:inline-flex;width:32px;height:32px;padding:4px;background:none;border-radius:8px;border:1px solid var(--outline-color);cursor:pointer}cmat-color-picker-button button:after{content:\"\";display:inline-block;width:100%;height:100%;background-color:currentColor;border-radius:3px}cmat-color-picker-button button:hover,cmat-color-picker-button button:focus{border-color:var(--hover-outline-color)}cmat-color-picker-button input{padding:4px 8px;border-radius:8px;border:1px solid var(--outline-color);display:flex;flex:1 auto}cmat-color-picker-button input:hover,cmat-color-picker-button input:focus{border-color:var(--hover-outline-color)}\n"] }]
+        }], propDecorators: { format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }, { type: i0.Output, args: ["formatChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], hideAlpha: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideAlpha", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], formatChanged: [{ type: i0.Output, args: ["formatChanged"] }], valueChanged: [{ type: i0.Output, args: ["valueChanged"] }], colorChanged: [{ type: i0.Output, args: ["colorChanged"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CmatColorAlphaSlider, CmatColorCoordinates, CmatColorHueSlider, CmatColorIconButton, CmatColorInputField, CmatColorInputFields, CmatColorPickerButtonComponent, CmatColorPickerComponent, CmatColorSaturationPicker, hslToHsv, hsvToHsl, isValidHex, parseColor, simpleCheckForValidColor, toHslString, toHsvString };
+//# sourceMappingURL=cmat-components-color-picker.mjs.map