@sellmate/design-system 1.0.60 → 1.0.62

package/dist/esm/sd-date-picker.entry.js

@@ -1,6 +1,8 @@
 import { r as registerInstance, c as createEvent, g as getElement, h } from './index-DsU722JF.js';
+import { n as nanoid } from './index-CCwNgVmC.js';
+import { D as DATEPICKER_COLORS, a as DATEPICKER_SIZE_MAP } from './sd-date-picker.config-C4i826lM.js';
 
-const sdDatePickerCss = () => `.sd-date-picker.sc-sd-date-picker{width:100%;display:inline-block}.sd-date-picker.sc-sd-date-picker .sd-date-picker--disabled.sc-sd-date-picker .date-icon.sc-sd-date-picker{cursor:not-allowed !important;color:#888888 !important}.sd-date-picker.sc-sd-date-picker .sd-date-picker__input.sc-sd-date-picker{text-align:center !important}.sd-date-picker__menu.sc-sd-date-picker{border-radius:8px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2)}`;
+const sdDatePickerCss = () => `sd-date-picker{display:inline-flex}sd-date-picker sd-portal{display:none}sd-date-picker .sd-date-picker{position:relative;width:100%;height:100%}`;
 
 const SdDatePicker = class {
     constructor(hostRef) {
@@ -8,35 +10,104 @@ const SdDatePicker = class {
         this.update = createEvent(this, "sdUpdate", 7);
         this.viewChange = createEvent(this, "sdViewChange", 7);
     }
+    static CLOSE_ANIMATION_DURATION = 150;
     get el() { return getElement(this); }
     value = null;
-    label;
+    size = 'sm';
+    placeholder = 'YYYY-MM-DD';
     selectable;
     disabled = false;
-    placeholder = '';
+    width = '';
+    // sd-field 공통 props
+    label = '';
+    addonLabel = '';
+    hint = '';
+    errorMessage = '';
+    fieldName = '';
+    rules = [];
+    error = false;
+    icon = undefined;
+    labelTooltip = '';
+    labelTooltipProps = null;
     isOpen = false;
+    isAnimatingOut = false;
+    focused = false;
+    hovered = false;
     update;
     viewChange;
-    inputEl;
-    openMenu() {
-        if (this.disabled)
+    triggerRef;
+    formField;
+    closeAnimationTimer;
+    internalName = nanoid();
+    watchIsOpen(newValue) {
+        this.focused = newValue;
+    }
+    async sdValidate() {
+        return this.formField?.sdValidate();
+    }
+    async sdReset() {
+        return this.formField?.sdReset();
+    }
+    async sdResetValidate() {
+        return this.formField?.sdResetValidation();
+    }
+    closeDropdown() {
+        if (!this.isOpen)
             return;
-        this.isOpen = true;
+        this.isOpen = false;
+        this.isAnimatingOut = true;
+        if (this.closeAnimationTimer)
+            clearTimeout(this.closeAnimationTimer);
+        this.closeAnimationTimer = setTimeout(() => {
+            this.isAnimatingOut = false;
+        }, SdDatePicker.CLOSE_ANIMATION_DURATION);
     }
+    handleTriggerClick = () => {
+        if (this.disabled)
+            return;
+        if (this.isOpen) {
+            this.closeDropdown();
+        }
+        else {
+            if (this.closeAnimationTimer)
+                clearTimeout(this.closeAnimationTimer);
+            this.isAnimatingOut = false;
+            this.isOpen = true;
+        }
+    };
     handleSelect = (e) => {
+        this.closeDropdown();
         this.value = e.detail;
-        this.isOpen = false;
-        this.update.emit(e.detail);
-    };
-    handleClose = () => {
-        this.isOpen = false;
+        const nextValue = this.value;
+        requestAnimationFrame(() => {
+            this.update.emit(nextValue);
+        });
     };
     handleViewChange = (e) => {
         this.viewChange.emit(e.detail);
     };
+    disconnectedCallback() {
+        if (this.closeAnimationTimer)
+            clearTimeout(this.closeAnimationTimer);
+    }
     render() {
-        return (h("div", { key: '160bd9b2bbd9d223d4df341ed2fbba79c1701c13', class: { 'sd-date-picker': true, 'sd-date-picker--disabled': this.disabled } }, h("sd-input", { key: 'cf7c72c144f1222308eb936a14d1786863019126', ref: el => (this.inputEl = el), value: this.value, addonLabel: this.label, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-picker__input", onClick: () => this.openMenu() }, h("sd-icon", { key: '8651ba1d36749667f53e9f064b973cb336389ab3', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '6ee759cf5cbb0afc4cd8adf704a489ef6cffc8f9', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '96c038fea5102ffd780fd296534cc294bd1c6912', class: "sd-date-picker__menu" }, h("sd-calendar", { key: 'bc8d14f98d5d56e6775f083e4096d1113c28a658', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange }))))));
+        const sizeTokens = DATEPICKER_SIZE_MAP[this.size] ?? DATEPICKER_SIZE_MAP.md;
+        const cssVars = {
+            '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
+            '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
+            '--sd-system-color-field-border-default': DATEPICKER_COLORS.border.default,
+            '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
+            '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
+        };
+        return (h("sd-field", { key: '713640ad88e27954a12e75f8672032374f9effef', name: this.fieldName || this.internalName, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: '6f4d6a4dabd3909c647ba9e8d672f1c97a4f50ff', class: "sd-date-picker", ref: el => {
+                this.triggerRef = el;
+            } }, h("sd-date-picker-trigger", { key: '06703672547b5a96b791eaacfbce4f7d23467e9c', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '74b099498b8cdf75038c5d3e4d81bd2f5ead9068', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-date-picker-calendar", { key: '6385470ab1578662f38c6bc4409b0010e55975a5', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
     }
+    static get watchers() { return {
+        "isOpen": [{
+                "watchIsOpen": 0
+            }]
+    }; }
 };
 SdDatePicker.style = sdDatePickerCss();
 

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

@@ -0,0 +1,278 @@
+import { r as registerInstance, c as createEvent, h, F as Fragment } from './index-DsU722JF.js';
+import { u as useDatePicker, t as today } from './useDatePicker-DTrMR0rx.js';
+import { d as datepickerTokens, W as WEEK_LABELS, C as CALENDAR_LAYOUT } from './sd-date-picker.config-C4i826lM.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: datepickerTokens.datepicker.calendar.range.bg,
+    height: datepickerTokens.datepicker.calendar.range.height,
+    panelGap: datepickerTokens.datepicker.calendar.range.panelGap,
+    divider: 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) {
+        registerInstance(this, hostRef);
+        this.select = createEvent(this, "sdSelect", 7);
+        this.viewChange = createEvent(this, "sdViewChange", 7);
+    }
+    value = null;
+    selectable;
+    maxRange;
+    currentYear;
+    currentMonth;
+    pendingStart = '';
+    hoverDate = '';
+    displayValue = null;
+    select;
+    viewChange;
+    dateUtil = useDatePicker();
+    componentWillLoad() {
+        this.syncFromValue();
+    }
+    handleValueChange() {
+        this.syncFromValue();
+    }
+    syncFromValue() {
+        const base = this.value?.[0] || 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] = 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 (h("div", { class: "sd-date-range-picker-calendar__header" }, h("div", { class: "sd-date-range-picker-calendar__nav-group sd-date-range-picker-calendar__nav-group-month" }, h("sd-ghost-button", { class: {
+                'sd-date-range-picker-calendar__nav-placeholder': !isLeft,
+            }, ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), h("span", { class: "sd-date-range-picker-calendar__label sd-date-range-picker-calendar__label-month" }, monthLabel), h("sd-ghost-button", { class: {
+                'sd-date-range-picker-calendar__nav-placeholder': isLeft,
+            }, ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))));
+    }
+    renderYearNav() {
+        return (h("div", { class: "sd-date-range-picker-calendar__top-bar" }, h("div", { class: "sd-date-range-picker-calendar__year-nav" }, h("sd-ghost-button", { ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), h("span", { class: "sd-date-range-picker-calendar__label" }, this.currentYear), h("sd-ghost-button", { ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), 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 (h("div", { class: "sd-date-range-picker-calendar__panel" }, this.renderHeader(year, month, isLeft), h("div", { class: "sd-date-range-picker-calendar__week" }, WEEK_LABELS.map(label => (h("span", { key: label, class: "sd-date-range-picker-calendar__week-cell" }, label)))), 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 && today === cell.date;
+            const isDisabled = cell.inCurrentMonth && this.isDisabled(cell.date);
+            return (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) }, h("span", { class: "sd-date-range-picker-calendar__day-circle" }, cell.inCurrentMonth ? cell.day : '')));
+        }))));
+    }
+    render() {
+        const cssVars = {
+            '--calendar-bg': CALENDAR_LAYOUT.bg,
+            '--calendar-padding': `${CALENDAR_LAYOUT.paddingXY}px`,
+            '--calendar-gap': `${CALENDAR_LAYOUT.gap}px`,
+            '--calendar-radius': `${CALENDAR_LAYOUT.radius}px`,
+            '--calendar-header-gap': `${CALENDAR_LAYOUT.header.gap}px`,
+            '--calendar-header-divider': CALENDAR_LAYOUT.header.divider,
+            '--calendar-header-font-size': `${CALENDAR_LAYOUT.header.fontSize}px`,
+            '--calendar-header-line-height': `${CALENDAR_LAYOUT.header.lineHeight}px`,
+            '--calendar-header-font-weight': CALENDAR_LAYOUT.header.fontWeight,
+            '--calendar-week-font-size': `${CALENDAR_LAYOUT.week.fontSize}px`,
+            '--calendar-week-line-height': `${CALENDAR_LAYOUT.week.lineHeight}px`,
+            '--calendar-week-font-weight': CALENDAR_LAYOUT.week.fontWeight,
+            '--calendar-week-color': CALENDAR_LAYOUT.week.color,
+            '--calendar-grid-row-gap': `${CALENDAR_LAYOUT.grid.rowGap}px`,
+            '--calendar-day-size': `${CALENDAR_LAYOUT.day.size}px`,
+            '--calendar-day-circle-size': `${CALENDAR_LAYOUT.day.circleSize}px`,
+            '--calendar-day-circle-radius': `${CALENDAR_LAYOUT.day.circleRadius}px`,
+            '--calendar-day-text': CALENDAR_LAYOUT.day.defaultText,
+            '--calendar-day-hover-text': CALENDAR_LAYOUT.day.hoverText,
+            '--calendar-day-hover-border': CALENDAR_LAYOUT.day.hoverBorder,
+            '--calendar-day-select-bg': CALENDAR_LAYOUT.day.selectBg,
+            '--calendar-day-select-text': CALENDAR_LAYOUT.day.selectText,
+            '--calendar-day-disabled-text': CALENDAR_LAYOUT.day.disabledText,
+            '--calendar-day-font-size': `${CALENDAR_LAYOUT.day.fontSize}px`,
+            '--calendar-day-line-height': `${CALENDAR_LAYOUT.day.lineHeight}px`,
+            '--calendar-day-font-weight': 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 (h(Fragment, { key: '5c9510be171a638870c8b86ef2c13c81d4920209' }, h("div", { key: 'b9af5cf84625eb19039b6ab2b41622364cbbea82', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), h("div", { key: '83578cd21d5984e3ffbda26c90a96df82d78deb5', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), 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();
+
+export { SdDateRangePickerCalendar as sd_date_range_picker_calendar };