@sellmate/design-system 1.0.59 → 1.0.61

package/dist/cjs/sd-date-picker.config-DWC_aiD2.js

@@ -0,0 +1,175 @@
+'use strict';
+
+const datepicker = {
+	sm: {
+		height: "28",
+		paddingX: "12",
+		gap: "8",
+		icon: "16",
+		typography: {
+			fontWeight: "400",
+			fontSize: "12",
+			lineHeight: "20"},
+		radius: "4"},
+	md: {
+		height: "36",
+		paddingX: "16",
+		gap: "12",
+		icon: "20",
+		typography: {
+			fontWeight: "400",
+			fontSize: "16",
+			lineHeight: "26"},
+		radius: "6"},
+	border: {
+		"default": "#AAAAAA",
+		focus: "#0075FF"},
+	bg: {
+		"default": "#FFFFFF"},
+	icon: {
+		"default": "#888888",
+		disabled: "#BBBBBB"
+	},
+	text: {
+		"default": "#222222",
+		hint: "#555555",
+		disabled: "#888888"
+	},
+	calendar: {
+		bg: "#FFFFFF",
+		paddingXY: "24",
+		gap: "12",
+		radius: "8",
+		header: {
+			gap: "8",
+			divider: "#E1E1E1",
+			typography: {
+				fontWeight: "500",
+				fontSize: "14",
+				lineHeight: "24"
+			}
+		},
+		week: {
+			typography: {
+				fontWeight: "400",
+				fontSize: "12",
+				lineHeight: "20"},
+			color: "#888888"
+		},
+		grid: {
+			rowGap: "4"
+		},
+		day: {
+			size: "40",
+			circle: {
+				size: "32",
+				radius: "9999"
+			},
+			"default": {
+				text: "#222222"
+			},
+			hover: {
+				text: "#222222",
+				border: "#0075FF"
+			},
+			select: {
+				bg: "#0075FF",
+				text: "#FFFFFF"
+			},
+			disabled: {
+				text: "#888888"
+			},
+			typography: {
+				"default": {
+					fontWeight: "400",
+					fontSize: "14",
+					lineHeight: "24"
+				},
+				bold: {
+					fontWeight: "700"}
+			}},
+		range: {
+			bg: "#D9EAFF",
+			height: "32",
+			panelGap: "24",
+			divider: "#E1E1E1"}
+	}
+};
+var datepickerTokens = {
+	datepicker: datepicker
+};
+
+const sm = datepickerTokens.datepicker.sm;
+const md = datepickerTokens.datepicker.md;
+const DATEPICKER_SIZE_MAP = {
+    sm: {
+        height: sm.height,
+        paddingX: sm.paddingX,
+        gap: sm.gap,
+        iconSize: sm.icon,
+        radius: sm.radius,
+        fontSize: sm.typography.fontSize,
+        lineHeight: sm.typography.lineHeight,
+        fontWeight: sm.typography.fontWeight,
+    },
+    md: {
+        height: md.height,
+        paddingX: md.paddingX,
+        gap: md.gap,
+        iconSize: md.icon,
+        radius: md.radius,
+        fontSize: md.typography.fontSize,
+        lineHeight: md.typography.lineHeight,
+        fontWeight: md.typography.fontWeight,
+    },
+};
+const DATEPICKER_COLORS = {
+    border: datepickerTokens.datepicker.border,
+    bg: datepickerTokens.datepicker.bg,
+    icon: datepickerTokens.datepicker.icon,
+    text: datepickerTokens.datepicker.text,
+};
+const CALENDAR_LAYOUT = {
+    bg: datepickerTokens.datepicker.calendar.bg,
+    paddingXY: datepickerTokens.datepicker.calendar.paddingXY,
+    gap: datepickerTokens.datepicker.calendar.gap,
+    radius: datepickerTokens.datepicker.calendar.radius,
+    header: {
+        gap: datepickerTokens.datepicker.calendar.header.gap,
+        divider: datepickerTokens.datepicker.calendar.header.divider,
+        fontSize: datepickerTokens.datepicker.calendar.header.typography.fontSize,
+        lineHeight: datepickerTokens.datepicker.calendar.header.typography.lineHeight,
+        fontWeight: datepickerTokens.datepicker.calendar.header.typography.fontWeight,
+    },
+    week: {
+        fontSize: datepickerTokens.datepicker.calendar.week.typography.fontSize,
+        lineHeight: datepickerTokens.datepicker.calendar.week.typography.lineHeight,
+        fontWeight: datepickerTokens.datepicker.calendar.week.typography.fontWeight,
+        color: datepickerTokens.datepicker.calendar.week.color,
+    },
+    grid: {
+        rowGap: datepickerTokens.datepicker.calendar.grid.rowGap,
+    },
+    day: {
+        size: datepickerTokens.datepicker.calendar.day.size,
+        circleSize: datepickerTokens.datepicker.calendar.day.circle.size,
+        circleRadius: datepickerTokens.datepicker.calendar.day.circle.radius,
+        defaultText: datepickerTokens.datepicker.calendar.day.default.text,
+        hoverText: datepickerTokens.datepicker.calendar.day.hover.text,
+        hoverBorder: datepickerTokens.datepicker.calendar.day.hover.border,
+        selectBg: datepickerTokens.datepicker.calendar.day.select.bg,
+        selectText: datepickerTokens.datepicker.calendar.day.select.text,
+        disabledText: datepickerTokens.datepicker.calendar.day.disabled.text,
+        fontSize: datepickerTokens.datepicker.calendar.day.typography.default.fontSize,
+        lineHeight: datepickerTokens.datepicker.calendar.day.typography.default.lineHeight,
+        fontWeight: datepickerTokens.datepicker.calendar.day.typography.default.fontWeight,
+        boldFontWeight: datepickerTokens.datepicker.calendar.day.typography.bold.fontWeight,
+    },
+};
+const WEEK_LABELS = ['일', '월', '화', '수', '목', '금', '토'];
+
+exports.CALENDAR_LAYOUT = CALENDAR_LAYOUT;
+exports.DATEPICKER_COLORS = DATEPICKER_COLORS;
+exports.DATEPICKER_SIZE_MAP = DATEPICKER_SIZE_MAP;
+exports.WEEK_LABELS = WEEK_LABELS;
+exports.datepickerTokens = datepickerTokens;

