@sellmate/design-system 1.20.1 → 1.22.0

package/dist/collection/components/sd-confirm-modal/sd-confirm-modal.js

@@ -6,20 +6,35 @@ export class SdConfirmModal {
     hasSlottedContent = false;
     customContentRef;
     slotObserver;
+    /** 모달 타입 (아이콘·버튼 색상 결정) */
     type = 'positive';
+    /** 모달 제목 */
     modalTitle = '';
+    /** 제목 엘리먼트에 추가할 클래스 */
     titleClass = '';
+    /** 콘텐츠 박스 상단 메시지 목록 */
     topMessage = [];
+    /** 콘텐츠 박스 하단 메시지 목록 */
     bottomMessage = [];
+    /** 확인 버튼 프리셋 (없으면 type에 따라 자동 결정) */
     mainButtonName;
+    /** 확인 버튼 레이블 */
     mainButtonLabel = '확인';
+    /** 취소 버튼 레이블 (없으면 취소 버튼 미표시) */
     subButtonLabel = '';
+    /** 콘텐츠 박스에 표시할 태그 프리셋 */
     tagPreset = 'square_sm_grey';
+    /** 콘텐츠 박스에 표시할 태그 레이블 */
     tagLabel = '';
+    /** 콘텐츠 박스에 표시할 텍스트 (tagLabel 없을 때 사용) */
     slotLabel = '';
+    /** 콘텐츠 박스에 직접 삽입할 HTMLElement */
     tagContents;
+    /** 닫기 버튼 클릭 시 발생합니다. */
     close;
+    /** 취소 버튼 클릭 시 발생합니다. */
     cancel;
+    /** 확인 버튼 클릭 시 발생합니다. */
     ok;
     componentWillLoad() {
         this.syncHasSlottedContent();
@@ -73,9 +88,9 @@ export class SdConfirmModal {
         const type = this.resolvedType;
         const iconName = CONFIRM_MODAL_ICON_MAP[type];
         const iconColor = CONFIRM_MODAL_ICON_COLOR[type];
-        return (h("div", { key: '689c6d50f52e1a4c5b8f501fcc1e14f0da42fcfc', class: "sd-confirm-modal" }, h("sd-ghost-button", { key: 'fc3aedaa2b6aa3b95b9c0ce1e766df69af86c82f', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (h("sd-icon", { key: '4560ad7ee0d8929221a47b6c1b00cac04c7b387a', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), h("h2", { key: '8689d86f85c72a9f36e94f083842fc3354d3d82c', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), h("div", { key: '5828e937b3b1d3f34c389e73a3d953388dd30cd0', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: '0f64cda9195807dbf637a463ba2bc8acc8c1ff3a', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) }))))), this.showContentBox && (h("div", { key: 'a090330cab2dbbc99127e616f3e50420bd44b9e4', class: "sd-confirm-modal__content-box" }, this.tagContents ? (h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
+        return (h("div", { key: '26270c4ca645f0e7e245b4bd40423bcf09029e22', class: "sd-confirm-modal" }, h("sd-ghost-button", { key: '672b73221f8638eff70c3074614fcc90b489702e', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (h("sd-icon", { key: '895dda6ba69d41f33f9465fb9db28739da28d2e6', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), h("h2", { key: 'ace6b9da4421c28e2bb828c60cae1c1cc7547f9a', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), h("div", { key: '3370fe954c33f8ce6a643fcc9b19f299682b43e8', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: '6a6bc182c638e909a821353c188d2ef558452e17', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) }))))), this.showContentBox && (h("div", { key: 'dba37f4ab114f3641a9f287d123fb7f94e49c00a', class: "sd-confirm-modal__content-box" }, this.tagContents ? (h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
                 this.customContentRef = el;
-            } })) : (h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && (h("sd-tag", { name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel })), this.slotLabel && (h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (h("div", { key: 'a665a0ea56685496adf7c306b4a940762a8a2b3a', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) })))))), h("div", { key: '0ad69928a260ed78edd7606f89790e6afa6b2d76', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button", { key: '1f835e091b4d96cb6c95dbda88d93ce86828da2c', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), h("sd-button", { key: '8e3cb23cb7207e402543b009b49d23a50521db24', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
+            } })) : (h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && (h("sd-tag", { name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel })), this.slotLabel && (h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (h("div", { key: 'ed29da73d968017c44cd61540139fac24592ea70', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) })))))), h("div", { key: '608287c021f4191dcea0a0b5798381cbc8742170', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button", { key: 'a67c309617c6e1f30aa9167587e8cbb9fb961482', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), h("sd-button", { key: '3c1a698a8276e2924f62cf1c7e472bd34ac581a1', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
     }
     static get is() { return "sd-confirm-modal"; }
     static get originalStyleUrls() {
@@ -109,7 +124,7 @@ export class SdConfirmModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBAA8\uB2EC \uD0C0\uC785 (\uC544\uC774\uCF58\u00B7\uBC84\uD2BC \uC0C9\uC0C1 \uACB0\uC815)"
                 },
                 "getter": false,
                 "setter": false,
@@ -129,7 +144,7 @@ export class SdConfirmModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBAA8\uB2EC \uC81C\uBAA9"
                 },
                 "getter": false,
                 "setter": false,
@@ -149,7 +164,7 @@ export class SdConfirmModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC81C\uBAA9 \uC5D8\uB9AC\uBA3C\uD2B8\uC5D0 \uCD94\uAC00\uD560 \uD074\uB798\uC2A4"
                 },
                 "getter": false,
                 "setter": false,
