@elementar-rt/components 0.6.55

package/fesm2022/elementar-rt-components-color-picker.mjs

@@ -0,0 +1,708 @@
+import * as i0 from '@angular/core';
+import { inject, DOCUMENT, ElementRef, Directive, Renderer2, viewChild, model, input, output, ChangeDetectionStrategy, Component, ChangeDetectorRef, booleanAttribute, signal, forwardRef, ViewContainerRef, Injector, DestroyRef } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { Subject, merge, fromEvent, takeUntil } from 'rxjs';
+import { TinyColor } from '@ctrl/tinycolor';
+import { NgStyle } from '@angular/common';
+import { MatIconButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
+import { Directionality } from '@angular/cdk/bidi';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { _getEventTarget } from '@angular/cdk/platform';
+
+class BaseComponent {
+    subscriptions = [];
+    window = { pageXOffset: 0, pageYOffset: 0 };
+    requestAnimationFrame;
+    mouseup = new Subject();
+    document = inject(DOCUMENT);
+    elementRef = inject(ElementRef);
+    constructor() {
+        this.window = this.document.defaultView;
+        this.requestAnimationFrame = this.getRequestAnimationFrame();
+        this.addEventListeners();
+    }
+    addEventListeners() {
+        this.subscriptions.push(merge(fromEvent(this.elementRef.nativeElement, 'touchstart', { passive: true }), fromEvent(this.elementRef.nativeElement, 'mousedown'))
+            // @ts-ignore
+            .subscribe((e) => this.onEventChange(e)));
+    }
+    onEventChange(event) {
+        this.calculate(event);
+        merge(fromEvent(this.document, 'mouseup'), fromEvent(this.document, 'touchend'))
+            .pipe(takeUntil(this.mouseup))
+            .subscribe(() => this.mouseup.next());
+        merge(fromEvent(this.document, 'mousemove'), fromEvent(this.document, 'touchmove', { passive: true }))
+            .pipe(takeUntil(this.mouseup))
+            // @ts-ignore
+            .subscribe((e) => this.calculate(e));
+    }
+    calculateCoordinates(event) {
+        const { width: elWidth, height: elHeight, top: elTop, left: elLeft } = this.elementRef.nativeElement.getBoundingClientRect();
+        const pageX = typeof event.pageX === 'number'
+            ? event.pageX : event.touches[0].pageX;
+        const pageY = typeof event.pageY === 'number'
+            ? event.pageY : event.touches[0].pageY;
+        const x = Math.max(0, Math.min(pageX - (elLeft + this.window.pageXOffset), elWidth));
+        const y = Math.max(0, Math.min(pageY - (elTop + this.window.pageYOffset), elHeight));
+        this.movePointer({ x, y, height: elHeight, width: elWidth });
+    }
+    calculate(event) {
+        if (!event.type.includes('touch')) {
+            // event.preventDefault();
+        }
+        if (!this.requestAnimationFrame) {
+            return this.calculateCoordinates(event);
+        }
+        // @ts-ignore
+        this.requestAnimationFrame(() => this.calculateCoordinates(event));
+    }
+    getRequestAnimationFrame() {
+        return this.window.requestAnimationFrame ||
+            this.window.webkitRequestAnimationFrame ||
+            this.window.mozRequestAnimationFrame ||
+            this.window.oRequestAnimationFrame ||
+            this.window.msRequestAnimationFrame;
+    }
+    ngOnDestroy() {
+        this.mouseup.next();
+        this.mouseup.complete();
+        this.subscriptions.forEach((subscription) => subscription.unsubscribe());
+        this.subscriptions.length = 0;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: BaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: BaseComponent, isStandalone: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: BaseComponent, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [] });
+
+class SaturationComponent extends BaseComponent {
+    _renderer = inject(Renderer2);
+    pointer = viewChild.required('pointer');
+    tinyColor = model.required(...(ngDevMode ? [{ debugName: "tinyColor" }] : []));
+    colorFromHue = input(...(ngDevMode ? [undefined, { debugName: "colorFromHue" }] : []));
+    tmpColor;
+    pointerColor;
+    colorChange = output();
+    constructor() {
+        super();
+    }
+    ngOnInit() {
+        this.tmpColor = this.tinyColor();
+        this._renderer.setStyle(this.elementRef.nativeElement, 'background-color', this.getBackgroundColor(this.tinyColor()));
+    }
+    ngOnChanges(changes) {
+        if (changes['colorFromHue']) {
+            const prevColor = changes['colorFromHue'].previousValue;
+            const currentColor = changes['colorFromHue'].currentValue;
+            if (!currentColor || prevColor?.equals(currentColor)) {
+                return;
+            }
+            const oldColorHsv = this.pointerColor ? this.pointerColor.toHsv() : this.tmpColor.toHsv();
+            const newColorHsv = currentColor.toHsv();
+            const newColor = new TinyColor({
+                h: newColorHsv.h,
+                s: oldColorHsv.s,
+                v: oldColorHsv.v,
+                a: 1,
+                format: 'hsv'
+            });
+            this.tmpColor = newColor;
+            this._renderer.setStyle(this.elementRef.nativeElement, 'background-color', this.getBackgroundColor(changes['colorFromHue'].currentValue));
+            this._setPointerBgColor(newColor);
+            this.colorChange.emit(newColor);
+        }
+        if (changes['tinyColor']) {
+            const prevColor = changes['tinyColor'].previousValue;
+            const currentColor = changes['tinyColor'].currentValue;
+            if (prevColor?.equals(currentColor)) {
+                return;
+            }
+            this.tmpColor = currentColor.clone();
+            const hsv = this.tmpColor.toHsv();
+            this._renderer.setStyle(this.elementRef.nativeElement, 'background-color', this.getBackgroundColor(this.tmpColor));
+            this.changePointerPosition(hsv.s * 100, hsv.v * 100);
+            this._setPointerBgColor(this.tmpColor);
+        }
+    }
+    // @ts-ignore
+    movePointer({ x, y, height, width }) {
+        const saturationX = (x * 100) / width;
+        const bright = -((y * 100) / height) + 100;
+        this.changePointerPosition(saturationX, bright);
+        const hsv = this.tmpColor.toHsv();
+        const normalizedX = Math.max(0, Math.min(x / width, 1));
+        const normalizedY = Math.max(0, Math.min(y / height, 1));
+        const saturation = normalizedX;
+        const value = 1 - normalizedY; // Y=0 (верх) это Value=1, Y=height (низ) это Value=0
+        // Убедимся, что hue в пределах 0-360
+        const validHue = ((hsv.h % 360) + 360) % 360;
+        const newColor = new TinyColor({
+            h: validHue,
+            s: saturation,
+            v: value,
+            a: 1,
+            format: 'hsv'
+        });
+        this._renderer.setStyle(this.pointer().nativeElement, 'background-color', newColor.toRgbString());
+        this.pointerColor = newColor;
+        this.colorChange.emit(newColor);
+    }
+    getBackgroundColor(tinyColor) {
+        const hsl = tinyColor.toHsl();
+        return new TinyColor({
+            h: hsl.h,
+            s: 1,
+            l: 0.5,
+            a: 1,
+            format: 'hsl'
+        }).toRgbString();
+    }
+    changePointerPosition(x, y) {
+        const pointer = this.pointer();
+        this._renderer.setStyle(pointer.nativeElement, 'top', `${100 - y}%`);
+        this._renderer.setStyle(pointer.nativeElement, 'left', `${x}%`);
+    }
+    _setPointerBgColor(tinyColor) {
+        this.pointerColor = tinyColor;
+        this._renderer.setStyle(this.pointer().nativeElement, 'background-color', tinyColor.toRgbString());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: SaturationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.10", type: SaturationComponent, isStandalone: true, selector: "emr-saturation", inputs: { tinyColor: { classPropertyName: "tinyColor", publicName: "tinyColor", isSignal: true, isRequired: true, transformFunction: null }, colorFromHue: { classPropertyName: "colorFromHue", publicName: "colorFromHue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tinyColor: "tinyColorChange", colorChange: "colorChange" }, host: { classAttribute: "emr-saturation" }, viewQueries: [{ propertyName: "pointer", first: true, predicate: ["pointer"], descendants: true, isSignal: true }], exportAs: ["emrSaturation"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #pointer class=\"pointer\"></div>\r\n", styles: [":host{display:block;flex:none;position:relative;width:var(--emr-color-picker-saturation-width);height:var(--emr-color-picker-saturation-height);border-radius:var(--emr-color-picker-border-radius)}:host:before{content:\"\";background:linear-gradient(to right,#fff,#fff0);position:absolute;inset:0;z-index:0;border-radius:inherit}:host:after{content:\"\";background:linear-gradient(to top,#000,#0000);position:absolute;inset:0;z-index:1;border-radius:inherit}:host .pointer{z-index:2;flex:none;position:absolute;cursor:pointer;border:var(--emr-color-picker-saturation-pointer-border);top:0;left:0;border-radius:50%;width:var(--emr-color-picker-saturation-pointer-size);height:var(--emr-color-picker-saturation-pointer-size);transform:translate(-50%,-50%);box-shadow:var(--emr-color-picker-saturation-pointer-shadow)}\n/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: SaturationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'emr-saturation', exportAs: 'emrSaturation', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'class': 'emr-saturation'
+                    }, template: "<div #pointer class=\"pointer\"></div>\r\n", styles: [":host{display:block;flex:none;position:relative;width:var(--emr-color-picker-saturation-width);height:var(--emr-color-picker-saturation-height);border-radius:var(--emr-color-picker-border-radius)}:host:before{content:\"\";background:linear-gradient(to right,#fff,#fff0);position:absolute;inset:0;z-index:0;border-radius:inherit}:host:after{content:\"\";background:linear-gradient(to top,#000,#0000);position:absolute;inset:0;z-index:1;border-radius:inherit}:host .pointer{z-index:2;flex:none;position:absolute;cursor:pointer;border:var(--emr-color-picker-saturation-pointer-border);top:0;left:0;border-radius:50%;width:var(--emr-color-picker-saturation-pointer-size);height:var(--emr-color-picker-saturation-pointer-size);transform:translate(-50%,-50%);box-shadow:var(--emr-color-picker-saturation-pointer-shadow)}\n/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */\n"] }]
+        }], ctorParameters: () => [], propDecorators: { pointer: [{ type: i0.ViewChild, args: ['pointer', { isSignal: true }] }], tinyColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "tinyColor", required: true }] }, { type: i0.Output, args: ["tinyColorChange"] }], colorFromHue: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorFromHue", required: false }] }], colorChange: [{ type: i0.Output, args: ["colorChange"] }] } });
+
+class HueComponent extends BaseComponent {
+    cdr = inject(ChangeDetectorRef);
+    _renderer = inject(Renderer2);
+    pointer = viewChild.required('pointer');
+    tinyColor = input.required(...(ngDevMode ? [{ debugName: "tinyColor" }] : []));
+    colorChange = output();
+    ngOnChanges(changes) {
+        if (changes['tinyColor'] && changes['tinyColor'].previousValue !== changes['tinyColor'].currentValue) {
+            this.changePointerPosition(changes['tinyColor'].currentValue);
+            this._setPointerBgColor(changes['tinyColor'].currentValue);
+        }
+    }
+    // @ts-ignore
+    movePointer({ x, y, height, width }) {
+        let h = (x / width) * 360;
+        if (h >= 360) {
+            h = 359;
+        }
+        const newColor = new TinyColor(`hsv(${h}, 100%, 100%)`).setAlpha(1);
+        this.changePointerPosition(newColor);
+        this._renderer.setStyle(this.pointer().nativeElement, 'background-color', newColor.toRgbString());
+        this.colorChange.emit(newColor);
+    }
+    /**
+     * hue value is in range from 0 to 360°
+     */
+    changePointerPosition(tinyColor) {
+        const x = tinyColor.toHsl().h / 360 * 100;
+        this._renderer.setStyle(this.pointer().nativeElement, 'left', `${x}%`);
+    }
+    _setPointerBgColor(tinyColor) {
+        const hsv = tinyColor.toHsv();
+        const newColor = new TinyColor(`hsv(${hsv.h}, 100%, 100%)`).setAlpha(1);
+        this._renderer.setStyle(this.pointer().nativeElement, 'background-color', newColor.toRgbString());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: HueComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.10", type: HueComponent, isStandalone: true, selector: "emr-hue", inputs: { tinyColor: { classPropertyName: "tinyColor", publicName: "tinyColor", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { colorChange: "colorChange" }, host: { classAttribute: "emr-hue" }, viewQueries: [{ propertyName: "pointer", first: true, predicate: ["pointer"], descendants: true, isSignal: true }], exportAs: ["emrHue"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #pointer class=\"pointer\"></div>\r\n", styles: [":host{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAAAQCAYAAAD06IYnAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AIWDwkUFWbCCAAAAFxJREFUaN7t0kEKg0AQAME2x83/n2qu5qCgD1iDhCoYdpnbQC9bbY1qVO/jvc6k3ad91s7/7F1/csgPrujuQ17BDYSFsBAWwgJhISyEBcJCWAgLhIWwEBYIi2f7Ar/1TCgFH2X9AAAAAElFTkSuQmCC);background-size:100% 100%;touch-action:none;display:block;width:var(--emr-color-picker-hue-width);height:var(--emr-color-picker-hue-height);position:relative;border-radius:var(--emr-color-picker-border-radius)}:host .pointer{z-index:1;flex:none;position:absolute;cursor:pointer;left:0;border-radius:50%;width:var(--emr-color-picker-hue-pointer-size);height:var(--emr-color-picker-hue-pointer-size);box-shadow:var(--emr-color-picker-hue-pointer-shadow);border:var(--emr-color-picker-hue-pointer-border);top:50%;transform:translate(-50%,-50%)}\n/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: HueComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'emr-hue', exportAs: 'emrHue', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'class': 'emr-hue',
+                    }, template: "<div #pointer class=\"pointer\"></div>\r\n", styles: [":host{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAAAQCAYAAAD06IYnAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AIWDwkUFWbCCAAAAFxJREFUaN7t0kEKg0AQAME2x83/n2qu5qCgD1iDhCoYdpnbQC9bbY1qVO/jvc6k3ad91s7/7F1/csgPrujuQ17BDYSFsBAWwgJhISyEBcJCWAgLhIWwEBYIi2f7Ar/1TCgFH2X9AAAAAElFTkSuQmCC);background-size:100% 100%;touch-action:none;display:block;width:var(--emr-color-picker-hue-width);height:var(--emr-color-picker-hue-height);position:relative;border-radius:var(--emr-color-picker-border-radius)}:host .pointer{z-index:1;flex:none;position:absolute;cursor:pointer;left:0;border-radius:50%;width:var(--emr-color-picker-hue-pointer-size);height:var(--emr-color-picker-hue-pointer-size);box-shadow:var(--emr-color-picker-hue-pointer-shadow);border:var(--emr-color-picker-hue-pointer-border);top:50%;transform:translate(-50%,-50%)}\n/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { pointer: [{ type: i0.ViewChild, args: ['pointer', { isSignal: true }] }], tinyColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "tinyColor", required: true }] }], colorChange: [{ type: i0.Output, args: ["colorChange"] }] } });
+
+class AlphaComponent extends BaseComponent {
+    _renderer = inject(Renderer2);
+    _pointer = viewChild.required('pointer');
+    _pointerBg = viewChild.required('pointerBg');
+    tinyColor = input.required(...(ngDevMode ? [{ debugName: "tinyColor" }] : []));
+    colorFromHue = input(...(ngDevMode ? [undefined, { debugName: "colorFromHue" }] : []));
+    tmpColor;
+    alpha = 1;
+    alphaChange = output();
+    ngOnInit() {
+        this.tmpColor = this.tinyColor();
+        this.alpha = this.tmpColor.getAlpha();
+    }
+    ngOnChanges(changes) {
+        if (changes['tinyColor'] && changes['tinyColor'].previousValue !== changes['tinyColor'].currentValue) {
+            if (!changes['tinyColor'].currentValue) {
+                return;
+            }
+            this.tmpColor = changes['tinyColor'].currentValue.clone();
+            this.alpha = this.tmpColor.getAlpha();
+            this.changePointerPosition(this.tmpColor.getAlpha());
+            this._setPointerBgColor(this.tmpColor);
+        }
+        if (changes['colorFromHue'] && changes['colorFromHue'].previousValue !== changes['colorFromHue'].currentValue) {
+            if (!changes['colorFromHue'].currentValue) {
+                return;
+            }
+            this.tmpColor = changes['colorFromHue'].currentValue.clone().setAlpha(this.alpha);
+            this._setPointerBgColor(this.tmpColor);
+        }
+    }
+    // @ts-ignore
+    movePointer({ x, y, height, width }) {
+        const alpha = x / width;
+        this.changePointerPosition(alpha);
+        const newColor = this.tmpColor.clone().setAlpha(alpha);
+        this._renderer.setStyle(this._pointerBg().nativeElement, 'background-color', newColor.toRgbString());
+        this.alphaChange.emit(alpha);
+    }
+    get gradient() {
+        const rgba = this.tmpColor.toRgb();
+        const orientation = 'right';
+        return `linear-gradient(to ${orientation}, rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, 0) 0%, rgb(${rgba.r}, ${rgba.g}, ${rgba.b}) 100%)`;
+    }
+    /**
+     * hue value is in range from 0 to 360°
+     */
+    changePointerPosition(alpha) {
+        const x = alpha * 100;
+        const orientation = 'left';
+        this._renderer.setStyle(this._pointer().nativeElement, orientation, `${x}%`);
+        this.alpha = alpha;
+    }
+    _setPointerBgColor(tinyColor) {
+        this._renderer.setStyle(this._pointerBg().nativeElement, 'background-color', tinyColor.clone().setAlpha(this.alpha).toRgbString());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AlphaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.10", type: AlphaComponent, isStandalone: true, selector: "emr-alpha", inputs: { tinyColor: { classPropertyName: "tinyColor", publicName: "tinyColor", isSignal: true, isRequired: true, transformFunction: null }, colorFromHue: { classPropertyName: "colorFromHue", publicName: "colorFromHue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { alphaChange: "alphaChange" }, host: { classAttribute: "emr-alpha" }, viewQueries: [{ propertyName: "_pointer", first: true, predicate: ["pointer"], descendants: true, isSignal: true }, { propertyName: "_pointerBg", first: true, predicate: ["pointerBg"], descendants: true, isSignal: true }], exportAs: ["emrAlpha"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #pointer class=\"pointer\">\r\n  <div #pointerBg class=\"pointer-bg\"></div>\r\n</div>\r\n<div class=\"gradient\" [ngStyle]=\"{ 'background': gradient }\"></div>\r\n", styles: [":host{touch-action:none;display:block;width:var(--emr-color-picker-alpha-width);height:var(--emr-color-picker-alpha-height);position:relative;border-radius:var(--emr-color-picker-border-radius);background-position:0 0,6px 6px;background-size:12px 12px;background-image:repeating-linear-gradient(45deg,#dbdbdb 25%,transparent 25%,transparent 75%,#dbdbdb 75%,#dbdbdb),repeating-linear-gradient(45deg,#dbdbdb 25%,#fff 25% 75%,#dbdbdb 75%,#dbdbdb)}:host .gradient{display:block;content:\"\";border-radius:inherit;z-index:0;inset:0;position:absolute}:host[vertical]{width:var(--emr-color-picker-alpha-height);height:var(--emr-color-picker-alpha-width)}:host .pointer{z-index:1;flex:none;position:absolute;cursor:pointer;left:0;border-radius:50%;width:var(--emr-color-picker-alpha-pointer-size);height:var(--emr-color-picker-alpha-pointer-size);box-shadow:var(--emr-color-picker-alpha-pointer-shadow);border:var(--emr-color-picker-alpha-pointer-border);top:50%;transform:translate(-50%,-50%)}:host .pointer:before{content:\"\";position:absolute;inset:0;border-radius:inherit;background-position:0 0,6px 6px;background-size:12px 12px;background-image:repeating-linear-gradient(45deg,#dbdbdb 25%,transparent 25%,transparent 75%,#dbdbdb 75%,#dbdbdb),repeating-linear-gradient(45deg,#dbdbdb 25%,#fff 25% 75%,#dbdbdb 75%,#dbdbdb)}:host .pointer-bg{position:absolute;inset:0;border-radius:inherit}\n/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AlphaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'emr-alpha', exportAs: 'emrAlpha', imports: [
+                        NgStyle
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'class': 'emr-alpha'
+                    }, template: "<div #pointer class=\"pointer\">\r\n  <div #pointerBg class=\"pointer-bg\"></div>\r\n</div>\r\n<div class=\"gradient\" [ngStyle]=\"{ 'background': gradient }\"></div>\r\n", styles: [":host{touch-action:none;display:block;width:var(--emr-color-picker-alpha-width);height:var(--emr-color-picker-alpha-height);position:relative;border-radius:var(--emr-color-picker-border-radius);background-position:0 0,6px 6px;background-size:12px 12px;background-image:repeating-linear-gradient(45deg,#dbdbdb 25%,transparent 25%,transparent 75%,#dbdbdb 75%,#dbdbdb),repeating-linear-gradient(45deg,#dbdbdb 25%,#fff 25% 75%,#dbdbdb 75%,#dbdbdb)}:host .gradient{display:block;content:\"\";border-radius:inherit;z-index:0;inset:0;position:absolute}:host[vertical]{width:var(--emr-color-picker-alpha-height);height:var(--emr-color-picker-alpha-width)}:host .pointer{z-index:1;flex:none;position:absolute;cursor:pointer;left:0;border-radius:50%;width:var(--emr-color-picker-alpha-pointer-size);height:var(--emr-color-picker-alpha-pointer-size);box-shadow:var(--emr-color-picker-alpha-pointer-shadow);border:var(--emr-color-picker-alpha-pointer-border);top:50%;transform:translate(-50%,-50%)}:host .pointer:before{content:\"\";position:absolute;inset:0;border-radius:inherit;background-position:0 0,6px 6px;background-size:12px 12px;background-image:repeating-linear-gradient(45deg,#dbdbdb 25%,transparent 25%,transparent 75%,#dbdbdb 75%,#dbdbdb),repeating-linear-gradient(45deg,#dbdbdb 25%,#fff 25% 75%,#dbdbdb 75%,#dbdbdb)}:host .pointer-bg{position:absolute;inset:0;border-radius:inherit}\n/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { _pointer: [{ type: i0.ViewChild, args: ['pointer', { isSignal: true }] }], _pointerBg: [{ type: i0.ViewChild, args: ['pointerBg', { isSignal: true }] }], tinyColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "tinyColor", required: true }] }], colorFromHue: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorFromHue", required: false }] }], alphaChange: [{ type: i0.Output, args: ["alphaChange"] }] } });
+
+class ColorPickerComponent {
+    cdr = inject(ChangeDetectorRef);
+    color = input('', ...(ngDevMode ? [{ debugName: "color" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{
+            transform: booleanAttribute
+        }]));
+    asDropdown = input(true, ...(ngDevMode ? [{ debugName: "asDropdown", transform: booleanAttribute }] : [{
+            transform: booleanAttribute
+        }]));
+    showOpacity = input(true, ...(ngDevMode ? [{ debugName: "showOpacity", transform: booleanAttribute }] : [{
+            transform: booleanAttribute
+        }]));
+    resultFormat = input('rgb', ...(ngDevMode ? [{ debugName: "resultFormat" }] : []));
+    colorChange = output();
+    rawColorChange = output();
+    tmpColor;
+    hexColor;
+    _color = signal(new TinyColor('red'), ...(ngDevMode ? [{ debugName: "_color" }] : []));
+    _colorFromHue = signal(null, ...(ngDevMode ? [{ debugName: "_colorFromHue" }] : []));
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+    alpha = signal(1, ...(ngDevMode ? [{ debugName: "alpha" }] : []));
+    ngOnInit() {
+        if (this.color()) {
+            this._setColor(this.color());
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes['color'] && changes['color'].previousValue !== changes['color'].currentValue) {
+            this._setColor(changes['color'].currentValue);
+        }
+        if (changes['disabled'] && changes['disabled'].previousValue !== changes['disabled'].currentValue) {
+            this._disabled.set(coerceBooleanProperty(changes['disabled'].currentValue));
+        }
+    }
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(color) {
+        this._setColor(color);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._disabled.set(coerceBooleanProperty(isDisabled));
+    }
+    async copyToClipboard(event, hexInput) {
+        event.preventDefault();
+        event.stopPropagation();
+        const color = new TinyColor(this.hexColor);
+        if (color.isValid) {
+            await navigator.clipboard.writeText(color.toHexString());
+        }
+        hexInput.blur();
+    }
+    onSaturationColorChange(tinyColor) {
+        this.tmpColor = tinyColor.clone();
+        const newColor = tinyColor.clone().setAlpha(this.alpha());
+        this.rawColorChange.emit(newColor);
+        this.emitEvent(newColor);
+        this._setHexColor(newColor);
+    }
+    _handleContextMenu(event) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    onAlphaChange(alpha) {
+        this.alpha.set(alpha);
+        const newColor = this.tmpColor.clone();
+        newColor.setAlpha(alpha);
+        this.rawColorChange.emit(newColor.clone().setAlpha(this.alpha()));
+        this.emitEvent(newColor);
+    }
+    onHueColorChange(color) {
+        this._colorFromHue.set(color);
+    }
+    onHexColorChange(color) {
+        if (!color.startsWith('#')) {
+            return;
+        }
+        if (color.length === 4 || color.length === 7) {
+            const hexColor = new TinyColor(color);
+            if (!hexColor.isValid || hexColor.equals(this._color())) {
+                return;
+            }
+            this._setColor(color, false);
+            this.emitEvent(hexColor);
+        }
+    }
+    onHexColorBlur() {
+        if (!this.hexColor.trim()) {
+            this.hexColor = this.tmpColor.toHexString();
+        }
+    }
+    _setHexColor(tinyColor) {
+        if (!tinyColor.isValid) {
+            return;
+        }
+        const hexColor = new TinyColor(this.hexColor);
+        if (hexColor.isValid && hexColor.equals(tinyColor)) {
+            return;
+        }
+        this.hexColor = tinyColor.toHexString();
+    }
+    _setColor(color, isSetHexColor = true) {
+        if (!color) {
+            color = 'red';
+        }
+        let newColor = new TinyColor(color);
+        if (!newColor.isValid) {
+            return;
+        }
+        if (!newColor.equals(this._color())) {
+            this._color.set(newColor);
+            this.tmpColor = this._color().clone();
+            if (isSetHexColor) {
+                this.hexColor = this.tmpColor.toHexString();
+            }
+        }
+    }
+    emitEvent(newColor) {
+        let format = newColor.toRgbString();
+        if (this.resultFormat() === 'hex') {
+            format = newColor.toHexString();
+        }
+        else if (this.resultFormat() === 'hsl') {
+            format = newColor.toHslString();
+        }
+        else if (this.resultFormat() === 'hsv') {
+            format = newColor.toHsvString();
+        }
+        this.colorChange.emit(format);
+        this.onChange(format);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: ColorPickerComponent, isStandalone: true, selector: "emr-color-picker", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, asDropdown: { classPropertyName: "asDropdown", publicName: "asDropdown", isSignal: true, isRequired: false, transformFunction: null }, showOpacity: { classPropertyName: "showOpacity", publicName: "showOpacity", isSignal: true, isRequired: false, transformFunction: null }, resultFormat: { classPropertyName: "resultFormat", publicName: "resultFormat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorChange: "colorChange", rawColorChange: "rawColorChange" }, host: { listeners: { "contextmenu": "_handleContextMenu($event)" }, properties: { "class.is-disabled": "_disabled()", "class.as-dropdown": "asDropdown()" }, classAttribute: "emr-color-picker" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ColorPickerComponent),
+                multi: true
+            }
+        ], exportAs: ["emrColorPicker"], usesOnChanges: true, ngImport: i0, template: "<emr-saturation [colorFromHue]=\"_colorFromHue()\"\r\n                [tinyColor]=\"_color()\"\r\n                (colorChange)=\"onSaturationColorChange($event)\"/>\r\n<emr-hue [tinyColor]=\"_color()\"\r\n         (colorChange)=\"onHueColorChange($event)\"/>\r\n@if (showOpacity()) {\r\n  <emr-alpha [colorFromHue]=\"_colorFromHue()\"\r\n             [tinyColor]=\"_color()\"\r\n             (alphaChange)=\"onAlphaChange($event)\"/>\r\n}\r\n<div class=\"relative h-12 bg-surface-container-highest\r\n            has-[:focus]:bg-surface-container-lowest has-[:focus]:shadow-sm rounded-lg\">\r\n  <div class=\"text-4xs absolute start-3 top-1\">HEX</div>\r\n  <input #hexInput\r\n         type=\"text\" maxlength=\"7\"\r\n         class=\"h-10 mt-2 px-3 focus:outline-none w-full\"\r\n         [(ngModel)]=\"hexColor\"\r\n         (ngModelChange)=\"onHexColorChange($event)\"\r\n         (blur)=\"onHexColorBlur()\">\r\n  <div class=\"absolute right-0 top-1/2 -translate-y-1/2 z-1\">\r\n    <button mat-icon-button (mousedown)=\"copyToClipboard($event, hexInput)\">\r\n      <mat-icon>content_copy</mat-icon>\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: [":host{--emr-color-picker-bg: var(--color-surface-container);--emr-color-picker-border-radius: .375rem;--emr-color-picker-margin-offset: calc(var(--spacing, .25rem) * 2);--emr-color-picker-border: 0 solid var(--color-neutral-200);--emr-color-picker-padding: calc(var(--spacing, .25rem) * 3);--emr-color-picker-gap: calc(var(--spacing, .25rem) * 2.5);--emr-color-picker-as-dropdown-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--emr-color-picker-saturation-width: 260px;--emr-color-picker-saturation-height: 110px;--emr-color-picker-saturation-pointer-size: calc(var(--spacing, .25rem) * 5);--emr-color-picker-saturation-pointer-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--emr-color-picker-saturation-pointer-border: 2px solid white;--emr-color-picker-hue-width: var(--emr-color-picker-saturation-width);--emr-color-picker-hue-height: calc(var(--spacing, .25rem) * 3);--emr-color-picker-hue-pointer-size: calc(var(--spacing, .25rem) * 5);--emr-color-picker-hue-pointer-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--emr-color-picker-hue-pointer-border: 2px solid white;--emr-color-picker-alpha-width: var(--emr-color-picker-saturation-width);--emr-color-picker-alpha-height: calc(var(--spacing, .25rem) * 3);--emr-color-picker-alpha-pointer-size: calc(var(--spacing, .25rem) * 5);--emr-color-picker-alpha-pointer-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--emr-color-picker-alpha-pointer-border: 2px solid white;display:inline-grid;-webkit-user-select:none;user-select:none;position:relative;flex:none;gap:var(--emr-color-picker-gap);background:var(--emr-color-picker-bg);border-radius:var(--emr-color-picker-border-radius);border:var(--emr-color-picker-border);padding:var(--emr-color-picker-padding)}:host.is-disabled{pointer-events:none}:host.as-dropdown{box-shadow:var(--emr-color-picker-as-dropdown-shadow)}@keyframes emr-color-picker-animation{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}:host-context(.emr-color-picker-overlay-panel){animation:.15s emr-color-picker-animation}:host-context(.emr-color-picker-above){margin-bottom:var(--emr-color-picker-margin-offset);transform-origin:bottom}:host-context(.emr-color-picker-below){margin-top:var(--emr-color-picker-margin-offset);transform-origin:top}:host-context(.emr-color-picker-before){margin-inline-end:var(--emr-color-picker-margin-offset);transform-origin:right}:host-context(.emr-color-picker-after){margin-inline-start:var(--emr-color-picker-margin-offset);transform-origin:left}\n/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AlphaComponent, selector: "emr-alpha", inputs: ["tinyColor", "colorFromHue"], outputs: ["alphaChange"], exportAs: ["emrAlpha"] }, { kind: "component", type: SaturationComponent, selector: "emr-saturation", inputs: ["tinyColor", "colorFromHue"], outputs: ["tinyColorChange", "colorChange"], exportAs: ["emrSaturation"] }, { kind: "component", type: HueComponent, selector: "emr-hue", inputs: ["tinyColor"], outputs: ["colorChange"], exportAs: ["emrHue"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ColorPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'emr-color-picker', exportAs: 'emrColorPicker', imports: [
+                        FormsModule,
+                        AlphaComponent,
+                        SaturationComponent,
+                        HueComponent,
+                        MatIconButton,
+                        MatIcon
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ColorPickerComponent),
+                            multi: true
+                        }
+                    ], host: {
+                        'class': 'emr-color-picker',
+                        '[class.is-disabled]': '_disabled()',
+                        '[class.as-dropdown]': 'asDropdown()',
+                        '(contextmenu)': '_handleContextMenu($event)'
+                    }, template: "<emr-saturation [colorFromHue]=\"_colorFromHue()\"\r\n                [tinyColor]=\"_color()\"\r\n                (colorChange)=\"onSaturationColorChange($event)\"/>\r\n<emr-hue [tinyColor]=\"_color()\"\r\n         (colorChange)=\"onHueColorChange($event)\"/>\r\n@if (showOpacity()) {\r\n  <emr-alpha [colorFromHue]=\"_colorFromHue()\"\r\n             [tinyColor]=\"_color()\"\r\n             (alphaChange)=\"onAlphaChange($event)\"/>\r\n}\r\n<div class=\"relative h-12 bg-surface-container-highest\r\n            has-[:focus]:bg-surface-container-lowest has-[:focus]:shadow-sm rounded-lg\">\r\n  <div class=\"text-4xs absolute start-3 top-1\">HEX</div>\r\n  <input #hexInput\r\n         type=\"text\" maxlength=\"7\"\r\n         class=\"h-10 mt-2 px-3 focus:outline-none w-full\"\r\n         [(ngModel)]=\"hexColor\"\r\n         (ngModelChange)=\"onHexColorChange($event)\"\r\n         (blur)=\"onHexColorBlur()\">\r\n  <div class=\"absolute right-0 top-1/2 -translate-y-1/2 z-1\">\r\n    <button mat-icon-button (mousedown)=\"copyToClipboard($event, hexInput)\">\r\n      <mat-icon>content_copy</mat-icon>\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: [":host{--emr-color-picker-bg: var(--color-surface-container);--emr-color-picker-border-radius: .375rem;--emr-color-picker-margin-offset: calc(var(--spacing, .25rem) * 2);--emr-color-picker-border: 0 solid var(--color-neutral-200);--emr-color-picker-padding: calc(var(--spacing, .25rem) * 3);--emr-color-picker-gap: calc(var(--spacing, .25rem) * 2.5);--emr-color-picker-as-dropdown-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--emr-color-picker-saturation-width: 260px;--emr-color-picker-saturation-height: 110px;--emr-color-picker-saturation-pointer-size: calc(var(--spacing, .25rem) * 5);--emr-color-picker-saturation-pointer-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--emr-color-picker-saturation-pointer-border: 2px solid white;--emr-color-picker-hue-width: var(--emr-color-picker-saturation-width);--emr-color-picker-hue-height: calc(var(--spacing, .25rem) * 3);--emr-color-picker-hue-pointer-size: calc(var(--spacing, .25rem) * 5);--emr-color-picker-hue-pointer-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--emr-color-picker-hue-pointer-border: 2px solid white;--emr-color-picker-alpha-width: var(--emr-color-picker-saturation-width);--emr-color-picker-alpha-height: calc(var(--spacing, .25rem) * 3);--emr-color-picker-alpha-pointer-size: calc(var(--spacing, .25rem) * 5);--emr-color-picker-alpha-pointer-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--emr-color-picker-alpha-pointer-border: 2px solid white;display:inline-grid;-webkit-user-select:none;user-select:none;position:relative;flex:none;gap:var(--emr-color-picker-gap);background:var(--emr-color-picker-bg);border-radius:var(--emr-color-picker-border-radius);border:var(--emr-color-picker-border);padding:var(--emr-color-picker-padding)}:host.is-disabled{pointer-events:none}:host.as-dropdown{box-shadow:var(--emr-color-picker-as-dropdown-shadow)}@keyframes emr-color-picker-animation{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}:host-context(.emr-color-picker-overlay-panel){animation:.15s emr-color-picker-animation}:host-context(.emr-color-picker-above){margin-bottom:var(--emr-color-picker-margin-offset);transform-origin:bottom}:host-context(.emr-color-picker-below){margin-top:var(--emr-color-picker-margin-offset);transform-origin:top}:host-context(.emr-color-picker-before){margin-inline-end:var(--emr-color-picker-margin-offset);transform-origin:right}:host-context(.emr-color-picker-after){margin-inline-start:var(--emr-color-picker-margin-offset);transform-origin:left}\n/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], asDropdown: [{ type: i0.Input, args: [{ isSignal: true, alias: "asDropdown", required: false }] }], showOpacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOpacity", required: false }] }], resultFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "resultFormat", required: false }] }], colorChange: [{ type: i0.Output, args: ["colorChange"] }], rawColorChange: [{ type: i0.Output, args: ["rawColorChange"] }] } });
+
+class ColorPickerThumbnailComponent {
+    _elementRef = inject(ElementRef);
+    color = input('', ...(ngDevMode ? [{ debugName: "color" }] : []));
+    ngOnChanges(changes) {
+        if (!this.color()) {
+            return;
+        }
+        this._elementRef.nativeElement.style.setProperty('--emr-color-picker-thumbnail-bg', this.color());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ColorPickerThumbnailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.10", type: ColorPickerThumbnailComponent, isStandalone: true, selector: "emr-color-picker-thumbnail,[emr-color-picker-thumbnail]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "emr-color-picker-thumbnail" }, exportAs: ["emrColorPickerThumbnail"], usesOnChanges: true, ngImport: i0, template: "", styles: [":host{--emr-color-picker-thumbnail-bg: transparent;--emr-color-picker-thumbnail-size: calc(var(--spacing, .25rem) * 8);--emr-color-picker-thumbnail-border-radius: calc(infinity * 1px);display:inline-block;position:relative;border-radius:var(--emr-color-picker-thumbnail-border-radius);width:var(--emr-color-picker-thumbnail-size);height:var(--emr-color-picker-thumbnail-size);flex:none}:host:before{display:block;content:\"\";border-radius:inherit;z-index:0;inset:0;position:absolute;background-position:0 0,4px 4px;background-size:8px 8px;background-image:repeating-linear-gradient(45deg,#dbdbdb 25%,transparent 25%,transparent 75%,#dbdbdb 75%,#dbdbdb),repeating-linear-gradient(45deg,#dbdbdb 25%,#fff 25% 75%,#dbdbdb 75%,#dbdbdb)}:host:after{display:block;content:\"\";border-radius:inherit;z-index:1;inset:0;position:absolute;background:var(--emr-color-picker-thumbnail-bg)}:host:active{transition:var(--emr-transition-transform);transform:scale(.97)}\n/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ColorPickerThumbnailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'emr-color-picker-thumbnail,[emr-color-picker-thumbnail]', exportAs: 'emrColorPickerThumbnail', host: {
+                        'class': 'emr-color-picker-thumbnail'
+                    }, template: "", styles: [":host{--emr-color-picker-thumbnail-bg: transparent;--emr-color-picker-thumbnail-size: calc(var(--spacing, .25rem) * 8);--emr-color-picker-thumbnail-border-radius: calc(infinity * 1px);display:inline-block;position:relative;border-radius:var(--emr-color-picker-thumbnail-border-radius);width:var(--emr-color-picker-thumbnail-size);height:var(--emr-color-picker-thumbnail-size);flex:none}:host:before{display:block;content:\"\";border-radius:inherit;z-index:0;inset:0;position:absolute;background-position:0 0,4px 4px;background-size:8px 8px;background-image:repeating-linear-gradient(45deg,#dbdbdb 25%,transparent 25%,transparent 75%,#dbdbdb 75%,#dbdbdb),repeating-linear-gradient(45deg,#dbdbdb 25%,#fff 25% 75%,#dbdbdb 75%,#dbdbdb)}:host:after{display:block;content:\"\";border-radius:inherit;z-index:1;inset:0;position:absolute;background:var(--emr-color-picker-thumbnail-bg)}:host:active{transition:var(--emr-transition-transform);transform:scale(.97)}\n/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
+
+class PositionManager {
+    _positions = {
+        'below-start': {
+            originY: 'bottom',
+            overlayY: 'top',
+            originX: 'start',
+            overlayX: 'start',
+            panelClass: ['emr-color-picker-below', 'emr-color-picker-below-start']
+        },
+        'below-center': {
+            originY: 'bottom',
+            overlayY: 'top',
+            originX: 'center',
+            overlayX: 'center',
+            panelClass: ['emr-color-picker-below', 'emr-color-picker-below-center']
+        },
+        'below-end': {
+            originY: 'bottom',
+            overlayY: 'top',
+            originX: 'end',
+            overlayX: 'end',
+            panelClass: ['emr-color-picker-below', 'emr-color-picker-below-end']
+        },
+        'above-start': {
+            originY: 'top',
+            overlayY: 'bottom',
+            originX: 'start',
+            overlayX: 'start',
+            panelClass: ['emr-color-picker-above', 'emr-color-picker-above-start']
+        },
+        'above-center': {
+            originY: 'top',
+            overlayY: 'bottom',
+            originX: 'center',
+            overlayX: 'center',
+            panelClass: ['emr-color-picker-above', 'emr-color-picker-above-center']
+        },
+        'above-end': {
+            originY: 'top',
+            overlayY: 'bottom',
+            originX: 'end',
+            overlayX: 'end',
+            panelClass: ['emr-color-picker-above', 'emr-color-picker-above-end']
+        },
+        'before-start': {
+            originY: 'top',
+            overlayY: 'top',
+            originX: 'start',
+            overlayX: 'end',
+            panelClass: ['emr-color-picker-before', 'emr-color-picker-before-start']
+        },
+        'before-center': {
+            originY: 'center',
+            overlayY: 'center',
+            originX: 'start',
+            overlayX: 'end',
+            panelClass: ['emr-color-picker-before', 'emr-color-picker-before-center']
+        },
+        'before-end': {
+            originY: 'bottom',
+            overlayY: 'bottom',
+            originX: 'start',
+            overlayX: 'end',
+            panelClass: ['emr-color-picker-before', 'emr-color-picker-before-end']
+        },
+        'after-end': {
+            originY: 'bottom',
+            overlayY: 'bottom',
+            originX: 'end',
+            overlayX: 'start',
+            panelClass: ['emr-color-picker-after', 'emr-color-picker-after-end']
+        },
+        'after-center': {
+            originY: 'center',
+            overlayY: 'center',
+            originX: 'end',
+            overlayX: 'start',
+            panelClass: ['emr-color-picker-after', 'emr-color-picker-after-center']
+        },
+        'after-start': {
+            originY: 'top',
+            overlayY: 'top',
+            originX: 'end',
+            overlayX: 'start',
+            panelClass: ['emr-color-picker-after', 'emr-color-picker-after-start']
+        }
+    };
+    _positionPairs = {
+        'below-start': 'above-start',
+        'below-center': 'above-center',
+        'below-end': 'above-end',
+        'above-start': 'below-start',
+        'above-center': 'below-center',
+        'above-end': 'below-end',
+        'before-end': 'before-start',
+        'before-center': 'after-center',
+        'before-start': 'before-end',
+        'after-end': 'after-start',
+        'after-center': 'before-center',
+        'after-start': 'after-end'
+    };
+    build(position) {
+        return [this._positions[position], this._positions[this._positionPairs[position]]];
+    }
+}
+
+class ColorPickerTriggerForDirective {
+    _overlay = inject(Overlay);
+    _elementRef = inject(ElementRef);
+    _directionality = inject(Directionality, { optional: true });
+    _viewContainerRef = inject(ViewContainerRef);
+    _injector = inject(Injector);
+    _destroyRef = inject(DestroyRef);
+    colorPickerTemplateRef = input.required(...(ngDevMode ? [{ debugName: "colorPickerTemplateRef", alias: 'emrColorPickerTriggerFor' }] : [{
+            alias: 'emrColorPickerTriggerFor'
+        }]));
+    position = input('below-center', ...(ngDevMode ? [{ debugName: "position" }] : []));
+    opened = output();
+    closed = output();
+    _portal;
+    _overlayRef = null;
+    _destroy$ = new Subject();
+    constructor() {
+        this._setType();
+    }
+    ngOnDestroy() {
+        this._close();
+        this._destroyOverlay();
+    }
+    get api() {
+        return {
+            isOpen: () => this._isOpen(),
+            open: () => this._open(),
+            close: () => this._close(),
+        };
+    }
+    _handleClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        !this._isOpen() ? this._open() : this._close();
+    }
+    _isOpen() {
+        return !!this._overlayRef?.hasAttached();
+    }
+    _open() {
+        if (!this._isOpen() && this.colorPickerTemplateRef() != null) {
+            this.opened.emit();
+            this._overlayRef = this._overlay.create(this._getOverlayConfig());
+            this._overlayRef.attach(this._getPopoverContentPortal());
+            this._subscribeToOutsideClicks();
+        }
+    }
+    _close() {
+        this.closed.emit();
+        this._overlayRef?.detach();
+    }
+    _destroyOverlay() {
+        this._overlayRef?.dispose();
+        this._overlayRef = null;
+    }
+    _subscribeToOutsideClicks() {
+        if (this._overlayRef) {
+            this._overlayRef
+                .outsidePointerEvents()
+                .pipe(takeUntil(this._destroy$))
+                .subscribe(event => {
+                const target = _getEventTarget(event);
+                const element = this._elementRef.nativeElement;
+                if (target !== element && !element.contains(target)) {
+                    this._close();
+                }
+            });
+        }
+    }
+    _getPopoverContentPortal() {
+        this._portal = new TemplatePortal(this.colorPickerTemplateRef(), this._viewContainerRef, null, this._injector);
+        return this._portal;
+    }
+    _getOverlayConfig() {
+        return new OverlayConfig({
+            positionStrategy: this._getOverlayPositionStrategy(),
+            scrollStrategy: this._overlay.scrollStrategies.reposition(),
+            direction: this._directionality || undefined,
+            panelClass: 'emr-color-picker-overlay-panel'
+        });
+    }
+    _getOverlayPositionStrategy() {
+        return this._overlay
+            .position()
+            .flexibleConnectedTo(this._elementRef)
+            .withLockedPosition()
+            .withGrowAfterOpen()
+            .withPositions(this._getOverlayPositions());
+    }
+    _getOverlayPositions() {
+        return (new PositionManager()).build(this.position());
+    }
+    _setType() {
+        const element = this._elementRef.nativeElement;
+        if (element.nodeName === 'BUTTON' && !element.getAttribute('type')) {
+            // Prevents form submissions.
+            element.setAttribute('type', 'button');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ColorPickerTriggerForDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.10", type: ColorPickerTriggerForDirective, isStandalone: true, selector: "[emrColorPickerTriggerFor]", inputs: { colorPickerTemplateRef: { classPropertyName: "colorPickerTemplateRef", publicName: "emrColorPickerTriggerFor", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "click": "_handleClick($event)" }, classAttribute: "emr-color-picker-trigger-for" }, exportAs: ["emrColorPickerTriggerFor"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ColorPickerTriggerForDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[emrColorPickerTriggerFor]',
+                    exportAs: 'emrColorPickerTriggerFor',
+                    host: {
+                        'class': 'emr-color-picker-trigger-for',
+                        '(click)': '_handleClick($event)'
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { colorPickerTemplateRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "emrColorPickerTriggerFor", required: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ColorPickerComponent, ColorPickerThumbnailComponent, ColorPickerTriggerForDirective };
+//# sourceMappingURL=elementar-rt-components-color-picker.mjs.map