package/dist/cjs/sd-date-range-picker-calendar.cjs.entry.js

@@ -0,0 +1,280 @@
+'use strict';
+
+var index = require('./index-BQt-JC6r.js');
+var useDatePicker = require('./useDatePicker-cK_XK_P6.js');
+var sdDatePicker_config = require('./sd-date-picker.config-DWC_aiD2.js');
+
+const addDays = (inputDate, days) => {
+    const [year, month, day] = inputDate.split('-').map(Number);
+    const date = new Date(year, month - 1, day); // month는 0부터 시작하므로 -1
+    // 날짜 계산
+    date.setDate(date.getDate() + days);
+    // yyyy-mm-dd 형식으로 변환
+    const resultYear = date.getFullYear();
+    const resultMonth = String(date.getMonth() + 1).padStart(2, '0');
+    const resultDay = String(date.getDate()).padStart(2, '0');
+    return `${resultYear}-${resultMonth}-${resultDay}`;
+};
+
+const RANGE_LAYOUT = {
+    bg: sdDatePicker_config.datepickerTokens.datepicker.calendar.range.bg,
+    height: sdDatePicker_config.datepickerTokens.datepicker.calendar.range.height,
+    panelGap: sdDatePicker_config.datepickerTokens.datepicker.calendar.range.panelGap,
+    divider: sdDatePicker_config.datepickerTokens.datepicker.calendar.range.divider,
+};
+
+const sdDateRangePickerCalendarCss = () => `sd-date-range-picker-calendar{display:block}sd-date-range-picker-calendar .sd-date-range-picker-calendar{display:flex;flex-direction:column;gap:var(--calendar-gap);height:364px;padding:var(--calendar-padding);background:var(--calendar-bg);border-radius:var(--calendar-radius);box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);user-select:none}sd-date-range-picker-calendar .sd-date-range-picker-calendar__top-bar{position:relative;display:flex;align-items:center;justify-content:center}sd-date-range-picker-calendar .sd-date-range-picker-calendar__year-nav{display:flex;align-items:center;justify-content:center;gap:var(--calendar-gap);font-size:var(--calendar-header-font-size);line-height:var(--calendar-header-line-height);font-weight:var(--calendar-header-font-weight);color:var(--calendar-day-text)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__today-button{position:absolute;right:0;background:transparent;cursor:pointer;font-size:var(--calendar-week-font-size);font-weight:var(--calendar-header-font-weight);color:var(--calendar-day-text);min-width:37px;height:24px;line-height:24px;text-align:center}sd-date-range-picker-calendar .sd-date-range-picker-calendar__today-button:hover{text-decoration:underline}sd-date-range-picker-calendar .sd-date-range-picker-calendar__panels{display:flex;flex-direction:row;gap:var(--range-panel-gap)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__divider{flex-shrink:0;width:1px;background:var(--range-divider)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__panel{display:flex;flex-direction:column;gap:var(--calendar-gap)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__header{display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;gap:var(--calendar-header-gap);font-size:var(--calendar-header-font-size);line-height:var(--calendar-header-line-height);font-weight:var(--calendar-header-font-weight);color:var(--calendar-day-text)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__nav-group{display:inline-flex;align-items:center;gap:var(--calendar-gap)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__nav-group-month{display:flex;width:100%;align-items:center;gap:var(--calendar-gap)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__label{display:inline-flex;align-items:center;justify-content:center;min-width:40px;text-align:center}sd-date-range-picker-calendar .sd-date-range-picker-calendar__label-month{flex:1}sd-date-range-picker-calendar .sd-date-range-picker-calendar__nav-placeholder{visibility:hidden;pointer-events:none}sd-date-range-picker-calendar .sd-date-range-picker-calendar__week{display:grid;grid-template-columns:repeat(7, var(--calendar-day-size))}sd-date-range-picker-calendar .sd-date-range-picker-calendar__week-cell{display:inline-flex;align-items:center;justify-content:center;height:20px;font-size:var(--calendar-week-font-size);line-height:var(--calendar-week-line-height);font-weight:var(--calendar-week-font-weight);color:var(--calendar-week-color)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__grid{display:grid;grid-template-columns:repeat(7, var(--calendar-day-size));row-gap:var(--calendar-grid-row-gap)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--calendar-day-size);height:var(--range-height);padding:0;border:none;background:transparent;cursor:pointer;font-size:var(--calendar-day-font-size);line-height:var(--calendar-day-line-height);font-weight:var(--calendar-day-font-weight);color:var(--calendar-day-text)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day-circle{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:var(--calendar-day-circle-size);height:var(--calendar-day-circle-size);border-radius:calc(var(--calendar-day-circle-radius) * 1px);border:1px solid transparent;box-sizing:border-box}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day:not(:disabled):hover .sd-date-range-picker-calendar__day-circle{border-radius:16px;border:1px solid var(--calendar-day-hover-border)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--today .sd-date-range-picker-calendar__day-circle{font-weight:700}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--in-range{background:var(--range-bg)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--range-start{background:linear-gradient(to right, transparent 50%, var(--range-bg) 50%)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--range-end{background:var(--range-bg)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--range-startsd-date-range-picker-calendar .sd-date-range-picker-calendar__day--range-end{background:transparent}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--selected .sd-date-range-picker-calendar__day-circle{border-radius:16px;background:var(--calendar-day-select-bg);color:var(--calendar-day-select-text)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--selected:not(:disabled):hover .sd-date-range-picker-calendar__day-circle{background:var(--calendar-day-select-bg);color:var(--calendar-day-select-text)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--disabled{color:var(--calendar-day-disabled-text);cursor:not-allowed}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--disabled:not(.sd-date-range-picker-calendar__day--in-range):not(.sd-date-range-picker-calendar__day--range-start):not(.sd-date-range-picker-calendar__day--range-end){background:none}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--empty{visibility:hidden;pointer-events:none;background:transparent}`;
+
+const SdDateRangePickerCalendar = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.select = index.createEvent(this, "sdSelect", 7);
+        this.viewChange = index.createEvent(this, "sdViewChange", 7);
+    }
+    value = null;
+    selectable;
+    maxRange;
+    currentYear;
+    currentMonth;
+    pendingStart = '';
+    hoverDate = '';
+    displayValue = null;
+    select;
+    viewChange;
+    dateUtil = useDatePicker.useDatePicker();
+    componentWillLoad() {
+        this.syncFromValue();
+    }
+    handleValueChange() {
+        this.syncFromValue();
+    }
+    syncFromValue() {
+        const base = this.value?.[0] || useDatePicker.today;
+        const [year, month] = base.split('-').map(Number);
+        this.currentYear = year;
+        this.currentMonth = month;
+        this.pendingStart = '';
+        this.hoverDate = '';
+        this.displayValue = this.value ? [this.value[0], this.value[1]] : null;
+    }
+    get rightYear() {
+        return this.currentMonth === 12 ? this.currentYear + 1 : this.currentYear;
+    }
+    get rightMonth() {
+        return this.currentMonth === 12 ? 1 : this.currentMonth + 1;
+    }
+    formatDate(year, month, day) {
+        return `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+    }
+    buildCells(year, month) {
+        const firstDayIndex = new Date(year, month - 1, 1).getDay();
+        const daysInCurrent = new Date(year, month, 0).getDate();
+        const prevMonth = month === 1 ? 12 : month - 1;
+        const prevYear = month === 1 ? year - 1 : year;
+        const daysInPrev = new Date(prevYear, prevMonth, 0).getDate();
+        const nextMonth = month === 12 ? 1 : month + 1;
+        const nextYear = month === 12 ? year + 1 : year;
+        const cells = [];
+        for (let i = firstDayIndex - 1; i >= 0; i--) {
+            const day = daysInPrev - i;
+            cells.push({
+                date: this.formatDate(prevYear, prevMonth, day),
+                day,
+                inCurrentMonth: false,
+            });
+        }
+        for (let day = 1; day <= daysInCurrent; day++) {
+            cells.push({
+                date: this.formatDate(year, month, day),
+                day,
+                inCurrentMonth: true,
+            });
+        }
+        const remaining = (7 - (cells.length % 7)) % 7;
+        for (let day = 1; day <= remaining; day++) {
+            cells.push({
+                date: this.formatDate(nextYear, nextMonth, day),
+                day,
+                inCurrentMonth: false,
+            });
+        }
+        return cells;
+    }
+    emitViewChange() {
+        this.viewChange.emit({ year: this.currentYear, month: this.currentMonth });
+    }
+    goPrevYear = (event) => {
+        event.stopPropagation();
+        this.currentYear -= 1;
+        this.emitViewChange();
+    };
+    goNextYear = (event) => {
+        event.stopPropagation();
+        this.currentYear += 1;
+        this.emitViewChange();
+    };
+    goPrevMonth = (event) => {
+        event.stopPropagation();
+        const { newYear, newMonth } = this.dateUtil.calculateYearMonth(this.currentYear, this.currentMonth, 'prev');
+        this.currentYear = newYear;
+        this.currentMonth = newMonth;
+        this.emitViewChange();
+    };
+    goNextMonth = (event) => {
+        event.stopPropagation();
+        const { newYear, newMonth } = this.dateUtil.calculateYearMonth(this.currentYear, this.currentMonth, 'next');
+        this.currentYear = newYear;
+        this.currentMonth = newMonth;
+        this.emitViewChange();
+    };
+    goToday = (event) => {
+        event.stopPropagation();
+        const [year, month] = useDatePicker.today.split('-').map(Number);
+        if (this.currentYear === year && this.currentMonth === month)
+            return;
+        this.currentYear = year;
+        this.currentMonth = month;
+        this.emitViewChange();
+    };
+    isDisabled(date) {
+        if (this.selectable) {
+            const [start, end] = this.selectable;
+            if (start && date < start)
+                return true;
+            if (end && date > end)
+                return true;
+        }
+        if (this.maxRange && this.pendingStart) {
+            const min = addDays(this.pendingStart, -this.maxRange);
+            const max = addDays(this.pendingStart, this.maxRange);
+            if (date < min || date > max)
+                return true;
+        }
+        return false;
+    }
+    handleDayClick(cell) {
+        if (!cell.inCurrentMonth)
+            return;
+        if (this.isDisabled(cell.date))
+            return;
+        const hasCompleteRange = !!this.displayValue && !!this.displayValue[0] && !!this.displayValue[1];
+        if (!this.pendingStart || hasCompleteRange || cell.date < this.pendingStart) {
+            this.pendingStart = cell.date;
+            this.displayValue = null;
+            this.hoverDate = '';
+            return;
+        }
+        const newRange = [this.pendingStart, cell.date];
+        this.pendingStart = '';
+        this.hoverDate = '';
+        this.displayValue = newRange;
+        this.select.emit(newRange);
+    }
+    handleDayHover(cell) {
+        if (!cell.inCurrentMonth)
+            return;
+        if (this.pendingStart) {
+            this.hoverDate = cell.date;
+        }
+    }
+    getRangeState(date, inCurrentMonth) {
+        if (!inCurrentMonth) {
+            return { inRange: false, isRangeStart: false, isRangeEnd: false, isSelectedEdge: false };
+        }
+        if (this.pendingStart) {
+            const isStart = date === this.pendingStart;
+            const previewEnd = this.hoverDate && this.hoverDate >= this.pendingStart ? this.hoverDate : '';
+            const inPreview = !!previewEnd && date > this.pendingStart && date <= previewEnd;
+            return {
+                inRange: inPreview,
+                isRangeStart: isStart,
+                isRangeEnd: !!previewEnd && date === previewEnd,
+                isSelectedEdge: isStart,
+            };
+        }
+        if (this.displayValue && this.displayValue[0] && this.displayValue[1]) {
+            const [start, end] = this.displayValue;
+            const isStart = date === start;
+            const isEnd = date === end;
+            return {
+                inRange: date > start && date < end,
+                isRangeStart: isStart,
+                isRangeEnd: isEnd,
+                isSelectedEdge: isStart || isEnd,
+            };
+        }
+        return { inRange: false, isRangeStart: false, isRangeEnd: false, isSelectedEdge: false };
+    }
+    renderHeader(year, month, isLeft) {
+        const monthLabel = `${year}.${String(month).padStart(2, '0')}`;
+        return (index.h("div", { class: "sd-date-range-picker-calendar__header" }, index.h("div", { class: "sd-date-range-picker-calendar__nav-group sd-date-range-picker-calendar__nav-group-month" }, index.h("sd-ghost-button", { class: {
+                'sd-date-range-picker-calendar__nav-placeholder': !isLeft,
+            }, ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), index.h("span", { class: "sd-date-range-picker-calendar__label sd-date-range-picker-calendar__label-month" }, monthLabel), index.h("sd-ghost-button", { class: {
+                'sd-date-range-picker-calendar__nav-placeholder': isLeft,
+            }, ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))));
+    }
+    renderYearNav() {
+        return (index.h("div", { class: "sd-date-range-picker-calendar__top-bar" }, index.h("div", { class: "sd-date-range-picker-calendar__year-nav" }, index.h("sd-ghost-button", { ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), index.h("span", { class: "sd-date-range-picker-calendar__label" }, this.currentYear), index.h("sd-ghost-button", { ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), index.h("button", { type: "button", class: "sd-date-range-picker-calendar__today-button", onClick: this.goToday }, "\uC624\uB298")));
+    }
+    renderPanel(year, month, isLeft) {
+        const cells = this.buildCells(year, month);
+        return (index.h("div", { class: "sd-date-range-picker-calendar__panel" }, this.renderHeader(year, month, isLeft), index.h("div", { class: "sd-date-range-picker-calendar__week" }, sdDatePicker_config.WEEK_LABELS.map(label => (index.h("span", { key: label, class: "sd-date-range-picker-calendar__week-cell" }, label)))), index.h("div", { class: "sd-date-range-picker-calendar__grid" }, cells.map(cell => {
+            const { inRange, isRangeStart, isRangeEnd, isSelectedEdge } = this.getRangeState(cell.date, cell.inCurrentMonth);
+            const isToday = cell.inCurrentMonth && useDatePicker.today === cell.date;
+            const isDisabled = cell.inCurrentMonth && this.isDisabled(cell.date);
+            return (index.h("button", { type: "button", key: cell.date, class: {
+                    'sd-date-range-picker-calendar__day': true,
+                    'sd-date-range-picker-calendar__day--empty': !cell.inCurrentMonth,
+                    'sd-date-range-picker-calendar__day--today': isToday,
+                    'sd-date-range-picker-calendar__day--in-range': inRange,
+                    'sd-date-range-picker-calendar__day--range-start': isRangeStart,
+                    'sd-date-range-picker-calendar__day--range-end': isRangeEnd,
+                    'sd-date-range-picker-calendar__day--selected': isSelectedEdge,
+                    'sd-date-range-picker-calendar__day--disabled': isDisabled,
+                }, disabled: !cell.inCurrentMonth || isDisabled, tabindex: !cell.inCurrentMonth ? -1 : undefined, "aria-hidden": !cell.inCurrentMonth ? 'true' : undefined, onClick: () => this.handleDayClick(cell), onMouseEnter: () => this.handleDayHover(cell) }, index.h("span", { class: "sd-date-range-picker-calendar__day-circle" }, cell.inCurrentMonth ? cell.day : '')));
+        }))));
+    }
+    render() {
+        const cssVars = {
+            '--calendar-bg': sdDatePicker_config.CALENDAR_LAYOUT.bg,
+            '--calendar-padding': `${sdDatePicker_config.CALENDAR_LAYOUT.paddingXY}px`,
+            '--calendar-gap': `${sdDatePicker_config.CALENDAR_LAYOUT.gap}px`,
+            '--calendar-radius': `${sdDatePicker_config.CALENDAR_LAYOUT.radius}px`,
+            '--calendar-header-gap': `${sdDatePicker_config.CALENDAR_LAYOUT.header.gap}px`,
+            '--calendar-header-divider': sdDatePicker_config.CALENDAR_LAYOUT.header.divider,
+            '--calendar-header-font-size': `${sdDatePicker_config.CALENDAR_LAYOUT.header.fontSize}px`,
+            '--calendar-header-line-height': `${sdDatePicker_config.CALENDAR_LAYOUT.header.lineHeight}px`,
+            '--calendar-header-font-weight': sdDatePicker_config.CALENDAR_LAYOUT.header.fontWeight,
+            '--calendar-week-font-size': `${sdDatePicker_config.CALENDAR_LAYOUT.week.fontSize}px`,
+            '--calendar-week-line-height': `${sdDatePicker_config.CALENDAR_LAYOUT.week.lineHeight}px`,
+            '--calendar-week-font-weight': sdDatePicker_config.CALENDAR_LAYOUT.week.fontWeight,
+            '--calendar-week-color': sdDatePicker_config.CALENDAR_LAYOUT.week.color,
+            '--calendar-grid-row-gap': `${sdDatePicker_config.CALENDAR_LAYOUT.grid.rowGap}px`,
+            '--calendar-day-size': `${sdDatePicker_config.CALENDAR_LAYOUT.day.size}px`,
+            '--calendar-day-circle-size': `${sdDatePicker_config.CALENDAR_LAYOUT.day.circleSize}px`,
+            '--calendar-day-circle-radius': `${sdDatePicker_config.CALENDAR_LAYOUT.day.circleRadius}px`,
+            '--calendar-day-text': sdDatePicker_config.CALENDAR_LAYOUT.day.defaultText,
+            '--calendar-day-hover-text': sdDatePicker_config.CALENDAR_LAYOUT.day.hoverText,
+            '--calendar-day-hover-border': sdDatePicker_config.CALENDAR_LAYOUT.day.hoverBorder,
+            '--calendar-day-select-bg': sdDatePicker_config.CALENDAR_LAYOUT.day.selectBg,
+            '--calendar-day-select-text': sdDatePicker_config.CALENDAR_LAYOUT.day.selectText,
+            '--calendar-day-disabled-text': sdDatePicker_config.CALENDAR_LAYOUT.day.disabledText,
+            '--calendar-day-font-size': `${sdDatePicker_config.CALENDAR_LAYOUT.day.fontSize}px`,
+            '--calendar-day-line-height': `${sdDatePicker_config.CALENDAR_LAYOUT.day.lineHeight}px`,
+            '--calendar-day-font-weight': sdDatePicker_config.CALENDAR_LAYOUT.day.fontWeight,
+            '--range-bg': RANGE_LAYOUT.bg,
+            '--range-height': `${RANGE_LAYOUT.height}px`,
+            '--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
+            '--range-divider': RANGE_LAYOUT.divider,
+        };
+        return (index.h(index.Fragment, { key: '5c9510be171a638870c8b86ef2c13c81d4920209' }, index.h("div", { key: 'b9af5cf84625eb19039b6ab2b41622364cbbea82', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), index.h("div", { key: '83578cd21d5984e3ffbda26c90a96df82d78deb5', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), index.h("span", { key: '8c31d30b60f252adaafa1b830099743f6501e368', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
+    }
+    static get watchers() { return {
+        "value": [{
+                "handleValueChange": 0
+            }]
+    }; }
+};
+SdDateRangePickerCalendar.style = sdDateRangePickerCalendarCss();
+
+exports.sd_date_range_picker_calendar = SdDateRangePickerCalendar;