@designbasekorea/ui-wc 0.5.6 → 0.6.0

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

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