@nanahoshi/mona-ui 0.1.0

package/fesm2022/nanahoshi-mona-ui-color-gradient.mjs

@@ -0,0 +1,853 @@
+import { Clipboard } from '@angular/cdk/clipboard';
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, DestroyRef, Injector, signal, NgZone, computed, viewChild, output, input, model, afterNextRender, effect, untracked, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { LucideCopy } from '@lucide/angular';
+import { ButtonDirective } from '@nanahoshi/mona-ui/button';
+import { rgba2hex, hsva2rgba, isValidHex, hex2rgba, rgba2hsva, rgba2hsla, isValidHsla, isValidRgb, string2rgba, string2Hsla, hsla2hsva } from '@nanahoshi/mona-ui/internal';
+import { DropdownButtonComponent, DropdownButtonItemComponent } from '@nanahoshi/mona-ui/dropdown-button';
+import { NumericTextBoxComponent, NumericTextBoxPrefixTemplateDirective } from '@nanahoshi/mona-ui/numeric-text-box';
+import { SliderComponent } from '@nanahoshi/mona-ui/slider';
+import { TextBoxComponent, TextBoxPrefixTemplateDirective, TextBoxSuffixTemplateDirective } from '@nanahoshi/mona-ui/text-box';
+import { ThemeService } from '@nanahoshi/mona-ui/theme';
+import { Subject, fromEvent, switchMap, takeUntil, distinctUntilChanged } from 'rxjs';
+import { cva } from 'class-variance-authority';
+
+const colorGradientBaseVariants = cva(`
+        flex flex-col min-w-64
+        p-2 gap-2
+        select-none
+
+        data-[disabled='true']:cursor-not-allowed
+        data-[disabled='true']:opacity-50
+        data-[disabled='true']:pointer-events-none
+
+        data-[invalid='true']:border
+        data-[invalid='true']:border-error
+        data-[invalid='true']:ring-1
+        data-[invalid='true']:ring-error
+    `);
+const colorGradientHsvRectangleVariants = cva(`
+        relative w-full h-40
+        bg-[linear-gradient(to_bottom,rgba(0,0,0,0),black),linear-gradient(to_right,white,rgba(255,255,255,0))]
+        border border-border
+    `, {
+    variants: {
+        rounded: {
+            none: "rounded-none",
+            small: "rounded-sm",
+            medium: "rounded-md",
+            large: "rounded-lg",
+            full: "rounded-lg" // Full is not suitable for color gradient rectangle.
+        }
+    }
+});
+const colorGradientHsvRectangleHandleVariants = cva(`
+        absolute
+        w-3 h-3
+        cursor-pointer
+        border border-foreground
+        outline outline-background
+        shadow-md
+
+        focus-visible:ring-2
+        focus-visible:ring-primary/40
+        focus-visible:ring-offset-2
+    `, {
+    variants: {
+        rounded: {
+            none: "rounded-none",
+            small: "rounded-sm",
+            medium: "rounded-md",
+            large: "rounded-lg",
+            full: "rounded-full"
+        }
+    }
+});
+const colorGradientPreviewVariants = cva(`
+        w-10 h-10 flex
+        border border-border
+    `, {
+    variants: {
+        rounded: {
+            none: "rounded-none",
+            small: "rounded-sm",
+            medium: "rounded-md",
+            large: "rounded-lg",
+            full: "rounded-full"
+        }
+    }
+});
+const colorGradientSliderHandleVariants = cva(`
+        border-3 border-white/90
+        outline outline-solid outline-black/90
+        bg-transparent
+        w-3 h-3
+    `);
+
+const colorGradientBaseThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return colorGradientBaseVariants;
+        default:
+            return colorGradientBaseVariants;
+    }
+};
+const colorGradientHsvRectangleThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return colorGradientHsvRectangleVariants;
+        default:
+            return colorGradientHsvRectangleVariants;
+    }
+};
+const colorGradientHsvRectangleHandleThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return colorGradientHsvRectangleHandleVariants;
+        default:
+            return colorGradientHsvRectangleHandleVariants;
+    }
+};
+const colorGradientPreviewThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return colorGradientPreviewVariants;
+        default:
+            return colorGradientPreviewVariants;
+    }
+};
+const colorGradientSliderHandleThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return colorGradientSliderHandleVariants;
+        default:
+            return colorGradientSliderHandleVariants;
+    }
+};
+
+class ColorGradientComponent {
+    #clipboard;
+    #destroyRef;
+    #injector;
+    #themeService;
+    #valueChange$;
+    #viewReady;
+    #zone;
+    #internalValueUpdatePending;
+    #lastInternalValue;
+    constructor() {
+        this.#clipboard = inject(Clipboard);
+        this.#destroyRef = inject(DestroyRef);
+        this.#injector = inject(Injector);
+        this.#themeService = inject(ThemeService);
+        this.#valueChange$ = new Subject();
+        this.#viewReady = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#viewReady" }] : /* istanbul ignore next */ []));
+        this.#zone = inject(NgZone);
+        this.#internalValueUpdatePending = false;
+        this.#lastInternalValue = undefined;
+        this.alpha = signal(255, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "alpha" }] : /* istanbul ignore next */ []));
+        this.alphaInputColor = computed(() => {
+            const rgb = this.rgb();
+            return rgba2hex(rgb.r, rgb.g, rgb.b, 255);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "alphaInputColor" }] : /* istanbul ignore next */ []));
+        this.alphaSliderBackground = computed(() => {
+            const color = this.alphaInputColor();
+            return `linear-gradient(to right, transparent, ${color})`;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "alphaSliderBackground" }] : /* istanbul ignore next */ []));
+        this.baseClasses = computed(() => {
+            const theme = this.#themeService.theme();
+            return colorGradientBaseThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClasses" }] : /* istanbul ignore next */ []));
+        this.colorInputs = computed(() => {
+            const mode = this.colorMode();
+            const baseInputs = mode === "rgb" ? this.createRgbInputList() : this.createHsvInputList();
+            if (this.opacity()) {
+                baseInputs.push({
+                    key: "a",
+                    label: "A",
+                    value: this.alpha(),
+                    min: 0,
+                    max: 255,
+                    change: (value) => this.onAlphaChange(value)
+                });
+            }
+            return baseInputs;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "colorInputs" }] : /* istanbul ignore next */ []));
+        this.colorMode = signal("rgb", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "colorMode" }] : /* istanbul ignore next */ []));
+        this.colorPreviewClasses = computed(() => {
+            const theme = this.#themeService.theme();
+            const rounded = this.rounded();
+            return colorGradientPreviewThemeVariants(theme)({ rounded });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "colorPreviewClasses" }] : /* istanbul ignore next */ []));
+        this.colorPreviews = computed(() => [
+            {
+                type: "current",
+                color: this.selectedColor(),
+                title: "Current color"
+            },
+            {
+                type: "last",
+                color: this.lastSelectedColor(),
+                title: "Previous color",
+                onClick: () => this.onResetColorClick()
+            }
+        ], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "colorPreviews" }] : /* istanbul ignore next */ []));
+        this.hex = computed(() => {
+            const rgb = this.rgb();
+            const alpha = this.alpha();
+            const focused = this.hexFocused();
+            if (!focused) {
+                return rgba2hex(rgb.r, rgb.g, rgb.b, alpha);
+            }
+            return this.hexInputValue();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hex" }] : /* istanbul ignore next */ []));
+        this.hexFocused = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hexFocused" }] : /* istanbul ignore next */ []));
+        this.hsvHandle = viewChild.required("hsvPointer", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hsvHandle" }] : /* istanbul ignore next */ []));
+        this.hsvHandleLeft = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hsvHandleLeft" }] : /* istanbul ignore next */ []));
+        this.hsvHandleTop = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hsvHandleTop" }] : /* istanbul ignore next */ []));
+        this.hexInputValue = signal("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hexInputValue" }] : /* istanbul ignore next */ []));
+        this.hsv = signal({ h: 360, s: 100, v: 100 }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hsv" }] : /* istanbul ignore next */ []));
+        this.hsvRectangle = viewChild.required("hsvRectangle", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hsvRectangle" }] : /* istanbul ignore next */ []));
+        this.hsvRectangleBackground = computed(() => {
+            const hsv = this.hsv();
+            const rgb = hsva2rgba(hsv.h, 100, 100, 255);
+            return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hsvRectangleBackground" }] : /* istanbul ignore next */ []));
+        this.hsvRectangleClasses = computed(() => {
+            const theme = this.#themeService.theme();
+            const rounded = this.rounded() === "full" ? "large" : this.rounded();
+            return colorGradientHsvRectangleThemeVariants(theme)({ rounded });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hsvRectangleClasses" }] : /* istanbul ignore next */ []));
+        this.hsvRectangleHandleClasses = computed(() => {
+            const theme = this.#themeService.theme();
+            const rounded = this.rounded();
+            return colorGradientHsvRectangleHandleThemeVariants(theme)({ rounded });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hsvRectangleHandleClasses" }] : /* istanbul ignore next */ []));
+        this.hueValue$ = new Subject();
+        this.invalidState = computed(() => this.invalid() || (this.required() && this.touched() && !this.value()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
+        this.lastSelectedColor = signal("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "lastSelectedColor" }] : /* istanbul ignore next */ []));
+        this.rgb = signal({ r: 255, g: 255, b: 255 }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rgb" }] : /* istanbul ignore next */ []));
+        this.selectedColor = computed(() => {
+            const rgb = this.rgb();
+            if (rgb.r == null || rgb.g == null || rgb.b == null) {
+                return "";
+            }
+            return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${this.alpha() / 255})`;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedColor" }] : /* istanbul ignore next */ []));
+        this.sliderHandleClasses = computed(() => {
+            const theme = this.#themeService.theme();
+            return colorGradientSliderHandleThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sliderHandleClasses" }] : /* istanbul ignore next */ []));
+        this.sliderHeight = 10;
+        /**
+         * @description Emits when the Apply button is clicked.
+         * The `Apply` button is only displayed when `showButtons` is set to true.
+         */
+        this.apply = output();
+        /**
+         * @description Emits when the Cancel button is clicked.
+         * The `Cancel` button is only displayed when `showButtons` is set to true.
+         */
+        this.cancel = output();
+        /**
+         * @description Sets the disabled state of the color gradient.
+         * @default false
+         */
+        this.disabled = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Specifies the format of the color output.
+         * @default "hex"
+         */
+        this.format = input("hex", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Marks the color gradient as invalid. When bound to a signal form field via `[field]`,
+         * this is written by the signal forms `Field` directive.
+         * @default false
+         */
+        this.invalid = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Specifies whether the color picker should display the alpha slider.
+         * @default true
+         */
+        this.opacity = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "opacity" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Marks the color gradient as required for form validation.
+         * @default false
+         */
+        this.required = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Specifies the rounded variant of the color picker.
+         * @default "medium"
+         */
+        this.rounded = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Specifies whether the color picker should display the buttons.
+         * When set to true, the color picker will display the "Apply" and "Cancel" buttons.
+         * When set to false, the color picker will not display the buttons and will emit the color value on change.
+         * @default true
+         */
+        this.showButtons = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showButtons" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Specifies whether the color picker should display the hex input.
+         * @default true
+         */
+        this.showHexInput = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showHexInput" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Specifies whether the color picker should display the channel inputs (RGB or HSV).
+         * @default true
+         */
+        this.showColorInputs = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showColorInputs" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Emitted when the color gradient is interacted with on blur or value adjustment.
+         * The `FormField` directive listens to this to mark the field as touched.
+         */
+        this.touch = output();
+        /**
+         * @description Marks the color gradient as touched. When bound to a signal form field via `[field]`,
+         * this is written by the signal forms `Field` directive.
+         * @default false
+         */
+        this.touched = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Two-way bindable current color value.
+         * When undefined, the component keeps its default internal color state (white, #ffffffff).
+         * @default undefined
+         */
+        this.value = model(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        afterNextRender({
+            read: () => {
+                this.lastSelectedColor.set(this.hex());
+                this.setSubscriptions();
+                this.#viewReady.set(true);
+            }
+        });
+        effect(() => {
+            if (!this.#viewReady()) {
+                return;
+            }
+            const value = this.value();
+            untracked(() => this.syncValue(value));
+        });
+    }
+    onAlphaChange(value) {
+        if (value == null) {
+            return;
+        }
+        const alpha = this.getValidChannelValue(value, "a");
+        this.alpha.set(alpha);
+        this.updateHexInputValue();
+        if (!this.showButtons()) {
+            this.emitValue();
+        }
+    }
+    onApply() {
+        this.lastSelectedColor.set(this.hex());
+        this.emitValue();
+        this.apply.emit();
+    }
+    onCancel() {
+        this.hexInputValue.set(this.lastSelectedColor());
+        this.cancel.emit();
+    }
+    onClearClick() {
+        this.clear();
+        if (!this.showButtons()) {
+            this.emitValue(null);
+        }
+    }
+    onCopyColorSelect(mode) {
+        if (mode === "hex") {
+            this.#clipboard.copy(this.hex());
+        }
+        else if (mode === "rgb") {
+            const rgb = this.rgb();
+            const alpha = Math.round((this.alpha() / 255) * 100) / 100;
+            this.#clipboard.copy(`rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha})`);
+        }
+    }
+    onHexChange(value) {
+        this.hexInputValue.set(value);
+        if (!isValidHex(value)) {
+            return;
+        }
+        const rgb = hex2rgba(value);
+        const hsv = rgba2hsva(rgb.r, rgb.g, rgb.b, rgb.a);
+        this.hsv.update(c => ({ ...c, h: hsv.h, s: hsv.s, v: hsv.v }));
+        this.rgb.update(c => ({ ...c, r: rgb.r, g: rgb.g, b: rgb.b }));
+        this.alpha.set(rgb.a ?? 255);
+        this.hsvHandleLeft.set(this.getPositionFromSaturation(hsv.s));
+        this.hsvHandleTop.set(this.getPositionFromValue(hsv.v));
+        if (!this.showButtons()) {
+            this.emitValue();
+        }
+    }
+    onHexInputBlur() {
+        this.hexFocused.set(false);
+        this.updateHexInputValue();
+        this.touch.emit();
+    }
+    onHexInputFocus() {
+        this.hexFocused.set(true);
+    }
+    onHsvChange(value, channel) {
+        if (value == null) {
+            return;
+        }
+        value = this.getValidChannelValue(value, channel);
+        this.hsv.update(c => ({ ...c, [channel]: value }));
+        this.updateOtherNullChannels(channel);
+        const hsv = this.hsv();
+        const rgb = hsva2rgba(hsv.h, hsv.s, hsv.v, this.alpha());
+        this.rgb.update(c => ({ ...c, r: rgb.r, g: rgb.g, b: rgb.b }));
+        this.updateHexInputValue();
+        this.hsvHandleLeft.set(this.getPositionFromSaturation(hsv.s));
+        this.hsvHandleTop.set(this.getPositionFromValue(hsv.v));
+        if (!this.showButtons()) {
+            this.emitValue();
+        }
+    }
+    onHsvHandleBlur() {
+        this.touch.emit();
+    }
+    onHsvHandleKeyDown(event) {
+        if (this.disabled()) {
+            return;
+        }
+        const step = event.shiftKey ? 10 : 1;
+        const largeStep = 25;
+        let handled = false;
+        const currentHsv = this.hsv();
+        const currentSaturation = currentHsv.s ?? 0;
+        const currentValue = currentHsv.v ?? 0;
+        let newSaturation = currentSaturation;
+        let newValue = currentValue;
+        switch (event.key) {
+            case "ArrowLeft":
+                newSaturation = this.getValidChannelValue(currentSaturation - step, "s");
+                handled = true;
+                break;
+            case "ArrowRight":
+                newSaturation = this.getValidChannelValue(currentSaturation + step, "s");
+                handled = true;
+                break;
+            case "ArrowUp":
+                newValue = this.getValidChannelValue(currentValue + step, "v");
+                handled = true;
+                break;
+            case "ArrowDown":
+                newValue = this.getValidChannelValue(currentValue - step, "v");
+                handled = true;
+                break;
+            case "Home":
+                newSaturation = 0;
+                newValue = 100;
+                handled = true;
+                break;
+            case "End":
+                newSaturation = 100;
+                newValue = 0;
+                handled = true;
+                break;
+            case "PageUp":
+                newValue = this.getValidChannelValue(currentValue + largeStep, "v");
+                handled = true;
+                break;
+            case "PageDown":
+                newValue = this.getValidChannelValue(currentValue - largeStep, "v");
+                handled = true;
+                break;
+        }
+        if (handled) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.updateHsvValues(newSaturation, newValue);
+            this.hsvHandleLeft.set(this.getPositionFromSaturation(newSaturation));
+            this.hsvHandleTop.set(this.getPositionFromValue(newValue));
+            this.updateHexInputValue();
+        }
+    }
+    onNumericInputBlur() {
+        this.touch.emit();
+    }
+    onPreviousColorKeyDown(event, handler) {
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            handler?.();
+        }
+    }
+    onResetColorClick() {
+        this.onHexChange(this.lastSelectedColor());
+    }
+    onRgbChange(value, channel) {
+        if (value == null) {
+            return;
+        }
+        value = this.getValidChannelValue(value, channel);
+        this.rgb.update(c => ({ ...c, [channel]: value }));
+        this.updateOtherNullChannels(channel);
+        const rgb = this.rgb();
+        const hsv = rgba2hsva(rgb.r, rgb.g, rgb.b, this.alpha());
+        this.hsv.update(c => ({ ...c, h: hsv.h, s: hsv.s, v: hsv.v }));
+        this.updateHexInputValue();
+        this.hsvHandleLeft.set(this.getPositionFromSaturation(hsv.s));
+        this.hsvHandleTop.set(this.getPositionFromValue(hsv.v));
+        if (!this.showButtons()) {
+            this.emitValue();
+        }
+    }
+    onSliderBlur() {
+        this.touch.emit();
+    }
+    onSwitchColorModeClick() {
+        this.colorMode.set(this.colorMode() === "rgb" ? "hsv" : "rgb");
+    }
+    afterNextRender(callback) {
+        afterNextRender(callback, { injector: this.#injector });
+    }
+    clear() {
+        this.hexInputValue.set("");
+        this.lastSelectedColor.set("");
+        this.rgb.update(c => ({ ...c, r: null, g: null, b: null }));
+        this.alpha.set(255);
+        this.hsv.update(c => ({ ...c, h: null, s: null, v: null }));
+    }
+    createHsvInputList() {
+        const hue = {
+            key: "h",
+            label: "H",
+            value: this.hsv().h,
+            min: 0,
+            max: 360,
+            change: (value) => this.onHsvChange(value, "h")
+        };
+        const saturation = {
+            key: "s",
+            label: "S",
+            value: this.hsv().s,
+            min: 0,
+            max: 100,
+            change: (value) => this.onHsvChange(value, "s")
+        };
+        const value = {
+            key: "v",
+            label: "V",
+            value: this.hsv().v,
+            min: 0,
+            max: 100,
+            change: (value) => this.onHsvChange(value, "v")
+        };
+        return [hue, saturation, value];
+    }
+    createRgbInputList() {
+        const red = {
+            key: "r",
+            label: "R",
+            value: this.rgb().r,
+            min: 0,
+            max: 255,
+            change: (value) => this.onRgbChange(value, "r")
+        };
+        const green = {
+            key: "g",
+            label: "G",
+            value: this.rgb().g,
+            min: 0,
+            max: 255,
+            change: (value) => this.onRgbChange(value, "g")
+        };
+        const blue = {
+            key: "b",
+            label: "B",
+            value: this.rgb().b,
+            min: 0,
+            max: 255,
+            change: (value) => this.onRgbChange(value, "b")
+        };
+        return [red, green, blue];
+    }
+    emitValue(value) {
+        if (value !== undefined) {
+            this.#valueChange$.next(value);
+            return;
+        }
+        const format = this.format();
+        const rgb = this.rgb();
+        const alpha = this.alpha();
+        if (rgb.r == null || rgb.g == null || rgb.b == null || alpha == null) {
+            this.#valueChange$.next(null);
+            return;
+        }
+        if (format === "hex") {
+            this.#valueChange$.next(rgba2hex(rgb.r, rgb.g, rgb.b, alpha));
+        }
+        else if (format === "rgb") {
+            this.#valueChange$.next(`rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha / 255})`);
+        }
+        else if (format === "hsl") {
+            const hsl = rgba2hsla(rgb.r, rgb.g, rgb.b, alpha);
+            this.#valueChange$.next(`hsla(${hsl.h}, ${hsl.s}%, ${hsl.l}%, ${alpha / 255})`);
+        }
+    }
+    getPositionFromSaturation(saturation) {
+        if (saturation == null) {
+            return 0;
+        }
+        const maxVal = this.hsvRectangle().nativeElement.offsetWidth;
+        const minVal = (saturation / 100) * maxVal;
+        return minVal - this.hsvHandle().nativeElement.offsetWidth / 2;
+    }
+    getPositionFromValue(value) {
+        if (value == null) {
+            return 0;
+        }
+        const maxVal = this.hsvRectangle().nativeElement.offsetHeight;
+        const minVal = ((100 - value) / 100) * maxVal;
+        return minVal - this.hsvHandle().nativeElement.offsetHeight / 2;
+    }
+    getSaturationFromPosition(left) {
+        const minVal = left + this.hsvHandle().nativeElement.offsetWidth / 2;
+        const maxVal = this.hsvRectangle().nativeElement.offsetWidth;
+        return this.getValidChannelValue(Math.ceil((minVal / maxVal) * 100), "s");
+    }
+    getValidChannelValue(value, channel) {
+        if (channel === "r" || channel === "g" || channel === "b" || channel === "a") {
+            return Math.min(255, Math.max(0, value));
+        }
+        if (channel === "h") {
+            return Math.min(360, Math.max(0, value));
+        }
+        if (channel === "s" || channel === "v") {
+            return Math.min(100, Math.max(0, value));
+        }
+        return value;
+    }
+    getValueFromPosition(top) {
+        const minVal = top + this.hsvHandle().nativeElement.offsetHeight / 2;
+        const maxVal = this.hsvRectangle().nativeElement.offsetHeight;
+        return this.getValidChannelValue(Math.round(100 - (minVal / maxVal) * 100), "v");
+    }
+    loadColorFromString(color) {
+        if (color == null || !this.hsvRectangle() || !this.hsvHandle()) {
+            return;
+        }
+        const hexValid = isValidHex(color);
+        const hsvValid = isValidHsla(color);
+        const rgbValid = isValidRgb(color);
+        let rgba;
+        let hsla;
+        let hsva;
+        if (hexValid) {
+            rgba = hex2rgba(color);
+        }
+        else if (rgbValid) {
+            rgba = string2rgba(color);
+        }
+        else if (hsvValid) {
+            hsla = string2Hsla(color);
+            hsva = hsla2hsva(hsla.h, hsla.s, hsla.l, hsla.a);
+            rgba = hsva2rgba(hsva.h, hsva.s, hsva.v, hsva.a);
+            hsva = {
+                h: Math.round(hsva.h),
+                s: Math.round(hsva.s),
+                v: Math.round(hsva.v),
+                a: hsva.a
+            };
+        }
+        else {
+            rgba = { r: null, g: null, b: null, a: null };
+        }
+        if (!hsva) {
+            hsva = rgba2hsva(rgba.r, rgba.g, rgba.b, rgba.a);
+        }
+        this.updateHsv(hsva);
+        this.updateRgb(rgba);
+        this.alpha.set(rgba.a ?? 255);
+        this.updateHexInputValue();
+        this.afterNextRender(() => {
+            this.hsvHandleLeft.set(this.getPositionFromSaturation(hsva.s));
+            this.hsvHandleTop.set(this.getPositionFromValue(hsva.v));
+        });
+    }
+    setHsvRectPointerEvents() {
+        const pointerDown$ = fromEvent(this.hsvHandle().nativeElement, "pointerdown").pipe(takeUntilDestroyed(this.#destroyRef));
+        const pointerMove$ = fromEvent(document, "pointermove").pipe(takeUntilDestroyed(this.#destroyRef));
+        const pointerUp$ = fromEvent(document, "pointerup").pipe(takeUntilDestroyed(this.#destroyRef));
+        pointerDown$
+            .pipe(switchMap(() => pointerMove$.pipe(takeUntil(pointerUp$))))
+            .subscribe((event) => {
+            this.#zone.run(() => {
+                const position = this.updateHsvRectPointerPosition(event);
+                this.updateHsvValues(this.getSaturationFromPosition(position.left), this.getValueFromPosition(position.top));
+                this.updateHexInputValue();
+            });
+        });
+        fromEvent(this.hsvRectangle().nativeElement, "click")
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe((event) => {
+            const position = this.updateHsvRectPointerPosition(event);
+            this.updateHsvValues(this.getSaturationFromPosition(position.left), this.getValueFromPosition(position.top));
+            this.updateHexInputValue();
+        });
+    }
+    setSubscriptions() {
+        this.hueValue$.pipe(distinctUntilChanged(), takeUntilDestroyed(this.#destroyRef)).subscribe((value) => {
+            this.hsv.update(c => ({ ...c, h: Math.round(value) }));
+            this.updateRgbFromHsv();
+            this.updateHexInputValue();
+        });
+        this.setHsvRectPointerEvents();
+        this.#valueChange$
+            .pipe(takeUntilDestroyed(this.#destroyRef), distinctUntilChanged())
+            .subscribe((value) => {
+            this.#internalValueUpdatePending = true;
+            this.#lastInternalValue = value;
+            this.value.set(value);
+        });
+    }
+    syncValue(value) {
+        if (value === undefined) {
+            return;
+        }
+        if (this.#internalValueUpdatePending && value === this.#lastInternalValue) {
+            this.#internalValueUpdatePending = false;
+            this.#lastInternalValue = undefined;
+            return;
+        }
+        this.#internalValueUpdatePending = false;
+        this.#lastInternalValue = undefined;
+        if (value === null) {
+            this.clear();
+            return;
+        }
+        this.loadColorFromString(value);
+        this.lastSelectedColor.set(this.hex());
+    }
+    updateHexInputValue() {
+        const rgb = this.rgb();
+        const hex = rgba2hex(rgb.r, rgb.g, rgb.b, this.alpha());
+        this.hexInputValue.set(hex);
+    }
+    updateHsv(hsv) {
+        this.hsv.update(c => ({ ...c, h: hsv.h, s: hsv.s, v: hsv.v }));
+    }
+    updateHsvRectPointerPosition(event) {
+        const containerRect = this.hsvRectangle().nativeElement.getBoundingClientRect();
+        const pointerRect = this.hsvHandle().nativeElement.getBoundingClientRect();
+        const left = event.clientX - containerRect.left - pointerRect.width / 2;
+        const top = event.clientY - containerRect.top - pointerRect.height / 2;
+        const newLeft = Math.min(Math.max(left, -pointerRect.width / 2), containerRect.width - pointerRect.width / 2);
+        const newTop = Math.min(Math.max(top, -pointerRect.height / 2), containerRect.height - pointerRect.height / 2);
+        this.hsvHandleLeft.set(newLeft);
+        this.hsvHandleTop.set(newTop);
+        return { left: newLeft, top: newTop };
+    }
+    updateHsvValues(saturation, value) {
+        this.hsv.update(c => ({
+            ...c,
+            h: c.h ?? 0,
+            s: this.getValidChannelValue(saturation, "s"),
+            v: this.getValidChannelValue(value, "v")
+        }));
+        this.updateRgbFromHsv();
+    }
+    updateOtherNullChannels(channel) {
+        if (channel === "r" || channel === "g" || channel === "b") {
+            this.rgb.update(c => ({ ...c, r: c.r ?? 0, g: c.g ?? 0, b: c.b ?? 0 }));
+        }
+        else if (channel === "h" || channel === "s" || channel === "v") {
+            this.hsv.update(c => ({ ...c, h: c.h ?? 0, s: c.s ?? 0, v: c.v ?? 0 }));
+        }
+        else if (channel === "a") {
+            this.alpha.set(this.alpha() ?? 255);
+        }
+    }
+    updateRgb(rgba) {
+        this.rgb.update(c => ({ ...c, r: rgba.r, g: rgba.g, b: rgba.b }));
+    }
+    updateRgbFromHsv() {
+        const hsv = this.hsv();
+        const hue = hsv.h ?? 0;
+        const saturation = hsv.s ?? 0;
+        const value = hsv.v ?? 0;
+        const rgb = hsva2rgba(hue, saturation, value, this.alpha());
+        if (this.rgb().r === rgb.r && this.rgb().g === rgb.g && this.rgb().b === rgb.b) {
+            return;
+        }
+        this.rgb.update(c => ({ ...c, r: rgb.r, g: rgb.g, b: rgb.b }));
+        if (!this.showButtons()) {
+            this.emitValue();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ColorGradientComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ColorGradientComponent, isStandalone: true, selector: "mona-color-gradient", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, opacity: { classPropertyName: "opacity", publicName: "opacity", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, showButtons: { classPropertyName: "showButtons", publicName: "showButtons", isSignal: true, isRequired: false, transformFunction: null }, showHexInput: { classPropertyName: "showHexInput", publicName: "showHexInput", isSignal: true, isRequired: false, transformFunction: null }, showColorInputs: { classPropertyName: "showColorInputs", publicName: "showColorInputs", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply", cancel: "cancel", touch: "touch", value: "valueChange" }, host: { properties: { "class": "baseClasses()", "attr.data-disabled": "disabled()", "attr.data-invalid": "invalidState() || null", "attr.aria-invalid": "invalidState() ? 'true' : null" } }, viewQueries: [{ propertyName: "hsvHandle", first: true, predicate: ["hsvPointer"], descendants: true, isSignal: true }, { propertyName: "hsvRectangle", first: true, predicate: ["hsvRectangle"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [class]=\"hsvRectangleClasses()\" [style.background-color]=\"hsvRectangleBackground()\" #hsvRectangle>\r\n    <div\r\n        [class]=\"hsvRectangleHandleClasses()\"\r\n        [style.left.px]=\"hsvHandleLeft()\"\r\n        [style.top.px]=\"hsvHandleTop()\"\r\n        [attr.tabindex]=\"disabled() ? -1 : 0\"\r\n        [attr.role]=\"'slider'\"\r\n        [attr.aria-label]=\"'Color saturation and value'\"\r\n        [attr.aria-valuemin]=\"0\"\r\n        [attr.aria-valuemax]=\"100\"\r\n        [attr.aria-valuenow]=\"hsv().s\"\r\n        [attr.aria-valuetext]=\"'Saturation ' + hsv().s + '%, Value ' + hsv().v + '%'\"\r\n        [attr.aria-disabled]=\"disabled() || null\"\r\n        (keydown)=\"onHsvHandleKeyDown($event)\"\r\n        (blur)=\"onHsvHandleBlur()\"\r\n        #hsvPointer></div>\r\n</div>\r\n<div class=\"flex items-center gap-2\">\r\n    <div class=\"flex flex-1 flex-col gap-1 mr-2\">\r\n        <mona-slider\r\n            [minValue]=\"0\"\r\n            [maxValue]=\"360\"\r\n            [trackBackground]=\"'linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)'\"\r\n            [selectionBackground]=\"'transparent'\"\r\n            [handleClasses]=\"sliderHandleClasses()\"\r\n            [trackSize]=\"sliderHeight\"\r\n            [rounded]=\"rounded()\"\r\n            [value]=\"hsv().h ?? 0\"\r\n            (valueChange)=\"hueValue$.next($event)\"\r\n            (touch)=\"onSliderBlur()\"></mona-slider>\r\n        @if (opacity()) {\r\n            <mona-slider\r\n                [minValue]=\"0\"\r\n                [maxValue]=\"255\"\r\n                [trackBackground]=\"alphaSliderBackground()\"\r\n                [selectionBackground]=\"'transparent'\"\r\n                [handleClasses]=\"sliderHandleClasses()\"\r\n                [trackSize]=\"sliderHeight\"\r\n                [rounded]=\"rounded()\"\r\n                [value]=\"alpha()\"\r\n                (valueChange)=\"onAlphaChange($event)\"\r\n                (touch)=\"onSliderBlur()\"></mona-slider>\r\n        }\r\n    </div>\r\n    @for (preview of colorPreviews(); track preview.type) {\r\n        <div\r\n            [class]=\"colorPreviewClasses()\"\r\n            [class.cursor-pointer]=\"$index === 1\"\r\n            [style.background-color]=\"preview.color\"\r\n            [attr.title]=\"$index === 1 ? preview.title : null\"\r\n            [attr.aria-label]=\"$index === 1 ? preview.title : null\"\r\n            [attr.aria-hidden]=\"$index === 0 ? 'true' : null\"\r\n            [attr.role]=\"$index === 1 ? 'button' : null\"\r\n            [attr.tabindex]=\"$index === 1 ? 0 : null\"\r\n            (click)=\"preview.onClick?.()\"\r\n            (keydown)=\"onPreviousColorKeyDown($event, preview.onClick)\"></div>\r\n    }\r\n    <button monaButton look=\"ghost\" size=\"small\" aria-label=\"Clear color\" (click)=\"onClearClick()\">\r\n        <i class=\"ri-blur-off-line\"></i>\r\n    </button>\r\n</div>\r\n<div class=\"flex flex-col gap-2\">\r\n    @if (showColorInputs()) {\r\n        <div class=\"flex gap-2\">\r\n            <div class=\"flex gap-1\">\r\n                @for (input of colorInputs(); track input.key) {\r\n                    <mona-numeric-text-box\r\n                        [value]=\"input.value\"\r\n                        [minValue]=\"input.min\"\r\n                        [maxValue]=\"input.max\"\r\n                        [decimals]=\"0\"\r\n                        [spinners]=\"false\"\r\n                        [nullable]=\"false\"\r\n                        [rounded]=\"rounded()\"\r\n                        [size]=\"'small'\"\r\n                        class=\"w-18\"\r\n                        (valueChange)=\"input.change($event)\"\r\n                        (inputBlur)=\"onNumericInputBlur()\">\r\n                        <ng-template monaNumericTextBoxPrefixTemplate>\r\n                            <ng-container\r\n                                [ngTemplateOutlet]=\"numericInputPrefixTemplate\"\r\n                                [ngTemplateOutletContext]=\"{ $implicit: input.label }\"></ng-container>\r\n                        </ng-template>\r\n                    </mona-numeric-text-box>\r\n                }\r\n            </div>\r\n            <div class=\"flex flex-1 items-center justify-end\">\r\n                <button\r\n                    monaButton\r\n                    look=\"ghost\"\r\n                    [rounded]=\"rounded()\"\r\n                    size=\"small\"\r\n                    aria-label=\"Switch color mode\"\r\n                    (click)=\"onSwitchColorModeClick()\">\r\n                    <i class=\"ri-expand-up-down-line\"></i>\r\n                </button>\r\n            </div>\r\n        </div>\r\n    }\r\n    @if (showHexInput()) {\r\n        <mona-text-box\r\n            [rounded]=\"rounded()\"\r\n            [value]=\"hex()\"\r\n            (valueChange)=\"onHexChange($event)\"\r\n            (inputBlur)=\"onHexInputBlur()\"\r\n            (inputFocus)=\"onHexInputFocus()\"\r\n            class=\"w-full\">\r\n            <ng-template monaTextBoxPrefixTemplate>\r\n                <ng-container\r\n                    [ngTemplateOutlet]=\"numericInputPrefixTemplate\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: 'HEX', classes: 'w-auto px-2' }\"></ng-container>\r\n            </ng-template>\r\n            <ng-template monaTextBoxSuffixTemplate>\r\n                <mona-dropdown-button look=\"ghost\" aria-label=\"Copy color\" class=\"h-full\">\r\n                    <svg lucideCopy [size]=\"12\"></svg>\r\n                    <mona-dropdown-button-item\r\n                        label=\"Copy as HEX\"\r\n                        (menuClick)=\"onCopyColorSelect('hex')\"></mona-dropdown-button-item>\r\n                    <mona-dropdown-button-item\r\n                        label=\"Copy as RGB\"\r\n                        (menuClick)=\"onCopyColorSelect('rgb')\"></mona-dropdown-button-item>\r\n                </mona-dropdown-button>\r\n            </ng-template>\r\n        </mona-text-box>\r\n    }\r\n    @if (showButtons()) {\r\n        <div class=\"flex items-center justify-end gap-2\">\r\n            <button monaButton [rounded]=\"rounded()\" look=\"primary\" (click)=\"onApply()\">Apply</button>\r\n            <button monaButton [rounded]=\"rounded()\" (click)=\"onCancel()\">Cancel</button>\r\n        </div>\r\n    }\r\n</div>\r\n\r\n<ng-template #numericInputPrefixTemplate let-text let-classes=\"classes\">\r\n    <span\r\n        [class]=\"classes\"\r\n        class=\"inline-flex items-center justify-center select-none w-7.5 bg-secondary h-full text-xs font-semibold border-r border-r-input-border\"\r\n        >{{ text }}</span\r\n    >\r\n</ng-template>\r\n", dependencies: [{ kind: "component", type: NumericTextBoxComponent, selector: "mona-numeric-text-box", inputs: ["aria-label", "decimals", "disabled", "formatter", "maxValue", "minValue", "nullable", "readonly", "required", "invalid", "rounded", "size", "spinners", "step", "tabindex", "touched", "class", "value"], outputs: ["inputBlur", "inputFocus", "inputFocusOut", "touch", "valueChange"] }, { kind: "directive", type: NumericTextBoxPrefixTemplateDirective, selector: "ng-template[monaNumericTextBoxPrefixTemplate]" }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: TextBoxComponent, selector: "mona-text-box", inputs: ["clearButton", "disabled", "inputAttributes", "inputClass", "inputStyle", "invalid", "placeholder", "readonly", "required", "rounded", "size", "touched", "type", "class", "value"], outputs: ["inputBlur", "inputFocus", "touch", "valueChange"] }, { kind: "directive", type: TextBoxPrefixTemplateDirective, selector: "ng-template[monaTextBoxPrefixTemplate]" }, { kind: "directive", type: TextBoxSuffixTemplateDirective, selector: "ng-template[monaTextBoxSuffixTemplate]" }, { kind: "component", type: SliderComponent, selector: "mona-slider", inputs: ["aria-label", "aria-labelledby", "value"], outputs: ["valueChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DropdownButtonComponent, selector: "mona-dropdown-button", inputs: ["aria-label", "aria-labelledby", "iconOnly", "disabled", "loading", "look", "rounded", "size", "text", "class"], outputs: ["menuItemClick"] }, { kind: "component", type: DropdownButtonItemComponent, selector: "mona-dropdown-button-item" }, { kind: "component", type: LucideCopy, selector: "svg[lucideCopy]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ColorGradientComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-color-gradient", imports: [
+                        NumericTextBoxComponent,
+                        NumericTextBoxPrefixTemplateDirective,
+                        ButtonDirective,
+                        TextBoxComponent,
+                        TextBoxPrefixTemplateDirective,
+                        TextBoxSuffixTemplateDirective,
+                        SliderComponent,
+                        NgTemplateOutlet,
+                        DropdownButtonComponent,
+                        DropdownButtonItemComponent,
+                        LucideCopy
+                    ], host: {
+                        "[class]": "baseClasses()",
+                        "[attr.data-disabled]": "disabled()",
+                        "[attr.data-invalid]": "invalidState() || null",
+                        "[attr.aria-invalid]": "invalidState() ? 'true' : null"
+                    }, template: "<div [class]=\"hsvRectangleClasses()\" [style.background-color]=\"hsvRectangleBackground()\" #hsvRectangle>\r\n    <div\r\n        [class]=\"hsvRectangleHandleClasses()\"\r\n        [style.left.px]=\"hsvHandleLeft()\"\r\n        [style.top.px]=\"hsvHandleTop()\"\r\n        [attr.tabindex]=\"disabled() ? -1 : 0\"\r\n        [attr.role]=\"'slider'\"\r\n        [attr.aria-label]=\"'Color saturation and value'\"\r\n        [attr.aria-valuemin]=\"0\"\r\n        [attr.aria-valuemax]=\"100\"\r\n        [attr.aria-valuenow]=\"hsv().s\"\r\n        [attr.aria-valuetext]=\"'Saturation ' + hsv().s + '%, Value ' + hsv().v + '%'\"\r\n        [attr.aria-disabled]=\"disabled() || null\"\r\n        (keydown)=\"onHsvHandleKeyDown($event)\"\r\n        (blur)=\"onHsvHandleBlur()\"\r\n        #hsvPointer></div>\r\n</div>\r\n<div class=\"flex items-center gap-2\">\r\n    <div class=\"flex flex-1 flex-col gap-1 mr-2\">\r\n        <mona-slider\r\n            [minValue]=\"0\"\r\n            [maxValue]=\"360\"\r\n            [trackBackground]=\"'linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)'\"\r\n            [selectionBackground]=\"'transparent'\"\r\n            [handleClasses]=\"sliderHandleClasses()\"\r\n            [trackSize]=\"sliderHeight\"\r\n            [rounded]=\"rounded()\"\r\n            [value]=\"hsv().h ?? 0\"\r\n            (valueChange)=\"hueValue$.next($event)\"\r\n            (touch)=\"onSliderBlur()\"></mona-slider>\r\n        @if (opacity()) {\r\n            <mona-slider\r\n                [minValue]=\"0\"\r\n                [maxValue]=\"255\"\r\n                [trackBackground]=\"alphaSliderBackground()\"\r\n                [selectionBackground]=\"'transparent'\"\r\n                [handleClasses]=\"sliderHandleClasses()\"\r\n                [trackSize]=\"sliderHeight\"\r\n                [rounded]=\"rounded()\"\r\n                [value]=\"alpha()\"\r\n                (valueChange)=\"onAlphaChange($event)\"\r\n                (touch)=\"onSliderBlur()\"></mona-slider>\r\n        }\r\n    </div>\r\n    @for (preview of colorPreviews(); track preview.type) {\r\n        <div\r\n            [class]=\"colorPreviewClasses()\"\r\n            [class.cursor-pointer]=\"$index === 1\"\r\n            [style.background-color]=\"preview.color\"\r\n            [attr.title]=\"$index === 1 ? preview.title : null\"\r\n            [attr.aria-label]=\"$index === 1 ? preview.title : null\"\r\n            [attr.aria-hidden]=\"$index === 0 ? 'true' : null\"\r\n            [attr.role]=\"$index === 1 ? 'button' : null\"\r\n            [attr.tabindex]=\"$index === 1 ? 0 : null\"\r\n            (click)=\"preview.onClick?.()\"\r\n            (keydown)=\"onPreviousColorKeyDown($event, preview.onClick)\"></div>\r\n    }\r\n    <button monaButton look=\"ghost\" size=\"small\" aria-label=\"Clear color\" (click)=\"onClearClick()\">\r\n        <i class=\"ri-blur-off-line\"></i>\r\n    </button>\r\n</div>\r\n<div class=\"flex flex-col gap-2\">\r\n    @if (showColorInputs()) {\r\n        <div class=\"flex gap-2\">\r\n            <div class=\"flex gap-1\">\r\n                @for (input of colorInputs(); track input.key) {\r\n                    <mona-numeric-text-box\r\n                        [value]=\"input.value\"\r\n                        [minValue]=\"input.min\"\r\n                        [maxValue]=\"input.max\"\r\n                        [decimals]=\"0\"\r\n                        [spinners]=\"false\"\r\n                        [nullable]=\"false\"\r\n                        [rounded]=\"rounded()\"\r\n                        [size]=\"'small'\"\r\n                        class=\"w-18\"\r\n                        (valueChange)=\"input.change($event)\"\r\n                        (inputBlur)=\"onNumericInputBlur()\">\r\n                        <ng-template monaNumericTextBoxPrefixTemplate>\r\n                            <ng-container\r\n                                [ngTemplateOutlet]=\"numericInputPrefixTemplate\"\r\n                                [ngTemplateOutletContext]=\"{ $implicit: input.label }\"></ng-container>\r\n                        </ng-template>\r\n                    </mona-numeric-text-box>\r\n                }\r\n            </div>\r\n            <div class=\"flex flex-1 items-center justify-end\">\r\n                <button\r\n                    monaButton\r\n                    look=\"ghost\"\r\n                    [rounded]=\"rounded()\"\r\n                    size=\"small\"\r\n                    aria-label=\"Switch color mode\"\r\n                    (click)=\"onSwitchColorModeClick()\">\r\n                    <i class=\"ri-expand-up-down-line\"></i>\r\n                </button>\r\n            </div>\r\n        </div>\r\n    }\r\n    @if (showHexInput()) {\r\n        <mona-text-box\r\n            [rounded]=\"rounded()\"\r\n            [value]=\"hex()\"\r\n            (valueChange)=\"onHexChange($event)\"\r\n            (inputBlur)=\"onHexInputBlur()\"\r\n            (inputFocus)=\"onHexInputFocus()\"\r\n            class=\"w-full\">\r\n            <ng-template monaTextBoxPrefixTemplate>\r\n                <ng-container\r\n                    [ngTemplateOutlet]=\"numericInputPrefixTemplate\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: 'HEX', classes: 'w-auto px-2' }\"></ng-container>\r\n            </ng-template>\r\n            <ng-template monaTextBoxSuffixTemplate>\r\n                <mona-dropdown-button look=\"ghost\" aria-label=\"Copy color\" class=\"h-full\">\r\n                    <svg lucideCopy [size]=\"12\"></svg>\r\n                    <mona-dropdown-button-item\r\n                        label=\"Copy as HEX\"\r\n                        (menuClick)=\"onCopyColorSelect('hex')\"></mona-dropdown-button-item>\r\n                    <mona-dropdown-button-item\r\n                        label=\"Copy as RGB\"\r\n                        (menuClick)=\"onCopyColorSelect('rgb')\"></mona-dropdown-button-item>\r\n                </mona-dropdown-button>\r\n            </ng-template>\r\n        </mona-text-box>\r\n    }\r\n    @if (showButtons()) {\r\n        <div class=\"flex items-center justify-end gap-2\">\r\n            <button monaButton [rounded]=\"rounded()\" look=\"primary\" (click)=\"onApply()\">Apply</button>\r\n            <button monaButton [rounded]=\"rounded()\" (click)=\"onCancel()\">Cancel</button>\r\n        </div>\r\n    }\r\n</div>\r\n\r\n<ng-template #numericInputPrefixTemplate let-text let-classes=\"classes\">\r\n    <span\r\n        [class]=\"classes\"\r\n        class=\"inline-flex items-center justify-center select-none w-7.5 bg-secondary h-full text-xs font-semibold border-r border-r-input-border\"\r\n        >{{ text }}</span\r\n    >\r\n</ng-template>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { hsvHandle: [{ type: i0.ViewChild, args: ["hsvPointer", { isSignal: true }] }], hsvRectangle: [{ type: i0.ViewChild, args: ["hsvRectangle", { isSignal: true }] }], apply: [{ type: i0.Output, args: ["apply"] }], cancel: [{ type: i0.Output, args: ["cancel"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], opacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "opacity", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], showButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButtons", required: false }] }], showHexInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHexInput", required: false }] }], showColorInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "showColorInputs", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/color-gradient
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ColorGradientComponent };
+//# sourceMappingURL=nanahoshi-mona-ui-color-gradient.mjs.map