@sellmate/design-system 0.0.0 → 0.0.2

package/dist/collection/components/assets/youtube/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/assets/youtube/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,MAAM,CAAC,MAAM,OAAO,GAAG;IACtB,EAAE,EAAE,SAAS;CACb,CAAC","sourcesContent":["import { Youtube20 } from './Youtube20';\r\n\r\nexport const youtube = {\r\n 20: Youtube20,\r\n};\r\n"]}

package/dist/collection/components/sd-button/sd-button.js

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { resolveColor } from "../../utils/color";
 const ICON_SIZES = {
     xs: 12,
     sm: 16,
@@ -14,8 +15,12 @@ export class SdButton {
     disabled = false;
     type = 'button';
     icon;
+    iconColor;
+    iconSize;
     iconRight;
     noHover = false;
+    buttonStyle = {};
+    iconStyle = {};
     sdClick;
     handleClick = (event) => {
         if (this.disabled) {
@@ -43,7 +48,9 @@ export class SdButton {
     }
     render() {
         const buttonClasses = this.getButtonClasses();
-        return (h("button", { key: 'd7040f0c9e953bacdea4d011448e79343d884fa9', class: buttonClasses, type: this.type, disabled: this.disabled, onClick: this.handleClick, style: { '--button-color': this.color } }, h("div", { key: '990687bf13041720c4248917519b32ce84cc8cf8', class: "sd-button__content" }, this.icon && (h("sd-icon", { key: '5b60a3218a80f20ff4dc4a0ef552e2004831c8bf', class: "sd-button__icon sd-button__icon--left", name: this.icon, size: ICON_SIZES[this.size], color: this.variant === 'primary' ? '#fff' : this.color })), this.label && h("div", { key: '990ba3e5d2a32618e20712f4c81b126e6bc95fa9', class: "sd-button__label" }, this.label), this.iconRight && (h("sd-icon", { key: '4c4cce5e5438e268fecbd40be9604f0ff122753c', class: "sd-button__icon sd-button__icon--right", name: this.iconRight, size: ICON_SIZES[this.size], color: this.variant === 'primary' ? '#fff' : this.color })))));
+        // 유틸로 색상 키 -> HEX 매핑 (없으면 원본 그대로)
+        const resolvedColor = resolveColor(this.color);
+        return (h("button", { key: '141a9b5faad4e3201cd213ac8d083d1619da8f3a', class: buttonClasses, type: this.type, disabled: this.disabled, onClick: this.handleClick, style: { '--button-color': resolvedColor, ...this.buttonStyle } }, h("div", { key: '5d00b000552539b9396ff472d693726fd9527e7f', class: "sd-button__content" }, this.icon && (h("sd-icon", { key: 'a3b1b9b5e2db53cff6f004fdd4d85c9e06ff9af4', class: "sd-button__icon sd-button__icon--left", name: this.icon, size: this.iconSize ? this.iconSize : ICON_SIZES[this.size], color: this.iconColor ? this.iconColor : this.variant === 'primary' ? '#fff' : resolvedColor })), this.label && h("div", { key: 'f40e01da25a5a7f8f6e6b0de805f0af8269c5413', class: "sd-button__label" }, this.label), this.iconRight && (h("sd-icon", { key: '3fb38d666bbd6619a59266dafb1706c1e79dbc25', class: "sd-button__icon sd-button__icon--right", name: this.iconRight, size: ICON_SIZES[this.size], color: this.variant === 'primary' ? '#fff' : resolvedColor })))));
     }
     static get is() { return "sd-button"; }
     static get encapsulation() { return "shadow"; }
@@ -196,7 +203,7 @@ export class SdButton {
                 "mutable": false,
                 "complexType": {
                     "original": "IconName",
-                    "resolved": "\"arrowDown\" | \"arrowLeft\" | \"arrowLeftEnd\" | \"arrowRight\" | \"arrowRightEnd\" | \"arrowUp\" | \"check\" | \"close\" | \"date\" | \"helpOutline\" | \"pageMove\" | \"search\" | undefined",
+                    "resolved": "\"arrowDown\" | \"arrowLeft\" | \"arrowLeftEnd\" | \"arrowRight\" | \"arrowRightEnd\" | \"arrowUp\" | \"check\" | \"close\" | \"date\" | \"event\" | \"helpOutline\" | \"notion\" | \"pageMove\" | \"pdf\" | \"search\" | \"youtube\" | undefined",
                     "references": {
                         "IconName": {
                             "location": "global",
@@ -215,12 +222,50 @@ export class SdButton {
                 "reflect": false,
                 "attribute": "icon"
             },
+            "iconColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-color"
+            },
+            "iconSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-size"
+            },
             "iconRight": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
                     "original": "IconName",
-                    "resolved": "\"arrowDown\" | \"arrowLeft\" | \"arrowLeftEnd\" | \"arrowRight\" | \"arrowRightEnd\" | \"arrowUp\" | \"check\" | \"close\" | \"date\" | \"helpOutline\" | \"pageMove\" | \"search\" | undefined",
+                    "resolved": "\"arrowDown\" | \"arrowLeft\" | \"arrowLeftEnd\" | \"arrowRight\" | \"arrowRightEnd\" | \"arrowUp\" | \"check\" | \"close\" | \"date\" | \"event\" | \"helpOutline\" | \"notion\" | \"pageMove\" | \"pdf\" | \"search\" | \"youtube\" | undefined",
                     "references": {
                         "IconName": {
                             "location": "global",
@@ -258,6 +303,52 @@ export class SdButton {
                 "reflect": false,
                 "attribute": "no-hover",
                 "defaultValue": "false"
+            },
+            "buttonStyle": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "StyleProps",
+                    "resolved": "{ [key: string]: any; }",
+                    "references": {
+                        "StyleProps": {
+                            "location": "global",
+                            "id": "global::StyleProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            },
+            "iconStyle": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "StyleProps",
+                    "resolved": "{ [key: string]: any; }",
+                    "references": {
+                        "StyleProps": {
+                            "location": "global",
+                            "id": "global::StyleProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
             }
         };
     }

package/dist/collection/components/sd-button/sd-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"sd-button.js","sourceRoot":"","sources":["../../../src/components/sd-button/sd-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAKjF,MAAM,UAAU,GAAoC;IACnD,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;CACN,CAAC;AAOF,MAAM,OAAO,QAAQ;IACT,EAAE,CAAe;IAEpB,OAAO,GAAmB,SAAS,CAAC;IACpC,IAAI,GAAe,IAAI,CAAC;IACxB,KAAK,GAAW,SAAS,CAAC;IAC1B,KAAK,GAAW,EAAE,CAAC;IACnB,QAAQ,GAAY,KAAK,CAAC;IAC1B,IAAI,GAAkC,QAAQ,CAAC;IAC/C,IAAI,CAAY;IAChB,SAAS,CAAY;IACrB,OAAO,GAAY,KAAK,CAAC;IAExB,OAAO,CAA4B;IAEpC,WAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;QAC3C,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,OAAO;QACR,CAAC;QACD,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC,CAAC;IAEM,gBAAgB;QACvB,MAAM,OAAO,GAAG,CAAC,WAAW,CAAC,CAAC;QAE9B,OAAO,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;QAC3C,OAAO,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QACxC,OAAO,CAAC,IAAI,CAAC,oBAAoB,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;QAE/C,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,OAAO,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;QACrC,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC;YAClD,OAAO,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC;QACtC,CAAC;QAED,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,OAAO,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;QACrC,CAAC;QAED,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC1B,CAAC;IAED,MAAM;QACL,MAAM,aAAa,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAE9C,OAAO,CACN,+DACC,KAAK,EAAE,aAAa,EACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,KAAK,EAAE,EAAE,gBAAgB,EAAE,IAAI,CAAC,KAAK,EAAE;YAEvC,4DAAK,KAAK,EAAC,oBAAoB;gBAC7B,IAAI,CAAC,IAAI,IAAI,CACb,gEACC,KAAK,EAAC,uCAAuC,EAC7C,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,UAAU,CAAC,IAAI,CAAC,IAAK,CAAC,EAC5B,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,GAC7C,CACX;gBAEA,IAAI,CAAC,KAAK,IAAI,4DAAK,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,KAAK,CAAO;gBAE9D,IAAI,CAAC,SAAS,IAAI,CAClB,gEACC,KAAK,EAAC,wCAAwC,EAC9C,IAAI,EAAE,IAAI,CAAC,SAAS,EACpB,IAAI,EAAE,UAAU,CAAC,IAAI,CAAC,IAAK,CAAC,EAC5B,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,GAC7C,CACX,CACI,CACE,CACT,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Prop, h, Element, Event, EventEmitter } from '@stencil/core';\r\n\r\nexport type ButtonVariant = 'primary' | 'outline' | 'ghost';\r\nexport type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';\r\n\r\nconst ICON_SIZES: { [key in ButtonSize]: number } = {\r\n xs: 12,\r\n sm: 16,\r\n md: 20,\r\n lg: 24,\r\n};\r\n\r\n@Component({\r\n tag: 'sd-button',\r\n styleUrl: 'sd-button.scss',\r\n shadow: true,\r\n})\r\nexport class SdButton {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() variant?: ButtonVariant = 'primary';\r\n @Prop() size: ButtonSize = 'sm';\r\n @Prop() color: string = '#025497';\r\n @Prop() label: string = '';\r\n @Prop() disabled: boolean = false;\r\n @Prop() type: 'button' | 'submit' | 'reset' = 'button';\r\n @Prop() icon?: IconName;\r\n @Prop() iconRight?: IconName;\r\n @Prop() noHover: boolean = false;\r\n\r\n @Event() sdClick!: EventEmitter<MouseEvent>;\r\n\r\n private handleClick = (event: MouseEvent) => {\r\n  if (this.disabled) {\r\n   event.preventDefault();\r\n   event.stopPropagation();\r\n   return;\r\n  }\r\n  this.sdClick.emit(event);\r\n };\r\n\r\n private getButtonClasses(): string {\r\n  const classes = ['sd-button'];\r\n\r\n  classes.push(`sd-button--${this.variant}`);\r\n  classes.push(`sd-button--${this.size}`);\r\n  classes.push(`sd-button--color-${this.color}`);\r\n\r\n  if (this.disabled) {\r\n   classes.push('sd-button--disabled');\r\n  }\r\n\r\n  if (!this.label && (this.icon || this.iconRight)) {\r\n   classes.push('sd-button--icon-only');\r\n  }\r\n\r\n  if (this.noHover) {\r\n   classes.push('sd-button--no-hover');\r\n  }\r\n\r\n  return classes.join(' ');\r\n }\r\n\r\n render() {\r\n  const buttonClasses = this.getButtonClasses();\r\n\r\n  return (\r\n   <button\r\n    class={buttonClasses}\r\n    type={this.type}\r\n    disabled={this.disabled}\r\n    onClick={this.handleClick}\r\n    style={{ '--button-color': this.color }}\r\n   >\r\n    <div class=\"sd-button__content\">\r\n     {this.icon && (\r\n      <sd-icon\r\n       class=\"sd-button__icon sd-button__icon--left\"\r\n       name={this.icon}\r\n       size={ICON_SIZES[this.size!]}\r\n       color={this.variant === 'primary' ? '#fff' : this.color}\r\n      ></sd-icon>\r\n     )}\r\n\r\n     {this.label && <div class=\"sd-button__label\">{this.label}</div>}\r\n\r\n     {this.iconRight && (\r\n      <sd-icon\r\n       class=\"sd-button__icon sd-button__icon--right\"\r\n       name={this.iconRight}\r\n       size={ICON_SIZES[this.size!]}\r\n       color={this.variant === 'primary' ? '#fff' : this.color}\r\n      ></sd-icon>\r\n     )}\r\n    </div>\r\n   </button>\r\n  );\r\n }\r\n}\r\n"]}
+{"version":3,"file":"sd-button.js","sourceRoot":"","sources":["../../../src/components/sd-button/sd-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Element, Event, EventEmitter } from '@stencil/core';\r\nimport { resolveColor } from '../../utils/color';\r\n\r\nexport type ButtonVariant = 'primary' | 'outline' | 'ghost';\r\nexport type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';\r\n\r\nconst ICON_SIZES: { [key in ButtonSize]: number } = {\r\n xs: 12,\r\n sm: 16,\r\n md: 20,\r\n lg: 24,\r\n};\r\n\r\n@Component({\r\n tag: 'sd-button',\r\n styleUrl: 'sd-button.scss',\r\n shadow: true,\r\n})\r\nexport class SdButton {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() variant?: ButtonVariant = 'primary';\r\n @Prop() size: ButtonSize = 'sm';\r\n @Prop() color: string = '#025497';\r\n @Prop() label: string = '';\r\n @Prop() disabled: boolean = false;\r\n @Prop() type: 'button' | 'submit' | 'reset' = 'button';\r\n @Prop() icon?: IconName;\r\n @Prop() iconColor?: string;\r\n @Prop() iconSize?: number;\r\n @Prop() iconRight?: IconName;\r\n @Prop() noHover: boolean = false;\r\n\r\n @Prop() buttonStyle: StyleProps = {};\r\n @Prop() iconStyle: StyleProps = {};\r\n\r\n @Event() sdClick!: EventEmitter<MouseEvent>;\r\n\r\n private handleClick = (event: MouseEvent) => {\r\n  if (this.disabled) {\r\n   event.preventDefault();\r\n   event.stopPropagation();\r\n   return;\r\n  }\r\n  this.sdClick.emit(event);\r\n };\r\n\r\n private getButtonClasses(): string {\r\n  const classes = ['sd-button'];\r\n\r\n  classes.push(`sd-button--${this.variant}`);\r\n  classes.push(`sd-button--${this.size}`);\r\n  classes.push(`sd-button--color-${this.color}`);\r\n\r\n  if (this.disabled) {\r\n   classes.push('sd-button--disabled');\r\n  }\r\n\r\n  if (!this.label && (this.icon || this.iconRight)) {\r\n   classes.push('sd-button--icon-only');\r\n  }\r\n\r\n  if (this.noHover) {\r\n   classes.push('sd-button--no-hover');\r\n  }\r\n\r\n  return classes.join(' ');\r\n }\r\n\r\n render() {\r\n  const buttonClasses = this.getButtonClasses();\r\n  // 유틸로 색상 키 -> HEX 매핑 (없으면 원본 그대로)\r\n  const resolvedColor = resolveColor(this.color);\r\n\r\n  return (\r\n   <button\r\n    class={buttonClasses}\r\n    type={this.type}\r\n    disabled={this.disabled}\r\n    onClick={this.handleClick}\r\n    style={{ '--button-color': resolvedColor, ...this.buttonStyle }}\r\n   >\r\n    <div class=\"sd-button__content\">\r\n     {this.icon && (\r\n      <sd-icon\r\n       class=\"sd-button__icon sd-button__icon--left\"\r\n       name={this.icon}\r\n       size={this.iconSize ? this.iconSize : ICON_SIZES[this.size!]}\r\n       color={this.iconColor ? this.iconColor : this.variant === 'primary' ? '#fff' : resolvedColor}\r\n      ></sd-icon>\r\n     )}\r\n\r\n     {this.label && <div class=\"sd-button__label\">{this.label}</div>}\r\n\r\n     {this.iconRight && (\r\n      <sd-icon\r\n       class=\"sd-button__icon sd-button__icon--right\"\r\n       name={this.iconRight}\r\n       size={ICON_SIZES[this.size!]}\r\n       color={this.variant === 'primary' ? '#fff' : resolvedColor}\r\n      ></sd-icon>\r\n     )}\r\n    </div>\r\n   </button>\r\n  );\r\n }\r\n}\r\n"]}

package/dist/collection/components/sd-checkbox/sd-checkbox.js

@@ -60,7 +60,7 @@ export class SdCheckbox {
         this.sdChange.emit(newValue);
     };
     render() {
-        return (h("label", { key: 'e760e88c168373b626e88eb6928351db2d06814f', class: this.getCheckboxClasses() }, h("input", { key: '7a672f8bb2c21c0766a176e16b534900bddd4516', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: this.handleChange }), h("div", { key: '1a8dfa49a5044ac7c6e94461dd6efb94d2773d6f', class: "sd-checkbox__bg", style: this.checkboxStyle }, this.isChecked ? h("sd-icon", { name: "check", size: 12, color: this.disabled ? '#888888' : 'white' }) : null), this.label && h("span", { key: '580a836825d4e3efc3261960eaa3a08f6d259145', class: "sd-checkbox__label" }, this.label)));
+        return (h("label", { key: '9c03212ed43f1b2d654b5bc51f3b3395117726d1', class: this.getCheckboxClasses() }, h("input", { key: '767ebdd2cd5cfc55a87d08238deb2097e840d15b', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: this.handleChange }), h("div", { key: '7ff4281881ab6bf2435eb20c267913972c17de74', class: "sd-checkbox__bg", style: this.checkboxStyle }, this.isChecked ? h("sd-icon", { name: "check", size: 12, color: this.disabled ? '#888888' : 'white' }) : null), this.label && h("span", { key: 'f1ab9b7a6c2e1107229e485cb22eba652a50c56d', class: "sd-checkbox__label" }, this.label)));
     }
     static get is() { return "sd-checkbox"; }
     static get encapsulation() { return "shadow"; }

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

@@ -74,9 +74,9 @@ export class SdDatePicker {
         this.isOpen = false;
     };
     render() {
-        return (h(Host, { key: 'ed22c291167d6f58359965e87e675ecc389ed27d', class: "sd-date-picker" }, h("sd-input", { key: 'b6ae29a87fc173d74662d41c058d86da99ffe33f', ref: el => (this.inputEl = el), value: this.date, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
+        return (h(Host, { key: 'dbd67742832c1f9678485a6fafe793b8c19395f2', class: "sd-date-picker" }, h("sd-input", { key: '26b387b4e8c33d170635fdb0125f0894a12abfa6', ref: el => (this.inputEl = el), value: this.date, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
                 margin: '0 0 0 8px',
-            }, onClick: () => this.openMenu() }, h("sd-icon", { key: '59cadea9188e4ee1fecd9d4ee8349b5d0f961c31', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '0df7999251fc02c84b2c9f05c3aa6902763edb88', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '73a8072467283d8f661e9028cc25fbc4eaf9a9e0', class: "sd-date-picker__menu" }, h("div", { key: '10f1e2c9c630173d99546ad38852767fc3c6f1c1', class: "sd-date-picker__header" }, h("div", { key: '47637f7f0aec7e731dced3c220820994c47d30ec', class: "year-nav" }, h("button", { key: 'b495c8cff4c9bc079dda84652a9c270a172f79af', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, h("sd-icon", { key: 'c8fd0243a74eaf2c3173f474244a5689031eca21', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '1e4b33e5989c26914239952c5382a6e17a4f5d18', class: "year-nav__current" }, this.currentYear), h("button", { key: '702317c39b7aabfe7be001551c491c01c7ab9d76', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, h("sd-icon", { key: 'a736c37a05978a0ef22f57dbcb6d259d96cbf7d8', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: 'eab84391c34fceadd69edeca1fdb9a45bc4e175b', class: "month-nav" }, h("button", { key: '13b2e9ebfce3e0f97f39dc7cf055868110ea23b0', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, h("sd-icon", { key: '95759c06454ab5d9ccda3c69e436304b2315fe0e', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '1d9652661b313c187b0bbfce80a3458328b32e62', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), h("button", { key: '9135f7e87128d047926a52afe01da1b478aa78b0', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, h("sd-icon", { key: 'e6639e131b11e75f56b8c31517b2e4ac6c7f8e94', name: "arrowRight", size: "12", color: "#CCCCCC" })))), h("div", { key: 'd245002d138a3fcf536b97b5dcaaa19a6e10ce68', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("div", { key: day, class: "day" }, day)))), h("div", { key: '15a57a6d69c0482c151d75d9688d2cf96986553d', class: "sd-date-picker__body" }, [
+            }, onClick: () => this.openMenu() }, h("sd-icon", { key: '3c65f96a7c80f2dbf4649d5618cdf519114e23e8', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: 'b78942513d1c64f769459278590a4b87f0775526', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '626fa36202c8c5f2a751ac9bf6abed5e0381723f', class: "sd-date-picker__menu" }, h("div", { key: 'bd59b131f8f93d302150f36fb4c2310ef7cdfc9f', class: "sd-date-picker__header" }, h("div", { key: '3dc8d16ecf2876d0769b9adcda02d4fe836f3268', class: "year-nav" }, h("button", { key: 'c6f3df9d9544bce27b85022752cc5eaf9587ed39', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, h("sd-icon", { key: '1d8f98c51edee251cac8bba943a343f975b8a2bd', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '61bd8e35d4c2a9df14a639dd3c819c7ed76dbeaf', class: "year-nav__current" }, this.currentYear), h("button", { key: 'd25371e346c10874320eabb4676bc0c6da7c012c', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, h("sd-icon", { key: '5f5bd27d9913d10d149519ddad9897c85112c78a', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '6d7e4d48f57505a2222c05045eb1cb06c2300d8b', class: "month-nav" }, h("button", { key: '63f6797933af76b5878367b736f23f147d6ee156', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, h("sd-icon", { key: 'feb2ec0c59c4736c513583c0b5e402ff5a543a4f', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: 'bcc888f53e0d1f820597c0dd11d79742551aaa61', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), h("button", { key: 'c5d24783ef37dc24eaba8097836597b7b65afbf8', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, h("sd-icon", { key: '674211cfa9f75d11e03a18fd3c5565f474315f0a', name: "arrowRight", size: "12", color: "#CCCCCC" })))), h("div", { key: 'c81c81032ea7272a4fb131c5e12dca6331874399', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("div", { key: day, class: "day" }, day)))), h("div", { key: '5a7f23318c89e9b9e644de4dd675d51fb222aa93', class: "sd-date-picker__body" }, [
             ...this.calendar.prevMonthDays,
             ...this.calendar.days,
             ...this.calendar.afterMonthDays,

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

@@ -137,9 +137,9 @@ export class SdDateRangePicker {
         this.isOpen = false;
     };
     render() {
-        return (h(Host, { key: '8295d8910e5abf4ab0f3174a1aeaec53d3ead44a', class: "sd-date-range-picker" }, h("sd-input", { key: '99d99a57714b854b0734ddb0c76beaea8fda1450', ref: el => (this.inputEl = el), value: `${this.dateRange[0]} ~ ${this.dateRange[1]}`, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
+        return (h(Host, { key: '408ebfe4aa4b4efa5954c4ff17b68cdb3f1461dc', class: "sd-date-range-picker" }, h("sd-input", { key: 'd972b04328bcd480c0e894324aa72d6f53dc2d2c', ref: el => (this.inputEl = el), value: `${this.dateRange[0]} ~ ${this.dateRange[1]}`, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
                 margin: '0 0 0 8px',
-            }, onClick: () => this.openMenu() }, h("sd-icon", { key: '9d3c0a074ec21e474b10344281b76cb4992c25bf', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '3964777d0aee33ec772d7edc1041f950d191db1f', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: 'd83bd847e939b7f30bf8df7cb6e9bb11364d7e70', class: "sd-date-range-picker__menu" }, h("div", { key: '573bdf93913131f4adcfc4b88b977c3d1a85facb', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: 'f68b395aca3bb29edf1349a4816367402be6ec7a', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, h("sd-icon", { key: '3455821789ce342728019468a47ba273600afaec', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: 'f54edaf7115e26005ef8c90c38aeb13330109811', class: "header-label" }, this.prevYear), h("button", { key: 'd125ddcef705da622695d2b651b29f1937b32d61', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, h("sd-icon", { key: '1102774699793fdc4ba5d5d98f7def967ce15f7d', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '1bef887154291161c9f9a7f98ef5e989de606a89', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (h(Fragment, null, index === 1 && h("div", { class: "separator" }), h("div", { key: index, class: "calendar-container" }, h("div", { class: "calendar-header" }, h("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, h("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
+            }, onClick: () => this.openMenu() }, h("sd-icon", { key: 'cab8030f513f8c21a4ce98541d8a151f683dd5ac', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '85f7c501c761fd65e78ddad2ec7ed0f4495d820b', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '476b0c448249146fbaabd407cbecc6a1661274d1', class: "sd-date-range-picker__menu" }, h("div", { key: '253e49de7d0f59e36e52b1bd56dae17a241be915', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: 'f883f76c05a2c8566fa5199e6e8baa9732c19a41', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, h("sd-icon", { key: '39a777b3ce984b96eda0bfb62773626385c05e18', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: '87086582b252950a153db62876a508466a96c775', class: "header-label" }, this.prevYear), h("button", { key: '155482939ac63554d2d0d959c8055f9357c9bb1b', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, h("sd-icon", { key: 'a18971fa1aa195450bff9d650ef6fee5afe294b4', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '58584b34903ca208b611f27b8639c36edee861f4', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (h(Fragment, null, index === 1 && h("div", { class: "separator" }), h("div", { key: index, class: "calendar-container" }, h("div", { class: "calendar-header" }, h("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, h("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
             ? `${this.prevYear}.${String(this.prevMonth).padStart(2, '0')}`
             : `${this.nextYear}.${String(this.nextMonth).padStart(2, '0')}`), h("div", { class: "calendar-days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("sd-date-box", { key: day, date: day, disabled: true, class: "day" })))), h("div", { class: "calendar-body mt-12pxr grid grid-cols-7 gap-y-8pxr" }, [...calendar.prevMonthDays, ...calendar.days, ...calendar.afterMonthDays].map((day, idx) => (h("sd-date-box", { key: `prev${day}_${idx}`, date: !day ? '' : Number(day), selected: this.dateRange.some(date => date ===
                 this.dateUtil.formatDate(index === 0 ? this.prevYear : this.nextYear, index === 0 ? this.prevMonth : this.nextMonth, Number(day))), type: this.getDateBoxType(this.dateUtil.formatDate(index === 0 ? this.prevYear : this.nextYear, index === 0 ? this.prevMonth : this.nextMonth, Number(day))), isToday: today ===