@nanahoshi/mona-ui 0.1.0

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

@@ -0,0 +1,495 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Directive, inject, DestroyRef, ElementRef, signal, computed, viewChild, contentChild, TemplateRef, input, output, model, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i1 from '@fortawesome/angular-fontawesome';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faTimes, faChevronDown } from '@fortawesome/free-solid-svg-icons';
+import { take, fromEvent, takeUntil } from 'rxjs';
+import { ButtonDirective } from '@nanahoshi/mona-ui/button';
+import { PopupService, dropdownPopupAnimation } from '@nanahoshi/mona-ui/popup';
+import { ThemeService } from '@nanahoshi/mona-ui/theme';
+import { createElementControlId } from '@nanahoshi/mona-ui/internal';
+import { ColorGradientComponent } from '@nanahoshi/mona-ui/color-gradient';
+import { ColorPaletteComponent } from '@nanahoshi/mona-ui/color-palette';
+import { cva } from 'class-variance-authority';
+
+class ColorPickerValueTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ColorPickerValueTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: ColorPickerValueTemplateDirective, isStandalone: true, selector: "ng-template[monaColorPickerValueTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ColorPickerValueTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaColorPickerValueTemplate]"
+                }]
+        }] });
+
+const colorPickerBaseVariants = cva(`
+        flex items-center
+        border border-input-border
+        bg-background outline-none
+        shadow-xs
+        cursor-pointer
+
+        hover:bg-accent hover:text-accent-foreground
+
+        transition-[color,box-shadow,border] ease-in-out duration-300
+
+        data-[disabled='true']:pointer-events-none
+        data-[disabled='true']:cursor-not-allowed
+        data-[disabled='true']:opacity-50
+        data-[readonly='true']:cursor-default
+        data-[invalid='true']:border-error
+        data-[invalid='true']:ring-1
+        data-[invalid='true']:ring-error
+
+        focus-within:ring-1 focus-within:ring-primary/40
+
+        [&.ng-touched.ng-invalid]:border-error
+    `, {
+    variants: {
+        expanded: {
+            true: "ring-1 ring-primary/40"
+        },
+        rounded: {
+            none: "rounded-none",
+            small: "rounded-sm",
+            medium: "rounded-md",
+            large: "rounded-lg",
+            full: "rounded-full"
+        },
+        size: {
+            large: "h-10 text-md",
+            medium: "h-9 text-sm",
+            small: "h-8 text-xs"
+        }
+    }
+});
+const colorPickerColorVariants = cva(`
+        flex items-center justify-center
+        mx-1
+    `, {
+    variants: {
+        rounded: {
+            none: "rounded-none",
+            small: "rounded-sm",
+            medium: "rounded-md",
+            large: "rounded-lg",
+            full: "rounded-full"
+        },
+        size: {
+            large: "w-6 h-6 mx-2",
+            medium: "w-5 h-5 mx-2",
+            small: "w-4 h-4 mx-1"
+        }
+    }
+});
+
+const colorPickerBaseThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return colorPickerBaseVariants;
+        default:
+            return colorPickerBaseVariants;
+    }
+};
+const colorPickerColorThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return colorPickerColorVariants;
+        default:
+            return colorPickerColorVariants;
+    }
+};
+
+class ColorPickerComponent {
+    constructor() {
+        this.#destroyRef = inject(DestroyRef);
+        this.#hostElementRef = inject(ElementRef);
+        this.#popupService = inject(PopupService);
+        this.#popupRef = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#popupRef" }] : /* istanbul ignore next */ []));
+        this.#themeService = inject(ThemeService);
+        this.baseClasses = computed(() => {
+            const theme = this.#themeService.theme();
+            const expanded = this.expanded();
+            const rounded = this.rounded();
+            const size = this.size();
+            return colorPickerBaseThemeVariants(theme)({ expanded, rounded, size });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClasses" }] : /* istanbul ignore next */ []));
+        this.colorClasses = computed(() => {
+            const theme = this.#themeService.theme();
+            const rounded = this.rounded();
+            const size = this.size();
+            return colorPickerColorThemeVariants(theme)({ rounded, size });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "colorClasses" }] : /* istanbul ignore next */ []));
+        this.expanded = computed(() => this.#popupRef() !== null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+        this.invalidState = computed(() => this.invalid() || (this.required() && this.touched() && !this.value()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
+        this.noColorIcon = faTimes;
+        this.dropdownIcon = faChevronDown;
+        this.popupId = createElementControlId();
+        this.popupTemplate = viewChild.required("popupTemplate", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "popupTemplate" }] : /* istanbul ignore next */ []));
+        this.valueTemplate = contentChild(ColorPickerValueTemplateDirective, { ...(ngDevMode ? { debugName: "valueTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        /**
+         * @description Whether to close the color picker when a color is selected.
+         * Only applies when the view is set to "palette".
+         * @default true
+         */
+        this.closeOnSelect = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "closeOnSelect" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The number of columns to display in the color palette.
+         * Only applies when the view is set to "palette" and the palette is a custom array of colors.
+         * @default 10
+         */
+        this.columns = input(10, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Renders the component with reduced visual emphasis and removes pointer interaction.
+         * @default false
+         */
+        this.disabled = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Marks the color picker as invalid. When bound to a signal form field via `[formField]`,
+         * this is written by the `FormField` directive.
+         * @default false
+         */
+        this.invalid = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Whether to display the opacity slider.
+         * Only applies when the view is set to "gradient".
+         * @default true
+         */
+        this.opacity = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "opacity" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The type of color palette to use.
+         * This can be a predefined palette type like "flat", "material", or "websafe",
+         * or a custom iterable of colors.
+         * @default "flat"
+         */
+        this.palette = input("flat", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "palette" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Prevents value changes while preserving the component's visual state. When bound to a signal
+         * form field via `[formField]`, this is written by the `FormField` directive.
+         * @default false
+         */
+        this.readonly = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Border-radius preset applied to the color picker.
+         * @default "medium"
+         */
+        this.rounded = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Whether to show the clear button to reset the color.
+         * This is only applicable when the view is set to "palette".
+         * @default false
+         */
+        this.showClearButton = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showClearButton" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Size preset controlling the color picker's dimensions.
+         * @default "medium"
+         */
+        this.size = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The view mode of the color picker.
+         * This can be either "palette" or "gradient".
+         * @default "gradient"
+         */
+        this.view = input("gradient", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets whether the color picker is required. When bound to a signal form field via `[formField]`,
+         * this is written by the `FormField` directive.
+         * @default false
+         */
+        this.required = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Emitted when the color picker is interacted with on blur or color selection.
+         * The `FormField` directive listens to this to mark the field as touched.
+         */
+        this.touch = output();
+        /**
+         * @description Sets the touched state of the color picker. When bound to a signal form field via `[formField]`,
+         * this is written by the `FormField` directive.
+         * @default false
+         */
+        this.touched = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Two-way bindable current color value.
+         * @default null
+         */
+        this.value = model(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    }
+    #destroyRef;
+    #hostElementRef;
+    #popupService;
+    #popupRef;
+    #themeService;
+    ngOnInit() {
+        this.setEventListeners();
+        this.setKeyboardEventListeners();
+    }
+    onClearClick() {
+        if (this.disabled() || this.readonly()) {
+            return;
+        }
+        this.value.set(null);
+        this.touch.emit();
+        if (this.#popupRef() && this.closeOnSelect()) {
+            this.close();
+        }
+    }
+    onColorGradientApply() {
+        this.#popupRef()?.close();
+    }
+    onColorGradientCancel() {
+        this.#popupRef()?.close();
+    }
+    onColorGradientValueChange(value) {
+        if (value === undefined) {
+            return;
+        }
+        if (this.disabled() || this.readonly()) {
+            return;
+        }
+        this.value.set(value);
+    }
+    onColorGradientTouch() {
+        this.touch.emit();
+    }
+    onColorPaletteValueChange(value) {
+        if (this.disabled() || this.readonly()) {
+            return;
+        }
+        this.value.set(value);
+        if (this.closeOnSelect()) {
+            this.#popupRef()?.close();
+        }
+    }
+    onColorPaletteTouch() {
+        this.touch.emit();
+    }
+    onPaletteContainerKeyDown(event) {
+        switch (event.key) {
+            case "ArrowDown":
+            case "ArrowRight":
+            case "ArrowUp":
+            case "ArrowLeft":
+            case "Enter":
+            case " ":
+            case "Home":
+            case "End":
+                // Focus on the first color tile when the user starts navigating
+                event.preventDefault();
+                event.stopPropagation();
+                this.focusFirstColorTile();
+                break;
+            case "Escape":
+                event.preventDefault();
+                event.stopPropagation();
+                this.close();
+                break;
+            case "Tab":
+                // Close popup when tabbing out
+                this.close();
+                break;
+        }
+    }
+    open() {
+        if (this.disabled() || this.readonly()) {
+            return;
+        }
+        const popupRef = this.#popupService.create({
+            anchor: this.#hostElementRef.nativeElement,
+            anchorConnectionPoint: "bottomleft",
+            animation: dropdownPopupAnimation,
+            closeOnOutsideClick: true,
+            content: this.popupTemplate(),
+            hasBackdrop: false,
+            offset: { horizontal: -1, vertical: 2 },
+            popupConnectionPoint: "topleft",
+            withPush: false
+        });
+        popupRef.opened.pipe(take(1), takeUntilDestroyed(this.#destroyRef)).subscribe(() => {
+            // Deferred so this runs after the browser's default focus-on-click behavior for the
+            // (focusable) host element, otherwise that default action steals focus back from the popup.
+            setTimeout(() => {
+                this.focusPopupContent();
+                this.setupPopupKeyboardHandling();
+            });
+        });
+        this.#popupRef.set(popupRef);
+        popupRef.closed.pipe(take(1)).subscribe(() => {
+            this.#popupRef.set(null);
+            this.#hostElementRef.nativeElement.focus();
+        });
+    }
+    close() {
+        if (this.#popupRef()) {
+            this.#popupRef()?.close();
+        }
+    }
+    focusFirstColorTile() {
+        if (!this.#popupRef()) {
+            return;
+        }
+        const overlayElement = this.#popupRef()?.overlayRef.overlayElement;
+        if (!overlayElement) {
+            return;
+        }
+        const firstColorTile = overlayElement.querySelector('[data-color-index="0"]');
+        if (firstColorTile) {
+            firstColorTile.focus();
+        }
+    }
+    focusPopupContent() {
+        if (!this.#popupRef()) {
+            return;
+        }
+        const overlayElement = this.#popupRef()?.overlayRef.overlayElement;
+        if (!overlayElement) {
+            return;
+        }
+        if (this.view() === "palette") {
+            // Focus the palette container, not individual colors
+            const paletteContainer = overlayElement.querySelector("[data-palette-container]");
+            if (paletteContainer) {
+                paletteContainer.focus();
+            }
+        }
+        else if (this.view() === "gradient") {
+            // Focus the HSV handle in the gradient picker
+            const hsvHandle = overlayElement.querySelector('[role="slider"]');
+            if (hsvHandle) {
+                hsvHandle.focus();
+            }
+        }
+    }
+    setEventListeners() {
+        fromEvent(this.#hostElementRef.nativeElement, "click")
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe(() => {
+            if (this.disabled() || this.readonly()) {
+                return;
+            }
+            if (this.#popupRef()) {
+                this.close();
+                return;
+            }
+            this.open();
+        });
+    }
+    setKeyboardEventListeners() {
+        fromEvent(this.#hostElementRef.nativeElement, "keydown")
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe((event) => {
+            if (this.disabled() || this.readonly()) {
+                return;
+            }
+            switch (event.key) {
+                case "Enter":
+                case " ":
+                case "ArrowDown":
+                case "ArrowUp":
+                    event.preventDefault();
+                    event.stopPropagation();
+                    if (!this.#popupRef()) {
+                        this.open();
+                    }
+                    break;
+                case "Escape":
+                    event.preventDefault();
+                    event.stopPropagation();
+                    if (this.#popupRef()) {
+                        this.close();
+                    }
+                    break;
+                case "Tab":
+                    if (this.#popupRef()) {
+                        this.close();
+                    }
+                    break;
+            }
+        });
+        // Handle blur events for touched callback
+        fromEvent(this.#hostElementRef.nativeElement, "blur")
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe(() => {
+            this.touch.emit();
+        });
+    }
+    setupPopupKeyboardHandling() {
+        const popupRef = this.#popupRef();
+        if (!popupRef) {
+            return;
+        }
+        const overlayElement = popupRef.overlayRef.overlayElement;
+        if (!overlayElement) {
+            return;
+        }
+        fromEvent(overlayElement, "keydown")
+            .pipe(takeUntil(popupRef.closed), takeUntilDestroyed(this.#destroyRef))
+            .subscribe(event => {
+            const keyEvent = event;
+            if (keyEvent.key === "Tab") {
+                this.close();
+            }
+            else if (keyEvent.key === "Escape") {
+                keyEvent.preventDefault();
+                keyEvent.stopPropagation();
+                this.close();
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ColorPickerComponent, isStandalone: true, selector: "mona-color-picker", inputs: { closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", 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: { touch: "touch", value: "valueChange" }, host: { properties: { "class": "baseClasses()", "attr.tabindex": "disabled() ? -1 : 0", "attr.data-disabled": "disabled()", "attr.data-invalid": "invalidState() || null", "attr.data-open": "expanded() || null", "attr.data-readonly": "readonly()", "attr.data-required": "required() || null", "attr.role": "'combobox'", "attr.aria-controls": "popupId", "attr.aria-expanded": "expanded() || null", "attr.aria-haspopup": "'dialog'", "attr.aria-label": "'Color picker'", "attr.aria-disabled": "disabled()", "attr.aria-invalid": "invalidState() ? 'true' : null", "attr.aria-readonly": "readonly()", "attr.aria-required": "required()" } }, queries: [{ propertyName: "valueTemplate", first: true, predicate: ColorPickerValueTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (valueTemplate()) {\n    <ng-container\n        [ngTemplateOutlet]=\"valueTemplate() ?? null\"\n        [ngTemplateOutletContext]=\"{ $implicit: value() }\"></ng-container>\n} @else {\n    <div [style.background]=\"value()\" [class]=\"colorClasses()\">\n        @if (!value()) {\n            <fa-icon [icon]=\"noColorIcon\"></fa-icon>\n        }\n    </div>\n}\n<div>\n    <button monaButton look=\"link\" [tabindex]=\"-1\" class=\"px-2 py-1\">\n        <fa-icon [icon]=\"dropdownIcon\"></fa-icon>\n    </button>\n</div>\n\n<ng-template #popupTemplate>\n    @if (view() === \"palette\") {\n        <div\n            [id]=\"popupId\"\n            class=\"flex flex-col border border-input-border bg-background shadow-lg p-0.5 outline-none\"\n            tabindex=\"0\"\n            role=\"dialog\"\n            aria-label=\"Color palette picker\"\n            data-palette-container\n            (keydown)=\"onPaletteContainerKeyDown($event)\">\n            @if (showClearButton()) {\n                <div class=\"flex items-center justify-end p-1\">\n                    <button monaButton look=\"ghost\" size=\"small\" (click)=\"onClearClick()\">\n                        <i class=\"ri-blur-off-line\"></i>\n                    </button>\n                </div>\n            }\n            <mona-color-palette\n                [palette]=\"palette()\"\n                [columns]=\"columns()\"\n                [readonly]=\"readonly()\"\n                [value]=\"value()\"\n                (valueChange)=\"onColorPaletteValueChange($event)\"\n                (touch)=\"onColorPaletteTouch()\"></mona-color-palette>\n        </div>\n    } @else if (view() === \"gradient\") {\n        <div\n            [id]=\"popupId\"\n            class=\"border border-input-border bg-background shadow-lg\"\n            tabindex=\"0\"\n            role=\"dialog\"\n            aria-label=\"Color gradient picker\">\n            <mona-color-gradient\n                [opacity]=\"opacity()\"\n                [rounded]=\"rounded()\"\n                [disabled]=\"disabled() || readonly()\"\n                [value]=\"value()\"\n                (valueChange)=\"onColorGradientValueChange($event)\"\n                (touch)=\"onColorGradientTouch()\"\n                (apply)=\"onColorGradientApply()\"\n                (cancel)=\"onColorGradientCancel()\"></mona-color-gradient>\n        </div>\n    }\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { 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: ColorPaletteComponent, selector: "mona-color-palette", inputs: ["columns", "disabled", "invalid", "palette", "readonly", "rounded", "required", "tileSize", "touched", "value"], outputs: ["touch", "valueChange"] }, { kind: "component", type: ColorGradientComponent, selector: "mona-color-gradient", inputs: ["disabled", "format", "invalid", "opacity", "required", "rounded", "showButtons", "showHexInput", "showColorInputs", "touched", "value"], outputs: ["apply", "cancel", "touch", "valueChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ColorPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-color-picker", imports: [FontAwesomeModule, ButtonDirective, ColorPaletteComponent, ColorGradientComponent, NgTemplateOutlet], host: {
+                        "[class]": "baseClasses()",
+                        "[attr.tabindex]": "disabled() ? -1 : 0",
+                        "[attr.data-disabled]": "disabled()",
+                        "[attr.data-invalid]": "invalidState() || null",
+                        "[attr.data-open]": "expanded() || null",
+                        "[attr.data-readonly]": "readonly()",
+                        "[attr.data-required]": "required() || null",
+                        "[attr.role]": "'combobox'",
+                        "[attr.aria-controls]": "popupId",
+                        "[attr.aria-expanded]": "expanded() || null",
+                        "[attr.aria-haspopup]": "'dialog'",
+                        "[attr.aria-label]": "'Color picker'",
+                        "[attr.aria-disabled]": "disabled()",
+                        "[attr.aria-invalid]": "invalidState() ? 'true' : null",
+                        "[attr.aria-readonly]": "readonly()",
+                        "[attr.aria-required]": "required()"
+                    }, template: "@if (valueTemplate()) {\n    <ng-container\n        [ngTemplateOutlet]=\"valueTemplate() ?? null\"\n        [ngTemplateOutletContext]=\"{ $implicit: value() }\"></ng-container>\n} @else {\n    <div [style.background]=\"value()\" [class]=\"colorClasses()\">\n        @if (!value()) {\n            <fa-icon [icon]=\"noColorIcon\"></fa-icon>\n        }\n    </div>\n}\n<div>\n    <button monaButton look=\"link\" [tabindex]=\"-1\" class=\"px-2 py-1\">\n        <fa-icon [icon]=\"dropdownIcon\"></fa-icon>\n    </button>\n</div>\n\n<ng-template #popupTemplate>\n    @if (view() === \"palette\") {\n        <div\n            [id]=\"popupId\"\n            class=\"flex flex-col border border-input-border bg-background shadow-lg p-0.5 outline-none\"\n            tabindex=\"0\"\n            role=\"dialog\"\n            aria-label=\"Color palette picker\"\n            data-palette-container\n            (keydown)=\"onPaletteContainerKeyDown($event)\">\n            @if (showClearButton()) {\n                <div class=\"flex items-center justify-end p-1\">\n                    <button monaButton look=\"ghost\" size=\"small\" (click)=\"onClearClick()\">\n                        <i class=\"ri-blur-off-line\"></i>\n                    </button>\n                </div>\n            }\n            <mona-color-palette\n                [palette]=\"palette()\"\n                [columns]=\"columns()\"\n                [readonly]=\"readonly()\"\n                [value]=\"value()\"\n                (valueChange)=\"onColorPaletteValueChange($event)\"\n                (touch)=\"onColorPaletteTouch()\"></mona-color-palette>\n        </div>\n    } @else if (view() === \"gradient\") {\n        <div\n            [id]=\"popupId\"\n            class=\"border border-input-border bg-background shadow-lg\"\n            tabindex=\"0\"\n            role=\"dialog\"\n            aria-label=\"Color gradient picker\">\n            <mona-color-gradient\n                [opacity]=\"opacity()\"\n                [rounded]=\"rounded()\"\n                [disabled]=\"disabled() || readonly()\"\n                [value]=\"value()\"\n                (valueChange)=\"onColorGradientValueChange($event)\"\n                (touch)=\"onColorGradientTouch()\"\n                (apply)=\"onColorGradientApply()\"\n                (cancel)=\"onColorGradientCancel()\"></mona-color-gradient>\n        </div>\n    }\n</ng-template>\n" }]
+        }], propDecorators: { popupTemplate: [{ type: i0.ViewChild, args: ["popupTemplate", { isSignal: true }] }], valueTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ColorPickerValueTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], opacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "opacity", required: false }] }], palette: [{ type: i0.Input, args: [{ isSignal: true, alias: "palette", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", 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-picker
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ColorPickerComponent, ColorPickerValueTemplateDirective };
+//# sourceMappingURL=nanahoshi-mona-ui-color-picker.mjs.map