@designbasekorea/ui-wc 0.5.3 → 0.5.6

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

@@ -1 +1,523 @@
-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};
+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 };