@sellmate/design-system 0.0.43 → 0.0.45

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

@@ -1 +1 @@
-{"version":3,"file":"sd-guide.js","sourceRoot":"","sources":["../../../src/components/sd-guide/sd-guide.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, State, h } from '@stencil/core';\r\nimport colors from '../../styles/color.json';\r\n\r\ntype GuideType = 'help' | 'pdf' | 'youtube' | 'notion' | 'event';\r\n\r\nconst GUIDE_LABEL = {\r\n help: '활용 TIP',\r\n pdf: 'PDF Guide',\r\n youtube: 'Video Guide',\r\n notion: '사용 가이드',\r\n event: 'Event Button',\r\n};\r\n\r\nconst GUIDE_ICON = {\r\n help: {\r\n  name: 'helpOutline',\r\n  size: 20,\r\n  color: colors.green_70,\r\n },\r\n pdf: { name: 'pdf', size: 20, color: colors.red_75 },\r\n youtube: { name: 'youtube', size: 20, color: colors.red_75 },\r\n notion: { name: 'notion', size: 16, color: colors.black },\r\n event: { name: 'event', size: 16, color: colors.brilliantblue_70 },\r\n} as const;\r\n\r\n@Component({\r\n tag: 'sd-guide',\r\n styleUrl: 'sd-guide.scss',\r\n})\r\nexport class SdGuide {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() type: GuideType = 'help';\r\n @Prop() label: string = '';\r\n @Prop() message: string | string[] = '';\r\n @Prop() guideUrl: string = '';\r\n @Prop() popupWidth?: number;\r\n\r\n @State() popupShow: boolean = false;\r\n\r\n private guideRef?: HTMLElement;\r\n\r\n private handleClickGuide = () => {\r\n  if (this.type === 'help') {\r\n   this.popupShow = !this.popupShow;\r\n   return;\r\n  }\r\n\r\n  if (this.guideUrl) {\r\n   window.open(this.guideUrl, '_blank');\r\n  }\r\n };\r\n\r\n private get guideClass(): string {\r\n  const classes = ['sd-guide', `sd-guide--${this.type}`];\r\n\r\n  if (this.popupShow) classes.push('sd-guide--active');\r\n\r\n  return classes.join(' ');\r\n }\r\n\r\n closeDropdown = () => {\r\n  this.popupShow = false;\r\n };\r\n\r\n render() {\r\n  const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];\r\n\r\n  return (\r\n   <Host\r\n    style={{\r\n     '--sd-guide-color': GUIDE_ICON[this.type].color,\r\n    }}\r\n   >\r\n    <sd-button\r\n     ref={el => (this.guideRef = el as unknown as HTMLElement)}\r\n     class={this.guideClass}\r\n     variant={this.popupShow ? 'primary' : 'outline'}\r\n     label={GUIDE_LABEL[this.type]}\r\n     size=\"sm\"\r\n     color={this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45'}\r\n     icon={iconName}\r\n     iconColor={this.popupShow ? 'white' : iconColor}\r\n     iconSize={iconSize}\r\n     noHover={this.popupShow}\r\n     onSdClick={this.handleClickGuide}\r\n    />\r\n    {this.type === 'help' && this.popupShow && (\r\n     <sd-portal\r\n      open={this.popupShow}\r\n      parentRef={this.guideRef}\r\n      onSdClose={this.closeDropdown}\r\n      offset={[0, 4]}\r\n     >\r\n      <div\r\n       class=\"sd-guide__popup\"\r\n       style={{ width: this.popupWidth ? this.popupWidth + 'px' : '426px' } as any}\r\n      >\r\n       <sd-button\r\n        class=\"sd-guide__popup__close\"\r\n        icon=\"close\"\r\n        color={colors.grey_65}\r\n        size=\"md\"\r\n        variant=\"ghost\"\r\n        noHover\r\n        // buttonStyle={{ padding: '0px', minHeight: '0px' }}\r\n        onSdClick={this.closeDropdown}\r\n       />\r\n       <div class=\"sd-guide__popup__header\">\r\n        <sd-icon name=\"helpOutline\" size={24} color={colors.green_65} />\r\n        <h3 class=\"sd-guide__popup__title\">{this.label || GUIDE_LABEL[this.type]}</h3>\r\n       </div>\r\n       <ul class=\"sd-guide__popup__list\">{this.renderListItem(this.message)}</ul>\r\n      </div>\r\n     </sd-portal>\r\n    )}\r\n   </Host>\r\n  );\r\n }\r\n\r\n // 현재 2depth까지만 스타일 적용\r\n renderListItem(message: string | string[], depth: number = 0): HTMLElement[] {\r\n  const listItems: HTMLElement[] = [];\r\n\r\n  if (Array.isArray(message)) {\r\n   const depthMsg = message.map(msg => this.renderListItem(msg, depth + 1));\r\n   listItems.push(...depthMsg.flat());\r\n  } else {\r\n   listItems.push(this.renderLi(message, depth));\r\n  }\r\n\r\n  return listItems;\r\n }\r\n\r\n renderLi = (message: string, depth: number) => {\r\n  const listContent = message.replace(/ /gi, '&nbsp;');\r\n  return (\r\n   <li class={`sd-guide__popup__list__item sd-guide__popup__list__item--depth-${depth}`}>\r\n    <p innerHTML={listContent}></p>\r\n   </li>\r\n  );\r\n };\r\n}\r\n\r\n// <sd-guide id=\"sd-guide-1\"></sd-guide>\r\n// <sd-guide id=\"sd-guide-2\" type=\"pdf\"></sd-guide>\r\n// <sd-guide id=\"sd-guide-3\" type=\"youtube\"></sd-guide>\r\n// <sd-guide id=\"sd-guide-4\" type=\"notion\"></sd-guide>\r\n// <sd-guide id=\"sd-guide-5\" type=\"event\"></sd-guide>\r\n"]}
+{"version":3,"file":"sd-guide.js","sourceRoot":"","sources":["../../../src/components/sd-guide/sd-guide.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, State, h } from '@stencil/core';\r\nimport colors from '../../styles/color.json';\r\n\r\ntype GuideType = 'help' | 'pdf' | 'youtube' | 'notion' | 'event';\r\n\r\nconst GUIDE_LABEL = {\r\n help: '활용 TIP',\r\n pdf: 'PDF Guide',\r\n youtube: 'Video Guide',\r\n notion: '사용법 안내',\r\n event: 'Event Button',\r\n};\r\n\r\nconst GUIDE_ICON = {\r\n help: {\r\n  name: 'helpOutline',\r\n  size: 20,\r\n  color: colors.green_70,\r\n },\r\n pdf: { name: 'pdf', size: 20, color: colors.red_75 },\r\n youtube: { name: 'youtube', size: 20, color: colors.red_75 },\r\n notion: { name: 'notion', size: 16, color: colors.black },\r\n event: { name: 'event', size: 16, color: colors.brilliantblue_70 },\r\n} as const;\r\n\r\n@Component({\r\n tag: 'sd-guide',\r\n styleUrl: 'sd-guide.scss',\r\n})\r\nexport class SdGuide {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() type: GuideType = 'help';\r\n @Prop() label: string = '';\r\n @Prop() message: string | string[] = '';\r\n @Prop() guideUrl: string = '';\r\n @Prop() popupTitle: string = '';\r\n @Prop() popupWidth?: number;\r\n\r\n @State() popupShow: boolean = false;\r\n\r\n private guideRef?: HTMLElement;\r\n\r\n private handleClickGuide = () => {\r\n  if (this.type === 'help') {\r\n   this.popupShow = !this.popupShow;\r\n   return;\r\n  }\r\n\r\n  if (this.guideUrl) {\r\n   window.open(this.guideUrl, '_blank');\r\n  }\r\n };\r\n\r\n private get guideClass(): string {\r\n  const classes = ['sd-guide', `sd-guide--${this.type}`];\r\n\r\n  if (this.popupShow) classes.push('sd-guide--active');\r\n\r\n  return classes.join(' ');\r\n }\r\n\r\n closeDropdown = () => {\r\n  this.popupShow = false;\r\n };\r\n\r\n render() {\r\n  const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];\r\n\r\n  return (\r\n   <Host\r\n    style={{\r\n     '--sd-guide-color': GUIDE_ICON[this.type].color,\r\n    }}\r\n   >\r\n    <sd-button\r\n     ref={el => (this.guideRef = el as unknown as HTMLElement)}\r\n     class={this.guideClass}\r\n     variant={this.popupShow ? 'primary' : 'outline'}\r\n     label={this.label || GUIDE_LABEL[this.type]}\r\n     size=\"sm\"\r\n     color={this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45'}\r\n     icon={iconName}\r\n     iconColor={this.popupShow ? 'white' : iconColor}\r\n     iconSize={iconSize}\r\n     noHover={this.popupShow}\r\n     onSdClick={this.handleClickGuide}\r\n    />\r\n    {this.type === 'help' && this.popupShow && (\r\n     <sd-portal\r\n      open={this.popupShow}\r\n      parentRef={this.guideRef}\r\n      onSdClose={this.closeDropdown}\r\n      offset={[0, 4]}\r\n     >\r\n      <div\r\n       class=\"sd-guide__popup\"\r\n       style={{ width: this.popupWidth ? this.popupWidth + 'px' : '426px' } as any}\r\n      >\r\n       <sd-button\r\n        class=\"sd-guide__popup__close\"\r\n        icon=\"close\"\r\n        color={colors.grey_65}\r\n        size=\"md\"\r\n        variant=\"ghost\"\r\n        noHover\r\n        // buttonStyle={{ padding: '0px', minHeight: '0px' }}\r\n        onSdClick={this.closeDropdown}\r\n       />\r\n       <div class=\"sd-guide__popup__header\">\r\n        <sd-icon name=\"helpOutline\" size={24} color={colors.green_65} />\r\n        <h3 class=\"sd-guide__popup__title\">{this.popupTitle || GUIDE_LABEL[this.type]}</h3>\r\n       </div>\r\n       <ul class=\"sd-guide__popup__list\">{this.renderListItem(this.message)}</ul>\r\n      </div>\r\n     </sd-portal>\r\n    )}\r\n   </Host>\r\n  );\r\n }\r\n\r\n // 현재 2depth까지만 스타일 적용\r\n renderListItem(message: string | string[], depth: number = 0): HTMLElement[] {\r\n  const listItems: HTMLElement[] = [];\r\n\r\n  if (Array.isArray(message)) {\r\n   const depthMsg = message.map(msg => this.renderListItem(msg, depth + 1));\r\n   listItems.push(...depthMsg.flat());\r\n  } else {\r\n   listItems.push(this.renderLi(message, depth));\r\n  }\r\n\r\n  return listItems;\r\n }\r\n\r\n renderLi = (message: string, depth: number) => {\r\n  const listContent = message.replace(/ /gi, '&nbsp;');\r\n  return (\r\n   <li class={`sd-guide__popup__list__item sd-guide__popup__list__item--depth-${depth}`}>\r\n    <p innerHTML={listContent}></p>\r\n   </li>\r\n  );\r\n };\r\n}\r\n\r\n// <sd-guide id=\"sd-guide-1\"></sd-guide>\r\n// <sd-guide id=\"sd-guide-2\" type=\"pdf\"></sd-guide>\r\n// <sd-guide id=\"sd-guide-3\" type=\"youtube\"></sd-guide>\r\n// <sd-guide id=\"sd-guide-4\" type=\"notion\"></sd-guide>\r\n// <sd-guide id=\"sd-guide-5\" type=\"event\"></sd-guide>\r\n"]}

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

