@sellmate/design-system 1.0.67 → 1.0.69

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

@@ -1,55 +1,83 @@
 import { h } from "@stencil/core";
-const GUIDE_LABEL = {
-    help: '활용 TIP',
-    pdf: 'PDF Guide',
-    youtube: 'Video Guide',
+import { GUIDE_CONFIG } from "./sd-guide.config";
+const DEFAULT_LABEL_BY_TYPE = {
+    tip: '활용 TIP',
     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 ICON_BY_TYPE = {
+    tip: 'helpOutline',
+    notion: 'notion',
 };
 export class SdGuide {
     el;
-    type = 'help';
+    type = 'tip';
     label = '';
     message = '';
-    guideUrl = '';
+    url = '';
     popupTitle = '';
     popupWidth;
     popupShow = false;
     guideRef;
     handleClickGuide = () => {
-        if (this.type === 'help') {
-            this.popupShow = !this.popupShow;
+        if (this.type === 'notion') {
+            if (this.url) {
+                window.open(this.url, '_blank', 'noopener,noreferrer');
+            }
             return;
         }
-        if (this.guideUrl) {
-            window.open(this.guideUrl, '_blank');
-        }
+        this.popupShow = !this.popupShow;
     };
-    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;
     };
+    get guideStyle() {
+        const { button, contents } = GUIDE_CONFIG;
+        return {
+            '--sd-guide-button-height': button.height,
+            '--sd-guide-button-padding-x': button.paddingX,
+            '--sd-guide-button-radius': button.radius,
+            '--sd-guide-button-gap': button.gap,
+            '--sd-guide-button-font-size': button.fontSize,
+            '--sd-guide-button-font-weight': button.fontWeight,
+            '--sd-guide-button-line-height': button.lineHeight,
+            '--sd-guide-button-border-width': button.borderWidth,
+            '--sd-guide-button-border-color': button.borderColor,
+            '--sd-guide-button-bg-default': button.bgDefault,
+            '--sd-guide-button-bg-tip': button.bgTip,
+            '--sd-guide-button-bg-notion': button.bgNotion,
+            '--sd-guide-button-text-default': button.textDefault,
+            '--sd-guide-button-text-active': button.textActive,
+            '--sd-guide-contents-padding-x': contents.paddingX,
+            '--sd-guide-contents-padding-y': contents.paddingY,
+            '--sd-guide-contents-gap': contents.gap,
+            '--sd-guide-contents-row-gap': contents.rowGap,
+            '--sd-guide-contents-body-gap': contents.bodyGap,
+            '--sd-guide-contents-title-gap': contents.titleGap,
+            '--sd-guide-contents-radius': contents.radius,
+            '--sd-guide-contents-title-font-size': contents.titleFontSize,
+            '--sd-guide-contents-title-font-weight': contents.titleFontWeight,
+            '--sd-guide-contents-title-line-height': contents.titleLineHeight,
+            '--sd-guide-contents-body-font-size': contents.bodyFontSize,
+            '--sd-guide-contents-body-font-weight': contents.bodyFontWeight,
+            '--sd-guide-contents-body-line-height': contents.bodyLineHeight,
+            '--sd-guide-contents-text-color': contents.textColor,
+        };
+    }
     render() {
-        const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
-        return (h("div", { key: '0f70d3686c37c029635c93a8ad8f937fb2ca73c2', class: "sd-guide", style: {
-                '--sd-guide-color': GUIDE_ICON[this.type].color,
-            } }, h("sd-button", { key: 'f07235cc53a908237af2f13a98f325340c83fd0e', 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: '9c5ade0db41a02a343bb77bc1dcb44d12dba6c04', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: 'd59caf4107b678ce132accfe9f392c3cfa6b35f4', style: { position: 'absolute', width: '0px', height: '0px' } }, h("div", { key: '22aa97a939e27454dec067effc6911aea6ace2a4', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: '6bf404b6718bbd036acff51101538d967a2cd642', class: "sd-guide__popup__close", icon: "close", color: "grey_65", size: "md", variant: "ghost", noHover: true, onSdClick: this.closeDropdown }), h("div", { key: 'a63aa9263715f57f2e8bf977c4849f868803a704', class: "sd-guide__popup__header" }, h("sd-icon", { key: '8ba1969ada651d3226058bb9095ae8b794be1759', name: "helpOutline", size: 24, color: "green_65" }), h("h3", { key: '41dd2533e146eae12ee7367a243e819362597761', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), h("ul", { key: 'b45bfd9ff793f0c0860789d16c1c17fef2ad01d5', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
+        const { button, contents } = GUIDE_CONFIG;
+        const isActive = this.popupShow;
+        const isNotion = (this.type ?? 'tip') === 'notion';
+        const defaultLabel = DEFAULT_LABEL_BY_TYPE[this.type ?? 'tip'];
+        const iconName = ICON_BY_TYPE[this.type ?? 'tip'];
+        const buttonIconDefault = isNotion ? button.iconColorNotion : button.iconColorDefault;
+        const popupIconColor = isNotion ? contents.iconColorNotion : contents.iconColor;
+        const buttonClasses = ['sd-guide__button', `sd-guide__button--type-${this.type ?? 'tip'}`];
+        if (isActive)
+            buttonClasses.push('sd-guide__button--active');
+        return (h("div", { key: '4b9aa8bafd13828a4ec29d726f7276fab3042f2d', class: "sd-guide", style: this.guideStyle }, h("sd-button", { key: 'e3a17c594d111e95d0cb42dd8315174ccf4dd908', ref: el => (this.guideRef = el), class: buttonClasses.join(' '), variant: isActive ? 'primary' : 'outline', label: this.label || defaultLabel, size: "sm", icon: iconName, iconColor: isActive ? button.iconColorActive : buttonIconDefault, iconSize: button.iconSize, noHover: isActive, onSdClick: this.handleClickGuide }), this.popupShow && (h("sd-portal", { key: 'b57b09779ec23220eb466f710d55e678c913fe24', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: 'e62ca3a49a4976861a3e485166c8376a71286aba', style: { position: 'absolute', width: '0px', height: '0px' } }, h("div", { key: '837625b5ab61bd9383cf5329bea66ceb97ef3bac', class: "sd-guide__popup", style: {
+                ...this.guideStyle,
+                width: this.popupWidth ? this.popupWidth + 'px' : '426px',
+            } }, h("sd-ghost-button", { key: '0e3057af64b47e20234269c0e2bf07664b8b3b13', class: "sd-guide__popup__close", icon: "close", ariaLabel: "close", size: "sm", onSdClick: this.closeDropdown }), h("div", { key: '544e3508d232229b4d1edd82fdefa58457cc595a', class: "sd-guide__popup__header" }, h("sd-icon", { key: '234fb04df972a50fa8deb1cacc6e34fab678d27b', name: iconName, size: 24, color: popupIconColor }), h("h3", { key: '454d5ee4cdfc2a343d64e79dc642a2aee07ed448', class: "sd-guide__popup__title" }, this.popupTitle || defaultLabel)), h("ul", { key: '875d5f5587808e5189e77ca02e55e8d7be1125da', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
     }
     // 현재 2depth까지만 스타일 적용
     renderListItem(message, depth = 0) {
@@ -84,11 +112,12 @@ export class SdGuide {
                 "mutable": false,
                 "complexType": {
                     "original": "GuideType",
-                    "resolved": "\"event\" | \"help\" | \"notion\" | \"pdf\" | \"youtube\"",
+                    "resolved": "\"notion\" | \"tip\"",
                     "references": {
                         "GuideType": {
-                            "location": "global",
-                            "id": "global::GuideType"
+                            "location": "local",
+                            "path": "/Users/meijing/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-guide/sd-guide.tsx",
+                            "id": "src/components/sd-guide/sd-guide.tsx::GuideType"
                         }
                     }
                 },
@@ -100,9 +129,9 @@ export class SdGuide {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "type",
-                "defaultValue": "'help'"
+                "defaultValue": "'tip'"
             },
             "label": {
                 "type": "string",
@@ -120,7 +149,7 @@ export class SdGuide {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "label",
                 "defaultValue": "''"
             },
@@ -144,7 +173,7 @@ export class SdGuide {
                 "attribute": "message",
                 "defaultValue": "''"
             },
-            "guideUrl": {
+            "url": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -161,7 +190,7 @@ export class SdGuide {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "guide-url",
+                "attribute": "url",
                 "defaultValue": "''"
             },
             "popupTitle": {

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

@@ -7,6 +7,7 @@ export class SdInput {
     type = 'text';
     size = 'sm';
     addonLabel = '';
+    addonAlign = 'start';
     placeholder = '입력해 주세요.';
     disabled = false;
     clearable = false;
@@ -111,12 +112,12 @@ export class SdInput {
             '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
         };
-        return (h("sd-field", { key: 'a72ce8674fb761de7cd188e99cc19d5f3731a899', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("label", { key: 'e5cbdbc2b233bda57488ead19401d277891301ae', class: "sd-input__content" }, h("slot", { key: 'a327005770df94ef61f2e08071e77407a24b7b5c', name: "prefix" }), h("input", { key: '36301cd586151b8c607e14715b26fca467f68c13', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: '532e201860db0709572502aa4275fc9251e1aeb1', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (h("sd-ghost-button", { key: 'cc6132852c65f0597cbe25751c7246b1cdad3096', icon: "close", ariaLabel: "close", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
+        return (h("sd-field", { key: '3b607f0075786647d48ce470d40745e4d5fdcdc1', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("label", { key: '02902d50bbc3275860e814a5d354e83eeed72373', class: "sd-input__content" }, h("slot", { key: '4fb6e53a98853c67e847cdd38b8ddbb606e3f0a1', name: "prefix" }), h("input", { key: '291841a908b8502790f09833f1a30dc56f24ff52', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: '13e21f184a9dcee81a1b6d3c11b9137a0ac7203e', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (h("sd-ghost-button", { key: '4e708928b8465d6e8d5c1b6f4a983a9d8c1c8784', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
                 if (this.disabled)
                     return;
                 this.internalValue = '';
                 await this.formField?.sdValidate();
-            } })), this.type === 'password' && (h("sd-ghost-button", { key: 'fd3d567346cf5771ec28c73f15cdf0db15835766', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled, class: "sd-input__password-icon", onClick: () => {
+            } })), this.type === 'password' && (h("sd-ghost-button", { key: 'cc87104d0c9ef69659041fe233b3e432b62ed0b8', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled, class: "sd-input__password-icon", onClick: () => {
                 if (this.disabled)
                     return;
                 this.passwordVisible = !this.passwordVisible;
@@ -222,6 +223,33 @@ export class SdInput {
                 "attribute": "addon-label",
                 "defaultValue": "''"
             },
+            "addonAlign": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FieldAddonAlign",
+                    "resolved": "\"center\" | \"end\" | \"start\"",
+                    "references": {
+                        "FieldAddonAlign": {
+                            "location": "import",
+                            "path": "../sd-field/sd-field.config",
+                            "id": "src/components/sd-field/sd-field.config.ts::FieldAddonAlign",
+                            "referenceLocation": "FieldAddonAlign"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "addon-align",
+                "defaultValue": "'start'"
+            },
             "placeholder": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/sd-loading-container/sd-loading-container.config.js

@@ -1 +1 @@
-export const LOADING_CONTAINER_DEFAULT_Z_INDEX = 10000;
+export const LOADING_CONTAINER_DEFAULT_Z_INDEX = 999;

package/dist/collection/components/sd-loading-container/sd-loading-container.css

@@ -4,7 +4,7 @@ sd-loading-container .sd-loading-container {
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: var(--sd-loading-container-z-index, 10000);
+  z-index: var(--sd-loading-container-z-index, 999);
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.2s ease, visibility 0s linear 0.2s;

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

@@ -10,10 +10,10 @@ export class SdLoadingContainer {
         this.visible = false;
     }
     render() {
-        return (h("div", { key: 'e4578e196ebd4ee69d424fe85c9bf651bc3382f7', class: {
+        return (h("div", { key: '8236579ed01f703fb105576c2fd575b157b3aa76', class: {
                 'sd-loading-container': true,
                 'sd-loading-container--visible': this.visible,
-            }, "aria-hidden": this.visible ? 'false' : 'true' }, h("div", { key: 'ae9fae9408f9b69591554ca105abb2ece362db00', class: "sd-loading-container__backdrop" }), h("div", { key: '27d0c6518dacbb664cebb2fc76c9ceb14b2b3aac', class: "sd-loading-container__content" }, h("sd-circle-progress", { key: 'ace74d2550a2ddb579c61e6f8daaaf64915e8666', indeterminate: true, type: "inverse" }), this.message && (h("p", { key: 'af059ecdadf7b3b3c0a0437cbc4264ff550fa3c6', class: "sd-loading-container__message" }, this.message)))));
+            }, "aria-hidden": this.visible ? 'false' : 'true' }, h("div", { key: '176473a839add91a86d207544e9cc5862b13d04f', class: "sd-loading-container__backdrop" }), h("div", { key: '2776ed326caa6870a79b94079ff6e778ee560b02', class: "sd-loading-container__content" }, h("sd-circle-progress", { key: '6977bfd46e06e9c13492a15b5081c98446770de5', indeterminate: true, type: "inverse" }), this.message && (h("p", { key: '7cea458c498a4682b1d4d5f07e059ed8e4905df0', class: "sd-loading-container__message" }, this.message)))));
     }
     static get is() { return "sd-loading-container"; }
     static get originalStyleUrls() {

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

@@ -42,7 +42,7 @@ export class SdLoadingModal {
             '--sd-loading-modal-width': this.toCssSize(this.width) ?? `${LOADING_MODAL_LAYOUT.minWidth}px`,
             '--sd-loading-modal-height': this.toCssSize(this.height) ?? `${LOADING_MODAL_LAYOUT.minHeight}px`,
         };
-        return (h(Host, { key: '19735a93969986e8af39ae1dbe6b2373936e8304', style: hostStyle }, h("div", { key: 'd82512e430460c47619ce54ceab5961637e43bc0', class: "sd-loading-modal" }, h("div", { key: '265d697fe23e64366ce43ffc489c7c9a62c9a72c', class: "sd-loading-modal__content" }, this.state === 'loading' ? (h("sd-circle-progress", { indeterminate: true })) : (h("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), h("p", { key: '17800ecf73823075c5efb694e244f986c07759be', class: "sd-loading-modal__message" }, this.resolvedMessage), this.useButton && (h("div", { key: '03b7d5599356974df47546e4256bd093a1a3c991', class: "sd-loading-modal__button" }, h("sd-button-v2", { key: '5dc71e51cc524a3dc01d7c020b763117718ec170', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
+        return (h(Host, { key: '8ecd5db2ffde201dd0c7d3c58b1da6b85b5a4116', style: hostStyle }, h("div", { key: '61f79b16b22d5ab4bb4dca03f88568174cfcfb1f', class: "sd-loading-modal" }, h("div", { key: 'bc373cfebab5949bee9c024bd86ca92d8294ff7b', class: "sd-loading-modal__content" }, this.state === 'loading' ? (h("sd-circle-progress", { indeterminate: true })) : (h("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), h("p", { key: 'e9015b9c9813b1968c8ca7991d654761eb3ee9b3', class: "sd-loading-modal__message" }, this.resolvedMessage), this.useButton && (h("div", { key: '4ed941961611fe9533bd2b989c9b68ef6c7ca741', class: "sd-loading-modal__button" }, h("sd-button-v2", { key: '13f4c5ef5ad5285d846716e5dd72d9f2565c08f9', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
     }
     static get is() { return "sd-loading-modal"; }
     static get originalStyleUrls() {

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

@@ -4,10 +4,16 @@ sd-modal-container {
 sd-modal-container .sd-modal-container {
   position: fixed;
   inset: 0;
-  z-index: var(--sd-modal-container-z-index, 9999);
+  z-index: var(--sd-modal-container-z-index, 997);
+  pointer-events: none;
+}
+sd-modal-container .sd-modal-container__layer {
+  position: absolute;
+  inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
+  pointer-events: none;
 }
 sd-modal-container .sd-modal-container__backdrop {
   position: absolute;
@@ -15,23 +21,18 @@ sd-modal-container .sd-modal-container__backdrop {
   background: rgba(0, 0, 0, 0.4);
   opacity: 0;
   transition: opacity 0.3s ease-out;
+  pointer-events: none;
 }
 sd-modal-container .sd-modal-container__backdrop--visible {
   opacity: 1;
+  pointer-events: auto;
 }
-sd-modal-container .sd-modal-container__content {
+sd-modal-container .sd-modal-container__modal {
   position: relative;
   z-index: 1;
-  display: grid;
-  place-items: center;
-}
-sd-modal-container .sd-modal-container__content > * {
-  grid-row: 1;
-  grid-column: 1;
-}
-sd-modal-container .sd-modal-container__modal {
   opacity: 0;
   transform: scale(0);
+  pointer-events: auto;
   transition: opacity 0.3s ease-out, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 sd-modal-container .sd-modal-container__modal--visible {