@designbasekorea/ui-wc 0.5.6 → 0.6.0

package/dist/esm/components/db-color-picker.js

@@ -1,746 +1 @@
-import { hexToRgb, rgbToHsv, hsvToRgb, toHex, rgbToHsl, formatColor, normalizeHex, isHex, clamp } from './color-picker-utils.js';
-import { getDbComponentIconSize, createDbIcon } from './db-icons.js';
-
-const SIZES = ['s', 'm', 'l'];
-const TYPES = ['dropdown', 'modal'];
-const POSITIONS = ['bottom-start', 'bottom-end', 'top-start', 'top-end'];
-const DEFAULT_COLOR = '#006FFF';
-const DEFAULT_RGB = hexToRgb(DEFAULT_COLOR) ?? { r: 0, g: 111, b: 255 };
-const DEFAULT_HSV = rgbToHsv(DEFAULT_RGB.r, DEFAULT_RGB.g, DEFAULT_RGB.b);
-const FORMAT_OPTIONS = JSON.stringify([
-    { label: 'HEX', value: 'hex' },
-    { label: 'RGB', value: 'rgb' },
-    { label: 'RGBA', value: 'rgba' },
-    { label: 'HSL', value: 'hsl' },
-    { label: 'HSLA', value: 'hsla' },
-]);
-class DbColorPicker extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.h = DEFAULT_HSV.h;
-        this.s = DEFAULT_HSV.s;
-        this.v = DEFAULT_HSV.v;
-        this.a = 100;
-        this.open = false;
-        this.format = 'hex';
-        this.colorInput = DEFAULT_COLOR;
-        this.alphaInput = '100';
-        this.isCopied = false;
-        this.tempColor = '';
-        this.dragging = null;
-        this.mounted = false;
-        this.copiedTimer = null;
-        this.debounceTimer = null;
-        this.lastEmittedHex = '';
-        this.suppressNextValueSync = false;
-        this.didMount = false;
-        this.triggerInputFocused = false;
-        this.panelInputFocused = false;
-        this.panelAlphaInputFocused = false;
-        this.handleOutsideClick = (event) => {
-            if (!this.open || this.getOption('type', TYPES, 'dropdown') !== 'dropdown')
-                return;
-            const target = event.target;
-            if (this.contains(target))
-                return;
-            if (this.formatSelectEl?.contains(target))
-                return;
-            this.open = false;
-            this.update();
-        };
-        this.handleDocumentMouseMove = (event) => {
-            if (this.dragging !== 'area')
-                return;
-            if (this.getBool('disabled') || this.getBool('readonly'))
-                return;
-            this.updateFromArea(event.clientX, event.clientY);
-        };
-        this.handleDocumentMouseUp = () => {
-            if (this.dragging !== 'area')
-                return;
-            this.dragging = null;
-            this.onColorStateChanged(true);
-        };
-        this.handleModalCancel = () => {
-            const rgb = hexToRgb(this.tempColor);
-            if (rgb) {
-                const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
-                this.h = hsv.h;
-                this.s = hsv.s;
-                this.v = hsv.v;
-            }
-            this.open = false;
-            this.update();
-            this.dispatchEvent(new CustomEvent('db-cancel', { bubbles: true, composed: true }));
-        };
-        this.handleModalApply = () => {
-            this.open = false;
-            this.actuallyEmit();
-            this.dispatchEvent(new CustomEvent('db-apply', { detail: { value: this.getOutward() }, bubbles: true, composed: true }));
-            this.update();
-        };
-    }
-    static get observedAttributes() {
-        return [
-            'size',
-            'type',
-            'position',
-            'value',
-            'default-value',
-            'show-input',
-            'show-alpha',
-            'show-format-selector',
-            'show-copy-button',
-            'show-eyedropper',
-            'disabled',
-            'readonly',
-            'full-width',
-            'error',
-            'on-change-format',
-            'change-debounce-ms',
-            'emit-during-drag',
-        ];
-    }
-    connectedCallback() {
-        if (!this.mounted)
-            this.mount();
-        this.syncFromValueAttr(true);
-        this.update();
-        document.addEventListener('mousedown', this.handleOutsideClick);
-        document.addEventListener('mousemove', this.handleDocumentMouseMove);
-        document.addEventListener('mouseup', this.handleDocumentMouseUp);
-    }
-    disconnectedCallback() {
-        document.removeEventListener('mousedown', this.handleOutsideClick);
-        document.removeEventListener('mousemove', this.handleDocumentMouseMove);
-        document.removeEventListener('mouseup', this.handleDocumentMouseUp);
-        if (this.copiedTimer)
-            clearTimeout(this.copiedTimer);
-        if (this.debounceTimer)
-            clearTimeout(this.debounceTimer);
-    }
-    attributeChangedCallback(name) {
-        if (!this.mounted)
-            return;
-        if (name === 'value' || name === 'default-value')
-            this.syncFromValueAttr(false);
-        this.update();
-    }
-    getBool(name, fallback = false) {
-        if (!this.hasAttribute(name))
-            return fallback;
-        const value = this.getAttribute(name);
-        return value === '' || value === 'true';
-    }
-    getOption(name, values, fallback) {
-        const value = this.getAttribute(name);
-        return value && values.includes(value) ? value : fallback;
-    }
-    getIconSize() {
-        return getDbComponentIconSize(this.getOption('size', SIZES, 'm'));
-    }
-    getRgb() {
-        return hsvToRgb(this.h, this.s, this.v);
-    }
-    getHex() {
-        const rgb = this.getRgb();
-        return toHex(rgb.r, rgb.g, rgb.b);
-    }
-    getHsl() {
-        const rgb = this.getRgb();
-        return rgbToHsl(rgb.r, rgb.g, rgb.b);
-    }
-    getUiFormatted() {
-        const rgb = this.getRgb();
-        const hex = this.getHex();
-        const hsl = this.getHsl();
-        return formatColor(this.format, rgb, hex, hsl, this.a);
-    }
-    getOutward() {
-        const onChangeFormat = this.getAttribute('on-change-format') === 'ui' ? 'ui' : 'hex';
-        return onChangeFormat === 'hex' ? this.getHex() : this.getUiFormatted();
-    }
-    syncFromValueAttr(initial) {
-        const raw = this.getAttribute('value')
-            ?? (initial ? this.getAttribute('default-value') : null)
-            ?? (initial ? DEFAULT_COLOR : null);
-        if (raw == null)
-            return;
-        const norm = normalizeHex(raw);
-        if (!isHex(norm))
-            return;
-        if (!initial && this.suppressNextValueSync && norm === this.lastEmittedHex) {
-            this.suppressNextValueSync = false;
-            return;
-        }
-        const rgb = hexToRgb(norm);
-        if (!rgb)
-            return;
-        const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
-        this.h = hsv.h;
-        this.s = hsv.s;
-        this.v = hsv.v;
-        this.colorInput = norm;
-        this.lastEmittedHex = norm;
-    }
-    actuallyEmit() {
-        const currentHex = normalizeHex(this.getHex());
-        const parentHex = this.hasAttribute('value') && isHex(this.getAttribute('value') || '')
-            ? normalizeHex(this.getAttribute('value') || '')
-            : null;
-        if (parentHex && parentHex === currentHex)
-            return;
-        if (this.lastEmittedHex === currentHex)
-            return;
-        this.lastEmittedHex = currentHex;
-        this.suppressNextValueSync = true;
-        this.setAttribute('value', currentHex);
-        this.dispatchEvent(new CustomEvent('db-change', {
-            detail: { value: this.getOutward() },
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    scheduleEmit() {
-        const emitDuringDrag = this.getBool('emit-during-drag', true);
-        if (this.dragging && !emitDuringDrag)
-            return;
-        const debounceMs = Number(this.getAttribute('change-debounce-ms') || '0');
-        if (debounceMs > 0) {
-            if (this.debounceTimer)
-                clearTimeout(this.debounceTimer);
-            this.debounceTimer = setTimeout(() => this.actuallyEmit(), debounceMs);
-            return;
-        }
-        this.actuallyEmit();
-    }
-    onColorStateChanged(fromDragEnd = false) {
-        if (!this.didMount) {
-            this.didMount = true;
-            return;
-        }
-        if (fromDragEnd && !this.getBool('emit-during-drag', true)) {
-            this.scheduleEmit();
-            return;
-        }
-        this.scheduleEmit();
-    }
-    updateFromArea(clientX, clientY) {
-        const el = this.colorFieldEl;
-        if (!el)
-            return;
-        const rect = el.getBoundingClientRect();
-        const x = clamp(clientX - rect.left, 0, rect.width);
-        const y = clamp(clientY - rect.top, 0, rect.height);
-        this.s = (x / rect.width) * 100;
-        this.v = 100 - (y / rect.height) * 100;
-        this.updateVisuals();
-        this.onColorStateChanged();
-    }
-    getInputValue(el) {
-        if (!el)
-            return '';
-        return el.getAttribute('value') ?? '';
-    }
-    setInputValue(el, value) {
-        if (!el || value === undefined)
-            return;
-        el.setAttribute('value', value);
-    }
-    getPanelControlSize() {
-        const size = this.getOption('size', SIZES, 'm');
-        return size === 's' ? 's' : 'm';
-    }
-    commitColorInput(source) {
-        const str = (source === 'trigger'
-            ? this.triggerInputEl?.value
-            : this.getInputValue(this.panelValueInputEl)
-                ?? '').trim();
-        if (/^#([0-9A-Fa-f]{6})$/.test(str)) {
-            const rgb = hexToRgb(str);
-            const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
-            this.h = hsv.h;
-            this.s = hsv.s;
-            this.v = hsv.v;
-            this.colorInput = normalizeHex(str);
-            this.updateVisuals();
-            this.onColorStateChanged();
-            return;
-        }
-        let m = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/i.exec(str);
-        if (m) {
-            const r = clamp(parseInt(m[1], 10), 0, 255);
-            const g = clamp(parseInt(m[2], 10), 0, 255);
-            const b = clamp(parseInt(m[3], 10), 0, 255);
-            const hsv = rgbToHsv(r, g, b);
-            this.h = hsv.h;
-            this.s = hsv.s;
-            this.v = hsv.v;
-            this.colorInput = `rgb(${r}, ${g}, ${b})`;
-            this.updateVisuals();
-            this.onColorStateChanged();
-            return;
-        }
-        m = /^rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(0|1|0?\.\d+)\s*\)$/i.exec(str);
-        if (m) {
-            const r = clamp(parseInt(m[1], 10), 0, 255);
-            const g = clamp(parseInt(m[2], 10), 0, 255);
-            const b = clamp(parseInt(m[3], 10), 0, 255);
-            const alpha = parseFloat(m[4]);
-            const hsv = rgbToHsv(r, g, b);
-            this.h = hsv.h;
-            this.s = hsv.s;
-            this.v = hsv.v;
-            this.a = Math.round(alpha * 100);
-            this.alphaInput = String(this.a);
-            this.colorInput = `rgba(${r}, ${g}, ${b}, ${alpha})`;
-            this.updateVisuals();
-            this.onColorStateChanged();
-        }
-    }
-    commitAlphaInput() {
-        const n = Number(this.getInputValue(this.panelAlphaInputEl).trim() || this.alphaInput);
-        if (!Number.isNaN(n) && n >= 0 && n <= 100) {
-            const rounded = Math.round(n);
-            this.a = rounded;
-            this.alphaInput = String(rounded);
-            this.updateVisuals();
-            this.onColorStateChanged();
-        }
-        else {
-            this.alphaInput = String(this.a);
-            if (this.panelAlphaInputEl)
-                this.setInputValue(this.panelAlphaInputEl, this.alphaInput);
-        }
-    }
-    async onCopy() {
-        try {
-            await navigator.clipboard.writeText(this.getUiFormatted());
-            this.isCopied = true;
-            this.updateCopyButtons();
-            if (this.copiedTimer)
-                clearTimeout(this.copiedTimer);
-            this.copiedTimer = setTimeout(() => {
-                this.isCopied = false;
-                this.updateCopyButtons();
-            }, 1600);
-        }
-        catch {
-            // noop
-        }
-    }
-    async onEyedrop() {
-        try {
-            if ('EyeDropper' in window) {
-                const eye = new window.EyeDropper();
-                const { sRGBHex } = await eye.open();
-                const rgb = hexToRgb(sRGBHex);
-                if (!rgb)
-                    return;
-                const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
-                this.h = hsv.h;
-                this.s = hsv.s;
-                this.v = hsv.v;
-                this.updateVisuals();
-                this.onColorStateChanged();
-            }
-        }
-        catch {
-            // noop
-        }
-    }
-    toggleOpen() {
-        if (this.getBool('disabled') || this.getBool('readonly'))
-            return;
-        const type = this.getOption('type', TYPES, 'dropdown');
-        if (type === 'modal') {
-            this.tempColor = this.getHex();
-            this.open = true;
-            this.update();
-            return;
-        }
-        this.open = !this.open;
-        this.update();
-    }
-    mount() {
-        this.mounted = true;
-        const iconSize = this.getIconSize();
-        this.triggerEl = document.createElement('div');
-        this.triggerEl.className = 'designbase-wc-color-picker__trigger';
-        this.triggerEl.addEventListener('click', () => this.toggleOpen());
-        const colorDisplay = document.createElement('div');
-        colorDisplay.className = 'designbase-wc-color-picker__color-display';
-        this.colorBoxEl = document.createElement('div');
-        this.colorBoxEl.className = 'designbase-wc-color-picker__color-box';
-        colorDisplay.append(this.colorBoxEl);
-        this.triggerInputEl = document.createElement('input');
-        this.triggerInputEl.type = 'text';
-        this.triggerInputEl.className = 'designbase-wc-color-picker__input';
-        this.triggerInputEl.placeholder = '#000000';
-        this.triggerInputEl.addEventListener('click', (e) => e.stopPropagation());
-        this.triggerInputEl.addEventListener('focus', () => {
-            this.triggerInputFocused = true;
-        });
-        this.triggerInputEl.addEventListener('blur', () => {
-            this.triggerInputFocused = false;
-            const next = this.format === 'hex' ? normalizeHex(this.getUiFormatted()) : this.getUiFormatted();
-            if (this.triggerInputEl && this.triggerInputEl.value !== next) {
-                this.triggerInputEl.value = next;
-                this.colorInput = next;
-            }
-        });
-        this.triggerInputEl.addEventListener('input', () => {
-            if (this.triggerInputEl)
-                this.colorInput = this.triggerInputEl.value;
-        });
-        this.triggerInputEl.addEventListener('keydown', (e) => {
-            if (e.key === 'Enter')
-                this.commitColorInput('trigger');
-        });
-        const actions = document.createElement('div');
-        actions.className = 'designbase-wc-color-picker__trigger-actions';
-        this.triggerCopyBtn = document.createElement('button');
-        this.triggerCopyBtn.type = 'button';
-        this.triggerCopyBtn.className = 'designbase-wc-color-picker__copy-button-inline';
-        this.triggerCopyBtn.setAttribute('aria-label', 'Copy color value');
-        this.triggerCopyBtn.addEventListener('click', (e) => {
-            e.stopPropagation();
-            void this.onCopy();
-        });
-        this.toggleBtn = document.createElement('button');
-        this.toggleBtn.type = 'button';
-        this.toggleBtn.className = 'designbase-wc-color-picker__toggle';
-        this.toggleBtn.setAttribute('aria-label', 'Toggle color picker');
-        this.toggleBtn.append(createDbIcon('chevron-down', iconSize));
-        actions.append(this.triggerCopyBtn, this.toggleBtn);
-        this.triggerEl.append(colorDisplay, this.triggerInputEl, actions);
-        this.dropdownEl = document.createElement('div');
-        this.dropdownEl.className = 'designbase-wc-color-picker__dropdown';
-        this.dropdownEl.addEventListener('click', (e) => e.stopPropagation());
-        this.dropdownEl.hidden = true;
-        const selector = document.createElement('div');
-        selector.className = 'designbase-wc-color-picker__selector';
-        const colorArea = document.createElement('div');
-        colorArea.className = 'designbase-wc-color-picker__color-area';
-        this.colorFieldEl = document.createElement('div');
-        this.colorFieldEl.className = 'designbase-wc-color-picker__color-field';
-        this.colorPointerEl = document.createElement('div');
-        this.colorPointerEl.className = 'designbase-wc-color-picker__color-pointer';
-        this.colorFieldEl.append(this.colorPointerEl);
-        this.colorFieldEl.addEventListener('mousedown', (e) => {
-            if (this.getBool('disabled') || this.getBool('readonly'))
-                return;
-            e.preventDefault();
-            this.dragging = 'area';
-            this.updateFromArea(e.clientX, e.clientY);
-        });
-        this.colorFieldEl.addEventListener('touchstart', (e) => {
-            if (this.getBool('disabled') || this.getBool('readonly'))
-                return;
-            this.dragging = 'area';
-            const t = e.touches[0];
-            this.updateFromArea(t.clientX, t.clientY);
-        }, { passive: true });
-        this.colorFieldEl.addEventListener('touchmove', (e) => {
-            if (this.dragging !== 'area')
-                return;
-            const t = e.touches[0];
-            this.updateFromArea(t.clientX, t.clientY);
-        }, { passive: true });
-        this.colorFieldEl.addEventListener('touchend', () => {
-            if (this.dragging !== 'area')
-                return;
-            this.dragging = null;
-            this.onColorStateChanged(true);
-        });
-        colorArea.append(this.colorFieldEl);
-        const controls = document.createElement('div');
-        controls.className = 'designbase-wc-color-picker__controls';
-        this.eyedropperBtnEl = document.createElement('db-button');
-        this.eyedropperBtnEl.setAttribute('variant', 'tertiary');
-        this.eyedropperBtnEl.setAttribute('size', this.getPanelControlSize());
-        this.eyedropperBtnEl.setAttribute('icon-only', '');
-        this.eyedropperBtnEl.setAttribute('start-icon', 'eyedropper');
-        this.eyedropperBtnEl.setAttribute('aria-label', 'Eyedropper tool');
-        this.eyedropperBtnEl.addEventListener('click', () => void this.onEyedrop());
-        const sliderContainer = document.createElement('div');
-        sliderContainer.className = 'designbase-wc-color-picker__slider-container';
-        const hueWrap = document.createElement('div');
-        hueWrap.className = 'designbase-wc-color-picker__hue-slider';
-        this.hueSliderEl = document.createElement('input');
-        this.hueSliderEl.type = 'range';
-        this.hueSliderEl.min = '0';
-        this.hueSliderEl.max = '360';
-        this.hueSliderEl.className = 'designbase-wc-color-picker__slider designbase-wc-color-picker__slider--hue';
-        this.hueSliderEl.addEventListener('input', () => {
-            this.h = parseFloat(this.hueSliderEl.value);
-            this.updateVisuals();
-            this.onColorStateChanged();
-        });
-        hueWrap.append(this.hueSliderEl);
-        this.alphaSliderWrapEl = document.createElement('div');
-        this.alphaSliderWrapEl.className = 'designbase-wc-color-picker__alpha-slider';
-        this.alphaSliderEl = document.createElement('input');
-        this.alphaSliderEl.type = 'range';
-        this.alphaSliderEl.min = '0';
-        this.alphaSliderEl.max = '100';
-        this.alphaSliderEl.className = 'designbase-wc-color-picker__slider designbase-wc-color-picker__slider--alpha';
-        this.alphaSliderEl.addEventListener('input', () => {
-            this.a = clamp(parseInt(this.alphaSliderEl.value, 10), 0, 100);
-            this.alphaInput = String(this.a);
-            if (this.panelAlphaInputEl)
-                this.setInputValue(this.panelAlphaInputEl, this.alphaInput);
-            this.updateVisuals();
-            this.onColorStateChanged();
-        });
-        this.alphaSliderWrapEl.append(this.alphaSliderEl);
-        sliderContainer.append(hueWrap, this.alphaSliderWrapEl);
-        controls.append(this.eyedropperBtnEl, sliderContainer);
-        const valueDisplay = document.createElement('div');
-        valueDisplay.className = 'designbase-wc-color-picker__value-display';
-        this.formatSelectEl = document.createElement('db-select');
-        this.formatSelectEl.setAttribute('size', 's');
-        this.formatSelectEl.setAttribute('position', 'top');
-        this.formatSelectEl.setAttribute('show-clear-button', 'false');
-        this.formatSelectEl.setAttribute('options', FORMAT_OPTIONS);
-        this.formatSelectEl.addEventListener('db-change', (e) => {
-            const detail = e.detail;
-            const next = detail?.value;
-            if (next) {
-                this.format = next;
-                this.updateVisuals();
-            }
-        });
-        this.panelValueInputEl = document.createElement('db-input');
-        this.panelValueInputEl.classList.add('designbase-wc-color-picker__value-input');
-        this.panelValueInputEl.setAttribute('size', 's');
-        this.panelValueInputEl.setAttribute('placeholder', '#000000');
-        this.panelValueInputEl.addEventListener('db-focus', () => {
-            this.panelInputFocused = true;
-        });
-        this.panelValueInputEl.addEventListener('db-blur', () => {
-            this.panelInputFocused = false;
-            const next = this.format === 'hex' ? normalizeHex(this.getUiFormatted()) : this.getUiFormatted();
-            if (this.getInputValue(this.panelValueInputEl) !== next) {
-                this.setInputValue(this.panelValueInputEl, next);
-                this.colorInput = next;
-            }
-        });
-        this.panelValueInputEl.addEventListener('db-input', (e) => {
-            const detail = e.detail;
-            if (detail?.value !== undefined)
-                this.colorInput = detail.value;
-        });
-        this.panelValueInputEl.addEventListener('keydown', (e) => {
-            if (e.key === 'Enter')
-                this.commitColorInput('panel');
-        });
-        this.panelAlphaWrapEl = document.createElement('div');
-        this.panelAlphaWrapEl.className = 'designbase-wc-color-picker__alpha-input-wrap';
-        this.panelAlphaInputEl = document.createElement('db-input');
-        this.panelAlphaInputEl.classList.add('designbase-wc-color-picker__alpha-input');
-        this.panelAlphaInputEl.setAttribute('size', 's');
-        this.panelAlphaInputEl.setAttribute('placeholder', '100');
-        this.panelAlphaInputEl.setAttribute('aria-label', 'Alpha percent');
-        this.panelAlphaInputEl.addEventListener('db-focus', () => {
-            this.panelAlphaInputFocused = true;
-        });
-        this.panelAlphaInputEl.addEventListener('db-blur', () => {
-            this.panelAlphaInputFocused = false;
-            this.commitAlphaInput();
-        });
-        this.panelAlphaInputEl.addEventListener('db-input', (e) => {
-            const detail = e.detail;
-            const cleaned = (detail?.value ?? '').replace(/[^\d]/g, '').slice(0, 3);
-            if (cleaned !== detail?.value) {
-                this.setInputValue(this.panelAlphaInputEl, cleaned);
-            }
-            this.alphaInput = cleaned;
-        });
-        this.panelAlphaInputEl.addEventListener('keydown', (e) => {
-            if (e.key === 'Enter')
-                this.commitAlphaInput();
-        });
-        const alphaSuffix = document.createElement('span');
-        alphaSuffix.className = 'designbase-wc-color-picker__alpha-suffix';
-        alphaSuffix.textContent = '%';
-        this.panelAlphaWrapEl.append(this.panelAlphaInputEl, alphaSuffix);
-        this.panelCopyBtnEl = document.createElement('db-button');
-        this.panelCopyBtnEl.setAttribute('variant', 'tertiary');
-        this.panelCopyBtnEl.setAttribute('size', 's');
-        this.panelCopyBtnEl.setAttribute('icon-only', '');
-        this.panelCopyBtnEl.setAttribute('start-icon', 'copy');
-        this.panelCopyBtnEl.setAttribute('aria-label', 'Copy color value');
-        this.panelCopyBtnEl.addEventListener('click', () => void this.onCopy());
-        valueDisplay.append(this.formatSelectEl, this.panelValueInputEl, this.panelAlphaWrapEl, this.panelCopyBtnEl);
-        selector.append(colorArea, controls, valueDisplay);
-        this.selectorEl = selector;
-        this.dropdownEl.append(selector);
-        this.modalEl = document.createElement('db-modal');
-        this.modalEl.setAttribute('size', 's');
-        this.modalEl.setAttribute('title', '색상 선택');
-        this.modalEl.setAttribute('close-on-escape', 'true');
-        this.modalEl.addEventListener('db-close', this.handleModalCancel);
-        this.modalBodyEl = document.createElement('div');
-        this.modalBodyEl.setAttribute('data-modal-part', 'body');
-        const modalFooter = document.createElement('div');
-        modalFooter.setAttribute('data-modal-part', 'footer');
-        modalFooter.style.display = 'flex';
-        modalFooter.style.gap = '8px';
-        modalFooter.style.justifyContent = 'flex-end';
-        const cancelBtn = document.createElement('db-button');
-        cancelBtn.setAttribute('variant', 'tertiary');
-        cancelBtn.setAttribute('size', 'm');
-        cancelBtn.textContent = '취소';
-        cancelBtn.addEventListener('click', this.handleModalCancel);
-        const applyBtn = document.createElement('db-button');
-        applyBtn.setAttribute('variant', 'primary');
-        applyBtn.setAttribute('size', 'm');
-        applyBtn.textContent = '적용';
-        applyBtn.addEventListener('click', this.handleModalApply);
-        modalFooter.append(cancelBtn, applyBtn);
-        this.modalEl.append(this.modalBodyEl, modalFooter);
-        this.replaceChildren(this.triggerEl, this.dropdownEl, this.modalEl);
-    }
-    updateCopyButtons() {
-        const iconSize = this.getIconSize();
-        const icon = this.isCopied ? 'done' : 'copy';
-        if (this.triggerCopyBtn) {
-            this.triggerCopyBtn.replaceChildren(createDbIcon(icon, iconSize));
-        }
-        if (this.panelCopyBtnEl) {
-            this.panelCopyBtnEl.setAttribute('start-icon', icon);
-        }
-    }
-    updateVisuals() {
-        const rgb = this.getRgb();
-        const hex = this.getHex();
-        const showAlpha = this.getBool('show-alpha', true);
-        const uiFormatted = this.getUiFormatted();
-        const displayValue = this.format === 'hex' ? normalizeHex(uiFormatted) : uiFormatted;
-        if (!this.triggerInputFocused && this.triggerInputEl) {
-            this.triggerInputEl.value = displayValue;
-        }
-        if (!this.panelInputFocused && this.panelValueInputEl) {
-            this.setInputValue(this.panelValueInputEl, displayValue);
-        }
-        if (this.colorBoxEl) {
-            this.colorBoxEl.style.backgroundColor = showAlpha
-                ? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${this.a / 100})`
-                : hex;
-        }
-        if (this.colorFieldEl) {
-            this.colorFieldEl.style.backgroundImage = `
-                linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0)),
-                linear-gradient(to right, #ffffff, hsl(${this.h}, 100%, 50%))
-            `;
-        }
-        if (this.colorPointerEl) {
-            this.colorPointerEl.style.left = `${this.s}%`;
-            this.colorPointerEl.style.top = `${100 - this.v}%`;
-            this.colorPointerEl.style.backgroundColor = `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
-        }
-        if (this.hueSliderEl) {
-            this.hueSliderEl.value = String(this.h);
-            this.hueSliderEl.style.background = `linear-gradient(to right,
-                hsl(0,100%,50%),
-                hsl(60,100%,50%),
-                hsl(120,100%,50%),
-                hsl(180,100%,50%),
-                hsl(240,100%,50%),
-                hsl(300,100%,50%),
-                hsl(360,100%,50%))`;
-        }
-        if (this.alphaSliderEl) {
-            this.alphaSliderEl.value = String(this.a);
-            this.alphaSliderEl.style.backgroundImage = `
-                linear-gradient(45deg, var(--db-border-base) 25%, transparent 25%),
-                linear-gradient(-45deg, var(--db-border-base) 25%, transparent 25%),
-                linear-gradient(45deg, transparent 75%, var(--db-border-base) 75%),
-                linear-gradient(-45deg, transparent 75%, var(--db-border-base) 75%),
-                linear-gradient(to right, rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0), rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 1))
-            `;
-            this.alphaSliderEl.style.backgroundSize = '8px 8px,8px 8px,8px 8px,8px 8px,100% 100%';
-            this.alphaSliderEl.style.backgroundPosition = '0 0,0 4px,4px -4px,-4px 0,0 0';
-            this.alphaSliderEl.style.backgroundColor = 'var(--db-surface-base)';
-        }
-        if (this.panelAlphaInputEl && !this.panelAlphaInputFocused) {
-            this.setInputValue(this.panelAlphaInputEl, this.alphaInput);
-        }
-        if (this.formatSelectEl && this.formatSelectEl.getAttribute('value') !== this.format) {
-            this.formatSelectEl.setAttribute('value', this.format);
-        }
-        this.colorInput = displayValue;
-    }
-    update() {
-        if (!this.mounted)
-            return;
-        const size = this.getOption('size', SIZES, 'm');
-        const type = this.getOption('type', TYPES, 'dropdown');
-        const position = this.getOption('position', POSITIONS, 'bottom-start');
-        const disabled = this.getBool('disabled');
-        const readonly = this.getBool('readonly');
-        const showInput = this.getBool('show-input', true);
-        const showAlpha = this.getBool('show-alpha', true);
-        const showFormatSelector = this.getBool('show-format-selector', true);
-        const showCopyButton = this.getBool('show-copy-button', true);
-        const showEyedropper = this.getBool('show-eyedropper', true);
-        const eyedropperAvailable = typeof window !== 'undefined' && 'EyeDropper' in window;
-        this.className = [
-            'designbase-wc-color-picker',
-            `designbase-wc-color-picker--${size}`,
-            `designbase-wc-color-picker--${position}`,
-            this.open && type === 'dropdown' && 'designbase-wc-color-picker--open',
-            this.getBool('full-width') && 'designbase-wc-color-picker--full-width',
-            this.getBool('error') && 'designbase-wc-color-picker--error',
-            disabled && 'designbase-wc-color-picker--disabled',
-            readonly && 'designbase-wc-color-picker--readonly',
-            !showInput && 'designbase-wc-color-picker--no-input',
-        ]
-            .filter(Boolean)
-            .join(' ');
-        if (this.triggerInputEl) {
-            this.triggerInputEl.hidden = !showInput;
-            this.triggerInputEl.disabled = disabled;
-            this.triggerInputEl.readOnly = readonly;
-        }
-        if (this.triggerCopyBtn) {
-            this.triggerCopyBtn.hidden = !(showInput && showCopyButton);
-            this.triggerCopyBtn.disabled = disabled;
-        }
-        if (this.toggleBtn)
-            this.toggleBtn.disabled = disabled;
-        if (this.dropdownEl) {
-            this.dropdownEl.className = `designbase-wc-color-picker__dropdown designbase-wc-color-picker__dropdown--${position}`;
-            this.dropdownEl.hidden = !(type === 'dropdown' && this.open);
-        }
-        if (this.alphaSliderWrapEl)
-            this.alphaSliderWrapEl.hidden = !showAlpha;
-        if (this.panelAlphaWrapEl)
-            this.panelAlphaWrapEl.hidden = !showAlpha;
-        if (this.formatSelectEl)
-            this.formatSelectEl.hidden = !showFormatSelector;
-        if (this.panelCopyBtnEl)
-            this.panelCopyBtnEl.hidden = !showCopyButton;
-        if (this.eyedropperBtnEl)
-            this.eyedropperBtnEl.hidden = !(showEyedropper && eyedropperAvailable);
-        if (this.selectorEl) {
-            const host = type === 'modal' ? this.modalBodyEl : this.dropdownEl;
-            if (host && this.selectorEl.parentElement !== host) {
-                host.append(this.selectorEl);
-            }
-        }
-        if (this.modalEl) {
-            if (type === 'modal' && this.open)
-                this.modalEl.setAttribute('open', 'true');
-            else
-                this.modalEl.removeAttribute('open');
-        }
-        this.updateCopyButtons();
-        this.updateVisuals();
-    }
-}
-if (!customElements.get('db-color-picker'))
-    customElements.define('db-color-picker', DbColorPicker);
-
-export { DbColorPicker };
+import{hexToRgb as t,rgbToHsv as e,hsvToRgb as i,toHex as s,rgbToHsl as l,formatColor as n,normalizeHex as o,isHex as a,clamp as r}from"./color-picker-utils.js";import{getDbComponentIconSize as h,createDbIcon as d}from"./db-icons.js";const p=["s","m","l"],u=["dropdown","modal"],c=["bottom-start","bottom-end","top-start","top-end"],g="#006FFF",E=t(g)??{r:0,g:111,b:255},m=e(E.r,E.g,E.b),b=JSON.stringify([{label:"HEX",value:"hex"},{label:"RGB",value:"rgb"},{label:"RGBA",value:"rgba"},{label:"HSL",value:"hsl"},{label:"HSLA",value:"hsla"}]);class DbColorPicker extends HTMLElement{constructor(){super(...arguments),this.h=m.h,this.s=m.s,this.v=m.v,this.a=100,this.open=!1,this.format="hex",this.colorInput=g,this.alphaInput="100",this.isCopied=!1,this.tempColor="",this.dragging=null,this.mounted=!1,this.copiedTimer=null,this.debounceTimer=null,this.lastEmittedHex="",this.suppressNextValueSync=!1,this.didMount=!1,this.triggerInputFocused=!1,this.panelInputFocused=!1,this.panelAlphaInputFocused=!1,this.handleOutsideClick=t=>{if(!this.open||"dropdown"!==this.getOption("type",u,"dropdown"))return;const e=t.target;this.contains(e)||this.formatSelectEl?.contains(e)||(this.open=!1,this.update())},this.handleDocumentMouseMove=t=>{"area"===this.dragging&&(this.getBool("disabled")||this.getBool("readonly")||this.updateFromArea(t.clientX,t.clientY))},this.handleDocumentMouseUp=()=>{"area"===this.dragging&&(this.dragging=null,this.onColorStateChanged(!0))},this.handleModalCancel=()=>{const i=t(this.tempColor);if(i){const t=e(i.r,i.g,i.b);this.h=t.h,this.s=t.s,this.v=t.v}this.open=!1,this.update(),this.dispatchEvent(new CustomEvent("db-cancel",{bubbles:!0,composed:!0}))},this.handleModalApply=()=>{this.open=!1,this.actuallyEmit(),this.dispatchEvent(new CustomEvent("db-apply",{detail:{value:this.getOutward()},bubbles:!0,composed:!0})),this.update()}}static get observedAttributes(){return["size","type","position","value","default-value","show-input","show-alpha","show-format-selector","show-copy-button","show-eyedropper","disabled","readonly","full-width","error","on-change-format","change-debounce-ms","emit-during-drag"]}connectedCallback(){this.mounted||this.mount(),this.syncFromValueAttr(!0),this.update(),document.addEventListener("mousedown",this.handleOutsideClick),document.addEventListener("mousemove",this.handleDocumentMouseMove),document.addEventListener("mouseup",this.handleDocumentMouseUp)}disconnectedCallback(){document.removeEventListener("mousedown",this.handleOutsideClick),document.removeEventListener("mousemove",this.handleDocumentMouseMove),document.removeEventListener("mouseup",this.handleDocumentMouseUp),this.copiedTimer&&clearTimeout(this.copiedTimer),this.debounceTimer&&clearTimeout(this.debounceTimer)}attributeChangedCallback(t){this.mounted&&("value"!==t&&"default-value"!==t||this.syncFromValueAttr(!1),this.update())}getBool(t,e=!1){if(!this.hasAttribute(t))return e;const i=this.getAttribute(t);return""===i||"true"===i}getOption(t,e,i){const s=this.getAttribute(t);return s&&e.includes(s)?s:i}getIconSize(){return h(this.getOption("size",p,"m"))}getRgb(){return i(this.h,this.s,this.v)}getHex(){const t=this.getRgb();return s(t.r,t.g,t.b)}getHsl(){const t=this.getRgb();return l(t.r,t.g,t.b)}getUiFormatted(){const t=this.getRgb(),e=this.getHex(),i=this.getHsl();return n(this.format,t,e,i,this.a)}getOutward(){return"hex"===("ui"===this.getAttribute("on-change-format")?"ui":"hex")?this.getHex():this.getUiFormatted()}syncFromValueAttr(i){const s=this.getAttribute("value")??(i?this.getAttribute("default-value"):null)??(i?g:null);if(null==s)return;const l=o(s);if(!a(l))return;if(!i&&this.suppressNextValueSync&&l===this.lastEmittedHex)return void(this.suppressNextValueSync=!1);const n=t(l);if(!n)return;const r=e(n.r,n.g,n.b);this.h=r.h,this.s=r.s,this.v=r.v,this.colorInput=l,this.lastEmittedHex=l}actuallyEmit(){const t=o(this.getHex()),e=this.hasAttribute("value")&&a(this.getAttribute("value")||"")?o(this.getAttribute("value")||""):null;e&&e===t||this.lastEmittedHex!==t&&(this.lastEmittedHex=t,this.suppressNextValueSync=!0,this.setAttribute("value",t),this.dispatchEvent(new CustomEvent("db-change",{detail:{value:this.getOutward()},bubbles:!0,composed:!0})))}scheduleEmit(){const t=this.getBool("emit-during-drag",!0);if(this.dragging&&!t)return;const e=Number(this.getAttribute("change-debounce-ms")||"0");if(e>0)return this.debounceTimer&&clearTimeout(this.debounceTimer),void(this.debounceTimer=setTimeout(()=>this.actuallyEmit(),e));this.actuallyEmit()}onColorStateChanged(t=!1){this.didMount?(!t||this.getBool("emit-during-drag",!0),this.scheduleEmit()):this.didMount=!0}updateFromArea(t,e){const i=this.colorFieldEl;if(!i)return;const s=i.getBoundingClientRect(),l=r(t-s.left,0,s.width),n=r(e-s.top,0,s.height);this.s=l/s.width*100,this.v=100-n/s.height*100,this.updateVisuals(),this.onColorStateChanged()}getInputValue(t){return t?t.getAttribute("value")??"":""}setInputValue(t,e){t&&void 0!==e&&t.setAttribute("value",e)}getPanelControlSize(){return"s"===this.getOption("size",p,"m")?"s":"m"}commitColorInput(i){const s=("trigger"===i?this.triggerInputEl?.value:this.getInputValue(this.panelValueInputEl)??"").trim();if(/^#([0-9A-Fa-f]{6})$/.test(s)){const i=t(s),l=e(i.r,i.g,i.b);return this.h=l.h,this.s=l.s,this.v=l.v,this.colorInput=o(s),this.updateVisuals(),void this.onColorStateChanged()}let l=/^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/i.exec(s);if(l){const t=r(parseInt(l[1],10),0,255),i=r(parseInt(l[2],10),0,255),s=r(parseInt(l[3],10),0,255),n=e(t,i,s);return this.h=n.h,this.s=n.s,this.v=n.v,this.colorInput=`rgb(${t}, ${i}, ${s})`,this.updateVisuals(),void this.onColorStateChanged()}if(l=/^rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(0|1|0?\.\d+)\s*\)$/i.exec(s),l){const t=r(parseInt(l[1],10),0,255),i=r(parseInt(l[2],10),0,255),s=r(parseInt(l[3],10),0,255),n=parseFloat(l[4]),o=e(t,i,s);this.h=o.h,this.s=o.s,this.v=o.v,this.a=Math.round(100*n),this.alphaInput=String(this.a),this.colorInput=`rgba(${t}, ${i}, ${s}, ${n})`,this.updateVisuals(),this.onColorStateChanged()}}commitAlphaInput(){const t=Number(this.getInputValue(this.panelAlphaInputEl).trim()||this.alphaInput);if(!Number.isNaN(t)&&t>=0&&t<=100){const e=Math.round(t);this.a=e,this.alphaInput=String(e),this.updateVisuals(),this.onColorStateChanged()}else this.alphaInput=String(this.a),this.panelAlphaInputEl&&this.setInputValue(this.panelAlphaInputEl,this.alphaInput)}async onCopy(){try{await navigator.clipboard.writeText(this.getUiFormatted()),this.isCopied=!0,this.updateCopyButtons(),this.copiedTimer&&clearTimeout(this.copiedTimer),this.copiedTimer=setTimeout(()=>{this.isCopied=!1,this.updateCopyButtons()},1600)}catch{}}async onEyedrop(){try{if("EyeDropper"in window){const i=new window.EyeDropper,{sRGBHex:s}=await i.open(),l=t(s);if(!l)return;const n=e(l.r,l.g,l.b);this.h=n.h,this.s=n.s,this.v=n.v,this.updateVisuals(),this.onColorStateChanged()}}catch{}}toggleOpen(){if(this.getBool("disabled")||this.getBool("readonly"))return;if("modal"===this.getOption("type",u,"dropdown"))return this.tempColor=this.getHex(),this.open=!0,void this.update();this.open=!this.open,this.update()}mount(){this.mounted=!0;const t=this.getIconSize();this.triggerEl=document.createElement("div"),this.triggerEl.className="designbase-wc-color-picker__trigger",this.triggerEl.addEventListener("click",()=>this.toggleOpen());const e=document.createElement("div");e.className="designbase-wc-color-picker__color-display",this.colorBoxEl=document.createElement("div"),this.colorBoxEl.className="designbase-wc-color-picker__color-box",e.append(this.colorBoxEl),this.triggerInputEl=document.createElement("input"),this.triggerInputEl.type="text",this.triggerInputEl.className="designbase-wc-color-picker__input",this.triggerInputEl.placeholder="#000000",this.triggerInputEl.addEventListener("click",t=>t.stopPropagation()),this.triggerInputEl.addEventListener("focus",()=>{this.triggerInputFocused=!0}),this.triggerInputEl.addEventListener("blur",()=>{this.triggerInputFocused=!1;const t="hex"===this.format?o(this.getUiFormatted()):this.getUiFormatted();this.triggerInputEl&&this.triggerInputEl.value!==t&&(this.triggerInputEl.value=t,this.colorInput=t)}),this.triggerInputEl.addEventListener("input",()=>{this.triggerInputEl&&(this.colorInput=this.triggerInputEl.value)}),this.triggerInputEl.addEventListener("keydown",t=>{"Enter"===t.key&&this.commitColorInput("trigger")});const i=document.createElement("div");i.className="designbase-wc-color-picker__trigger-actions",this.triggerCopyBtn=document.createElement("button"),this.triggerCopyBtn.type="button",this.triggerCopyBtn.className="designbase-wc-color-picker__copy-button-inline",this.triggerCopyBtn.setAttribute("aria-label","Copy color value"),this.triggerCopyBtn.addEventListener("click",t=>{t.stopPropagation(),this.onCopy()}),this.toggleBtn=document.createElement("button"),this.toggleBtn.type="button",this.toggleBtn.className="designbase-wc-color-picker__toggle",this.toggleBtn.setAttribute("aria-label","Toggle color picker"),this.toggleBtn.append(d("chevron-down",t)),i.append(this.triggerCopyBtn,this.toggleBtn),this.triggerEl.append(e,this.triggerInputEl,i),this.dropdownEl=document.createElement("div"),this.dropdownEl.className="designbase-wc-color-picker__dropdown",this.dropdownEl.addEventListener("click",t=>t.stopPropagation()),this.dropdownEl.hidden=!0;const s=document.createElement("div");s.className="designbase-wc-color-picker__selector";const l=document.createElement("div");l.className="designbase-wc-color-picker__color-area",this.colorFieldEl=document.createElement("div"),this.colorFieldEl.className="designbase-wc-color-picker__color-field",this.colorPointerEl=document.createElement("div"),this.colorPointerEl.className="designbase-wc-color-picker__color-pointer",this.colorFieldEl.append(this.colorPointerEl),this.colorFieldEl.addEventListener("mousedown",t=>{this.getBool("disabled")||this.getBool("readonly")||(t.preventDefault(),this.dragging="area",this.updateFromArea(t.clientX,t.clientY))}),this.colorFieldEl.addEventListener("touchstart",t=>{if(this.getBool("disabled")||this.getBool("readonly"))return;this.dragging="area";const e=t.touches[0];this.updateFromArea(e.clientX,e.clientY)},{passive:!0}),this.colorFieldEl.addEventListener("touchmove",t=>{if("area"!==this.dragging)return;const e=t.touches[0];this.updateFromArea(e.clientX,e.clientY)},{passive:!0}),this.colorFieldEl.addEventListener("touchend",()=>{"area"===this.dragging&&(this.dragging=null,this.onColorStateChanged(!0))}),l.append(this.colorFieldEl);const n=document.createElement("div");n.className="designbase-wc-color-picker__controls",this.eyedropperBtnEl=document.createElement("db-button"),this.eyedropperBtnEl.setAttribute("variant","tertiary"),this.eyedropperBtnEl.setAttribute("size",this.getPanelControlSize()),this.eyedropperBtnEl.setAttribute("icon-only",""),this.eyedropperBtnEl.setAttribute("start-icon","eyedropper"),this.eyedropperBtnEl.setAttribute("aria-label","Eyedropper tool"),this.eyedropperBtnEl.addEventListener("click",()=>{this.onEyedrop()});const a=document.createElement("div");a.className="designbase-wc-color-picker__slider-container";const h=document.createElement("div");h.className="designbase-wc-color-picker__hue-slider",this.hueSliderEl=document.createElement("input"),this.hueSliderEl.type="range",this.hueSliderEl.min="0",this.hueSliderEl.max="360",this.hueSliderEl.className="designbase-wc-color-picker__slider designbase-wc-color-picker__slider--hue",this.hueSliderEl.addEventListener("input",()=>{this.h=parseFloat(this.hueSliderEl.value),this.updateVisuals(),this.onColorStateChanged()}),h.append(this.hueSliderEl),this.alphaSliderWrapEl=document.createElement("div"),this.alphaSliderWrapEl.className="designbase-wc-color-picker__alpha-slider",this.alphaSliderEl=document.createElement("input"),this.alphaSliderEl.type="range",this.alphaSliderEl.min="0",this.alphaSliderEl.max="100",this.alphaSliderEl.className="designbase-wc-color-picker__slider designbase-wc-color-picker__slider--alpha",this.alphaSliderEl.addEventListener("input",()=>{this.a=r(parseInt(this.alphaSliderEl.value,10),0,100),this.alphaInput=String(this.a),this.panelAlphaInputEl&&this.setInputValue(this.panelAlphaInputEl,this.alphaInput),this.updateVisuals(),this.onColorStateChanged()}),this.alphaSliderWrapEl.append(this.alphaSliderEl),a.append(h,this.alphaSliderWrapEl),n.append(this.eyedropperBtnEl,a);const p=document.createElement("div");p.className="designbase-wc-color-picker__value-display",this.formatSelectEl=document.createElement("db-select"),this.formatSelectEl.setAttribute("size","s"),this.formatSelectEl.setAttribute("position","top"),this.formatSelectEl.setAttribute("show-clear-button","false"),this.formatSelectEl.setAttribute("options",b),this.formatSelectEl.addEventListener("db-change",t=>{const e=t.detail,i=e?.value;i&&(this.format=i,this.updateVisuals())}),this.panelValueInputEl=document.createElement("db-input"),this.panelValueInputEl.classList.add("designbase-wc-color-picker__value-input"),this.panelValueInputEl.setAttribute("size","s"),this.panelValueInputEl.setAttribute("placeholder","#000000"),this.panelValueInputEl.addEventListener("db-focus",()=>{this.panelInputFocused=!0}),this.panelValueInputEl.addEventListener("db-blur",()=>{this.panelInputFocused=!1;const t="hex"===this.format?o(this.getUiFormatted()):this.getUiFormatted();this.getInputValue(this.panelValueInputEl)!==t&&(this.setInputValue(this.panelValueInputEl,t),this.colorInput=t)}),this.panelValueInputEl.addEventListener("db-input",t=>{const e=t.detail;void 0!==e?.value&&(this.colorInput=e.value)}),this.panelValueInputEl.addEventListener("keydown",t=>{"Enter"===t.key&&this.commitColorInput("panel")}),this.panelAlphaWrapEl=document.createElement("div"),this.panelAlphaWrapEl.className="designbase-wc-color-picker__alpha-input-wrap",this.panelAlphaInputEl=document.createElement("db-input"),this.panelAlphaInputEl.classList.add("designbase-wc-color-picker__alpha-input"),this.panelAlphaInputEl.setAttribute("size","s"),this.panelAlphaInputEl.setAttribute("placeholder","100"),this.panelAlphaInputEl.setAttribute("aria-label","Alpha percent"),this.panelAlphaInputEl.addEventListener("db-focus",()=>{this.panelAlphaInputFocused=!0}),this.panelAlphaInputEl.addEventListener("db-blur",()=>{this.panelAlphaInputFocused=!1,this.commitAlphaInput()}),this.panelAlphaInputEl.addEventListener("db-input",t=>{const e=t.detail,i=(e?.value??"").replace(/[^\d]/g,"").slice(0,3);i!==e?.value&&this.setInputValue(this.panelAlphaInputEl,i),this.alphaInput=i}),this.panelAlphaInputEl.addEventListener("keydown",t=>{"Enter"===t.key&&this.commitAlphaInput()});const u=document.createElement("span");u.className="designbase-wc-color-picker__alpha-suffix",u.textContent="%",this.panelAlphaWrapEl.append(this.panelAlphaInputEl,u),this.panelCopyBtnEl=document.createElement("db-button"),this.panelCopyBtnEl.setAttribute("variant","tertiary"),this.panelCopyBtnEl.setAttribute("size","s"),this.panelCopyBtnEl.setAttribute("icon-only",""),this.panelCopyBtnEl.setAttribute("start-icon","copy"),this.panelCopyBtnEl.setAttribute("aria-label","Copy color value"),this.panelCopyBtnEl.addEventListener("click",()=>{this.onCopy()}),p.append(this.formatSelectEl,this.panelValueInputEl,this.panelAlphaWrapEl,this.panelCopyBtnEl),s.append(l,n,p),this.selectorEl=s,this.dropdownEl.append(s),this.modalEl=document.createElement("db-modal"),this.modalEl.setAttribute("size","s"),this.modalEl.setAttribute("title","색상 선택"),this.modalEl.setAttribute("close-on-escape","true"),this.modalEl.addEventListener("db-close",this.handleModalCancel),this.modalBodyEl=document.createElement("div"),this.modalBodyEl.setAttribute("data-modal-part","body");const c=document.createElement("div");c.setAttribute("data-modal-part","footer"),c.style.display="flex",c.style.gap="8px",c.style.justifyContent="flex-end";const g=document.createElement("db-button");g.setAttribute("variant","tertiary"),g.setAttribute("size","m"),g.textContent="취소",g.addEventListener("click",this.handleModalCancel);const E=document.createElement("db-button");E.setAttribute("variant","primary"),E.setAttribute("size","m"),E.textContent="적용",E.addEventListener("click",this.handleModalApply),c.append(g,E),this.modalEl.append(this.modalBodyEl,c),this.replaceChildren(this.triggerEl,this.dropdownEl,this.modalEl)}updateCopyButtons(){const t=this.getIconSize(),e=this.isCopied?"done":"copy";this.triggerCopyBtn&&this.triggerCopyBtn.replaceChildren(d(e,t)),this.panelCopyBtnEl&&this.panelCopyBtnEl.setAttribute("start-icon",e)}updateVisuals(){const t=this.getRgb(),e=this.getHex(),i=this.getBool("show-alpha",!0),s=this.getUiFormatted(),l="hex"===this.format?o(s):s;!this.triggerInputFocused&&this.triggerInputEl&&(this.triggerInputEl.value=l),!this.panelInputFocused&&this.panelValueInputEl&&this.setInputValue(this.panelValueInputEl,l),this.colorBoxEl&&(this.colorBoxEl.style.backgroundColor=i?`rgba(${t.r}, ${t.g}, ${t.b}, ${this.a/100})`:e),this.colorFieldEl&&(this.colorFieldEl.style.backgroundImage=`\n                linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0)),\n                linear-gradient(to right, #ffffff, hsl(${this.h}, 100%, 50%))\n            `),this.colorPointerEl&&(this.colorPointerEl.style.left=`${this.s}%`,this.colorPointerEl.style.top=100-this.v+"%",this.colorPointerEl.style.backgroundColor=`rgb(${t.r}, ${t.g}, ${t.b})`),this.hueSliderEl&&(this.hueSliderEl.value=String(this.h),this.hueSliderEl.style.background="linear-gradient(to right,\n                hsl(0,100%,50%),\n                hsl(60,100%,50%),\n                hsl(120,100%,50%),\n                hsl(180,100%,50%),\n                hsl(240,100%,50%),\n                hsl(300,100%,50%),\n                hsl(360,100%,50%))"),this.alphaSliderEl&&(this.alphaSliderEl.value=String(this.a),this.alphaSliderEl.style.backgroundImage=`\n                linear-gradient(45deg, var(--db-border-base) 25%, transparent 25%),\n                linear-gradient(-45deg, var(--db-border-base) 25%, transparent 25%),\n                linear-gradient(45deg, transparent 75%, var(--db-border-base) 75%),\n                linear-gradient(-45deg, transparent 75%, var(--db-border-base) 75%),\n                linear-gradient(to right, rgba(${t.r}, ${t.g}, ${t.b}, 0), rgba(${t.r}, ${t.g}, ${t.b}, 1))\n            `,this.alphaSliderEl.style.backgroundSize="8px 8px,8px 8px,8px 8px,8px 8px,100% 100%",this.alphaSliderEl.style.backgroundPosition="0 0,0 4px,4px -4px,-4px 0,0 0",this.alphaSliderEl.style.backgroundColor="var(--db-surface-base)"),this.panelAlphaInputEl&&!this.panelAlphaInputFocused&&this.setInputValue(this.panelAlphaInputEl,this.alphaInput),this.formatSelectEl&&this.formatSelectEl.getAttribute("value")!==this.format&&this.formatSelectEl.setAttribute("value",this.format),this.colorInput=l}update(){if(!this.mounted)return;const t=this.getOption("size",p,"m"),e=this.getOption("type",u,"dropdown"),i=this.getOption("position",c,"bottom-start"),s=this.getBool("disabled"),l=this.getBool("readonly"),n=this.getBool("show-input",!0),o=this.getBool("show-alpha",!0),a=this.getBool("show-format-selector",!0),r=this.getBool("show-copy-button",!0),h=this.getBool("show-eyedropper",!0),d="undefined"!=typeof window&&"EyeDropper"in window;if(this.className=["designbase-wc-color-picker",`designbase-wc-color-picker--${t}`,`designbase-wc-color-picker--${i}`,this.open&&"dropdown"===e&&"designbase-wc-color-picker--open",this.getBool("full-width")&&"designbase-wc-color-picker--full-width",this.getBool("error")&&"designbase-wc-color-picker--error",s&&"designbase-wc-color-picker--disabled",l&&"designbase-wc-color-picker--readonly",!n&&"designbase-wc-color-picker--no-input"].filter(Boolean).join(" "),this.triggerInputEl&&(this.triggerInputEl.hidden=!n,this.triggerInputEl.disabled=s,this.triggerInputEl.readOnly=l),this.triggerCopyBtn&&(this.triggerCopyBtn.hidden=!(n&&r),this.triggerCopyBtn.disabled=s),this.toggleBtn&&(this.toggleBtn.disabled=s),this.dropdownEl&&(this.dropdownEl.className=`designbase-wc-color-picker__dropdown designbase-wc-color-picker__dropdown--${i}`,this.dropdownEl.hidden=!("dropdown"===e&&this.open)),this.alphaSliderWrapEl&&(this.alphaSliderWrapEl.hidden=!o),this.panelAlphaWrapEl&&(this.panelAlphaWrapEl.hidden=!o),this.formatSelectEl&&(this.formatSelectEl.hidden=!a),this.panelCopyBtnEl&&(this.panelCopyBtnEl.hidden=!r),this.eyedropperBtnEl&&(this.eyedropperBtnEl.hidden=!(h&&d)),this.selectorEl){const t="modal"===e?this.modalBodyEl:this.dropdownEl;t&&this.selectorEl.parentElement!==t&&t.append(this.selectorEl)}this.modalEl&&("modal"===e&&this.open?this.modalEl.setAttribute("open","true"):this.modalEl.removeAttribute("open")),this.updateCopyButtons(),this.updateVisuals()}}customElements.get("db-color-picker")||customElements.define("db-color-picker",DbColorPicker);export{DbColorPicker};