@designbasekorea/ui-wc 0.5.6 → 0.6.1

package/dist/esm/components/db-indicator.js

@@ -1,517 +1 @@
-import { createDbIcon } from './db-icons.js';
-
-const TYPES = ['dots', 'numbers', 'line', 'dot-line', 'slide', 'fill', 'combined'];
-const SIZES = ['s', 'm', 'l'];
-const DIRECTIONS = ['horizontal', 'vertical'];
-class DbIndicator extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.timerFrame = 0;
-        this.progress = 0;
-        this.pausedProgress = 0;
-        this.activeStep = 0;
-        this.isPlayingInternal = false;
-    }
-    static get observedAttributes() {
-        return [
-            'total',
-            'current',
-            'default-current',
-            'indicator-type',
-            'type',
-            'size',
-            'direction',
-            'number-background',
-            'playback',
-            'clickable',
-            'timer',
-            'timer-duration',
-            'auto-roll',
-            'playing',
-            'default-playing',
-            'playback-disabled',
-        ];
-    }
-    get total() {
-        return Math.max(1, Number(this.getAttribute('total') || 1));
-    }
-    set total(value) {
-        this.setAttribute('total', String(value));
-    }
-    normalizeStep(step) {
-        const total = this.total;
-        return ((step % total) + total) % total;
-    }
-    get isCurrentControlled() {
-        return this.hasAttribute('current');
-    }
-    get isPlayingControlled() {
-        return this.hasAttribute('playing');
-    }
-    get resolvedCurrent() {
-        if (this.isCurrentControlled) {
-            return this.normalizeStep(Number(this.getAttribute('current') || 0));
-        }
-        return this.activeStep;
-    }
-    get resolvedPlaying() {
-        if (this.isPlayingControlled) {
-            return true;
-        }
-        return this.isPlayingInternal;
-    }
-    get indicatorType() {
-        const value = this.getAttribute('indicator-type') || this.getAttribute('type') || 'dots';
-        return TYPES.includes(value) ? value : 'dots';
-    }
-    get size() {
-        const value = this.getAttribute('size') || 'm';
-        return SIZES.includes(value) ? value : 'm';
-    }
-    set size(value) {
-        this.setAttribute('size', value);
-    }
-    get direction() {
-        const value = this.getAttribute('direction') || 'horizontal';
-        return DIRECTIONS.includes(value) ? value : 'horizontal';
-    }
-    set direction(value) {
-        this.setAttribute('direction', value);
-    }
-    get numberBackground() {
-        return this.hasAttribute('number-background');
-    }
-    set numberBackground(value) {
-        this.toggleAttribute('number-background', Boolean(value));
-    }
-    get playback() {
-        return this.hasAttribute('playback');
-    }
-    set playback(value) {
-        this.toggleAttribute('playback', Boolean(value));
-    }
-    get clickable() {
-        return this.hasAttribute('clickable');
-    }
-    set clickable(value) {
-        this.toggleAttribute('clickable', Boolean(value));
-    }
-    get timer() {
-        return this.hasAttribute('timer');
-    }
-    set timer(value) {
-        this.toggleAttribute('timer', Boolean(value));
-    }
-    connectedCallback() {
-        this.activeStep = this.normalizeStep(Number(this.getAttribute('default-current') || 0));
-        this.isPlayingInternal = this.hasAttribute('default-playing');
-        this.render();
-        this.startTimer();
-    }
-    disconnectedCallback() {
-        cancelAnimationFrame(this.timerFrame);
-    }
-    attributeChangedCallback(name) {
-        if (!this.isConnected)
-            return;
-        if (name === 'current' && this.isCurrentControlled) {
-            this.resetProgress();
-            this.render();
-            this.startTimer();
-            return;
-        }
-        if (name === 'playing') {
-            if (!this.resolvedPlaying) {
-                this.pausedProgress = this.progress;
-            }
-            this.syncRootClasses();
-            this.syncPlaybackButton();
-            this.startTimer();
-            return;
-        }
-        if (name === 'default-current' && !this.isCurrentControlled) {
-            this.activeStep = this.normalizeStep(Number(this.getAttribute('default-current') || 0));
-            this.resetProgress();
-            this.render();
-            this.startTimer();
-            return;
-        }
-        if (name === 'default-playing' && !this.isPlayingControlled) {
-            this.isPlayingInternal = this.hasAttribute('default-playing');
-            this.syncRootClasses();
-            this.syncPlaybackButton();
-            this.startTimer();
-            return;
-        }
-        if (name === 'timer' || name === 'timer-duration' || name === 'auto-roll') {
-            this.resetProgress();
-            this.render();
-            this.startTimer();
-            return;
-        }
-        this.render();
-        this.startTimer();
-    }
-    resetProgress() {
-        this.pausedProgress = 0;
-        this.progress = 0;
-    }
-    emitChange(current) {
-        const detail = { current, index: current };
-        this.dispatchEvent(new CustomEvent('db-change', { detail, bubbles: true, composed: true }));
-        this.dispatchEvent(new CustomEvent('db-current-change', { detail, bubbles: true, composed: true }));
-    }
-    goToStep(step) {
-        const normalized = this.normalizeStep(step);
-        if (!this.isCurrentControlled) {
-            this.activeStep = normalized;
-            this.resetProgress();
-            this.render();
-            this.startTimer();
-        }
-        this.emitChange(normalized);
-    }
-    startTimer() {
-        cancelAnimationFrame(this.timerFrame);
-        if (!this.timer || !this.resolvedPlaying || !this.isConnected)
-            return;
-        const duration = Number(this.getAttribute('timer-duration') || 3000);
-        const start = Date.now() - this.pausedProgress * duration;
-        const tick = () => {
-            const elapsed = Date.now() - start;
-            const ratio = Math.min(elapsed / duration, 1);
-            this.progress = ratio;
-            this.pausedProgress = ratio;
-            this.updateTimerVisuals();
-            if (ratio < 1) {
-                this.timerFrame = requestAnimationFrame(tick);
-                return;
-            }
-            this.dispatchEvent(new CustomEvent('db-timer-complete', {
-                detail: { step: this.resolvedCurrent },
-                bubbles: true,
-                composed: true,
-            }));
-            this.resetProgress();
-            if (this.getAttribute('auto-roll') !== 'false') {
-                this.goToStep(this.resolvedCurrent + 1);
-                return;
-            }
-            this.render();
-        };
-        this.timerFrame = requestAnimationFrame(tick);
-    }
-    updateTimerVisuals() {
-        const fills = this.querySelectorAll('.designbase-wc-indicator__line-fill, .designbase-wc-indicator__track-fill, .designbase-wc-indicator__dot-line-fill');
-        fills.forEach((fill) => {
-            fill.style.transform =
-                this.direction === 'vertical' ? `scaleY(${this.progress})` : `scaleX(${this.progress})`;
-        });
-        const fillBar = this.querySelector('.designbase-wc-indicator__track-progress');
-        if (fillBar) {
-            const size = `${this.fillRatio() * 100}%`;
-            if (this.direction === 'vertical') {
-                fillBar.style.height = size;
-            }
-            else {
-                fillBar.style.width = size;
-            }
-        }
-        const ring = this.querySelector('.designbase-wc-indicator__dot-ring-progress');
-        if (ring) {
-            const radius = 15.9155;
-            const circumference = 2 * Math.PI * radius;
-            ring.setAttribute('stroke-dashoffset', String(circumference * (1 - this.progress)));
-        }
-    }
-    syncRootClasses() {
-        const type = this.indicatorType;
-        this.className = [
-            'designbase-wc-indicator',
-            `designbase-wc-indicator--${type}`,
-            type === 'combined' && 'designbase-wc-indicator--dots',
-            `designbase-wc-indicator--${this.size}`,
-            `designbase-wc-indicator--${this.direction}`,
-            this.clickable && 'designbase-wc-indicator--clickable',
-            this.timer && !this.resolvedPlaying && 'designbase-wc-indicator--paused',
-        ]
-            .filter(Boolean)
-            .join(' ');
-    }
-    syncPlaybackButton() {
-        const button = this.querySelector('.designbase-wc-indicator__playback-button');
-        if (!button)
-            return;
-        button.disabled = this.hasAttribute('playback-disabled');
-        button.setAttribute('aria-label', this.resolvedPlaying ? '일시정지' : '재생');
-        button.replaceChildren(createDbIcon(this.resolvedPlaying ? 'pause' : 'play'));
-    }
-    renderDotRing() {
-        const radius = 15.9155;
-        const circumference = 2 * Math.PI * radius;
-        const wrap = document.createElement('span');
-        wrap.className = 'designbase-wc-indicator__dot-ring';
-        wrap.setAttribute('aria-hidden', 'true');
-        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-        svg.setAttribute('class', 'designbase-wc-indicator__dot-ring-svg');
-        svg.setAttribute('viewBox', '0 0 36 36');
-        const bg = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-        bg.setAttribute('class', 'designbase-wc-indicator__dot-ring-bg');
-        bg.setAttribute('cx', '18');
-        bg.setAttribute('cy', '18');
-        bg.setAttribute('r', String(radius));
-        bg.setAttribute('fill', 'none');
-        const progress = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-        progress.setAttribute('class', 'designbase-wc-indicator__dot-ring-progress');
-        progress.setAttribute('cx', '18');
-        progress.setAttribute('cy', '18');
-        progress.setAttribute('r', String(radius));
-        progress.setAttribute('fill', 'none');
-        progress.setAttribute('stroke-dasharray', String(circumference));
-        progress.setAttribute('stroke-dashoffset', String(circumference * (1 - this.progress)));
-        progress.setAttribute('stroke-linecap', 'round');
-        svg.append(bg, progress);
-        wrap.append(svg);
-        return wrap;
-    }
-    renderStep(index, className, content) {
-        const isActive = index === this.resolvedCurrent;
-        const element = this.clickable ? document.createElement('button') : document.createElement('span');
-        element.className = className;
-        if (this.clickable && element instanceof HTMLButtonElement) {
-            element.type = 'button';
-            element.setAttribute('aria-label', `${index + 1}단계`);
-            if (isActive)
-                element.setAttribute('aria-current', 'step');
-            element.addEventListener('click', () => {
-                this.goToStep(index);
-                this.dispatchEvent(new CustomEvent('db-step-click', {
-                    detail: { current: index, index },
-                    bubbles: true,
-                    composed: true,
-                }));
-            });
-        }
-        else if (!isActive) {
-            element.setAttribute('aria-hidden', 'true');
-        }
-        if (content)
-            element.append(content);
-        return element;
-    }
-    renderDots() {
-        const fragment = document.createDocumentFragment();
-        const type = this.indicatorType;
-        const visualType = type === 'combined' ? 'dots' : type;
-        const timer = this.timer;
-        const playing = this.resolvedPlaying;
-        const current = this.resolvedCurrent;
-        this.direction;
-        const total = this.total;
-        if (visualType !== 'dots') {
-            return fragment;
-        }
-        for (let index = 0; index < total; index += 1) {
-            const isActive = index === current;
-            const showTimerRing = timer && isActive && playing;
-            const core = document.createElement('span');
-            core.className = 'designbase-wc-indicator__dot-core';
-            const dotContent = document.createDocumentFragment();
-            dotContent.append(core);
-            if (timer && isActive && (showTimerRing || this.progress > 0)) {
-                dotContent.append(this.renderDotRing());
-            }
-            fragment.append(this.renderStep(index, [
-                'designbase-wc-indicator__dot',
-                isActive && 'designbase-wc-indicator__dot--active',
-            ]
-                .filter(Boolean)
-                .join(' '), dotContent));
-        }
-        return fragment;
-    }
-    renderPlaybackButton() {
-        const button = document.createElement('button');
-        button.type = 'button';
-        button.className = 'designbase-wc-indicator__playback-button';
-        button.disabled = this.hasAttribute('playback-disabled');
-        button.setAttribute('aria-label', this.resolvedPlaying ? '일시정지' : '재생');
-        button.append(createDbIcon(this.resolvedPlaying ? 'pause' : 'play'));
-        button.addEventListener('click', () => {
-            if (this.hasAttribute('playback-disabled'))
-                return;
-            const nextPlaying = !this.resolvedPlaying;
-            if (!this.isPlayingControlled) {
-                this.isPlayingInternal = nextPlaying;
-                if (!nextPlaying) {
-                    this.pausedProgress = this.progress;
-                }
-            }
-            else if (nextPlaying) {
-                this.setAttribute('playing', '');
-            }
-            else {
-                this.removeAttribute('playing');
-                this.pausedProgress = this.progress;
-            }
-            this.syncRootClasses();
-            this.syncPlaybackButton();
-            this.startTimer();
-            this.dispatchEvent(new CustomEvent('db-playing-change', {
-                detail: { playing: nextPlaying },
-                bubbles: true,
-                composed: true,
-            }));
-        });
-        return button;
-    }
-    renderNumbers() {
-        const wrapper = document.createElement('div');
-        wrapper.className = [
-            'designbase-wc-indicator__numbers',
-            this.numberBackground && 'designbase-wc-indicator__numbers--bg',
-        ]
-            .filter(Boolean)
-            .join(' ');
-        const currentEl = document.createElement('span');
-        currentEl.className = 'designbase-wc-indicator__current';
-        currentEl.textContent = String(this.resolvedCurrent + 1);
-        const separator = document.createElement('span');
-        separator.className = 'designbase-wc-indicator__separator';
-        separator.textContent = '/';
-        const totalEl = document.createElement('span');
-        totalEl.className = 'designbase-wc-indicator__total';
-        totalEl.textContent = String(this.total);
-        wrapper.append(currentEl, separator, totalEl);
-        return wrapper;
-    }
-    renderSlide() {
-        const direction = this.direction;
-        const current = this.resolvedCurrent;
-        const track = document.createElement('div');
-        track.className = 'designbase-wc-indicator__track';
-        const thumb = document.createElement('div');
-        thumb.className = 'designbase-wc-indicator__track-thumb';
-        const segmentSize = 100 / this.total;
-        if (direction === 'vertical') {
-            thumb.style.height = `${segmentSize}%`;
-            thumb.style.transform = `translateY(${current * 100}%)`;
-        }
-        else {
-            thumb.style.width = `${segmentSize}%`;
-            thumb.style.transform = `translateX(${current * 100}%)`;
-        }
-        if (this.timer && this.resolvedPlaying) {
-            const fill = document.createElement('div');
-            fill.className = 'designbase-wc-indicator__track-fill';
-            fill.style.transform = direction === 'vertical' ? `scaleY(${this.progress})` : `scaleX(${this.progress})`;
-            thumb.append(fill);
-        }
-        track.append(thumb);
-        return track;
-    }
-    renderScaleFill(className) {
-        const span = document.createElement('span');
-        span.className = className;
-        span.style.transform = this.direction === 'vertical' ? `scaleY(${this.progress})` : `scaleX(${this.progress})`;
-        return span;
-    }
-    renderLine() {
-        const fragment = document.createDocumentFragment();
-        const timer = this.timer;
-        const playing = this.resolvedPlaying;
-        const current = this.resolvedCurrent;
-        for (let index = 0; index < this.total; index += 1) {
-            const isActive = index === current;
-            const fill = timer && isActive && playing ? this.renderScaleFill('designbase-wc-indicator__line-fill') : undefined;
-            fragment.append(this.renderStep(index, [
-                'designbase-wc-indicator__line-segment',
-                isActive && !timer && 'designbase-wc-indicator__line-segment--active',
-                isActive && timer && 'designbase-wc-indicator__line-segment--current',
-            ]
-                .filter(Boolean)
-                .join(' '), fill));
-        }
-        return fragment;
-    }
-    renderDotLine() {
-        const fragment = document.createDocumentFragment();
-        const timer = this.timer;
-        const playing = this.resolvedPlaying;
-        const current = this.resolvedCurrent;
-        for (let index = 0; index < this.total; index += 1) {
-            const isActive = index === current;
-            const fill = timer && isActive && playing ? this.renderScaleFill('designbase-wc-indicator__dot-line-fill') : undefined;
-            fragment.append(this.renderStep(index, [
-                'designbase-wc-indicator__dot-line-item',
-                isActive && !timer && 'designbase-wc-indicator__dot-line-item--active',
-                isActive && timer && 'designbase-wc-indicator__dot-line-item--current',
-            ]
-                .filter(Boolean)
-                .join(' '), fill));
-        }
-        return fragment;
-    }
-    fillRatio() {
-        const step = this.resolvedCurrent;
-        const base = step / this.total;
-        const segment = 1 / this.total;
-        return this.timer && this.resolvedPlaying
-            ? Math.min(base + segment * this.progress, 1)
-            : (step + 1) / this.total;
-    }
-    renderFill() {
-        const track = document.createElement('div');
-        track.className = 'designbase-wc-indicator__track';
-        const progress = document.createElement('div');
-        progress.className = 'designbase-wc-indicator__track-progress';
-        const size = `${this.fillRatio() * 100}%`;
-        if (this.direction === 'vertical') {
-            progress.style.height = size;
-        }
-        else {
-            progress.style.width = size;
-        }
-        track.append(progress);
-        return track;
-    }
-    renderContent() {
-        const visualType = this.indicatorType === 'combined' ? 'dots' : this.indicatorType;
-        if (visualType === 'numbers')
-            return this.renderNumbers();
-        if (visualType === 'slide')
-            return this.renderSlide();
-        if (visualType === 'fill')
-            return this.renderFill();
-        if (visualType === 'line')
-            return this.renderLine();
-        if (visualType === 'dot-line')
-            return this.renderDotLine();
-        return this.renderDots();
-    }
-    render() {
-        const type = this.indicatorType;
-        const current = this.resolvedCurrent;
-        const total = this.total;
-        this.syncRootClasses();
-        this.setAttribute('role', 'progressbar');
-        this.setAttribute('aria-valuemin', '1');
-        this.setAttribute('aria-valuemax', String(total));
-        this.setAttribute('aria-valuenow', String(current + 1));
-        this.replaceChildren();
-        const showPlayback = type === 'combined' || this.playback;
-        if (showPlayback) {
-            const steps = document.createElement('div');
-            steps.className = 'designbase-wc-indicator__steps';
-            steps.append(this.renderContent());
-            this.append(steps, this.renderPlaybackButton());
-            return;
-        }
-        this.append(this.renderContent());
-    }
-}
-if (!customElements.get('db-indicator')) {
-    customElements.define('db-indicator', DbIndicator);
-}
-
-export { DbIndicator };
+import{createDbIcon as t}from"./db-icons.js";const e=["dots","numbers","line","dot-line","slide","fill","combined"],i=["s","m","l"],s=["horizontal","vertical"];class DbIndicator extends HTMLElement{constructor(){super(...arguments),this.timerFrame=0,this.progress=0,this.pausedProgress=0,this.activeStep=0,this.isPlayingInternal=!1}static get observedAttributes(){return["total","current","default-current","indicator-type","type","size","direction","number-background","playback","clickable","timer","timer-duration","auto-roll","playing","default-playing","playback-disabled"]}get total(){return Math.max(1,Number(this.getAttribute("total")||1))}set total(t){this.setAttribute("total",String(t))}normalizeStep(t){const e=this.total;return(t%e+e)%e}get isCurrentControlled(){return this.hasAttribute("current")}get isPlayingControlled(){return this.hasAttribute("playing")}get resolvedCurrent(){return this.isCurrentControlled?this.normalizeStep(Number(this.getAttribute("current")||0)):this.activeStep}get resolvedPlaying(){return!!this.isPlayingControlled||this.isPlayingInternal}get indicatorType(){const t=this.getAttribute("indicator-type")||this.getAttribute("type")||"dots";return e.includes(t)?t:"dots"}get size(){const t=this.getAttribute("size")||"m";return i.includes(t)?t:"m"}set size(t){this.setAttribute("size",t)}get direction(){const t=this.getAttribute("direction")||"horizontal";return s.includes(t)?t:"horizontal"}set direction(t){this.setAttribute("direction",t)}get numberBackground(){return this.hasAttribute("number-background")}set numberBackground(t){this.toggleAttribute("number-background",Boolean(t))}get playback(){return this.hasAttribute("playback")}set playback(t){this.toggleAttribute("playback",Boolean(t))}get clickable(){return this.hasAttribute("clickable")}set clickable(t){this.toggleAttribute("clickable",Boolean(t))}get timer(){return this.hasAttribute("timer")}set timer(t){this.toggleAttribute("timer",Boolean(t))}connectedCallback(){this.activeStep=this.normalizeStep(Number(this.getAttribute("default-current")||0)),this.isPlayingInternal=this.hasAttribute("default-playing"),this.render(),this.startTimer()}disconnectedCallback(){cancelAnimationFrame(this.timerFrame)}attributeChangedCallback(t){if(this.isConnected){if("current"===t&&this.isCurrentControlled)return this.resetProgress(),this.render(),void this.startTimer();if("playing"===t)return this.resolvedPlaying||(this.pausedProgress=this.progress),this.syncRootClasses(),this.syncPlaybackButton(),void this.startTimer();if("default-current"===t&&!this.isCurrentControlled)return this.activeStep=this.normalizeStep(Number(this.getAttribute("default-current")||0)),this.resetProgress(),this.render(),void this.startTimer();if("default-playing"===t&&!this.isPlayingControlled)return this.isPlayingInternal=this.hasAttribute("default-playing"),this.syncRootClasses(),this.syncPlaybackButton(),void this.startTimer();if("timer"===t||"timer-duration"===t||"auto-roll"===t)return this.resetProgress(),this.render(),void this.startTimer();this.render(),this.startTimer()}}resetProgress(){this.pausedProgress=0,this.progress=0}emitChange(t){const e={current:t,index:t};this.dispatchEvent(new CustomEvent("db-change",{detail:e,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-current-change",{detail:e,bubbles:!0,composed:!0}))}goToStep(t){const e=this.normalizeStep(t);this.isCurrentControlled||(this.activeStep=e,this.resetProgress(),this.render(),this.startTimer()),this.emitChange(e)}startTimer(){if(cancelAnimationFrame(this.timerFrame),!this.timer||!this.resolvedPlaying||!this.isConnected)return;const t=Number(this.getAttribute("timer-duration")||3e3),e=Date.now()-this.pausedProgress*t,tick=()=>{const i=Date.now()-e,s=Math.min(i/t,1);this.progress=s,this.pausedProgress=s,this.updateTimerVisuals(),s<1?this.timerFrame=requestAnimationFrame(tick):(this.dispatchEvent(new CustomEvent("db-timer-complete",{detail:{step:this.resolvedCurrent},bubbles:!0,composed:!0})),this.resetProgress(),"false"===this.getAttribute("auto-roll")?this.render():this.goToStep(this.resolvedCurrent+1))};this.timerFrame=requestAnimationFrame(tick)}updateTimerVisuals(){this.querySelectorAll(".designbase-wc-indicator__line-fill, .designbase-wc-indicator__track-fill, .designbase-wc-indicator__dot-line-fill").forEach(t=>{t.style.transform="vertical"===this.direction?`scaleY(${this.progress})`:`scaleX(${this.progress})`});const t=this.querySelector(".designbase-wc-indicator__track-progress");if(t){const e=100*this.fillRatio()+"%";"vertical"===this.direction?t.style.height=e:t.style.width=e}const e=this.querySelector(".designbase-wc-indicator__dot-ring-progress");if(e){const t=15.9155,i=2*Math.PI*t;e.setAttribute("stroke-dashoffset",String(i*(1-this.progress)))}}syncRootClasses(){const t=this.indicatorType;this.className=["designbase-wc-indicator",`designbase-wc-indicator--${t}`,"combined"===t&&"designbase-wc-indicator--dots",`designbase-wc-indicator--${this.size}`,`designbase-wc-indicator--${this.direction}`,this.clickable&&"designbase-wc-indicator--clickable",this.timer&&!this.resolvedPlaying&&"designbase-wc-indicator--paused"].filter(Boolean).join(" ")}syncPlaybackButton(){const e=this.querySelector(".designbase-wc-indicator__playback-button");e&&(e.disabled=this.hasAttribute("playback-disabled"),e.setAttribute("aria-label",this.resolvedPlaying?"일시정지":"재생"),e.replaceChildren(t(this.resolvedPlaying?"pause":"play")))}renderDotRing(){const t=15.9155,e=2*Math.PI*t,i=document.createElement("span");i.className="designbase-wc-indicator__dot-ring",i.setAttribute("aria-hidden","true");const s=document.createElementNS("http://www.w3.org/2000/svg","svg");s.setAttribute("class","designbase-wc-indicator__dot-ring-svg"),s.setAttribute("viewBox","0 0 36 36");const r=document.createElementNS("http://www.w3.org/2000/svg","circle");r.setAttribute("class","designbase-wc-indicator__dot-ring-bg"),r.setAttribute("cx","18"),r.setAttribute("cy","18"),r.setAttribute("r",String(t)),r.setAttribute("fill","none");const n=document.createElementNS("http://www.w3.org/2000/svg","circle");return n.setAttribute("class","designbase-wc-indicator__dot-ring-progress"),n.setAttribute("cx","18"),n.setAttribute("cy","18"),n.setAttribute("r",String(t)),n.setAttribute("fill","none"),n.setAttribute("stroke-dasharray",String(e)),n.setAttribute("stroke-dashoffset",String(e*(1-this.progress))),n.setAttribute("stroke-linecap","round"),s.append(r,n),i.append(s),i}renderStep(t,e,i){const s=t===this.resolvedCurrent,r=this.clickable?document.createElement("button"):document.createElement("span");return r.className=e,this.clickable&&r instanceof HTMLButtonElement?(r.type="button",r.setAttribute("aria-label",`${t+1}단계`),s&&r.setAttribute("aria-current","step"),r.addEventListener("click",()=>{this.goToStep(t),this.dispatchEvent(new CustomEvent("db-step-click",{detail:{current:t,index:t},bubbles:!0,composed:!0}))})):s||r.setAttribute("aria-hidden","true"),i&&r.append(i),r}renderDots(){const t=document.createDocumentFragment(),e=this.indicatorType,i="combined"===e?"dots":e,s=this.timer,r=this.resolvedPlaying,n=this.resolvedCurrent;this.direction;const a=this.total;if("dots"!==i)return t;for(let e=0;e<a;e+=1){const i=e===n,a=s&&i&&r,o=document.createElement("span");o.className="designbase-wc-indicator__dot-core";const c=document.createDocumentFragment();c.append(o),s&&i&&(a||this.progress>0)&&c.append(this.renderDotRing()),t.append(this.renderStep(e,["designbase-wc-indicator__dot",i&&"designbase-wc-indicator__dot--active"].filter(Boolean).join(" "),c))}return t}renderPlaybackButton(){const e=document.createElement("button");return e.type="button",e.className="designbase-wc-indicator__playback-button",e.disabled=this.hasAttribute("playback-disabled"),e.setAttribute("aria-label",this.resolvedPlaying?"일시정지":"재생"),e.append(t(this.resolvedPlaying?"pause":"play")),e.addEventListener("click",()=>{if(this.hasAttribute("playback-disabled"))return;const t=!this.resolvedPlaying;this.isPlayingControlled?t?this.setAttribute("playing",""):(this.removeAttribute("playing"),this.pausedProgress=this.progress):(this.isPlayingInternal=t,t||(this.pausedProgress=this.progress)),this.syncRootClasses(),this.syncPlaybackButton(),this.startTimer(),this.dispatchEvent(new CustomEvent("db-playing-change",{detail:{playing:t},bubbles:!0,composed:!0}))}),e}renderNumbers(){const t=document.createElement("div");t.className=["designbase-wc-indicator__numbers",this.numberBackground&&"designbase-wc-indicator__numbers--bg"].filter(Boolean).join(" ");const e=document.createElement("span");e.className="designbase-wc-indicator__current",e.textContent=String(this.resolvedCurrent+1);const i=document.createElement("span");i.className="designbase-wc-indicator__separator",i.textContent="/";const s=document.createElement("span");return s.className="designbase-wc-indicator__total",s.textContent=String(this.total),t.append(e,i,s),t}renderSlide(){const t=this.direction,e=this.resolvedCurrent,i=document.createElement("div");i.className="designbase-wc-indicator__track";const s=document.createElement("div");s.className="designbase-wc-indicator__track-thumb";const r=100/this.total;if("vertical"===t?(s.style.height=`${r}%`,s.style.transform=`translateY(${100*e}%)`):(s.style.width=`${r}%`,s.style.transform=`translateX(${100*e}%)`),this.timer&&this.resolvedPlaying){const e=document.createElement("div");e.className="designbase-wc-indicator__track-fill",e.style.transform="vertical"===t?`scaleY(${this.progress})`:`scaleX(${this.progress})`,s.append(e)}return i.append(s),i}renderScaleFill(t){const e=document.createElement("span");return e.className=t,e.style.transform="vertical"===this.direction?`scaleY(${this.progress})`:`scaleX(${this.progress})`,e}renderLine(){const t=document.createDocumentFragment(),e=this.timer,i=this.resolvedPlaying,s=this.resolvedCurrent;for(let r=0;r<this.total;r+=1){const n=r===s,a=e&&n&&i?this.renderScaleFill("designbase-wc-indicator__line-fill"):void 0;t.append(this.renderStep(r,["designbase-wc-indicator__line-segment",n&&!e&&"designbase-wc-indicator__line-segment--active",n&&e&&"designbase-wc-indicator__line-segment--current"].filter(Boolean).join(" "),a))}return t}renderDotLine(){const t=document.createDocumentFragment(),e=this.timer,i=this.resolvedPlaying,s=this.resolvedCurrent;for(let r=0;r<this.total;r+=1){const n=r===s,a=e&&n&&i?this.renderScaleFill("designbase-wc-indicator__dot-line-fill"):void 0;t.append(this.renderStep(r,["designbase-wc-indicator__dot-line-item",n&&!e&&"designbase-wc-indicator__dot-line-item--active",n&&e&&"designbase-wc-indicator__dot-line-item--current"].filter(Boolean).join(" "),a))}return t}fillRatio(){const t=this.resolvedCurrent,e=t/this.total,i=1/this.total;return this.timer&&this.resolvedPlaying?Math.min(e+i*this.progress,1):(t+1)/this.total}renderFill(){const t=document.createElement("div");t.className="designbase-wc-indicator__track";const e=document.createElement("div");e.className="designbase-wc-indicator__track-progress";const i=100*this.fillRatio()+"%";return"vertical"===this.direction?e.style.height=i:e.style.width=i,t.append(e),t}renderContent(){const t="combined"===this.indicatorType?"dots":this.indicatorType;return"numbers"===t?this.renderNumbers():"slide"===t?this.renderSlide():"fill"===t?this.renderFill():"line"===t?this.renderLine():"dot-line"===t?this.renderDotLine():this.renderDots()}render(){const t=this.indicatorType,e=this.resolvedCurrent,i=this.total;this.syncRootClasses(),this.setAttribute("role","progressbar"),this.setAttribute("aria-valuemin","1"),this.setAttribute("aria-valuemax",String(i)),this.setAttribute("aria-valuenow",String(e+1)),this.replaceChildren();if("combined"===t||this.playback){const t=document.createElement("div");return t.className="designbase-wc-indicator__steps",t.append(this.renderContent()),void this.append(t,this.renderPlaybackButton())}this.append(this.renderContent())}}customElements.get("db-indicator")||customElements.define("db-indicator",DbIndicator);export{DbIndicator};