@designbasekorea/ui-wc 0.5.6 → 0.6.0

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

@@ -1,675 +1 @@
-import { createDbIcon, getDbComponentIconSize } from './db-icons.js';
-import { parseISODate, toISODate } from './date-picker-utils.js';
-import './db-modal.js';
-import './db-input.js';
-import './db-select.js';
-import './db-date-picker.js';
-import './db-time-picker.js';
-import './db-button.js';
-
-const CLASS = 'designbase-wc-calendar';
-const EVENT_TYPE_OPTIONS = [
-    { value: 'meeting', label: '회의' },
-    { value: 'task', label: '업무' },
-    { value: 'reminder', label: '알림' },
-    { value: 'birthday', label: '생일' },
-    { value: 'holiday', label: '휴일' },
-    { value: 'custom', label: '기타' },
-];
-const COLOR_OPTIONS = [
-    { value: '#17a2b8', label: '청록' },
-    { value: '#0d6efd', label: '파랑' },
-    { value: '#198754', label: '초록' },
-    { value: '#ffc107', label: '노랑' },
-    { value: '#dc3545', label: '빨강' },
-    { value: '#6f42c1', label: '보라' },
-];
-class DbCalendar extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.built = false;
-        this.currentView = 'month';
-        this.selectedDate = new Date();
-        this._events = [];
-        this.showEventModal = false;
-        this.selectedEvent = null;
-        this.isEditing = false;
-        this.draggedEvent = null;
-        this.dragOverDate = null;
-        this.selectedDateRange = { start: null, end: null };
-        this.eventForm = {
-            title: '',
-            description: '',
-            startTime: '09:00',
-            endTime: '10:00',
-            type: 'meeting',
-            color: '#17a2b8',
-            isAllDay: false,
-            location: '',
-        };
-    }
-    static get observedAttributes() {
-        return [
-            'view',
-            'current-date',
-            'events',
-            'locale',
-            'show-weekends',
-            'highlight-today',
-            'show-outside-days',
-        ];
-    }
-    connectedCallback() {
-        if (!this.built)
-            this.build();
-        this.readAttributes();
-        this.render();
-    }
-    attributeChangedCallback() {
-        if (!this.built)
-            return;
-        this.readAttributes();
-        this.render();
-    }
-    get locale() {
-        return this.getAttribute('locale') || 'ko-KR';
-    }
-    get showWeekends() {
-        return this.getAttribute('show-weekends') !== 'false';
-    }
-    get highlightToday() {
-        return this.getAttribute('highlight-today') !== 'false';
-    }
-    get showOutsideDays() {
-        return this.getAttribute('show-outside-days') !== 'false';
-    }
-    get events() {
-        return this._events;
-    }
-    set events(value) {
-        if (typeof value === 'string') {
-            this.setAttribute('events', value);
-            return;
-        }
-        this._events = Array.isArray(value) ? value : [];
-        this.setAttribute('events', JSON.stringify(this._events));
-    }
-    build() {
-        this.built = true;
-        this.headerEl = document.createElement('div');
-        this.headerEl.className = `${CLASS}__header`;
-        this.bodyEl = document.createElement('div');
-        this.bodyEl.className = `${CLASS}__body`;
-        this.modalEl = document.createElement('db-modal');
-        this.modalEl.setAttribute('size', 'm');
-        this.modalEl.addEventListener('db-close', () => this.closeModal());
-    }
-    readAttributes() {
-        this.currentView = 'month';
-        const current = parseISODate(this.getAttribute('current-date'));
-        if (current)
-            this.selectedDate = current;
-        const rawEvents = this.getAttribute('events');
-        if (rawEvents) {
-            try {
-                const parsed = JSON.parse(rawEvents);
-                this._events = Array.isArray(parsed) ? parsed : [];
-            }
-            catch {
-                this._events = [];
-            }
-        }
-        else {
-            this._events = [];
-        }
-    }
-    isSameDate(a, b) {
-        return (a.getFullYear() === b.getFullYear() &&
-            a.getMonth() === b.getMonth() &&
-            a.getDate() === b.getDate());
-    }
-    eventsForDate(date) {
-        return this._events.filter((event) => {
-            const eventDate = parseISODate(event.date);
-            return eventDate ? this.isSameDate(eventDate, date) : false;
-        });
-    }
-    emit(name, detail) {
-        this.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
-    }
-    handleViewChange(view) {
-        this.currentView = 'month';
-        this.emit('db-view-change', { view });
-        this.render();
-    }
-    shiftMonth(delta) {
-        const next = new Date(this.selectedDate);
-        next.setMonth(next.getMonth() + delta);
-        this.selectedDate = next;
-        this.emit('db-month-change', { date: toISODate(next) });
-        this.render();
-    }
-    shiftYear(delta) {
-        const next = new Date(this.selectedDate);
-        next.setFullYear(next.getFullYear() + delta);
-        this.selectedDate = next;
-        this.emit('db-month-change', { date: toISODate(next) });
-        this.render();
-    }
-    handleDateClick(date) {
-        this.selectedDate = date;
-        this.emit('db-date-click', { date: toISODate(date) });
-        if (!this.selectedDateRange.start || (this.selectedDateRange.start && this.selectedDateRange.end)) {
-            this.selectedDateRange = { start: date, end: null };
-        }
-        else if (this.selectedDateRange.start && !this.selectedDateRange.end) {
-            if (date < this.selectedDateRange.start) {
-                this.selectedDateRange = { start: date, end: this.selectedDateRange.start };
-            }
-            else {
-                this.selectedDateRange = { start: this.selectedDateRange.start, end: date };
-            }
-        }
-        this.openAddModal(date);
-    }
-    handleDragStart(event, dragEvent) {
-        this.draggedEvent = event;
-        dragEvent.dataTransfer?.setData('text/plain', event.id);
-        dragEvent.dataTransfer?.setData('application/json', JSON.stringify(event));
-        if (dragEvent.dataTransfer)
-            dragEvent.dataTransfer.effectAllowed = 'move';
-    }
-    handleDragOver(date, dragEvent) {
-        dragEvent.preventDefault();
-        if (dragEvent.dataTransfer)
-            dragEvent.dataTransfer.dropEffect = 'move';
-        this.dragOverDate = date;
-        this.render();
-    }
-    handleDragLeave(dragEvent) {
-        const related = dragEvent.relatedTarget;
-        const current = dragEvent.currentTarget;
-        if (current && related && current.contains(related))
-            return;
-        this.dragOverDate = null;
-        this.render();
-    }
-    handleDrop(date, dragEvent) {
-        dragEvent.preventDefault();
-        if (!this.draggedEvent)
-            return;
-        const updated = { ...this.draggedEvent, date: toISODate(date) };
-        this.emit('db-event-edit', { event: updated });
-        this.draggedEvent = null;
-        this.dragOverDate = null;
-        this.render();
-    }
-    handleDragEnd() {
-        this.draggedEvent = null;
-        this.dragOverDate = null;
-        this.render();
-    }
-    handleEventClick(event, e) {
-        e.stopPropagation();
-        this.selectedEvent = event;
-        this.isEditing = true;
-        const eventDate = parseISODate(event.date);
-        if (eventDate)
-            this.selectedDate = eventDate;
-        this.eventForm = {
-            title: event.title,
-            description: event.description || '',
-            startTime: event.startTime || '09:00',
-            endTime: event.endTime || '10:00',
-            type: event.type,
-            color: event.color || '#17a2b8',
-            isAllDay: event.isAllDay || false,
-            location: event.location || '',
-        };
-        this.emit('db-event-click', { event });
-        this.showEventModal = true;
-        this.render();
-    }
-    openAddModal(date) {
-        this.selectedDate = date;
-        this.selectedEvent = null;
-        this.isEditing = false;
-        this.eventForm = {
-            title: '',
-            description: '',
-            startTime: '09:00',
-            endTime: '10:00',
-            type: 'meeting',
-            color: '#17a2b8',
-            isAllDay: false,
-            location: '',
-        };
-        this.showEventModal = true;
-        this.render();
-    }
-    closeModal() {
-        this.showEventModal = false;
-        this.selectedEvent = null;
-        this.isEditing = false;
-        this.render();
-    }
-    saveEvent() {
-        if (!this.eventForm.title.trim()) {
-            window.alert('제목을 입력해주세요.');
-            return;
-        }
-        const payload = {
-            title: this.eventForm.title.trim(),
-            description: this.eventForm.description,
-            date: toISODate(this.selectedDate),
-            startTime: this.eventForm.startTime,
-            endTime: this.eventForm.endTime,
-            type: this.eventForm.type,
-            color: this.eventForm.color,
-            isAllDay: this.eventForm.isAllDay,
-            location: this.eventForm.location,
-        };
-        if (this.isEditing && this.selectedEvent) {
-            const updated = { ...this.selectedEvent, ...payload };
-            this.emit('db-event-edit', { event: updated });
-        }
-        else {
-            this.emit('db-event-add', { event: payload });
-        }
-        this.closeModal();
-    }
-    deleteEvent() {
-        if (!this.selectedEvent)
-            return;
-        if (!window.confirm('정말로 이 일정을 삭제하시겠습니까?'))
-            return;
-        this.emit('db-event-delete', { eventId: this.selectedEvent.id });
-        this.closeModal();
-    }
-    renderHeader() {
-        if (!this.headerEl)
-            return;
-        this.headerEl.replaceChildren();
-        const nav = document.createElement('div');
-        nav.className = `${CLASS}__navigation`;
-        const iconSize = getDbComponentIconSize('m');
-        const prev = document.createElement('button');
-        prev.type = 'button';
-        prev.className = `${CLASS}__nav-button`;
-        prev.setAttribute('aria-label', '이전');
-        prev.appendChild(createDbIcon('chevron-left', iconSize));
-        prev.addEventListener('click', () => {
-            this.shiftMonth(-1);
-        });
-        const title = document.createElement('div');
-        title.className = `${CLASS}__title`;
-        title.textContent = this.selectedDate.toLocaleDateString(this.locale, {
-            year: 'numeric',
-            month: 'long',
-        });
-        const next = document.createElement('button');
-        next.type = 'button';
-        next.className = `${CLASS}__nav-button`;
-        next.setAttribute('aria-label', '다음');
-        next.appendChild(createDbIcon('chevron-right', iconSize));
-        next.addEventListener('click', () => {
-            this.shiftMonth(1);
-        });
-        nav.append(prev, title, next);
-        this.headerEl.appendChild(nav);
-    }
-    renderMonthView() {
-        const wrap = document.createElement('div');
-        wrap.className = `${CLASS}__month-view`;
-        const weekdays = document.createElement('div');
-        weekdays.className = `${CLASS}__weekdays`;
-        ['일', '월', '화', '수', '목', '금', '토'].forEach((day) => {
-            const cell = document.createElement('div');
-            cell.className = `${CLASS}__weekday`;
-            cell.textContent = day;
-            weekdays.appendChild(cell);
-        });
-        wrap.appendChild(weekdays);
-        const grid = document.createElement('div');
-        grid.className = `${CLASS}__days`;
-        const year = this.selectedDate.getFullYear();
-        const month = this.selectedDate.getMonth();
-        const firstDay = new Date(year, month, 1);
-        const startDate = new Date(firstDay);
-        startDate.setDate(startDate.getDate() - firstDay.getDay());
-        const today = new Date();
-        for (let i = 0; i < 42; i += 1) {
-            const date = new Date(startDate);
-            date.setDate(startDate.getDate() + i);
-            const isCurrentMonth = date.getMonth() === month;
-            if (!this.showOutsideDays && !isCurrentMonth)
-                continue;
-            const isWeekend = date.getDay() === 0 || date.getDay() === 6;
-            if (!this.showWeekends && isWeekend)
-                continue;
-            const dayEl = document.createElement('div');
-            const isInRange = this.selectedDateRange.start &&
-                this.selectedDateRange.end &&
-                date >= this.selectedDateRange.start &&
-                date <= this.selectedDateRange.end;
-            const isRangeStart = this.selectedDateRange.start &&
-                date.toDateString() === this.selectedDateRange.start.toDateString();
-            const isRangeEnd = this.selectedDateRange.end &&
-                date.toDateString() === this.selectedDateRange.end.toDateString();
-            const isRangeMiddle = Boolean(isInRange && !isRangeStart && !isRangeEnd);
-            dayEl.className = [
-                `${CLASS}__day`,
-                isCurrentMonth && `${CLASS}__day--current-month`,
-                this.highlightToday && date.toDateString() === today.toDateString() && `${CLASS}__day--today`,
-                this.isSameDate(date, this.selectedDate) && `${CLASS}__day--selected`,
-                isRangeStart && `${CLASS}__day--selected--start`,
-                isRangeEnd && `${CLASS}__day--selected--end`,
-                isRangeMiddle && `${CLASS}__day--selected--middle`,
-                !this.showWeekends && isWeekend && `${CLASS}__day--weekend`,
-            ]
-                .filter(Boolean)
-                .join(' ');
-            dayEl.addEventListener('click', () => this.handleDateClick(date));
-            const num = document.createElement('span');
-            num.className = `${CLASS}__day-number`;
-            num.textContent = String(date.getDate());
-            dayEl.appendChild(num);
-            const dayEvents = this.eventsForDate(date);
-            if (dayEvents.length) {
-                const eventsWrap = document.createElement('div');
-                eventsWrap.className = `${CLASS}__day-events`;
-                dayEvents.slice(0, 2).forEach((event) => {
-                    const bar = document.createElement('div');
-                    bar.className = [`${CLASS}__event-bar`, `${CLASS}__event-bar--${event.type}`]
-                        .filter(Boolean)
-                        .join(' ');
-                    if (event.color)
-                        bar.style.backgroundColor = event.color;
-                    if (this.draggedEvent?.id === event.id)
-                        bar.classList.add(`${CLASS}__event-bar--dragging`);
-                    bar.title = event.title;
-                    bar.draggable = true;
-                    const barTitle = document.createElement('span');
-                    barTitle.className = `${CLASS}__event-title`;
-                    barTitle.textContent = event.title;
-                    bar.appendChild(barTitle);
-                    bar.addEventListener('click', (e) => this.handleEventClick(event, e));
-                    bar.addEventListener('dragstart', (e) => this.handleDragStart(event, e));
-                    bar.addEventListener('dragend', () => this.handleDragEnd());
-                    eventsWrap.appendChild(bar);
-                });
-                if (dayEvents.length > 2) {
-                    const more = document.createElement('div');
-                    more.className = `${CLASS}__more-events`;
-                    more.textContent = `+${dayEvents.length - 2} more`;
-                    eventsWrap.appendChild(more);
-                }
-                dayEl.appendChild(eventsWrap);
-            }
-            const dropZone = document.createElement('div');
-            dropZone.className = [
-                `${CLASS}__drop-zone`,
-                this.dragOverDate && this.isSameDate(this.dragOverDate, date) && `${CLASS}__drop-zone--active`,
-            ]
-                .filter(Boolean)
-                .join(' ');
-            dropZone.addEventListener('dragover', (e) => this.handleDragOver(date, e));
-            dropZone.addEventListener('dragleave', (e) => this.handleDragLeave(e));
-            dropZone.addEventListener('drop', (e) => this.handleDrop(date, e));
-            dayEl.appendChild(dropZone);
-            grid.appendChild(dayEl);
-        }
-        wrap.appendChild(grid);
-        return wrap;
-    }
-    renderYearView() {
-        const wrap = document.createElement('div');
-        wrap.className = `${CLASS}__year-view`;
-        const year = this.selectedDate.getFullYear();
-        for (let month = 0; month < 12; month += 1) {
-            const monthDate = new Date(year, month, 1);
-            const monthEvents = this._events.filter((event) => {
-                const d = parseISODate(event.date);
-                return d && d.getFullYear() === year && d.getMonth() === month;
-            });
-            const cell = document.createElement('div');
-            cell.className = `${CLASS}__year-month`;
-            cell.addEventListener('click', () => {
-                this.selectedDate = monthDate;
-                this.handleViewChange('month');
-            });
-            const label = document.createElement('h3');
-            label.className = `${CLASS}__year-month-title`;
-            label.textContent = monthDate.toLocaleDateString(this.locale, { month: 'long' });
-            cell.appendChild(label);
-            if (monthEvents.length) {
-                const dots = document.createElement('div');
-                dots.className = `${CLASS}__year-month-events`;
-                monthEvents.slice(0, 4).forEach((event) => {
-                    const dot = document.createElement('span');
-                    dot.className = [`${CLASS}__year-event`, `${CLASS}__year-event--${event.type}`].join(' ');
-                    if (event.color)
-                        dot.style.backgroundColor = event.color;
-                    dots.appendChild(dot);
-                });
-                if (monthEvents.length > 4) {
-                    const more = document.createElement('span');
-                    more.className = `${CLASS}__year-more-events`;
-                    more.textContent = `+${monthEvents.length - 4} more`;
-                    dots.appendChild(more);
-                }
-                cell.appendChild(dots);
-            }
-            wrap.appendChild(cell);
-        }
-        return wrap;
-    }
-    renderWeekView() {
-        const wrap = document.createElement('div');
-        wrap.className = `${CLASS}__week-view`;
-        const today = new Date();
-        const startOfWeek = new Date(this.selectedDate);
-        startOfWeek.setDate(this.selectedDate.getDate() - this.selectedDate.getDay());
-        const header = document.createElement('div');
-        header.className = `${CLASS}__week-header`;
-        const timeSpacer = document.createElement('div');
-        timeSpacer.className = `${CLASS}__time-column-header`;
-        header.appendChild(timeSpacer);
-        for (let i = 0; i < 7; i += 1) {
-            const date = new Date(startOfWeek);
-            date.setDate(startOfWeek.getDate() + i);
-            const dayHeader = document.createElement('div');
-            dayHeader.className = [
-                `${CLASS}__week-day-header`,
-                date.toDateString() === today.toDateString() && `${CLASS}__week-day-header--today`,
-            ]
-                .filter(Boolean)
-                .join(' ');
-            const name = document.createElement('span');
-            name.className = `${CLASS}__week-day-name`;
-            name.textContent = date.toLocaleDateString(this.locale, { weekday: 'short' });
-            const number = document.createElement('span');
-            number.className = `${CLASS}__week-day-number`;
-            number.textContent = String(date.getDate());
-            dayHeader.append(name, number);
-            header.appendChild(dayHeader);
-        }
-        wrap.appendChild(header);
-        const grid = document.createElement('div');
-        grid.className = `${CLASS}__week-grid`;
-        const timeCol = document.createElement('div');
-        timeCol.className = `${CLASS}__week-time-column`;
-        for (let hour = 6; hour <= 22; hour += 1) {
-            const slot = document.createElement('div');
-            slot.className = `${CLASS}__time-slot`;
-            const label = document.createElement('span');
-            label.className = `${CLASS}__time-label`;
-            label.textContent = `${String(hour).padStart(2, '0')}:00`;
-            slot.appendChild(label);
-            timeCol.appendChild(slot);
-        }
-        grid.appendChild(timeCol);
-        const daysCol = document.createElement('div');
-        daysCol.className = `${CLASS}__week-columns`;
-        for (let i = 0; i < 7; i += 1) {
-            const date = new Date(startOfWeek);
-            date.setDate(startOfWeek.getDate() + i);
-            const dayCol = document.createElement('div');
-            dayCol.className = `${CLASS}__week-column`;
-            for (let hour = 6; hour <= 22; hour += 1) {
-                const cell = document.createElement('div');
-                cell.className = `${CLASS}__week-cell`;
-                cell.title = `${date.toLocaleDateString()} ${String(hour).padStart(2, '0')}:00`;
-                cell.addEventListener('click', () => {
-                    this.selectedDate = new Date(date);
-                    this.eventForm.startTime = `${String(hour).padStart(2, '0')}:00`;
-                    this.eventForm.endTime = `${String(hour + 1).padStart(2, '0')}:00`;
-                    this.openAddModal(this.selectedDate);
-                });
-                dayCol.appendChild(cell);
-            }
-            this.eventsForDate(date).forEach((event) => {
-                if (!event.startTime)
-                    return;
-                const [h, m] = event.startTime.split(':').map(Number);
-                const top = ((h - 6) * 60 + (m || 0)) * (48 / 60);
-                const endParts = (event.endTime || event.startTime).split(':').map(Number);
-                const endMinutes = (endParts[0] || h) * 60 + (endParts[1] || 0);
-                const startMinutes = h * 60 + (m || 0);
-                const height = Math.max(20, ((endMinutes - startMinutes) * 48) / 60);
-                const eventEl = document.createElement('div');
-                eventEl.className = [`${CLASS}__week-event`, `${CLASS}__week-event--${event.type}`]
-                    .filter(Boolean)
-                    .join(' ');
-                eventEl.textContent = event.title;
-                eventEl.title = event.title;
-                eventEl.style.backgroundColor = event.color || '#17a2b8';
-                eventEl.style.top = `${top}px`;
-                eventEl.style.height = `${height}px`;
-                eventEl.addEventListener('click', (e) => this.handleEventClick(event, e));
-                dayCol.appendChild(eventEl);
-            });
-            daysCol.appendChild(dayCol);
-        }
-        grid.appendChild(daysCol);
-        wrap.appendChild(grid);
-        return wrap;
-    }
-    renderModal() {
-        if (!this.modalEl)
-            return;
-        this.modalEl.replaceChildren();
-        if (!this.showEventModal) {
-            this.modalEl.removeAttribute('open');
-            return;
-        }
-        this.modalEl.setAttribute('open', 'true');
-        this.modalEl.setAttribute('title', this.isEditing ? '일정 편집' : '새 일정 추가');
-        const form = document.createElement('div');
-        form.className = `${CLASS}__event-form`;
-        const titleInput = document.createElement('db-input');
-        titleInput.setAttribute('label', '제목 *');
-        titleInput.setAttribute('placeholder', '일정 제목을 입력하세요');
-        titleInput.setAttribute('full-width', '');
-        titleInput.setAttribute('value', this.eventForm.title);
-        titleInput.addEventListener('db-input', ((e) => {
-            this.eventForm.title = e.detail.value;
-        }));
-        const descInput = document.createElement('db-input');
-        descInput.setAttribute('label', '설명');
-        descInput.setAttribute('placeholder', '일정 설명을 입력하세요');
-        descInput.setAttribute('full-width', '');
-        descInput.setAttribute('value', this.eventForm.description);
-        descInput.addEventListener('db-input', ((e) => {
-            this.eventForm.description = e.detail.value;
-        }));
-        const datePicker = document.createElement('db-date-picker');
-        datePicker.setAttribute('label', '날짜');
-        datePicker.setAttribute('full-width', '');
-        datePicker.setAttribute('value', toISODate(this.selectedDate));
-        datePicker.addEventListener('db-change', ((e) => {
-            const parsed = parseISODate(e.detail.value);
-            if (parsed)
-                this.selectedDate = parsed;
-        }));
-        const typeSelect = document.createElement('db-select');
-        typeSelect.setAttribute('label', '일정 타입');
-        typeSelect.setAttribute('full-width', '');
-        typeSelect.setAttribute('options', JSON.stringify(EVENT_TYPE_OPTIONS));
-        typeSelect.setAttribute('value', this.eventForm.type);
-        typeSelect.addEventListener('db-change', ((e) => {
-            this.eventForm.type = e.detail.value;
-        }));
-        const colorSelect = document.createElement('db-select');
-        colorSelect.setAttribute('label', '색상');
-        colorSelect.setAttribute('full-width', '');
-        colorSelect.setAttribute('options', JSON.stringify(COLOR_OPTIONS));
-        colorSelect.setAttribute('value', this.eventForm.color);
-        colorSelect.addEventListener('db-change', ((e) => {
-            this.eventForm.color = e.detail.value;
-        }));
-        const startPicker = document.createElement('db-time-picker');
-        startPicker.setAttribute('label', '시작 시간');
-        startPicker.setAttribute('full-width', '');
-        startPicker.setAttribute('value', this.eventForm.startTime);
-        startPicker.addEventListener('db-change', ((e) => {
-            this.eventForm.startTime = e.detail.value;
-        }));
-        const endPicker = document.createElement('db-time-picker');
-        endPicker.setAttribute('label', '종료 시간');
-        endPicker.setAttribute('full-width', '');
-        endPicker.setAttribute('value', this.eventForm.endTime);
-        endPicker.addEventListener('db-change', ((e) => {
-            this.eventForm.endTime = e.detail.value;
-        }));
-        form.append(titleInput, descInput, datePicker, typeSelect, colorSelect, startPicker, endPicker);
-        const body = document.createElement('div');
-        body.className = 'designbase-wc-modal__body';
-        body.setAttribute('data-modal-part', 'body');
-        body.appendChild(form);
-        const footer = document.createElement('div');
-        footer.className = 'designbase-wc-modal__footer';
-        footer.setAttribute('data-modal-part', 'footer');
-        const actions = document.createElement('div');
-        actions.className = `${CLASS}__modal-actions`;
-        if (this.isEditing) {
-            const deleteBtn = document.createElement('db-button');
-            deleteBtn.setAttribute('variant', 'danger');
-            deleteBtn.textContent = '삭제';
-            deleteBtn.addEventListener('click', () => this.deleteEvent());
-            actions.appendChild(deleteBtn);
-        }
-        const buttons = document.createElement('div');
-        buttons.className = `${CLASS}__modal-buttons`;
-        const cancelBtn = document.createElement('db-button');
-        cancelBtn.setAttribute('variant', 'secondary');
-        cancelBtn.textContent = '취소';
-        cancelBtn.addEventListener('click', () => this.closeModal());
-        const saveBtn = document.createElement('db-button');
-        saveBtn.setAttribute('variant', 'primary');
-        saveBtn.textContent = this.isEditing ? '수정' : '저장';
-        saveBtn.addEventListener('click', () => this.saveEvent());
-        buttons.append(cancelBtn, saveBtn);
-        actions.appendChild(buttons);
-        footer.appendChild(actions);
-        this.modalEl.append(body, footer);
-    }
-    render() {
-        this.className = CLASS;
-        this.replaceChildren();
-        if (!this.headerEl || !this.bodyEl)
-            return;
-        this.renderHeader();
-        this.bodyEl.replaceChildren();
-        this.bodyEl.appendChild(this.renderMonthView());
-        this.append(this.headerEl, this.bodyEl);
-        this.renderModal();
-        if (this.showEventModal && this.modalEl)
-            this.appendChild(this.modalEl);
-    }
-}
-if (!customElements.get('db-calendar')) {
-    customElements.define('db-calendar', DbCalendar);
-}
-
-export { DbCalendar };
+import{createDbIcon as e,getDbComponentIconSize as t}from"./db-icons.js";import{parseISODate as a,toISODate as n}from"./date-picker-utils.js";import"./db-modal.js";import"./db-input.js";import"./db-select.js";import"./db-date-picker.js";import"./db-time-picker.js";import"./db-button.js";const s="designbase-wc-calendar",i=[{value:"meeting",label:"회의"},{value:"task",label:"업무"},{value:"reminder",label:"알림"},{value:"birthday",label:"생일"},{value:"holiday",label:"휴일"},{value:"custom",label:"기타"}],d=[{value:"#17a2b8",label:"청록"},{value:"#0d6efd",label:"파랑"},{value:"#198754",label:"초록"},{value:"#ffc107",label:"노랑"},{value:"#dc3545",label:"빨강"},{value:"#6f42c1",label:"보라"}];class DbCalendar extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.currentView="month",this.selectedDate=new Date,this._events=[],this.showEventModal=!1,this.selectedEvent=null,this.isEditing=!1,this.draggedEvent=null,this.dragOverDate=null,this.selectedDateRange={start:null,end:null},this.eventForm={title:"",description:"",startTime:"09:00",endTime:"10:00",type:"meeting",color:"#17a2b8",isAllDay:!1,location:""}}static get observedAttributes(){return["view","current-date","events","locale","show-weekends","highlight-today","show-outside-days"]}connectedCallback(){this.built||this.build(),this.readAttributes(),this.render()}attributeChangedCallback(){this.built&&(this.readAttributes(),this.render())}get locale(){return this.getAttribute("locale")||"ko-KR"}get showWeekends(){return"false"!==this.getAttribute("show-weekends")}get highlightToday(){return"false"!==this.getAttribute("highlight-today")}get showOutsideDays(){return"false"!==this.getAttribute("show-outside-days")}get events(){return this._events}set events(e){"string"!=typeof e?(this._events=Array.isArray(e)?e:[],this.setAttribute("events",JSON.stringify(this._events))):this.setAttribute("events",e)}build(){this.built=!0,this.headerEl=document.createElement("div"),this.headerEl.className=`${s}__header`,this.bodyEl=document.createElement("div"),this.bodyEl.className=`${s}__body`,this.modalEl=document.createElement("db-modal"),this.modalEl.setAttribute("size","m"),this.modalEl.addEventListener("db-close",()=>this.closeModal())}readAttributes(){this.currentView="month";const e=a(this.getAttribute("current-date"));e&&(this.selectedDate=e);const t=this.getAttribute("events");if(t)try{const e=JSON.parse(t);this._events=Array.isArray(e)?e:[]}catch{this._events=[]}else this._events=[]}isSameDate(e,t){return e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()&&e.getDate()===t.getDate()}eventsForDate(e){return this._events.filter(t=>{const n=a(t.date);return!!n&&this.isSameDate(n,e)})}emit(e,t){this.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!0,composed:!0}))}handleViewChange(e){this.currentView="month",this.emit("db-view-change",{view:e}),this.render()}shiftMonth(e){const t=new Date(this.selectedDate);t.setMonth(t.getMonth()+e),this.selectedDate=t,this.emit("db-month-change",{date:n(t)}),this.render()}shiftYear(e){const t=new Date(this.selectedDate);t.setFullYear(t.getFullYear()+e),this.selectedDate=t,this.emit("db-month-change",{date:n(t)}),this.render()}handleDateClick(e){this.selectedDate=e,this.emit("db-date-click",{date:n(e)}),!this.selectedDateRange.start||this.selectedDateRange.start&&this.selectedDateRange.end?this.selectedDateRange={start:e,end:null}:this.selectedDateRange.start&&!this.selectedDateRange.end&&(e<this.selectedDateRange.start?this.selectedDateRange={start:e,end:this.selectedDateRange.start}:this.selectedDateRange={start:this.selectedDateRange.start,end:e}),this.openAddModal(e)}handleDragStart(e,t){this.draggedEvent=e,t.dataTransfer?.setData("text/plain",e.id),t.dataTransfer?.setData("application/json",JSON.stringify(e)),t.dataTransfer&&(t.dataTransfer.effectAllowed="move")}handleDragOver(e,t){t.preventDefault(),t.dataTransfer&&(t.dataTransfer.dropEffect="move"),this.dragOverDate=e,this.render()}handleDragLeave(e){const t=e.relatedTarget,a=e.currentTarget;a&&t&&a.contains(t)||(this.dragOverDate=null,this.render())}handleDrop(e,t){if(t.preventDefault(),!this.draggedEvent)return;const a={...this.draggedEvent,date:n(e)};this.emit("db-event-edit",{event:a}),this.draggedEvent=null,this.dragOverDate=null,this.render()}handleDragEnd(){this.draggedEvent=null,this.dragOverDate=null,this.render()}handleEventClick(e,t){t.stopPropagation(),this.selectedEvent=e,this.isEditing=!0;const n=a(e.date);n&&(this.selectedDate=n),this.eventForm={title:e.title,description:e.description||"",startTime:e.startTime||"09:00",endTime:e.endTime||"10:00",type:e.type,color:e.color||"#17a2b8",isAllDay:e.isAllDay||!1,location:e.location||""},this.emit("db-event-click",{event:e}),this.showEventModal=!0,this.render()}openAddModal(e){this.selectedDate=e,this.selectedEvent=null,this.isEditing=!1,this.eventForm={title:"",description:"",startTime:"09:00",endTime:"10:00",type:"meeting",color:"#17a2b8",isAllDay:!1,location:""},this.showEventModal=!0,this.render()}closeModal(){this.showEventModal=!1,this.selectedEvent=null,this.isEditing=!1,this.render()}saveEvent(){if(!this.eventForm.title.trim())return void window.alert("제목을 입력해주세요.");const e={title:this.eventForm.title.trim(),description:this.eventForm.description,date:n(this.selectedDate),startTime:this.eventForm.startTime,endTime:this.eventForm.endTime,type:this.eventForm.type,color:this.eventForm.color,isAllDay:this.eventForm.isAllDay,location:this.eventForm.location};if(this.isEditing&&this.selectedEvent){const t={...this.selectedEvent,...e};this.emit("db-event-edit",{event:t})}else this.emit("db-event-add",{event:e});this.closeModal()}deleteEvent(){this.selectedEvent&&window.confirm("정말로 이 일정을 삭제하시겠습니까?")&&(this.emit("db-event-delete",{eventId:this.selectedEvent.id}),this.closeModal())}renderHeader(){if(!this.headerEl)return;this.headerEl.replaceChildren();const a=document.createElement("div");a.className=`${s}__navigation`;const n=t("m"),i=document.createElement("button");i.type="button",i.className=`${s}__nav-button`,i.setAttribute("aria-label","이전"),i.appendChild(e("chevron-left",n)),i.addEventListener("click",()=>{this.shiftMonth(-1)});const d=document.createElement("div");d.className=`${s}__title`,d.textContent=this.selectedDate.toLocaleDateString(this.locale,{year:"numeric",month:"long"});const l=document.createElement("button");l.type="button",l.className=`${s}__nav-button`,l.setAttribute("aria-label","다음"),l.appendChild(e("chevron-right",n)),l.addEventListener("click",()=>{this.shiftMonth(1)}),a.append(i,d,l),this.headerEl.appendChild(a)}renderMonthView(){const e=document.createElement("div");e.className=`${s}__month-view`;const t=document.createElement("div");t.className=`${s}__weekdays`,["일","월","화","수","목","금","토"].forEach(e=>{const a=document.createElement("div");a.className=`${s}__weekday`,a.textContent=e,t.appendChild(a)}),e.appendChild(t);const a=document.createElement("div");a.className=`${s}__days`;const n=this.selectedDate.getFullYear(),i=this.selectedDate.getMonth(),d=new Date(n,i,1),l=new Date(d);l.setDate(l.getDate()-d.getDay());const r=new Date;for(let e=0;e<42;e+=1){const t=new Date(l);t.setDate(l.getDate()+e);const n=t.getMonth()===i;if(!this.showOutsideDays&&!n)continue;const d=0===t.getDay()||6===t.getDay();if(!this.showWeekends&&d)continue;const o=document.createElement("div"),c=this.selectedDateRange.start&&this.selectedDateRange.end&&t>=this.selectedDateRange.start&&t<=this.selectedDateRange.end,h=this.selectedDateRange.start&&t.toDateString()===this.selectedDateRange.start.toDateString(),m=this.selectedDateRange.end&&t.toDateString()===this.selectedDateRange.end.toDateString(),u=Boolean(c&&!h&&!m);o.className=[`${s}__day`,n&&`${s}__day--current-month`,this.highlightToday&&t.toDateString()===r.toDateString()&&`${s}__day--today`,this.isSameDate(t,this.selectedDate)&&`${s}__day--selected`,h&&`${s}__day--selected--start`,m&&`${s}__day--selected--end`,u&&`${s}__day--selected--middle`,!this.showWeekends&&d&&`${s}__day--weekend`].filter(Boolean).join(" "),o.addEventListener("click",()=>this.handleDateClick(t));const v=document.createElement("span");v.className=`${s}__day-number`,v.textContent=String(t.getDate()),o.appendChild(v);const p=this.eventsForDate(t);if(p.length){const e=document.createElement("div");if(e.className=`${s}__day-events`,p.slice(0,2).forEach(t=>{const a=document.createElement("div");a.className=[`${s}__event-bar`,`${s}__event-bar--${t.type}`].filter(Boolean).join(" "),t.color&&(a.style.backgroundColor=t.color),this.draggedEvent?.id===t.id&&a.classList.add(`${s}__event-bar--dragging`),a.title=t.title,a.draggable=!0;const n=document.createElement("span");n.className=`${s}__event-title`,n.textContent=t.title,a.appendChild(n),a.addEventListener("click",e=>this.handleEventClick(t,e)),a.addEventListener("dragstart",e=>this.handleDragStart(t,e)),a.addEventListener("dragend",()=>this.handleDragEnd()),e.appendChild(a)}),p.length>2){const t=document.createElement("div");t.className=`${s}__more-events`,t.textContent=`+${p.length-2} more`,e.appendChild(t)}o.appendChild(e)}const g=document.createElement("div");g.className=[`${s}__drop-zone`,this.dragOverDate&&this.isSameDate(this.dragOverDate,t)&&`${s}__drop-zone--active`].filter(Boolean).join(" "),g.addEventListener("dragover",e=>this.handleDragOver(t,e)),g.addEventListener("dragleave",e=>this.handleDragLeave(e)),g.addEventListener("drop",e=>this.handleDrop(t,e)),o.appendChild(g),a.appendChild(o)}return e.appendChild(a),e}renderYearView(){const e=document.createElement("div");e.className=`${s}__year-view`;const t=this.selectedDate.getFullYear();for(let n=0;n<12;n+=1){const i=new Date(t,n,1),d=this._events.filter(e=>{const s=a(e.date);return s&&s.getFullYear()===t&&s.getMonth()===n}),l=document.createElement("div");l.className=`${s}__year-month`,l.addEventListener("click",()=>{this.selectedDate=i,this.handleViewChange("month")});const r=document.createElement("h3");if(r.className=`${s}__year-month-title`,r.textContent=i.toLocaleDateString(this.locale,{month:"long"}),l.appendChild(r),d.length){const e=document.createElement("div");if(e.className=`${s}__year-month-events`,d.slice(0,4).forEach(t=>{const a=document.createElement("span");a.className=[`${s}__year-event`,`${s}__year-event--${t.type}`].join(" "),t.color&&(a.style.backgroundColor=t.color),e.appendChild(a)}),d.length>4){const t=document.createElement("span");t.className=`${s}__year-more-events`,t.textContent=`+${d.length-4} more`,e.appendChild(t)}l.appendChild(e)}e.appendChild(l)}return e}renderWeekView(){const e=document.createElement("div");e.className=`${s}__week-view`;const t=new Date,a=new Date(this.selectedDate);a.setDate(this.selectedDate.getDate()-this.selectedDate.getDay());const n=document.createElement("div");n.className=`${s}__week-header`;const i=document.createElement("div");i.className=`${s}__time-column-header`,n.appendChild(i);for(let e=0;e<7;e+=1){const i=new Date(a);i.setDate(a.getDate()+e);const d=document.createElement("div");d.className=[`${s}__week-day-header`,i.toDateString()===t.toDateString()&&`${s}__week-day-header--today`].filter(Boolean).join(" ");const l=document.createElement("span");l.className=`${s}__week-day-name`,l.textContent=i.toLocaleDateString(this.locale,{weekday:"short"});const r=document.createElement("span");r.className=`${s}__week-day-number`,r.textContent=String(i.getDate()),d.append(l,r),n.appendChild(d)}e.appendChild(n);const d=document.createElement("div");d.className=`${s}__week-grid`;const l=document.createElement("div");l.className=`${s}__week-time-column`;for(let e=6;e<=22;e+=1){const t=document.createElement("div");t.className=`${s}__time-slot`;const a=document.createElement("span");a.className=`${s}__time-label`,a.textContent=`${String(e).padStart(2,"0")}:00`,t.appendChild(a),l.appendChild(t)}d.appendChild(l);const r=document.createElement("div");r.className=`${s}__week-columns`;for(let e=0;e<7;e+=1){const t=new Date(a);t.setDate(a.getDate()+e);const n=document.createElement("div");n.className=`${s}__week-column`;for(let e=6;e<=22;e+=1){const a=document.createElement("div");a.className=`${s}__week-cell`,a.title=`${t.toLocaleDateString()} ${String(e).padStart(2,"0")}:00`,a.addEventListener("click",()=>{this.selectedDate=new Date(t),this.eventForm.startTime=`${String(e).padStart(2,"0")}:00`,this.eventForm.endTime=`${String(e+1).padStart(2,"0")}:00`,this.openAddModal(this.selectedDate)}),n.appendChild(a)}this.eventsForDate(t).forEach(e=>{if(!e.startTime)return;const[t,a]=e.startTime.split(":").map(Number),i=.8*(60*(t-6)+(a||0)),d=(e.endTime||e.startTime).split(":").map(Number),l=60*(d[0]||t)+(d[1]||0),r=60*t+(a||0),o=Math.max(20,48*(l-r)/60),c=document.createElement("div");c.className=[`${s}__week-event`,`${s}__week-event--${e.type}`].filter(Boolean).join(" "),c.textContent=e.title,c.title=e.title,c.style.backgroundColor=e.color||"#17a2b8",c.style.top=`${i}px`,c.style.height=`${o}px`,c.addEventListener("click",t=>this.handleEventClick(e,t)),n.appendChild(c)}),r.appendChild(n)}return d.appendChild(r),e.appendChild(d),e}renderModal(){if(!this.modalEl)return;if(this.modalEl.replaceChildren(),!this.showEventModal)return void this.modalEl.removeAttribute("open");this.modalEl.setAttribute("open","true"),this.modalEl.setAttribute("title",this.isEditing?"일정 편집":"새 일정 추가");const e=document.createElement("div");e.className=`${s}__event-form`;const t=document.createElement("db-input");t.setAttribute("label","제목 *"),t.setAttribute("placeholder","일정 제목을 입력하세요"),t.setAttribute("full-width",""),t.setAttribute("value",this.eventForm.title),t.addEventListener("db-input",e=>{this.eventForm.title=e.detail.value});const l=document.createElement("db-input");l.setAttribute("label","설명"),l.setAttribute("placeholder","일정 설명을 입력하세요"),l.setAttribute("full-width",""),l.setAttribute("value",this.eventForm.description),l.addEventListener("db-input",e=>{this.eventForm.description=e.detail.value});const r=document.createElement("db-date-picker");r.setAttribute("label","날짜"),r.setAttribute("full-width",""),r.setAttribute("value",n(this.selectedDate)),r.addEventListener("db-change",e=>{const t=a(e.detail.value);t&&(this.selectedDate=t)});const o=document.createElement("db-select");o.setAttribute("label","일정 타입"),o.setAttribute("full-width",""),o.setAttribute("options",JSON.stringify(i)),o.setAttribute("value",this.eventForm.type),o.addEventListener("db-change",e=>{this.eventForm.type=e.detail.value});const c=document.createElement("db-select");c.setAttribute("label","색상"),c.setAttribute("full-width",""),c.setAttribute("options",JSON.stringify(d)),c.setAttribute("value",this.eventForm.color),c.addEventListener("db-change",e=>{this.eventForm.color=e.detail.value});const h=document.createElement("db-time-picker");h.setAttribute("label","시작 시간"),h.setAttribute("full-width",""),h.setAttribute("value",this.eventForm.startTime),h.addEventListener("db-change",e=>{this.eventForm.startTime=e.detail.value});const m=document.createElement("db-time-picker");m.setAttribute("label","종료 시간"),m.setAttribute("full-width",""),m.setAttribute("value",this.eventForm.endTime),m.addEventListener("db-change",e=>{this.eventForm.endTime=e.detail.value}),e.append(t,l,r,o,c,h,m);const u=document.createElement("div");u.className="designbase-wc-modal__body",u.setAttribute("data-modal-part","body"),u.appendChild(e);const v=document.createElement("div");v.className="designbase-wc-modal__footer",v.setAttribute("data-modal-part","footer");const p=document.createElement("div");if(p.className=`${s}__modal-actions`,this.isEditing){const e=document.createElement("db-button");e.setAttribute("variant","danger"),e.textContent="삭제",e.addEventListener("click",()=>this.deleteEvent()),p.appendChild(e)}const g=document.createElement("div");g.className=`${s}__modal-buttons`;const b=document.createElement("db-button");b.setAttribute("variant","secondary"),b.textContent="취소",b.addEventListener("click",()=>this.closeModal());const E=document.createElement("db-button");E.setAttribute("variant","primary"),E.textContent=this.isEditing?"수정":"저장",E.addEventListener("click",()=>this.saveEvent()),g.append(b,E),p.appendChild(g),v.appendChild(p),this.modalEl.append(u,v)}render(){this.className=s,this.replaceChildren(),this.headerEl&&this.bodyEl&&(this.renderHeader(),this.bodyEl.replaceChildren(),this.bodyEl.appendChild(this.renderMonthView()),this.append(this.headerEl,this.bodyEl),this.renderModal(),this.showEventModal&&this.modalEl&&this.appendChild(this.modalEl))}}customElements.get("db-calendar")||customElements.define("db-calendar",DbCalendar);export{DbCalendar};