@designbasekorea/ui-wc 0.5.6 → 0.6.1

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

@@ -1,523 +1 @@
-import { createDbIcon, getDbComponentIconSize } from './db-icons.js';
-import './db-button.js';
-
-const CLASS = 'designbase-wc-time-picker';
-const SIZES = ['s', 'm', 'l'];
-const FORMATS = ['12h', '24h', '12h-with-seconds', '24h-with-seconds'];
-const ITEM_HEIGHT = 40;
-class DbTimePicker extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.built = false;
-        this.isOpen = false;
-        this.hours = 12;
-        this.minutes = 0;
-        this.seconds = 0;
-        this.period = 'PM';
-        this.inputText = '';
-        this.tempHours = 12;
-        this.tempMinutes = 0;
-        this.tempSeconds = 0;
-        this.tempPeriod = 'PM';
-        this.boundDocumentMouseDown = (event) => this.handleDocumentMouseDown(event);
-    }
-    static get observedAttributes() {
-        return [
-            'value',
-            'default-value',
-            'type',
-            'format',
-            'minute-step',
-            'size',
-            'disabled',
-            'readonly',
-            'label',
-            'full-width',
-            'error',
-            'dropdown-position',
-            'open',
-        ];
-    }
-    connectedCallback() {
-        if (!this.built)
-            this.build();
-        this.parseTimeString(this.getAttribute('value') ?? this.getAttribute('default-value') ?? '12:00');
-        this.syncInputText();
-        this.render();
-        document.addEventListener('mousedown', this.boundDocumentMouseDown);
-    }
-    disconnectedCallback() {
-        document.removeEventListener('mousedown', this.boundDocumentMouseDown);
-    }
-    attributeChangedCallback(name) {
-        if (!this.built)
-            return;
-        if (name === 'value') {
-            const raw = this.getAttribute('value');
-            if (raw) {
-                this.parseTimeString(raw);
-                this.syncInputText();
-            }
-        }
-        if (name === 'open') {
-            this.isOpen = this.hasAttribute('open');
-            this.render();
-            return;
-        }
-        this.render();
-    }
-    get value() {
-        return this.getAttribute('value') || '';
-    }
-    set value(value) {
-        if (value)
-            this.setAttribute('value', value);
-        else
-            this.removeAttribute('value');
-    }
-    get format() {
-        const raw = this.getAttribute('format') || '24h';
-        return FORMATS.includes(raw) ? raw : '24h';
-    }
-    set format(value) {
-        this.setAttribute('format', value);
-    }
-    get type() {
-        return this.getAttribute('type') === 'modal' ? 'modal' : 'dropdown';
-    }
-    get is12h() {
-        return this.format === '12h' || this.format === '12h-with-seconds';
-    }
-    get showSeconds() {
-        return this.format === '12h-with-seconds' || this.format === '24h-with-seconds';
-    }
-    get minuteStep() {
-        const step = Number(this.getAttribute('minute-step') || '1');
-        return Number.isFinite(step) && step > 0 ? step : 1;
-    }
-    get disabled() {
-        return this.hasAttribute('disabled');
-    }
-    set disabled(value) {
-        this.toggleAttribute('disabled', Boolean(value));
-    }
-    get readonly() {
-        return this.hasAttribute('readonly');
-    }
-    set readonly(value) {
-        this.toggleAttribute('readonly', Boolean(value));
-    }
-    build() {
-        this.built = true;
-        this.labelEl = document.createElement('label');
-        this.labelEl.className = `${CLASS}__label`;
-        this.triggerEl = document.createElement('div');
-        this.triggerEl.className = `${CLASS}__trigger`;
-        const iconBtn = document.createElement('button');
-        iconBtn.type = 'button';
-        iconBtn.className = `${CLASS}__icon-display`;
-        iconBtn.setAttribute('aria-label', '시간 선택 열기');
-        iconBtn.addEventListener('click', () => this.toggleOpen());
-        this.inputEl = document.createElement('input');
-        this.inputEl.type = 'text';
-        this.inputEl.className = `${CLASS}__input`;
-        this.inputEl.setAttribute('aria-label', '시간 입력');
-        this.inputEl.addEventListener('click', () => this.openPicker());
-        this.inputEl.addEventListener('blur', () => this.handleInputBlur());
-        this.inputEl.addEventListener('input', () => {
-            this.inputText = this.inputEl?.value || '';
-        });
-        const toggleBtn = document.createElement('button');
-        toggleBtn.type = 'button';
-        toggleBtn.className = `${CLASS}__toggle`;
-        toggleBtn.setAttribute('aria-label', '시간 선택 열기');
-        toggleBtn.addEventListener('click', () => this.toggleOpen());
-        this.triggerEl.append(iconBtn, this.inputEl, toggleBtn);
-        this.dropdownEl = document.createElement('div');
-        this.dropdownEl.className = `${CLASS}__dropdown`;
-        this.dropdownEl.setAttribute('role', 'dialog');
-        this.dropdownEl.setAttribute('aria-modal', 'false');
-    }
-    pad2(n) {
-        return String(n).padStart(2, '0');
-    }
-    to24Hour(h12, p) {
-        return p === 'AM' ? (h12 === 12 ? 0 : h12) : h12 === 12 ? 12 : h12 + 12;
-    }
-    formatTimeString(h, m, s, p) {
-        const currentPeriod = p || this.period;
-        const periodDisplay = currentPeriod === 'AM' ? '오전' : '오후';
-        if (this.is12h) {
-            return `${periodDisplay} ${this.pad2(h)}:${this.pad2(m)}${this.showSeconds ? `:${this.pad2(s)}` : ''}`;
-        }
-        return `${this.pad2(h)}:${this.pad2(m)}${this.showSeconds ? `:${this.pad2(s)}` : ''}`;
-    }
-    toValue24(h, m, s, p) {
-        const h24 = this.is12h ? this.to24Hour(h, p || this.period) : h;
-        return `${this.pad2(h24)}:${this.pad2(m)}${this.showSeconds ? `:${this.pad2(s)}` : ''}`;
-    }
-    parseTimeString(timeStr) {
-        const s = timeStr.trim();
-        if (this.is12h) {
-            const re = this.showSeconds
-                ? /^(오전|오후|AM|PM)?\s*(0?[1-9]|1[0-2]):([0-5]\d):([0-5]\d)\s*(AM|PM|오전|오후)?$/i
-                : /^(오전|오후|AM|PM)?\s*(0?[1-9]|1[0-2]):([0-5]\d)\s*(AM|PM|오전|오후)?$/i;
-            const match = s.match(re);
-            if (match) {
-                const prefix = match[1];
-                const suffix = this.showSeconds ? match[5] : match[4];
-                const periodStr = (prefix || suffix || 'AM').toUpperCase();
-                this.hours = parseInt(match[2], 10);
-                this.minutes = parseInt(match[3], 10);
-                this.seconds = this.showSeconds ? parseInt(match[4], 10) : 0;
-                this.period = periodStr === '오후' || periodStr === 'PM' ? 'PM' : 'AM';
-                return;
-            }
-        }
-        else {
-            const re = this.showSeconds
-                ? /^([01]?\d|2[0-3]):([0-5]\d):([0-5]\d)$/
-                : /^([01]?\d|2[0-3]):([0-5]\d)$/;
-            const match = s.match(re);
-            if (match) {
-                this.hours = parseInt(match[1], 10);
-                this.minutes = parseInt(match[2], 10);
-                this.seconds = this.showSeconds ? parseInt(match[3], 10) : 0;
-            }
-        }
-    }
-    syncInputText() {
-        this.inputText = this.formatTimeString(this.hours, this.minutes, this.seconds);
-        if (this.inputEl)
-            this.inputEl.value = this.inputText;
-    }
-    emitChange(value24) {
-        this.setAttribute('value', value24);
-        this.dispatchEvent(new CustomEvent('db-change', {
-            detail: { value: value24 },
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    handleTimeChange(h, m, s = this.seconds, p) {
-        this.hours = h;
-        this.minutes = m;
-        this.seconds = s;
-        if (p)
-            this.period = p;
-        const display = this.formatTimeString(h, m, s, p);
-        this.inputText = display;
-        if (this.inputEl)
-            this.inputEl.value = display;
-        this.emitChange(this.toValue24(h, m, s, p));
-    }
-    handleInputBlur() {
-        if (!this.inputEl)
-            return;
-        const before = this.inputText;
-        this.parseTimeString(this.inputEl.value);
-        const parsed = this.formatTimeString(this.hours, this.minutes, this.seconds);
-        if (parsed !== before || this.inputEl.value.trim()) {
-            this.handleTimeChange(this.hours, this.minutes, this.seconds, this.period);
-        }
-        else {
-            this.syncInputText();
-        }
-    }
-    openPicker() {
-        if (this.disabled || this.readonly)
-            return;
-        this.isOpen = true;
-        if (this.type === 'modal') {
-            this.tempHours = this.hours;
-            this.tempMinutes = this.minutes;
-            this.tempSeconds = this.seconds;
-            this.tempPeriod = this.period;
-        }
-        this.render();
-    }
-    closePicker() {
-        this.isOpen = false;
-        this.render();
-    }
-    toggleOpen() {
-        if (this.isOpen)
-            this.closePicker();
-        else
-            this.openPicker();
-    }
-    handleDocumentMouseDown(event) {
-        if (!this.isOpen)
-            return;
-        if (!this.contains(event.target))
-            this.closePicker();
-    }
-    createWheel(options) {
-        const { label, items, value, onChange, formatter } = options;
-        const container = document.createElement('div');
-        container.className = `${CLASS}__wheel-container`;
-        const labelEl = document.createElement('div');
-        labelEl.className = `${CLASS}__wheel-label`;
-        labelEl.textContent = label;
-        container.appendChild(labelEl);
-        const viewport = document.createElement('div');
-        viewport.className = `${CLASS}__wheel-viewport`;
-        const wheel = document.createElement('div');
-        wheel.className = `${CLASS}__wheel`;
-        wheel.setAttribute('role', 'listbox');
-        wheel.setAttribute('aria-label', label);
-        let scrollTimeout = null;
-        let isProgrammatic = false;
-        let isDragging = false;
-        let startY = 0;
-        let startScrollTop = 0;
-        const indexOfValue = (v) => items.findIndex((item) => item === v);
-        const scrollToIndex = (idx, smooth = true) => {
-            const top = idx * ITEM_HEIGHT;
-            isProgrammatic = true;
-            wheel.scrollTo({ top, behavior: smooth ? 'smooth' : 'auto' });
-            window.setTimeout(() => {
-                isProgrammatic = false;
-            }, 150);
-        };
-        const fmt = (v) => (formatter ? formatter(v) : typeof v === 'number' ? this.pad2(v) : String(v));
-        items.forEach((item) => {
-            const itemEl = document.createElement('div');
-            itemEl.className = [
-                `${CLASS}__wheel-item`,
-                item === value && `${CLASS}__wheel-item--selected`,
-            ]
-                .filter(Boolean)
-                .join(' ');
-            itemEl.setAttribute('role', 'option');
-            itemEl.setAttribute('aria-selected', String(item === value));
-            itemEl.textContent = fmt(item);
-            itemEl.addEventListener('click', () => {
-                const idx = indexOfValue(item);
-                scrollToIndex(idx, true);
-                if (item !== value)
-                    onChange(item);
-            });
-            wheel.appendChild(itemEl);
-        });
-        const handleScroll = () => {
-            if (isProgrammatic)
-                return;
-            if (scrollTimeout)
-                window.clearTimeout(scrollTimeout);
-            scrollTimeout = window.setTimeout(() => {
-                const top = wheel.scrollTop;
-                const idx = Math.round(top / ITEM_HEIGHT);
-                const clamped = Math.max(0, Math.min(items.length - 1, idx));
-                const next = items[clamped];
-                scrollToIndex(clamped, true);
-                if (next !== value)
-                    onChange(next);
-            }, 120);
-        };
-        wheel.addEventListener('scroll', handleScroll);
-        wheel.addEventListener('pointerdown', (e) => {
-            isDragging = true;
-            startY = e.clientY;
-            startScrollTop = wheel.scrollTop;
-            wheel.setPointerCapture(e.pointerId);
-            wheel.style.cursor = 'grabbing';
-        });
-        wheel.addEventListener('pointermove', (e) => {
-            if (!isDragging)
-                return;
-            wheel.scrollTop = startScrollTop - (e.clientY - startY);
-        });
-        const endDrag = (e) => {
-            if (!isDragging)
-                return;
-            isDragging = false;
-            wheel.releasePointerCapture(e.pointerId);
-            wheel.style.cursor = 'grab';
-            handleScroll();
-        };
-        wheel.addEventListener('pointerup', endDrag);
-        wheel.addEventListener('pointercancel', endDrag);
-        const initialIndex = indexOfValue(value);
-        if (initialIndex >= 0) {
-            requestAnimationFrame(() => scrollToIndex(initialIndex, false));
-        }
-        const center = document.createElement('div');
-        center.className = `${CLASS}__wheel-center-indicator`;
-        center.setAttribute('aria-hidden', 'true');
-        const fadeTop = document.createElement('div');
-        fadeTop.className = `${CLASS}__wheel-fade wheel-fade--top`;
-        fadeTop.setAttribute('aria-hidden', 'true');
-        const fadeBottom = document.createElement('div');
-        fadeBottom.className = `${CLASS}__wheel-fade wheel-fade--bottom`;
-        fadeBottom.setAttribute('aria-hidden', 'true');
-        viewport.append(wheel, center, fadeTop, fadeBottom);
-        container.appendChild(viewport);
-        return container;
-    }
-    renderSelector(isModal = false) {
-        const selector = document.createElement('div');
-        selector.className = `${CLASS}__selector`;
-        const wheels = document.createElement('div');
-        wheels.className = `${CLASS}__picker-wheels`;
-        const hourItems = this.is12h
-            ? Array.from({ length: 12 }, (_, i) => i + 1)
-            : Array.from({ length: 24 }, (_, i) => i);
-        const minuteItems = Array.from({ length: Math.floor(60 / this.minuteStep) }, (_, i) => i * this.minuteStep);
-        const secondItems = Array.from({ length: 60 }, (_, i) => i);
-        const currentHours = isModal ? this.tempHours : this.hours;
-        const currentMinutes = isModal ? this.tempMinutes : this.minutes;
-        const currentSeconds = isModal ? this.tempSeconds : this.seconds;
-        const currentPeriod = isModal ? this.tempPeriod : this.period;
-        const onChange = (h, m, s, p) => {
-            if (isModal) {
-                this.tempHours = h;
-                this.tempMinutes = m;
-                this.tempSeconds = s;
-                this.tempPeriod = p;
-                return;
-            }
-            this.handleTimeChange(h, m, s, p);
-        };
-        wheels.appendChild(this.createWheel({
-            label: '시간',
-            items: hourItems,
-            value: currentHours,
-            onChange: (v) => onChange(v, currentMinutes, currentSeconds, currentPeriod),
-        }));
-        wheels.appendChild(this.createWheel({
-            label: '분',
-            items: minuteItems,
-            value: minuteItems.includes(currentMinutes) ? currentMinutes : minuteItems[0],
-            onChange: (v) => onChange(currentHours, v, currentSeconds, currentPeriod),
-        }));
-        if (this.showSeconds) {
-            wheels.appendChild(this.createWheel({
-                label: '초',
-                items: secondItems,
-                value: currentSeconds,
-                onChange: (v) => onChange(currentHours, currentMinutes, v, currentPeriod),
-            }));
-        }
-        if (this.is12h) {
-            wheels.appendChild(this.createWheel({
-                label: '오전/오후',
-                items: ['AM', 'PM'],
-                value: currentPeriod,
-                onChange: (v) => onChange(currentHours, currentMinutes, currentSeconds, v),
-                formatter: (v) => (v === 'AM' ? '오전' : '오후'),
-            }));
-        }
-        selector.appendChild(wheels);
-        if (isModal)
-            return selector;
-        const actions = document.createElement('div');
-        actions.className = `${CLASS}__dropdown-actions`;
-        const preview = document.createElement('div');
-        preview.className = `${CLASS}__preview`;
-        preview.setAttribute('aria-live', 'polite');
-        preview.appendChild(createDbIcon('clock', 16));
-        const previewTime = document.createElement('div');
-        previewTime.className = `${CLASS}__preview-time`;
-        previewTime.textContent = this.formatTimeString(currentHours, currentMinutes, currentSeconds, currentPeriod);
-        preview.appendChild(previewTime);
-        const selectBtn = document.createElement('db-button');
-        selectBtn.setAttribute('variant', 'primary');
-        selectBtn.setAttribute('size', 'm');
-        selectBtn.textContent = '선택';
-        selectBtn.addEventListener('click', () => {
-            this.handleTimeChange(currentHours, currentMinutes, currentSeconds, currentPeriod);
-            this.closePicker();
-        });
-        actions.append(preview, selectBtn);
-        selector.appendChild(actions);
-        return selector;
-    }
-    render() {
-        const size = SIZES.includes((this.getAttribute('size') || 'm'))
-            ? this.getAttribute('size') || 'm'
-            : 'm';
-        const dropdownPosition = this.getAttribute('dropdown-position') || 'bottom-start';
-        const iconSize = getDbComponentIconSize(size);
-        this.className = [
-            CLASS,
-            `${CLASS}--${size}`,
-            this.hasAttribute('full-width') && `${CLASS}--full-width`,
-            this.disabled && `${CLASS}--disabled`,
-            this.readonly && `${CLASS}--readonly`,
-            this.isOpen && `${CLASS}--open`,
-            this.hasAttribute('error') && `${CLASS}--error`,
-        ]
-            .filter(Boolean)
-            .join(' ');
-        this.replaceChildren();
-        if (!this.labelEl || !this.triggerEl || !this.inputEl || !this.dropdownEl)
-            return;
-        const label = this.getAttribute('label') || '';
-        this.labelEl.textContent = label;
-        this.labelEl.hidden = !label;
-        this.inputEl.value = this.inputText;
-        this.inputEl.placeholder = this.is12h
-            ? this.showSeconds
-                ? '12:00:00 PM'
-                : '12:00 PM'
-            : this.showSeconds
-                ? '12:00:00'
-                : '12:00';
-        this.inputEl.disabled = this.disabled;
-        this.inputEl.readOnly = this.readonly;
-        const iconBtn = this.triggerEl.querySelector(`.${CLASS}__icon-display`);
-        if (iconBtn) {
-            iconBtn.innerHTML = '';
-            iconBtn.appendChild(createDbIcon('clock', iconSize));
-            iconBtn.disabled = this.disabled;
-        }
-        const toggleBtn = this.triggerEl.querySelector(`.${CLASS}__toggle`);
-        if (toggleBtn) {
-            toggleBtn.innerHTML = '';
-            toggleBtn.appendChild(createDbIcon('chevron-down', iconSize));
-            toggleBtn.disabled = this.disabled;
-        }
-        this.dropdownEl.className = [`${CLASS}__dropdown`, `${CLASS}__dropdown--${dropdownPosition}`]
-            .filter(Boolean)
-            .join(' ');
-        this.dropdownEl.hidden = !this.isOpen;
-        if (this.isOpen && this.type === 'dropdown') {
-            this.dropdownEl.replaceChildren(this.renderSelector(false));
-        }
-        this.append(this.labelEl, this.triggerEl);
-        if (this.isOpen && this.type === 'dropdown')
-            this.appendChild(this.dropdownEl);
-        if (this.isOpen && this.type === 'modal') {
-            const modal = document.createElement('db-modal');
-            modal.setAttribute('open', 'true');
-            modal.setAttribute('title', '시간 선택');
-            modal.setAttribute('size', 's');
-            modal.addEventListener('db-close', () => this.closePicker());
-            const selector = this.renderSelector(true);
-            const footer = document.createElement('div');
-            footer.className = `${CLASS}__modal-footer`;
-            const cancelBtn = document.createElement('db-button');
-            cancelBtn.setAttribute('variant', 'secondary');
-            cancelBtn.setAttribute('size', 'm');
-            cancelBtn.textContent = '취소';
-            cancelBtn.addEventListener('click', () => this.closePicker());
-            const applyBtn = document.createElement('db-button');
-            applyBtn.setAttribute('variant', 'primary');
-            applyBtn.setAttribute('size', 'm');
-            applyBtn.textContent = '적용';
-            applyBtn.addEventListener('click', () => {
-                this.handleTimeChange(this.tempHours, this.tempMinutes, this.tempSeconds, this.tempPeriod);
-                this.closePicker();
-            });
-            footer.append(cancelBtn, applyBtn);
-            modal.append(selector, footer);
-            this.appendChild(modal);
-        }
-    }
-}
-if (!customElements.get('db-time-picker')) {
-    customElements.define('db-time-picker', DbTimePicker);
-}
-
-export { DbTimePicker };
+import{createDbIcon as t,getDbComponentIconSize as e}from"./db-icons.js";import"./db-button.js";const i="designbase-wc-time-picker",s=["s","m","l"],n=["12h","24h","12h-with-seconds","24h-with-seconds"];class DbTimePicker extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.isOpen=!1,this.hours=12,this.minutes=0,this.seconds=0,this.period="PM",this.inputText="",this.tempHours=12,this.tempMinutes=0,this.tempSeconds=0,this.tempPeriod="PM",this.boundDocumentMouseDown=t=>this.handleDocumentMouseDown(t)}static get observedAttributes(){return["value","default-value","type","format","minute-step","size","disabled","readonly","label","full-width","error","dropdown-position","open"]}connectedCallback(){this.built||this.build(),this.parseTimeString(this.getAttribute("value")??this.getAttribute("default-value")??"12:00"),this.syncInputText(),this.render(),document.addEventListener("mousedown",this.boundDocumentMouseDown)}disconnectedCallback(){document.removeEventListener("mousedown",this.boundDocumentMouseDown)}attributeChangedCallback(t){if(this.built){if("value"===t){const t=this.getAttribute("value");t&&(this.parseTimeString(t),this.syncInputText())}if("open"===t)return this.isOpen=this.hasAttribute("open"),void this.render();this.render()}}get value(){return this.getAttribute("value")||""}set value(t){t?this.setAttribute("value",t):this.removeAttribute("value")}get format(){const t=this.getAttribute("format")||"24h";return n.includes(t)?t:"24h"}set format(t){this.setAttribute("format",t)}get type(){return"modal"===this.getAttribute("type")?"modal":"dropdown"}get is12h(){return"12h"===this.format||"12h-with-seconds"===this.format}get showSeconds(){return"12h-with-seconds"===this.format||"24h-with-seconds"===this.format}get minuteStep(){const t=Number(this.getAttribute("minute-step")||"1");return Number.isFinite(t)&&t>0?t:1}get disabled(){return this.hasAttribute("disabled")}set disabled(t){this.toggleAttribute("disabled",Boolean(t))}get readonly(){return this.hasAttribute("readonly")}set readonly(t){this.toggleAttribute("readonly",Boolean(t))}build(){this.built=!0,this.labelEl=document.createElement("label"),this.labelEl.className=`${i}__label`,this.triggerEl=document.createElement("div"),this.triggerEl.className=`${i}__trigger`;const t=document.createElement("button");t.type="button",t.className=`${i}__icon-display`,t.setAttribute("aria-label","시간 선택 열기"),t.addEventListener("click",()=>this.toggleOpen()),this.inputEl=document.createElement("input"),this.inputEl.type="text",this.inputEl.className=`${i}__input`,this.inputEl.setAttribute("aria-label","시간 입력"),this.inputEl.addEventListener("click",()=>this.openPicker()),this.inputEl.addEventListener("blur",()=>this.handleInputBlur()),this.inputEl.addEventListener("input",()=>{this.inputText=this.inputEl?.value||""});const e=document.createElement("button");e.type="button",e.className=`${i}__toggle`,e.setAttribute("aria-label","시간 선택 열기"),e.addEventListener("click",()=>this.toggleOpen()),this.triggerEl.append(t,this.inputEl,e),this.dropdownEl=document.createElement("div"),this.dropdownEl.className=`${i}__dropdown`,this.dropdownEl.setAttribute("role","dialog"),this.dropdownEl.setAttribute("aria-modal","false")}pad2(t){return String(t).padStart(2,"0")}to24Hour(t,e){return"AM"===e?12===t?0:t:12===t?12:t+12}formatTimeString(t,e,i,s){const n="AM"===(s||this.period)?"오전":"오후";return this.is12h?`${n} ${this.pad2(t)}:${this.pad2(e)}${this.showSeconds?`:${this.pad2(i)}`:""}`:`${this.pad2(t)}:${this.pad2(e)}${this.showSeconds?`:${this.pad2(i)}`:""}`}toValue24(t,e,i,s){const n=this.is12h?this.to24Hour(t,s||this.period):t;return`${this.pad2(n)}:${this.pad2(e)}${this.showSeconds?`:${this.pad2(i)}`:""}`}parseTimeString(t){const e=t.trim();if(this.is12h){const t=this.showSeconds?/^(오전|오후|AM|PM)?\s*(0?[1-9]|1[0-2]):([0-5]\d):([0-5]\d)\s*(AM|PM|오전|오후)?$/i:/^(오전|오후|AM|PM)?\s*(0?[1-9]|1[0-2]):([0-5]\d)\s*(AM|PM|오전|오후)?$/i,i=e.match(t);if(i){const t=i[1],e=this.showSeconds?i[5]:i[4],s=(t||e||"AM").toUpperCase();return this.hours=parseInt(i[2],10),this.minutes=parseInt(i[3],10),this.seconds=this.showSeconds?parseInt(i[4],10):0,void(this.period="오후"===s||"PM"===s?"PM":"AM")}}else{const t=this.showSeconds?/^([01]?\d|2[0-3]):([0-5]\d):([0-5]\d)$/:/^([01]?\d|2[0-3]):([0-5]\d)$/,i=e.match(t);i&&(this.hours=parseInt(i[1],10),this.minutes=parseInt(i[2],10),this.seconds=this.showSeconds?parseInt(i[3],10):0)}}syncInputText(){this.inputText=this.formatTimeString(this.hours,this.minutes,this.seconds),this.inputEl&&(this.inputEl.value=this.inputText)}emitChange(t){this.setAttribute("value",t),this.dispatchEvent(new CustomEvent("db-change",{detail:{value:t},bubbles:!0,composed:!0}))}handleTimeChange(t,e,i=this.seconds,s){this.hours=t,this.minutes=e,this.seconds=i,s&&(this.period=s);const n=this.formatTimeString(t,e,i,s);this.inputText=n,this.inputEl&&(this.inputEl.value=n),this.emitChange(this.toValue24(t,e,i,s))}handleInputBlur(){if(!this.inputEl)return;const t=this.inputText;this.parseTimeString(this.inputEl.value);this.formatTimeString(this.hours,this.minutes,this.seconds)!==t||this.inputEl.value.trim()?this.handleTimeChange(this.hours,this.minutes,this.seconds,this.period):this.syncInputText()}openPicker(){this.disabled||this.readonly||(this.isOpen=!0,"modal"===this.type&&(this.tempHours=this.hours,this.tempMinutes=this.minutes,this.tempSeconds=this.seconds,this.tempPeriod=this.period),this.render())}closePicker(){this.isOpen=!1,this.render()}toggleOpen(){this.isOpen?this.closePicker():this.openPicker()}handleDocumentMouseDown(t){this.isOpen&&(this.contains(t.target)||this.closePicker())}createWheel(t){const{label:e,items:s,value:n,onChange:r,formatter:o}=t,h=document.createElement("div");h.className=`${i}__wheel-container`;const d=document.createElement("div");d.className=`${i}__wheel-label`,d.textContent=e,h.appendChild(d);const l=document.createElement("div");l.className=`${i}__wheel-viewport`;const a=document.createElement("div");a.className=`${i}__wheel`,a.setAttribute("role","listbox"),a.setAttribute("aria-label",e);let c=null,u=!1,p=!1,m=0,b=0;const indexOfValue=t=>s.findIndex(e=>e===t),scrollToIndex=(t,e=!0)=>{const i=40*t;u=!0,a.scrollTo({top:i,behavior:e?"smooth":"auto"}),window.setTimeout(()=>{u=!1},150)},fmt=t=>o?o(t):"number"==typeof t?this.pad2(t):String(t);s.forEach(t=>{const e=document.createElement("div");e.className=[`${i}__wheel-item`,t===n&&`${i}__wheel-item--selected`].filter(Boolean).join(" "),e.setAttribute("role","option"),e.setAttribute("aria-selected",String(t===n)),e.textContent=fmt(t),e.addEventListener("click",()=>{const e=indexOfValue(t);scrollToIndex(e,!0),t!==n&&r(t)}),a.appendChild(e)});const handleScroll=()=>{u||(c&&window.clearTimeout(c),c=window.setTimeout(()=>{const t=a.scrollTop,e=Math.round(t/40),i=Math.max(0,Math.min(s.length-1,e)),o=s[i];scrollToIndex(i,!0),o!==n&&r(o)},120))};a.addEventListener("scroll",handleScroll),a.addEventListener("pointerdown",t=>{p=!0,m=t.clientY,b=a.scrollTop,a.setPointerCapture(t.pointerId),a.style.cursor="grabbing"}),a.addEventListener("pointermove",t=>{p&&(a.scrollTop=b-(t.clientY-m))});const endDrag=t=>{p&&(p=!1,a.releasePointerCapture(t.pointerId),a.style.cursor="grab",handleScroll())};a.addEventListener("pointerup",endDrag),a.addEventListener("pointercancel",endDrag);const E=indexOfValue(n);E>=0&&requestAnimationFrame(()=>scrollToIndex(E,!1));const g=document.createElement("div");g.className=`${i}__wheel-center-indicator`,g.setAttribute("aria-hidden","true");const v=document.createElement("div");v.className=`${i}__wheel-fade wheel-fade--top`,v.setAttribute("aria-hidden","true");const w=document.createElement("div");return w.className=`${i}__wheel-fade wheel-fade--bottom`,w.setAttribute("aria-hidden","true"),l.append(a,g,v,w),h.appendChild(l),h}renderSelector(e=!1){const s=document.createElement("div");s.className=`${i}__selector`;const n=document.createElement("div");n.className=`${i}__picker-wheels`;const r=this.is12h?Array.from({length:12},(t,e)=>e+1):Array.from({length:24},(t,e)=>e),o=Array.from({length:Math.floor(60/this.minuteStep)},(t,e)=>e*this.minuteStep),h=Array.from({length:60},(t,e)=>e),d=e?this.tempHours:this.hours,l=e?this.tempMinutes:this.minutes,a=e?this.tempSeconds:this.seconds,c=e?this.tempPeriod:this.period,onChange=(t,i,s,n)=>{if(e)return this.tempHours=t,this.tempMinutes=i,this.tempSeconds=s,void(this.tempPeriod=n);this.handleTimeChange(t,i,s,n)};if(n.appendChild(this.createWheel({label:"시간",items:r,value:d,onChange:t=>onChange(t,l,a,c)})),n.appendChild(this.createWheel({label:"분",items:o,value:o.includes(l)?l:o[0],onChange:t=>onChange(d,t,a,c)})),this.showSeconds&&n.appendChild(this.createWheel({label:"초",items:h,value:a,onChange:t=>onChange(d,l,t,c)})),this.is12h&&n.appendChild(this.createWheel({label:"오전/오후",items:["AM","PM"],value:c,onChange:t=>onChange(d,l,a,t),formatter:t=>"AM"===t?"오전":"오후"})),s.appendChild(n),e)return s;const u=document.createElement("div");u.className=`${i}__dropdown-actions`;const p=document.createElement("div");p.className=`${i}__preview`,p.setAttribute("aria-live","polite"),p.appendChild(t("clock",16));const m=document.createElement("div");m.className=`${i}__preview-time`,m.textContent=this.formatTimeString(d,l,a,c),p.appendChild(m);const b=document.createElement("db-button");return b.setAttribute("variant","primary"),b.setAttribute("size","m"),b.textContent="선택",b.addEventListener("click",()=>{this.handleTimeChange(d,l,a,c),this.closePicker()}),u.append(p,b),s.appendChild(u),s}render(){const n=s.includes(this.getAttribute("size")||"m")&&this.getAttribute("size")||"m",r=this.getAttribute("dropdown-position")||"bottom-start",o=e(n);if(this.className=[i,`${i}--${n}`,this.hasAttribute("full-width")&&`${i}--full-width`,this.disabled&&`${i}--disabled`,this.readonly&&`${i}--readonly`,this.isOpen&&`${i}--open`,this.hasAttribute("error")&&`${i}--error`].filter(Boolean).join(" "),this.replaceChildren(),!(this.labelEl&&this.triggerEl&&this.inputEl&&this.dropdownEl))return;const h=this.getAttribute("label")||"";this.labelEl.textContent=h,this.labelEl.hidden=!h,this.inputEl.value=this.inputText,this.inputEl.placeholder=this.is12h?this.showSeconds?"12:00:00 PM":"12:00 PM":this.showSeconds?"12:00:00":"12:00",this.inputEl.disabled=this.disabled,this.inputEl.readOnly=this.readonly;const d=this.triggerEl.querySelector(`.${i}__icon-display`);d&&(d.innerHTML="",d.appendChild(t("clock",o)),d.disabled=this.disabled);const l=this.triggerEl.querySelector(`.${i}__toggle`);if(l&&(l.innerHTML="",l.appendChild(t("chevron-down",o)),l.disabled=this.disabled),this.dropdownEl.className=[`${i}__dropdown`,`${i}__dropdown--${r}`].filter(Boolean).join(" "),this.dropdownEl.hidden=!this.isOpen,this.isOpen&&"dropdown"===this.type&&this.dropdownEl.replaceChildren(this.renderSelector(!1)),this.append(this.labelEl,this.triggerEl),this.isOpen&&"dropdown"===this.type&&this.appendChild(this.dropdownEl),this.isOpen&&"modal"===this.type){const t=document.createElement("db-modal");t.setAttribute("open","true"),t.setAttribute("title","시간 선택"),t.setAttribute("size","s"),t.addEventListener("db-close",()=>this.closePicker());const e=this.renderSelector(!0),s=document.createElement("div");s.className=`${i}__modal-footer`;const n=document.createElement("db-button");n.setAttribute("variant","secondary"),n.setAttribute("size","m"),n.textContent="취소",n.addEventListener("click",()=>this.closePicker());const r=document.createElement("db-button");r.setAttribute("variant","primary"),r.setAttribute("size","m"),r.textContent="적용",r.addEventListener("click",()=>{this.handleTimeChange(this.tempHours,this.tempMinutes,this.tempSeconds,this.tempPeriod),this.closePicker()}),s.append(n,r),t.append(e,s),this.appendChild(t)}}}customElements.get("db-time-picker")||customElements.define("db-time-picker",DbTimePicker);export{DbTimePicker};