@sellmate/design-system 1.0.21 → 1.0.23

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

@@ -11,25 +11,31 @@ export class SdPortal {
     wrapper;
     rafId;
     isInsideClick = false;
+    handleObservedScroll = () => this.updatePosition();
     resizeObserver;
     mutationObserver;
+    scrollParents = [];
+    isObserved = false;
+    handleOpenChange() {
+        this.syncPortalState();
+    }
     componentDidLoad() {
         this.container = this.resolveContainer();
-        this.createWrapper();
-        this.moveSlotContent();
-        this.updatePosition();
-        this.observeParent();
+        this.syncPortalState();
     }
     componentDidRender() {
-        if (!this.wrapper)
-            return;
-        this.wrapper.style.display = this.open ? 'block' : 'none';
-        if (this.open)
-            this.updatePosition();
+        this.syncPortalState();
     }
     disconnectedCallback() {
         this.unobserveParent();
-        this.wrapper?.remove();
+        if (this.wrapper?.parentNode) {
+            try {
+                this.wrapper.parentNode.removeChild(this.wrapper);
+            }
+            catch {
+                // Stencil spec mock DOM can already detach the wrapper before this callback runs.
+            }
+        }
     }
     resolveContainer() {
         const el = typeof this.to === 'string' ? document.querySelector(this.to) : this.to;
@@ -44,6 +50,26 @@ export class SdPortal {
         });
         this.container.appendChild(this.wrapper);
     }
+    ensureWrapper() {
+        if (this.wrapper)
+            return;
+        this.container ||= this.resolveContainer();
+        this.createWrapper();
+        this.moveSlotContent();
+    }
+    syncPortalState() {
+        if (!this.open) {
+            this.wrapper && (this.wrapper.style.display = 'none');
+            this.unobserveParent();
+            return;
+        }
+        this.ensureWrapper();
+        if (!this.wrapper)
+            return;
+        this.wrapper.style.display = 'block';
+        this.observeParent();
+        this.updatePosition();
+    }
     moveSlotContent() {
         if (!this.wrapper)
             return;
@@ -85,19 +111,57 @@ export class SdPortal {
     }
     // parentRef의 이동 / 크기변경 감지
     observeParent() {
-        if (!this.parentRef)
+        if (!this.parentRef || this.isObserved)
             return;
-        this.resizeObserver = new ResizeObserver(() => this.updatePosition());
-        this.resizeObserver.observe(this.parentRef);
-        this.mutationObserver = new MutationObserver(() => this.updatePosition());
-        this.mutationObserver.observe(document.body, {
-            childList: true,
-            subtree: true,
-        });
+        this.observeScrollParents(this.parentRef);
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver(() => this.updatePosition());
+            this.resizeObserver.observe(this.parentRef);
+        }
+        if (typeof MutationObserver !== 'undefined') {
+            this.mutationObserver = new MutationObserver(() => this.updatePosition());
+            this.mutationObserver.observe(document.body, {
+                childList: true,
+                subtree: true,
+            });
+        }
+        this.isObserved = true;
     }
     unobserveParent() {
+        if (!this.isObserved)
+            return;
+        this.unobserveScrollParents();
         this.resizeObserver?.disconnect();
+        this.resizeObserver = undefined;
         this.mutationObserver?.disconnect();
+        this.mutationObserver = undefined;
+        this.isObserved = false;
+    }
+    observeScrollParents(element) {
+        const nextScrollParents = this.getScrollParents(element);
+        nextScrollParents.forEach(parent => {
+            parent.addEventListener('scroll', this.handleObservedScroll, { passive: true });
+        });
+        this.scrollParents = nextScrollParents;
+    }
+    unobserveScrollParents() {
+        this.scrollParents.forEach(parent => {
+            parent.removeEventListener('scroll', this.handleObservedScroll);
+        });
+        this.scrollParents = [];
+    }
+    getScrollParents(element) {
+        const scrollParents = [];
+        let currentElement = element.parentElement;
+        while (currentElement) {
+            const { overflow, overflowX, overflowY } = getComputedStyle(currentElement);
+            const isScrollable = [overflow, overflowX, overflowY].some(value => /(auto|scroll|overlay)/.test(value));
+            if (isScrollable) {
+                scrollParents.push(currentElement);
+            }
+            currentElement = currentElement.parentElement;
+        }
+        return scrollParents;
     }
     // 외부 클릭 감지
     handleMouseDown(e) {
@@ -113,7 +177,7 @@ export class SdPortal {
         this.close.emit();
     }
     render() {
-        return h("slot", { key: 'ba2bf5df16f9bef0acef1ac8a08b090a23d02bc7' });
+        return h("slot", { key: 'ceaa6bed28e3b1bd1a539091434fd7acee6a0e4b' });
     }
     static get is() { return "sd-portal"; }
     static get properties() {
@@ -245,6 +309,12 @@ export class SdPortal {
             }];
     }
     static get elementRef() { return "hostEl"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "handleOpenChange"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "scroll",

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

@@ -33,10 +33,10 @@ export class SdProgress {
         return this.statusColor[this.progressStatus];
     }
     render() {
-        return (h("div", { key: '43da9dac67e760bfe53b8db11c27eef7ef0d8b3b', style: {
+        return (h("div", { key: 'a9b7c4a0bb44f7455ea21f632d3ec8edbcc97522', style: {
                 '--progress-color': this.progressColor,
                 '--progress-percentage': `${this.progressPercentage}%`,
-            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: 'af4b1c44f655546fede8ad548bddc6afb7810d2b', class: "sd-progress__label" }, this.label)));
+            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: 'ff0dfde8b43315883d2e4f17aa5e426fb6bf54ee', class: "sd-progress__label" }, this.label)));
     }
     renderBarProgress() {
         return (h("div", { class: `sd-progress__bar sd-progress__bar--${this.progressStatus}` }, h("div", { class: ['sd-progress__bar__percent', this.progressPercentage < 100 ? 'proceed' : ''].join(' ') }), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--left" }, this.progressPercentage, "%"), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--right" }, this.progressPercentage, "%")));