@@ -169,7 +184,7 @@ export class SdConfirmModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uCF58\uD150\uCE20 \uBC15\uC2A4 \uC0C1\uB2E8 \uBA54\uC2DC\uC9C0 \uBAA9\uB85D"
                 },
                 "getter": false,
                 "setter": false,
@@ -187,7 +202,7 @@ export class SdConfirmModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uCF58\uD150\uCE20 \uBC15\uC2A4 \uD558\uB2E8 \uBA54\uC2DC\uC9C0 \uBAA9\uB85D"
                 },
                 "getter": false,
                 "setter": false,
@@ -212,7 +227,7 @@ export class SdConfirmModal {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD655\uC778 \uBC84\uD2BC \uD504\uB9AC\uC14B (\uC5C6\uC73C\uBA74 type\uC5D0 \uB530\uB77C \uC790\uB3D9 \uACB0\uC815)"
                 },
                 "getter": false,
                 "setter": false,
@@ -231,7 +246,7 @@ export class SdConfirmModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD655\uC778 \uBC84\uD2BC \uB808\uC774\uBE14"
                 },
                 "getter": false,
                 "setter": false,
@@ -251,7 +266,7 @@ export class SdConfirmModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uCDE8\uC18C \uBC84\uD2BC \uB808\uC774\uBE14 (\uC5C6\uC73C\uBA74 \uCDE8\uC18C \uBC84\uD2BC \uBBF8\uD45C\uC2DC)"
                 },
                 "getter": false,
                 "setter": false,
@@ -278,7 +293,7 @@ export class SdConfirmModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uCF58\uD150\uCE20 \uBC15\uC2A4\uC5D0 \uD45C\uC2DC\uD560 \uD0DC\uADF8 \uD504\uB9AC\uC14B"
                 },
                 "getter": false,
                 "setter": false,
@@ -298,7 +313,7 @@ export class SdConfirmModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uCF58\uD150\uCE20 \uBC15\uC2A4\uC5D0 \uD45C\uC2DC\uD560 \uD0DC\uADF8 \uB808\uC774\uBE14"
                 },
                 "getter": false,
                 "setter": false,
@@ -318,7 +333,7 @@ export class SdConfirmModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uCF58\uD150\uCE20 \uBC15\uC2A4\uC5D0 \uD45C\uC2DC\uD560 \uD14D\uC2A4\uD2B8 (tagLabel \uC5C6\uC744 \uB54C \uC0AC\uC6A9)"
                 },
                 "getter": false,
                 "setter": false,
