@sellmate/design-system 0.0.55 → 1.0.0

package/dist/esm/sd-guide.entry.js

@@ -0,0 +1,79 @@
+import { r as registerInstance, a as getElement, h, H as Host } from './index-C3qNZ7Qh.js';
+
+const sdGuideCss = () => `@charset "UTF-8";sd-button{display:inline-flex;width:fit-content;height:fit-content}.sd-button{text-decoration:none;cursor:pointer;border-radius:4px;transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;border:none}.sd-button--xs{padding:0 8px;font-size:12px;font-weight:500;line-height:20px;min-height:24px}.sd-button--sm{padding:0 12px;font-size:12px;font-weight:500;line-height:20px;min-height:28px}.sd-button--md{padding:0 20px;font-size:16px;font-weight:500;line-height:26px;min-height:34px}.sd-button--lg{padding:0 28px;font-size:18px;font-weight:500;line-height:30px;min-height:62px}.sd-button--primary{background-color:var(--button-color);color:white;transition:filter 0.2s ease}.sd-button--primary::before{content:"";position:absolute;inset:0;background:#000000;opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--primary:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.25}.sd-button--outline{background:white;border:1px solid var(--button-color);color:var(--button-color)}.sd-button--outline::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--outline:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--outline .sd-button__content{position:relative;z-index:1}.sd-button--ghost{background-color:transparent;color:var(--button-color);border-color:transparent}.sd-button--ghost::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--ghost:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--ghost .sd-button__content{position:relative;z-index:1}.sd-button--disabled{border:1px solid #cccccc;background:#e1e1e1;color:#888888;cursor:not-allowed !important}.sd-button--icon-only{padding:0;width:fit-content;height:fit-content;aspect-ratio:1/1}.sd-button--no-hover:hover::before{opacity:0 !important}.sd-button .sd-button__content{display:inline-flex;align-items:center;justify-content:center;gap:4px;z-index:1;font-weight:500}sd-guide{display:inline-flex;align-items:center}sd-guide .sd-guide{display:inline-flex}sd-guide .sd-guide .sd-button{padding:0 16px 0 12px;border-radius:16px;color:#333333 !important;display:flex;align-items:center;transition:none}sd-guide .sd-guide .sd-button .sd-button__content{color:#333333 !important}sd-guide .sd-guide .sd-button .sd-button__content .sd-button__label{color:#333333 !important;margin-left:4px}sd-guide .sd-guide--active .sd-button{border:1px solid #00973c}sd-guide .sd-guide--active .sd-button .sd-button__content .sd-button__label{color:white !important}.sd-guide__popup{position:relative;padding:20px 32px;border-radius:8px;box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.1);background:white}.sd-guide__popup>.sd-guide__popup__close{position:absolute;top:12px;right:12px}.sd-guide__popup__header{display:flex;align-items:center;gap:8px;margin-bottom:12px}.sd-guide__popup__header .sd-guide__popup__title{margin-top:0;font-size:16px;font-weight:700;line-height:26px;color:#333333}.sd-guide__popup__list{width:100%;padding:0;margin:0}.sd-guide__popup__list__item{display:flex;width:100%;align-items:start;list-style:none;color:#333333;font-size:12px;font-weight:400}.sd-guide__popup__list__item p{width:100%;padding:0;margin:0;word-wrap:break-word;word-break:break-word;white-space:normal;overflow-wrap:break-word;min-width:0}.sd-guide__popup__list__item::before{display:block;content:"-";width:6px;color:#333333;font-size:12px;font-weight:400;margin-left:10px;margin-right:12px;flex-shrink:0}.sd-guide__popup__list__item--depth-2::before{content:"•"}.sd-guide__popup__list__item--depth-2{padding-left:26px}`;
+
+const GUIDE_LABEL = {
+    help: '활용 TIP',
+    pdf: 'PDF Guide',
+    youtube: 'Video Guide',
+    notion: '사용법 안내',
+    event: 'Event Button',
+};
+const GUIDE_ICON = {
+    help: {
+        name: 'helpOutline',
+        size: 20,
+        color: 'green_75',
+    },
+    pdf: { name: 'pdf', size: 20, color: 'red_75' },
+    youtube: { name: 'youtube', size: 20, color: 'red_75' },
+    notion: { name: 'notion', size: 16, color: 'black' },
+    event: { name: 'event', size: 16, color: 'brilliantblue_70' },
+};
+const SdGuide = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    type = 'help';
+    label = '';
+    message = '';
+    guideUrl = '';
+    popupTitle = '';
+    popupWidth;
+    popupShow = false;
+    guideRef;
+    handleClickGuide = () => {
+        if (this.type === 'help') {
+            this.popupShow = !this.popupShow;
+            return;
+        }
+        if (this.guideUrl) {
+            window.open(this.guideUrl, '_blank');
+        }
+    };
+    get guideClass() {
+        const classes = ['sd-guide', `sd-guide--${this.type}`];
+        if (this.popupShow)
+            classes.push('sd-guide--active');
+        return classes.join(' ');
+    }
+    closeDropdown = () => {
+        this.popupShow = false;
+    };
+    render() {
+        const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
+        return (h(Host, { key: 'a7a284528f1bf4c24cbf4c645c600bfdb8ac3397', style: {
+                '--sd-guide-color': GUIDE_ICON[this.type].color,
+            } }, h("sd-button", { key: '7a31bb752942f693d77e687b7ee433772f0fb968', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: this.label || GUIDE_LABEL[this.type], size: "sm", color: this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45', icon: iconName, iconColor: this.popupShow ? 'white' : iconColor, iconSize: iconSize, noHover: this.popupShow, onClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (h("sd-portal", { key: 'b90a2c0594d2b9a09aad39954400fc648b14b776', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: '5f74f1b359de72ce3224a6d85971dc599e9eca11', style: { position: 'absolute', width: '0px', height: '0px' } }, h("div", { key: 'c7f0fea72dec238904e6ec696f0de8d7b4d99139', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: '91d375b51051cc6689d57a22615ece587592d4cd', class: "sd-guide__popup__close", icon: "close", color: "grey_65", size: "md", variant: "ghost", noHover: true, onClick: this.closeDropdown }), h("div", { key: '182d31b38da2082c18ed6d25d6879e8e5d5fc839', class: "sd-guide__popup__header" }, h("sd-icon", { key: '21a45f953f436528e8a5a0d08af988cb7cbbbf0c', name: "helpOutline", size: 24, color: "green_65" }), h("h3", { key: 'f6f24e6584b585fb6719327fed01bff87df8b9b9', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), h("ul", { key: '87fc85b3bb2bdd0e902bd7dc81cd6e36447d5241', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
+    }
+    // 현재 2depth까지만 스타일 적용
+    renderListItem(message, depth = 0) {
+        const listItems = [];
+        if (Array.isArray(message)) {
+            const depthMsg = message.map(msg => this.renderListItem(msg, depth + 1));
+            listItems.push(...depthMsg.flat());
+        }
+        else {
+            listItems.push(this.renderLi(message, depth));
+        }
+        return listItems;
+    }
+    renderLi = (message, depth) => {
+        return (h("li", { class: `sd-guide__popup__list__item sd-guide__popup__list__item--depth-${depth}` }, h("p", { innerHTML: message })));
+    };
+};
+SdGuide.style = sdGuideCss();
+
+export { SdGuide as sd_guide };
+//# sourceMappingURL=sd-guide.entry.js.map

package/dist/esm/sd-guide.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-guide.entry.js","sources":["src/components/sd-guide/sd-guide.scss?tag=sd-guide","src/components/sd-guide/sd-guide.tsx"],"sourcesContent":["@import '../sd-button/sd-button.scss';\n\nsd-guide {\n display: inline-flex;\n align-items: center;\n .sd-guide {\n  display: inline-flex;\n  .sd-button {\n   padding: 0 16px 0 12px;\n   border-radius: 16px;\n   color: $grey_90 !important;\n   display: flex;\n   align-items: center;\n   transition: none;\n\n   .sd-button__content {\n    color: $grey_90 !important;\n\n    .sd-button__label {\n     color: $grey_90 !important;\n     margin-left: 4px;\n    }\n   }\n  }\n\n  &--active {\n   .sd-button {\n    border: 1px solid $green_75;\n    .sd-button__content {\n     .sd-button__label {\n      color: white !important;\n     }\n    }\n   }\n  }\n }\n}\n\n.sd-guide__popup {\n position: relative;\n padding: 20px 32px;\n border-radius: 8px;\n box-shadow: 4px 4px 24px 4px rgba(0, 0, 0, 0.1);\n background: white;\n\n > .sd-guide__popup__close {\n  position: absolute;\n  top: 12px;\n  right: 12px;\n }\n\n &__header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 12px;\n\n  .sd-guide__popup__title {\n   margin-top: 0;\n   font-size: 16px;\n   font-weight: 700;\n   line-height: 26px;\n   color: $grey_90;\n  }\n }\n\n &__list {\n  width: 100%;\n  padding: 0;\n  margin: 0;\n\n  &__item {\n   display: flex;\n   width: 100%;\n   align-items: start;\n   list-style: none;\n   color: $grey_90;\n   font-size: 12px;\n   font-weight: 400;\n\n   p {\n    width: 100%;\n    padding: 0;\n    margin: 0;\n    word-wrap: break-word;\n    word-break: break-word;\n    white-space: normal;\n    overflow-wrap: break-word;\n    min-width: 0;\n   }\n\n   &::before {\n    display: block;\n    content: '-';\n    width: 6px;\n    color: $grey_90;\n    font-size: 12px;\n    font-weight: 400;\n    margin-left: 10px;\n    margin-right: 12px;\n    flex-shrink: 0;\n   }\n\n   &--depth-2 {\n    &::before {\n     content: '•';\n    }\n    padding-left: 26px;\n   }\n  }\n }\n}\n","import { Component, Element, Host, Prop, State, h } from '@stencil/core';\n\ntype GuideType = 'help' | 'pdf' | 'youtube' | 'notion' | 'event';\n\nconst GUIDE_LABEL = {\n help: '활용 TIP',\n pdf: 'PDF Guide',\n youtube: 'Video Guide',\n notion: '사용법 안내',\n event: 'Event Button',\n};\n\nconst GUIDE_ICON = {\n help: {\n  name: 'helpOutline',\n  size: 20,\n  color: 'green_75',\n },\n pdf: { name: 'pdf', size: 20, color: 'red_75' },\n youtube: { name: 'youtube', size: 20, color: 'red_75' },\n notion: { name: 'notion', size: 16, color: 'black' },\n event: { name: 'event', size: 16, color: 'brilliantblue_70' },\n} as const;\n\n@Component({\n tag: 'sd-guide',\n styleUrl: 'sd-guide.scss',\n})\nexport class SdGuide {\n @Element() el!: HTMLElement;\n\n @Prop() type: GuideType = 'help';\n @Prop() label: string = '';\n @Prop() message: string | string[] = '';\n @Prop() guideUrl: string = '';\n @Prop() popupTitle: string = '';\n @Prop() popupWidth?: number;\n\n @State() popupShow: boolean = false;\n\n private guideRef?: HTMLElement;\n\n private handleClickGuide = () => {\n  if (this.type === 'help') {\n   this.popupShow = !this.popupShow;\n   return;\n  }\n\n  if (this.guideUrl) {\n   window.open(this.guideUrl, '_blank');\n  }\n };\n\n private get guideClass(): string {\n  const classes = ['sd-guide', `sd-guide--${this.type}`];\n\n  if (this.popupShow) classes.push('sd-guide--active');\n\n  return classes.join(' ');\n }\n\n closeDropdown = () => {\n  this.popupShow = false;\n };\n\n render() {\n  const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];\n\n  return (\n   <Host\n    style={{\n     '--sd-guide-color': GUIDE_ICON[this.type].color,\n    }}\n   >\n    <sd-button\n     ref={el => (this.guideRef = el as unknown as HTMLElement)}\n     class={this.guideClass}\n     variant={this.popupShow ? 'primary' : 'outline'}\n     label={this.label || GUIDE_LABEL[this.type]}\n     size=\"sm\"\n     color={this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45'}\n     icon={iconName}\n     iconColor={this.popupShow ? 'white' : iconColor}\n     iconSize={iconSize}\n     noHover={this.popupShow}\n     onClick={this.handleClickGuide}\n    />\n    {this.type === 'help' && this.popupShow && (\n     <sd-portal\n      open={this.popupShow}\n      parentRef={this.guideRef}\n      onSdClose={this.closeDropdown}\n      offset={[0, 4]}\n     >\n      {/* \n       관련 일감: https://sellmate.atlassian.net/browse/SEL-6219\n       portal 위치 잡는 컨테이너 추가 개발 이후에 삭제 필요\n      */}\n      <div style={{ position: 'absolute', width: '0px', height: '0px' }}>\n       <div\n        class=\"sd-guide__popup\"\n        style={{ width: this.popupWidth ? this.popupWidth + 'px' : '426px' } as any}\n       >\n        <sd-button\n         class=\"sd-guide__popup__close\"\n         icon=\"close\"\n         color=\"grey_65\"\n         size=\"md\"\n         variant=\"ghost\"\n         noHover\n         onClick={this.closeDropdown}\n        />\n        <div class=\"sd-guide__popup__header\">\n         <sd-icon name=\"helpOutline\" size={24} color=\"green_65\" />\n         <h3 class=\"sd-guide__popup__title\">{this.popupTitle || GUIDE_LABEL[this.type]}</h3>\n        </div>\n        <ul class=\"sd-guide__popup__list\">{this.renderListItem(this.message)}</ul>\n       </div>\n      </div>\n     </sd-portal>\n    )}\n   </Host>\n  );\n }\n\n // 현재 2depth까지만 스타일 적용\n renderListItem(message: string | string[], depth: number = 0): HTMLElement[] {\n  const listItems: HTMLElement[] = [];\n\n  if (Array.isArray(message)) {\n   const depthMsg = message.map(msg => this.renderListItem(msg, depth + 1));\n   listItems.push(...depthMsg.flat());\n  } else {\n   listItems.push(this.renderLi(message, depth));\n  }\n\n  return listItems;\n }\n\n renderLi = (message: string, depth: number) => {\n  return (\n   <li class={`sd-guide__popup__list__item sd-guide__popup__list__item--depth-${depth}`}>\n    <p innerHTML={message}></p>\n   </li>\n  );\n };\n}\n"],"names":[],"mappings":";;AAAA,MAAM,UAAU,GAAG,MAAM,CAAC,ozHAAozH,CAAC;;ACI/0H,MAAM,WAAW,GAAG;AACnB,IAAA,IAAI,EAAE,QAAQ;AACd,IAAA,GAAG,EAAE,WAAW;AAChB,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,MAAM,EAAE,QAAQ;AAChB,IAAA,KAAK,EAAE,cAAc;CACrB;AAED,MAAM,UAAU,GAAG;AAClB,IAAA,IAAI,EAAE;AACL,QAAA,IAAI,EAAE,aAAa;AACnB,QAAA,IAAI,EAAE,EAAE;AACR,QAAA,KAAK,EAAE,UAAU;AACjB,KAAA;AACD,IAAA,GAAG,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE;AAC/C,IAAA,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE;AACvD,IAAA,MAAM,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;AACpD,IAAA,KAAK,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,kBAAkB,EAAE;CACpD;MAMG,OAAO,GAAA,MAAA;;;;;IAGX,IAAI,GAAc,MAAM;IACxB,KAAK,GAAW,EAAE;IAClB,OAAO,GAAsB,EAAE;IAC/B,QAAQ,GAAW,EAAE;IACrB,UAAU,GAAW,EAAE;AACvB,IAAA,UAAU;IAET,SAAS,GAAY,KAAK;AAE3B,IAAA,QAAQ;IAER,gBAAgB,GAAG,MAAK;AAC/B,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE;AACzB,YAAA,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS;YAChC;;AAGD,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YAClB,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,QAAQ,CAAC;;AAEtC,KAAC;AAED,IAAA,IAAY,UAAU,GAAA;QACrB,MAAM,OAAO,GAAG,CAAC,UAAU,EAAE,CAAa,UAAA,EAAA,IAAI,CAAC,IAAI,CAAE,CAAA,CAAC;QAEtD,IAAI,IAAI,CAAC,SAAS;AAAE,YAAA,OAAO,CAAC,IAAI,CAAC,kBAAkB,CAAC;AAEpD,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;IAGzB,aAAa,GAAG,MAAK;AACpB,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACvB,KAAC;IAED,MAAM,GAAA;QACL,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC;QAElF,QACC,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACJ,KAAK,EAAE;gBACN,kBAAkB,EAAE,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,KAAK;AAC/C,aAAA,EAAA,EAED,CACC,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,QAAQ,GAAG,EAA4B,CAAC,EACzD,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,OAAO,EAAE,IAAI,CAAC,SAAS,GAAG,SAAS,GAAG,SAAS,EAC/C,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAC3C,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,IAAI,CAAC,SAAS,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,KAAK,GAAG,SAAS,EAC/D,IAAI,EAAE,QAAQ,EACd,SAAS,EAAE,IAAI,CAAC,SAAS,GAAG,OAAO,GAAG,SAAS,EAC/C,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,IAAI,CAAC,SAAS,EACvB,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC7B,CAAA,EACD,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,IAAI,CAAC,SAAS,KACtC,CACC,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,SAAS,EACpB,SAAS,EAAE,IAAI,CAAC,QAAQ,EACxB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAA,EAMd,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,EAAA,EAChE,CACC,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EACvB,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,GAAG,IAAI,GAAG,OAAO,EAAS,EAAA,EAE3E,CACC,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAC9B,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,OAAO,EACf,OAAO,EACP,IAAA,EAAA,OAAO,EAAE,IAAI,CAAC,aAAa,EAC1B,CAAA,EACF,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,EAAA,EACnC,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,aAAa,EAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAC,UAAU,EAAG,CAAA,EACzD,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,KAAK,EAAC,wBAAwB,EAAA,EAAE,IAAI,CAAC,UAAU,IAAI,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAM,CAC9E,EACN,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,KAAK,EAAC,uBAAuB,IAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAM,CACrE,CACD,CACK,CACZ,CACK;;;AAKT,IAAA,cAAc,CAAC,OAA0B,EAAE,KAAA,GAAgB,CAAC,EAAA;QAC3D,MAAM,SAAS,GAAkB,EAAE;AAEnC,QAAA,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;YAC3B,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,CAAC,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,GAAG,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC;YACxE,SAAS,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC,IAAI,EAAE,CAAC;;aAC5B;AACN,YAAA,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;;AAG9C,QAAA,OAAO,SAAS;;AAGjB,IAAA,QAAQ,GAAG,CAAC,OAAe,EAAE,KAAa,KAAI;QAC7C,QACC,CAAI,CAAA,IAAA,EAAA,EAAA,KAAK,EAAE,CAAkE,+DAAA,EAAA,KAAK,CAAE,CAAA,EAAA,EACnF,CAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAE,OAAO,EAAM,CAAA,CACvB;AAEP,KAAC;;;;;;"}

package/dist/esm/sd-loading-spinner_2.entry.js

@@ -0,0 +1,192 @@
+import { r as registerInstance, h, H as Host, c as createEvent, a as getElement } from './index-C3qNZ7Qh.js';
+import { r as resolveColor } from './resolveColor-DcGvp3RM.js';
+import { B as BaseDropdownEvent, S as SelectKeyboardNavigation } from './base-dropdown-event-BShXSO5x.js';
+
+const sdLoadingSpinnerCss = () => `sd-loading-spinner{display:block}sd-loading-spinner .sd-loading-spinner{animation:sd-loading-spin 2s linear infinite;transform-origin:center center}sd-loading-spinner .sd-loading-spinner .path{animation:sd-loading-spin-path 1.5s ease-in-out infinite}@keyframes sd-loading-spin{0%{transform:rotate3d(0, 0, 1, 0deg)}25%{transform:rotate3d(0, 0, 1, 90deg)}50%{transform:rotate3d(0, 0, 1, 180deg)}75%{transform:rotate3d(0, 0, 1, 270deg)}100%{transform:rotate3d(0, 0, 1, 359deg)}}@keyframes sd-loading-spin-path{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35px}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124px}}`;
+
+const SdLoadingSpinner = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    color = '#0075ff';
+    get resolvedColor() {
+        return resolveColor(this.color);
+    }
+    render() {
+        return (h(Host, { key: 'aa2f775cec2d077ec5c90f56dfe6fc7c07d66ed3' }, h("svg", { key: 'eb95e64d55a79a6937eec9b34cbe3ef538c773a5', class: "sd-loading-spinner", width: "72px", height: "72px", viewBox: "25 25 50 50", style: { color: this.resolvedColor } }, h("circle", { key: '3ce95d70dcdfe3a2ad83dc5fea1226e8e3948420', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
+    }
+};
+SdLoadingSpinner.style = sdLoadingSpinnerCss();
+
+const sdSelectCss = () => `sd-select{display:inline-flex;flex-flow:column nowrap;width:fit-content;height:fit-content}sd-select *:focus,sd-select *:focus-visible,sd-select *:focus-within{outline:none !important}sd-select .sd-select{width:100%}sd-select .sd-select .sd-select__trigger{padding:4px 28px 4px 12px;display:flex;width:100%;height:100%;align-items:center}sd-select .sd-select .sd-select__trigger .sd-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400;text-align:left}sd-select .sd-select .sd-select__trigger .sd-select__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select .sd-select .sd-select__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease;margin-left:8px}sd-select .sd-select .sd-select__arrow--open{transform:rotate(180deg)}`;
+
+const SdSelect = class extends BaseDropdownEvent {
+    constructor(hostRef) {
+        super();
+        registerInstance(this, hostRef);
+        this.update = createEvent(this, "sdUpdate");
+        this.dropDownShow = createEvent(this, "sdDropDownShow");
+    }
+    get el() { return getElement(this); }
+    // props
+    value = null;
+    options = [];
+    placeholder = '선택';
+    optionPlaceholder = '옵션이 없습니다.';
+    width = '200px';
+    dropdownHeight = '260px';
+    autoFocus = false;
+    disabled = false;
+    clearable = false;
+    searchable = false;
+    // props - label
+    label = '';
+    insideLabel = false;
+    useLabelRequired = false;
+    labelTooltip = '';
+    labelTooltipProps = null;
+    // props - form
+    name;
+    rules = [];
+    error = false;
+    // props - custom slots
+    optionRenderer;
+    // states
+    isOpen = false;
+    itemIndex = -1;
+    isScrolled = false;
+    // events
+    update;
+    dropDownShow;
+    selectRef;
+    triggerRef;
+    formField;
+    filteredOptions = this.options;
+    dropDownWidth = this.width;
+    async sdOpen() {
+        this.isOpen = true;
+    }
+    async sdValidate() {
+        this.formField?.sdValidate();
+    }
+    async sdReset() {
+        this.formField?.sdReset();
+    }
+    async sdResetValidate() {
+        this.formField?.sdResetValidation();
+    }
+    async sdFocus() {
+        this.formField?.sdFocus();
+    }
+    async valueChanged() {
+        const selectedOption = this.getSelectedOption();
+        this.update?.emit({ value: selectedOption?.value || null, option: selectedOption || null });
+    }
+    async isOpenChanged() {
+        // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지
+        this.onDropdownToggle(this.isOpen);
+        this.dropDownShow?.emit({ isOpen: this.isOpen });
+        if (this.isOpen === false) {
+            await this.formField?.sdValidate();
+        }
+    }
+    componentWillLoad() {
+        this.initializeEvent(); // global dropdown Manager에 등록 + 이벤트 핸들러 초기화
+    }
+    componentDidLoad() {
+        if (this.autoFocus) {
+            this.selectRef?.focus();
+        }
+    }
+    // render 이후 label을 제외한 trigger의 너비를 기준으로 dropdown 너비 설정
+    componentDidRender() {
+        const trigger = this.triggerRef;
+        const rect = trigger?.getBoundingClientRect();
+        this.dropDownWidth = rect?.width ? `${rect.width}px` : this.width;
+    }
+    disconnectedCallback() {
+        this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리
+    }
+    handleDocumentClick(event) {
+        if (!this.selectRef?.contains(event.target)) {
+            this.isOpen = false;
+        }
+    }
+    handleDocumentKeydown(keyboardEvent) {
+        keyboardEvent.stopPropagation();
+        const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];
+        if (!targetKey.includes(keyboardEvent.key))
+            return;
+        keyboardEvent.preventDefault();
+        switch (keyboardEvent.key) {
+            case 'ArrowDown':
+            case 'ArrowUp':
+                const keyboardNavigation = new SelectKeyboardNavigation(this.searchable, this.filteredOptions);
+                const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);
+                this.itemIndex = nextIndex;
+                break;
+            case 'Enter':
+                const selectedOption = this.filteredOptions[this.itemIndex];
+                if (selectedOption && !selectedOption.disabled) {
+                    this.value = selectedOption.value;
+                    this.isOpen = false;
+                }
+                break;
+            case 'Escape':
+                this.isOpen = false;
+                break;
+        }
+    }
+    getSelectedOption() {
+        return this.options.find(option => option.value === this.value);
+    }
+    closeDropdown() {
+        this.isOpen = false;
+    }
+    handleTriggerClick = (event) => {
+        event.stopPropagation();
+        if (!this.disabled) {
+            this.isOpen = !this.isOpen;
+            this.dropDownShow?.emit({ isOpen: this.isOpen });
+        }
+    };
+    handleOptionClick = (detail) => {
+        const { option, event } = detail;
+        event.stopPropagation();
+        if (!option.disabled) {
+            this.value = option.value;
+            this.isOpen = false;
+        }
+    };
+    render() {
+        return (h("sd-field", { key: '507736637b3b7acee4bfef07eac7175c5e196c86', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, insideLabel: this.insideLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, h("div", { key: 'd905202201f5977d04a929af507653900af3ee75', class: {
+                'sd-select': true,
+                'sd-select--disabled': this.disabled,
+                'sd-select--error': !!this.error,
+                'sd-select--label': !!this.label,
+            }, ref: el => (this.selectRef = el) }, this.renderTrigger(), this.renderDropdown())));
+    }
+    renderTrigger() {
+        const selectedOption = this.getSelectedOption();
+        return (h("div", { class: "sd-select__trigger", tabindex: this.disabled ? -1 : 0, onClick: this.handleTriggerClick, ref: el => (this.triggerRef = el) }, h("span", { class: "sd-select__value" }, selectedOption ? selectedOption.label : this.placeholder), this.clearable && selectedOption && !this.disabled && (h("sd-icon", { key: "clear-icon", name: "close", size: 10, color: "#888", class: "sd-select__clear", onClick: async (event) => {
+                event.stopPropagation();
+                this.value = null;
+                await this.formField?.sdValidate();
+            } })), h("sd-icon", { key: "arrow-icon", name: "arrowDown", color: "#888", class: { 'sd-select__arrow': true, 'sd-select__arrow--open': this.isOpen } })));
+    }
+    renderDropdown() {
+        if (this.isOpen === false)
+            return null;
+        const parentRef = (this.selectRef?.querySelector('.sd-select__trigger') ||
+            this.selectRef);
+        return (h("sd-portal", { open: this.isOpen, parentRef: parentRef, onSdClose: this.closeDropdown }, h("sd-select-dropdown", { value: this.value, options: this.options, itemIndex: this.itemIndex, width: this.dropDownWidth, dropdownHeight: this.dropdownHeight, searchable: this.searchable, optionPlaceholder: this.optionPlaceholder, onSdOptionClick: ({ detail }) => this.handleOptionClick(detail), onSdOptionFiltered: ({ detail }) => (this.filteredOptions = detail) })));
+    }
+    static get watchers() { return {
+        "value": ["valueChanged"],
+        "isOpen": ["isOpenChanged"]
+    }; }
+};
+SdSelect.style = sdSelectCss();
+
+export { SdLoadingSpinner as sd_loading_spinner, SdSelect as sd_select };
+//# sourceMappingURL=sd-loading-spinner.sd-select.entry.js.map

package/dist/esm/sd-modal-card.entry.js

@@ -1,13 +1,13 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-7X2nzJWz.js';
-import { r as resolveColor } from './resolveColor-BYf-ybt2.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-C3qNZ7Qh.js';
+import { r as resolveColor } from './resolveColor-DcGvp3RM.js';
 
-const sdModalCardCss = () => `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}`;
+const sdModalCardCss = () => `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);background:white}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}`;
 
 const SdModalCard = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.sdClose = createEvent(this, "sdClose");
-        this.sdConfirm = createEvent(this, "sdConfirm");
+        this.close = createEvent(this, "sdClose");
+        this.confirm = createEvent(this, "sdConfirm");
     }
     type = 'info';
     system = 'normal';
@@ -23,8 +23,8 @@ const SdModalCard = class {
     ];
     message = [];
     modalClass = '';
-    sdClose;
-    sdConfirm;
+    close;
+    confirm;
     get pointColor() {
         if (this.type !== 'normal') {
             return 'grey_95';
@@ -44,7 +44,7 @@ const SdModalCard = class {
         return modalClass;
     }
     render() {
-        return (h(Host, { key: '83640de79f0c1a67ec114a048c3e8a691def5514', style: { '--point-color': this.pointColor } }, h("div", { key: 'fd741a11ac5c82a6b1d2c1972ec525596eb4c4f6', class: this.getModalClass }, this.useCloseButton && (h("sd-icon", { key: '144d5726721cdd28d56db268eb643f1ba5f66e57', class: "sd-modal-card__close-button", name: "close", size: "20", color: "grey_65", onClick: () => this.sdClose.emit() })), this.type !== 'normal' && (h("sd-icon", { key: '9d7dff32800d2f44e2c0753434dfd471c898200b', class: "sd-modal-card__icon", name: this.type === 'info' ? 'notificationOutline' : 'warningOutline', size: "32", color: this.type === 'info' ? 'brilliantblue_75' : 'red_75' })), h("h2", { key: 'c59db6982fb2369b3ca23990cd94f79547b4b758', class: "sd-modal-card__title" }, this.modalTitle), h("slot", { key: '1628852290bdb64ee99cd3f45318e3d25dde8e46' }, h("div", { key: 'a21d6157f28974f537938bf1acddcc33a5e3c5ca', class: `sd-modal-card__message-container` }, this.message.map(msg => (h("p", { class: "sd-modal-card__message" }, msg))))), h("div", { key: '336092ac86ab1e6ddd2af9a7f25b358ba694a036', 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 }) })))))));
+        return (h(Host, { key: 'e143942e62530660fb9a60dd70a418be197943b7', style: { '--point-color': this.pointColor } }, h("div", { key: '7033fb4220b84ed00eae6fa753fcfc676fc02a7f', class: this.getModalClass }, this.useCloseButton && (h("sd-icon", { key: 'e28d60dcd5281aa62fcd55f72d9eb7bb83767ca7', class: "sd-modal-card__close-button", name: "close", size: "20", color: "grey_65", onClick: () => this.close.emit() })), this.type !== 'normal' && (h("sd-icon", { key: 'e209095abf43af9885ccd63a9bc2183d24863f0c', class: "sd-modal-card__icon", name: this.type === 'info' ? 'notificationOutline' : 'warningOutline', size: "32", color: this.type === 'info' ? 'brilliantblue_75' : 'red_75' })), h("h2", { key: '5beac7a046be5afe446af94e9032dd9bb219cd60', class: "sd-modal-card__title" }, this.modalTitle), h("slot", { key: '83f5e5978ed9489888fdb5bc839eefb4ad99ce6c' }, h("div", { key: 'feaaee161b474b7464a51c515ac1fa5448b140f1', class: `sd-modal-card__message-container` }, this.message.map(msg => (h("p", { class: "sd-modal-card__message" }, msg))))), h("div", { key: 'cb2354ca63ab663aded356f4f931b40d64697209', 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.confirm.emit() : this.close.emit(), ...(button.class && { class: button.class }) })))))));
     }
 };
 SdModalCard.style = sdModalCardCss();

package/dist/esm/sd-modal-card.entry.js.map

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