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 { Icon } from '@ngstarter-ui/components/icon';
import { Button } from '@ngstarter-ui/components/button';
import { FormField, Label, IconButtonSuffix } from '@ngstarter-ui/components/form-field';
import { Input } from '@ngstarter-ui/components/input';
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: "21.2.4", ngImport: i0, type: BaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: BaseComponent, isStandalone: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BaseComponent, decorators: [{
            type: Directive
        }], ctorParameters: () => [] });

class Saturation extends BaseComponent {
    _renderer = inject(Renderer2);
    pointer = viewChild.required('pointer');
    tinyColor = model.required(...(ngDevMode ? [{ debugName: "tinyColor" }] : /* istanbul ignore next */ []));
    colorFromHue = input(...(ngDevMode ? [undefined, { debugName: "colorFromHue" }] : /* istanbul ignore next */ []));
    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);
            // Removed this.colorChange.emit(newColor) to prevent NG0100 error.
            // Emitters in ngOnChanges can cause ExpressionChangedAfterItHasBeenCheckedError.
            // ColorPicker already knows about colorFromHue changes.
        }
        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: "21.2.4", ngImport: i0, type: Saturation, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: Saturation, isStandalone: true, selector: "ngs-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: "ngs-saturation" }, viewQueries: [{ propertyName: "pointer", first: true, predicate: ["pointer"], descendants: true, isSignal: true }], exportAs: ["ngsSaturation"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #pointer class=\"pointer\"></div>\n", styles: [":host{display:block;flex:none;position:relative;width:var(--ngs-color-picker-saturation-width);height:var(--ngs-color-picker-saturation-height);border-radius:var(--ngs-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(--ngs-color-picker-saturation-pointer-border);top:0;left:0;border-radius:50%;width:var(--ngs-color-picker-saturation-pointer-size);height:var(--ngs-color-picker-saturation-pointer-size);transform:translate(-50%,-50%);box-shadow:var(--ngs-color-picker-saturation-pointer-shadow)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Saturation, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-saturation', exportAs: 'ngsSaturation', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        'class': 'ngs-saturation'
                    }, template: "<div #pointer class=\"pointer\"></div>\n", styles: [":host{display:block;flex:none;position:relative;width:var(--ngs-color-picker-saturation-width);height:var(--ngs-color-picker-saturation-height);border-radius:var(--ngs-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(--ngs-color-picker-saturation-pointer-border);top:0;left:0;border-radius:50%;width:var(--ngs-color-picker-saturation-pointer-size);height:var(--ngs-color-picker-saturation-pointer-size);transform:translate(-50%,-50%);box-shadow:var(--ngs-color-picker-saturation-pointer-shadow)}\n/*! tailwindcss v4.2.2 | 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 Hue extends BaseComponent {
    cdr = inject(ChangeDetectorRef);
    _renderer = inject(Renderer2);
    pointer = viewChild.required('pointer');
    tinyColor = input.required(...(ngDevMode ? [{ debugName: "tinyColor" }] : /* istanbul ignore next */ []));
    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: "21.2.4", ngImport: i0, type: Hue, deps: null, target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: Hue, isStandalone: true, selector: "ngs-hue", inputs: { tinyColor: { classPropertyName: "tinyColor", publicName: "tinyColor", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { colorChange: "colorChange" }, host: { classAttribute: "ngs-hue" }, viewQueries: [{ propertyName: "pointer", first: true, predicate: ["pointer"], descendants: true, isSignal: true }], exportAs: ["ngsHue"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #pointer class=\"pointer\"></div>\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(--ngs-color-picker-hue-width);height:var(--ngs-color-picker-hue-height);position:relative;border-radius:var(--ngs-color-picker-border-radius)}:host .pointer{z-index:1;flex:none;position:absolute;cursor:pointer;left:0;border-radius:50%;width:var(--ngs-color-picker-hue-pointer-size);height:var(--ngs-color-picker-hue-pointer-size);box-shadow:var(--ngs-color-picker-hue-pointer-shadow);border:var(--ngs-color-picker-hue-pointer-border);top:50%;transform:translate(-50%,-50%)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Hue, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-hue', exportAs: 'ngsHue', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        'class': 'ngs-hue',
                    }, template: "<div #pointer class=\"pointer\"></div>\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(--ngs-color-picker-hue-width);height:var(--ngs-color-picker-hue-height);position:relative;border-radius:var(--ngs-color-picker-border-radius)}:host .pointer{z-index:1;flex:none;position:absolute;cursor:pointer;left:0;border-radius:50%;width:var(--ngs-color-picker-hue-pointer-size);height:var(--ngs-color-picker-hue-pointer-size);box-shadow:var(--ngs-color-picker-hue-pointer-shadow);border:var(--ngs-color-picker-hue-pointer-border);top:50%;transform:translate(-50%,-50%)}\n/*! tailwindcss v4.2.2 | 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 Alpha extends BaseComponent {
    _renderer = inject(Renderer2);
    _pointer = viewChild.required('pointer');
    _pointerBg = viewChild.required('pointerBg');
    tinyColor = input.required(...(ngDevMode ? [{ debugName: "tinyColor" }] : /* istanbul ignore next */ []));
    colorFromHue = input(...(ngDevMode ? [undefined, { debugName: "colorFromHue" }] : /* istanbul ignore next */ []));
    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: "21.2.4", ngImport: i0, type: Alpha, deps: null, target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: Alpha, isStandalone: true, selector: "ngs-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: "ngs-alpha" }, viewQueries: [{ propertyName: "_pointer", first: true, predicate: ["pointer"], descendants: true, isSignal: true }, { propertyName: "_pointerBg", first: true, predicate: ["pointerBg"], descendants: true, isSignal: true }], exportAs: ["ngsAlpha"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #pointer class=\"pointer\">\n  <div #pointerBg class=\"pointer-bg\"></div>\n</div>\n<div class=\"gradient\" [ngStyle]=\"{ 'background': gradient }\"></div>\n", styles: [":host{touch-action:none;display:block;width:var(--ngs-color-picker-alpha-width);height:var(--ngs-color-picker-alpha-height);position:relative;border-radius:var(--ngs-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(--ngs-color-picker-alpha-height);height:var(--ngs-color-picker-alpha-width)}:host .pointer{z-index:1;flex:none;position:absolute;cursor:pointer;left:0;border-radius:50%;width:var(--ngs-color-picker-alpha-pointer-size);height:var(--ngs-color-picker-alpha-pointer-size);box-shadow:var(--ngs-color-picker-alpha-pointer-shadow);border:var(--ngs-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.2.2 | 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: "21.2.4", ngImport: i0, type: Alpha, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-alpha', exportAs: 'ngsAlpha', imports: [
                        NgStyle
                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        'class': 'ngs-alpha'
                    }, template: "<div #pointer class=\"pointer\">\n  <div #pointerBg class=\"pointer-bg\"></div>\n</div>\n<div class=\"gradient\" [ngStyle]=\"{ 'background': gradient }\"></div>\n", styles: [":host{touch-action:none;display:block;width:var(--ngs-color-picker-alpha-width);height:var(--ngs-color-picker-alpha-height);position:relative;border-radius:var(--ngs-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(--ngs-color-picker-alpha-height);height:var(--ngs-color-picker-alpha-width)}:host .pointer{z-index:1;flex:none;position:absolute;cursor:pointer;left:0;border-radius:50%;width:var(--ngs-color-picker-alpha-pointer-size);height:var(--ngs-color-picker-alpha-pointer-size);box-shadow:var(--ngs-color-picker-alpha-pointer-shadow);border:var(--ngs-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.2.2 | 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 ColorPicker {
    cdr = inject(ChangeDetectorRef);
    color = input('', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    asDropdown = input(true, { ...(ngDevMode ? { debugName: "asDropdown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    showOpacity = input(true, { ...(ngDevMode ? { debugName: "showOpacity" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    resultFormat = input('rgb', ...(ngDevMode ? [{ debugName: "resultFormat" }] : /* istanbul ignore next */ []));
    colorChange = output();
    rawColorChange = output();
    tmpColor;
    hexColor;
    _color = signal(new TinyColor('red'), ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
    _colorFromHue = signal(null, ...(ngDevMode ? [{ debugName: "_colorFromHue" }] : /* istanbul ignore next */ []));
    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
    alpha = signal(1, ...(ngDevMode ? [{ debugName: "alpha" }] : /* istanbul ignore next */ []));
    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);
        const newColor = color.clone().setAlpha(this.alpha());
        this.tmpColor = newColor.clone();
        this.rawColorChange.emit(newColor);
        this.emitEvent(newColor);
        this._setHexColor(newColor);
    }
    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: "21.2.4", ngImport: i0, type: ColorPicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: ColorPicker, isStandalone: true, selector: "ngs-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: "ngs-color-picker" }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => ColorPicker),
                multi: true
            }
        ], exportAs: ["ngsColorPicker"], usesOnChanges: true, ngImport: i0, template: "<ngs-saturation [colorFromHue]=\"_colorFromHue()\"\n                [tinyColor]=\"_color()\"\n                (colorChange)=\"onSaturationColorChange($event)\"/>\n<ngs-hue [tinyColor]=\"_color()\"\n         (colorChange)=\"onHueColorChange($event)\"/>\n@if (showOpacity()) {\n  <ngs-alpha [colorFromHue]=\"_colorFromHue()\"\n             [tinyColor]=\"_color()\"\n             (alphaChange)=\"onAlphaChange($event)\"/>\n}\n<ngs-form-field subscriptHiddenIfEmpty>\n  <ngs-label>HEX</ngs-label>\n  <input #hexInput\n         type=\"text\"\n         ngsInput\n         maxlength=\"7\"\n         [(ngModel)]=\"hexColor\"\n         (ngModelChange)=\"onHexColorChange($event)\"\n         (blur)=\"onHexColorBlur()\">\n  <button ngsIconButton\n          ngsIconButtonSuffix\n          (mousedown)=\"copyToClipboard($event, hexInput)\">\n    <ngs-icon name=\"fluent:copy-24-regular\"/>\n  </button>\n</ngs-form-field>\n", styles: [":host{--ngs-color-picker-bg: var(--ngs-dropdown-bg);--ngs-color-picker-border-radius: var(--ngs-dropdown-radius);--ngs-color-picker-margin-offset: calc(var(--spacing, .25rem) * 2);--ngs-color-picker-border: var(--ngs-dropdown-border);--ngs-color-picker-padding: calc(var(--spacing, .25rem) * 3);--ngs-color-picker-gap: calc(var(--spacing, .25rem) * 2.5);--ngs-color-picker-as-dropdown-shadow: var(--ngs-dropdown-shadow);--ngs-color-picker-saturation-width: 260px;--ngs-color-picker-saturation-height: 110px;--ngs-color-picker-saturation-pointer-size: calc(var(--spacing, .25rem) * 5);--ngs-color-picker-saturation-pointer-shadow: var(--ngs-shadow-md);--ngs-color-picker-saturation-pointer-border: 2px solid white;--ngs-color-picker-hue-width: var(--ngs-color-picker-saturation-width);--ngs-color-picker-hue-height: calc(var(--spacing, .25rem) * 3);--ngs-color-picker-hue-pointer-size: calc(var(--spacing, .25rem) * 5);--ngs-color-picker-hue-pointer-shadow: var(--ngs-shadow-md);--ngs-color-picker-hue-pointer-border: 2px solid white;--ngs-color-picker-alpha-width: var(--ngs-color-picker-saturation-width);--ngs-color-picker-alpha-height: calc(var(--spacing, .25rem) * 3);--ngs-color-picker-alpha-pointer-size: calc(var(--spacing, .25rem) * 5);--ngs-color-picker-alpha-pointer-shadow: var(--ngs-shadow-md);--ngs-color-picker-alpha-pointer-border: 2px solid white;display:inline-grid;-webkit-user-select:none;user-select:none;position:relative;flex:none;gap:var(--ngs-color-picker-gap);background:var(--ngs-color-picker-bg);border-radius:var(--ngs-color-picker-border-radius);border:var(--ngs-color-picker-border);padding:var(--ngs-color-picker-padding)}:host.is-disabled{pointer-events:none}:host.as-dropdown{box-shadow:var(--ngs-color-picker-as-dropdown-shadow)}@keyframes ngs-color-picker-animation{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}:host-context(.ngs-color-picker-overlay-panel){animation:.15s ngs-color-picker-animation}:host-context(.ngs-color-picker-above){margin-bottom:var(--ngs-color-picker-margin-offset);transform-origin:bottom}:host-context(.ngs-color-picker-below){margin-top:var(--ngs-color-picker-margin-offset);transform-origin:top}:host-context(.ngs-color-picker-before){margin-inline-end:var(--ngs-color-picker-margin-offset);transform-origin:right}:host-context(.ngs-color-picker-after){margin-inline-start:var(--ngs-color-picker-margin-offset);transform-origin:left}\n/*! tailwindcss v4.2.2 | 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: Alpha, selector: "ngs-alpha", inputs: ["tinyColor", "colorFromHue"], outputs: ["alphaChange"], exportAs: ["ngsAlpha"] }, { kind: "component", type: Saturation, selector: "ngs-saturation", inputs: ["tinyColor", "colorFromHue"], outputs: ["tinyColorChange", "colorChange"], exportAs: ["ngsSaturation"] }, { kind: "component", type: Hue, selector: "ngs-hue", inputs: ["tinyColor"], outputs: ["colorChange"], exportAs: ["ngsHue"] }, { kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "component", type: Button, selector: "    button[ngsButton], button[ngsIconButton],    a[ngsButton], a[ngsIconButton]  ", inputs: ["ngsButton", "ngsIconButton", "loading", "disabled", "disabledInteractive", "disableRipple", "reverse", "fullWidth", "hideTextOnMobile"], exportAs: ["ngsButton"] }, { kind: "component", type: FormField, selector: "ngs-form-field", inputs: ["subscriptHiddenIfEmpty"], exportAs: ["ngsFormField"] }, { kind: "component", type: Label, selector: "ngs-label" }, { kind: "directive", type: Input, selector: "input[ngsInput], textarea[ngsInput]", inputs: ["id", "placeholder", "required", "disabled", "readonly", "errorStateMatcher"], exportAs: ["ngsInput"] }, { kind: "directive", type: IconButtonSuffix, selector: "[ngsIconButtonSuffix]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ColorPicker, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-color-picker', exportAs: 'ngsColorPicker', imports: [
                        FormsModule,
                        Alpha,
                        Saturation,
                        Hue,
                        Icon,
                        Button,
                        FormField,
                        Label,
                        Input,
                        IconButtonSuffix
                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => ColorPicker),
                            multi: true
                        }
                    ], host: {
                        'class': 'ngs-color-picker',
                        '[class.is-disabled]': '_disabled()',
                        '[class.as-dropdown]': 'asDropdown()',
                        '(contextmenu)': '_handleContextMenu($event)'
                    }, template: "<ngs-saturation [colorFromHue]=\"_colorFromHue()\"\n                [tinyColor]=\"_color()\"\n                (colorChange)=\"onSaturationColorChange($event)\"/>\n<ngs-hue [tinyColor]=\"_color()\"\n         (colorChange)=\"onHueColorChange($event)\"/>\n@if (showOpacity()) {\n  <ngs-alpha [colorFromHue]=\"_colorFromHue()\"\n             [tinyColor]=\"_color()\"\n             (alphaChange)=\"onAlphaChange($event)\"/>\n}\n<ngs-form-field subscriptHiddenIfEmpty>\n  <ngs-label>HEX</ngs-label>\n  <input #hexInput\n         type=\"text\"\n         ngsInput\n         maxlength=\"7\"\n         [(ngModel)]=\"hexColor\"\n         (ngModelChange)=\"onHexColorChange($event)\"\n         (blur)=\"onHexColorBlur()\">\n  <button ngsIconButton\n          ngsIconButtonSuffix\n          (mousedown)=\"copyToClipboard($event, hexInput)\">\n    <ngs-icon name=\"fluent:copy-24-regular\"/>\n  </button>\n</ngs-form-field>\n", styles: [":host{--ngs-color-picker-bg: var(--ngs-dropdown-bg);--ngs-color-picker-border-radius: var(--ngs-dropdown-radius);--ngs-color-picker-margin-offset: calc(var(--spacing, .25rem) * 2);--ngs-color-picker-border: var(--ngs-dropdown-border);--ngs-color-picker-padding: calc(var(--spacing, .25rem) * 3);--ngs-color-picker-gap: calc(var(--spacing, .25rem) * 2.5);--ngs-color-picker-as-dropdown-shadow: var(--ngs-dropdown-shadow);--ngs-color-picker-saturation-width: 260px;--ngs-color-picker-saturation-height: 110px;--ngs-color-picker-saturation-pointer-size: calc(var(--spacing, .25rem) * 5);--ngs-color-picker-saturation-pointer-shadow: var(--ngs-shadow-md);--ngs-color-picker-saturation-pointer-border: 2px solid white;--ngs-color-picker-hue-width: var(--ngs-color-picker-saturation-width);--ngs-color-picker-hue-height: calc(var(--spacing, .25rem) * 3);--ngs-color-picker-hue-pointer-size: calc(var(--spacing, .25rem) * 5);--ngs-color-picker-hue-pointer-shadow: var(--ngs-shadow-md);--ngs-color-picker-hue-pointer-border: 2px solid white;--ngs-color-picker-alpha-width: var(--ngs-color-picker-saturation-width);--ngs-color-picker-alpha-height: calc(var(--spacing, .25rem) * 3);--ngs-color-picker-alpha-pointer-size: calc(var(--spacing, .25rem) * 5);--ngs-color-picker-alpha-pointer-shadow: var(--ngs-shadow-md);--ngs-color-picker-alpha-pointer-border: 2px solid white;display:inline-grid;-webkit-user-select:none;user-select:none;position:relative;flex:none;gap:var(--ngs-color-picker-gap);background:var(--ngs-color-picker-bg);border-radius:var(--ngs-color-picker-border-radius);border:var(--ngs-color-picker-border);padding:var(--ngs-color-picker-padding)}:host.is-disabled{pointer-events:none}:host.as-dropdown{box-shadow:var(--ngs-color-picker-as-dropdown-shadow)}@keyframes ngs-color-picker-animation{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}:host-context(.ngs-color-picker-overlay-panel){animation:.15s ngs-color-picker-animation}:host-context(.ngs-color-picker-above){margin-bottom:var(--ngs-color-picker-margin-offset);transform-origin:bottom}:host-context(.ngs-color-picker-below){margin-top:var(--ngs-color-picker-margin-offset);transform-origin:top}:host-context(.ngs-color-picker-before){margin-inline-end:var(--ngs-color-picker-margin-offset);transform-origin:right}:host-context(.ngs-color-picker-after){margin-inline-start:var(--ngs-color-picker-margin-offset);transform-origin:left}\n/*! tailwindcss v4.2.2 | 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 ColorPickerThumbnail {
    _elementRef = inject(ElementRef);
    color = input('', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
    ngOnChanges(changes) {
        if (!this.color()) {
            return;
        }
        this._elementRef.nativeElement.style.setProperty('--ngs-color-picker-thumbnail-bg', this.color());
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ColorPickerThumbnail, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: ColorPickerThumbnail, isStandalone: true, selector: "ngs-color-picker-thumbnail,[ngs-color-picker-thumbnail]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ngs-color-picker-thumbnail" }, exportAs: ["ngsColorPickerThumbnail"], usesOnChanges: true, ngImport: i0, template: "", styles: [":host{--ngs-color-picker-thumbnail-bg: transparent;--ngs-color-picker-thumbnail-size: calc(var(--spacing, .25rem) * 8);--ngs-color-picker-thumbnail-border-radius: calc(infinity * 1px);display:inline-block;position:relative;border-radius:var(--ngs-color-picker-thumbnail-border-radius);width:var(--ngs-color-picker-thumbnail-size);height:var(--ngs-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(--ngs-color-picker-thumbnail-bg)}:host:active{transition:var(--ngs-transition-transform);transform:scale(.97)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ColorPickerThumbnail, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-color-picker-thumbnail,[ngs-color-picker-thumbnail]', exportAs: 'ngsColorPickerThumbnail', host: {
                        'class': 'ngs-color-picker-thumbnail'
                    }, template: "", styles: [":host{--ngs-color-picker-thumbnail-bg: transparent;--ngs-color-picker-thumbnail-size: calc(var(--spacing, .25rem) * 8);--ngs-color-picker-thumbnail-border-radius: calc(infinity * 1px);display:inline-block;position:relative;border-radius:var(--ngs-color-picker-thumbnail-border-radius);width:var(--ngs-color-picker-thumbnail-size);height:var(--ngs-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(--ngs-color-picker-thumbnail-bg)}:host:active{transition:var(--ngs-transition-transform);transform:scale(.97)}\n/*! tailwindcss v4.2.2 | 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: ['ngs-color-picker-below', 'ngs-color-picker-below-start']
        },
        'below-center': {
            originY: 'bottom',
            overlayY: 'top',
            originX: 'center',
            overlayX: 'center',
            panelClass: ['ngs-color-picker-below', 'ngs-color-picker-below-center']
        },
        'below-end': {
            originY: 'bottom',
            overlayY: 'top',
            originX: 'end',
            overlayX: 'end',
            panelClass: ['ngs-color-picker-below', 'ngs-color-picker-below-end']
        },
        'above-start': {
            originY: 'top',
            overlayY: 'bottom',
            originX: 'start',
            overlayX: 'start',
            panelClass: ['ngs-color-picker-above', 'ngs-color-picker-above-start']
        },
        'above-center': {
            originY: 'top',
            overlayY: 'bottom',
            originX: 'center',
            overlayX: 'center',
            panelClass: ['ngs-color-picker-above', 'ngs-color-picker-above-center']
        },
        'above-end': {
            originY: 'top',
            overlayY: 'bottom',
            originX: 'end',
            overlayX: 'end',
            panelClass: ['ngs-color-picker-above', 'ngs-color-picker-above-end']
        },
        'before-start': {
            originY: 'top',
            overlayY: 'top',
            originX: 'start',
            overlayX: 'end',
            panelClass: ['ngs-color-picker-before', 'ngs-color-picker-before-start']
        },
        'before-center': {
            originY: 'center',
            overlayY: 'center',
            originX: 'start',
            overlayX: 'end',
            panelClass: ['ngs-color-picker-before', 'ngs-color-picker-before-center']
        },
        'before-end': {
            originY: 'bottom',
            overlayY: 'bottom',
            originX: 'start',
            overlayX: 'end',
            panelClass: ['ngs-color-picker-before', 'ngs-color-picker-before-end']
        },
        'after-end': {
            originY: 'bottom',
            overlayY: 'bottom',
            originX: 'end',
            overlayX: 'start',
            panelClass: ['ngs-color-picker-after', 'ngs-color-picker-after-end']
        },
        'after-center': {
            originY: 'center',
            overlayY: 'center',
            originX: 'end',
            overlayX: 'start',
            panelClass: ['ngs-color-picker-after', 'ngs-color-picker-after-center']
        },
        'after-start': {
            originY: 'top',
            overlayY: 'top',
            originX: 'end',
            overlayX: 'start',
            panelClass: ['ngs-color-picker-after', 'ngs-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" } : /* istanbul ignore next */ {}), alias: 'ngsColorPickerTriggerFor' });
    position = input('below-center', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
    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: 'ngs-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: "21.2.4", ngImport: i0, type: ColorPickerTriggerForDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.4", type: ColorPickerTriggerForDirective, isStandalone: true, selector: "[ngsColorPickerTriggerFor]", inputs: { colorPickerTemplateRef: { classPropertyName: "colorPickerTemplateRef", publicName: "ngsColorPickerTriggerFor", 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: "ngs-color-picker-trigger-for" }, exportAs: ["ngsColorPickerTriggerFor"], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ColorPickerTriggerForDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ngsColorPickerTriggerFor]',
                    exportAs: 'ngsColorPickerTriggerFor',
                    host: {
                        'class': 'ngs-color-picker-trigger-for',
                        '(click)': '_handleClick($event)'
                    }
                }]
        }], ctorParameters: () => [], propDecorators: { colorPickerTemplateRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngsColorPickerTriggerFor", 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 { ColorPicker, ColorPickerThumbnail, ColorPickerTriggerForDirective };
//# sourceMappingURL=ngstarter-ui-components-color-picker.mjs.map
