@ngstarter-ui/components 1.0.21

package/fesm2022/ngstarter-ui-components-color-picker.mjs

@@ -0,0 +1,713 @@
+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(--dropdown-bg);--ngs-color-picker-border-radius: var(--dropdown-radius);--ngs-color-picker-margin-offset: calc(var(--spacing, .25rem) * 2);--ngs-color-picker-border: var(--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(--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: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--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: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--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: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--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(--dropdown-bg);--ngs-color-picker-border-radius: var(--dropdown-radius);--ngs-color-picker-margin-offset: calc(var(--spacing, .25rem) * 2);--ngs-color-picker-border: var(--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(--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: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--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: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--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: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--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