@sellmate/design-system 1.0.40 → 1.0.42

package/dist/cjs/sd-select-v2.cjs.entry.js

@@ -81,11 +81,6 @@ const SdSelectV2 = class {
     flattenOptions(options) {
         return options.flatMap(o => (o.children ? this.flattenOptions(o.children) : [o]));
     }
-    collectLeaves(option) {
-        if (!option.children)
-            return [option];
-        return option.children.flatMap(child => this.collectLeaves(child));
-    }
     getSelectedOptions() {
         const val = this.value;
         if (!val || !Array.isArray(val))
@@ -165,9 +160,10 @@ const SdSelectV2 = class {
     emitUpdate(value) {
         this.update.emit(value);
     }
-    handleOptionSelect = (option) => {
+    handleOptionSelect = (detail) => {
+        const { option, leaves } = detail;
         if (this.isMulti) {
-            this.handleMultiSelect(option);
+            this.handleMultiSelect(option, leaves);
         }
         else {
             this.closeDropdown();
@@ -178,14 +174,12 @@ const SdSelectV2 = class {
             });
         }
     };
-    handleMultiSelect(option) {
+    handleMultiSelect(option, leaves) {
         const selected = this.getSelectedOptions();
-        if (option.children) {
-            const originalOption = this.findOriginalOption(option.value, this.options);
-            const targetOption = originalOption ?? option;
-            const leaves = this.collectLeaves(targetOption);
+        const isGroup = !!option.children;
+        let newSelected;
+        if (isGroup) {
             const allSelected = leaves.every(l => selected.some(s => s.value === l.value));
-            let newSelected;
             if (allSelected) {
                 const leafValues = new Set(leaves.map(l => l.value));
                 newSelected = selected.filter(s => !leafValues.has(s.value));
@@ -195,17 +189,15 @@ const SdSelectV2 = class {
                 const toAdd = leaves.filter(l => !existing.has(l.value));
                 newSelected = [...selected, ...toAdd];
             }
-            this.value = this.toMultiValue(newSelected);
-            this.emitUpdate(this.value);
         }
         else {
             const exists = selected.some(s => s.value === option.value);
-            const newSelected = exists
+            newSelected = exists
                 ? selected.filter(s => s.value !== option.value)
                 : [...selected, option];
-            this.value = this.toMultiValue(newSelected);
-            this.emitUpdate(this.value);
         }
+        this.value = this.toMultiValue(newSelected);
+        this.emitUpdate(this.value);
     }
     connectedCallback() {
         window.addEventListener('resize', this.handleViewportResize);
@@ -224,13 +216,13 @@ const SdSelectV2 = class {
                 this.closeDropdown();
             },
         };
-        return (index.h("sd-field", { key: '9a3a1bd2836d61ffadbe6b256907e060bc2552a6', name: this.fieldName || this.internalName, label: this.label, 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, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
+        return (index.h("sd-field", { key: 'd9659682ab2e8b46fe24491149b8bc3c19d169c2', name: this.fieldName || this.internalName, label: this.label, 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, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
                 this.hovered = true;
             }, onMouseLeave: () => {
                 this.hovered = false;
-            } }, index.h("div", { key: '70fcf772f6c38b8f310ccbb20004c80cab4481a9', class: "sd-select-v2", ref: el => {
+            } }, index.h("div", { key: '75a27f70ba737748900efd4a68f8b3885b183f27', class: "sd-select-v2", ref: el => {
                 this.triggerRef = el;
-            } }, index.h("sd-select-v2-trigger", { key: 'aef3433f65f6dae8205f8913ac2236aebb8a8013', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: '58e8050281036e4aef645271cc2384f6ba4e50be', ...portalProps }, index.h("sd-select-v2-listbox", { key: 'ae2d57b4118aae66bd1d0d6090aebb25f773cd58', name: this.name, options: this.options, value: this.value, emitValue: this.emitValue, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
+            } }, index.h("sd-select-v2-trigger", { key: 'e639279afd63ec5addbaccd76bf9c73ec3a3da7d', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: '3df82f58ba7bf599694ab1ce6ae7ef1ec3fb6035', ...portalProps }, index.h("sd-select-v2-listbox", { key: 'a1afe865d25f3afd39e28011dbb036f74604b76f', name: this.name, options: this.options, value: this.value, emitValue: this.emitValue, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
     }
     static get watchers() { return {
         "isOpen": [{

package/dist/cjs/{sd-select-v2.config-DZrPJ6OS.js → sd-select-v2.config-BJXi4hMP.js}

@@ -137,17 +137,22 @@ function filterTree(options, keyword) {
     const lowerKeyword = keyword.toLowerCase();
     return options.reduce((acc, option) => {
         const selfMatch = option.label.toLowerCase().includes(lowerKeyword);
-        if (selfMatch) {
-            acc.push({
-                ...option,
-                children: option.children ? [] : undefined,
-            });
-        }
-        else if (option.children) {
+        if (option.children) {
+            // 그룹: 자식은 항상 추가로 필터링한다.
+            // - 자식 중 일치하는 게 있으면 그 자식들만 노출
+            // - 자식 매칭이 없더라도 그룹명이 매칭되면 그룹 헤더는 그대로 노출
+            //   (이때 children 은 빈 배열로 두고, 선택 동작은 collectVisibleLeaves
+            //    의 fallback 이 원본 트리를 사용해 처리한다)
             const filteredChildren = filterTree(option.children, keyword);
             if (filteredChildren.length > 0) {
                 acc.push({ ...option, children: filteredChildren });
             }
+            else if (selfMatch) {
+                acc.push({ ...option, children: [] });
+            }
+        }
+        else if (selfMatch) {
+            acc.push({ ...option });
         }
         return acc;
     }, []);

package/dist/cjs/sd-text-link.cjs.entry.js

@@ -82,16 +82,16 @@ const SdTextLink = class {
             '--sd-text-link-text-decoration': typo.textDecoration,
             '--sd-text-link-color': contentColor,
         };
-        return (index.h("span", { key: '85a81d70f93ced4c094baa972dd4691c5659f341', class: {
+        return (index.h("span", { key: '3345bf7ddd99b9eeca4e8e6014f88e5f4505665e', class: {
                 'sd-text-link': true,
                 'sd-text-link--disabled': this.disabled,
-            }, style: cssVars, onClick: this.handleClick }, this.icon && (index.h("sd-icon", { key: 'e9350162c38383610feca59f47a087452e586642', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), index.h("span", { key: '011b7f22e5fe897548b31d883b1c8dc1accab2c9', class: "sd-text-link__label" }, this.label), this.useArrow && (index.h("span", { key: '578d8532cf1c296a48e27c865f32052494cae5e3', class: "sd-text-link__arrow", style: {
+            }, style: cssVars, onClick: this.handleClick }, this.icon && (index.h("sd-icon", { key: 'e8f1cf6482745bce5856988d5e30702d807335db', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), index.h("span", { key: '09293467bc7289dd587a5ed0fc4b2cedbc1d925a', class: "sd-text-link__label" }, this.label), this.useArrow && (index.h("span", { key: '10330d4acc1e323997804146629e3397605b9d58', class: "sd-text-link__arrow", style: {
                 width: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
                 height: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
                 display: 'inline-flex',
                 alignItems: 'center',
                 justifyContent: 'center',
-            } }, index.h("sd-icon", { key: '33293275c5a68628298af50dafeeb22a544e9469', name: "arrowRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
+            } }, index.h("sd-icon", { key: '01def7dd04278fce78f9eb49efd857999fa255db', name: "arrowRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
     }
 };
 SdTextLink.style = sdTextLinkCss();

package/dist/cjs/sd-toast-container.cjs.entry.js

@@ -234,7 +234,7 @@ const SdToastContainer = class {
         const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
         const indexMap = new Map();
         activeToasts.forEach((t, i) => indexMap.set(t.id, i));
-        return (index.h("div", { key: 'd4bb037ee2e46d4f32e45a7d0cdde98a61634a5c', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (index.h("div", { key: 'ea70acd97b25230c2c2ae74504381fe00d458043', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
                 this.expanded = true;
                 this.pauseTimers();
             }, onMouseLeave: () => {

package/dist/cjs/sd-toast.cjs.entry.js

@@ -57,10 +57,10 @@ const SdToast = class {
     render() {
         const typeConfig = TOAST_TYPE_CONFIG[this.type] ?? TOAST_TYPE_CONFIG.default;
         const iconSize = Number(TOAST_LAYOUT.iconSize);
-        return (index.h("div", { key: 'a557c0c6b78e07eeec74dd14aa86507a8b9f37ae', style: {
+        return (index.h("div", { key: 'd8e1a82c9daebbe6b262bedcecd3fcdb5d9cdff6', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
-            } }, index.h("div", { key: '027041528a39f35035c2ced8b1aa2e20e48a82bc', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: '324df178ebcae7cf429c356bc8866e03b02a5ebc', class: "sd-toast__icon" }, index.h("sd-icon", { key: '62b9b6f38ed3b62e01a71388295aa6e73eb9b934', name: this.icon, size: iconSize, color: typeConfig.content }))), index.h("div", { key: '475d4b8f5021b1d7661138abd97288697fe332c3', class: "sd-toast__content" }, index.h("span", { key: '1b7469e1f46a576cc4f8ef6d363080f020ec2c70', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: '3a6ed7ff07d2fb50c8178d3260ed6ef50bf0a4c8', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (index.h("button", { key: 'f05e512d165a54cb14b716548b4677321e32478a', type: "button", class: "sd-toast__close", onClick: () => this.close.emit(), "aria-label": "Close", title: "Close" }, index.h("sd-icon", { key: 'd914147a9a74287878597579f94dda8ddd453cf7', name: "close", size: iconSize, color: typeConfig.content }))))));
+            } }, index.h("div", { key: 'ef1c9243616c34947bd03a8de734b28fd7d32bd4', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: 'ef4ff52c084175eb34f1e88b69258b72966af947', class: "sd-toast__icon" }, index.h("sd-icon", { key: '7c8f49358fb158807f09855c169ec99f3dcd9469', name: this.icon, size: iconSize, color: typeConfig.content }))), index.h("div", { key: 'b229d53142ab92037b8c409da478305bba954710', class: "sd-toast__content" }, index.h("span", { key: '1c623880c6e6e7d5d5a0fbaab980774cc494ab82', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: '9ff007a2436fd16519e22f024486a40a3c9f6ff9', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (index.h("button", { key: '4b2371414437c7f3c9c70ec3b44879d0b6bbc212', type: "button", class: "sd-toast__close", onClick: () => this.close.emit(), "aria-label": "Close", title: "Close" }, index.h("sd-icon", { key: '3aed44c8b9bf783445cb49d4fc513b086f5fc428', name: "close", size: iconSize, color: typeConfig.content }))))));
     }
 };
 SdToast.style = sdToastCss();

package/dist/cjs/sd-toggle-button.cjs.entry.js

@@ -41,7 +41,7 @@ const SdToggleButton = class {
         this.change.emit(newValue);
     };
     render() {
-        return (index.h("label", { key: 'd1570ff6c0a69dfa6ba4bd135328d93641ca6483', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, index.h("input", { key: '53224a02ab3cd75dc0685c0f11616dcfe714285a', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (index.h("label", { key: 'c8e3adb9201066f7e39ff49df97e80cd4a716345', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, index.h("input", { key: '8fb523287f4d593a455a2366632797098401398e', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
 };
 SdToggleButton.style = sdToggleButtonCss();

package/dist/cjs/sd-toggle.cjs.entry.js

@@ -37,7 +37,7 @@ const SdToggle = class {
         this.change.emit(newValue);
     };
     render() {
-        return (index.h("label", { key: '820b6e47f94d777c0540871ea1ea0b400bbd26de', "aria-label": this.label || 'toggle', class: this.toggleClasses }, index.h("input", { key: '880fd48071d635ca229c073ee3f3b60212c00a68', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && index.h("span", { key: 'c3b8652c7347b2703d4725f543c9faa7e4143d6b', class: "sd-toggle__label" }, this.label), index.h("div", { key: '90ea67512ab0b1e6d44f02a4d12d0f4fb44b850b', class: "sd-toggle__track" }, index.h("div", { key: 'ffc0074e1f3e683cc324537957235f0bf4b80c40', class: "sd-toggle__thumb" }))));
+        return (index.h("label", { key: '60d9d2c1feca4256b7a279bc64e52da8e9f81995', "aria-label": this.label || 'toggle', class: this.toggleClasses }, index.h("input", { key: 'd25f6af7f9c6ea95e423a39ff44c394ad9624fe6', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && index.h("span", { key: '52383a1ca0f17666fdc386beed30512e7349b470', class: "sd-toggle__label" }, this.label), index.h("div", { key: '32c76872e30e2d8b1b06e096c394ee1d3dfc4381', class: "sd-toggle__track" }, index.h("div", { key: '0ec405309e322492ed7af4e0ddf115da87d03150', class: "sd-toggle__thumb" }))));
     }
 };
 SdToggle.style = sdToggleCss();

package/dist/collection/collection-manifest.json

@@ -13,6 +13,7 @@
     "components/sd-table/sd-table.js",
     "components/sd-tabs/sd-tabs.js",
     "components/sd-badge/sd-badge.js",
+    "components/sd-barcode-input/sd-barcode-input.js",
     "components/sd-button-v2/sd-button-v2.js",
     "components/sd-card/sd-card.js",
     "components/sd-confirm-modal/sd-confirm-modal.js",
@@ -28,7 +29,6 @@
     "components/sd-input/sd-input.js",
     "components/sd-loading-spinner/sd-loading-spinner.js",
     "components/sd-modal-container/sd-modal-container.js",
-    "components/sd-notice-modal/sd-notice-modal.js",
     "components/sd-number-input/sd-number-input.js",
     "components/sd-pagination/sd-pagination.js",
     "components/sd-popover/sd-popover.js",

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

@@ -0,0 +1,34 @@
+import inputTokens from "../../tokens/generated/component.textinput.json";
+import systemTokens from "../../tokens/generated/system.json";
+const sm = inputTokens.input.sm;
+const md = inputTokens.input.md;
+export const BARCODE_INPUT_SIZE_MAP = {
+    sm: {
+        height: sm.height,
+        paddingX: sm.paddingX,
+        gap: sm.gap,
+        radius: sm.radius,
+        fontSize: sm.typography.fontSize,
+        lineHeight: sm.typography.lineHeight,
+        fontWeight: sm.typography.fontWeight,
+    },
+    md: {
+        height: md.height,
+        paddingX: md.paddingX,
+        gap: md.gap,
+        radius: md.radius,
+        fontSize: md.typography.fontSize,
+        lineHeight: md.typography.lineHeight,
+        fontWeight: md.typography.fontWeight,
+    },
+};
+export const BARCODE_INPUT_COLORS = {
+    border: inputTokens.input.border,
+    bg: inputTokens.input.bg,
+    text: inputTokens.input.text,
+    icon: inputTokens.input.icon,
+};
+export const BARCODE_INPUT_ICON = {
+    frameSize: Number(inputTokens.input.size.icon),
+    iconSize: Number(systemTokens.size.field.icon),
+};

package/dist/collection/components/sd-barcode-input/sd-barcode-input.css

@@ -0,0 +1,72 @@
+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);
+}
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+  -webkit-text-fill-color: #000;
+  -webkit-box-shadow: 0 0 0px 1000px #FAFAA1 inset;
+  box-shadow: 0 0 0px 1000px #FAFAA1 inset;
+  transition: background-color 5000s ease-in-out 0s;
+}
+
+input:autofill,
+input:autofill:hover,
+input:autofill:focus,
+input:autofill:active {
+  -webkit-text-fill-color: #000;
+  -webkit-box-shadow: 0 0 0px 1000px #FAFAA1 inset;
+  box-shadow: 0 0 0px 1000px #FAFAA1 inset;
+  transition: background-color 5000s ease-in-out 0s;
+}
+
+sd-barcode-input {
+  display: inline-flex;
+}
+sd-barcode-input .sd-barcode-input__content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  color: var(--sd-barcode-input-text-color);
+  font-size: var(--sd-barcode-input-font-size);
+  line-height: var(--sd-barcode-input-line-height);
+  font-weight: var(--sd-barcode-input-font-weight);
+  padding: 0 var(--sd-barcode-input-padding-x);
+  gap: var(--sd-barcode-input-gap);
+}
+sd-barcode-input .sd-barcode-input__content .sd-barcode-input__native {
+  width: 100%;
+  height: 100%;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: inherit;
+  line-height: inherit;
+  font-weight: inherit;
+  color: inherit;
+}
+sd-barcode-input .sd-barcode-input__content .sd-barcode-input__native[disabled] {
+  cursor: not-allowed;
+  color: var(--sd-barcode-input-disabled-color);
+}
+sd-barcode-input .sd-barcode-input__content .sd-barcode-input__native::placeholder {
+  color: var(--sd-barcode-input-placeholder-color);
+}
+sd-barcode-input .sd-barcode-input__content .sd-barcode-input__clear-icon {
+  flex-shrink: 0;
+  cursor: pointer;
+}