@designbasekorea/ui-wc 0.5.5 → 0.5.6

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

@@ -1 +1,837 @@
-import{createDbIcon as t,getDbComponentIconSize as e}from"./db-icons.js";import"./db-button.js";import"./db-modal.js";import{startOfDay as i,parseISODate as s,DEFAULT_DATE_PICKER_PRESETS as n,formatDisplayDate as a,toISODate as r,detectActivePresetId as l,addMonths as d,generateWeekdays as o,generateCalendarGrid as h,formatPanelInputDate as u}from"./date-picker-utils.js";const c="designbase-wc-date-picker",p=["s","m","l"],m=["default","outlined","filled"],isRangeValue=t=>Boolean(t)&&"object"==typeof t&&!Array.isArray(t)&&"start"in t&&"end"in t;class DbDatePicker extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.isOpen=!1,this.currentMonth=new Date,this.viewStartMonth=new Date,this.rangeStart=null,this.hoveredDate=null,this.activePresetId="custom",this.inputText="",this.boundDocumentMouseDown=t=>this.handleDocumentMouseDown(t)}static get observedAttributes(){return["mode","layout","type","inline","value","default-value","min-date","max-date","size","variant","disabled","readonly","label","full-width","error","locale","start-of-week","show-outside-days","dropdown-position","open","events"]}connectedCallback(){this.built||this.build(),this.readInitialValue(),this.render(),document.addEventListener("mousedown",this.boundDocumentMouseDown)}disconnectedCallback(){document.removeEventListener("mousedown",this.boundDocumentMouseDown)}attributeChangedCallback(t){if(this.built){if("value"===t&&(this.readAttributeValue(),this.syncInputText()),"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 mode(){const t=this.getAttribute("mode")||"single";return"range"===t?"range":"multiple"===t?"multiple":"single"}set mode(t){this.setAttribute("mode",t)}get isPanelLayout(){return"panel"===this.getAttribute("layout")}get effectiveMode(){return this.isPanelLayout?"range":this.mode}get inline(){return this.hasAttribute("inline")}set inline(t){this.toggleAttribute("inline",Boolean(t))}get type(){return"modal"===this.getAttribute("type")?"modal":"dropdown"}get locale(){return this.getAttribute("locale")||"ko-KR"}get startOfWeek(){return"monday"===this.getAttribute("start-of-week")?"monday":"sunday"}get showOutsideDays(){return"false"!==this.getAttribute("show-outside-days")}get usesPendingValue(){return this.isPanelLayout||"modal"===this.type}get today(){return i(new Date)}get minDate(){return s(this.getAttribute("min-date"))}get maxDate(){return s(this.getAttribute("max-date"))}get presets(){return this.isPanelLayout?n:[]}get events(){const t=this.getAttribute("events");if(!t)return[];try{const e=JSON.parse(t);return Array.isArray(e)?e:[]}catch{return[]}}build(){this.built=!0,this.labelEl=document.createElement("label"),this.labelEl.className=`${c}__label`,this.triggerEl=document.createElement("div"),this.triggerEl.className=`${c}__trigger`;const t=document.createElement("button");t.type="button",t.className=`${c}__icon-display`,t.setAttribute("aria-label","날짜 선택 열기"),t.addEventListener("click",()=>this.toggleOpen()),this.inputEl=document.createElement("input"),this.inputEl.type="text",this.inputEl.className=`${c}__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=`${c}__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=`${c}__dropdown`,this.dropdownEl.setAttribute("role","dialog"),this.dropdownEl.setAttribute("aria-modal","false"),this.calendarHost=document.createElement("div"),this.dropdownEl.appendChild(this.calendarHost)}readInitialValue(){const t=this.getAttribute("value")??this.getAttribute("default-value");if(t&&(this.selectedValue=this.parseValue(t)),this.tempValue=this.selectedValue,this.syncInputText(),isRangeValue(this.selectedValue)){const t=s(this.selectedValue.start);t&&(this.viewStartMonth=new Date(t))}else if("string"==typeof this.selectedValue){const t=s(this.selectedValue);t&&(this.currentMonth=new Date(t))}}readAttributeValue(){const t=this.getAttribute("value");if(!t)return this.selectedValue=void 0,void(this.tempValue=void 0);this.selectedValue=this.parseValue(t),this.isOpen&&this.usesPendingValue||(this.tempValue=this.selectedValue)}parseValue(t){if(t){if("multiple"===this.effectiveMode||t.trim().startsWith("["))try{const e=JSON.parse(t);if(Array.isArray(e))return e.filter(t=>Boolean(s(t)))}catch{return}if("range"===this.effectiveMode||t.trim().startsWith("{"))try{const e=JSON.parse(t);if(e?.start&&e?.end)return{start:e.start,end:e.end}}catch{return}return s(t)?t:void 0}}serializeValue(t){return t?"string"==typeof t?t:JSON.stringify(t):""}formatDisplay(t){if(!t)return"";if("string"==typeof t){const e=s(t);return e?a(e,this.locale):""}if(Array.isArray(t))return t.map(t=>s(t)).filter(Boolean).map(t=>a(t,this.locale)).join(", ");const e=s(t.start),i=s(t.end);return e&&i?t.start===t.end?a(e,this.locale):`${a(e,this.locale)} ~ ${a(i,this.locale)}`:""}syncInputText(){this.inputText=this.formatDisplay(this.selectedValue),this.inputEl&&(this.inputEl.value=this.inputText)}getWorkingValue(){return"range"===this.effectiveMode&&this.rangeStart?this.tempValue??this.selectedValue:this.usesPendingValue&&(this.isOpen||this.inline)?this.tempValue:this.selectedValue}presetContext(){return{today:this.today,startOfWeek:this.startOfWeek,minDate:this.minDate??void 0,maxDate:this.maxDate??void 0}}isDateValid(t){return!(this.minDate&&t<this.minDate)&&!(this.maxDate&&t>this.maxDate)}emitChange(t){const e=this.serializeValue(t);e?this.setAttribute("value",e):this.removeAttribute("value"),this.dispatchEvent(new CustomEvent("db-change",{detail:{value:t??null},bubbles:!0,composed:!0}))}applyValue(t,e=!this.usesPendingValue){if(e)return this.selectedValue=t,this.tempValue=t,this.syncInputText(),void this.emitChange(t);this.tempValue=t,this.renderCalendar()}handleDateClick(t){if(this.disabled||this.readonly||!this.isDateValid(t))return;this.isPanelLayout&&(this.activePresetId="custom");const e=this.getWorkingValue();if("single"===this.effectiveMode){const e=r(t);return this.applyValue(e,!this.usesPendingValue),this.inline||this.isPanelLayout||this.closePicker(),void this.render()}if("multiple"===this.effectiveMode){const i=r(t),s=Array.isArray(e)?e:[],n=s.includes(i)?s.filter(t=>t!==i):[...s,i];return this.applyValue(n,!this.usesPendingValue),void this.render()}if(!this.rangeStart)return this.rangeStart=t,this.applyValue({start:r(t),end:r(t)},!1),void this.renderCalendar();const i=this.rangeStart,s=t,n=i>s?{start:r(s),end:r(i)}:{start:r(i),end:r(s)};this.rangeStart=null,this.applyValue(n,!0),this.inline||this.isPanelLayout||this.closePicker(),this.render()}handlePresetSelect(t){if(this.activePresetId=t.id,this.rangeStart=null,"custom"===t.id)return void this.renderCalendar();const e=t.getRange(this.presetContext());if(!e)return;const i={start:r(e.start),end:r(e.end)};this.viewStartMonth=new Date(e.start),this.applyValue(i,!this.usesPendingValue),this.render()}handlePendingApply(){this.selectedValue=this.tempValue,this.syncInputText(),this.emitChange(this.tempValue),this.rangeStart=null,this.closePicker(),this.render()}handlePendingCancel(){this.tempValue=this.selectedValue,this.rangeStart=null,this.activePresetId=l(isRangeValue(this.selectedValue)?{start:s(this.selectedValue.start),end:s(this.selectedValue.end)}:void 0,this.presets,this.presetContext()),this.closePicker(),this.render()}handleInputBlur(){if(!this.inputEl)return;const t=this.inputEl.value.trim();if(t.match(/^(\d{4})-(\d{2})-(\d{2})$/)){const e=s(t);if(e&&this.isDateValid(e)){const t=r(e);return this.applyValue(t,!0),void this.render()}}this.syncInputText()}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))}openPicker(){this.disabled||this.readonly||(this.isOpen=!0,this.usesPendingValue&&(this.tempValue=this.selectedValue,this.activePresetId=l(isRangeValue(this.selectedValue)?{start:s(this.selectedValue.start),end:s(this.selectedValue.end)}:void 0,this.presets,this.presetContext())),this.render())}closePicker(){this.isOpen=!1,this.rangeStart=null,this.hoveredDate=null,this.render()}toggleOpen(){this.isOpen?this.closePicker():this.openPicker()}handleDocumentMouseDown(t){this.isOpen&&!this.inline&&(this.contains(t.target)||(this.usesPendingValue&&(this.tempValue=this.selectedValue),this.closePicker()))}isDateSelected(t){const e=r(t),i=this.getWorkingValue();return"single"===this.effectiveMode?"string"==typeof i&&i===e:"multiple"===this.effectiveMode?Array.isArray(i)&&i.includes(e):!(!this.rangeStart||r(this.rangeStart)!==e)||!!isRangeValue(i)&&(i.start===e||i.end===e)}isInRange(t){if("range"!==this.effectiveMode)return!1;let e=null,i=null;if(this.rangeStart)e=this.rangeStart,i=this.hoveredDate;else{const t=this.getWorkingValue();isRangeValue(t)&&(e=s(t.start),i=s(t.end))}if(!e)return!1;const n=r(t),a=r(e),l=i?r(i):a;return n>=a&&n<=l}renderDateCell(t,e){const i=t.getMonth()===e.getMonth()&&t.getFullYear()===e.getFullYear(),n=t.toDateString()===this.today.toDateString(),a=this.isDateSelected(t),r=this.isInRange(t),l=0===t.getDay()||6===t.getDay(),d=this.events.filter(e=>{const i=s(e.date);return!!i&&i.toDateString()===t.toDateString()}),o=this.getWorkingValue(),h=isRangeValue(o)?s(o.end)?.toDateString():void 0,u=isRangeValue(o)?s(o.start)?.toDateString():void 0,p=document.createElement("button");p.type="button",p.className=[`${c}__date`,!i&&this.showOutsideDays&&`${c}__date--outside`,n&&`${c}__date--today`,a&&`${c}__date--selected`,r&&!a&&`${c}__date--in-range`,"range"===this.effectiveMode&&(this.rangeStart?.toDateString()===t.toDateString()||u===t.toDateString())&&`${c}__date--range-start`,"range"===this.effectiveMode&&h===t.toDateString()&&`${c}__date--range-end`,l&&`${c}__date--weekend`,!this.isDateValid(t)&&`${c}__date--disabled`,d.length>0&&`${c}__date--has-events`].filter(Boolean).join(" "),p.disabled=!this.isDateValid(t)||this.disabled||this.readonly,p.addEventListener("click",()=>this.handleDateClick(t));const m=document.createElement("span");if(m.className=`${c}__date-number`,m.textContent=String(t.getDate()),p.appendChild(m),d.length>0){const t=document.createElement("div");t.className=`${c}__events`,d.slice(0,3).forEach(e=>{const i=document.createElement("div");i.className=`${c}__event ${c}__event--${e.type||"dot"}`,e.color&&(i.style.backgroundColor=e.color),e.label&&(i.title=e.label),t.appendChild(i)}),p.appendChild(t)}return p}renderSingleMonth(i,s={}){const{showPrev:n=!1,showNext:a=!1}=s,r=this.getAttribute("size")||"m",l=e(r),u=document.createElement("div");u.className=`${c}__month`;const p=document.createElement("div");if(p.className=`${c}__header`,n){const e=document.createElement("button");e.type="button",e.className=`${c}__nav-button`,e.setAttribute("aria-label","이전 달"),e.disabled=this.disabled||this.readonly,e.appendChild(t("chevron-left",l)),e.addEventListener("click",()=>{this.isPanelLayout?this.viewStartMonth=d(this.viewStartMonth,-1):this.currentMonth=d(this.currentMonth,-1),this.renderCalendar()}),p.appendChild(e)}else{const t=document.createElement("span");t.className=`${c}__nav-spacer`,t.setAttribute("aria-hidden","true"),p.appendChild(t)}const m=document.createElement("div");if(m.className=`${c}__current-month`,m.textContent=i.toLocaleDateString(this.locale,{year:"numeric",month:"long"}),p.appendChild(m),a){const e=document.createElement("button");e.type="button",e.className=`${c}__nav-button`,e.setAttribute("aria-label","다음 달"),e.disabled=this.disabled||this.readonly,e.appendChild(t("chevron-right",l)),e.addEventListener("click",()=>{this.isPanelLayout?this.viewStartMonth=d(this.viewStartMonth,1):this.currentMonth=d(this.currentMonth,1),this.renderCalendar()}),p.appendChild(e)}else{const t=document.createElement("span");t.className=`${c}__nav-spacer`,t.setAttribute("aria-hidden","true"),p.appendChild(t)}u.appendChild(p);const g=document.createElement("div");g.className=`${c}__weekdays`,o(this.startOfWeek).forEach(t=>{const e=document.createElement("div");e.className=`${c}__weekday`,e.textContent=t,g.appendChild(e)}),u.appendChild(g);const b=document.createElement("div");b.className=`${c}__grid`;const v=this.isPanelLayout;return h(i,this.startOfWeek,v).forEach((t,e)=>{if(!t){const t=document.createElement("span");return t.className=`${c}__date ${c}__date--empty`,t.setAttribute("aria-hidden","true"),t.dataset.index=String(e),void b.appendChild(t)}const s=t.getMonth()===i.getMonth()&&t.getFullYear()===i.getFullYear();if(!this.showOutsideDays&&!s){const t=document.createElement("span");return t.className=`${c}__date ${c}__date--empty`,t.setAttribute("aria-hidden","true"),t.dataset.index=String(e),void b.appendChild(t)}b.appendChild(this.renderDateCell(t,i))}),u.appendChild(b),u}renderDefaultCalendar(){const t=document.createElement("div");t.className=`${c}__selector`;const e=this.isPanelLayout?this.viewStartMonth:this.currentMonth;if(t.appendChild(this.renderSingleMonth(e,{showPrev:!0,showNext:!0})),!this.isPanelLayout){const e=document.createElement("div");e.className=`${c}__footer`;const i=document.createElement("button");i.type="button",i.className=`${c}__today-button`,i.textContent="오늘",i.disabled=this.disabled||this.readonly,i.addEventListener("click",()=>{const t=new Date;this.isPanelLayout?this.viewStartMonth=t:this.currentMonth=t,this.renderCalendar()}),e.appendChild(i),t.appendChild(e)}return t}renderPanelCalendar(){const t=document.createElement("div");t.className=`${c}__panel`;const e=document.createElement("div");e.className=`${c}__presets`,e.setAttribute("role","listbox"),e.setAttribute("aria-label","기간 프리셋"),this.presets.forEach(t=>{const i=document.createElement("button");i.type="button",i.className=[`${c}__preset`,this.activePresetId===t.id&&`${c}__preset--active`].filter(Boolean).join(" "),i.setAttribute("role","option"),i.setAttribute("aria-selected",String(this.activePresetId===t.id)),i.textContent=t.label,i.addEventListener("click",()=>this.handlePresetSelect(t)),e.appendChild(i)}),t.appendChild(e);const i=document.createElement("div");i.className=`${c}__panel-main`;const n=document.createElement("div");n.className=`${c}__months ${c}__months--count-2`,[0,1].forEach(t=>{const e=d(this.viewStartMonth,t);n.appendChild(this.renderSingleMonth(e,{showPrev:0===t,showNext:1===t}))}),i.appendChild(n);const a=document.createElement("div");a.className=`${c}__panel-footer`;const r=isRangeValue(this.tempValue)?this.tempValue:void 0,l=document.createElement("div");l.className=`${c}__range-display`;const o=document.createElement("span");o.className=`${c}__range-text`,o.textContent=r?.start&&s(r.start)?u(s(r.start),this.locale):"시작일";const h=document.createElement("span");h.className=`${c}__range-separator`,h.textContent="–";const p=document.createElement("span");p.className=`${c}__range-text`,p.textContent=r?.end&&s(r.end)?u(s(r.end),this.locale):"종료일",l.append(o,h,p),a.appendChild(l);const m=document.createElement("div");m.className=`${c}__panel-actions`;const g=document.createElement("db-button");g.setAttribute("variant","secondary"),g.setAttribute("size","m"),g.textContent="취소",g.addEventListener("click",()=>this.handlePendingCancel());const b=document.createElement("db-button");return b.setAttribute("variant","primary"),b.setAttribute("size","m"),b.textContent="적용",b.addEventListener("click",()=>this.handlePendingApply()),m.append(g,b),a.appendChild(m),i.appendChild(a),t.appendChild(i),t}renderCalendar(){this.calendarHost&&(this.calendarHost.replaceChildren(),this.calendarHost.appendChild(this.isPanelLayout?this.renderPanelCalendar():this.renderDefaultCalendar()))}render(){const i=p.includes(this.getAttribute("size")||"m")&&this.getAttribute("size")||"m",s=m.includes(this.getAttribute("variant")||"default")&&this.getAttribute("variant")||"default",n=this.getAttribute("dropdown-position")||"bottom-start",a=e(i);if(this.className=[c,this.inline?`${c}--size-${i}`:`${c}--${i}`,`${c}--variant-${s}`,this.hasAttribute("full-width")&&`${c}--full-width`,this.disabled&&`${c}--disabled`,this.readonly&&`${c}--readonly`,this.isOpen&&`${c}--open`,this.hasAttribute("error")&&`${c}--error`,this.isPanelLayout&&`${c}--panel`].filter(Boolean).join(" "),this.replaceChildren(),this.inline)return this.calendarHost=document.createElement("div"),this.appendChild(this.calendarHost),void this.renderCalendar();if(!(this.labelEl&&this.triggerEl&&this.inputEl&&this.dropdownEl))return;const r=this.getAttribute("label")||"";this.labelEl.textContent=r,this.labelEl.hidden=!r,this.inputEl.value=this.inputText,this.inputEl.placeholder=this.isPanelLayout?"기간을 선택하세요":"날짜를 선택하세요",this.inputEl.disabled=this.disabled,this.inputEl.readOnly=this.readonly;const l=this.triggerEl.querySelector(`.${c}__icon-display`);l&&(l.innerHTML="",l.appendChild(t("calendar",a)),l.disabled=this.disabled);const d=this.triggerEl.querySelector(`.${c}__toggle`);if(d&&(d.innerHTML="",d.appendChild(t("chevron-down",a)),d.disabled=this.disabled),this.dropdownEl.className=[`${c}__dropdown`,`${c}__dropdown--${n}`,this.isPanelLayout&&`${c}__dropdown--panel`].filter(Boolean).join(" "),this.dropdownEl.hidden=!this.isOpen||"modal"===this.type,this.calendarHost=document.createElement("div"),this.dropdownEl.replaceChildren(this.calendarHost),this.renderCalendar(),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",this.isPanelLayout?"기간 선택":"날짜 선택"),t.setAttribute("size",this.isPanelLayout?"l":"s"),t.addEventListener("db-close",()=>this.handlePendingCancel());const e=document.createElement("div");if(this.calendarHost=e,this.renderCalendar(),t.append(e),this.usesPendingValue){const e=document.createElement("div");e.className=`${c}__modal-footer`;const i=document.createElement("db-button");i.setAttribute("variant","secondary"),i.setAttribute("size","m"),i.textContent="취소",i.addEventListener("click",()=>this.handlePendingCancel());const s=document.createElement("db-button");s.setAttribute("variant","primary"),s.setAttribute("size","m"),s.textContent="적용",s.addEventListener("click",()=>this.handlePendingApply()),e.append(i,s),t.append(e)}this.appendChild(t)}}}customElements.get("db-date-picker")||customElements.define("db-date-picker",DbDatePicker);export{DbDatePicker};
+import { createDbIcon, getDbComponentIconSize } from './db-icons.js';
+import './db-button.js';
+import './db-modal.js';
+import { startOfDay, parseISODate, DEFAULT_DATE_PICKER_PRESETS, formatDisplayDate, toISODate, detectActivePresetId, addMonths, generateWeekdays, generateCalendarGrid, formatPanelInputDate } from './date-picker-utils.js';
+
+const CLASS = 'designbase-wc-date-picker';
+const SIZES = ['s', 'm', 'l'];
+const VARIANTS = ['default', 'outlined', 'filled'];
+const isRangeValue = (value) => Boolean(value) && typeof value === 'object' && !Array.isArray(value) && 'start' in value && 'end' in value;
+class DbDatePicker extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.built = false;
+        this.isOpen = false;
+        this.currentMonth = new Date();
+        this.viewStartMonth = new Date();
+        this.rangeStart = null;
+        this.hoveredDate = null;
+        this.activePresetId = 'custom';
+        this.inputText = '';
+        this.boundDocumentMouseDown = (event) => this.handleDocumentMouseDown(event);
+    }
+    static get observedAttributes() {
+        return [
+            'mode',
+            'layout',
+            'type',
+            'inline',
+            'value',
+            'default-value',
+            'min-date',
+            'max-date',
+            'size',
+            'variant',
+            'disabled',
+            'readonly',
+            'label',
+            'full-width',
+            'error',
+            'locale',
+            'start-of-week',
+            'show-outside-days',
+            'dropdown-position',
+            'open',
+            'events',
+        ];
+    }
+    connectedCallback() {
+        if (!this.built)
+            this.build();
+        this.readInitialValue();
+        this.render();
+        document.addEventListener('mousedown', this.boundDocumentMouseDown);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('mousedown', this.boundDocumentMouseDown);
+    }
+    attributeChangedCallback(name) {
+        if (!this.built)
+            return;
+        if (name === 'value') {
+            this.readAttributeValue();
+            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 mode() {
+        const mode = this.getAttribute('mode') || 'single';
+        if (mode === 'range')
+            return 'range';
+        if (mode === 'multiple')
+            return 'multiple';
+        return 'single';
+    }
+    set mode(value) {
+        this.setAttribute('mode', value);
+    }
+    get isPanelLayout() {
+        return this.getAttribute('layout') === 'panel';
+    }
+    get effectiveMode() {
+        return this.isPanelLayout ? 'range' : this.mode;
+    }
+    get inline() {
+        return this.hasAttribute('inline');
+    }
+    set inline(value) {
+        this.toggleAttribute('inline', Boolean(value));
+    }
+    get type() {
+        return this.getAttribute('type') === 'modal' ? 'modal' : 'dropdown';
+    }
+    get locale() {
+        return this.getAttribute('locale') || 'ko-KR';
+    }
+    get startOfWeek() {
+        return this.getAttribute('start-of-week') === 'monday' ? 'monday' : 'sunday';
+    }
+    get showOutsideDays() {
+        return this.getAttribute('show-outside-days') !== 'false';
+    }
+    get usesPendingValue() {
+        return this.isPanelLayout || this.type === 'modal';
+    }
+    get today() {
+        return startOfDay(new Date());
+    }
+    get minDate() {
+        return parseISODate(this.getAttribute('min-date'));
+    }
+    get maxDate() {
+        return parseISODate(this.getAttribute('max-date'));
+    }
+    get presets() {
+        return this.isPanelLayout ? DEFAULT_DATE_PICKER_PRESETS : [];
+    }
+    get events() {
+        const raw = this.getAttribute('events');
+        if (!raw)
+            return [];
+        try {
+            const parsed = JSON.parse(raw);
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    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');
+        this.calendarHost = document.createElement('div');
+        this.dropdownEl.appendChild(this.calendarHost);
+    }
+    readInitialValue() {
+        const raw = this.getAttribute('value') ?? this.getAttribute('default-value');
+        if (raw)
+            this.selectedValue = this.parseValue(raw);
+        this.tempValue = this.selectedValue;
+        this.syncInputText();
+        if (isRangeValue(this.selectedValue)) {
+            const start = parseISODate(this.selectedValue.start);
+            if (start)
+                this.viewStartMonth = new Date(start);
+        }
+        else if (typeof this.selectedValue === 'string') {
+            const date = parseISODate(this.selectedValue);
+            if (date)
+                this.currentMonth = new Date(date);
+        }
+    }
+    readAttributeValue() {
+        const raw = this.getAttribute('value');
+        if (!raw) {
+            this.selectedValue = undefined;
+            this.tempValue = undefined;
+            return;
+        }
+        this.selectedValue = this.parseValue(raw);
+        if (!this.isOpen || !this.usesPendingValue) {
+            this.tempValue = this.selectedValue;
+        }
+    }
+    parseValue(raw) {
+        if (!raw)
+            return undefined;
+        if (this.effectiveMode === 'multiple' || raw.trim().startsWith('[')) {
+            try {
+                const parsed = JSON.parse(raw);
+                if (Array.isArray(parsed)) {
+                    return parsed.filter((item) => Boolean(parseISODate(item)));
+                }
+            }
+            catch {
+                return undefined;
+            }
+        }
+        if (this.effectiveMode === 'range' || raw.trim().startsWith('{')) {
+            try {
+                const parsed = JSON.parse(raw);
+                if (parsed?.start && parsed?.end) {
+                    return { start: parsed.start, end: parsed.end };
+                }
+            }
+            catch {
+                return undefined;
+            }
+        }
+        return parseISODate(raw) ? raw : undefined;
+    }
+    serializeValue(value) {
+        if (!value)
+            return '';
+        if (typeof value === 'string')
+            return value;
+        return JSON.stringify(value);
+    }
+    formatDisplay(value) {
+        if (!value)
+            return '';
+        if (typeof value === 'string') {
+            const date = parseISODate(value);
+            return date ? formatDisplayDate(date, this.locale) : '';
+        }
+        if (Array.isArray(value)) {
+            return value
+                .map((item) => parseISODate(item))
+                .filter(Boolean)
+                .map((item) => formatDisplayDate(item, this.locale))
+                .join(', ');
+        }
+        const start = parseISODate(value.start);
+        const end = parseISODate(value.end);
+        if (!start || !end)
+            return '';
+        if (value.start === value.end)
+            return formatDisplayDate(start, this.locale);
+        return `${formatDisplayDate(start, this.locale)} ~ ${formatDisplayDate(end, this.locale)}`;
+    }
+    syncInputText() {
+        this.inputText = this.formatDisplay(this.selectedValue);
+        if (this.inputEl)
+            this.inputEl.value = this.inputText;
+    }
+    getWorkingValue() {
+        if (this.effectiveMode === 'range' && this.rangeStart) {
+            return this.tempValue ?? this.selectedValue;
+        }
+        if (this.usesPendingValue && (this.isOpen || this.inline))
+            return this.tempValue;
+        return this.selectedValue;
+    }
+    presetContext() {
+        return {
+            today: this.today,
+            startOfWeek: this.startOfWeek,
+            minDate: this.minDate ?? undefined,
+            maxDate: this.maxDate ?? undefined,
+        };
+    }
+    isDateValid(date) {
+        if (this.minDate && date < this.minDate)
+            return false;
+        if (this.maxDate && date > this.maxDate)
+            return false;
+        return true;
+    }
+    emitChange(value) {
+        const serialized = this.serializeValue(value);
+        if (serialized)
+            this.setAttribute('value', serialized);
+        else
+            this.removeAttribute('value');
+        this.dispatchEvent(new CustomEvent('db-change', {
+            detail: { value: value ?? null },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    applyValue(value, commit = !this.usesPendingValue) {
+        if (commit) {
+            this.selectedValue = value;
+            this.tempValue = value;
+            this.syncInputText();
+            this.emitChange(value);
+            return;
+        }
+        this.tempValue = value;
+        this.renderCalendar();
+    }
+    handleDateClick(date) {
+        if (this.disabled || this.readonly || !this.isDateValid(date))
+            return;
+        if (this.isPanelLayout)
+            this.activePresetId = 'custom';
+        const working = this.getWorkingValue();
+        if (this.effectiveMode === 'single') {
+            const iso = toISODate(date);
+            this.applyValue(iso, !this.usesPendingValue);
+            if (!this.inline && !this.isPanelLayout)
+                this.closePicker();
+            this.render();
+            return;
+        }
+        if (this.effectiveMode === 'multiple') {
+            const iso = toISODate(date);
+            const current = Array.isArray(working) ? working : [];
+            const exists = current.includes(iso);
+            const next = exists ? current.filter((item) => item !== iso) : [...current, iso];
+            this.applyValue(next, !this.usesPendingValue);
+            this.render();
+            return;
+        }
+        if (!this.rangeStart) {
+            this.rangeStart = date;
+            // 첫 클릭은 임시 값으로만 유지해서 controlled re-render에 상태가 끊기지 않게 한다.
+            this.applyValue({ start: toISODate(date), end: toISODate(date) }, false);
+            this.renderCalendar();
+            return;
+        }
+        const start = this.rangeStart;
+        const end = date;
+        const next = start > end
+            ? { start: toISODate(end), end: toISODate(start) }
+            : { start: toISODate(start), end: toISODate(end) };
+        this.rangeStart = null;
+        this.applyValue(next, true);
+        if (!this.inline && !this.isPanelLayout)
+            this.closePicker();
+        this.render();
+    }
+    handlePresetSelect(preset) {
+        this.activePresetId = preset.id;
+        this.rangeStart = null;
+        if (preset.id === 'custom') {
+            this.renderCalendar();
+            return;
+        }
+        const range = preset.getRange(this.presetContext());
+        if (!range)
+            return;
+        const value = { start: toISODate(range.start), end: toISODate(range.end) };
+        this.viewStartMonth = new Date(range.start);
+        this.applyValue(value, !this.usesPendingValue);
+        this.render();
+    }
+    handlePendingApply() {
+        this.selectedValue = this.tempValue;
+        this.syncInputText();
+        this.emitChange(this.tempValue);
+        this.rangeStart = null;
+        this.closePicker();
+        this.render();
+    }
+    handlePendingCancel() {
+        this.tempValue = this.selectedValue;
+        this.rangeStart = null;
+        this.activePresetId = detectActivePresetId(isRangeValue(this.selectedValue)
+            ? { start: parseISODate(this.selectedValue.start), end: parseISODate(this.selectedValue.end) }
+            : undefined, this.presets, this.presetContext());
+        this.closePicker();
+        this.render();
+    }
+    handleInputBlur() {
+        if (!this.inputEl)
+            return;
+        const text = this.inputEl.value.trim();
+        const match = text.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+        if (match) {
+            const date = parseISODate(text);
+            if (date && this.isDateValid(date)) {
+                const iso = toISODate(date);
+                this.applyValue(iso, true);
+                this.render();
+                return;
+            }
+        }
+        this.syncInputText();
+    }
+    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));
+    }
+    openPicker() {
+        if (this.disabled || this.readonly)
+            return;
+        this.isOpen = true;
+        if (this.usesPendingValue) {
+            this.tempValue = this.selectedValue;
+            this.activePresetId = detectActivePresetId(isRangeValue(this.selectedValue)
+                ? {
+                    start: parseISODate(this.selectedValue.start),
+                    end: parseISODate(this.selectedValue.end),
+                }
+                : undefined, this.presets, this.presetContext());
+        }
+        this.render();
+    }
+    closePicker() {
+        this.isOpen = false;
+        this.rangeStart = null;
+        this.hoveredDate = null;
+        this.render();
+    }
+    toggleOpen() {
+        if (this.isOpen)
+            this.closePicker();
+        else
+            this.openPicker();
+    }
+    handleDocumentMouseDown(event) {
+        if (!this.isOpen || this.inline)
+            return;
+        if (!this.contains(event.target)) {
+            if (this.usesPendingValue)
+                this.tempValue = this.selectedValue;
+            this.closePicker();
+        }
+    }
+    isDateSelected(date) {
+        const iso = toISODate(date);
+        const working = this.getWorkingValue();
+        if (this.effectiveMode === 'single')
+            return typeof working === 'string' && working === iso;
+        if (this.effectiveMode === 'multiple')
+            return Array.isArray(working) && working.includes(iso);
+        if (this.rangeStart && toISODate(this.rangeStart) === iso)
+            return true;
+        if (isRangeValue(working)) {
+            return working.start === iso || working.end === iso;
+        }
+        return false;
+    }
+    isInRange(date) {
+        if (this.effectiveMode !== 'range')
+            return false;
+        let start = null;
+        let end = null;
+        if (this.rangeStart) {
+            start = this.rangeStart;
+            end = this.hoveredDate;
+        }
+        else {
+            const working = this.getWorkingValue();
+            if (isRangeValue(working)) {
+                start = parseISODate(working.start);
+                end = parseISODate(working.end);
+            }
+        }
+        if (!start)
+            return false;
+        const iso = toISODate(date);
+        const startIso = toISODate(start);
+        const endIso = end ? toISODate(end) : startIso;
+        return iso >= startIso && iso <= endIso;
+    }
+    renderDateCell(date, monthContext) {
+        const isCurrentMonth = date.getMonth() === monthContext.getMonth() && date.getFullYear() === monthContext.getFullYear();
+        const isToday = date.toDateString() === this.today.toDateString();
+        const isSelected = this.isDateSelected(date);
+        const inRange = this.isInRange(date);
+        const isWeekend = date.getDay() === 0 || date.getDay() === 6;
+        const dateEvents = this.events.filter((event) => {
+            const eventDate = parseISODate(event.date);
+            return eventDate ? eventDate.toDateString() === date.toDateString() : false;
+        });
+        const working = this.getWorkingValue();
+        const rangeEnd = isRangeValue(working) ? parseISODate(working.end)?.toDateString() : undefined;
+        const rangeStart = isRangeValue(working) ? parseISODate(working.start)?.toDateString() : undefined;
+        const btn = document.createElement('button');
+        btn.type = 'button';
+        btn.className = [
+            `${CLASS}__date`,
+            !isCurrentMonth && this.showOutsideDays && `${CLASS}__date--outside`,
+            isToday && `${CLASS}__date--today`,
+            isSelected && `${CLASS}__date--selected`,
+            inRange && !isSelected && `${CLASS}__date--in-range`,
+            this.effectiveMode === 'range' &&
+                (this.rangeStart?.toDateString() === date.toDateString() ||
+                    rangeStart === date.toDateString()) &&
+                `${CLASS}__date--range-start`,
+            this.effectiveMode === 'range' && rangeEnd === date.toDateString() && `${CLASS}__date--range-end`,
+            isWeekend && `${CLASS}__date--weekend`,
+            !this.isDateValid(date) && `${CLASS}__date--disabled`,
+            dateEvents.length > 0 && `${CLASS}__date--has-events`,
+        ]
+            .filter(Boolean)
+            .join(' ');
+        btn.disabled = !this.isDateValid(date) || this.disabled || this.readonly;
+        btn.addEventListener('click', () => this.handleDateClick(date));
+        const num = document.createElement('span');
+        num.className = `${CLASS}__date-number`;
+        num.textContent = String(date.getDate());
+        btn.appendChild(num);
+        if (dateEvents.length > 0) {
+            const events = document.createElement('div');
+            events.className = `${CLASS}__events`;
+            dateEvents.slice(0, 3).forEach((event) => {
+                const dot = document.createElement('div');
+                dot.className = `${CLASS}__event ${CLASS}__event--${event.type || 'dot'}`;
+                if (event.color)
+                    dot.style.backgroundColor = event.color;
+                if (event.label)
+                    dot.title = event.label;
+                events.appendChild(dot);
+            });
+            btn.appendChild(events);
+        }
+        return btn;
+    }
+    renderSingleMonth(monthDate, options = {}) {
+        const { showPrev = false, showNext = false } = options;
+        const size = this.getAttribute('size') || 'm';
+        const iconSize = getDbComponentIconSize(size);
+        const monthEl = document.createElement('div');
+        monthEl.className = `${CLASS}__month`;
+        const header = document.createElement('div');
+        header.className = `${CLASS}__header`;
+        if (showPrev) {
+            const prev = document.createElement('button');
+            prev.type = 'button';
+            prev.className = `${CLASS}__nav-button`;
+            prev.setAttribute('aria-label', '이전 달');
+            prev.disabled = this.disabled || this.readonly;
+            prev.appendChild(createDbIcon('chevron-left', iconSize));
+            prev.addEventListener('click', () => {
+                if (this.isPanelLayout)
+                    this.viewStartMonth = addMonths(this.viewStartMonth, -1);
+                else
+                    this.currentMonth = addMonths(this.currentMonth, -1);
+                this.renderCalendar();
+            });
+            header.appendChild(prev);
+        }
+        else {
+            const spacer = document.createElement('span');
+            spacer.className = `${CLASS}__nav-spacer`;
+            spacer.setAttribute('aria-hidden', 'true');
+            header.appendChild(spacer);
+        }
+        const title = document.createElement('div');
+        title.className = `${CLASS}__current-month`;
+        title.textContent = monthDate.toLocaleDateString(this.locale, { year: 'numeric', month: 'long' });
+        header.appendChild(title);
+        if (showNext) {
+            const next = document.createElement('button');
+            next.type = 'button';
+            next.className = `${CLASS}__nav-button`;
+            next.setAttribute('aria-label', '다음 달');
+            next.disabled = this.disabled || this.readonly;
+            next.appendChild(createDbIcon('chevron-right', iconSize));
+            next.addEventListener('click', () => {
+                if (this.isPanelLayout)
+                    this.viewStartMonth = addMonths(this.viewStartMonth, 1);
+                else
+                    this.currentMonth = addMonths(this.currentMonth, 1);
+                this.renderCalendar();
+            });
+            header.appendChild(next);
+        }
+        else {
+            const spacer = document.createElement('span');
+            spacer.className = `${CLASS}__nav-spacer`;
+            spacer.setAttribute('aria-hidden', 'true');
+            header.appendChild(spacer);
+        }
+        monthEl.appendChild(header);
+        const weekdaysEl = document.createElement('div');
+        weekdaysEl.className = `${CLASS}__weekdays`;
+        generateWeekdays(this.startOfWeek).forEach((day) => {
+            const cell = document.createElement('div');
+            cell.className = `${CLASS}__weekday`;
+            cell.textContent = day;
+            weekdaysEl.appendChild(cell);
+        });
+        monthEl.appendChild(weekdaysEl);
+        const grid = document.createElement('div');
+        grid.className = `${CLASS}__grid`;
+        const monthOnlyGrid = this.isPanelLayout;
+        generateCalendarGrid(monthDate, this.startOfWeek, monthOnlyGrid).forEach((date, index) => {
+            if (!date) {
+                const empty = document.createElement('span');
+                empty.className = `${CLASS}__date ${CLASS}__date--empty`;
+                empty.setAttribute('aria-hidden', 'true');
+                empty.dataset.index = String(index);
+                grid.appendChild(empty);
+                return;
+            }
+            const isCurrentMonth = date.getMonth() === monthDate.getMonth() && date.getFullYear() === monthDate.getFullYear();
+            if (!this.showOutsideDays && !isCurrentMonth) {
+                const empty = document.createElement('span');
+                empty.className = `${CLASS}__date ${CLASS}__date--empty`;
+                empty.setAttribute('aria-hidden', 'true');
+                empty.dataset.index = String(index);
+                grid.appendChild(empty);
+                return;
+            }
+            grid.appendChild(this.renderDateCell(date, monthDate));
+        });
+        monthEl.appendChild(grid);
+        return monthEl;
+    }
+    renderDefaultCalendar() {
+        const selector = document.createElement('div');
+        selector.className = `${CLASS}__selector`;
+        const monthDate = this.isPanelLayout ? this.viewStartMonth : this.currentMonth;
+        selector.appendChild(this.renderSingleMonth(monthDate, { showPrev: true, showNext: true }));
+        if (!this.isPanelLayout) {
+            const footer = document.createElement('div');
+            footer.className = `${CLASS}__footer`;
+            const todayBtn = document.createElement('button');
+            todayBtn.type = 'button';
+            todayBtn.className = `${CLASS}__today-button`;
+            todayBtn.textContent = '오늘';
+            todayBtn.disabled = this.disabled || this.readonly;
+            todayBtn.addEventListener('click', () => {
+                const now = new Date();
+                if (this.isPanelLayout)
+                    this.viewStartMonth = now;
+                else
+                    this.currentMonth = now;
+                this.renderCalendar();
+            });
+            footer.appendChild(todayBtn);
+            selector.appendChild(footer);
+        }
+        return selector;
+    }
+    renderPanelCalendar() {
+        const panel = document.createElement('div');
+        panel.className = `${CLASS}__panel`;
+        const presetsEl = document.createElement('div');
+        presetsEl.className = `${CLASS}__presets`;
+        presetsEl.setAttribute('role', 'listbox');
+        presetsEl.setAttribute('aria-label', '기간 프리셋');
+        this.presets.forEach((preset) => {
+            const btn = document.createElement('button');
+            btn.type = 'button';
+            btn.className = [
+                `${CLASS}__preset`,
+                this.activePresetId === preset.id && `${CLASS}__preset--active`,
+            ]
+                .filter(Boolean)
+                .join(' ');
+            btn.setAttribute('role', 'option');
+            btn.setAttribute('aria-selected', String(this.activePresetId === preset.id));
+            btn.textContent = preset.label;
+            btn.addEventListener('click', () => this.handlePresetSelect(preset));
+            presetsEl.appendChild(btn);
+        });
+        panel.appendChild(presetsEl);
+        const main = document.createElement('div');
+        main.className = `${CLASS}__panel-main`;
+        const months = document.createElement('div');
+        months.className = `${CLASS}__months ${CLASS}__months--count-2`;
+        [0, 1].forEach((index) => {
+            const monthDate = addMonths(this.viewStartMonth, index);
+            months.appendChild(this.renderSingleMonth(monthDate, {
+                showPrev: index === 0,
+                showNext: index === 1,
+            }));
+        });
+        main.appendChild(months);
+        const panelFooter = document.createElement('div');
+        panelFooter.className = `${CLASS}__panel-footer`;
+        const rangeValue = isRangeValue(this.tempValue) ? this.tempValue : undefined;
+        const rangeDisplay = document.createElement('div');
+        rangeDisplay.className = `${CLASS}__range-display`;
+        const startText = document.createElement('span');
+        startText.className = `${CLASS}__range-text`;
+        startText.textContent =
+            rangeValue?.start && parseISODate(rangeValue.start)
+                ? formatPanelInputDate(parseISODate(rangeValue.start), this.locale)
+                : '시작일';
+        const sep = document.createElement('span');
+        sep.className = `${CLASS}__range-separator`;
+        sep.textContent = '–';
+        const endText = document.createElement('span');
+        endText.className = `${CLASS}__range-text`;
+        endText.textContent =
+            rangeValue?.end && parseISODate(rangeValue.end)
+                ? formatPanelInputDate(parseISODate(rangeValue.end), this.locale)
+                : '종료일';
+        rangeDisplay.append(startText, sep, endText);
+        panelFooter.appendChild(rangeDisplay);
+        const actions = document.createElement('div');
+        actions.className = `${CLASS}__panel-actions`;
+        const cancelBtn = document.createElement('db-button');
+        cancelBtn.setAttribute('variant', 'secondary');
+        cancelBtn.setAttribute('size', 'm');
+        cancelBtn.textContent = '취소';
+        cancelBtn.addEventListener('click', () => this.handlePendingCancel());
+        const applyBtn = document.createElement('db-button');
+        applyBtn.setAttribute('variant', 'primary');
+        applyBtn.setAttribute('size', 'm');
+        applyBtn.textContent = '적용';
+        applyBtn.addEventListener('click', () => this.handlePendingApply());
+        actions.append(cancelBtn, applyBtn);
+        panelFooter.appendChild(actions);
+        main.appendChild(panelFooter);
+        panel.appendChild(main);
+        return panel;
+    }
+    renderCalendar() {
+        if (!this.calendarHost)
+            return;
+        this.calendarHost.replaceChildren();
+        this.calendarHost.appendChild(this.isPanelLayout ? this.renderPanelCalendar() : this.renderDefaultCalendar());
+    }
+    render() {
+        const size = SIZES.includes((this.getAttribute('size') || 'm'))
+            ? this.getAttribute('size') || 'm'
+            : 'm';
+        const variant = VARIANTS.includes((this.getAttribute('variant') || 'default'))
+            ? this.getAttribute('variant') || 'default'
+            : 'default';
+        const dropdownPosition = this.getAttribute('dropdown-position') || 'bottom-start';
+        const iconSize = getDbComponentIconSize(size);
+        this.className = [
+            CLASS,
+            this.inline ? `${CLASS}--size-${size}` : `${CLASS}--${size}`,
+            `${CLASS}--variant-${variant}`,
+            this.hasAttribute('full-width') && `${CLASS}--full-width`,
+            this.disabled && `${CLASS}--disabled`,
+            this.readonly && `${CLASS}--readonly`,
+            this.isOpen && `${CLASS}--open`,
+            this.hasAttribute('error') && `${CLASS}--error`,
+            this.isPanelLayout && `${CLASS}--panel`,
+        ]
+            .filter(Boolean)
+            .join(' ');
+        this.replaceChildren();
+        if (this.inline) {
+            this.calendarHost = document.createElement('div');
+            this.appendChild(this.calendarHost);
+            this.renderCalendar();
+            return;
+        }
+        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.isPanelLayout ? '기간을 선택하세요' : '날짜를 선택하세요';
+        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('calendar', 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}`,
+            this.isPanelLayout && `${CLASS}__dropdown--panel`,
+        ]
+            .filter(Boolean)
+            .join(' ');
+        this.dropdownEl.hidden = !this.isOpen || this.type === 'modal';
+        this.calendarHost = document.createElement('div');
+        this.dropdownEl.replaceChildren(this.calendarHost);
+        this.renderCalendar();
+        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', this.isPanelLayout ? '기간 선택' : '날짜 선택');
+            modal.setAttribute('size', this.isPanelLayout ? 'l' : 's');
+            modal.addEventListener('db-close', () => this.handlePendingCancel());
+            const host = document.createElement('div');
+            this.calendarHost = host;
+            this.renderCalendar();
+            modal.append(host);
+            if (this.usesPendingValue) {
+                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.handlePendingCancel());
+                const applyBtn = document.createElement('db-button');
+                applyBtn.setAttribute('variant', 'primary');
+                applyBtn.setAttribute('size', 'm');
+                applyBtn.textContent = '적용';
+                applyBtn.addEventListener('click', () => this.handlePendingApply());
+                footer.append(cancelBtn, applyBtn);
+                modal.append(footer);
+            }
+            this.appendChild(modal);
+        }
+    }
+}
+if (!customElements.get('db-date-picker')) {
+    customElements.define('db-date-picker', DbDatePicker);
+}
+
+export { DbDatePicker };