@@ -25,7 +25,7 @@ export class SdIcon {
     }
     render() {
         const IconComponent = Icons[this.name]?.[this.size];
-        return (h("i", { key: '6e960b0cd16604be33d46a82e51f681cb3c16cbf', class: this.getIconClasses(), style: this.iconStyle }, h(IconComponent, { key: '61ed4a9607f3dcc656b991b0705e6623d1c690db', color: this.resolvedColor })));
+        return (h("i", { key: '738453a8bc8d1b9bb67fbaaffb7de203c2982c30', class: this.getIconClasses(), style: this.iconStyle }, h(IconComponent, { key: '2f970609756be608b660a522949dd79cca64fcc8', color: this.resolvedColor })));
     }
     static get is() { return "sd-icon"; }
     static get originalStyleUrls() {

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

@@ -89,11 +89,11 @@ export class SdInput {
                 '--input-width': typeof this.width === 'number' ? `${this.width}px` : this.width,
             }
             : {};
-        return (h(Host, { key: '331f9b3473c6fbd88b05013dc9a3fdd8d88a8a43', style: inputWidth }, this.label && h("div", { key: '9f998c7e3e0350cb4c81fb40881bf60bd85262fd', class: "sd-input__label" }, this.label), h("label", { key: '201572ad47dcbae9da7ea68247e3af729c815578', class: {
+        return (h(Host, { key: '87a102220530a2e06620619967f1925f193b4794', style: inputWidth }, this.label && h("div", { key: 'dec1ef5b27dadc7b2c6c0e9f5dab978b338b5a45', class: "sd-input__label" }, this.label), h("label", { key: '72ba8b8b0019fd1bfc222207df4b42735457873d', class: {
                 'sd-input': true,
                 [this.getInputStatus()]: true,
                 'sd-input--barcode': !!this.barcode,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("slot", { key: '976c8e1a97dc03ffe30216f2b9a331da1e5e80bd', name: "prefix" }), h("input", { key: '42bb9cfd1864294550422f23f7989cf391da732a', ref: el => (this.nativeEl = el), class: `sd-input__native_element ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onChange: this.handleChange, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) }), h("slot", { key: '55a23ec021df0f071eeef45092cd71527ede09c5', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: 'a96f46a1b1fce96da2547c40173b3f044686813e', name: "close", color: "#888", class: "sd-input__clear-icon", onClick: () => {
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("slot", { key: '7745177f5638351670adb3610325d44df156826e', name: "prefix" }), h("input", { key: '976949537b8071a409d94e93f803128946d73d48', ref: el => (this.nativeEl = el), class: `sd-input__native_element ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onChange: this.handleChange, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) }), h("slot", { key: 'b62387e0c2122cfb9f5599a108d54682df59fef6', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: 'b860d9c2387adf97d7317bba550b169ac9f4ac49', name: "close", color: "#888", class: "sd-input__clear-icon", onClick: () => {
                 this.internalValue = '';
                 this.sdChange?.emit(this.internalValue);
                 this.sdInput?.emit(this.internalValue);

package/dist/collection/components/sd-loading-spinner/sd-loading-spinner.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class SdLoadingSpinner {
     render() {
-        return (h(Host, { key: 'b385493be341259280856202db561334e9473795' }, h("svg", { key: '00f946045a4ca0ab1a103d10290c297716908adf', class: "sd-loading-spinner text-positive", width: "72px", height: "72px", viewBox: "25 25 50 50" }, h("circle", { key: '9c10f467346e80574d7bab90dcde650a67a12329', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
+        return (h(Host, { key: '54446b42c83eff572c2d0d63c367a7e407d722a5' }, h("svg", { key: '92ad1f0446dc5912a656512d09ab4b8b3b262156', class: "sd-loading-spinner text-positive", width: "72px", height: "72px", viewBox: "25 25 50 50" }, h("circle", { key: 'b9b0c2ea5233fb5f5c784d0262c6ba526dc00622', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
     }
     static get is() { return "sd-loading-spinner"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-modal-card/sd-modal-card.css

@@ -0,0 +1,50 @@
+sd-modal-card {
+  display: block;
+}
+sd-modal-card .sd-modal-card {
+  position: relative;
+  padding: 40px 32px;
+  border-radius: 8px;
+  box-shadow: 4px 4px 24px 4px rgba(0, 0, 0, 0.2);
+}
+sd-modal-card .sd-modal-card__close-button {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  cursor: pointer;
+}
+sd-modal-card .sd-modal-card sd-icon.sd-modal-card__icon {
+  display: block;
+  width: 32px;
+  height: 32px;
+  margin: 0 auto 12px auto;
+}
+sd-modal-card .sd-modal-card__title {
+  color: var(--point-color);
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 30px;
+  text-align: center;
+  margin: 0 0 20px 0;
+}
+sd-modal-card .sd-modal-card__message {
+  color: #222222;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 22px;
+  text-align: center;
+  margin: 0;
+}
+sd-modal-card .sd-modal-card__button-container {
+  display: flex;
+  margin: 32px auto 0 auto;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+}
+sd-modal-card .sd-modal-card__button-container.flex-column {
+  flex-direction: column;
+}
+sd-modal-card .sd-modal-card__button-container button.sd-modal-card__button {
+  width: 89px;
+}

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

@@ -0,0 +1,387 @@
+import { Host, h } from "@stencil/core";
+import { resolveColor } from "../../utils/color";
+export class SdModalCard {
+    type = 'info';
+    system = 'normal';
+    useCloseButton = true;
+    modalTitle = 'normal';
+    buttonFlexDirection = 'row';
+    buttonProps = [
+        {
+            label: '확인',
+            color: 'grey_80',
+            size: 'md',
+        },
+    ];
+    message = [];
+    modalClass = '';
+    sdClose;
+    sdConfirm;
+    get pointColor() {
+        if (this.type !== 'normal') {
+            return 'grey_95';
+        }
+        switch (this.system) {
+            case 'positive':
+                return resolveColor('brilliantblue_75');
+            case 'negative':
+                return resolveColor('red_75');
+            default:
+                return resolveColor('grey_95');
+        }
+    }
+    get getModalClass() {
+        let modalClass = `sd-modal-card ${this.modalClass}`;
+        modalClass += ' ' + `sd-modal-card-${this.system}`;
+        return modalClass;
+    }
+    render() {
+        return (h(Host, { key: 'a7b84787e02fd73d3df5af58011b92bd70bf5418', style: { '--point-color': this.pointColor } }, h("div", { key: 'ee1e08e2dca1c4192bbdf21cba148a1ad72459e1', class: this.getModalClass }, this.useCloseButton && (h("sd-icon", { key: 'ec9aad87db22a57f01326db6fac695eb2d4617ad', class: "sd-modal-card__close-button", name: "close", size: "20", color: "grey_65", onClick: () => this.sdClose.emit() })), this.type !== 'normal' && (h("sd-icon", { key: 'ccf36cbb5ef0a793d422cee2312d338436bd6d61', class: "sd-modal-card__icon", name: this.type === 'info' ? 'notificationOutline' : 'warningOutline', size: "32", color: this.type === 'info' ? 'brilliantblue_75' : 'red_75' })), h("h2", { key: '9d1e9f949bc75697960d2c44667f7cad52d976c4', class: "sd-modal-card__title" }, this.modalTitle), h("slot", { key: 'f2b75146e58d78ac8431a1549068e9a219be4506' }, h("div", { key: '75d035874b34f388c3c6acb60f4a90dae46ff7e6', class: `sd-modal-card__message-container` }, this.message.map(msg => (h("p", { class: "sd-modal-card__message" }, msg))))), h("div", { key: '39f99159776d7c107b2b3410e5681a67766b2ce8', class: `sd-modal-card__button-container flex-${this.buttonFlexDirection}` }, this.buttonProps.map(button => (h("sd-button", { class: 'sd-modal-card__button', variant: button.variant ? button.variant : 'outline', label: button.label, color: button.color, size: button.size, onClick: () => !button.type || button.type === 'confirm' ? this.sdConfirm.emit() : this.sdClose.emit(), ...(button.class && { class: button.class }) })))))));
+    }
+    static get is() { return "sd-modal-card"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-modal-card.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-modal-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'info' | 'warning' | 'normal'",
+                    "resolved": "\"info\" | \"normal\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'info'"
+            },
+            "system": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'normal' | 'positive' | 'negative'",
+                    "resolved": "\"negative\" | \"normal\" | \"positive\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "system",
+                "defaultValue": "'normal'"
+            },
+            "useCloseButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "use-close-button",
+                "defaultValue": "true"
+            },
+            "modalTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "modal-title",
+                "defaultValue": "'normal'"
+            },
+            "buttonFlexDirection": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'row' | 'column'",
+                    "resolved": "\"column\" | \"row\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "button-flex-direction",
+                "defaultValue": "'row'"
+            },
+            "buttonProps": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SdModalCardButtonProps[]",
+                    "resolved": "SdModalCardButtonProps[]",
+                    "references": {
+                        "SdModalCardButtonProps": {
+                            "location": "local",
+                            "path": "C:/Users/KimMeeKyeong/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-modal-card/sd-modal-card.tsx",
+                            "id": "src/components/sd-modal-card/sd-modal-card.tsx::SdModalCardButtonProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[\r\n  {\r\n   label: '\uD655\uC778',\r\n   color: 'grey_80',\r\n   size: 'md',\r\n  },\r\n ]"
+            },
+            "message": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "modalClass": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "modal-class",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sdClose",
+                "name": "sdClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "MouseEvent",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "sdConfirm",
+                "name": "sdConfirm",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "MouseEvent",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
+            }];
+    }
+}
+//  <div
+//    style="
+//     width: 100%;
+//     display: flex;
+//     justify-content: center;
+//     align-items: center;
+//     gap: 40px;
+//     margin-top: 50px;
+//    "
+//   >
+//    <sd-modal-card id="1"></sd-modal-card>
+//    <sd-modal-card id="2"></sd-modal-card>
+//    <sd-modal-card id="3"></sd-modal-card>
+//   </div>
+//   <div
+//    style="
+//     width: 100%;
+//     display: flex;
+//     justify-content: center;
+//     align-items: center;
+//     gap: 40px;
+//     margin-top: 50px;
+//    "
+//   >
+//    <sd-modal-card id="4"></sd-modal-card>
+//    <sd-modal-card id="5"></sd-modal-card>
+//    <sd-modal-card id="6"></sd-modal-card>
+//   </div>
+//   <div
+//    style="
+//     width: 100%;
+//     display: flex;
+//     justify-content: center;
+//     align-items: center;
+//     gap: 40px;
+//     margin-top: 50px;
+//     margin-bottom: 50px;
+//    "
+//   >
+//    <sd-modal-card id="7"></sd-modal-card>
+//    <sd-modal-card id="8"></sd-modal-card>
+//    <sd-modal-card id="9"></sd-modal-card>
+//   </div>
+// <script>
+//    document.addEventListener('DOMContentLoaded', event => {
+//     const modalCard1 = document.getElementById('1');
+//     const modalCard2 = document.getElementById('2');
+//     const modalCard3 = document.getElementById('3');
+//     const modalCard4 = document.getElementById('4');
+//     const modalCard5 = document.getElementById('5');
+//     const modalCard6 = document.getElementById('6');
+//     const modalCard7 = document.getElementById('7');
+//     const modalCard8 = document.getElementById('8');
+//     const modalCard9 = document.getElementById('9');
+//     const message = [
+//      'Lorem ipsum dolor sit amet, consectetur adipisicing elit,',
+//      'incididunt ut labore et dolore magna aliqua.',
+//     ];
+//     const buttonProps = [
+//      {
+//       label: '취소',
+//       color: 'grey_80',
+//       size: 'md',
+//       type: 'cancel',
+//      },
+//      {
+//       label: '확인',
+//       color: 'oceanblue_75',
+//       size: 'md',
+//       variant: 'primary',
+//      },
+//     ];
+//     const colButtonProps = [
+//      {
+//       label: '확인',
+//       color: 'oceanblue_75',
+//       size: 'md',
+//       variant: 'primary',
+//      },
+//      {
+//       label: '취소',
+//       color: 'grey_80',
+//       size: 'md',
+//       type: 'cancel',
+//      },
+//     ];
+//     const handleClose = () => {
+//      console.log('Modal closed');
+//     };
+//     const handleConfirm = () => {
+//      console.log('Modal confirmed');
+//     };
+//     modalCard1.message = message;
+//     modalCard2.message = message;
+//     modalCard3.message = message;
+//     modalCard4.message = message;
+//     modalCard5.message = message;
+//     modalCard6.message = message;
+//     modalCard7.message = message;
+//     modalCard8.message = message;
+//     modalCard9.message = message;
+//     modalCard4.type = 'warning';
+//     modalCard5.type = 'warning';
+//     modalCard6.type = 'warning';
+//     modalCard7.type = 'normal';
+//     modalCard8.type = 'normal';
+//     modalCard9.type = 'normal';
+//     modalCard8.system = 'positive';
+//     modalCard9.system = 'negative';
+//     modalCard2.buttonProps = buttonProps;
+//     modalCard3.buttonProps = colButtonProps;
+//     modalCard3.buttonFlexDirection = 'column';
+//     const warningButtonProps = [buttonProps[0], { ...buttonProps[1], color: 'red_75' }];
+//     const warningColButtonProps = [{ ...colButtonProps[0], color: 'red_75' }, colButtonProps[1]];
+//     modalCard5.buttonProps = warningButtonProps;
+//     modalCard6.buttonProps = warningColButtonProps;
+//     modalCard6.buttonFlexDirection = 'column';
+//     modalCard1.addEventListener('sdClose', handleClose);
+//     modalCard2.addEventListener('sdClose', handleClose);
+//     modalCard3.addEventListener('sdClose', handleClose);
+//     modalCard1.addEventListener('sdConfirm', handleConfirm);
+//     modalCard2.addEventListener('sdConfirm', handleConfirm);
+//     modalCard3.addEventListener('sdConfirm', handleConfirm);
+//    });
+//   </script>
+//# sourceMappingURL=sd-modal-card.js.map

package/dist/collection/components/sd-modal-card/sd-modal-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-modal-card.js","sourceRoot":"","sources":["../../../src/components/sd-modal-card/sd-modal-card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\r\nimport { resolveColor } from '../../utils/color';\r\nimport { ButtonSize, ButtonVariant } from '../sd-button/sd-button';\r\n\r\nexport interface SdModalCardButtonProps {\r\n label: string;\r\n color: string;\r\n size: ButtonSize;\r\n variant?: ButtonVariant;\r\n class?: string;\r\n type?: 'confirm' | 'cancel';\r\n}\r\n\r\n@Component({\r\n tag: 'sd-modal-card',\r\n styleUrl: 'sd-modal-card.scss',\r\n})\r\nexport class SdModalCard {\r\n @Prop() type: 'info' | 'warning' | 'normal' = 'info';\r\n @Prop() system: 'normal' | 'positive' | 'negative' = 'normal';\r\n @Prop() useCloseButton: boolean = true;\r\n @Prop() modalTitle: string = 'normal';\r\n @Prop() buttonFlexDirection: 'row' | 'column' = 'row';\r\n @Prop() buttonProps: SdModalCardButtonProps[] = [\r\n  {\r\n   label: '확인',\r\n   color: 'grey_80',\r\n   size: 'md',\r\n  },\r\n ];\r\n @Prop() message: string[] = [];\r\n @Prop()\r\n modalClass: string = '';\r\n\r\n @Event() sdClose!: EventEmitter<MouseEvent>;\r\n @Event() sdConfirm!: EventEmitter<MouseEvent>;\r\n\r\n private get pointColor(): string {\r\n  if (this.type !== 'normal') {\r\n   return 'grey_95';\r\n  }\r\n\r\n  switch (this.system) {\r\n   case 'positive':\r\n    return resolveColor('brilliantblue_75');\r\n   case 'negative':\r\n    return resolveColor('red_75');\r\n   default:\r\n    return resolveColor('grey_95');\r\n  }\r\n }\r\n\r\n private get getModalClass(): string {\r\n  let modalClass = `sd-modal-card ${this.modalClass}`;\r\n  modalClass += ' ' + `sd-modal-card-${this.system}`;\r\n  return modalClass;\r\n }\r\n\r\n render() {\r\n  return (\r\n   <Host style={{ '--point-color': this.pointColor }}>\r\n    <div class={this.getModalClass}>\r\n     {this.useCloseButton && (\r\n      <sd-icon\r\n       class=\"sd-modal-card__close-button\"\r\n       name=\"close\"\r\n       size=\"20\"\r\n       color=\"grey_65\"\r\n       onClick={() => this.sdClose.emit()}\r\n      />\r\n     )}\r\n     {this.type !== 'normal' && (\r\n      <sd-icon\r\n       class=\"sd-modal-card__icon\"\r\n       name={this.type === 'info' ? 'notificationOutline' : 'warningOutline'}\r\n       size=\"32\"\r\n       color={this.type === 'info' ? 'brilliantblue_75' : 'red_75'}\r\n      />\r\n     )}\r\n     <h2 class=\"sd-modal-card__title\">{this.modalTitle}</h2>\r\n     <slot>\r\n      <div class={`sd-modal-card__message-container`}>\r\n       {this.message.map(msg => (\r\n        <p class=\"sd-modal-card__message\">{msg}</p>\r\n       ))}\r\n      </div>\r\n     </slot>\r\n     <div class={`sd-modal-card__button-container flex-${this.buttonFlexDirection}`}>\r\n      {this.buttonProps.map(button => (\r\n       <sd-button\r\n        class={'sd-modal-card__button'}\r\n        variant={button.variant ? button.variant : 'outline'}\r\n        label={button.label}\r\n        color={button.color}\r\n        size={button.size}\r\n        onClick={() =>\r\n         !button.type || button.type === 'confirm' ? this.sdConfirm.emit() : this.sdClose.emit()\r\n        }\r\n        {...(button.class && { class: button.class })}\r\n       ></sd-button>\r\n      ))}\r\n     </div>\r\n    </div>\r\n   </Host>\r\n  );\r\n }\r\n}\r\n\r\n//  <div\r\n//    style=\"\r\n//     width: 100%;\r\n//     display: flex;\r\n//     justify-content: center;\r\n//     align-items: center;\r\n//     gap: 40px;\r\n//     margin-top: 50px;\r\n//    \"\r\n//   >\r\n//    <sd-modal-card id=\"1\"></sd-modal-card>\r\n//    <sd-modal-card id=\"2\"></sd-modal-card>\r\n//    <sd-modal-card id=\"3\"></sd-modal-card>\r\n//   </div>\r\n//   <div\r\n//    style=\"\r\n//     width: 100%;\r\n//     display: flex;\r\n//     justify-content: center;\r\n//     align-items: center;\r\n//     gap: 40px;\r\n//     margin-top: 50px;\r\n//    \"\r\n//   >\r\n//    <sd-modal-card id=\"4\"></sd-modal-card>\r\n//    <sd-modal-card id=\"5\"></sd-modal-card>\r\n//    <sd-modal-card id=\"6\"></sd-modal-card>\r\n//   </div>\r\n//   <div\r\n//    style=\"\r\n//     width: 100%;\r\n//     display: flex;\r\n//     justify-content: center;\r\n//     align-items: center;\r\n//     gap: 40px;\r\n//     margin-top: 50px;\r\n//     margin-bottom: 50px;\r\n//    \"\r\n//   >\r\n//    <sd-modal-card id=\"7\"></sd-modal-card>\r\n//    <sd-modal-card id=\"8\"></sd-modal-card>\r\n//    <sd-modal-card id=\"9\"></sd-modal-card>\r\n//   </div>\r\n// <script>\r\n//    document.addEventListener('DOMContentLoaded', event => {\r\n//     const modalCard1 = document.getElementById('1');\r\n//     const modalCard2 = document.getElementById('2');\r\n//     const modalCard3 = document.getElementById('3');\r\n//     const modalCard4 = document.getElementById('4');\r\n//     const modalCard5 = document.getElementById('5');\r\n//     const modalCard6 = document.getElementById('6');\r\n//     const modalCard7 = document.getElementById('7');\r\n//     const modalCard8 = document.getElementById('8');\r\n//     const modalCard9 = document.getElementById('9');\r\n//     const message = [\r\n//      'Lorem ipsum dolor sit amet, consectetur adipisicing elit,',\r\n//      'incididunt ut labore et dolore magna aliqua.',\r\n//     ];\r\n//     const buttonProps = [\r\n//      {\r\n//       label: '취소',\r\n//       color: 'grey_80',\r\n//       size: 'md',\r\n//       type: 'cancel',\r\n//      },\r\n//      {\r\n//       label: '확인',\r\n//       color: 'oceanblue_75',\r\n//       size: 'md',\r\n//       variant: 'primary',\r\n//      },\r\n//     ];\r\n//     const colButtonProps = [\r\n//      {\r\n//       label: '확인',\r\n//       color: 'oceanblue_75',\r\n//       size: 'md',\r\n//       variant: 'primary',\r\n//      },\r\n//      {\r\n//       label: '취소',\r\n//       color: 'grey_80',\r\n//       size: 'md',\r\n//       type: 'cancel',\r\n//      },\r\n//     ];\r\n//     const handleClose = () => {\r\n//      console.log('Modal closed');\r\n//     };\r\n//     const handleConfirm = () => {\r\n//      console.log('Modal confirmed');\r\n//     };\r\n//     modalCard1.message = message;\r\n//     modalCard2.message = message;\r\n//     modalCard3.message = message;\r\n//     modalCard4.message = message;\r\n//     modalCard5.message = message;\r\n//     modalCard6.message = message;\r\n//     modalCard7.message = message;\r\n//     modalCard8.message = message;\r\n//     modalCard9.message = message;\r\n\r\n//     modalCard4.type = 'warning';\r\n//     modalCard5.type = 'warning';\r\n//     modalCard6.type = 'warning';\r\n//     modalCard7.type = 'normal';\r\n//     modalCard8.type = 'normal';\r\n//     modalCard9.type = 'normal';\r\n\r\n//     modalCard8.system = 'positive';\r\n//     modalCard9.system = 'negative';\r\n\r\n//     modalCard2.buttonProps = buttonProps;\r\n//     modalCard3.buttonProps = colButtonProps;\r\n//     modalCard3.buttonFlexDirection = 'column';\r\n\r\n//     const warningButtonProps = [buttonProps[0], { ...buttonProps[1], color: 'red_75' }];\r\n//     const warningColButtonProps = [{ ...colButtonProps[0], color: 'red_75' }, colButtonProps[1]];\r\n//     modalCard5.buttonProps = warningButtonProps;\r\n//     modalCard6.buttonProps = warningColButtonProps;\r\n//     modalCard6.buttonFlexDirection = 'column';\r\n\r\n//     modalCard1.addEventListener('sdClose', handleClose);\r\n//     modalCard2.addEventListener('sdClose', handleClose);\r\n//     modalCard3.addEventListener('sdClose', handleClose);\r\n//     modalCard1.addEventListener('sdConfirm', handleConfirm);\r\n//     modalCard2.addEventListener('sdConfirm', handleConfirm);\r\n//     modalCard3.addEventListener('sdConfirm', handleConfirm);\r\n//    });\r\n//   </script>\r\n"]}

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

@@ -12,12 +12,6 @@ export class SdPagination {
     lastPage = 1;
     simple = false;
     pageChange;
-    onPropChange() {
-        console.log('Pagination props changed', {
-            currentPage: this.currentPage,
-            lastPage: this.lastPage,
-        });
-    }
     get paginationClasses() {
         const classes = ['sd-pagination'];
         if (this.simple) {
@@ -73,12 +67,12 @@ export class SdPagination {
         }
     }
     render() {
-        return (h("div", { key: 'c200da844c5cd3bac4693979edfd4936fca50e96', class: this.paginationClasses }, h("div", { key: 'aebfbdc184eb7c71e05db5fd42ec8b5f6bf3603f', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "pagination-info" }, h("span", { class: "current-page" }, this.currentPage), h("span", null, "/"), h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+        return (h("div", { key: '3b65d74d4b70b8b3292a20daa5d89ffb7d9a66e7', class: this.paginationClasses }, h("div", { key: 'a3be2b1c24ac6ac7ecde25223d9208e63e558bf3', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "pagination-info" }, h("span", { class: "current-page" }, this.currentPage), h("span", null, "/"), h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
                 'pagination-btn': true,
                 'pagination-btn--selected': this.currentPage === n,
             }, disabled: this.currentPage === n, style: {
                 '--pagination-btn-width': `${this.buttonWidth}px`,
-            }, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: '9b15a86715af6e7f4aa89bd43494211449d7b683', class: "append-btns" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: '9c145c18eacc2ab0115d162cbb50e5ad3ea62c80', class: "append-btns" }, this.renderNextButtons())));
     }
     static get is() { return "sd-pagination"; }
     static get originalStyleUrls() {
@@ -173,14 +167,5 @@ export class SdPagination {
                 }
             }];
     }
-    static get watchers() {
-        return [{
-                "propName": "currentPage",
-                "methodName": "onPropChange"
-            }, {
-                "propName": "lastPage",
-                "methodName": "onPropChange"
-            }];
-    }
 }
 //# sourceMappingURL=sd-pagination.js.map