@sellmate/design-system 0.0.56 → 1.0.0

package/dist/cjs/sd-card.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-B7tkxTye.js');
+var index = require('./index-D_J8ScR5.js');
 
-const sdCardCss = () => `sd-card{display:block;height:fit-content;border-radius:8px}sd-card.sd-card--bordered{border:1px solid #e1e1e1}`;
+const sdCardCss = () => `sd-card{display:block;height:fit-content;border-radius:8px;background:white}sd-card.sd-card--bordered{border:1px solid #e1e1e1}`;
 
 const SdCard = class {
     constructor(hostRef) {
@@ -11,7 +11,7 @@ const SdCard = class {
     bordered = true;
     cardClassName = '';
     render() {
-        return (index.h(index.Host, { key: '3182001dcfc5347e3995a31d8e333e01f285df5a', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.cardClassName}` }, index.h("slot", { key: 'e2824b9cd65b9c4ba668f7f3ba933a361405b822' })));
+        return (index.h(index.Host, { key: 'f7012e01206131628820f41ede93ce68cb121fe4', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.cardClassName}` }, index.h("slot", { key: '5b978729afb2cf6fef8a8ad696029ef09dbb0dd9' })));
     }
 };
 SdCard.style = sdCardCss();

package/dist/cjs/sd-checkbox.cjs.entry.js

@@ -0,0 +1,89 @@
+'use strict';
+
+var index = require('./index-D_J8ScR5.js');
+
+const sdCheckboxCss = () => `sd-checkbox{display:block;height:20px;line-height:0}sd-checkbox .sd-checkbox{cursor:pointer;display:inline-flex;align-items:center;gap:8px;height:20px;max-height:20px}sd-checkbox .sd-checkbox>input{display:none}sd-checkbox .sd-checkbox:hover.sd-checkbox--checked .sd-checkbox__bg,sd-checkbox .sd-checkbox:hover.sd-checkbox--indeterminate .sd-checkbox__bg{border-color:#005cc9;background:#005cc9}sd-checkbox .sd-checkbox:hover.sd-checkbox--unchecked .sd-checkbox__bg{border:1px solid #0075ff;background:#d9eaff}sd-checkbox .sd-checkbox:hover.sd-checkbox--disabled .sd-checkbox__bg{border:1px solid transparent;background:#eeeeee}sd-checkbox .sd-checkbox__bg{width:16px;height:16px;border-radius:2px;border:1px solid #888888;box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;overflow:hidden;line-height:0}sd-checkbox .sd-checkbox__label{font-size:12px;color:#333333;line-height:20px}sd-checkbox .sd-checkbox--checked.sd-checkbox--disabled .sd-checkbox__bg,sd-checkbox .sd-checkbox--indeterminate.sd-checkbox--disabled .sd-checkbox__bg{background:#eeeeee;border:1px solid #cccccc !important}sd-checkbox .sd-checkbox--checked .sd-checkbox__bg,sd-checkbox .sd-checkbox--indeterminate .sd-checkbox__bg{border:1px solid #0075ff;background:#0075ff}sd-checkbox .sd-checkbox--unchecked .sd-checkbox__bg{background:white}sd-checkbox .sd-checkbox--disabled{cursor:not-allowed}sd-checkbox .sd-checkbox--disabled .sd-checkbox__bg{background:#eeeeee;border:1px solid #cccccc !important}`;
+
+const SdCheckbox = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.update = index.createEvent(this, "sdUpdate");
+    }
+    get el() { return index.getElement(this); }
+    /** 현재 선택 상태 또는 배열 형태의 값 */
+    value;
+    /** 배열 모드에서의 개별 값 */
+    val;
+    /** 비활성화 여부 */
+    disabled = false;
+    /** 표시할 라벨 텍스트 */
+    label = '';
+    /** 내부 체크 상태 */
+    isChecked = false;
+    /** 값 변경 이벤트 */
+    update;
+    componentWillLoad() {
+        this.updateCheckedState(this.value);
+    }
+    componentWillRender() {
+        this.updateCheckedState(this.value);
+    }
+    watchValueHandler(newValue) {
+        this.updateCheckedState(newValue);
+    }
+    get checkboxClasses() {
+        const classes = [
+            'sd-checkbox',
+            `sd-checkbox--${this.isChecked ? 'checked' : this.isChecked === null ? 'indeterminate' : 'unchecked'}`,
+        ];
+        if (this.disabled) {
+            classes.push('sd-checkbox--disabled');
+        }
+        return classes.join(' ');
+    }
+    updateCheckedState(value) {
+        if (value === null) {
+            this.isChecked = null;
+        }
+        else if (typeof value === 'boolean') {
+            this.isChecked = value;
+        }
+        else if (Array.isArray(value)) {
+            this.isChecked = this.val !== undefined && value.includes(this.val);
+        }
+        else {
+            this.isChecked = false;
+        }
+    }
+    handleChange = () => {
+        if (this.disabled)
+            return;
+        let newValue;
+        if (typeof this.value === 'boolean') {
+            newValue = !this.value;
+        }
+        else if (Array.isArray(this.value)) {
+            if (this.val === undefined) {
+                console.warn('A "val" property is required when using an array for the "value" property.');
+            }
+            const valueSet = new Set(this.value);
+            valueSet.has(this.val) ? valueSet.delete(this.val) : valueSet.add(this.val);
+            newValue = Array.from(valueSet);
+        }
+        else {
+            newValue = !this.isChecked;
+        }
+        this.value = newValue;
+        this.update.emit(newValue);
+    };
+    render() {
+        return (index.h("label", { key: 'b4f1e82e461cfc649a1bc5414fb55bcd8ea9c87d', "aria-label": this.label || 'checkbox', class: this.checkboxClasses }, index.h("input", { key: 'bb6f1d911ccc9a62c0149bb9e65bbf73ac86fc9b', type: "checkbox", value: this.val, checked: !!this.isChecked, disabled: this.disabled, onChange: this.handleChange, name: this.label || 'checkbox' }), index.h("div", { key: '2598f80d9028b306f04898544f94af2a06604093', class: "sd-checkbox__bg" }, this.isChecked !== false ? (index.h("sd-icon", { name: this.isChecked === true ? 'check' : 'minus', size: 12, color: this.disabled ? '#888888' : 'white' })) : null), this.label && index.h("span", { key: 'd07198f3d0796189988d030db5b882911d80c6bf', class: "sd-checkbox__label" }, this.label)));
+    }
+    static get watchers() { return {
+        "value": ["watchValueHandler"]
+    }; }
+};
+SdCheckbox.style = sdCheckboxCss();
+
+exports.sd_checkbox = SdCheckbox;
+//# sourceMappingURL=sd-checkbox.entry.cjs.js.map

