@designbasekorea/ui-wc 0.5.6 → 0.6.1

package/dist/esm/components/db-animation-background.js

@@ -1,486 +1 @@
-import { parseAnimationBackgroundConfig, mountAnimationLayers, applyContainerStyles, syncLuminaOverlays, ANIMATION_BACKGROUND_CLASS as CLASS$1 } from './animation-background/layers.js';
-import { getControlsForType, resetControlsToDefaults, getControlSliderBounds, controlSliderToAttr, writeControlAttribute, readControlValue, controlAttrToSlider } from './animation-background/controls.js';
-import { isGraphitePresetId, getGraphitePreset } from './animation-background/graphite-presets.js';
-import { createDbIcon } from './db-icons.js';
-
-const CLASS = CLASS$1;
-const LIVE_UPDATE_TYPES = [
-    'particles',
-    'stars',
-    'snow',
-    'flowers',
-    'confetti',
-    'mesh-flow',
-    'fluid',
-    'radiant',
-    'ethereal',
-    'graphite',
-];
-const LUMINA_SHADER_TYPES = ['mesh-flow', 'fluid', 'radiant', 'ethereal'];
-function isRangeSlider(el) {
-    return el.tagName === 'DB-RANGE-SLIDER';
-}
-class DbAnimationBackground extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.panelOpen = false;
-        this.controlInputs = new Map();
-        this.syncingControls = false;
-    }
-    static get observedAttributes() {
-        return [
-            'type',
-            'theme',
-            'intensity',
-            'blur',
-            'speed',
-            'direction',
-            'colors',
-            'width',
-            'height',
-            'border-radius',
-            'opacity',
-            'blend-mode',
-            'particle-count',
-            'particle-size',
-            'star-count',
-            'star-size',
-            'wind',
-            'clickable',
-            'disabled',
-            'noise',
-            'show-vignette',
-            'preset',
-            'zoom',
-            'show-controls',
-            'shader-speed',
-            'shader-intensity',
-            'warp',
-        ];
-    }
-    connectedCallback() {
-        this.style.display = 'block';
-        this.render();
-    }
-    disconnectedCallback() {
-        this.teardownLayers();
-        if (this.clickHandler) {
-            this.removeEventListener('click', this.clickHandler);
-            this.clickHandler = undefined;
-        }
-    }
-    attributeChangedCallback(name, oldValue, newValue) {
-        if (!this.isConnected || oldValue === newValue)
-            return;
-        if (name === 'show-controls') {
-            this.syncControlsVisibility();
-            return;
-        }
-        if (this.syncingControls)
-            return;
-        if (name === 'type' && this.getBool('show-controls', false)) {
-            this.rebuildControlInputs();
-        }
-        this.applyConfig();
-        if (this.getBool('show-controls', false)) {
-            this.syncControlInputs();
-        }
-    }
-    getBool(name, fallback = false) {
-        if (!this.hasAttribute(name))
-            return fallback;
-        return this.getAttribute(name) !== 'false';
-    }
-    getSizeStyle(value) {
-        if (!value)
-            return undefined;
-        const num = Number(value);
-        return Number.isFinite(num) ? `${num}px` : value;
-    }
-    getConfig() {
-        return parseAnimationBackgroundConfig(this);
-    }
-    teardownLayers() {
-        this.layerHandle?.destroy?.();
-        this.layerHandle = undefined;
-        this.mountedType = undefined;
-        if (this.layersEl) {
-            this.layersEl.replaceChildren();
-        }
-    }
-    remountLayers(config) {
-        if (!this.layersEl)
-            return;
-        this.teardownLayers();
-        this.layerHandle = mountAnimationLayers(this.layersEl, config);
-        this.mountedType = config.type;
-    }
-    canLiveUpdate(config) {
-        return (this.mountedType === config.type &&
-            LIVE_UPDATE_TYPES.includes(config.type) &&
-            typeof this.layerHandle?.update === 'function');
-    }
-    applyConfig() {
-        const config = this.getConfig();
-        this.className = [
-            CLASS,
-            `${CLASS}--${config.type}`,
-            config.clickable && !config.disabled && `${CLASS}--clickable`,
-            config.disabled && `${CLASS}--disabled`,
-            this.getBool('show-controls', false) && `${CLASS}--show-controls`,
-        ]
-            .filter(Boolean)
-            .join(' ');
-        applyContainerStyles(this, config);
-        const width = this.getSizeStyle(this.getAttribute('width'));
-        const height = this.getSizeStyle(this.getAttribute('height'));
-        const borderRadius = this.getSizeStyle(this.getAttribute('border-radius'));
-        if (width)
-            this.style.width = width;
-        if (height)
-            this.style.height = height;
-        this.style.borderRadius = borderRadius || '0';
-        this.style.border = 'none';
-        this.style.opacity = '';
-        if (this.layersEl) {
-            this.layersEl.style.opacity = String(config.opacity);
-        }
-        const blendMode = this.getAttribute('blend-mode');
-        if (blendMode)
-            this.style.mixBlendMode = blendMode;
-        if (config.disabled) {
-            this.teardownLayers();
-            this.syncClickable(config);
-            return;
-        }
-        if (this.canLiveUpdate(config)) {
-            this.layerHandle?.update?.(config);
-            if (this.layersEl && LUMINA_SHADER_TYPES.includes(config.type)) {
-                syncLuminaOverlays(this.layersEl, config.noise, config.showVignette);
-            }
-        }
-        else {
-            this.remountLayers(config);
-        }
-        this.syncClickable(config);
-    }
-    syncClickable(config) {
-        if (this.clickHandler) {
-            this.removeEventListener('click', this.clickHandler);
-            this.clickHandler = undefined;
-        }
-        if (config.clickable && !config.disabled) {
-            this.clickHandler = () => {
-                this.dispatchEvent(new CustomEvent('db-click', { bubbles: true, composed: true }));
-            };
-            this.addEventListener('click', this.clickHandler);
-        }
-    }
-    render() {
-        if (!this.layersEl) {
-            this.layersEl = document.createElement('div');
-            this.layersEl.className = `${CLASS}__layers`;
-            Object.assign(this.layersEl.style, {
-                position: 'absolute',
-                inset: '0',
-                width: '100%',
-                height: '100%',
-                zIndex: '0',
-            });
-            this.contentEl = document.createElement('div');
-            this.contentEl.className = `${CLASS}__content`;
-            Object.assign(this.contentEl.style, {
-                position: 'relative',
-                zIndex: '10',
-                width: '100%',
-                height: '100%',
-            });
-            const slot = document.createElement('slot');
-            this.contentEl.appendChild(slot);
-            this.append(this.layersEl, this.contentEl);
-        }
-        this.ensureControlsShell();
-        this.applyConfig();
-        this.syncControlsVisibility();
-    }
-    ensureControlsShell() {
-        if (this.controlsRootEl)
-            return;
-        const root = document.createElement('div');
-        root.className = `${CLASS}__controls-root`;
-        root.hidden = true;
-        const gear = this.createIconButton('settings', '컨트롤 열기', () => {
-            this.panelOpen = !this.panelOpen;
-            this.syncPanelState();
-        });
-        gear.setAttribute('variant', 'secondary');
-        gear.className = `${CLASS}__controls-gear`;
-        const panel = document.createElement('div');
-        panel.className = `${CLASS}__controls-panel`;
-        panel.setAttribute('role', 'dialog');
-        panel.hidden = true;
-        panel.addEventListener('click', (event) => event.stopPropagation());
-        const head = document.createElement('div');
-        head.className = `${CLASS}__controls-head`;
-        const title = document.createElement('span');
-        title.className = `${CLASS}__controls-title`;
-        title.append(createDbIcon('settings', 14), document.createTextNode(' Controls'));
-        const resetBtn = this.createIconButton('refresh', '기본값으로 초기화', () => {
-            const config = this.getConfig();
-            const controls = getControlsForType(config.type);
-            this.syncingControls = true;
-            resetControlsToDefaults(this, controls);
-            if (config.type === 'graphite') {
-                const preset = getGraphitePreset('graphite');
-                this.setAttribute('zoom', String(preset.scale));
-                this.setAttribute('colors', JSON.stringify(preset.colors));
-            }
-            this.syncingControls = false;
-            this.applyConfig();
-            this.syncControlInputs();
-        });
-        resetBtn.className = `${CLASS}__controls-icon-btn`;
-        head.append(title, resetBtn);
-        panel.append(head);
-        root.append(gear, panel);
-        this.appendChild(root);
-        this.controlsRootEl = root;
-        this.panelEl = panel;
-    }
-    syncControlsVisibility() {
-        if (!this.controlsRootEl)
-            return;
-        const visible = this.getBool('show-controls', false);
-        this.controlsRootEl.hidden = !visible;
-        if (!visible) {
-            this.panelOpen = false;
-            this.syncPanelState();
-        }
-        else {
-            this.rebuildControlInputs();
-        }
-    }
-    syncPanelState() {
-        if (!this.controlsRootEl || !this.panelEl)
-            return;
-        const gear = this.controlsRootEl.querySelector(`.${CLASS}__controls-gear`);
-        if (gear) {
-            gear.dataset.open = this.panelOpen ? 'true' : 'false';
-            gear.setAttribute('aria-expanded', this.panelOpen ? 'true' : 'false');
-        }
-        this.panelEl.hidden = !this.panelOpen;
-    }
-    createIconButton(icon, label, onClick) {
-        const btn = document.createElement('db-button');
-        btn.setAttribute('variant', 'tertiary');
-        btn.setAttribute('size', 's');
-        btn.setAttribute('icon-only', '');
-        btn.setAttribute('start-icon', icon);
-        btn.setAttribute('aria-label', label);
-        btn.addEventListener('click', (event) => {
-            event.stopPropagation();
-            onClick();
-        });
-        return btn;
-    }
-    rebuildControlInputs() {
-        if (!this.panelEl)
-            return;
-        this.panelEl.querySelectorAll(`.${CLASS}__controls-field`).forEach((node) => node.remove());
-        this.controlInputs.clear();
-        const config = this.getConfig();
-        const controls = getControlsForType(config.type);
-        const title = this.panelEl.querySelector(`.${CLASS}__controls-title`);
-        if (title) {
-            title.lastChild?.remove();
-            title.append(document.createTextNode(` ${config.type}`));
-        }
-        controls.forEach((control) => {
-            const field = this.createControlField(control);
-            this.panelEl?.appendChild(field);
-        });
-        this.syncControlInputs();
-    }
-    createControlField(control) {
-        const field = document.createElement('div');
-        field.className = `${CLASS}__controls-field`;
-        field.dataset.attr = control.attr;
-        if (control.kind === 'range') {
-            const bounds = getControlSliderBounds(control);
-            const slider = document.createElement('db-range-slider');
-            slider.className = `${CLASS}__controls-range`;
-            slider.setAttribute('size', 's');
-            slider.setAttribute('full-width', '');
-            slider.setAttribute('show-label', '');
-            slider.setAttribute('label', control.label);
-            slider.setAttribute('show-value', '');
-            slider.setAttribute('value-position', 'top');
-            slider.setAttribute('show-thumb-tooltip', '');
-            slider.setAttribute('min', String(bounds.min));
-            slider.setAttribute('max', String(bounds.max));
-            slider.setAttribute('step', String(bounds.step));
-            if (bounds.fixed != null)
-                slider.setAttribute('value-fixed', String(bounds.fixed));
-            slider.addEventListener('db-change', (event) => {
-                const detail = event.detail;
-                if (detail.value == null)
-                    return;
-                this.commitControlValue(control, controlSliderToAttr(control, detail.value));
-            });
-            field.appendChild(slider);
-            this.controlInputs.set(control.attr, slider);
-            return field;
-        }
-        if (control.kind === 'select') {
-            const labelRow = document.createElement('div');
-            labelRow.className = `${CLASS}__controls-label`;
-            labelRow.textContent = control.label;
-            const options = control.options ?? [];
-            if (options.length > 4) {
-                const select = document.createElement('db-select');
-                select.className = `${CLASS}__controls-select`;
-                select.setAttribute('size', 's');
-                select.setAttribute('full-width', '');
-                select.setAttribute('options', JSON.stringify(options.map((opt) => ({ value: opt, label: opt }))));
-                select.addEventListener('db-change', (event) => {
-                    const detail = event.detail;
-                    if (detail.value == null)
-                        return;
-                    this.commitControlValue(control, detail.value);
-                });
-                field.append(labelRow, select);
-                this.controlInputs.set(control.attr, select);
-            }
-            else {
-                const seg = document.createElement('db-segment-control');
-                seg.className = `${CLASS}__controls-seg`;
-                seg.setAttribute('size', 's');
-                seg.setAttribute('full-width', '');
-                seg.setAttribute('options', JSON.stringify(options.map((opt) => ({ value: opt, label: opt }))));
-                seg.addEventListener('db-change', (event) => {
-                    const detail = event.detail;
-                    if (detail.value == null)
-                        return;
-                    this.commitControlValue(control, detail.value);
-                });
-                field.append(labelRow, seg);
-                this.controlInputs.set(control.attr, seg);
-            }
-            return field;
-        }
-        if (control.kind === 'toggle') {
-            const row = document.createElement('div');
-            row.className = `${CLASS}__controls-toggle`;
-            const name = document.createElement('span');
-            name.textContent = control.label;
-            const toggle = document.createElement('db-toggle');
-            toggle.setAttribute('size', 's');
-            toggle.addEventListener('db-change', (event) => {
-                const detail = event.detail;
-                this.commitControlValue(control, Boolean(detail.checked));
-            });
-            row.append(name, toggle);
-            field.appendChild(row);
-            this.controlInputs.set(control.attr, toggle);
-            return field;
-        }
-        const labelRow = document.createElement('div');
-        labelRow.className = `${CLASS}__controls-label`;
-        labelRow.textContent = control.label;
-        const colorsWrap = document.createElement('div');
-        colorsWrap.className = `${CLASS}__controls-colors`;
-        field.append(labelRow, colorsWrap);
-        this.controlInputs.set(control.attr, colorsWrap);
-        return field;
-    }
-    commitControlValue(control, value) {
-        this.syncingControls = true;
-        writeControlAttribute(this, control, value);
-        if (control.attr === 'preset' &&
-            this.getConfig().type === 'graphite' &&
-            typeof value === 'string' &&
-            isGraphitePresetId(value)) {
-            const preset = getGraphitePreset(value);
-            this.setAttribute('zoom', String(preset.scale));
-            this.setAttribute('colors', JSON.stringify(preset.colors));
-        }
-        this.syncingControls = false;
-        this.applyConfig();
-    }
-    syncControlInputs() {
-        const controls = getControlsForType(this.getConfig().type);
-        controls.forEach((control) => {
-            const value = readControlValue(this, control);
-            const input = this.controlInputs.get(control.attr);
-            if (!input)
-                return;
-            if (control.kind === 'range' && isRangeSlider(input)) {
-                const num = Number(value);
-                input.setAttribute('value', String(controlAttrToSlider(control, num)));
-            }
-            else if (control.kind === 'select') {
-                input.setAttribute('value', String(value));
-            }
-            else if (control.kind === 'toggle') {
-                const on = Boolean(value);
-                if (on)
-                    input.setAttribute('checked', '');
-                else
-                    input.removeAttribute('checked');
-            }
-            else if (control.kind === 'colors') {
-                this.renderColorInputs(input, control, value);
-            }
-        });
-    }
-    renderColorInputs(container, control, list) {
-        // 로컬 사본으로 관리: 색상 값 변경은 in-place 커밋(드롭다운 유지),
-        // 추가/삭제 등 구조 변경 시에만 다시 렌더링한다.
-        const colors = [...list];
-        container.replaceChildren();
-        const commitStructuralChange = (next) => {
-            this.commitControlValue(control, next);
-            this.renderColorInputs(container, control, next);
-        };
-        colors.forEach((hex, index) => {
-            const row = document.createElement('div');
-            row.className = `${CLASS}__controls-color`;
-            const picker = document.createElement('db-color-picker');
-            picker.className = `${CLASS}__controls-color-picker`;
-            picker.setAttribute('size', 's');
-            picker.setAttribute('full-width', '');
-            picker.setAttribute('show-alpha', 'false');
-            picker.setAttribute('show-eyedropper', 'false');
-            picker.setAttribute('value', hex);
-            picker.addEventListener('db-change', (event) => {
-                const detail = event.detail;
-                const value = detail?.value;
-                if (typeof value !== 'string' || !value)
-                    return;
-                colors[index] = value;
-                this.commitControlValue(control, [...colors]);
-            });
-            row.appendChild(picker);
-            if (colors.length > 1) {
-                const remove = this.createIconButton('trash', '색상 제거', () => {
-                    commitStructuralChange(colors.filter((_, idx) => idx !== index));
-                });
-                remove.className = `${CLASS}__controls-color-remove`;
-                row.appendChild(remove);
-            }
-            container.appendChild(row);
-        });
-        if (colors.length < 8) {
-            const add = this.createIconButton('plus', '색상 추가', () => {
-                commitStructuralChange([...colors, colors[colors.length - 1] ?? '#ffffff']);
-            });
-            add.className = `${CLASS}__controls-color-add`;
-            container.appendChild(add);
-        }
-    }
-}
-if (!customElements.get('db-animation-background')) {
-    customElements.define('db-animation-background', DbAnimationBackground);
-}
-
-export { DbAnimationBackground };
+import{parseAnimationBackgroundConfig as t,mountAnimationLayers as e,applyContainerStyles as s,syncLuminaOverlays as n,ANIMATION_BACKGROUND_CLASS as i}from"./animation-background/layers.js";import{getControlsForType as o,resetControlsToDefaults as l,getControlSliderBounds as r,controlSliderToAttr as a,writeControlAttribute as c,readControlValue as d,controlAttrToSlider as h}from"./animation-background/controls.js";import{isGraphitePresetId as u,getGraphitePreset as p}from"./animation-background/graphite-presets.js";import{createDbIcon as m}from"./db-icons.js";const b=i,g=["particles","stars","snow","flowers","confetti","mesh-flow","fluid","radiant","ethereal","graphite"],y=["mesh-flow","fluid","radiant","ethereal"];class DbAnimationBackground extends HTMLElement{constructor(){super(...arguments),this.panelOpen=!1,this.controlInputs=new Map,this.syncingControls=!1}static get observedAttributes(){return["type","theme","intensity","blur","speed","direction","colors","width","height","border-radius","opacity","blend-mode","particle-count","particle-size","star-count","star-size","wind","clickable","disabled","noise","show-vignette","preset","zoom","show-controls","shader-speed","shader-intensity","warp"]}connectedCallback(){this.style.display="block",this.render()}disconnectedCallback(){this.teardownLayers(),this.clickHandler&&(this.removeEventListener("click",this.clickHandler),this.clickHandler=void 0)}attributeChangedCallback(t,e,s){this.isConnected&&e!==s&&("show-controls"!==t?this.syncingControls||("type"===t&&this.getBool("show-controls",!1)&&this.rebuildControlInputs(),this.applyConfig(),this.getBool("show-controls",!1)&&this.syncControlInputs()):this.syncControlsVisibility())}getBool(t,e=!1){return this.hasAttribute(t)?"false"!==this.getAttribute(t):e}getSizeStyle(t){if(!t)return;const e=Number(t);return Number.isFinite(e)?`${e}px`:t}getConfig(){return t(this)}teardownLayers(){this.layerHandle?.destroy?.(),this.layerHandle=void 0,this.mountedType=void 0,this.layersEl&&this.layersEl.replaceChildren()}remountLayers(t){this.layersEl&&(this.teardownLayers(),this.layerHandle=e(this.layersEl,t),this.mountedType=t.type)}canLiveUpdate(t){return this.mountedType===t.type&&g.includes(t.type)&&"function"==typeof this.layerHandle?.update}applyConfig(){const t=this.getConfig();this.className=[b,`${b}--${t.type}`,t.clickable&&!t.disabled&&`${b}--clickable`,t.disabled&&`${b}--disabled`,this.getBool("show-controls",!1)&&`${b}--show-controls`].filter(Boolean).join(" "),s(this,t);const e=this.getSizeStyle(this.getAttribute("width")),i=this.getSizeStyle(this.getAttribute("height")),o=this.getSizeStyle(this.getAttribute("border-radius"));e&&(this.style.width=e),i&&(this.style.height=i),this.style.borderRadius=o||"0",this.style.border="none",this.style.opacity="",this.layersEl&&(this.layersEl.style.opacity=String(t.opacity));const l=this.getAttribute("blend-mode");if(l&&(this.style.mixBlendMode=l),t.disabled)return this.teardownLayers(),void this.syncClickable(t);this.canLiveUpdate(t)?(this.layerHandle?.update?.(t),this.layersEl&&y.includes(t.type)&&n(this.layersEl,t.noise,t.showVignette)):this.remountLayers(t),this.syncClickable(t)}syncClickable(t){this.clickHandler&&(this.removeEventListener("click",this.clickHandler),this.clickHandler=void 0),t.clickable&&!t.disabled&&(this.clickHandler=()=>{this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0}))},this.addEventListener("click",this.clickHandler))}render(){if(!this.layersEl){this.layersEl=document.createElement("div"),this.layersEl.className=`${b}__layers`,Object.assign(this.layersEl.style,{position:"absolute",inset:"0",width:"100%",height:"100%",zIndex:"0"}),this.contentEl=document.createElement("div"),this.contentEl.className=`${b}__content`,Object.assign(this.contentEl.style,{position:"relative",zIndex:"10",width:"100%",height:"100%"});const t=document.createElement("slot");this.contentEl.appendChild(t),this.append(this.layersEl,this.contentEl)}this.ensureControlsShell(),this.applyConfig(),this.syncControlsVisibility()}ensureControlsShell(){if(this.controlsRootEl)return;const t=document.createElement("div");t.className=`${b}__controls-root`,t.hidden=!0;const e=this.createIconButton("settings","컨트롤 열기",()=>{this.panelOpen=!this.panelOpen,this.syncPanelState()});e.setAttribute("variant","secondary"),e.className=`${b}__controls-gear`;const s=document.createElement("div");s.className=`${b}__controls-panel`,s.setAttribute("role","dialog"),s.hidden=!0,s.addEventListener("click",t=>t.stopPropagation());const n=document.createElement("div");n.className=`${b}__controls-head`;const i=document.createElement("span");i.className=`${b}__controls-title`,i.append(m("settings",14),document.createTextNode(" Controls"));const r=this.createIconButton("refresh","기본값으로 초기화",()=>{const t=this.getConfig(),e=o(t.type);if(this.syncingControls=!0,l(this,e),"graphite"===t.type){const t=p("graphite");this.setAttribute("zoom",String(t.scale)),this.setAttribute("colors",JSON.stringify(t.colors))}this.syncingControls=!1,this.applyConfig(),this.syncControlInputs()});r.className=`${b}__controls-icon-btn`,n.append(i,r),s.append(n),t.append(e,s),this.appendChild(t),this.controlsRootEl=t,this.panelEl=s}syncControlsVisibility(){if(!this.controlsRootEl)return;const t=this.getBool("show-controls",!1);this.controlsRootEl.hidden=!t,t?this.rebuildControlInputs():(this.panelOpen=!1,this.syncPanelState())}syncPanelState(){if(!this.controlsRootEl||!this.panelEl)return;const t=this.controlsRootEl.querySelector(`.${b}__controls-gear`);t&&(t.dataset.open=this.panelOpen?"true":"false",t.setAttribute("aria-expanded",this.panelOpen?"true":"false")),this.panelEl.hidden=!this.panelOpen}createIconButton(t,e,s){const n=document.createElement("db-button");return n.setAttribute("variant","tertiary"),n.setAttribute("size","s"),n.setAttribute("icon-only",""),n.setAttribute("start-icon",t),n.setAttribute("aria-label",e),n.addEventListener("click",t=>{t.stopPropagation(),s()}),n}rebuildControlInputs(){if(!this.panelEl)return;this.panelEl.querySelectorAll(`.${b}__controls-field`).forEach(t=>t.remove()),this.controlInputs.clear();const t=this.getConfig(),e=o(t.type),s=this.panelEl.querySelector(`.${b}__controls-title`);s&&(s.lastChild?.remove(),s.append(document.createTextNode(` ${t.type}`))),e.forEach(t=>{const e=this.createControlField(t);this.panelEl?.appendChild(e)}),this.syncControlInputs()}createControlField(t){const e=document.createElement("div");if(e.className=`${b}__controls-field`,e.dataset.attr=t.attr,"range"===t.kind){const s=r(t),n=document.createElement("db-range-slider");return n.className=`${b}__controls-range`,n.setAttribute("size","s"),n.setAttribute("full-width",""),n.setAttribute("show-label",""),n.setAttribute("label",t.label),n.setAttribute("show-value",""),n.setAttribute("value-position","top"),n.setAttribute("show-thumb-tooltip",""),n.setAttribute("min",String(s.min)),n.setAttribute("max",String(s.max)),n.setAttribute("step",String(s.step)),null!=s.fixed&&n.setAttribute("value-fixed",String(s.fixed)),n.addEventListener("db-change",e=>{const s=e.detail;null!=s.value&&this.commitControlValue(t,a(t,s.value))}),e.appendChild(n),this.controlInputs.set(t.attr,n),e}if("select"===t.kind){const s=document.createElement("div");s.className=`${b}__controls-label`,s.textContent=t.label;const n=t.options??[];if(n.length>4){const i=document.createElement("db-select");i.className=`${b}__controls-select`,i.setAttribute("size","s"),i.setAttribute("full-width",""),i.setAttribute("options",JSON.stringify(n.map(t=>({value:t,label:t})))),i.addEventListener("db-change",e=>{const s=e.detail;null!=s.value&&this.commitControlValue(t,s.value)}),e.append(s,i),this.controlInputs.set(t.attr,i)}else{const i=document.createElement("db-segment-control");i.className=`${b}__controls-seg`,i.setAttribute("size","s"),i.setAttribute("full-width",""),i.setAttribute("options",JSON.stringify(n.map(t=>({value:t,label:t})))),i.addEventListener("db-change",e=>{const s=e.detail;null!=s.value&&this.commitControlValue(t,s.value)}),e.append(s,i),this.controlInputs.set(t.attr,i)}return e}if("toggle"===t.kind){const s=document.createElement("div");s.className=`${b}__controls-toggle`;const n=document.createElement("span");n.textContent=t.label;const i=document.createElement("db-toggle");return i.setAttribute("size","s"),i.addEventListener("db-change",e=>{const s=e.detail;this.commitControlValue(t,Boolean(s.checked))}),s.append(n,i),e.appendChild(s),this.controlInputs.set(t.attr,i),e}const s=document.createElement("div");s.className=`${b}__controls-label`,s.textContent=t.label;const n=document.createElement("div");return n.className=`${b}__controls-colors`,e.append(s,n),this.controlInputs.set(t.attr,n),e}commitControlValue(t,e){if(this.syncingControls=!0,c(this,t,e),"preset"===t.attr&&"graphite"===this.getConfig().type&&"string"==typeof e&&u(e)){const t=p(e);this.setAttribute("zoom",String(t.scale)),this.setAttribute("colors",JSON.stringify(t.colors))}this.syncingControls=!1,this.applyConfig()}syncControlInputs(){o(this.getConfig().type).forEach(t=>{const e=d(this,t),s=this.controlInputs.get(t.attr);if(s)if("range"===t.kind&&function isRangeSlider(t){return"DB-RANGE-SLIDER"===t.tagName}(s)){const n=Number(e);s.setAttribute("value",String(h(t,n)))}else if("select"===t.kind)s.setAttribute("value",String(e));else if("toggle"===t.kind){Boolean(e)?s.setAttribute("checked",""):s.removeAttribute("checked")}else"colors"===t.kind&&this.renderColorInputs(s,t,e)})}renderColorInputs(t,e,s){const n=[...s];t.replaceChildren();const commitStructuralChange=s=>{this.commitControlValue(e,s),this.renderColorInputs(t,e,s)};if(n.forEach((s,i)=>{const o=document.createElement("div");o.className=`${b}__controls-color`;const l=document.createElement("db-color-picker");if(l.className=`${b}__controls-color-picker`,l.setAttribute("size","s"),l.setAttribute("full-width",""),l.setAttribute("show-alpha","false"),l.setAttribute("show-eyedropper","false"),l.setAttribute("value",s),l.addEventListener("db-change",t=>{const s=t.detail,o=s?.value;"string"==typeof o&&o&&(n[i]=o,this.commitControlValue(e,[...n]))}),o.appendChild(l),n.length>1){const t=this.createIconButton("trash","색상 제거",()=>{commitStructuralChange(n.filter((t,e)=>e!==i))});t.className=`${b}__controls-color-remove`,o.appendChild(t)}t.appendChild(o)}),n.length<8){const e=this.createIconButton("plus","색상 추가",()=>{commitStructuralChange([...n,n[n.length-1]??"#ffffff"])});e.className=`${b}__controls-color-add`,t.appendChild(e)}}}customElements.get("db-animation-background")||customElements.define("db-animation-background",DbAnimationBackground);export{DbAnimationBackground};