@designbasekorea/ui-wc 0.5.6 → 0.6.0

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

@@ -1,882 +1 @@
-import { createDbIcon } from './db-icons.js';
-
-const SCALES = ['day', 'week'];
-const BAR_COLORS = ['#86efac', '#fde047', '#93c5fd', '#c4b5fd', '#f9a8d4', '#5eead4', '#fdba74', '#a5b4fc'];
-const WEEKDAY_KO = ['일', '월', '화', '수', '목', '금', '토'];
-const WEEKDAY_EN = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
-function parseDate(value) {
-    const [year, month, day] = value.split('-').map(Number);
-    return new Date(year, month - 1, day);
-}
-function toDateKey(date) {
-    const year = date.getFullYear();
-    const month = String(date.getMonth() + 1).padStart(2, '0');
-    const day = String(date.getDate()).padStart(2, '0');
-    return `${year}-${month}-${day}`;
-}
-function addDays(date, days) {
-    const next = new Date(date);
-    next.setDate(next.getDate() + days);
-    return next;
-}
-function daysBetween(start, end) {
-    const startUtc = Date.UTC(start.getFullYear(), start.getMonth(), start.getDate());
-    const endUtc = Date.UTC(end.getFullYear(), end.getMonth(), end.getDate());
-    return Math.round((endUtc - startUtc) / (1000 * 60 * 60 * 24));
-}
-function clampDate(date, min, max) {
-    if (date < min)
-        return new Date(min);
-    if (date > max)
-        return new Date(max);
-    return date;
-}
-function deriveBarTone(color) {
-    return {
-        /** 바 전체 배경 — 숫자를 올리면 더 진해짐 */
-        base: `color-mix(in srgb, ${color} 42%, white)`,
-        /** 진행 구간 — base보다 살짝만 진하게 (black 대신 white 믹스로 연하게) */
-        progress: `color-mix(in srgb, ${color} 58%, white)`,
-    };
-}
-class DbGantt extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.collapsedGroups = new Set();
-        this.dragState = null;
-        this.reorderState = null;
-        this.reorderDropIndex = null;
-        this.suppressRender = false;
-        this.didDrag = false;
-        this.handlePointerMove = (event) => {
-            if (this.reorderState && event.pointerId === this.reorderState.pointerId) {
-                this.updateReorderDropTarget(event.clientY);
-                return;
-            }
-            if (!this.dragState || event.pointerId !== this.dragState.pointerId)
-                return;
-            const scale = this.getOption('scale', SCALES, 'day');
-            const cellWidth = this.getNumber('cell-width', scale === 'week' ? 72 : 44);
-            const { start: viewStart, end: viewEnd } = this.getViewRange();
-            const dayDelta = Math.round((event.clientX - this.dragState.startX) / cellWidth);
-            if (dayDelta !== 0)
-                this.didDrag = true;
-            let nextStart = new Date(this.dragState.originalStart);
-            let nextEnd = new Date(this.dragState.originalEnd);
-            if (this.dragState.mode === 'move') {
-                nextStart = addDays(this.dragState.originalStart, dayDelta);
-                nextEnd = addDays(this.dragState.originalEnd, dayDelta);
-            }
-            else if (this.dragState.mode === 'resize-start') {
-                nextStart = addDays(this.dragState.originalStart, dayDelta);
-                if (nextStart > nextEnd)
-                    nextStart = new Date(nextEnd);
-            }
-            else {
-                nextEnd = addDays(this.dragState.originalEnd, dayDelta);
-                if (nextEnd < nextStart)
-                    nextEnd = new Date(nextStart);
-            }
-            nextStart = clampDate(nextStart, viewStart, viewEnd);
-            nextEnd = clampDate(nextEnd, viewStart, viewEnd);
-            if (nextStart > nextEnd)
-                return;
-            const item = this.items.find((entry) => entry.id === this.dragState.itemId);
-            if (!item)
-                return;
-            this.applyBarGeometry(this.dragState.barEl, { ...item, startDate: toDateKey(nextStart), endDate: toDateKey(nextEnd) }, viewStart, cellWidth);
-        };
-        this.handlePointerUp = (event) => {
-            if (this.reorderState && event.pointerId === this.reorderState.pointerId) {
-                this.finishReorderDrag(event);
-                return;
-            }
-            if (!this.dragState || event.pointerId !== this.dragState.pointerId)
-                return;
-            const scale = this.getOption('scale', SCALES, 'day');
-            const cellWidth = this.getNumber('cell-width', scale === 'week' ? 72 : 44);
-            const { start: viewStart, end: viewEnd } = this.getViewRange();
-            const dayDelta = Math.round((event.clientX - this.dragState.startX) / cellWidth);
-            let nextStart = new Date(this.dragState.originalStart);
-            let nextEnd = new Date(this.dragState.originalEnd);
-            const mode = this.dragState.mode;
-            const itemId = this.dragState.itemId;
-            if (mode === 'move') {
-                nextStart = addDays(this.dragState.originalStart, dayDelta);
-                nextEnd = addDays(this.dragState.originalEnd, dayDelta);
-            }
-            else if (mode === 'resize-start') {
-                nextStart = addDays(this.dragState.originalStart, dayDelta);
-                if (nextStart > nextEnd)
-                    nextStart = new Date(nextEnd);
-            }
-            else {
-                nextEnd = addDays(this.dragState.originalEnd, dayDelta);
-                if (nextEnd < nextStart)
-                    nextEnd = new Date(nextStart);
-            }
-            nextStart = clampDate(nextStart, viewStart, viewEnd);
-            nextEnd = clampDate(nextEnd, viewStart, viewEnd);
-            this.dragState.barEl.releasePointerCapture(event.pointerId);
-            this.dragState.barEl.classList.remove('designbase-wc-gantt__bar--dragging');
-            this.dragState = null;
-            const originalItem = this.items.find((entry) => entry.id === itemId);
-            if (!originalItem)
-                return;
-            const startKey = toDateKey(nextStart);
-            const endKey = toDateKey(nextEnd);
-            if (startKey === originalItem.startDate && endKey === originalItem.endDate)
-                return;
-            this.updateItem(itemId, { startDate: startKey, endDate: endKey }, mode === 'move' ? 'move' : 'resize');
-            this.render();
-        };
-    }
-    static get observedAttributes() {
-        return [
-            'groups',
-            'rows',
-            'items',
-            'start-date',
-            'end-date',
-            'today',
-            'scale',
-            'cell-width',
-            'show-weekends',
-            'show-today',
-            'sidebar-label',
-            'full-width',
-            'disabled',
-            'draggable',
-            'reorderable',
-            'locale',
-        ];
-    }
-    get groups() {
-        return this.parseJson('groups', []);
-    }
-    set groups(value) {
-        this.setAttribute('groups', typeof value === 'string' ? value : JSON.stringify(value));
-    }
-    get rows() {
-        return this.parseJson('rows', []);
-    }
-    set rows(value) {
-        this.setAttribute('rows', typeof value === 'string' ? value : JSON.stringify(value));
-    }
-    get items() {
-        return this.parseJson('items', []);
-    }
-    set items(value) {
-        this.setAttribute('items', typeof value === 'string' ? value : JSON.stringify(value));
-    }
-    connectedCallback() {
-        this.setAttribute('role', 'region');
-        this.setAttribute('aria-label', '프로젝트 타임라인');
-        this.addEventListener('pointermove', this.handlePointerMove);
-        this.addEventListener('pointerup', this.handlePointerUp);
-        this.addEventListener('pointercancel', this.handlePointerUp);
-        this.render();
-    }
-    disconnectedCallback() {
-        this.removeEventListener('pointermove', this.handlePointerMove);
-        this.removeEventListener('pointerup', this.handlePointerUp);
-        this.removeEventListener('pointercancel', this.handlePointerUp);
-    }
-    attributeChangedCallback() {
-        if (this.isConnected && !this.suppressRender && !this.dragState && !this.reorderState) {
-            this.render();
-        }
-    }
-    parseJson(name, fallback) {
-        try {
-            const parsed = JSON.parse(this.getAttribute(name) || 'null');
-            return parsed ?? fallback;
-        }
-        catch {
-            return fallback;
-        }
-    }
-    getBool(name, fallback = false) {
-        if (!this.hasAttribute(name))
-            return fallback;
-        const value = this.getAttribute(name);
-        return value === '' || value === 'true';
-    }
-    getNumber(name, fallback) {
-        const value = Number(this.getAttribute(name));
-        return Number.isFinite(value) && value > 0 ? value : fallback;
-    }
-    getOption(name, values, fallback) {
-        const value = this.getAttribute(name);
-        return value && values.includes(value) ? value : fallback;
-    }
-    getLocale() {
-        return this.getAttribute('locale') || 'ko-KR';
-    }
-    getWeekdays() {
-        return this.getLocale().startsWith('ko') ? WEEKDAY_KO : WEEKDAY_EN;
-    }
-    getViewRange() {
-        const explicitStart = this.getAttribute('start-date');
-        const explicitEnd = this.getAttribute('end-date');
-        if (explicitStart && explicitEnd) {
-            return { start: parseDate(explicitStart), end: parseDate(explicitEnd) };
-        }
-        const dates = this.items.flatMap((item) => [parseDate(item.startDate), parseDate(item.endDate)]);
-        if (dates.length === 0) {
-            const today = new Date();
-            const start = new Date(today.getFullYear(), today.getMonth(), 1);
-            const end = addDays(start, 29);
-            return { start, end };
-        }
-        const min = new Date(Math.min(...dates.map((d) => d.getTime())));
-        const max = new Date(Math.max(...dates.map((d) => d.getTime())));
-        return { start: addDays(min, -2), end: addDays(max, 2) };
-    }
-    getTodayDate() {
-        const attr = this.getAttribute('today');
-        return attr ? parseDate(attr) : new Date();
-    }
-    getDateColumns(start, end) {
-        const total = daysBetween(start, end) + 1;
-        return Array.from({ length: total }, (_, index) => addDays(start, index));
-    }
-    getVisibleRows() {
-        const groups = this.groups;
-        const rows = this.rows;
-        if (groups.length === 0) {
-            return rows.map((row) => ({ type: 'row', row }));
-        }
-        const result = [];
-        for (const group of groups) {
-            result.push({ type: 'group', group });
-            if (this.collapsedGroups.has(group.id))
-                continue;
-            rows
-                .filter((row) => row.groupId === group.id)
-                .forEach((row) => result.push({ type: 'row', row }));
-        }
-        rows
-            .filter((row) => !row.groupId || !groups.some((group) => group.id === row.groupId))
-            .forEach((row) => result.push({ type: 'row', row }));
-        return result;
-    }
-    getMonthSegments(dates) {
-        const segments = [];
-        let currentKey = '';
-        let currentSpan = 0;
-        for (const date of dates) {
-            const key = `${date.getFullYear()}-${date.getMonth()}`;
-            if (key !== currentKey) {
-                if (currentSpan > 0) {
-                    segments.push({ label: currentKey, span: currentSpan });
-                }
-                currentKey = key;
-                currentSpan = 1;
-            }
-            else {
-                currentSpan += 1;
-            }
-        }
-        if (currentSpan > 0) {
-            segments.push({ label: currentKey, span: currentSpan });
-        }
-        return segments.map((segment) => {
-            const [year, month] = segment.label.split('-').map(Number);
-            const label = new Date(year, month, 1).toLocaleDateString(this.getLocale(), {
-                year: 'numeric',
-                month: 'long',
-            });
-            return { label, span: segment.span };
-        });
-    }
-    getInitials(assignee) {
-        if (assignee.initials)
-            return assignee.initials;
-        return assignee.name
-            .split(/\s+/)
-            .map((part) => part[0])
-            .join('')
-            .slice(0, 2)
-            .toUpperCase();
-    }
-    updateItem(itemId, patch, action) {
-        const next = this.items.map((item) => item.id === itemId ? { ...item, ...patch } : item);
-        this.emitItemsChange(next, action, itemId);
-    }
-    emitItemsChange(items, action, itemId) {
-        this.suppressRender = true;
-        this.items = items;
-        this.suppressRender = false;
-        const item = items.find((entry) => entry.id === itemId);
-        this.dispatchEvent(new CustomEvent('db-item-change', {
-            detail: { item, items, action },
-            bubbles: true,
-            composed: true,
-        }));
-        this.dispatchEvent(new CustomEvent('db-change', {
-            detail: { groups: this.groups, rows: this.rows, items },
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    applyBarGeometry(barEl, item, viewStart, cellWidth) {
-        const itemStart = parseDate(item.startDate);
-        const itemEnd = parseDate(item.endDate);
-        const offset = daysBetween(viewStart, itemStart);
-        const duration = daysBetween(itemStart, itemEnd) + 1;
-        const gap = 2;
-        barEl.style.left = `${offset * cellWidth + gap}px`;
-        barEl.style.width = `${Math.max(duration * cellWidth - gap * 2, cellWidth - gap * 2)}px`;
-    }
-    startBarDrag(event, item, mode, barEl) {
-        if (!this.getBool('draggable', true) || this.getBool('disabled') || item.disabled)
-            return;
-        event.preventDefault();
-        event.stopPropagation();
-        this.didDrag = false;
-        barEl.setPointerCapture(event.pointerId);
-        barEl.classList.add('designbase-wc-gantt__bar--dragging');
-        this.dragState = {
-            itemId: item.id,
-            mode,
-            pointerId: event.pointerId,
-            startX: event.clientX,
-            originalStart: parseDate(item.startDate),
-            originalEnd: parseDate(item.endDate),
-            barEl,
-        };
-    }
-    canReorder() {
-        return this.getBool('reorderable', true) && !this.getBool('disabled');
-    }
-    createDragHandle(kind, id, groupId) {
-        const handle = document.createElement('span');
-        handle.className = 'designbase-wc-gantt__drag-handle';
-        handle.setAttribute('role', 'button');
-        handle.setAttribute('aria-label', kind === 'group' ? '그룹 순서 변경' : '행 순서 변경');
-        handle.append(createDbIcon('grip-vertical', 12));
-        if (!this.canReorder())
-            return handle;
-        handle.addEventListener('pointerdown', (event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            this.startReorderDrag(event, kind, id, groupId, handle);
-        });
-        return handle;
-    }
-    getGroupIndex(groupId) {
-        return this.groups.findIndex((group) => group.id === groupId);
-    }
-    getRowScope(groupId) {
-        return this.rows.filter((row) => (row.groupId || '') === (groupId || ''));
-    }
-    getRowIndexInScope(rowId, groupId) {
-        return this.getRowScope(groupId).findIndex((row) => row.id === rowId);
-    }
-    getReorderTargets(kind, groupId) {
-        return Array.from(this.querySelectorAll(kind === 'group'
-            ? '.designbase-wc-gantt__label-cell--group'
-            : `.designbase-wc-gantt__label-cell--row[data-group-id="${groupId || ''}"]`));
-    }
-    startReorderDrag(event, kind, id, groupId, handleEl) {
-        const fromIndex = kind === 'group' ? this.getGroupIndex(id) : this.getRowIndexInScope(id, groupId);
-        if (fromIndex < 0)
-            return;
-        handleEl.setPointerCapture(event.pointerId);
-        this.reorderState = {
-            kind,
-            id,
-            groupId,
-            pointerId: event.pointerId,
-            startY: event.clientY,
-            fromIndex,
-            captureEl: handleEl,
-        };
-        this.classList.add('designbase-wc-gantt--reordering');
-        this.updateReorderDropTarget(event.clientY);
-    }
-    updateReorderDropTarget(clientY) {
-        if (!this.reorderState)
-            return;
-        const targets = this.getReorderTargets(this.reorderState.kind, this.reorderState.groupId);
-        let nextDrop = null;
-        targets.forEach((el, index) => {
-            const rect = el.getBoundingClientRect();
-            const mid = rect.top + rect.height / 2;
-            const isOver = clientY >= rect.top && clientY <= rect.bottom;
-            const placeAfter = clientY > mid;
-            el.classList.toggle('designbase-wc-gantt__label-cell--drag-over', isOver);
-            el.classList.toggle('designbase-wc-gantt__label-cell--drag-over-before', isOver && !placeAfter);
-            el.classList.toggle('designbase-wc-gantt__label-cell--drag-over-after', isOver && placeAfter);
-            if (isOver) {
-                nextDrop = placeAfter ? index + 1 : index;
-            }
-        });
-        this.reorderDropIndex = nextDrop;
-    }
-    clearReorderIndicators() {
-        this.querySelectorAll('.designbase-wc-gantt__label-cell--drag-over').forEach((el) => {
-            el.classList.remove('designbase-wc-gantt__label-cell--drag-over', 'designbase-wc-gantt__label-cell--drag-over-before', 'designbase-wc-gantt__label-cell--drag-over-after');
-        });
-    }
-    finishReorderDrag(event) {
-        if (!this.reorderState)
-            return;
-        const { kind, id, groupId, fromIndex, captureEl } = this.reorderState;
-        try {
-            captureEl.releasePointerCapture(this.reorderState.pointerId);
-        }
-        catch {
-            /* ignore */
-        }
-        const dropIndex = this.reorderDropIndex;
-        this.reorderState = null;
-        this.reorderDropIndex = null;
-        this.classList.remove('designbase-wc-gantt--reordering');
-        this.clearReorderIndicators();
-        if (dropIndex === null)
-            return;
-        const adjustedDrop = dropIndex > fromIndex ? dropIndex - 1 : dropIndex;
-        if (adjustedDrop < 0 || adjustedDrop === fromIndex)
-            return;
-        if (kind === 'group') {
-            this.reorderGroups(fromIndex, adjustedDrop, id);
-        }
-        else {
-            this.reorderRows(fromIndex, adjustedDrop, id, groupId);
-        }
-    }
-    emitStructureChange(groups, rows, detail, eventName) {
-        this.suppressRender = true;
-        this.groups = groups;
-        this.rows = rows;
-        this.suppressRender = false;
-        this.dispatchEvent(new CustomEvent(eventName, {
-            detail: { ...detail, groups, rows },
-            bubbles: true,
-            composed: true,
-        }));
-        this.dispatchEvent(new CustomEvent('db-change', {
-            detail: { groups, rows, items: this.items },
-            bubbles: true,
-            composed: true,
-        }));
-        this.render();
-    }
-    reorderGroups(fromIndex, toIndex, groupId) {
-        const next = [...this.groups];
-        const [moved] = next.splice(fromIndex, 1);
-        if (!moved)
-            return;
-        next.splice(toIndex, 0, moved);
-        this.emitStructureChange(next, this.rows, { groupId, fromIndex, toIndex }, 'db-group-reorder');
-    }
-    reorderRows(fromIndex, toIndex, rowId, groupId) {
-        const scope = this.getRowScope(groupId);
-        const nextScope = [...scope];
-        const [moved] = nextScope.splice(fromIndex, 1);
-        if (!moved)
-            return;
-        nextScope.splice(toIndex, 0, moved);
-        const scopeIds = new Set(scope.map((row) => row.id));
-        const nextRows = [];
-        let scopeInserted = false;
-        for (const row of this.rows) {
-            if (!scopeIds.has(row.id)) {
-                nextRows.push(row);
-                continue;
-            }
-            if (!scopeInserted) {
-                nextRows.push(...nextScope);
-                scopeInserted = true;
-            }
-        }
-        if (!scopeInserted)
-            nextRows.push(...nextScope);
-        this.emitStructureChange(this.groups, nextRows, { rowId, groupId, fromIndex, toIndex }, 'db-row-reorder');
-    }
-    createGroupBadge(color) {
-        const badge = document.createElement('db-badge');
-        badge.className = 'designbase-wc-gantt__group-badge';
-        badge.setAttribute('badge-style', 'dot');
-        badge.setAttribute('size', 's');
-        badge.setAttribute('variant', 'primary');
-        badge.setAttribute('aria-hidden', 'true');
-        if (color)
-            badge.style.setProperty('--db-gantt-badge-color', color);
-        return badge;
-    }
-    createGroupChevron(collapsed) {
-        const chevron = document.createElement('span');
-        chevron.className = [
-            'designbase-wc-gantt__group-chevron',
-            collapsed ? 'designbase-wc-gantt__group-chevron--collapsed' : '',
-        ]
-            .filter(Boolean)
-            .join(' ');
-        chevron.append(createDbIcon('chevron-down', 12));
-        return chevron;
-    }
-    createAssignee(assignee) {
-        const el = document.createElement('span');
-        el.className = 'designbase-wc-gantt__assignee';
-        el.title = assignee.name;
-        if (assignee.avatar) {
-            const img = document.createElement('img');
-            img.src = assignee.avatar;
-            img.alt = assignee.name;
-            el.appendChild(img);
-        }
-        else {
-            el.textContent = this.getInitials(assignee);
-        }
-        return el;
-    }
-    createStatusIcon(status) {
-        const el = document.createElement('span');
-        el.className = `designbase-wc-gantt__status designbase-wc-gantt__status--${status}`;
-        el.setAttribute('aria-hidden', 'true');
-        el.textContent = status === 'completed' ? '✓' : '!';
-        return el;
-    }
-    deriveSummaryColor(items, fallback) {
-        if (items.length === 0)
-            return fallback || BAR_COLORS[0];
-        const withColor = items.filter((item) => item.color);
-        if (withColor.length === 0)
-            return fallback || BAR_COLORS[0];
-        const longest = withColor.reduce((current, item) => {
-            const currentDays = daysBetween(parseDate(current.startDate), parseDate(current.endDate));
-            const itemDays = daysBetween(parseDate(item.startDate), parseDate(item.endDate));
-            return itemDays > currentDays ? item : current;
-        });
-        return longest.color || fallback || BAR_COLORS[0];
-    }
-    getGroupSummary(groupId, groupColor) {
-        const groupRows = this.rows.filter((row) => row.groupId === groupId);
-        const groupItems = this.items.filter((item) => groupRows.some((row) => row.id === item.rowId));
-        if (groupItems.length === 0)
-            return null;
-        const starts = groupItems.map((item) => parseDate(item.startDate).getTime());
-        const ends = groupItems.map((item) => parseDate(item.endDate).getTime());
-        const progressValues = groupItems
-            .map((item) => item.progress)
-            .filter((value) => typeof value === 'number');
-        return {
-            startDate: toDateKey(new Date(Math.min(...starts))),
-            endDate: toDateKey(new Date(Math.max(...ends))),
-            color: this.deriveSummaryColor(groupItems, groupColor),
-            progress: progressValues.length > 0
-                ? progressValues.reduce((sum, value) => sum + value, 0) / progressValues.length
-                : 0,
-            count: groupItems.length,
-        };
-    }
-    applyBarTone(el, color) {
-        const tone = deriveBarTone(color);
-        el.style.setProperty('--db-gantt-bar-color', color);
-        el.style.setProperty('--db-gantt-bar-bg', tone.base);
-        el.style.setProperty('--db-gantt-bar-progress-bg', tone.progress);
-    }
-    createGroupSummaryBar(summary, viewStart, viewEnd, cellWidth) {
-        const clampedStart = clampDate(parseDate(summary.startDate), viewStart, viewEnd);
-        const clampedEnd = clampDate(parseDate(summary.endDate), viewStart, viewEnd);
-        if (clampedEnd < viewStart || clampedStart > viewEnd)
-            return null;
-        const offset = daysBetween(viewStart, clampedStart);
-        const duration = daysBetween(clampedStart, clampedEnd) + 1;
-        const gap = 2;
-        const progress = Math.min(100, Math.max(0, summary.progress));
-        const bar = document.createElement('div');
-        bar.className = 'designbase-wc-gantt__group-summary';
-        bar.setAttribute('aria-hidden', 'true');
-        bar.title = `${summary.count}개 태스크`;
-        this.applyBarTone(bar, summary.color);
-        bar.style.left = `${offset * cellWidth + gap}px`;
-        bar.style.width = `${Math.max(duration * cellWidth - gap * 2, cellWidth - gap * 2)}px`;
-        if (progress > 0) {
-            const progressEl = document.createElement('span');
-            progressEl.className = 'designbase-wc-gantt__group-summary-progress';
-            progressEl.style.width = `${progress}%`;
-            bar.appendChild(progressEl);
-        }
-        return bar;
-    }
-    createBar(item, viewStart, cellWidth, colorIndex) {
-        const barColor = item.color || BAR_COLORS[colorIndex % BAR_COLORS.length];
-        const bar = document.createElement('div');
-        bar.className = 'designbase-wc-gantt__bar';
-        bar.setAttribute('role', 'button');
-        bar.setAttribute('tabindex', item.disabled ? '-1' : '0');
-        bar.setAttribute('aria-label', `${item.title}, ${item.startDate} – ${item.endDate}`);
-        this.applyBarTone(bar, barColor);
-        if (item.disabled) {
-            bar.classList.add('designbase-wc-gantt__bar--disabled');
-        }
-        this.applyBarGeometry(bar, item, viewStart, cellWidth);
-        const progress = typeof item.progress === 'number' ? Math.min(100, Math.max(0, item.progress)) : 0;
-        if (progress > 0) {
-            const progressEl = document.createElement('span');
-            progressEl.className = 'designbase-wc-gantt__bar-progress';
-            progressEl.style.width = `${progress}%`;
-            bar.appendChild(progressEl);
-        }
-        const body = document.createElement('div');
-        body.className = 'designbase-wc-gantt__bar-body';
-        if (item.status === 'delayed' || item.status === 'at-risk') {
-            body.appendChild(this.createStatusIcon(item.status));
-        }
-        const label = document.createElement('span');
-        label.className = 'designbase-wc-gantt__bar-label';
-        label.textContent = item.title;
-        body.appendChild(label);
-        if (item.assignee) {
-            body.appendChild(this.createAssignee(item.assignee));
-        }
-        const resizeStart = document.createElement('span');
-        resizeStart.className = 'designbase-wc-gantt__bar-handle designbase-wc-gantt__bar-handle--start';
-        resizeStart.setAttribute('aria-hidden', 'true');
-        const resizeEnd = document.createElement('span');
-        resizeEnd.className = 'designbase-wc-gantt__bar-handle designbase-wc-gantt__bar-handle--end';
-        resizeEnd.setAttribute('aria-hidden', 'true');
-        bar.append(resizeStart, body, resizeEnd);
-        if (!item.disabled && this.getBool('draggable', true) && !this.getBool('disabled')) {
-            resizeStart.addEventListener('pointerdown', (event) => this.startBarDrag(event, item, 'resize-start', bar));
-            resizeEnd.addEventListener('pointerdown', (event) => this.startBarDrag(event, item, 'resize-end', bar));
-            body.addEventListener('pointerdown', (event) => {
-                if (event.target.closest('.designbase-wc-gantt__bar-handle'))
-                    return;
-                this.startBarDrag(event, item, 'move', bar);
-            });
-        }
-        bar.addEventListener('click', (event) => {
-            if (this.dragState || this.didDrag) {
-                this.didDrag = false;
-                return;
-            }
-            event.stopPropagation();
-            this.dispatchEvent(new CustomEvent('db-item-click', {
-                detail: { item },
-                bubbles: true,
-                composed: true,
-            }));
-        });
-        return bar;
-    }
-    toggleGroup(groupId) {
-        if (this.collapsedGroups.has(groupId)) {
-            this.collapsedGroups.delete(groupId);
-        }
-        else {
-            this.collapsedGroups.add(groupId);
-        }
-        this.dispatchEvent(new CustomEvent('db-group-toggle', {
-            detail: { groupId, collapsed: this.collapsedGroups.has(groupId) },
-            bubbles: true,
-            composed: true,
-        }));
-        this.render();
-    }
-    render() {
-        const items = this.items;
-        const scale = this.getOption('scale', SCALES, 'day');
-        const cellWidth = this.getNumber('cell-width', scale === 'week' ? 72 : 44);
-        const showWeekends = this.getBool('show-weekends', true);
-        const showToday = this.getBool('show-today', true);
-        const sidebarLabel = this.getAttribute('sidebar-label') || '할 일';
-        const disabled = this.getBool('disabled');
-        const fullWidth = this.getBool('full-width', true);
-        const weekdays = this.getWeekdays();
-        const { start: viewStart, end: viewEnd } = this.getViewRange();
-        const dates = this.getDateColumns(viewStart, viewEnd);
-        const today = this.getTodayDate();
-        const todayKey = toDateKey(today);
-        const todayOffset = dates.findIndex((date) => toDateKey(date) === todayKey);
-        const visibleRows = this.getVisibleRows();
-        const chartWidth = dates.length * cellWidth;
-        const root = document.createElement('div');
-        root.className = [
-            'designbase-wc-gantt',
-            fullWidth ? 'designbase-wc-gantt--full-width' : '',
-            disabled ? 'designbase-wc-gantt--disabled' : '',
-            this.getBool('draggable', true) ? 'designbase-wc-gantt--draggable' : '',
-        ]
-            .filter(Boolean)
-            .join(' ');
-        const viewport = document.createElement('div');
-        viewport.className = 'designbase-wc-gantt__viewport';
-        const grid = document.createElement('div');
-        grid.className = 'designbase-wc-gantt__grid';
-        grid.style.setProperty('--db-gantt-chart-width', `${chartWidth}px`);
-        grid.style.setProperty('--db-gantt-cell-width', `${cellWidth}px`);
-        const corner = document.createElement('div');
-        corner.className = 'designbase-wc-gantt__corner';
-        corner.textContent = sidebarLabel;
-        grid.appendChild(corner);
-        const dateHeader = document.createElement('div');
-        dateHeader.className = 'designbase-wc-gantt__date-header';
-        const monthRow = document.createElement('div');
-        monthRow.className = 'designbase-wc-gantt__month-row';
-        for (const segment of this.getMonthSegments(dates)) {
-            const cell = document.createElement('div');
-            cell.className = 'designbase-wc-gantt__month-cell';
-            cell.style.width = `${segment.span * cellWidth}px`;
-            cell.textContent = segment.label;
-            monthRow.appendChild(cell);
-        }
-        dateHeader.appendChild(monthRow);
-        const dayRow = document.createElement('div');
-        dayRow.className = 'designbase-wc-gantt__day-row';
-        for (const date of dates) {
-            const key = toDateKey(date);
-            const isToday = key === todayKey;
-            const isWeekend = date.getDay() === 0 || date.getDay() === 6;
-            const cell = document.createElement('div');
-            cell.className = [
-                'designbase-wc-gantt__day-cell',
-                isToday && showToday ? 'designbase-wc-gantt__day-cell--today' : '',
-                isWeekend && showWeekends ? 'designbase-wc-gantt__day-cell--weekend' : '',
-            ]
-                .filter(Boolean)
-                .join(' ');
-            cell.style.width = `${cellWidth}px`;
-            const dayNum = document.createElement('span');
-            dayNum.className = 'designbase-wc-gantt__day-num';
-            dayNum.textContent = String(date.getDate());
-            const dayName = document.createElement('span');
-            dayName.className = 'designbase-wc-gantt__day-name';
-            dayName.textContent = weekdays[date.getDay()];
-            cell.append(dayNum, dayName);
-            dayRow.appendChild(cell);
-        }
-        dateHeader.appendChild(dayRow);
-        grid.appendChild(dateHeader);
-        const itemsByRow = new Map();
-        items.forEach((item, index) => {
-            const list = itemsByRow.get(item.rowId) || [];
-            list.push({ ...item, color: item.color || BAR_COLORS[index % BAR_COLORS.length] });
-            itemsByRow.set(item.rowId, list);
-        });
-        let colorIndex = 0;
-        for (const entry of visibleRows) {
-            if (entry.type === 'group') {
-                const { group } = entry;
-                const collapsed = this.collapsedGroups.has(group.id);
-                const labelCell = document.createElement('button');
-                labelCell.type = 'button';
-                labelCell.className = 'designbase-wc-gantt__label-cell designbase-wc-gantt__label-cell--group';
-                labelCell.setAttribute('aria-expanded', String(!collapsed));
-                labelCell.dataset.groupId = group.id;
-                const title = document.createElement('span');
-                title.className = 'designbase-wc-gantt__group-title';
-                title.textContent = group.title;
-                labelCell.append(this.createDragHandle('group', group.id), this.createGroupChevron(collapsed), this.createGroupBadge(group.color), title);
-                labelCell.addEventListener('click', (event) => {
-                    if (event.target.closest('.designbase-wc-gantt__drag-handle'))
-                        return;
-                    this.toggleGroup(group.id);
-                });
-                grid.appendChild(labelCell);
-                const trackCell = document.createElement('div');
-                trackCell.className =
-                    'designbase-wc-gantt__track-cell designbase-wc-gantt__track-cell--group';
-                if (collapsed) {
-                    const summary = this.getGroupSummary(group.id, group.color);
-                    if (summary) {
-                        const gridBg = document.createElement('div');
-                        gridBg.className = 'designbase-wc-gantt__grid-bg';
-                        dates.forEach((date) => {
-                            const cell = document.createElement('div');
-                            const isWeekend = date.getDay() === 0 || date.getDay() === 6;
-                            cell.className = [
-                                'designbase-wc-gantt__grid-cell',
-                                isWeekend && showWeekends
-                                    ? 'designbase-wc-gantt__grid-cell--weekend'
-                                    : '',
-                            ]
-                                .filter(Boolean)
-                                .join(' ');
-                            cell.style.width = `${cellWidth}px`;
-                            gridBg.appendChild(cell);
-                        });
-                        trackCell.appendChild(gridBg);
-                        const summaryWrap = document.createElement('div');
-                        summaryWrap.className = 'designbase-wc-gantt__group-summary-wrap';
-                        const summaryBar = this.createGroupSummaryBar(summary, viewStart, viewEnd, cellWidth);
-                        if (summaryBar)
-                            summaryWrap.appendChild(summaryBar);
-                        trackCell.appendChild(summaryWrap);
-                    }
-                }
-                grid.appendChild(trackCell);
-                continue;
-            }
-            const { row } = entry;
-            const labelCell = document.createElement('button');
-            labelCell.type = 'button';
-            labelCell.className = 'designbase-wc-gantt__label-cell designbase-wc-gantt__label-cell--row';
-            labelCell.dataset.groupId = row.groupId || '';
-            labelCell.dataset.rowId = row.id;
-            const rowTitle = document.createElement('span');
-            rowTitle.className = 'designbase-wc-gantt__row-title';
-            rowTitle.textContent = row.label;
-            labelCell.append(this.createDragHandle('row', row.id, row.groupId), rowTitle);
-            labelCell.addEventListener('click', (event) => {
-                if (event.target.closest('.designbase-wc-gantt__drag-handle'))
-                    return;
-                this.dispatchEvent(new CustomEvent('db-row-click', {
-                    detail: { row },
-                    bubbles: true,
-                    composed: true,
-                }));
-            });
-            grid.appendChild(labelCell);
-            const trackCell = document.createElement('div');
-            trackCell.className = 'designbase-wc-gantt__track-cell';
-            const gridBg = document.createElement('div');
-            gridBg.className = 'designbase-wc-gantt__grid-bg';
-            dates.forEach((date) => {
-                const cell = document.createElement('div');
-                const isWeekend = date.getDay() === 0 || date.getDay() === 6;
-                cell.className = [
-                    'designbase-wc-gantt__grid-cell',
-                    isWeekend && showWeekends ? 'designbase-wc-gantt__grid-cell--weekend' : '',
-                ]
-                    .filter(Boolean)
-                    .join(' ');
-                cell.style.width = `${cellWidth}px`;
-                gridBg.appendChild(cell);
-            });
-            trackCell.appendChild(gridBg);
-            const bars = document.createElement('div');
-            bars.className = 'designbase-wc-gantt__bars';
-            (itemsByRow.get(row.id) || []).forEach((item) => {
-                const clampedStart = clampDate(parseDate(item.startDate), viewStart, viewEnd);
-                const clampedEnd = clampDate(parseDate(item.endDate), viewStart, viewEnd);
-                if (clampedEnd < viewStart || clampedStart > viewEnd)
-                    return;
-                bars.appendChild(this.createBar({
-                    ...item,
-                    startDate: toDateKey(clampedStart),
-                    endDate: toDateKey(clampedEnd),
-                }, viewStart, cellWidth, colorIndex++));
-            });
-            trackCell.appendChild(bars);
-            grid.appendChild(trackCell);
-        }
-        viewport.appendChild(grid);
-        if (showToday && todayOffset >= 0) {
-            const todayLine = document.createElement('div');
-            todayLine.className = 'designbase-wc-gantt__today-line';
-            todayLine.style.left = `calc(var(--db-gantt-label-width) + ${todayOffset * cellWidth + cellWidth / 2}px)`;
-            grid.appendChild(todayLine);
-        }
-        root.appendChild(viewport);
-        this.replaceChildren(root);
-    }
-}
-if (!customElements.get('db-gantt'))
-    customElements.define('db-gantt', DbGantt);
-
-export { DbGantt };
+import{createDbIcon as e}from"./db-icons.js";const t=["day","week"],a=["#86efac","#fde047","#93c5fd","#c4b5fd","#f9a8d4","#5eead4","#fdba74","#a5b4fc"],s=["일","월","화","수","목","금","토"],r=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];function parseDate(e){const[t,a,s]=e.split("-").map(Number);return new Date(t,a-1,s)}function toDateKey(e){return`${e.getFullYear()}-${String(e.getMonth()+1).padStart(2,"0")}-${String(e.getDate()).padStart(2,"0")}`}function addDays(e,t){const a=new Date(e);return a.setDate(a.getDate()+t),a}function daysBetween(e,t){const a=Date.UTC(e.getFullYear(),e.getMonth(),e.getDate()),s=Date.UTC(t.getFullYear(),t.getMonth(),t.getDate());return Math.round((s-a)/864e5)}function clampDate(e,t,a){return e<t?new Date(t):e>a?new Date(a):e}class DbGantt extends HTMLElement{constructor(){super(...arguments),this.collapsedGroups=new Set,this.dragState=null,this.reorderState=null,this.reorderDropIndex=null,this.suppressRender=!1,this.didDrag=!1,this.handlePointerMove=e=>{if(this.reorderState&&e.pointerId===this.reorderState.pointerId)return void this.updateReorderDropTarget(e.clientY);if(!this.dragState||e.pointerId!==this.dragState.pointerId)return;const a=this.getOption("scale",t,"day"),s=this.getNumber("cell-width","week"===a?72:44),{start:r,end:n}=this.getViewRange(),i=Math.round((e.clientX-this.dragState.startX)/s);0!==i&&(this.didDrag=!0);let d=new Date(this.dragState.originalStart),o=new Date(this.dragState.originalEnd);if("move"===this.dragState.mode?(d=addDays(this.dragState.originalStart,i),o=addDays(this.dragState.originalEnd,i)):"resize-start"===this.dragState.mode?(d=addDays(this.dragState.originalStart,i),d>o&&(d=new Date(o))):(o=addDays(this.dragState.originalEnd,i),o<d&&(o=new Date(d))),d=clampDate(d,r,n),o=clampDate(o,r,n),d>o)return;const l=this.items.find(e=>e.id===this.dragState.itemId);l&&this.applyBarGeometry(this.dragState.barEl,{...l,startDate:toDateKey(d),endDate:toDateKey(o)},r,s)},this.handlePointerUp=e=>{if(this.reorderState&&e.pointerId===this.reorderState.pointerId)return void this.finishReorderDrag(e);if(!this.dragState||e.pointerId!==this.dragState.pointerId)return;const a=this.getOption("scale",t,"day"),s=this.getNumber("cell-width","week"===a?72:44),{start:r,end:n}=this.getViewRange(),i=Math.round((e.clientX-this.dragState.startX)/s);let d=new Date(this.dragState.originalStart),o=new Date(this.dragState.originalEnd);const l=this.dragState.mode,c=this.dragState.itemId;"move"===l?(d=addDays(this.dragState.originalStart,i),o=addDays(this.dragState.originalEnd,i)):"resize-start"===l?(d=addDays(this.dragState.originalStart,i),d>o&&(d=new Date(o))):(o=addDays(this.dragState.originalEnd,i),o<d&&(o=new Date(d))),d=clampDate(d,r,n),o=clampDate(o,r,n),this.dragState.barEl.releasePointerCapture(e.pointerId),this.dragState.barEl.classList.remove("designbase-wc-gantt__bar--dragging"),this.dragState=null;const g=this.items.find(e=>e.id===c);if(!g)return;const p=toDateKey(d),h=toDateKey(o);p===g.startDate&&h===g.endDate||(this.updateItem(c,{startDate:p,endDate:h},"move"===l?"move":"resize"),this.render())}}static get observedAttributes(){return["groups","rows","items","start-date","end-date","today","scale","cell-width","show-weekends","show-today","sidebar-label","full-width","disabled","draggable","reorderable","locale"]}get groups(){return this.parseJson("groups",[])}set groups(e){this.setAttribute("groups","string"==typeof e?e:JSON.stringify(e))}get rows(){return this.parseJson("rows",[])}set rows(e){this.setAttribute("rows","string"==typeof e?e:JSON.stringify(e))}get items(){return this.parseJson("items",[])}set items(e){this.setAttribute("items","string"==typeof e?e:JSON.stringify(e))}connectedCallback(){this.setAttribute("role","region"),this.setAttribute("aria-label","프로젝트 타임라인"),this.addEventListener("pointermove",this.handlePointerMove),this.addEventListener("pointerup",this.handlePointerUp),this.addEventListener("pointercancel",this.handlePointerUp),this.render()}disconnectedCallback(){this.removeEventListener("pointermove",this.handlePointerMove),this.removeEventListener("pointerup",this.handlePointerUp),this.removeEventListener("pointercancel",this.handlePointerUp)}attributeChangedCallback(){!this.isConnected||this.suppressRender||this.dragState||this.reorderState||this.render()}parseJson(e,t){try{return JSON.parse(this.getAttribute(e)||"null")??t}catch{return t}}getBool(e,t=!1){if(!this.hasAttribute(e))return t;const a=this.getAttribute(e);return""===a||"true"===a}getNumber(e,t){const a=Number(this.getAttribute(e));return Number.isFinite(a)&&a>0?a:t}getOption(e,t,a){const s=this.getAttribute(e);return s&&t.includes(s)?s:a}getLocale(){return this.getAttribute("locale")||"ko-KR"}getWeekdays(){return this.getLocale().startsWith("ko")?s:r}getViewRange(){const e=this.getAttribute("start-date"),t=this.getAttribute("end-date");if(e&&t)return{start:parseDate(e),end:parseDate(t)};const a=this.items.flatMap(e=>[parseDate(e.startDate),parseDate(e.endDate)]);if(0===a.length){const e=new Date,t=new Date(e.getFullYear(),e.getMonth(),1);return{start:t,end:addDays(t,29)}}const s=new Date(Math.min(...a.map(e=>e.getTime()))),r=new Date(Math.max(...a.map(e=>e.getTime())));return{start:addDays(s,-2),end:addDays(r,2)}}getTodayDate(){const e=this.getAttribute("today");return e?parseDate(e):new Date}getDateColumns(e,t){const a=daysBetween(e,t)+1;return Array.from({length:a},(t,a)=>addDays(e,a))}getVisibleRows(){const e=this.groups,t=this.rows;if(0===e.length)return t.map(e=>({type:"row",row:e}));const a=[];for(const s of e)a.push({type:"group",group:s}),this.collapsedGroups.has(s.id)||t.filter(e=>e.groupId===s.id).forEach(e=>a.push({type:"row",row:e}));return t.filter(t=>!t.groupId||!e.some(e=>e.id===t.groupId)).forEach(e=>a.push({type:"row",row:e})),a}getMonthSegments(e){const t=[];let a="",s=0;for(const r of e){const e=`${r.getFullYear()}-${r.getMonth()}`;e!==a?(s>0&&t.push({label:a,span:s}),a=e,s=1):s+=1}return s>0&&t.push({label:a,span:s}),t.map(e=>{const[t,a]=e.label.split("-").map(Number);return{label:new Date(t,a,1).toLocaleDateString(this.getLocale(),{year:"numeric",month:"long"}),span:e.span}})}getInitials(e){return e.initials?e.initials:e.name.split(/\s+/).map(e=>e[0]).join("").slice(0,2).toUpperCase()}updateItem(e,t,a){const s=this.items.map(a=>a.id===e?{...a,...t}:a);this.emitItemsChange(s,a,e)}emitItemsChange(e,t,a){this.suppressRender=!0,this.items=e,this.suppressRender=!1;const s=e.find(e=>e.id===a);this.dispatchEvent(new CustomEvent("db-item-change",{detail:{item:s,items:e,action:t},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-change",{detail:{groups:this.groups,rows:this.rows,items:e},bubbles:!0,composed:!0}))}applyBarGeometry(e,t,a,s){const r=parseDate(t.startDate),n=parseDate(t.endDate),i=daysBetween(a,r),d=daysBetween(r,n)+1;e.style.left=i*s+2+"px",e.style.width=`${Math.max(d*s-4,s-4)}px`}startBarDrag(e,t,a,s){!this.getBool("draggable",!0)||this.getBool("disabled")||t.disabled||(e.preventDefault(),e.stopPropagation(),this.didDrag=!1,s.setPointerCapture(e.pointerId),s.classList.add("designbase-wc-gantt__bar--dragging"),this.dragState={itemId:t.id,mode:a,pointerId:e.pointerId,startX:e.clientX,originalStart:parseDate(t.startDate),originalEnd:parseDate(t.endDate),barEl:s})}canReorder(){return this.getBool("reorderable",!0)&&!this.getBool("disabled")}createDragHandle(t,a,s){const r=document.createElement("span");return r.className="designbase-wc-gantt__drag-handle",r.setAttribute("role","button"),r.setAttribute("aria-label","group"===t?"그룹 순서 변경":"행 순서 변경"),r.append(e("grip-vertical",12)),this.canReorder()?(r.addEventListener("pointerdown",e=>{e.preventDefault(),e.stopPropagation(),this.startReorderDrag(e,t,a,s,r)}),r):r}getGroupIndex(e){return this.groups.findIndex(t=>t.id===e)}getRowScope(e){return this.rows.filter(t=>(t.groupId||"")===(e||""))}getRowIndexInScope(e,t){return this.getRowScope(t).findIndex(t=>t.id===e)}getReorderTargets(e,t){return Array.from(this.querySelectorAll("group"===e?".designbase-wc-gantt__label-cell--group":`.designbase-wc-gantt__label-cell--row[data-group-id="${t||""}"]`))}startReorderDrag(e,t,a,s,r){const n="group"===t?this.getGroupIndex(a):this.getRowIndexInScope(a,s);n<0||(r.setPointerCapture(e.pointerId),this.reorderState={kind:t,id:a,groupId:s,pointerId:e.pointerId,startY:e.clientY,fromIndex:n,captureEl:r},this.classList.add("designbase-wc-gantt--reordering"),this.updateReorderDropTarget(e.clientY))}updateReorderDropTarget(e){if(!this.reorderState)return;const t=this.getReorderTargets(this.reorderState.kind,this.reorderState.groupId);let a=null;t.forEach((t,s)=>{const r=t.getBoundingClientRect(),n=r.top+r.height/2,i=e>=r.top&&e<=r.bottom,d=e>n;t.classList.toggle("designbase-wc-gantt__label-cell--drag-over",i),t.classList.toggle("designbase-wc-gantt__label-cell--drag-over-before",i&&!d),t.classList.toggle("designbase-wc-gantt__label-cell--drag-over-after",i&&d),i&&(a=d?s+1:s)}),this.reorderDropIndex=a}clearReorderIndicators(){this.querySelectorAll(".designbase-wc-gantt__label-cell--drag-over").forEach(e=>{e.classList.remove("designbase-wc-gantt__label-cell--drag-over","designbase-wc-gantt__label-cell--drag-over-before","designbase-wc-gantt__label-cell--drag-over-after")})}finishReorderDrag(e){if(!this.reorderState)return;const{kind:t,id:a,groupId:s,fromIndex:r,captureEl:n}=this.reorderState;try{n.releasePointerCapture(this.reorderState.pointerId)}catch{}const i=this.reorderDropIndex;if(this.reorderState=null,this.reorderDropIndex=null,this.classList.remove("designbase-wc-gantt--reordering"),this.clearReorderIndicators(),null===i)return;const d=i>r?i-1:i;d<0||d===r||("group"===t?this.reorderGroups(r,d,a):this.reorderRows(r,d,a,s))}emitStructureChange(e,t,a,s){this.suppressRender=!0,this.groups=e,this.rows=t,this.suppressRender=!1,this.dispatchEvent(new CustomEvent(s,{detail:{...a,groups:e,rows:t},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-change",{detail:{groups:e,rows:t,items:this.items},bubbles:!0,composed:!0})),this.render()}reorderGroups(e,t,a){const s=[...this.groups],[r]=s.splice(e,1);r&&(s.splice(t,0,r),this.emitStructureChange(s,this.rows,{groupId:a,fromIndex:e,toIndex:t},"db-group-reorder"))}reorderRows(e,t,a,s){const r=this.getRowScope(s),n=[...r],[i]=n.splice(e,1);if(!i)return;n.splice(t,0,i);const d=new Set(r.map(e=>e.id)),o=[];let l=!1;for(const e of this.rows)d.has(e.id)?l||(o.push(...n),l=!0):o.push(e);l||o.push(...n),this.emitStructureChange(this.groups,o,{rowId:a,groupId:s,fromIndex:e,toIndex:t},"db-row-reorder")}createGroupBadge(e){const t=document.createElement("db-badge");return t.className="designbase-wc-gantt__group-badge",t.setAttribute("badge-style","dot"),t.setAttribute("size","s"),t.setAttribute("variant","primary"),t.setAttribute("aria-hidden","true"),e&&t.style.setProperty("--db-gantt-badge-color",e),t}createGroupChevron(t){const a=document.createElement("span");return a.className=["designbase-wc-gantt__group-chevron",t?"designbase-wc-gantt__group-chevron--collapsed":""].filter(Boolean).join(" "),a.append(e("chevron-down",12)),a}createAssignee(e){const t=document.createElement("span");if(t.className="designbase-wc-gantt__assignee",t.title=e.name,e.avatar){const a=document.createElement("img");a.src=e.avatar,a.alt=e.name,t.appendChild(a)}else t.textContent=this.getInitials(e);return t}createStatusIcon(e){const t=document.createElement("span");return t.className=`designbase-wc-gantt__status designbase-wc-gantt__status--${e}`,t.setAttribute("aria-hidden","true"),t.textContent="completed"===e?"✓":"!",t}deriveSummaryColor(e,t){if(0===e.length)return t||a[0];const s=e.filter(e=>e.color);if(0===s.length)return t||a[0];return s.reduce((e,t)=>{const a=daysBetween(parseDate(e.startDate),parseDate(e.endDate));return daysBetween(parseDate(t.startDate),parseDate(t.endDate))>a?t:e}).color||t||a[0]}getGroupSummary(e,t){const a=this.rows.filter(t=>t.groupId===e),s=this.items.filter(e=>a.some(t=>t.id===e.rowId));if(0===s.length)return null;const r=s.map(e=>parseDate(e.startDate).getTime()),n=s.map(e=>parseDate(e.endDate).getTime()),i=s.map(e=>e.progress).filter(e=>"number"==typeof e);return{startDate:toDateKey(new Date(Math.min(...r))),endDate:toDateKey(new Date(Math.max(...n))),color:this.deriveSummaryColor(s,t),progress:i.length>0?i.reduce((e,t)=>e+t,0)/i.length:0,count:s.length}}applyBarTone(e,t){const a=function deriveBarTone(e){return{base:`color-mix(in srgb, ${e} 42%, white)`,progress:`color-mix(in srgb, ${e} 58%, white)`}}(t);e.style.setProperty("--db-gantt-bar-color",t),e.style.setProperty("--db-gantt-bar-bg",a.base),e.style.setProperty("--db-gantt-bar-progress-bg",a.progress)}createGroupSummaryBar(e,t,a,s){const r=clampDate(parseDate(e.startDate),t,a),n=clampDate(parseDate(e.endDate),t,a);if(n<t||r>a)return null;const i=daysBetween(t,r),d=daysBetween(r,n)+1,o=Math.min(100,Math.max(0,e.progress)),l=document.createElement("div");if(l.className="designbase-wc-gantt__group-summary",l.setAttribute("aria-hidden","true"),l.title=`${e.count}개 태스크`,this.applyBarTone(l,e.color),l.style.left=i*s+2+"px",l.style.width=`${Math.max(d*s-4,s-4)}px`,o>0){const e=document.createElement("span");e.className="designbase-wc-gantt__group-summary-progress",e.style.width=`${o}%`,l.appendChild(e)}return l}createBar(e,t,s,r){const n=e.color||a[r%a.length],i=document.createElement("div");i.className="designbase-wc-gantt__bar",i.setAttribute("role","button"),i.setAttribute("tabindex",e.disabled?"-1":"0"),i.setAttribute("aria-label",`${e.title}, ${e.startDate} – ${e.endDate}`),this.applyBarTone(i,n),e.disabled&&i.classList.add("designbase-wc-gantt__bar--disabled"),this.applyBarGeometry(i,e,t,s);const d="number"==typeof e.progress?Math.min(100,Math.max(0,e.progress)):0;if(d>0){const e=document.createElement("span");e.className="designbase-wc-gantt__bar-progress",e.style.width=`${d}%`,i.appendChild(e)}const o=document.createElement("div");o.className="designbase-wc-gantt__bar-body","delayed"!==e.status&&"at-risk"!==e.status||o.appendChild(this.createStatusIcon(e.status));const l=document.createElement("span");l.className="designbase-wc-gantt__bar-label",l.textContent=e.title,o.appendChild(l),e.assignee&&o.appendChild(this.createAssignee(e.assignee));const c=document.createElement("span");c.className="designbase-wc-gantt__bar-handle designbase-wc-gantt__bar-handle--start",c.setAttribute("aria-hidden","true");const g=document.createElement("span");return g.className="designbase-wc-gantt__bar-handle designbase-wc-gantt__bar-handle--end",g.setAttribute("aria-hidden","true"),i.append(c,o,g),e.disabled||!this.getBool("draggable",!0)||this.getBool("disabled")||(c.addEventListener("pointerdown",t=>this.startBarDrag(t,e,"resize-start",i)),g.addEventListener("pointerdown",t=>this.startBarDrag(t,e,"resize-end",i)),o.addEventListener("pointerdown",t=>{t.target.closest(".designbase-wc-gantt__bar-handle")||this.startBarDrag(t,e,"move",i)})),i.addEventListener("click",t=>{this.dragState||this.didDrag?this.didDrag=!1:(t.stopPropagation(),this.dispatchEvent(new CustomEvent("db-item-click",{detail:{item:e},bubbles:!0,composed:!0})))}),i}toggleGroup(e){this.collapsedGroups.has(e)?this.collapsedGroups.delete(e):this.collapsedGroups.add(e),this.dispatchEvent(new CustomEvent("db-group-toggle",{detail:{groupId:e,collapsed:this.collapsedGroups.has(e)},bubbles:!0,composed:!0})),this.render()}render(){const e=this.items,s=this.getOption("scale",t,"day"),r=this.getNumber("cell-width","week"===s?72:44),n=this.getBool("show-weekends",!0),i=this.getBool("show-today",!0),d=this.getAttribute("sidebar-label")||"할 일",o=this.getBool("disabled"),l=this.getBool("full-width",!0),c=this.getWeekdays(),{start:g,end:p}=this.getViewRange(),h=this.getDateColumns(g,p),u=toDateKey(this.getTodayDate()),m=h.findIndex(e=>toDateKey(e)===u),b=this.getVisibleRows(),w=h.length*r,D=document.createElement("div");D.className=["designbase-wc-gantt",l?"designbase-wc-gantt--full-width":"",o?"designbase-wc-gantt--disabled":"",this.getBool("draggable",!0)?"designbase-wc-gantt--draggable":""].filter(Boolean).join(" ");const y=document.createElement("div");y.className="designbase-wc-gantt__viewport";const _=document.createElement("div");_.className="designbase-wc-gantt__grid",_.style.setProperty("--db-gantt-chart-width",`${w}px`),_.style.setProperty("--db-gantt-cell-width",`${r}px`);const f=document.createElement("div");f.className="designbase-wc-gantt__corner",f.textContent=d,_.appendChild(f);const v=document.createElement("div");v.className="designbase-wc-gantt__date-header";const E=document.createElement("div");E.className="designbase-wc-gantt__month-row";for(const e of this.getMonthSegments(h)){const t=document.createElement("div");t.className="designbase-wc-gantt__month-cell",t.style.width=e.span*r+"px",t.textContent=e.label,E.appendChild(t)}v.appendChild(E);const S=document.createElement("div");S.className="designbase-wc-gantt__day-row";for(const e of h){const t=toDateKey(e)===u,a=0===e.getDay()||6===e.getDay(),s=document.createElement("div");s.className=["designbase-wc-gantt__day-cell",t&&i?"designbase-wc-gantt__day-cell--today":"",a&&n?"designbase-wc-gantt__day-cell--weekend":""].filter(Boolean).join(" "),s.style.width=`${r}px`;const d=document.createElement("span");d.className="designbase-wc-gantt__day-num",d.textContent=String(e.getDate());const o=document.createElement("span");o.className="designbase-wc-gantt__day-name",o.textContent=c[e.getDay()],s.append(d,o),S.appendChild(s)}v.appendChild(S),_.appendChild(v);const C=new Map;e.forEach((e,t)=>{const s=C.get(e.rowId)||[];s.push({...e,color:e.color||a[t%a.length]}),C.set(e.rowId,s)});let I=0;for(const e of b){if("group"===e.type){const{group:t}=e,a=this.collapsedGroups.has(t.id),s=document.createElement("button");s.type="button",s.className="designbase-wc-gantt__label-cell designbase-wc-gantt__label-cell--group",s.setAttribute("aria-expanded",String(!a)),s.dataset.groupId=t.id;const i=document.createElement("span");i.className="designbase-wc-gantt__group-title",i.textContent=t.title,s.append(this.createDragHandle("group",t.id),this.createGroupChevron(a),this.createGroupBadge(t.color),i),s.addEventListener("click",e=>{e.target.closest(".designbase-wc-gantt__drag-handle")||this.toggleGroup(t.id)}),_.appendChild(s);const d=document.createElement("div");if(d.className="designbase-wc-gantt__track-cell designbase-wc-gantt__track-cell--group",a){const e=this.getGroupSummary(t.id,t.color);if(e){const t=document.createElement("div");t.className="designbase-wc-gantt__grid-bg",h.forEach(e=>{const a=document.createElement("div"),s=0===e.getDay()||6===e.getDay();a.className=["designbase-wc-gantt__grid-cell",s&&n?"designbase-wc-gantt__grid-cell--weekend":""].filter(Boolean).join(" "),a.style.width=`${r}px`,t.appendChild(a)}),d.appendChild(t);const a=document.createElement("div");a.className="designbase-wc-gantt__group-summary-wrap";const s=this.createGroupSummaryBar(e,g,p,r);s&&a.appendChild(s),d.appendChild(a)}}_.appendChild(d);continue}const{row:t}=e,a=document.createElement("button");a.type="button",a.className="designbase-wc-gantt__label-cell designbase-wc-gantt__label-cell--row",a.dataset.groupId=t.groupId||"",a.dataset.rowId=t.id;const s=document.createElement("span");s.className="designbase-wc-gantt__row-title",s.textContent=t.label,a.append(this.createDragHandle("row",t.id,t.groupId),s),a.addEventListener("click",e=>{e.target.closest(".designbase-wc-gantt__drag-handle")||this.dispatchEvent(new CustomEvent("db-row-click",{detail:{row:t},bubbles:!0,composed:!0}))}),_.appendChild(a);const i=document.createElement("div");i.className="designbase-wc-gantt__track-cell";const d=document.createElement("div");d.className="designbase-wc-gantt__grid-bg",h.forEach(e=>{const t=document.createElement("div"),a=0===e.getDay()||6===e.getDay();t.className=["designbase-wc-gantt__grid-cell",a&&n?"designbase-wc-gantt__grid-cell--weekend":""].filter(Boolean).join(" "),t.style.width=`${r}px`,d.appendChild(t)}),i.appendChild(d);const o=document.createElement("div");o.className="designbase-wc-gantt__bars",(C.get(t.id)||[]).forEach(e=>{const t=clampDate(parseDate(e.startDate),g,p),a=clampDate(parseDate(e.endDate),g,p);a<g||t>p||o.appendChild(this.createBar({...e,startDate:toDateKey(t),endDate:toDateKey(a)},g,r,I++))}),i.appendChild(o),_.appendChild(i)}if(y.appendChild(_),i&&m>=0){const e=document.createElement("div");e.className="designbase-wc-gantt__today-line",e.style.left=`calc(var(--db-gantt-label-width) + ${m*r+r/2}px)`,_.appendChild(e)}D.appendChild(y),this.replaceChildren(D)}}customElements.get("db-gantt")||customElements.define("db-gantt",DbGantt);export{DbGantt};