package/dist/cjs/sd-date-box.cjs.entry.js

@@ -1,14 +1,14 @@
 'use strict';
 
-var index = require('./index-B7tkxTye.js');
+var index = require('./index-D_J8ScR5.js');
 
-const sdDateBoxCss = () => `.sd-date-box.sc-sd-date-box-h{display:flex;align-items:center;justify-content:center;width:38px;height:36px;font-size:14px;position:relative;box-sizing:border-box;text-align:center;transition:background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);border-radius:14px}.sd-date-box.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box{width:28px;height:28px;border-radius:14px;position:relative}.sd-date-box.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{position:relative;z-index:2;-webkit-user-select:none;user-select:none;line-height:28px}.sd-date-box.sd-date-box--disabled.sc-sd-date-box-h{color:#cccccc;cursor:default !important;pointer-events:none}.sd-date-box.sc-sd-date-box-h:not(.sd-date-box--disabled){cursor:pointer}.sd-date-box.sd-hoverable.sc-sd-date-box-h:hover .sd-date-box__content.sc-sd-date-box{background:#d9eaff}.sd-date-box.sd-date-box--in-range.sc-sd-date-box-h:not(.sd-date-box--disabled) .sd-date-box__content.sc-sd-date-box::before{content:"";position:absolute;top:0;left:-5px;width:calc(100% + 10px);height:100%;background:#d9eaff}.sd-date-box.sd-date-box--in-range.sd-date-box--type-start.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box::before{left:auto !important;width:19px !important;right:-5px}.sd-date-box.sd-date-box--in-range.sd-date-box--type-end.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box::before{width:19px !important}.sd-date-box.sd-date-box--in-range.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{font-weight:500}.sd-date-box.sd-date-box--selected.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box::after,.sd-date-box.sd-date-box--type-start.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box::after,.sd-date-box.sd-date-box--type-end.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box::after{content:"";position:absolute;inset:0;background:#0075ff;border-radius:14px;z-index:1}.sd-date-box.sd-date-box--selected.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box,.sd-date-box.sd-date-box--type-start.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box,.sd-date-box.sd-date-box--type-end.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{color:white;font-weight:700}.sd-date-box.sd-date-box--start-date.sd-date-box--end-date.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box::before{display:none !important}.sd-date-box.sd-date-box--today.sc-sd-date-box-h:not(.sd-date-box--selected) .sd-date-box__content.sc-sd-date-box::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:28px;height:28px;border:1px solid #e1e1e1 !important;border-radius:14px}`;
+const sdDateBoxCss = () => `.sd-date-box.sc-sd-date-box-h{display:flex;align-items:center;justify-content:center;width:38px;height:36px;font-size:14px;position:relative;box-sizing:border-box;text-align:center;transition:background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);border-radius:14px}.sd-date-box.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box{width:28px;height:28px;border-radius:14px;position:relative}.sd-date-box.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{position:relative;z-index:2;-webkit-user-select:none;user-select:none;line-height:28px}.sd-date-box.sd-date-box--disabled.sc-sd-date-box-h{color:#cccccc;cursor:default !important;pointer-events:none}.sd-date-box.sc-sd-date-box-h:not(.sd-date-box--disabled){color:#333333;cursor:pointer}.sd-date-box.sd-hoverable.sc-sd-date-box-h:hover .sd-date-box__content.sc-sd-date-box{background:#d9eaff}.sd-date-box.sd-date-box--in-range.sc-sd-date-box-h:not(.sd-date-box--disabled) .sd-date-box__content.sc-sd-date-box::before{content:"";position:absolute;top:0;left:-5px;width:calc(100% + 10px);height:100%;background:#d9eaff}.sd-date-box.sd-date-box--in-range.sd-date-box--type-start.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box::before{left:auto !important;width:19px !important;right:-5px}.sd-date-box.sd-date-box--in-range.sd-date-box--type-end.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box::before{width:19px !important}.sd-date-box.sd-date-box--in-range.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{font-weight:500}.sd-date-box.sd-date-box--selected.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box::after,.sd-date-box.sd-date-box--type-start.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box::after,.sd-date-box.sd-date-box--type-end.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box::after{content:"";position:absolute;inset:0;background:#0075ff;border-radius:14px;z-index:1}.sd-date-box.sd-date-box--selected.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box,.sd-date-box.sd-date-box--type-start.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box,.sd-date-box.sd-date-box--type-end.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{color:white;font-weight:700}.sd-date-box.sd-date-box--start-date.sd-date-box--end-date.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box::before{display:none !important}.sd-date-box.sd-date-box--today.sc-sd-date-box-h:not(.sd-date-box--selected) .sd-date-box__content.sc-sd-date-box::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:28px;height:28px;border:1px solid #e1e1e1 !important;border-radius:14px}`;
 
 const SdDateBox = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.sdClick = index.createEvent(this, "sdClick");