package/dist/collection/components/sd-select/sd-select-dropdown/sd-select-dropdown.js

@@ -144,10 +144,10 @@ export class SdSelectDropdown {
         this.isScrolled = scrollTop > 0;
     };
     render() {
-        return (h("div", { key: 'ff55e2e133114accc2641a0025bdcf551eda3511', class: {
+        return (h("div", { key: '5e56cf091a3c3d510bf932933c33a8c3d85e23ef', class: {
                 'sd-select-dropdown': true,
                 'sd-select-dropdown--ready': this.isDropdownReady,
-            }, style: this.dropdownSize, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (h("sd-select-search-input", { key: 'bfcee14aa06a9a259dd8e67013ed1074c1f9c318', ref: el => (this.searchRef = el), isScrolled: this.isScrolled, searchText: this.searchText, onSdSearchInput: (event) => (this.searchText = event.detail || ''), onSdSearchFocus: () => (this.itemIndex = -1) })), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (h("slot", { name: `option-${option.value}` }, h("sd-select-option", { option: option, index: index, isSelected: this.isOptionSelected(option.value), isFocused: index === this.itemIndex, onOptionClick: ({ detail }) => this.optionClick.emit(detail), useCheckbox: this.useCheckbox }))))) : (h("slot", { name: "option-placeholder" }, h("div", { class: 'sd-select-option-placeholder' }, this.optionPlaceholder)))));
+            }, style: this.dropdownSize, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (h("sd-select-search-input", { key: 'd965a2a5f31507fb6dca30968edf6334d42b4160', ref: el => (this.searchRef = el), isScrolled: this.isScrolled, searchText: this.searchText, onSdSearchInput: (event) => (this.searchText = event.detail || ''), onSdSearchFocus: () => (this.itemIndex = -1) })), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (h("slot", { name: `option-${option.value}` }, h("sd-select-option", { option: option, index: index, isSelected: this.isOptionSelected(option.value), isFocused: index === this.itemIndex, onOptionClick: ({ detail }) => this.optionClick.emit(detail), useCheckbox: this.useCheckbox }))))) : (h("slot", { name: "option-placeholder" }, h("div", { class: 'sd-select-option-placeholder' }, this.optionPlaceholder)))));
     }
     static get is() { return "sd-select-dropdown"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-select/sd-select-option/sd-select-option.js

@@ -24,7 +24,7 @@ export class SdSelectOption {
         }
     };
     render() {
-        return (h("div", { key: 'a4fcca24b0bdde4f4665585c6cede84bd3b64d59', class: {
+        return (h("div", { key: '2f88e7ffe5bce12bc3f352d47d0ebed51a1c69ac', class: {
                 'sd-select__option': true,
                 'sd-select__option--selected': this.isSelected,
                 'sd-select__option--disabled': !!this.option.disabled,

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

@@ -16,17 +16,17 @@ export class SdSelectSearchInput {
         input?.focus({ preventScroll: true });
     }
     render() {
-        return (h("div", { key: 'b19a029ef82d876c984c1f827d7a0f29bb823f5d', class: {
+        return (h("div", { key: 'da5faa18fac3c974dcfef4050efe580edcb1bb42', class: {
                 'sd-select-search-input': true,
                 'sd-select-search-input--scrolled': !!this.isScrolled,
-            }, onClick: event => event.stopPropagation() }, h("sd-input", { key: '8e27f40e1b507f0c5cb2d4bde48750cd0089a9da', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdUpdate: event => {
+            }, onClick: event => event.stopPropagation() }, h("sd-input", { key: 'c469ef89d7600626b19ecd94416849825736ff9f', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdUpdate: event => {
                 this.searchInput.emit(String(event?.detail));
             }, onSdFocus: () => {
                 this.searchFocus.emit();
             }, onKeyDown: event => {
                 if (event.code === 'Enter')
                     event.stopPropagation();
-            } }, h("sd-icon", { key: '2b38a07cbc0bb0d7dd020ece45f18bdff4c262e5', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
+            } }, h("sd-icon", { key: '478a6adda3b53aabf614028bd57a8f987f93cdb6', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
     }
     static get is() { return "sd-select-search-input"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-select-multiple/sd-select-multiple.js

@@ -145,7 +145,7 @@ export class SdSelectMultiple extends BaseDropdownEvent {
         this.handleOptionSelection(option);
     };
     render() {
-        return (h("sd-field", { key: 'e445d2c3f80d78be0e74b1f54371eb27d9c316e8', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, h("div", { key: '9fad0ed744cafb9e1e5f16ee413f36edd8f2c1f3', class: {
+        return (h("sd-field", { key: '9395a273b4205854e6fd7e96f26f93c201e6e959', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, h("div", { key: '451758e8c90b79e7ddb3b35226d28ee4a43a3832', class: {
                 'sd-select-multiple': true,
                 'sd-select-multiple--open': this.isOpen,
                 'sd-select-multiple--disabled': this.disabled,

package/dist/collection/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.js

@@ -39,7 +39,7 @@ export class SdSelectOptionGroup {
         }
     };
     render() {
-        return (h("div", { key: '8e88aacd2c3122a563fcf78bcbe9731b6a29d8c5', class: {
+        return (h("div", { key: '7581caff61d1257d653b6f58b8d76c21225b3cc5', class: {
                 'sd-select__option-group': true,
                 'sd-select__option-group--selected': !!this.isSelected,
                 'sd-select__option-group--disabled': !!this.option.disabled,
@@ -48,10 +48,10 @@ export class SdSelectOptionGroup {
                 'sd-select__option-group--group': this.option.type === 'group',
                 'sd-select__option-group--subgroup': this.option.type === 'subgroup',
                 'sd-select__option-group--item': this.option.type === 'item',
-            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, h("div", { key: 'be4bc7f2867ea5c86505bc9284ac3de46f7077f9', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: '00063ab3a6f1d4f44671ac82dd05524968bec668', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
+            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, h("div", { key: 'ddb33f6afaa6bc6d6dd3dc494f6ec74b9c023a42', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: '14f2c7fc347718d2909e5006bf2500a9a51b0a66', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
                 e.preventDefault();
                 this.handleClick(this.option, this.isSelected, e);
-            } })), h("span", { key: '802c908d44bf1c0db5d64bf4c8d4bab4ebe2b87c', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: 'efd26a2d6e4e2662410de3755b70a2a2585ad0c4', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
+            } })), h("span", { key: '99415ed662cc2f8f29d31e3811eb4496f8fcac47', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: 'a3c7dc6455a94ecd4587f8b13b4d1f10e3b58819', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
     }
     static get is() { return "sd-select-option-group"; }
     static get originalStyleUrls() {

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

@@ -35,16 +35,14 @@ export class SdTabs {
         }
         return classes.join(' ');
     }
-    getBadgeColors(tab) {
-        if (this.isTabSelected(tab)) {
-            return { bgColor: '#E6F1FF', textColor: '#0075FF' };
-        }
-        return { bgColor: '#E5E5E5', textColor: '#737373' };
+    getBadgeName(tab) {
+        const color = this.isTabSelected(tab) ? 'blue' : 'grey';
+        return `square_${this.size}_${color}`;
     }
     render() {
-        return (h("div", { key: '1b63c97e7b40d35ceadcc07da1087ee54d3c5f8f', class: this.getContainerClasses() }, this.tabs.map((tab, index) => {
-            const badgeColors = this.getBadgeColors(tab);
-            return (h("div", { key: `tab-${index}`, class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab.value) }, h("span", { "data-label": tab.label, class: "sd-tabs__label" }, tab.label), tab.badge && (h("sd-tag", { size: this.size, label: tab.badge.toString(), bgColor: badgeColors.bgColor, textColor: badgeColors.textColor, rounded: false }))));
+        return (h("div", { key: 'bc86d4c1775bed6c2d323c9446e2c50631afed7c', class: this.getContainerClasses() }, this.tabs.map((tab, index) => {
+            const badgeName = this.getBadgeName(tab);
+            return (h("div", { key: `tab-${index}`, class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab.value) }, h("span", { "data-label": tab.label, class: "sd-tabs__label" }, tab.label), tab.badge && (h("sd-tag", { name: badgeName, label: tab.badge.toString() }))));
         })));
     }
     static get is() { return "sd-tabs"; }

package/dist/collection/components/sd-tag/sd-tag.config.js

@@ -0,0 +1,70 @@
+export const TAG_SHAPES = ['square', 'pill'];
+export const TAG_SIZES = ['sm', 'md', 'lg'];
+export const TAG_COLORS = [
+    'grey',
+    'red',
+    'orange',
+    'yellow',
+    'green',
+    'blue',
+    'darkblue',
+    'indigo',
+];
+const TAG_COLOR_CONFIG = {
+    grey: { background: '#EEEEEE', content: '#737373', icon: '#737373' },
+    red: { background: '#FCEFEF', content: '#FB4444', icon: '#FB4444' },
+    orange: { background: '#FEF1EA', content: '#FF6B00', icon: '#FF6B00' },
+    yellow: { background: '#FFF7DD', content: '#916C0D', icon: '#CA9611' },
+    green: { background: '#E8F9EF', content: '#00973C', icon: '#12B553' },
+    blue: { background: '#E6F1FF', content: '#0075FF', icon: '#0075FF' },
+    darkblue: { background: '#EAF5FE', content: '#006AC1', icon: '#006AC1' },
+    indigo: { background: '#EFF6FF', content: '#004290', icon: '#004290' },
+};
+const SQUARE_SIZE_CONFIG = {
+    sm: {
+        height: '20px',
+        paddingX: '6px',
+        gap: '4px',
+        fontSize: '11px',
+        fontWeight: '500',
+        iconSize: 12,
+        radius: '4px',
+    },
+    md: {
+        height: '24px',
+        paddingX: '8px',
+        gap: '4px',
+        fontSize: '12px',
+        fontWeight: '700',
+        iconSize: 16,
+        radius: '4px',
+    },
+    lg: {
+        height: '28px',
+        paddingX: '10px',
+        gap: '4px',
+        fontSize: '14px',
+        fontWeight: '700',
+        iconSize: 16,
+        radius: '5px',
+    },
+};
+const PILL_SIZE_CONFIG = {
+    sm: { ...SQUARE_SIZE_CONFIG.sm, radius: '999px' },
+    md: { ...SQUARE_SIZE_CONFIG.md, radius: '999px' },
+    lg: { ...SQUARE_SIZE_CONFIG.lg, radius: '999px' },
+};
+export const TAG_CONFIG = Object.fromEntries(TAG_SHAPES.flatMap(shape => TAG_SIZES.flatMap(size => TAG_COLORS.map(color => {
+    const sizeConfig = shape === 'square' ? SQUARE_SIZE_CONFIG[size] : PILL_SIZE_CONFIG[size];
+    return [
+        `${shape}_${size}_${color}`,
+        {
+            shape,
+            size,
+            color,
+            ...sizeConfig,
+            ...TAG_COLOR_CONFIG[color],
+        },
+    ];
+}))));
+export const isTagName = (value) => Object.prototype.hasOwnProperty.call(TAG_CONFIG, value);

package/dist/collection/components/sd-tag/sd-tag.css

@@ -1,68 +1,38 @@
-:host {
-  display: inline-block;
-}
-
-:host([full-width]) {
-  display: block;
+sd-tag {
+  display: inline-flex;
+  width: fit-content;
+  height: fit-content;
 }
 
 .sd-tag {
   display: inline-flex;
-  width: 100%;
   align-items: center;
   justify-content: center;
-  gap: 8px;
-  text-decoration: none;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  transition: all 0.2s ease-in-out;
-  position: relative;
-  overflow: hidden;
+  gap: var(--sd-tag-gap, 5px);
+  min-height: var(--sd-tag-height, 24px);
+  padding: 0 var(--sd-tag-padding-x, 8px);
+  border-radius: var(--sd-tag-radius, 4px);
+  background: var(--sd-tag-background, #f3f3f3);
+  color: var(--sd-tag-content, #7a7a7a);
+  box-sizing: border-box;
   white-space: nowrap;
   -webkit-user-select: none;
   user-select: none;
-  box-sizing: border-box;
-}
-.sd-tag__content {
-  display: inline-block;
-  width: 100%;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-.sd-tag--custom-color {
-  background: var(--tag-bg-color);
-  color: var(--tag-text-color);
-}
-.sd-tag--sm {
-  padding: 0 6px;
-  font-size: 11px;
-  line-height: 18px;
-  height: 20px;
-  border-radius: 4px;
-}
-.sd-tag--md {
-  padding: 0 8px;
-  font-size: 12px;
-  font-weight: 700;
-  line-height: 20px;
-  height: 24px;
-  border-radius: 4px;
 }
-.sd-tag--lg {
-  padding: 0 10px;
-  font-size: 14px;
-  font-weight: 700;
-  line-height: 24px;
-  min-height: 28px;
-  border-radius: 5px;
-}
-.sd-tag--rounded.sd-tag--sm {
-  border-radius: 20px;
-}
-.sd-tag--rounded.sd-tag--md {
-  border-radius: 20px;
+
+.sd-tag__icon {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
 }
-.sd-tag--rounded.sd-tag--lg {
-  border-radius: 15px;
+
+.sd-tag__label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  font-size: var(--sd-tag-font-size, 12px);
+  font-weight: var(--sd-tag-font-weight, 700);
+  line-height: 1;
 }