npm - @sellmate/design-system - Versions diffs - 0.0.52 → 0.0.54 - Mend

@sellmate/design-system 0.0.52 → 0.0.54

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (361) hide show

package/dist/components/sd-guide.js CHANGED Viewed

@@ -1,10 +1,10 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-TFWJruz2.js';
+import { p as proxyCustomElement, H, h, c as Host, t as transformTag } from './p-CQBrru3e.js';
 import { c as colors } from './p-BYf-ybt2.js';
-import { d as defineCustomElement$4 } from './p-DiehM5Y0.js';
-import { d as defineCustomElement$3 } from './p-BsyfatBe.js';
-import { d as defineCustomElement$2 } from './p-Dgxczhd0.js';
+import { d as defineCustomElement$4 } from './p-B05GJor3.js';
+import { d as defineCustomElement$3 } from './p-CV5tKC24.js';
+import { d as defineCustomElement$2 } from './p-BBNolp5g.js';
-const sdGuideCss = "@charset \"UTF-8\";sd-button{display:inline-block;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}.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-block;height:fit-content}sd-guide .sd-guide{display:inline-block}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 #12b553}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 sdGuideCss = () => `@charset "UTF-8";sd-button{display:inline-block;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}.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-block;height:fit-content}sd-guide .sd-guide{display:inline-block}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 #12b553}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',
@@ -60,11 +60,11 @@ const SdGuide$1 = /*@__PURE__*/ proxyCustomElement(class SdGuide extends H {
     };
     render() {
         const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
-        return (h(Host, { key: '32cff34a733ab423b4db37aaa91f4c63152566a3', style: {
+        return (h(Host, { key: 'c15218a6d9dbef0147701e31f798a3e6fa8e7679', style: {
                 '--sd-guide-color': GUIDE_ICON[this.type].color,
-            } }, h("sd-button", { key: '7efc84462239fcab6ac7d532d75ff418bebee957', 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, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (h("sd-portal", { key: '9868dd7fd8b5e42cfd6b2011c2a8679a8f9ece02', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: '974448ac29c162372a7a5e8ba12c493d4e8a2287', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: 'e28679c5cdeac9ca8e0b5701d4979a94a7c4f182', class: "sd-guide__popup__close", icon: "close", color: colors.grey_65, size: "md", variant: "ghost", noHover: true,
+            } }, h("sd-button", { key: '773093b74b917d9e15a8e8c280aaa7564832abe1', 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, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (h("sd-portal", { key: '64cfb5c8b425b0d48a9f9954b203c9b3883fb1f3', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: 'f748907b385a77490ad79f8f811ad7fc4eaee8bb', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: '8b154c2d239fc7038cb939f826417e5b68043a85', class: "sd-guide__popup__close", icon: "close", color: colors.grey_65, size: "md", variant: "ghost", noHover: true,
             // buttonStyle={{ padding: '0px', minHeight: '0px' }}
-            onSdClick: this.closeDropdown }), h("div", { key: 'c598b70154a4b2c4a4a2790a0072eaf4f7de7099', class: "sd-guide__popup__header" }, h("sd-icon", { key: '6837f7934c24a7da2bf0558d7cdcd5effcdb5481', name: "helpOutline", size: 24, color: colors.green_65 }), h("h3", { key: '6b7b8f9d6f3602f3cd036efdd308318988ce339b', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), h("ul", { key: 'fbee7a0d4ad49cd6cac2ef5bb4617937aaff5882', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
+            onSdClick: this.closeDropdown }), h("div", { key: 'eaa2160d01bbe8172fc176117b8e506e469c5dde', class: "sd-guide__popup__header" }, h("sd-icon", { key: '54436229beee740efc607c3c2dd7be4c390e3285', name: "helpOutline", size: 24, color: colors.green_65 }), h("h3", { key: 'e848c736bb5d49221feb194ecd43e904d51c82f8', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), h("ul", { key: '57536a93be487239c30d7338f48c87ab57fbb3d0', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
     }
     // 현재 2depth까지만 스타일 적용
     renderListItem(message, depth = 0) {
@@ -82,7 +82,7 @@ const SdGuide$1 = /*@__PURE__*/ proxyCustomElement(class SdGuide extends H {
         const listContent = message.replace(/ /gi, '&nbsp;');
         return (h("li", { class: `sd-guide__popup__list__item sd-guide__popup__list__item--depth-${depth}` }, h("p", { innerHTML: listContent })));
     };
-    static get style() { return sdGuideCss; }
+    static get style() { return sdGuideCss(); }
 }, [768, "sd-guide", {
         "type": [1],
         "label": [1],
@@ -99,22 +99,22 @@ function defineCustomElement$1() {
     const components = ["sd-guide", "sd-button", "sd-icon", "sd-portal"];
     components.forEach(tagName => { switch (tagName) {
         case "sd-guide":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SdGuide$1);
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), SdGuide$1);
             }
             break;
         case "sd-button":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$4();
             }
             break;
         case "sd-icon":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$3();
             }
             break;
         case "sd-portal":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$2();
             }
             break;

package/dist/components/sd-guide.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"sd-guide.js","mappings":"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","names":["SdGuide","__stencil_proxyCustomElement","HTMLElement"],"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';\r\n\r\nsd-guide {\r\n display: inline-block;\r\n height: fit-content;\r\n .sd-guide {\r\n display: inline-block;\r\n .sd-button {\r\n padding: 0 16px 0 12px;\r\n border-radius: 16px;\r\n color: $grey_90 !important;\r\n display: flex;\r\n align-items: center;\r\n transition: none;\r\n\r\n .sd-button__content {\r\n color: $grey_90 !important;\r\n\r\n .sd-button__label {\r\n color: $grey_90 !important;\r\n margin-left: 4px;\r\n }\r\n }\r\n }\r\n\r\n &--active {\r\n .sd-button {\r\n border: 1px solid $green_70;\r\n .sd-button__content {\r\n .sd-button__label {\r\n color: white !important;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n.sd-guide__popup {\r\n position: relative;\r\n padding: 20px 32px;\r\n border-radius: 8px;\r\n box-shadow: 4px 4px 24px 4px rgba(0, 0, 0, 0.1);\r\n background: white;\r\n\r\n > .sd-guide__popup__close {\r\n position: absolute;\r\n top: 12px;\r\n right: 12px;\r\n }\r\n\r\n &__header {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n margin-bottom: 12px;\r\n\r\n .sd-guide__popup__title {\r\n margin-top: 0;\r\n font-size: 16px;\r\n font-weight: 700;\r\n line-height: 26px;\r\n color: $grey_90;\r\n }\r\n }\r\n\r\n &__list {\r\n width: 100%;\r\n padding: 0;\r\n margin: 0;\r\n\r\n &__item {\r\n display: flex;\r\n width: 100%;\r\n align-items: start;\r\n list-style: none;\r\n color: $grey_90;\r\n font-size: 12px;\r\n font-weight: 400;\r\n\r\n p {\r\n width: 100%;\r\n padding: 0;\r\n margin: 0;\r\n word-wrap: break-word;\r\n word-break: break-word;\r\n white-space: normal;\r\n overflow-wrap: break-word;\r\n min-width: 0;\r\n }\r\n\r\n &::before {\r\n display: block;\r\n content: '-';\r\n width: 6px;\r\n color: $grey_90;\r\n font-size: 12px;\r\n font-weight: 400;\r\n margin-left: 10px;\r\n margin-right: 12px;\r\n flex-shrink: 0;\r\n }\r\n\r\n &--depth-2 {\r\n &::before {\r\n content: '•';\r\n }\r\n padding-left: 26px;\r\n }\r\n }\r\n }\r\n}\r\n","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, ' ');\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}
1	+ {"file":"sd-guide.js","mappings":"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","names":["SdGuide","__stencil_proxyCustomElement","HTMLElement"],"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';\r\n\r\nsd-guide {\r\n display: inline-block;\r\n height: fit-content;\r\n .sd-guide {\r\n display: inline-block;\r\n .sd-button {\r\n padding: 0 16px 0 12px;\r\n border-radius: 16px;\r\n color: $grey_90 !important;\r\n display: flex;\r\n align-items: center;\r\n transition: none;\r\n\r\n .sd-button__content {\r\n color: $grey_90 !important;\r\n\r\n .sd-button__label {\r\n color: $grey_90 !important;\r\n margin-left: 4px;\r\n }\r\n }\r\n }\r\n\r\n &--active {\r\n .sd-button {\r\n border: 1px solid $green_70;\r\n .sd-button__content {\r\n .sd-button__label {\r\n color: white !important;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n.sd-guide__popup {\r\n position: relative;\r\n padding: 20px 32px;\r\n border-radius: 8px;\r\n box-shadow: 4px 4px 24px 4px rgba(0, 0, 0, 0.1);\r\n background: white;\r\n\r\n > .sd-guide__popup__close {\r\n position: absolute;\r\n top: 12px;\r\n right: 12px;\r\n }\r\n\r\n &__header {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n margin-bottom: 12px;\r\n\r\n .sd-guide__popup__title {\r\n margin-top: 0;\r\n font-size: 16px;\r\n font-weight: 700;\r\n line-height: 26px;\r\n color: $grey_90;\r\n }\r\n }\r\n\r\n &__list {\r\n width: 100%;\r\n padding: 0;\r\n margin: 0;\r\n\r\n &__item {\r\n display: flex;\r\n width: 100%;\r\n align-items: start;\r\n list-style: none;\r\n color: $grey_90;\r\n font-size: 12px;\r\n font-weight: 400;\r\n\r\n p {\r\n width: 100%;\r\n padding: 0;\r\n margin: 0;\r\n word-wrap: break-word;\r\n word-break: break-word;\r\n white-space: normal;\r\n overflow-wrap: break-word;\r\n min-width: 0;\r\n }\r\n\r\n &::before {\r\n display: block;\r\n content: '-';\r\n width: 6px;\r\n color: $grey_90;\r\n font-size: 12px;\r\n font-weight: 400;\r\n margin-left: 10px;\r\n margin-right: 12px;\r\n flex-shrink: 0;\r\n }\r\n\r\n &--depth-2 {\r\n &::before {\r\n content: '•';\r\n }\r\n padding-left: 26px;\r\n }\r\n }\r\n }\r\n}\r\n","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, ' ');\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}

package/dist/components/sd-icon.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { S as SdIcon$1, d as defineCustomElement$1 } from './p-BsyfatBe.js';
+import { S as SdIcon$1, d as defineCustomElement$1 } from './p-CV5tKC24.js';
 const SdIcon = SdIcon$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sd-input.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { S as SdInput$1, d as defineCustomElement$1 } from './p-C6tAa8Q4.js';
+import { S as SdInput$1, d as defineCustomElement$1 } from './p-DY9yCaP9.js';
 const SdInput = SdInput$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sd-loading-spinner.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { S as SdLoadingSpinner$1, d as defineCustomElement$1 } from './p-wQDv-v0B.js';
+import { S as SdLoadingSpinner$1, d as defineCustomElement$1 } from './p-CLMeZVRV.js';
 const SdLoadingSpinner = SdLoadingSpinner$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sd-modal-card.js CHANGED Viewed

@@ -1,9 +1,9 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-TFWJruz2.js';
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host, t as transformTag } from './p-CQBrru3e.js';
 import { r as resolveColor } from './p-BYf-ybt2.js';
-import { d as defineCustomElement$3 } from './p-DiehM5Y0.js';
-import { d as defineCustomElement$2 } from './p-BsyfatBe.js';
+import { d as defineCustomElement$3 } from './p-B05GJor3.js';
+import { d as defineCustomElement$2 } from './p-CV5tKC24.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)}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$1 = /*@__PURE__*/ proxyCustomElement(class SdModalCard extends H {
     constructor(registerHost) {
@@ -51,7 +51,7 @@ const SdModalCard$1 = /*@__PURE__*/ proxyCustomElement(class SdModalCard extends
     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 style() { return sdModalCardCss; }
+    static get style() { return sdModalCardCss(); }
 }, [772, "sd-modal-card", {
         "type": [1],
         "system": [1],
@@ -69,17 +69,17 @@ function defineCustomElement$1() {
     const components = ["sd-modal-card", "sd-button", "sd-icon"];
     components.forEach(tagName => { switch (tagName) {
         case "sd-modal-card":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SdModalCard$1);
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), SdModalCard$1);
             }
             break;
         case "sd-button":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$3();
             }
             break;
         case "sd-icon":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$2();
             }
             break;

package/dist/components/sd-modal-card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"sd-modal-card.js","mappings":"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","names":["SdModalCard","__stencil_proxyCustomElement","HTMLElement"],"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';\r\n\r\nsd-modal-card {\r\n display: block;\r\n .sd-modal-card {\r\n position: relative;\r\n padding: 40px 32px;\r\n border-radius: 8px;\r\n box-shadow: 4px 4px 24px 4px rgba(0, 0, 0, 0.2);\r\n\r\n &__close-button {\r\n position: absolute;\r\n top: 16px;\r\n right: 16px;\r\n cursor: pointer;\r\n }\r\n\r\n sd-icon.sd-modal-card__icon {\r\n display: block;\r\n width: 32px;\r\n height: 32px;\r\n margin: 0 auto 12px auto;\r\n }\r\n\r\n &__title {\r\n color: var(--point-color);\r\n font-size: 18px;\r\n font-weight: 700;\r\n line-height: 30px;\r\n text-align: center;\r\n margin: 0 0 20px 0;\r\n }\r\n\r\n &__message {\r\n color: $grey_95;\r\n font-weight: 400;\r\n font-size: 12px;\r\n line-height: 22px;\r\n text-align: center;\r\n margin: 0;\r\n }\r\n\r\n &__button-container {\r\n display: flex;\r\n margin: 32px auto 0 auto;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 8px;\r\n &.flex-column {\r\n flex-direction: column;\r\n }\r\n button.sd-modal-card__button {\r\n width: 89px;\r\n }\r\n }\r\n }\r\n}\r\n","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"],"version":3}
1	+ {"file":"sd-modal-card.js","mappings":"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","names":["SdModalCard","__stencil_proxyCustomElement","HTMLElement"],"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';\r\n\r\nsd-modal-card {\r\n display: block;\r\n .sd-modal-card {\r\n position: relative;\r\n padding: 40px 32px;\r\n border-radius: 8px;\r\n box-shadow: 4px 4px 24px 4px rgba(0, 0, 0, 0.2);\r\n\r\n &__close-button {\r\n position: absolute;\r\n top: 16px;\r\n right: 16px;\r\n cursor: pointer;\r\n }\r\n\r\n sd-icon.sd-modal-card__icon {\r\n display: block;\r\n width: 32px;\r\n height: 32px;\r\n margin: 0 auto 12px auto;\r\n }\r\n\r\n &__title {\r\n color: var(--point-color);\r\n font-size: 18px;\r\n font-weight: 700;\r\n line-height: 30px;\r\n text-align: center;\r\n margin: 0 0 20px 0;\r\n }\r\n\r\n &__message {\r\n color: $grey_95;\r\n font-weight: 400;\r\n font-size: 12px;\r\n line-height: 22px;\r\n text-align: center;\r\n margin: 0;\r\n }\r\n\r\n &__button-container {\r\n display: flex;\r\n margin: 32px auto 0 auto;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 8px;\r\n &.flex-column {\r\n flex-direction: column;\r\n }\r\n button.sd-modal-card__button {\r\n width: 89px;\r\n }\r\n }\r\n }\r\n}\r\n","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"],"version":3}

package/dist/components/sd-number-input.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+interface SdNumberInput extends Components.SdNumberInput, HTMLElement {}
+export const SdNumberInput: {
+    prototype: SdNumberInput;
+    new (): SdNumberInput;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/sd-number-input.js ADDED Viewed

@@ -0,0 +1,335 @@
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host, t as transformTag } from './p-CQBrru3e.js';
+import { d as defineCustomElement$2 } from './p-CV5tKC24.js';
+const sdNumberInputCss = () => `sd-icon{display:inline-block;line-height:0}sd-icon .sd-icon--rotate-90{transform:rotate(90deg)}sd-icon .sd-icon--rotate-180{transform:rotate(180deg)}sd-icon .sd-icon--rotate-270{transform:rotate(270deg)}.sd-number-input{box-sizing:border-box;display:flex;width:var(--input-width, 100%);align-items:center;height:28px;padding:4px 8px;border:1px solid #aaaaaa;border-radius:4px;color:#333333;font-size:12px;line-height:20px;background:white;position:relative}.sd-number-input--hovered{border-color:#0075ff;box-shadow:0 0 4px 0 rgba(0, 113, 255, 0.4)}.sd-number-input.sd-number-input--error{border-color:#fb4444}.sd-number-input.sd-number-input--pass{border-color:#2bce6c}.sd-number-input.sd-number-input--disabled{background-color:#eeeeee !important;border-color:#cccccc !important;cursor:not-allowed !important;box-shadow:none !important}.sd-number-input.sd-number-input--disabled .sd-number-input__input{color:#888888 !important}.sd-number-input .sd-number-input__input{display:block;width:100%;height:20px;line-height:20px;border:none;outline:none;background:transparent;font-size:inherit;color:#333333;margin-left:4px;margin-right:4px;padding-block:0;padding-inline:0;text-align:right}.sd-number-input .sd-number-input__input::placeholder{font-size:12px;height:20px;line-height:20px;color:#aaaaaa}.sd-number-input .sd-number-input__clear-icon{cursor:pointer;margin-left:8px}.sd-number-input .sd-number-input__buttons{padding:4px;display:flex;justify-content:space-between;align-items:center;position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity 0.2s ease}.sd-number-input .sd-number-input__button{width:20px;height:20px;border:none;border-radius:2px;background-color:#eff6ff;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;margin:0;transition:background-color 0.2s ease}.sd-number-input .sd-number-input__button:hover:not(:disabled){background-color:#e6f1ff}.sd-number-input .sd-number-input__button:disabled{background-color:#eeeeee;cursor:not-allowed}.sd-number-input .sd-number-input__button--decrement{border-bottom-left-radius:0;border-bottom-right-radius:0}.sd-number-input .sd-number-input__button--increment{border-top-left-radius:0;border-top-right-radius:0}.sd-number-input .sd-number-input__label{margin-bottom:8px;font-weight:500;color:#333333}sd-number-input:focus-within .sd-number-input__buttons{opacity:1;pointer-events:auto}sd-number-input:focus-within .sd-number-input{border-color:#0075ff;box-shadow:0 0 4px 0 rgba(0, 113, 255, 0.4)}`;
+const SdNumberInput$1 = /*@__PURE__*/ proxyCustomElement(class SdNumberInput extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.sdIncrement = createEvent(this, "sdIncrement");
+        this.sdDecrement = createEvent(this, "sdDecrement");
+        this.sdInput = createEvent(this, "sdInput");
+        this.sdChange = createEvent(this, "sdChange");
+        this.sdFocus = createEvent(this, "sdFocus");
+        this.sdBlur = createEvent(this, "sdBlur");
+    }
+    get el() { return this; }
+    min = Number.NEGATIVE_INFINITY;
+    max = Number.POSITIVE_INFINITY;
+    step = 1;
+    useButton = false;
+    useDecimal = false;
+    value = null;
+    label;
+    placeholder = '입력해 주세요.';
+    disabled = false;
+    width;
+    rules;
+    autoFocus = false;
+    status;
+    inputClass = '';
+    readonly = false;
+    inputStyle = {};
+    internalValue = null;
+    displayValue = '';
+    hovered = false;
+    error = false;
+    nativeEl = undefined;
+    sdIncrement;
+    sdDecrement;
+    sdInput;
+    sdChange;
+    sdFocus;
+    sdBlur;
+    formatWithCommas(value) {
+        if (value === null || value === undefined)
+            return '';
+        const isNegative = value < 0;
+        const absValue = Math.abs(value);
+        const [intPart, decPart] = absValue.toString().split('.');
+        const formatted = (+intPart).toLocaleString();
+        const result = isNegative ? '-' + formatted : formatted;
+        return decPart ? result + '.' + decPart : String(result);
+    }
+    parseInput(input) {
+        if (!input || input.trim() === '')
+            return null;
+        const cleaned = input.replace(/,/g, '').trim();
+        // -로 시작을 할 수 있을 수 있고, 소수점 0.n | .n
+        if (!/^-?(\d+\.?\d*|\d*\.\d+)$/.test(cleaned)) {
+            return null;
+        }
+        const parsed = parseFloat(cleaned);
+        if (isNaN(parsed))
+            return null;
+        // 소수점 사용 하지 않는데 . 이 있는 경우
+        if (!this.useDecimal && cleaned.includes('.')) {
+            return null;
+        }
+        return parsed;
+    }
+    clampMinMax(value) {
+        return Math.min(Math.max(value, this.min), this.max);
+    }
+    updateDisplay() {
+        this.displayValue = this.formatWithCommas(this.internalValue);
+    }
+    isIncrementDisabled() {
+        if (this.disabled || this.readonly)
+            return true;
+        if (this.internalValue !== null) {
+            return this.internalValue >= this.max;
+        }
+        return false;
+    }
+    isDecrementDisabled() {
+        if (this.disabled || this.readonly)
+            return true;
+        if (this.internalValue !== null) {
+            return this.internalValue <= this.min;
+        }
+        return false;
+    }
+    valueChanged(newValue) {
+        if (newValue === null || newValue === '') {
+            this.internalValue = null;
+        }
+        else {
+            const parsed = typeof newValue === 'string' ? this.parseInput(newValue) : newValue;
+            if (parsed !== null) {
+                this.internalValue = this.clampMinMax(parsed);
+            }
+        }
+        this.updateDisplay();
+    }
+    internalValueChanged(newValue) {
+        this.updateDisplay();
+        if (newValue !== this.value) {
+            this.value = newValue;
+            this.sdInput?.emit(newValue);
+        }
+        if (!this.rules || this.rules.length === 0)
+            return;
+        this.error = false;
+        for (const rule of this.rules) {
+            const result = rule(newValue);
+            if (result !== true) {
+                this.error = true;
+                break;
+            }
+        }
+    }
+    componentWillLoad() {
+        if (this.value !== null && this.value !== undefined) {
+            const parsed = typeof this.value === 'string' ? this.parseInput(this.value) : this.value;
+            if (parsed !== null) {
+                this.internalValue = this.clampMinMax(parsed);
+            }
+        }
+        this.updateDisplay();
+    }
+    handleInput = (event) => {
+        const target = event.target;
+        const inputValue = target.value;
+        if (inputValue === '') {
+            this.internalValue = null;
+            this.displayValue = '';
+            return;
+        }
+        const commasRemoved = inputValue.replace(/,/g, '');
+        // 만약에 소수점 (.) 이 여러개 일 경우
+        const decimalCount = (commasRemoved.match(/\./g) || []).length;
+        if (decimalCount > 1) {
+            target.value = this.displayValue;
+            return;
+        }
+        // 가능: "-", ".", "-." (단순 기호만 있는 경우)
+        if (commasRemoved === '-' || commasRemoved === '.' || commasRemoved === '-.') {
+            target.value = commasRemoved;
+            return;
+        }
+        // 숫자 뒤에 . 이 있는 경우 (예: "1000.") -> 콤마 포맷 적용 + . 유지
+        if (commasRemoved.endsWith('.') && decimalCount === 1) {
+            const numberPart = commasRemoved.slice(0, -1);
+            const parsed = this.parseInput(numberPart);
+            if (parsed !== null) {
+                const formatted = this.formatWithCommas(parsed);
+                target.value = formatted + '.';
+                return;
+            }
+        }
+        const parsed = this.parseInput(commasRemoved);
+        if (parsed !== null) {
+            if (parsed < this.min) {
+                target.value = this.displayValue;
+                return;
+            }
+            if (parsed > this.max) {
+                target.value = this.displayValue;
+                return;
+            }
+            this.internalValue = parsed;
+            this.displayValue = this.formatWithCommas(parsed);
+            target.value = this.displayValue;
+        }
+        else {
+            target.value = this.displayValue;
+        }
+    };
+    handleChange = (event) => {
+        const target = event.target;
+        const inputValue = target.value;
+        if (inputValue === '') {
+            this.internalValue = null;
+        }
+        else {
+            const parsed = this.parseInput(inputValue);
+            if (parsed !== null) {
+                this.internalValue = this.clampMinMax(parsed);
+            }
+        }
+        this.sdChange?.emit(this.internalValue);
+    };
+    handleFocus = (event) => {
+        this.sdFocus?.emit(event);
+    };
+    handleBlur = (event) => {
+        this.updateDisplay();
+        if (this.nativeEl) {
+            this.nativeEl.value = this.displayValue;
+        }
+        this.sdBlur?.emit(event);
+    };
+    handleKeyDown = (event) => {
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            this.handleIncrement();
+        }
+        else if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            this.handleDecrement();
+        }
+    };
+    handleIncrement = () => {
+        if (this.isIncrementDisabled())
+            return;
+        const currentVal = this.internalValue ?? (this.min ?? 0);
+        let nextVal = currentVal + this.step;
+        if (nextVal > this.max) {
+            nextVal = this.max;
+        }
+        if (nextVal === currentVal)
+            return;
+        this.sdIncrement?.emit({ currentVal: nextVal, prevVal: currentVal });
+        this.internalValue = nextVal;
+        this.sdChange?.emit(nextVal);
+    };
+    handleDecrement = () => {
+        if (this.isDecrementDisabled())
+            return;
+        const currentVal = this.internalValue ?? (this.min ?? 0);
+        let nextVal = currentVal - this.step;
+        if (nextVal < this.min) {
+            nextVal = this.min;
+        }
+        if (nextVal === currentVal)
+            return;
+        this.sdDecrement?.emit({ currentVal: nextVal, prevVal: currentVal });
+        this.internalValue = nextVal;
+        this.sdChange?.emit(nextVal);
+    };
+    async getNativeElement() {
+        return this.nativeEl || null;
+    }
+    getInputStatus() {
+        if (this.disabled)
+            return 'sd-number-input--disabled';
+        if (this.hovered)
+            return 'sd-number-input--hovered';
+        if (this.status)
+            return `sd-number-input--${this.status}`;
+        if (this.error)
+            return 'sd-number-input--error';
+        return '';
+    }
+    render() {
+        const inputWidth = this.width
+            ? {
+                '--input-width': typeof this.width === 'number' ? `${this.width}px` : this.width,
+            }
+            : {};
+        const inputStyles = {
+            textAlign: this.useButton ? 'center' : 'right',
+        };
+        return (h(Host, { key: '353b3f99bf5933d6f445a78c9cecd93fcbdd3a9c', style: inputWidth, onFocus: this.handleFocus, onBlur: this.handleBlur }, this.useButton ? 'use buttons' : 'dont use buttons', this.label && h("div", { key: '95d9687fa5634fb53f6a2120d2125cf92e12ccdd', class: "sd-number-input__label" }, this.label), h("label", { key: '05ba4deb72261325788b25842c27d7a177fda58a', class: {
+                'sd-number-input': true,
+                [this.getInputStatus()]: true,
+                'sd-number-input--with-buttons': this.useButton,
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("input", { key: 'e4c415d40c20f5e915765f4f7d68cd123517acc1', ref: el => (this.nativeEl = el), class: `sd-number-input__input ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onChange: this.handleChange, onKeyDown: this.handleKeyDown, style: inputStyles }), this.useButton && (h("div", { key: '1b960a710170212032a8cd7c1c6ad002a3275d69', class: "sd-number-input__buttons" }, h("button", { key: 'c9a80bbdf96e4e191c2d43f581eba9c77f465464', type: "button", class: {
+                'sd-number-input__button': true,
+                'sd-number-input__button--decrement': true,
+            }, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: 'c4791c052f390013e7dfdf78ef42d987e9609da1', name: "minus", size: 12, color: this.isDecrementDisabled() ? '#CCCCCC' : '#2D8DFF' })), h("button", { key: '769fb6ebcde814f1f8667eaadd35f97139869bf3', type: "button", class: {
+                'sd-number-input__button': true,
+                'sd-number-input__button--increment': true,
+            }, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: '6a4d263152daaf8f4a565f6659f6bfa6c0acc814', name: "add", size: 12, color: this.isIncrementDisabled() ? '#CCCCCC' : '#2D8DFF' })))))));
+    }
+    static get watchers() { return {
+        "value": ["valueChanged"],
+        "internalValue": ["internalValueChanged"]
+    }; }
+    static get style() { return sdNumberInputCss(); }
+}, [768, "sd-number-input", {
+        "min": [2],
+        "max": [2],
+        "step": [2],
+        "useButton": [4, "use-button"],
+        "useDecimal": [4, "use-decimal"],
+        "value": [1032],
+        "label": [1],
+        "placeholder": [1],
+        "disabled": [4],
+        "width": [8],
+        "rules": [16],
+        "autoFocus": [4, "auto-focus"],
+        "status": [1],
+        "inputClass": [1, "input-class"],
+        "readonly": [4],
+        "inputStyle": [16],
+        "internalValue": [32],
+        "displayValue": [32],
+        "hovered": [32],
+        "error": [32],
+        "getNativeElement": [64]
+    }, undefined, {
+        "value": ["valueChanged"],
+        "internalValue": ["internalValueChanged"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["sd-number-input", "sd-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "sd-number-input":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), SdNumberInput$1);
+            }
+            break;
+        case "sd-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+const SdNumberInput = SdNumberInput$1;
+const defineCustomElement = defineCustomElement$1;
+export { SdNumberInput, defineCustomElement };
+//# sourceMappingURL=sd-number-input.js.map
+//# sourceMappingURL=sd-number-input.js.map