-        this.sdMouseOver = index.createEvent(this, "sdMouseOver");
+        this.click = index.createEvent(this, "sdClick");
+        this.mouseOver = index.createEvent(this, "sdMouseOver");
     }
     date = null;
     disabled = false;
@@ -18,22 +18,22 @@ const SdDateBox = class {
     isToday = false;
     inRange = false;
     type = '';
-    sdClick;
-    sdMouseOver;
+    click;
+    mouseOver;
     handleClickDate() {
         if (this.disabled)
             return;
         if (typeof this.date === 'string')
             return;
-        this.sdClick?.emit(this.date);
+        this.click?.emit(this.date);
     }
     handleHoverDate() {
         if (typeof this.date === 'string')
             return;
-        this.sdMouseOver?.emit(this.date);
+        this.mouseOver?.emit(this.date);
     }
     render() {
-        return (index.h(index.Host, { key: '823013675434dcde8876018a3a2b99b407b51314', role: "button", "aria-disabled": this.disabled ? 'true' : 'false', tabindex: this.disabled ? -1 : 0, class: {
+        return (index.h(index.Host, { key: 'a1d4c039cb3b9b3cdd2910c91de1c8b01fc0a278', role: "button", "aria-disabled": this.disabled ? 'true' : 'false', tabindex: this.disabled ? -1 : 0, class: {
                 'sd-date-box': true,
                 'sd-hoverable': !this.disabled || !this.selected || this.type === '',
                 'sd-date-box--disabled': this.disabled,
@@ -44,7 +44,7 @@ const SdDateBox = class {
                 'sd-date-box--in-range': this.inRange,
                 'sd-date-box--type-start': this.type === 'start',
                 'sd-date-box--type-end': this.type === 'end',
-            }, onClick: () => this.handleClickDate(), onMouseOver: () => this.handleHoverDate() }, index.h("div", { key: 'fdfeb47287ef4c2c079ce41623e8feae4e8a813c', class: "sd-date-box__content" }, index.h("div", { key: '6784698bb721bce4b8c476850bce59aa1146a6f7', class: "sd-date-box__label" }, this.date))));
+            }, onClick: () => this.handleClickDate(), onMouseOver: () => this.handleHoverDate() }, index.h("div", { key: '338ffdc873793d66dbc6e2ad39233de227231002', class: "sd-date-box__content" }, index.h("div", { key: '764ae38ca49f431c1ec00ae35e6b436f32fae735', class: "sd-date-box__label" }, this.date))));
     }
 };
 SdDateBox.style = sdDateBoxCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B7tkxTye.js');
+var index = require('./index-D_J8ScR5.js');
 var useDatePicker = require('./useDatePicker-BZSOclaN.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{width:304px;box-sizing:border-box;border-radius:8px;padding:24px 19px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);background:white}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker{display:flex;flex-flow:row nowrap;align-items:center;gap:20px;font-size:14px;padding:0 5px;height:24px;line-height:24px}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker .year-nav.sc-sd-date-picker,.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker .month-nav.sc-sd-date-picker{display:flex;flex-flow:row nowrap;align-items:center;gap:12px}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker .year-nav.sc-sd-date-picker button.sc-sd-date-picker,.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker .month-nav.sc-sd-date-picker button.sc-sd-date-picker{background:none;border:none;cursor:pointer;margin:0;padding:0}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker .year-nav__current.sc-sd-date-picker{width:40px;text-align:center}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker .month-nav__current.sc-sd-date-picker{width:100px;text-align:center}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__days.sc-sd-date-picker{margin-top:8px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:10px;padding:0 5px}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__days.sc-sd-date-picker .day.sc-sd-date-picker{width:28px;height:20px;font-size:12px;line-height:20px;text-align:center;color:#888888}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__body.sc-sd-date-picker{margin-top:12px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr))}`;
@@ -8,7 +8,7 @@ const sdDatePickerCss = () => `.sd-date-picker.sc-sd-date-picker{width:100%;disp
 const SdDatePicker = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.sdChange = index.createEvent(this, "sdChange");
+        this.update = index.createEvent(this, "sdUpdate");
     }
     get el() { return index.getElement(this); }
     value = null;
@@ -20,7 +20,7 @@ const SdDatePicker = class {
     currentDate = null;
     currentYear;
     currentMonth;
-    sdChange;
+    update;
     componentWillLoad() {
         this.setCalendar();
     }
@@ -63,7 +63,7 @@ const SdDatePicker = class {
         this.setCurrentDate(date);
         this.isOpen = false;
         this.value = date;
-        this.sdChange.emit?.(date);
+        this.update.emit?.(date);
     }
     isDisabledDate(date) {
         if (!this.selectable)
@@ -84,7 +84,7 @@ const SdDatePicker = class {
         this.isOpen = false;
     };
     render() {
-        return (index.h(index.Host, { key: '339b8a2e02592a3a7c28e91b11dc3693b4fcb9db', class: { 'sd-date-picker': true, 'sd-date-picker--disabled': this.disabled } }, index.h("sd-input", { key: '5cb7ee0544864681985ba4e2b4cfb4ca7eb88ba7', ref: el => (this.inputEl = el), value: this.value, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-picker__input", onClick: () => this.openMenu() }, index.h("sd-icon", { key: 'e465944f71022a7b7d7b6d719affa31bfc337ff8', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (index.h("sd-portal", { key: 'e4af5d3a2c5619d12f0b473b80eed941df1eea06', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, index.h("div", { key: 'a36e286d284f3f2545eb83e60f76bb74db1ee045', class: "sd-date-picker__menu" }, index.h("div", { key: '95aa3b00666772cdaac5c458226b03ca8d814205', class: "sd-date-picker__header" }, index.h("div", { key: '92d3553d46fc3b9681050d5cb8b834bf4c661792', class: "year-nav" }, index.h("button", { key: 'ee0500f7c95bfd54e01a3dacba1f5510d1a6bbe6', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, index.h("sd-icon", { key: '16cf42b6e4d43858fc22745339c66ffb03862f00', name: "arrowLeft", size: "12", color: "#CCCCCC" })), index.h("span", { key: '9cd310082f173d1fadc046a0a7f6b1e4b63627e0', class: "year-nav__current" }, this.currentYear), index.h("button", { key: '51d30f06c43c76226e995af3f3e3812ea48c2aad', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, index.h("sd-icon", { key: '08b599372988f2563ccb6a25b64bbacef21e8c0b', name: "arrowRight", size: "12", color: "#CCCCCC" }))), index.h("div", { key: '3561b99251a0cc9ca5d81ed20369eb2d1702f253', class: "month-nav" }, index.h("button", { key: '952c94808facf642dc219eaced8d58b3c2ceb389', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, index.h("sd-icon", { key: 'd270c4e5934ebfff500d9a4252b9a4b0b6c24e41', name: "arrowLeft", size: "12", color: "#CCCCCC" })), index.h("span", { key: '3baf83873b332c1a3b340773a952b5f9a1b48bd4', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), index.h("button", { key: 'fe744ca6c9896f8cf7bd2a00cdd4db94915be0e3', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, index.h("sd-icon", { key: 'a00637d3bc309b429fd302b72ec940f3cdce8f84', name: "arrowRight", size: "12", color: "#CCCCCC" })))), index.h("div", { key: '8a4c4fc3bfc55205912368f6d5f1e3acd7eadbdc', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (index.h("div", { key: day, class: "day" }, day)))), index.h("div", { key: 'f4eaa43b531640ba7bb7b724cf52144f9870d520', class: "sd-date-picker__body" }, [
+        return (index.h(index.Host, { key: '4eccf6134d01546c9a47ddc3806233dd68195a8a', class: { 'sd-date-picker': true, 'sd-date-picker--disabled': this.disabled } }, index.h("sd-input", { key: 'f1c015db2efd3801792266d7abb6391e2751c225', ref: el => (this.inputEl = el), value: this.value, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-picker__input", onClick: () => this.openMenu() }, index.h("sd-icon", { key: '671f3d5166618228d2018477b4b9f1b3c13fa312', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (index.h("sd-portal", { key: 'ca295d75db67328d189fefd16e3598f0a4b1b5fe', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, index.h("div", { key: 'c9b0d87465936760ecf0453cfb5dad00247b7612', class: "sd-date-picker__menu" }, index.h("div", { key: 'fac0f5d91634d394cecda4c1a149103e12e210c6', class: "sd-date-picker__header" }, index.h("div", { key: '2f55a9ec84e74135a7c1f8c1925f557ad85e43a8', class: "year-nav" }, index.h("button", { key: '811d3eab71e03c23214d3da2e829d62af73c8828', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, index.h("sd-icon", { key: '60bb560ea0aedc61a6ba7565b4f8daf95a33c9cf', name: "arrowLeft", size: "12", color: "#CCCCCC" })), index.h("span", { key: '976c256e704793d39e98a3e80ac0eb536a32b361', class: "year-nav__current" }, this.currentYear), index.h("button", { key: '32ecf743b29434b1aeb9ef72d49a2254acd4e514', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, index.h("sd-icon", { key: 'a70f679e27d00db53047b387fa9d16520cb0369f', name: "arrowRight", size: "12", color: "#CCCCCC" }))), index.h("div", { key: '1d5e17dd8b4c0081a2cda2991e8e0055f0c4d24d', class: "month-nav" }, index.h("button", { key: '3fa7edc4eb796e298b12ea64ac1aa0d83bf6ddb1', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, index.h("sd-icon", { key: '3d6ed03bb28a1ccb711c97d31ff6d667ada8c410', name: "arrowLeft", size: "12", color: "#CCCCCC" })), index.h("span", { key: '5b3b1c05eb303ff7cb4a7ad599abd45747822589', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), index.h("button", { key: '6718f389605d55f7c08934360171b61a28e2646d', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, index.h("sd-icon", { key: '8216564c82d61220f8d99bc9759a83994839a836', name: "arrowRight", size: "12", color: "#CCCCCC" })))), index.h("div", { key: 'd3e9f16ec52b5ba82af3c5349966402c271ddb00', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (index.h("div", { key: day, class: "day" }, day)))), index.h("div", { key: 'a2b2b56fefcecc67a06b5db9ae0a7767cca163f5', class: "sd-date-picker__body" }, [
             ...this.calendar.prevMonthDays,
             ...this.calendar.days,
             ...this.calendar.afterMonthDays,

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B7tkxTye.js');
+var index = require('./index-D_J8ScR5.js');
 var useDatePicker = require('./useDatePicker-BZSOclaN.js');
 
 const addDays = (inputDate, days) => {
@@ -15,12 +15,12 @@ const addDays = (inputDate, days) => {
     return `${resultYear}-${resultMonth}-${resultDay}`;
 };
 
-const sdDateRangePickerCss = () => `.sd-date-range-picker.sc-sd-date-range-picker{width:fit-content;display:inline-block}.sd-date-range-picker.sc-sd-date-range-picker .sd-date-range-picker--disabled.sc-sd-date-range-picker .date-icon.sc-sd-date-range-picker{cursor:not-allowed !important;color:#888888 !important}.sd-date-range-picker.sc-sd-date-range-picker .sd-input.sc-sd-date-range-picker .sd-input__container.sc-sd-date-range-picker{width:210px}.sd-date-range-picker.sc-sd-date-range-picker .sd-input.sc-sd-date-range-picker .sd-date-range-picker__input.sc-sd-date-range-picker{margin-left:17px !important}.sd-date-range-picker__menu.sc-sd-date-range-picker{width:609px;box-sizing:border-box;border-radius:8px;padding:24px 19px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);background:white}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__header.sc-sd-date-range-picker{margin-bottom:16px;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__header.sc-sd-date-range-picker .header-label.sc-sd-date-range-picker{margin:0 12px;width:40px;text-align:center;font-size:14px;line-height:24px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker{display:flex;flex-flow:row nowrap;align-items:stretch;gap:19px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker{width:266px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-header.sc-sd-date-range-picker{width:100%;height:24px;line-height:24px;font-size:14px;text-align:center;position:relative;padding:0 5px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-header.sc-sd-date-range-picker button.sc-sd-date-range-picker{position:absolute;top:50%;transform:translateY(-50%)}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-header.sc-sd-date-range-picker button.header-button-prev.sc-sd-date-range-picker{left:5px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-header.sc-sd-date-range-picker button.header-button-next.sc-sd-date-range-picker{right:5px;left:auto}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-days.sc-sd-date-range-picker{padding:0 5px;margin-top:8px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:10px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-days.sc-sd-date-range-picker .day.sc-sd-date-range-picker{width:28px;height:20px;font-size:12px;line-height:20px;text-align:center;color:#888888}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-body.sc-sd-date-range-picker{margin-top:12px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr))}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .separator.sc-sd-date-range-picker{width:1px;background-color:#d8d8d8}`;
+const sdDateRangePickerCss = () => `sd-date-range-picker.sc-sd-date-range-picker{width:fit-content;display:inline-flex}sd-date-range-picker.sc-sd-date-range-picker .sd-date-range-picker--disabled.sc-sd-date-range-picker .date-icon.sc-sd-date-range-picker{cursor:not-allowed !important;color:#888888 !important}sd-date-range-picker.sc-sd-date-range-picker .sd-date-range-picker--disabled.sc-sd-date-range-picker .sd-input__native.sc-sd-date-range-picker{color:#888888 !important}sd-date-range-picker.sc-sd-date-range-picker .sd-field.sc-sd-date-range-picker .sd-field__control.sc-sd-date-range-picker{min-width:210px}sd-date-range-picker.sc-sd-date-range-picker .sd-field.sc-sd-date-range-picker .sd-input__native.sc-sd-date-range-picker{margin-left:17px !important}.sd-date-range-picker__menu.sc-sd-date-range-picker{width:609px;box-sizing:border-box;border-radius:8px;padding:24px 19px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);background:white}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__header.sc-sd-date-range-picker{margin-bottom:16px;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__header.sc-sd-date-range-picker .header-label.sc-sd-date-range-picker{margin:0 12px;width:40px;text-align:center;font-size:14px;line-height:24px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker{display:flex;flex-flow:row nowrap;align-items:stretch;gap:19px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker{width:266px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-header.sc-sd-date-range-picker{width:100%;height:24px;line-height:24px;font-size:14px;text-align:center;position:relative;padding:0 5px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-header.sc-sd-date-range-picker button.sc-sd-date-range-picker{position:absolute;top:50%;transform:translateY(-50%)}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-header.sc-sd-date-range-picker button.header-button-prev.sc-sd-date-range-picker{left:5px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-header.sc-sd-date-range-picker button.header-button-next.sc-sd-date-range-picker{right:5px;left:auto}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-days.sc-sd-date-range-picker{padding:0 5px;margin-top:8px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:10px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-days.sc-sd-date-range-picker .day.sc-sd-date-range-picker{width:28px;height:20px;font-size:12px;line-height:20px;text-align:center;color:#888888}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-body.sc-sd-date-range-picker{margin-top:12px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr))}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .separator.sc-sd-date-range-picker{width:1px;background-color:#d8d8d8}`;
 
 const SdDateRangePicker = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.sdChange = index.createEvent(this, "sdChange");
+        this.update = index.createEvent(this, "sdUpdate");
     }
     get el() { return index.getElement(this); }
     value = ['', ''];
@@ -34,7 +34,7 @@ const SdDateRangePicker = class {
     hoverDate = '';
     prevYear = Number(this.dateRange[0].split('-')[0]);
     prevMonth = Number(this.dateRange[0].split('-')[1]);
-    sdChange;
+    update;
     inputEl;
     dateUtil = useDatePicker.useDatePicker();
     tempDateRange = ['', ''];
@@ -42,7 +42,7 @@ const SdDateRangePicker = class {
         this.syncFromValue(this.value);
     }
     onValueChange(newValue) {
-        this.syncFromValue(newValue);
+        this.dateRange = [...newValue];
     }
     syncFromValue(value) {
         this.dateRange = [...value];
@@ -168,17 +168,17 @@ const SdDateRangePicker = class {
         const newRange = [this.dateRange[0], selectedDate];
         this.setDateRange(newRange);
         this.value = newRange;
-        this.sdChange.emit?.(newRange);
+        this.update.emit?.(newRange);
     }
     handleDateHover(index, day) {
         const hoverDate = this.formatDate(index, day);
         this.setHoverDate(hoverDate);
     }
     render() {
-        return (index.h(index.Host, { key: '5220efe80a57b9591b4238b0f0cd646d76709a4c', class: {
+        return (index.h(index.Host, { key: '1ac991910d1613bf142520081212be747bbeafd4', class: {
                 'sd-date-range-picker': true,
                 'sd-date-range-picker--disabled': this.disabled,
-            } }, index.h("sd-input", { key: '0f7bc52cbe8722e16b3c82dc847b0230149f4e6a', ref: el => (this.inputEl = el), value: !!this.dateRange[0] ? `${this.dateRange[0]} ~ ${this.dateRange[1]}` : '', label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-range-picker__input", onClick: () => this.openMenu() }, index.h("sd-icon", { key: 'b21b38e104c2dd840af1670e4bedee84a4db10fa', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (index.h("sd-portal", { key: '56d74da3b2d783340d21503210eae4b89d540b9a', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.closeMenu }, index.h("div", { key: '89b88b2b16bb6b553ba18b686cfdb41bcdccfb33', class: "sd-date-range-picker__menu" }, index.h("div", { key: 'b811cdb96de5cd8400ef413fe2537a5e9b36720d', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, index.h("button", { key: '588814d15c2a6c8b8efcad9215ab015366709ee7', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, index.h("sd-icon", { key: '330c17fb132b33140fb8cdf72c0bc75eca9814eb', name: "arrowLeft", size: "12", color: "#CCCCCC" })), index.h("div", { key: 'b2f29d546ac19968045aa3803cea58693c9ac904', class: "header-label" }, this.prevYear), index.h("button", { key: '183befff37c64110a8dc188b261aaa03330b7c9e', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, index.h("sd-icon", { key: 'ea7ab0b1ff97a659b2adf3ab105945127fa5b066', name: "arrowRight", size: "12", color: "#CCCCCC" }))), index.h("div", { key: '13e7484f631f5045a49c1243c93ae211b3f70bec', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index$1) => (index.h(index.Fragment, null, index$1 === 1 && index.h("div", { class: "separator" }), index.h("div", { key: index$1, class: "calendar-container" }, index.h("div", { class: "calendar-header" }, index.h("button", { type: "button", name: "month", title: "Month", class: index$1 === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index$1 === 0 ? 'prev' : 'next') }, index.h("sd-icon", { name: index$1 === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index$1 === 0
+            } }, index.h("sd-input", { key: 'a9088dd29923544f749e09678856376dc8606f7d', ref: el => (this.inputEl = el), value: !!this.dateRange[0] ? `${this.dateRange[0]} ~ ${this.dateRange[1]}` : '', label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-range-picker__input", onClick: () => this.openMenu() }, index.h("sd-icon", { key: '866ba94372f088fab53a01e0f13fc883356f6586', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (index.h("sd-portal", { key: '95ab0375cf56201bd285c522844d7fa387ae7fc9', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.closeMenu }, index.h("div", { key: 'fc7bb357b66b7e70ce3351ab6861b778a00eb6d8', class: "sd-date-range-picker__menu" }, index.h("div", { key: '852ff12fdb66c008b92d7c2e828a6a7a952e7afe', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, index.h("button", { key: '980cb27f0c9e1629b5cf85060b47845db0e1f9b7', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, index.h("sd-icon", { key: '7bc19cc051ff2af8fadf4eb7b389456fae03f060', name: "arrowLeft", size: "12", color: "#CCCCCC" })), index.h("div", { key: '4836b382280bf948afa7ed85eeb024052fd86aab', class: "header-label" }, this.prevYear), index.h("button", { key: 'fe7b4f50bb0515c8dd294274792dbbe3baca3af7', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, index.h("sd-icon", { key: '2f86e0b14db96213954cf17282bcc66ed0b80ded', name: "arrowRight", size: "12", color: "#CCCCCC" }))), index.h("div", { key: '0d63ed5aef2ede30dd88dd25b3314e4ec8ae79ce', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index$1) => (index.h(index.Fragment, null, index$1 === 1 && index.h("div", { class: "separator" }), index.h("div", { key: index$1, class: "calendar-container" }, index.h("div", { class: "calendar-header" }, index.h("button", { type: "button", name: "month", title: "Month", class: index$1 === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index$1 === 0 ? 'prev' : 'next') }, index.h("sd-icon", { name: index$1 === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index$1 === 0
             ? `${this.prevYear}.${String(this.prevMonth).padStart(2, '0')}`
             : `${this.nextYear}.${String(this.nextMonth).padStart(2, '0')}`), index.h("div", { class: "calendar-days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (index.h("sd-date-box", { key: day, date: day, disabled: true, class: "day" })))), index.h("div", { class: "calendar-body mt-12pxr grid grid-cols-7 gap-y-8pxr" }, [...calendar.prevMonthDays, ...calendar.days, ...calendar.afterMonthDays].map((day, idx) => (index.h("sd-date-box", { key: `prev${day}_${idx}`, date: !day ? '' : Number(day), selected: this.dateRange.some(date => date === this.formatDate(index$1, Number(day))), type: this.getDateBoxType(this.formatDate(index$1, Number(day))), isToday: useDatePicker.today === this.formatDate(index$1, Number(day)), disabled: !day ? true : this.isDisabledDate(this.formatDate(index$1, Number(day))), inRange: this.isDateInRange(this.formatDate(index$1, Number(day))), isStartDate: this.dateRange[0] === this.formatDate(index$1, Number(day)), isEndDate: this.dateRange[1] === this.formatDate(index$1, Number(day)), onClick: () => this.handleDateClick(index$1, Number(day)), onMouseOver: () => this.handleDateHover(index$1, Number(day)) }))))))))))))));
     }