@@ -343,7 +358,7 @@ export class SdConfirmModal {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uCF58\uD150\uCE20 \uBC15\uC2A4\uC5D0 \uC9C1\uC811 \uC0BD\uC785\uD560 HTMLElement"
                 },
                 "getter": false,
                 "setter": false
@@ -364,7 +379,7 @@ export class SdConfirmModal {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB2EB\uAE30 \uBC84\uD2BC \uD074\uB9AD \uC2DC \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "void",
@@ -379,7 +394,7 @@ export class SdConfirmModal {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uCDE8\uC18C \uBC84\uD2BC \uD074\uB9AD \uC2DC \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "void",
@@ -394,7 +409,7 @@ export class SdConfirmModal {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD655\uC778 \uBC84\uD2BC \uD074\uB9AD \uC2DC \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "void",

package/dist/collection/components/sd-date-box/sd-date-box.js

@@ -1,14 +1,24 @@
 import { h } from "@stencil/core";
 export class SdDateBox {
+    /** 표시할 날짜 값 */
     date = null;
+    /** 비활성 상태 여부 */
     disabled = false;
+    /** 선택된 날짜 여부 */
     selected = false;
+    /** 범위 시작일 여부 */
     isStartDate = false;
+    /** 범위 종료일 여부 */
     isEndDate = false;
+    /** 오늘 날짜 여부 */
     isToday = false;
+    /** 선택 범위 내 날짜 여부 */
     inRange = false;
+    /** 범위 선택에서의 역할 (start | end | 없음) */
     type = '';
+    /** 날짜 클릭 시 해당 날짜 값을 전달합니다. */
     click;
+    /** 날짜 hover 시 해당 날짜 값을 전달합니다. */
     mouseOver;
     handleClickDate() {
         if (this.disabled || this.date === undefined || this.date === '' || this.date === 0)
@@ -23,7 +33,7 @@ export class SdDateBox {
         this.mouseOver?.emit(this.date);
     }
     render() {
-        return (h("div", { key: 'ab09e8112e18b04dab2d171fa6dbd8554d11e57b', role: "button", tabindex: this.disabled ? -1 : 0, class: {
+        return (h("div", { key: '8b8bc2facd0f4614a6022c48bbd026390d8599e4', role: "button", tabindex: this.disabled ? -1 : 0, class: {
                 'sd-date-box': true,
                 'sd-hoverable': !this.disabled || !this.selected || this.type === '',
                 'sd-date-box--disabled': this.disabled,
@@ -39,7 +49,7 @@ export class SdDateBox {
                     e.preventDefault();
                     this.handleClickDate();
                 }
-            }, onMouseOver: () => this.handleHoverDate(), onFocus: () => this.handleHoverDate() }, h("div", { key: 'b7e418536d6de86ae4e8042a0fc59dece42f7489', class: "sd-date-box__content" }, h("div", { key: '41f2b2136cc60e2d1a6664852a3fadf30413de0f', class: "sd-date-box__label" }, this.date))));
+            }, onMouseOver: () => this.handleHoverDate(), onFocus: () => this.handleHoverDate() }, h("div", { key: 'acbd57ac0300ca143f1e75780b59b5fc107d537f', class: "sd-date-box__content" }, h("div", { key: 'aeff50640c285cfd75d5592e67c97e5ec55eb00c', class: "sd-date-box__label" }, this.date))));
     }
     static get is() { return "sd-date-box"; }
     static get encapsulation() { return "scoped"; }
@@ -67,7 +77,7 @@ export class SdDateBox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD45C\uC2DC\uD560 \uB0A0\uC9DC \uAC12"
                 },
                 "getter": false,
                 "setter": false,
@@ -87,7 +97,7 @@ export class SdDateBox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBE44\uD65C\uC131 \uC0C1\uD0DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -107,7 +117,7 @@ export class SdDateBox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC120\uD0DD\uB41C \uB0A0\uC9DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -127,7 +137,7 @@ export class SdDateBox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBC94\uC704 \uC2DC\uC791\uC77C \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -147,7 +157,7 @@ export class SdDateBox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBC94\uC704 \uC885\uB8CC\uC77C \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -167,7 +177,7 @@ export class SdDateBox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC624\uB298 \uB0A0\uC9DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -187,7 +197,7 @@ export class SdDateBox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC120\uD0DD \uBC94\uC704 \uB0B4 \uB0A0\uC9DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -213,7 +223,7 @@ export class SdDateBox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBC94\uC704 \uC120\uD0DD\uC5D0\uC11C\uC758 \uC5ED\uD560 (start | end | \uC5C6\uC74C)"
                 },
                 "getter": false,
                 "setter": false,
@@ -232,7 +242,7 @@ export class SdDateBox {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB0A0\uC9DC \uD074\uB9AD \uC2DC \uD574\uB2F9 \uB0A0\uC9DC \uAC12\uC744 \uC804\uB2EC\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "number | string | null",
@@ -247,7 +257,7 @@ export class SdDateBox {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB0A0\uC9DC hover \uC2DC \uD574\uB2F9 \uB0A0\uC9DC \uAC12\uC744 \uC804\uB2EC\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "number | string | null",

package/dist/collection/components/sd-date-picker/sd-date-picker-trigger/sd-date-picker-trigger.js

@@ -1,10 +1,15 @@
 import { h } from "@stencil/core";
 import { DATEPICKER_SIZE_MAP, DATEPICKER_COLORS, } from "../sd-date-picker.config";
 export class SdDatePickerTrigger {
+    /** 표시할 날짜 텍스트 */
     displayText = '';
+    /** 입력 힌트 텍스트 */
     placeholder = 'YYYY-MM-DD';
+    /** 비활성 상태 여부 */
     disabled = false;
+    /** 트리거 크기 */
     size = 'sm';
+    /** 트리거 클릭 시 발생합니다. */
     triggerClick;
     handleClick = () => {
         if (this.disabled)
@@ -33,7 +38,7 @@ export class SdDatePickerTrigger {
                 ? DATEPICKER_COLORS.icon.disabled
                 : DATEPICKER_COLORS.icon.default,
         };
-        return (h("div", { key: 'ed74f03f3860fe86e7bc3b5430501b064a0288a7', role: "button", tabindex: this.disabled ? -1 : 0, class: {
+        return (h("div", { key: 'a8484cc7ca6fd02ea48ab033fec3da69702f4f71', role: "button", tabindex: this.disabled ? -1 : 0, class: {
                 'sd-date-picker-trigger': true,
                 'sd-date-picker-trigger--disabled': this.disabled,
             }, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
@@ -41,7 +46,7 @@ export class SdDatePickerTrigger {
                     e.preventDefault();
                     this.handleClick();
                 }
-            } }, h("sd-icon", { key: '67994572f65a0f13622deef67f89b22c083791a0', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), h("span", { key: '142f26e05ae2287d03a9e733b64ddf34f2ed1256', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
+            } }, h("sd-icon", { key: 'e87c63032774389064c56f3212882727c1091b53', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), h("span", { key: '3876d7e9c08771de796ab04106190baf45625f0f', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
     }
     static get is() { return "sd-date-picker-trigger"; }
     static get originalStyleUrls() {
@@ -68,7 +73,7 @@ export class SdDatePickerTrigger {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD45C\uC2DC\uD560 \uB0A0\uC9DC \uD14D\uC2A4\uD2B8"
                 },
                 "getter": false,
                 "setter": false,
@@ -88,7 +93,7 @@ export class SdDatePickerTrigger {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC785\uB825 \uD78C\uD2B8 \uD14D\uC2A4\uD2B8"
                 },
                 "getter": false,
                 "setter": false,
@@ -108,7 +113,7 @@ export class SdDatePickerTrigger {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBE44\uD65C\uC131 \uC0C1\uD0DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -135,7 +140,7 @@ export class SdDatePickerTrigger {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD2B8\uB9AC\uAC70 \uD06C\uAE30"
                 },
                 "getter": false,
                 "setter": false,
@@ -154,7 +159,7 @@ export class SdDatePickerTrigger {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD2B8\uB9AC\uAC70 \uD074\uB9AD \uC2DC \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "void",