@sellmate/design-system 0.0.31 → 0.0.32

package/hydrate/index.js

@@ -5440,7 +5440,7 @@ class SdPortal {
     }; }
 }
 
-const sdProgressCss = "sd-progress{display:block}sd-progress .sd-progress__bar{position:relative;width:360px;height:20px;overflow:hidden;border-radius:4px;background-color:#eeeeee;text-align:center}sd-progress .sd-progress__bar__percent{width:var(--progress-percentage);height:100%;border-radius:4px;background-color:var(--progress-color, #0075ff);transition:all 0.5s}sd-progress .sd-progress__bar__percent.proceed{border-top-right-radius:50%}sd-progress .sd-progress__bar__indicator{position:absolute;left:0;top:0;height:20px;width:100%;background-color:#eeeeee;line-height:21px;z-index:1}sd-progress .sd-progress__bar__indicator--left{color:var(--progress-color, #0075ff);clip-path:inset(0 0 0 var(--progress-percentage))}sd-progress .sd-progress__bar__indicator--right{color:white;background-color:var(--progress-color, #0075ff);clip-path:inset(0 calc(100% - var(--progress-percentage)) 0 0)}sd-progress .sd-progress__spinner{display:flex;flex-direction:column;align-items:center;justify-content:center}sd-progress .sd-progress__spinner svg{transform:rotate(-90deg)}sd-progress .sd-progress__spinner__label{margin-top:4px;font-size:16px;color:var(--progress-color, #0075ff)}sd-progress .sd-progress__label{margin-top:4px;font-size:12px;color:#222222;text-align:center}";
+const sdProgressCss = "sd-progress{display:block}sd-progress .sd-progress__bar{position:relative;width:360px;height:20px;overflow:hidden;border-radius:4px;background-color:#eeeeee;text-align:center}sd-progress .sd-progress__bar__percent{width:var(--progress-percentage);height:100%;border-radius:4px;background-color:var(--progress-color, #0075ff);transition:all 0.5s}sd-progress .sd-progress__bar__percent.proceed{border-top-right-radius:50%}sd-progress .sd-progress__bar__indicator{position:absolute;left:0;top:0;height:20px;width:100%;background-color:#eeeeee;line-height:21px;z-index:1}sd-progress .sd-progress__bar__indicator--left{color:var(--progress-color, #0075ff);clip-path:inset(0 0 0 var(--progress-percentage))}sd-progress .sd-progress__bar__indicator--right{color:white;background-color:var(--progress-color, #0075ff);clip-path:inset(0 calc(100% - var(--progress-percentage)) 0 0)}sd-progress .sd-progress__spinner{display:flex;flex-direction:column;align-items:center;justify-content:center}sd-progress .sd-progress__spinner svg{transform:rotate(-90deg)}sd-progress .sd-progress__spinner__label{margin-top:8px;font-size:16px;color:var(--progress-color, #0075ff)}sd-progress .sd-progress__label{margin-top:4px;font-size:12px;color:#222222;text-align:center}";
 
 class SdProgress {
     constructor(hostRef) {
@@ -5809,11 +5809,11 @@ class SdSelect extends BaseDropdownEvent {
             '--select-width': this.width || '200px',
             '--select-dropdown-height': this.dropdownHeight || '260px',
         };
-        return (hAsync(Host, { key: '6e627f90abe0ae0a8f955918ccd2513a03b81c7a', style: style }, hAsync("div", { key: 'a0e8e608384d7dd343ba65f34a37d28ebe99cae0', class: {
+        return (hAsync(Host, { key: '51133eafc1c4b8cb79845c3b36abeb933d92bd9d', style: style }, hAsync("div", { key: 'cdd8fb1798088a7ea4e44ce921dcc652a455cc39', class: {
                 'sd-select': true,
                 'sd-select--open': this.isOpen,
                 'sd-select--disabled': this.disabled,
-            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), hAsync("div", { key: 'a313b94c77d3649b35ba47cc29e364e26902d70f', class: "sd-select__container" }, this.renderTrigger(), this.renderDropdown()))));
+            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), hAsync("div", { key: '6e09cfbbb0807cbeff40a7dfe0a9d037a31e58bf', class: "sd-select__container" }, this.renderTrigger(), this.renderDropdown()))));
     }
     renderLabel(label) {
         if (!label)
@@ -6182,6 +6182,7 @@ class SdSelectMultipleGroup extends BaseDropdownEvent {
     clearable = false;
     searchable = false;
     useCheckbox = false;
+    useAll = false;
     // props - custom styles
     containerStyle = {};
     triggerStyle = {};
@@ -6307,6 +6308,16 @@ class SdSelectMultipleGroup extends BaseDropdownEvent {
             this.dropDownShow?.emit({ isOpen: this.isOpen });
         }
     };
+    handleAllOptionClick = (detail) => {
+        if (detail.isSelected) {
+            // 이미 선택된 옵션인 경우, 선택 해제
+            this.value = [];
+        }
+        else {
+            // 새로운 옵션 선택
+            this.value = [...this.filteredOptions.filter(opt => opt.type === 'item' && !opt.disabled)];
+        }
+    };
     handleOptionClick = (detail) => {
         const { option, event } = detail;
         event.stopPropagation();
@@ -6445,6 +6456,19 @@ class SdSelectMultipleGroup extends BaseDropdownEvent {
             totalCount: children.length,
         };
     }
+    isAllOptionsSelected() {
+        const selectedOption = this.getSelectedOption();
+        return (selectedOption.length === this.options.filter(opt => !opt.disabled && opt.type === 'item').length);
+    }
+    getTriggerLabel() {
+        const selectedOption = this.getSelectedOption();
+        if (!selectedOption)
+            return '선택';
+        if (selectedOption.length === 0)
+            return this.placeholder;
+        const isAllChecked = this.isAllOptionsSelected();
+        return isAllChecked ? '전체' : selectedOption.map(option => option.label).join(', ');
+    }
     closeDropdown() {
         this.isOpen = false;
     }
@@ -6472,11 +6496,11 @@ class SdSelectMultipleGroup extends BaseDropdownEvent {
             '--select-width': this.width || '200px',
             '--select-dropdown-height': this.dropdownHeight || '260px',
         };
-        return (hAsync(Host, { key: '25cb748a149def1b633f7e6baf77e55a57c6d43b', style: style }, hAsync("div", { key: '14fabf19488e6370612eb3f29fb97d0077ddb0f0', class: {
+        return (hAsync(Host, { key: '825a5e69af88a908c41c0c82bfb5fed4afeb9f5f', style: style }, hAsync("div", { key: '81827e04db3de7194162594db4d918b37e7bd3a2', class: {
                 'sd-select-multiple-group': true,
                 'sd-select-multiple-group--open': this.isOpen,
                 'sd-select-multiple-group--disabled': this.disabled,
-            }, style: this.containerStyle, ref: el => (this.selectRef = el) }, this.renderLabel(this.label, this.labelStyle), hAsync("div", { key: '4f762e4ab93da2cb1e684d85af9c3abf5f1304e4', class: "sd-select-multiple-group__container" }, this.renderTrigger(), this.renderDropdown()))));
+            }, style: this.containerStyle, ref: el => (this.selectRef = el) }, this.renderLabel(this.label, this.labelStyle), hAsync("div", { key: '23be24a0f971270b3e449cad4f56699f65716fb0', class: "sd-select-multiple-group__container" }, this.renderTrigger(), this.renderDropdown()))));
     }
     renderLabel(label, labelStyle) {
         if (!label)
@@ -6485,11 +6509,7 @@ class SdSelectMultipleGroup extends BaseDropdownEvent {
     }
     renderTrigger() {
         const selectedOption = this.getSelectedOption();
-        return (hAsync("div", { class: "sd-select-multiple-group__trigger", tabindex: this.disabled ? -1 : 0, onClick: this.handleTriggerClick, style: this.triggerStyle }, hAsync("span", { class: "sd-select-multiple-group__value" }, !selectedOption
-            ? '선택'
-            : selectedOption.length
-                ? selectedOption.map(option => option.label).join(', ')
-                : this.placeholder), this.clearable && selectedOption?.length > 0 && !this.disabled && (hAsync("sd-icon", { key: "close-icon", name: "close", size: 10, color: "#888", class: "sd-select-multiple-group__clear", onClick: event => {
+        return (hAsync("div", { class: "sd-select-multiple-group__trigger", tabindex: this.disabled ? -1 : 0, onClick: this.handleTriggerClick, style: this.triggerStyle }, hAsync("span", { class: "sd-select-multiple-group__value" }, this.getTriggerLabel()), this.clearable && selectedOption?.length > 0 && !this.disabled && (hAsync("sd-icon", { key: "close-icon", name: "close", size: 10, color: "#888", class: "sd-select-multiple-group__clear", onClick: event => {
                 event.stopPropagation();
                 this.value = null;
             } })), hAsync("sd-icon", { key: "arrow-icon", name: "arrowDown", color: "#888", class: {
@@ -6514,14 +6534,15 @@ class SdSelectMultipleGroup extends BaseDropdownEvent {
             }, onKeyDown: e => {
                 if (e.code === 'Enter')
                     e.stopPropagation();
-            } }, hAsync("sd-icon", { name: "search", size: 16, color: "#737373", slot: "prefix" })))), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (hAsync("slot", { name: `option-${option.value}` }, hAsync("sd-select-option-group", { option: option, index: index, isSelected: option.type === 'item'
+            } }, hAsync("sd-icon", { name: "search", size: 16, color: "#737373", slot: "prefix" })))), this.filteredOptions.length > 0 ? (hAsync(Fragment, null, this.useAll && (hAsync("sd-select-option-group", { option: { label: '전체 선택', value: 'all', type: 'all' }, index: 0, isSelected: this.value?.length ===
+                this.options.filter(opt => !opt.disabled && opt.type === 'item').length, isFocused: this.itemIndex === 0, optionStyle: this.optionStyle, onOptionClick: ({ detail, }) => this.handleAllOptionClick(detail), useCheckbox: this.useCheckbox, useIndicator: false })), this.filteredOptions.map((option, index) => (hAsync("slot", { name: `option-${option.value}` }, hAsync("sd-select-option-group", { option: option, index: index, isSelected: option.type === 'item'
                 ? this.value?.some(selected => selected.value === option.value)
                 : this.isAllChildrenSelected(option), isFocused: index === this.itemIndex, optionStyle: this.optionStyle, onOptionClick: ({ detail, }) => {
                 if (option.type !== 'item' && !this.useCheckbox) {
                     return;
                 }
                 this.handleOptionClick(detail);
-            }, useCheckbox: this.useCheckbox, ...(option.type !== 'item' && { countInfo: this.getChildrenOptions(option) }) }))))) : (hAsync("slot", { name: "option-placeholder" }, hAsync("div", { class: 'sd-select-multiple-group__option-placeholder', style: this.optionStyle }, this.optionPlaceholder))))));
+            }, useCheckbox: this.useCheckbox, ...(option.type !== 'item' && { countInfo: this.getChildrenOptions(option) }) })))))) : (hAsync("slot", { name: "option-placeholder" }, hAsync("div", { class: 'sd-select-multiple-group__option-placeholder', style: this.optionStyle }, this.optionPlaceholder))))));
     }
     static get watchers() { return {
         "value": ["valueChanged"],
@@ -6546,6 +6567,7 @@ class SdSelectMultipleGroup extends BaseDropdownEvent {
             "clearable": [4],
             "searchable": [4],
             "useCheckbox": [4, "use-checkbox"],
+            "useAll": [4, "use-all"],
             "containerStyle": [16],
             "triggerStyle": [16],
             "dropdownStyle": [16],
@@ -6635,7 +6657,7 @@ class SdSelectOption {
     }; }
 }
 
-const sdSelectOptionGroupCss = "sd-select-option-group{display:block;height:fit-content}sd-select-option-group .sd-select__option-group{display:flex;padding:4px 12px;padding-left:28px;font-size:12px;line-height:20px}sd-select-option-group .sd-select__option-group.sd-select__option-group--group:not(.sd-select__option-group--use-checkbox),sd-select-option-group .sd-select__option-group.sd-select__option-group--subgroup:not(.sd-select__option-group--use-checkbox){cursor:default}sd-select-option-group .sd-select__option-group.sd-select__option-group--group{padding-left:12px;background-color:#f5faff !important;color:#333333 !important;font-weight:700}sd-select-option-group .sd-select__option-group.sd-select__option-group--subgroup{padding-left:20px;background-color:#f9f9f9 !important;color:#333333 !important;font-weight:500}sd-select-option-group .sd-select__option-group sd-checkbox__bg{border-color:#888888}sd-select-option-group .sd-select__option-group__label-wrapper{display:flex;width:100%;column-gap:8px;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}sd-select-option-group .sd-select__option-group__label-wrapper sd-checkbox{flex-shrink:0}sd-select-option-group .sd-select__option-group__label-wrapper .sd-select__option-group-label{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}sd-select-option-group .sd-select__option-group__label-wrapper .sd-select__option-group__count-indicator{width:fit-content;flex-shrink:0;font-size:12px;font-weight:500;color:#888888}sd-select-option-group .sd-select__option-group--focused{background-color:#e6f1ff}sd-select-option-group .sd-select__option-group--selected.sd-select__option-group--item:not(:hover):not(.sd-select__option-group--use-checkbox),sd-select-option-group .sd-select__option-group--focused.sd-select__option-group--item:not(:hover):not(.sd-select__option-group--use-checkbox){color:#0075ff;font-weight:700}sd-select-option-group .sd-select__option-group--disabled{color:#aaaaaa;cursor:not-allowed}sd-select-option-group .sd-select__option-group:hover:not(.sd-select__option-group--disabled){background-color:#0075ff;color:white}sd-select-option-group .sd-select__option-group:hover.sd-select__option-group--selected.sd-select__option-group--item sd-checkbox .sd-checkbox__bg{border-color:white !important}";
+const sdSelectOptionGroupCss = "sd-select-option-group{display:block;height:fit-content}sd-select-option-group .sd-select__option-group{display:flex;padding:4px 12px;padding-left:12px;font-size:12px;line-height:20px;cursor:pointer}sd-select-option-group .sd-select__option-group.sd-select__option-group--group:not(.sd-select__option-group--use-checkbox),sd-select-option-group .sd-select__option-group.sd-select__option-group--subgroup:not(.sd-select__option-group--use-checkbox){cursor:default !important}sd-select-option-group .sd-select__option-group.sd-select__option-group--group{background-color:#f5faff !important;color:#333333 !important;font-weight:700}sd-select-option-group .sd-select__option-group.sd-select__option-group--subgroup{padding-left:20px;background-color:#f9f9f9 !important;color:#333333 !important;font-weight:500}sd-select-option-group .sd-select__option-group.sd-select__option-group--item{padding-left:28px}sd-select-option-group .sd-select__option-group sd-checkbox__bg{border-color:#888888}sd-select-option-group .sd-select__option-group__label-wrapper{display:flex;width:100%;column-gap:8px;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}sd-select-option-group .sd-select__option-group__label-wrapper sd-checkbox{flex-shrink:0}sd-select-option-group .sd-select__option-group__label-wrapper .sd-select__option-group-label{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}sd-select-option-group .sd-select__option-group__label-wrapper .sd-select__option-group__count-indicator{width:fit-content;flex-shrink:0;font-size:12px;font-weight:500;color:#888888}sd-select-option-group .sd-select__option-group--focused{background-color:#e6f1ff}sd-select-option-group .sd-select__option-group--selected.sd-select__option-group--item:not(:hover):not(.sd-select__option-group--use-checkbox),sd-select-option-group .sd-select__option-group--focused.sd-select__option-group--item:not(:hover):not(.sd-select__option-group--use-checkbox){color:#0075ff;font-weight:700}sd-select-option-group .sd-select__option-group--disabled{color:#aaaaaa;cursor:not-allowed}sd-select-option-group .sd-select__option-group:hover:not(.sd-select__option-group--disabled){background-color:#0075ff;color:white}sd-select-option-group .sd-select__option-group:hover.sd-select__option-group--selected:not(.sd-select__option-group--group):not(.sd-select__option-group--subgroup) sd-checkbox .sd-checkbox__bg{border-color:white !important}";
 
 class SdSelectOptionGroup {
     constructor(hostRef) {

package/hydrate/index.mjs

@@ -5438,7 +5438,7 @@ class SdPortal {
     }; }
 }
 
-const sdProgressCss = "sd-progress{display:block}sd-progress .sd-progress__bar{position:relative;width:360px;height:20px;overflow:hidden;border-radius:4px;background-color:#eeeeee;text-align:center}sd-progress .sd-progress__bar__percent{width:var(--progress-percentage);height:100%;border-radius:4px;background-color:var(--progress-color, #0075ff);transition:all 0.5s}sd-progress .sd-progress__bar__percent.proceed{border-top-right-radius:50%}sd-progress .sd-progress__bar__indicator{position:absolute;left:0;top:0;height:20px;width:100%;background-color:#eeeeee;line-height:21px;z-index:1}sd-progress .sd-progress__bar__indicator--left{color:var(--progress-color, #0075ff);clip-path:inset(0 0 0 var(--progress-percentage))}sd-progress .sd-progress__bar__indicator--right{color:white;background-color:var(--progress-color, #0075ff);clip-path:inset(0 calc(100% - var(--progress-percentage)) 0 0)}sd-progress .sd-progress__spinner{display:flex;flex-direction:column;align-items:center;justify-content:center}sd-progress .sd-progress__spinner svg{transform:rotate(-90deg)}sd-progress .sd-progress__spinner__label{margin-top:4px;font-size:16px;color:var(--progress-color, #0075ff)}sd-progress .sd-progress__label{margin-top:4px;font-size:12px;color:#222222;text-align:center}";
+const sdProgressCss = "sd-progress{display:block}sd-progress .sd-progress__bar{position:relative;width:360px;height:20px;overflow:hidden;border-radius:4px;background-color:#eeeeee;text-align:center}sd-progress .sd-progress__bar__percent{width:var(--progress-percentage);height:100%;border-radius:4px;background-color:var(--progress-color, #0075ff);transition:all 0.5s}sd-progress .sd-progress__bar__percent.proceed{border-top-right-radius:50%}sd-progress .sd-progress__bar__indicator{position:absolute;left:0;top:0;height:20px;width:100%;background-color:#eeeeee;line-height:21px;z-index:1}sd-progress .sd-progress__bar__indicator--left{color:var(--progress-color, #0075ff);clip-path:inset(0 0 0 var(--progress-percentage))}sd-progress .sd-progress__bar__indicator--right{color:white;background-color:var(--progress-color, #0075ff);clip-path:inset(0 calc(100% - var(--progress-percentage)) 0 0)}sd-progress .sd-progress__spinner{display:flex;flex-direction:column;align-items:center;justify-content:center}sd-progress .sd-progress__spinner svg{transform:rotate(-90deg)}sd-progress .sd-progress__spinner__label{margin-top:8px;font-size:16px;color:var(--progress-color, #0075ff)}sd-progress .sd-progress__label{margin-top:4px;font-size:12px;color:#222222;text-align:center}";
 
 class SdProgress {
     constructor(hostRef) {
@@ -5807,11 +5807,11 @@ class SdSelect extends BaseDropdownEvent {
             '--select-width': this.width || '200px',
             '--select-dropdown-height': this.dropdownHeight || '260px',
         };
-        return (hAsync(Host, { key: '6e627f90abe0ae0a8f955918ccd2513a03b81c7a', style: style }, hAsync("div", { key: 'a0e8e608384d7dd343ba65f34a37d28ebe99cae0', class: {
+        return (hAsync(Host, { key: '51133eafc1c4b8cb79845c3b36abeb933d92bd9d', style: style }, hAsync("div", { key: 'cdd8fb1798088a7ea4e44ce921dcc652a455cc39', class: {
                 'sd-select': true,
                 'sd-select--open': this.isOpen,
                 'sd-select--disabled': this.disabled,
-            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), hAsync("div", { key: 'a313b94c77d3649b35ba47cc29e364e26902d70f', class: "sd-select__container" }, this.renderTrigger(), this.renderDropdown()))));
+            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), hAsync("div", { key: '6e09cfbbb0807cbeff40a7dfe0a9d037a31e58bf', class: "sd-select__container" }, this.renderTrigger(), this.renderDropdown()))));
     }
     renderLabel(label) {
         if (!label)
@@ -6180,6 +6180,7 @@ class SdSelectMultipleGroup extends BaseDropdownEvent {
     clearable = false;
     searchable = false;
     useCheckbox = false;
+    useAll = false;
     // props - custom styles
     containerStyle = {};
     triggerStyle = {};
@@ -6305,6 +6306,16 @@ class SdSelectMultipleGroup extends BaseDropdownEvent {
             this.dropDownShow?.emit({ isOpen: this.isOpen });
         }
     };
+    handleAllOptionClick = (detail) => {
+        if (detail.isSelected) {
+            // 이미 선택된 옵션인 경우, 선택 해제
+            this.value = [];
+        }
+        else {
+            // 새로운 옵션 선택
+            this.value = [...this.filteredOptions.filter(opt => opt.type === 'item' && !opt.disabled)];
+        }
+    };
     handleOptionClick = (detail) => {
         const { option, event } = detail;
         event.stopPropagation();
@@ -6443,6 +6454,19 @@ class SdSelectMultipleGroup extends BaseDropdownEvent {
             totalCount: children.length,
         };
     }
+    isAllOptionsSelected() {
+        const selectedOption = this.getSelectedOption();
+        return (selectedOption.length === this.options.filter(opt => !opt.disabled && opt.type === 'item').length);
+    }
+    getTriggerLabel() {
+        const selectedOption = this.getSelectedOption();
+        if (!selectedOption)
+            return '선택';
+        if (selectedOption.length === 0)
+            return this.placeholder;
+        const isAllChecked = this.isAllOptionsSelected();
+        return isAllChecked ? '전체' : selectedOption.map(option => option.label).join(', ');
+    }
     closeDropdown() {
         this.isOpen = false;
     }
@@ -6470,11 +6494,11 @@ class SdSelectMultipleGroup extends BaseDropdownEvent {
             '--select-width': this.width || '200px',
             '--select-dropdown-height': this.dropdownHeight || '260px',
         };
-        return (hAsync(Host, { key: '25cb748a149def1b633f7e6baf77e55a57c6d43b', style: style }, hAsync("div", { key: '14fabf19488e6370612eb3f29fb97d0077ddb0f0', class: {
+        return (hAsync(Host, { key: '825a5e69af88a908c41c0c82bfb5fed4afeb9f5f', style: style }, hAsync("div", { key: '81827e04db3de7194162594db4d918b37e7bd3a2', class: {
                 'sd-select-multiple-group': true,
                 'sd-select-multiple-group--open': this.isOpen,
                 'sd-select-multiple-group--disabled': this.disabled,
-            }, style: this.containerStyle, ref: el => (this.selectRef = el) }, this.renderLabel(this.label, this.labelStyle), hAsync("div", { key: '4f762e4ab93da2cb1e684d85af9c3abf5f1304e4', class: "sd-select-multiple-group__container" }, this.renderTrigger(), this.renderDropdown()))));
+            }, style: this.containerStyle, ref: el => (this.selectRef = el) }, this.renderLabel(this.label, this.labelStyle), hAsync("div", { key: '23be24a0f971270b3e449cad4f56699f65716fb0', class: "sd-select-multiple-group__container" }, this.renderTrigger(), this.renderDropdown()))));
     }
     renderLabel(label, labelStyle) {
         if (!label)
@@ -6483,11 +6507,7 @@ class SdSelectMultipleGroup extends BaseDropdownEvent {
     }
     renderTrigger() {
         const selectedOption = this.getSelectedOption();
-        return (hAsync("div", { class: "sd-select-multiple-group__trigger", tabindex: this.disabled ? -1 : 0, onClick: this.handleTriggerClick, style: this.triggerStyle }, hAsync("span", { class: "sd-select-multiple-group__value" }, !selectedOption
-            ? '선택'
-            : selectedOption.length
-                ? selectedOption.map(option => option.label).join(', ')
-                : this.placeholder), this.clearable && selectedOption?.length > 0 && !this.disabled && (hAsync("sd-icon", { key: "close-icon", name: "close", size: 10, color: "#888", class: "sd-select-multiple-group__clear", onClick: event => {
+        return (hAsync("div", { class: "sd-select-multiple-group__trigger", tabindex: this.disabled ? -1 : 0, onClick: this.handleTriggerClick, style: this.triggerStyle }, hAsync("span", { class: "sd-select-multiple-group__value" }, this.getTriggerLabel()), this.clearable && selectedOption?.length > 0 && !this.disabled && (hAsync("sd-icon", { key: "close-icon", name: "close", size: 10, color: "#888", class: "sd-select-multiple-group__clear", onClick: event => {
                 event.stopPropagation();
                 this.value = null;
             } })), hAsync("sd-icon", { key: "arrow-icon", name: "arrowDown", color: "#888", class: {
@@ -6512,14 +6532,15 @@ class SdSelectMultipleGroup extends BaseDropdownEvent {
             }, onKeyDown: e => {
                 if (e.code === 'Enter')
                     e.stopPropagation();
-            } }, hAsync("sd-icon", { name: "search", size: 16, color: "#737373", slot: "prefix" })))), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (hAsync("slot", { name: `option-${option.value}` }, hAsync("sd-select-option-group", { option: option, index: index, isSelected: option.type === 'item'
+            } }, hAsync("sd-icon", { name: "search", size: 16, color: "#737373", slot: "prefix" })))), this.filteredOptions.length > 0 ? (hAsync(Fragment, null, this.useAll && (hAsync("sd-select-option-group", { option: { label: '전체 선택', value: 'all', type: 'all' }, index: 0, isSelected: this.value?.length ===
+                this.options.filter(opt => !opt.disabled && opt.type === 'item').length, isFocused: this.itemIndex === 0, optionStyle: this.optionStyle, onOptionClick: ({ detail, }) => this.handleAllOptionClick(detail), useCheckbox: this.useCheckbox, useIndicator: false })), this.filteredOptions.map((option, index) => (hAsync("slot", { name: `option-${option.value}` }, hAsync("sd-select-option-group", { option: option, index: index, isSelected: option.type === 'item'
                 ? this.value?.some(selected => selected.value === option.value)
                 : this.isAllChildrenSelected(option), isFocused: index === this.itemIndex, optionStyle: this.optionStyle, onOptionClick: ({ detail, }) => {
                 if (option.type !== 'item' && !this.useCheckbox) {
                     return;
                 }
                 this.handleOptionClick(detail);
-            }, useCheckbox: this.useCheckbox, ...(option.type !== 'item' && { countInfo: this.getChildrenOptions(option) }) }))))) : (hAsync("slot", { name: "option-placeholder" }, hAsync("div", { class: 'sd-select-multiple-group__option-placeholder', style: this.optionStyle }, this.optionPlaceholder))))));
+            }, useCheckbox: this.useCheckbox, ...(option.type !== 'item' && { countInfo: this.getChildrenOptions(option) }) })))))) : (hAsync("slot", { name: "option-placeholder" }, hAsync("div", { class: 'sd-select-multiple-group__option-placeholder', style: this.optionStyle }, this.optionPlaceholder))))));
     }
     static get watchers() { return {
         "value": ["valueChanged"],
@@ -6544,6 +6565,7 @@ class SdSelectMultipleGroup extends BaseDropdownEvent {
             "clearable": [4],
             "searchable": [4],
             "useCheckbox": [4, "use-checkbox"],
+            "useAll": [4, "use-all"],
             "containerStyle": [16],
             "triggerStyle": [16],
             "dropdownStyle": [16],
@@ -6633,7 +6655,7 @@ class SdSelectOption {
     }; }
 }
 
-const sdSelectOptionGroupCss = "sd-select-option-group{display:block;height:fit-content}sd-select-option-group .sd-select__option-group{display:flex;padding:4px 12px;padding-left:28px;font-size:12px;line-height:20px}sd-select-option-group .sd-select__option-group.sd-select__option-group--group:not(.sd-select__option-group--use-checkbox),sd-select-option-group .sd-select__option-group.sd-select__option-group--subgroup:not(.sd-select__option-group--use-checkbox){cursor:default}sd-select-option-group .sd-select__option-group.sd-select__option-group--group{padding-left:12px;background-color:#f5faff !important;color:#333333 !important;font-weight:700}sd-select-option-group .sd-select__option-group.sd-select__option-group--subgroup{padding-left:20px;background-color:#f9f9f9 !important;color:#333333 !important;font-weight:500}sd-select-option-group .sd-select__option-group sd-checkbox__bg{border-color:#888888}sd-select-option-group .sd-select__option-group__label-wrapper{display:flex;width:100%;column-gap:8px;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}sd-select-option-group .sd-select__option-group__label-wrapper sd-checkbox{flex-shrink:0}sd-select-option-group .sd-select__option-group__label-wrapper .sd-select__option-group-label{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}sd-select-option-group .sd-select__option-group__label-wrapper .sd-select__option-group__count-indicator{width:fit-content;flex-shrink:0;font-size:12px;font-weight:500;color:#888888}sd-select-option-group .sd-select__option-group--focused{background-color:#e6f1ff}sd-select-option-group .sd-select__option-group--selected.sd-select__option-group--item:not(:hover):not(.sd-select__option-group--use-checkbox),sd-select-option-group .sd-select__option-group--focused.sd-select__option-group--item:not(:hover):not(.sd-select__option-group--use-checkbox){color:#0075ff;font-weight:700}sd-select-option-group .sd-select__option-group--disabled{color:#aaaaaa;cursor:not-allowed}sd-select-option-group .sd-select__option-group:hover:not(.sd-select__option-group--disabled){background-color:#0075ff;color:white}sd-select-option-group .sd-select__option-group:hover.sd-select__option-group--selected.sd-select__option-group--item sd-checkbox .sd-checkbox__bg{border-color:white !important}";
+const sdSelectOptionGroupCss = "sd-select-option-group{display:block;height:fit-content}sd-select-option-group .sd-select__option-group{display:flex;padding:4px 12px;padding-left:12px;font-size:12px;line-height:20px;cursor:pointer}sd-select-option-group .sd-select__option-group.sd-select__option-group--group:not(.sd-select__option-group--use-checkbox),sd-select-option-group .sd-select__option-group.sd-select__option-group--subgroup:not(.sd-select__option-group--use-checkbox){cursor:default !important}sd-select-option-group .sd-select__option-group.sd-select__option-group--group{background-color:#f5faff !important;color:#333333 !important;font-weight:700}sd-select-option-group .sd-select__option-group.sd-select__option-group--subgroup{padding-left:20px;background-color:#f9f9f9 !important;color:#333333 !important;font-weight:500}sd-select-option-group .sd-select__option-group.sd-select__option-group--item{padding-left:28px}sd-select-option-group .sd-select__option-group sd-checkbox__bg{border-color:#888888}sd-select-option-group .sd-select__option-group__label-wrapper{display:flex;width:100%;column-gap:8px;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}sd-select-option-group .sd-select__option-group__label-wrapper sd-checkbox{flex-shrink:0}sd-select-option-group .sd-select__option-group__label-wrapper .sd-select__option-group-label{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}sd-select-option-group .sd-select__option-group__label-wrapper .sd-select__option-group__count-indicator{width:fit-content;flex-shrink:0;font-size:12px;font-weight:500;color:#888888}sd-select-option-group .sd-select__option-group--focused{background-color:#e6f1ff}sd-select-option-group .sd-select__option-group--selected.sd-select__option-group--item:not(:hover):not(.sd-select__option-group--use-checkbox),sd-select-option-group .sd-select__option-group--focused.sd-select__option-group--item:not(:hover):not(.sd-select__option-group--use-checkbox){color:#0075ff;font-weight:700}sd-select-option-group .sd-select__option-group--disabled{color:#aaaaaa;cursor:not-allowed}sd-select-option-group .sd-select__option-group:hover:not(.sd-select__option-group--disabled){background-color:#0075ff;color:white}sd-select-option-group .sd-select__option-group:hover.sd-select__option-group--selected:not(.sd-select__option-group--group):not(.sd-select__option-group--subgroup) sd-checkbox .sd-checkbox__bg{border-color:white !important}";
 
 class SdSelectOptionGroup {
     constructor(hostRef) {

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@sellmate/design-system",
- "version": "0.0.31",
+ "version": "0.0.32",
  "description": "Sellmate Design System - Web Components Library built with Stencil",
  "keywords": [
   "web-components",
@@ -90,5 +90,5 @@
   "@stencil/react-output-target": "^1.2.0",
   "@stencil/vue-output-target": "^0.11.8"
  },
- "gitHead": "41f495e4833d6f6ab1be62f7f88272c24a60037e"
+ "gitHead": "55ee6d7aa1f8ae5a8219d6119e6ba7edcefb9ef9"
 }

package/dist/components/p-B18yJb2O.js.map

@@ -1 +0,0 @@
-{"file":"p-B18yJb2O.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.scss?tag=sd-select-option-group","src/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.tsx"],"sourcesContent":["@import 'variables';\n\nsd-select-option-group {\n display: block;\n height: fit-content;\n .sd-select__option-group {\n  display: flex;\n  padding: 4px 12px;\n  padding-left: 28px;\n  font-size: 12px;\n  line-height: 20px;\n\n  &.sd-select__option-group--group,\n  &.sd-select__option-group--subgroup {\n   &:not(.sd-select__option-group--use-checkbox) {\n    cursor: default;\n   }\n  }\n\n  &.sd-select__option-group--group {\n   padding-left: 12px;\n   background-color: $brilliantblue_05 !important;\n   color: $grey_90 !important;\n   font-weight: 700;\n  }\n\n  &.sd-select__option-group--subgroup {\n   padding-left: 20px;\n   background-color: $grey_05 !important;\n   color: $grey_90 !important;\n   font-weight: 500;\n  }\n\n  sd-checkbox {\n   &__bg {\n    border-color: $grey_65;\n   }\n  }\n\n  &__label-wrapper {\n   display: flex;\n   width: 100%;\n   column-gap: 8px;\n   align-items: center;\n   overflow: hidden;\n   white-space: nowrap;\n   text-overflow: ellipsis;\n\n   sd-checkbox {\n    flex-shrink: 0;\n   }\n\n   .sd-select__option-group-label {\n    flex: 0 1 auto;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n   }\n\n   .sd-select__option-group__count-indicator {\n    width: fit-content;\n    flex-shrink: 0;\n    font-size: 12px;\n    font-weight: 500;\n    color: $grey_65;\n   }\n  }\n\n  &--focused {\n   background-color: $brilliantblue_20;\n  }\n\n  &--selected,\n  &--focused {\n   &.sd-select__option-group--item:not(:hover):not(.sd-select__option-group--use-checkbox) {\n    color: $brilliantblue_75;\n    font-weight: 700;\n   }\n  }\n\n  &--disabled {\n   color: $grey_55;\n   cursor: not-allowed;\n  }\n\n  &:hover {\n   &:not(.sd-select__option-group--disabled) {\n    background-color: $brilliantblue_75;\n    color: white;\n   }\n\n   &.sd-select__option-group--selected.sd-select__option-group--item sd-checkbox {\n    .sd-checkbox__bg {\n     border-color: white !important;\n    }\n   }\n  }\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport { SelectOptionGroup } from '../../sd-select/sd-select';\n\n@Component({\n tag: 'sd-select-option-group',\n styleUrl: 'sd-select-option-group.scss',\n})\nexport class SdSelectOptionGroup {\n @Element() el!: HTMLElement;\n\n @Prop() option!: SelectOptionGroup;\n @Prop() index!: number;\n @Prop() isSelected: boolean | null = false;\n @Prop() isFocused: boolean = false;\n @Prop() optionStyle?: { [key: string]: string };\n @Prop() disabled: boolean = false;\n @Prop() useCheckbox: boolean = false;\n @Prop() useIndicator?: boolean = true;\n @Prop() countInfo?: { selectedCount: number; totalCount: number } = {\n  selectedCount: 0,\n  totalCount: 0,\n };\n\n @State() isHovered: boolean = false;\n\n @Method()\n async isDisabled(): Promise<boolean> {\n  return !!this.option.disabled || this.option.type === 'group' || this.option.type === 'subgroup';\n }\n\n @Event() optionClick!: EventEmitter<{\n  option: SelectOptionGroup;\n  isSelected: boolean | null;\n  index: number;\n  event: MouseEvent;\n }>;\n\n private handleClick = (\n  option: SelectOptionGroup,\n  isSelected: boolean | null,\n  event: MouseEvent,\n ) => {\n  event.stopPropagation();\n\n  if (option.type === 'group' || option.type === 'subgroup') {\n   this.optionClick.emit({\n    option: this.option,\n    isSelected,\n    index: this.index,\n    event,\n   });\n   return;\n  }\n\n  if (!this.option.disabled && !this.disabled) {\n   this.optionClick.emit({\n    option: this.option,\n    isSelected,\n    index: this.index,\n    event,\n   });\n  }\n };\n\n render() {\n  return (\n   <div\n    class={{\n     'sd-select__option-group': true,\n     'sd-select__option-group--selected': !!this.isSelected,\n     'sd-select__option-group--disabled': !!this.option.disabled,\n     'sd-select__option-group--focused': this.isFocused,\n     'sd-select__option-group--use-checkbox': this.useCheckbox,\n     'sd-select__option-group--group': this.option.type === 'group',\n     'sd-select__option-group--subgroup': this.option.type === 'subgroup',\n     'sd-select__option-group--item': this.option.type === 'item',\n    }}\n    onMouseEnter={() => (this.isHovered = true)}\n    onMouseLeave={() => (this.isHovered = false)}\n    style={this.optionStyle}\n    data-index={this.index}\n    onClick={event => this.handleClick(this.option, this.isSelected, event)}\n   >\n    <div class=\"sd-select__option-group__label-wrapper\">\n     {this.useCheckbox && (\n      <sd-checkbox\n       checked={this.isSelected}\n       disabled={this.option.disabled}\n       onClick={e => {\n        e.preventDefault();\n        this.handleClick(this.option, this.isSelected, e);\n       }}\n      ></sd-checkbox>\n     )}\n     <span class=\"sd-select__option-group-label\">{this.option.label}</span>\n     {this.useIndicator && this.option.type !== 'item' && (\n      <span class=\"sd-select__option-group__count-indicator\">{`(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`}</span>\n     )}\n    </div>\n   </div>\n  );\n }\n}\n"],"version":3}

package/dist/components/p-T0Fd7Ziu.js.map

@@ -1 +0,0 @@
-{"file":"p-T0Fd7Ziu.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/sd-select/sd-select.scss?tag=sd-select","src/components/sd-select/sd-select.tsx"],"sourcesContent":["@import 'variables';\n@import 'extend';\n\n.sd-select {\n display: flex;\n width: var(--select-width, 200px);\n height: 28px;\n position: relative;\n color: $grey_90;\n cursor: pointer;\n user-select: none;\n border: 1px solid $grey_55;\n border-radius: 4px;\n background-color: white;\n\n &:hover:not(.sd-select--disabled) {\n  background: $grey_10;\n }\n\n &.sd-select--disabled {\n  cursor: not-allowed;\n  background-color: $grey_20;\n  border-color: $grey_45;\n\n  .sd-select__label {\n   border-right: 1px solid $grey_45;\n  }\n\n  .sd-select__trigger {\n   color: $grey_65;\n   &:focus,\n   &:focus-visible,\n   &:focus-within {\n    outline: none !important;\n   }\n  }\n }\n\n &__label {\n  font-size: 12px;\n  line-height: 20px;\n  font-weight: 500;\n  color: $grey_90;\n  padding: 4px 12px;\n  border-right: 1px solid $grey_45;\n  border-radius: 4px 0 0 4px;\n  background-color: $grey_10;\n  display: inline-block;\n  white-space: nowrap;\n }\n\n &__container {\n  position: relative;\n  width: 100%;\n  display: flex;\n\n  .sd-select__trigger {\n   padding: 4px 20px 4px 12px;\n   display: flex;\n   width: 100%;\n   align-items: center;\n\n   .sd-select__value {\n    flex: 1;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    line-height: 20px;\n    font-size: 12px;\n    font-weight: 400;\n    text-align: left;\n   }\n\n   .sd-select__clear {\n    margin: 0 4px;\n    width: 8px;\n    height: 8px;\n    background-color: transparent;\n    outline: none;\n    border: none;\n   }\n  }\n\n  .sd-select__arrow {\n   position: absolute;\n   top: 8px;\n   right: 8px;\n   width: 12px;\n   height: 12px;\n   color: $grey_65;\n   transition: transform 0.3s ease;\n\n   &--open {\n    transform: rotate(180deg);\n   }\n  }\n }\n}\n\n.sd-select__dropdown {\n @extend %scrollBar;\n width: var(--select-dropdown-width, 200px);\n max-height: var(--select-dropdown-height, 260px);\n padding-bottom: 2px;\n background-color: white;\n box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.1);\n border-radius: 4px;\n overflow-y: auto;\n color: $grey_90;\n display: flex;\n flex-direction: column;\n\n .sd-select__search-container {\n  position: sticky;\n  top: 0;\n  display: flex;\n  width: 100%;\n  background-color: white;\n  align-items: center;\n  padding: 4px 8px;\n\n  &--scrolled {\n   box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.2);\n  }\n }\n\n .sd-select__option-placeholder {\n  padding: 4px 12px;\n  font-size: 12px;\n  line-height: 20px;\n  text-align: left;\n }\n}\n","import {\n Component,\n Event,\n EventEmitter,\n Host,\n Prop,\n State,\n h,\n Element,\n Watch,\n} from '@stencil/core';\nimport { BaseDropdownEvent } from '../../utils/base-dropdown-event';\nimport { SelectKeyboardNavigation } from '../../utils/select-keyboard-navigation';\n\nexport interface SelectOption {\n value: string | number;\n label: string;\n disabled?: boolean;\n}\n\nexport type SelectGroupOptionType = 'group' | 'subgroup' | 'item';\n\nexport interface SelectOptionGroup extends SelectOption {\n type: SelectGroupOptionType;\n parent?: string;\n}\n\nexport interface SelectStyleProps {\n containerStyle?: { [key: string]: string };\n triggerStyle?: { [key: string]: string };\n dropdownStyle?: { [key: string]: string };\n optionStyle?: { [key: string]: string };\n labelStyle?: { [key: string]: string };\n}\n\nexport interface SelectEvents {\n sdChange: {\n  value: string | number | null;\n  option: SelectOption | null;\n };\n dropDownShow: { isOpen: boolean };\n}\n\nexport interface SelectMultipleEvents extends Pick<SelectEvents, 'dropDownShow' | 'dropDownShow'> {\n sdChange: SelectOption[] | null;\n}\n\n@Component({\n tag: 'sd-select',\n styleUrl: 'sd-select.scss',\n})\nexport class SdSelect extends BaseDropdownEvent {\n @Element() el!: HTMLElement;\n\n // props\n @Prop({ mutable: true }) value: string | number | null = null;\n @Prop() label: string = '';\n @Prop({ mutable: true }) options: SelectOption[] = [];\n @Prop() placeholder: string = '선택';\n @Prop() optionPlaceholder: string = '옵션이 없습니다.';\n @Prop() width: string = '200px';\n @Prop() dropdownHeight: string = '260px';\n @Prop() disabled: boolean = false;\n @Prop() clearable: boolean = false;\n @Prop() searchable: boolean = false;\n\n // props - custom slots\n @Prop() optionRenderer?: (option: SelectOption, index: number, isSelected: boolean) => any;\n\n // states\n @State() filteredOptions = this.options;\n @State() isOpen: boolean = false;\n @State() searchText: string | null = null;\n @State() itemIndex: number = -1;\n @State() isScrolled: boolean = false;\n\n // events\n @Event() sdChange?: EventEmitter<SelectEvents['sdChange']>;\n @Event() dropDownShow?: EventEmitter<SelectEvents['dropDownShow']>;\n\n private selectRef?: HTMLElement;\n private searchRef?: HTMLSdInputElement;\n private optionRef?: HTMLSdSelectOptionElement;\n private dropdownRef?: HTMLElement;\n\n @Watch('value')\n valueChanged() {\n  const selectedOption = this.getSelectedOption();\n  this.sdChange?.emit({ value: selectedOption?.value || null, option: selectedOption || null });\n }\n\n @Watch('options')\n optionsChanged() {\n  this.filteredOptions = this.options;\n  this.filterOptions();\n }\n\n @Watch('searchText')\n searchTextChanged() {\n  this.filterOptions();\n }\n\n @Watch('itemIndex')\n async itemIndexChanged(newIndex: number, oldIndex: number) {\n  if (this.searchable) {\n   const searchInput = await this.getNativeInputElement();\n   if (this.itemIndex === -1) {\n    searchInput?.focus();\n    return;\n   } else if (searchInput?.matches(':focus')) {\n    searchInput?.blur();\n   }\n  }\n\n  const optionElements =\n   this.dropdownRef?.querySelectorAll('.sd-select__dropdown sd-select-option') || [];\n  const currentItem = optionElements?.[this.itemIndex];\n\n  if (!currentItem || !this.isOpen) return;\n\n  this.optionRef = currentItem as HTMLSdSelectOptionElement;\n  const isOptionDisabled = await this.optionRef.isDisabled();\n\n  if (isOptionDisabled) {\n   newIndex > oldIndex ? this.itemIndex++ : this.itemIndex--;\n   return;\n  }\n\n  this.scrollToOption(currentItem as HTMLElement);\n }\n\n componentWillLoad() {\n  // props가 모두 설정된 후에 실행되므로 올바른 options 값을 가져올 수 있음\n  this.filteredOptions = this.options;\n  this.initializeEvent(); // global dropdown Manager에 등록 + 이벤트 핸들러 초기화\n }\n\n disconnectedCallback() {\n  this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리\n }\n\n @Watch('isOpen')\n async isOpenChanged() {\n  // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지\n  this.onDropdownToggle(this.isOpen);\n\n  const selectedOption = this.getSelectedOption();\n  if (!selectedOption) {\n   this.itemIndex = /* this.searchable ?  */ -1 /* : 0 */;\n  } else {\n   this.itemIndex = this.options.indexOf(selectedOption);\n  }\n\n  this.dropDownShow?.emit({ isOpen: this.isOpen });\n\n  if (this.isOpen === false) return;\n\n  await new Promise(resolve => setTimeout(resolve, 10));\n\n  const optionElements =\n   this.dropdownRef?.querySelectorAll('.sd-select__dropdown sd-select-option') || [];\n\n  const currentItem = optionElements?.[this.itemIndex];\n\n  if (this.searchable) {\n   const searchInput = await this.getNativeInputElement();\n   searchInput?.focus();\n  }\n\n  if (!currentItem) return;\n\n  await new Promise(resolve => setTimeout(resolve, 10));\n  this.scrollToOption(currentItem as HTMLElement);\n }\n\n protected handleDocumentClick(event: Event): void {\n  if (!this.selectRef?.contains(event.target as Node)) {\n   this.isOpen = false;\n  }\n }\n\n protected handleDocumentKeydown(keyboardEvent: KeyboardEvent): void {\n  keyboardEvent.stopPropagation();\n  const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];\n  if (!targetKey.includes(keyboardEvent.key)) return;\n\n  keyboardEvent.preventDefault();\n  switch (keyboardEvent.key) {\n   case 'ArrowDown':\n   case 'ArrowUp':\n    const keyboardNavigation = new SelectKeyboardNavigation(this.searchable, this.filteredOptions);\n    const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);\n    this.itemIndex = nextIndex;\n    break;\n   case 'Enter':\n    const selectedOption = this.filteredOptions[this.itemIndex];\n    if (selectedOption && !selectedOption.disabled) {\n     this.value = selectedOption.value;\n     this.searchText = null;\n     this.isOpen = false;\n    }\n    break;\n   case 'Escape':\n    this.isOpen = false;\n    break;\n  }\n }\n\n // closeDropdown 메서드 구현 (Manager에서 호출됨)\n closeDropdown() {\n  this.isOpen = false;\n }\n\n // event handlers\n handleTriggerClick = (event: Event) => {\n  event.stopPropagation();\n\n  if (!this.disabled) {\n   this.isOpen = !this.isOpen;\n   this.dropDownShow?.emit({ isOpen: this.isOpen });\n  }\n };\n\n handleOptionClick = (detail: { option: SelectOption; event: Event }) => {\n  const { option, event } = detail;\n  event.stopPropagation();\n\n  if (!option.disabled) {\n   this.value = option.value;\n   this.isOpen = false;\n  }\n };\n\n private filterOptions() {\n  if (!this.searchText || this.searchText.trim() === '') {\n   // 검색어가 없으면 전체 옵션 표시\n   this.filteredOptions = this.options;\n  } else {\n   // 검색어가 있으면 필터링\n   this.filteredOptions = this.options.filter(option =>\n    option.label.toLowerCase().includes(this.searchText!.toLowerCase()),\n   );\n  }\n }\n\n private getSelectedOption(): SelectOption | undefined {\n  return this.options.find(option => option.value === this.value);\n }\n\n private handleDropdownScroll = (event: Event) => {\n  const target = event.target as HTMLElement;\n  const scrollTop = target.scrollTop;\n\n  // 스크롤이 조금이라도 되면 그림자 표시\n  this.isScrolled = scrollTop > 0;\n };\n\n private async getNativeInputElement(): Promise<HTMLInputElement | null> {\n  if (this.searchRef) {\n   return this.searchRef.getNativeElement();\n  }\n  return null;\n }\n\n private scrollToOption(optionElement: HTMLElement) {\n  if (!this.dropdownRef || !optionElement) return;\n\n  const dropdown = this.dropdownRef;\n  const optionTop = optionElement.offsetTop;\n  const optionHeight = optionElement.offsetHeight;\n  const dropdownScrollTop = dropdown.scrollTop;\n  const dropdownHeight = dropdown.clientHeight;\n\n  const searchContainer = dropdown.querySelector('.sd-select__search-container');\n  const searchOffset = searchContainer ? (searchContainer as HTMLElement).offsetHeight : 0;\n\n  const visibleTop = dropdownScrollTop + searchOffset;\n  const visibleBottom = dropdownScrollTop + dropdownHeight;\n\n  if (optionTop < visibleTop) {\n   dropdown.scrollTop = optionTop - searchOffset;\n  } else if (optionTop + optionHeight > visibleBottom) {\n   dropdown.scrollTop = optionTop + optionHeight - dropdownHeight + searchOffset;\n  }\n }\n\n // render method\n render() {\n  const style = {\n   '--select-width': this.width || '200px',\n   '--select-dropdown-height': this.dropdownHeight || '260px',\n  };\n\n  return (\n   <Host style={style}>\n    <div\n     class={{\n      'sd-select': true,\n      'sd-select--open': this.isOpen,\n      'sd-select--disabled': this.disabled,\n     }}\n     ref={el => (this.selectRef = el)}\n    >\n     {this.renderLabel(this.label)}\n     <div class=\"sd-select__container\">\n      {this.renderTrigger()}\n      {this.renderDropdown()}\n     </div>\n    </div>\n   </Host>\n  );\n }\n\n private renderLabel(label?: string) {\n  if (!label) return null;\n\n  return <label class=\"sd-select__label\">{label}</label>;\n }\n\n private renderTrigger() {\n  const selectedOption = this.getSelectedOption();\n  return (\n   <div\n    class=\"sd-select__trigger\"\n    tabindex={this.disabled ? -1 : 0}\n    onClick={this.handleTriggerClick}\n   >\n    <span class=\"sd-select__value\">{selectedOption ? selectedOption.label : this.placeholder}</span>\n    {this.clearable && selectedOption && !this.disabled && (\n     <sd-icon\n      key=\"clear-icon\"\n      name=\"close\"\n      size={10}\n      color=\"#888\"\n      class=\"sd-select__clear\"\n      onClick={event => {\n       event.stopPropagation();\n       this.value = null;\n      }}\n     ></sd-icon>\n    )}\n\n    <sd-icon\n     key=\"arrow-icon\"\n     name=\"arrowDown\"\n     color=\"#888\"\n     class={{ 'sd-select__arrow': true, 'sd-select__arrow--open': this.isOpen }}\n    ></sd-icon>\n   </div>\n  );\n }\n\n private renderDropdown() {\n  const style = {\n   '--select-dropdown-width': this.width || '200px',\n   '--select-dropdown-height': this.dropdownHeight || '260px',\n  };\n  if (this.isOpen === false) return null;\n\n  return (\n   <sd-portal open={this.isOpen} parentRef={this.selectRef} onSdClose={this.closeDropdown}>\n    <div\n     class=\"sd-select__dropdown\"\n     style={style}\n     onScroll={this.handleDropdownScroll}\n     ref={el => (this.dropdownRef = el)}\n    >\n     {this.searchable && (\n      <div\n       class={{\n        'sd-select__search-container': true,\n        'sd-select__search-container--scrolled': this.isScrolled,\n       }}\n       onClick={event => event.stopPropagation()}\n      >\n       <sd-input\n        ref={el => (this.searchRef = el)}\n        value={this.searchText}\n        placeholder=\"검색\"\n        clearable\n        inputStyle={{ 'padding-left': '8px' }}\n        autofocus\n        onSdInput={event => {\n         this.searchText = String(event?.detail);\n        }}\n        onSdFocus={() => {\n         this.itemIndex = -1;\n        }}\n       >\n        <sd-icon\n         name=\"search\"\n         size={16}\n         color=\"#737373\"\n         style={{ marginRight: '4px' }}\n         slot=\"prefix\"\n        ></sd-icon>\n       </sd-input>\n      </div>\n     )}\n     {this.filteredOptions.length > 0 ? (\n      this.filteredOptions.map((option, index) => (\n       <slot name={`option-${option.value}`}>\n        <sd-select-option\n         option={option}\n         index={index}\n         isSelected={option.value === this.value}\n         isFocused={index === this.itemIndex}\n         onOptionClick={({ detail }) => this.handleOptionClick(detail)}\n        ></sd-select-option>\n       </slot>\n      ))\n     ) : (\n      <slot name=\"option-placeholder\">\n       <div class={'sd-select__option-placeholder'}>{this.optionPlaceholder}</div>\n      </slot>\n     )}\n    </div>\n   </sd-portal>\n  );\n }\n}\n\n{\n /*\n  <sd-select id=\"select-1\">\n    <!-- <div slot=\"option-placeholder\">옵션이 없습니다.</div> -->\n   </sd-select>\n   <sd-select id=\"select-2\"> </sd-select>\n   <sd-select id=\"select-3\" searchable clearable>\n    <div slot=\"option-3\">test</div>\n   </sd-select>\n\n    <script>\n  document.addEventListener('DOMContentLoaded', () => {\n   const select1 = document.getElementById('select-1');\n   const select2 = document.getElementById('select-2');\n   const select3 = document.getElementById('select-3');\n   const select = document.querySelector('sd-select slot[name=\"option-3\"]');\n   select1.optionPlaceholder = 'No options available';\n\n   const options = [\n    { label: 'Option 1', value: '1' },\n    { label: 'Option 2', value: '2' },\n    { label: 'Option 3', value: '3', disabled: true },\n    { label: 'Option 4', value: '4' },\n    { label: 'Option 5', value: '5' },\n    { label: 'Option 6', value: '6' },\n    { label: 'Option 7', value: '7', disabled: true },\n    { label: 'Option 8', value: '8' },\n    { label: 'Option 9', value: '9' },\n    { label: 'Option 10', value: '10' },\n    { label: 'Option 11', value: '11', disabled: true },\n    { label: 'Option 12', value: '12' },\n    { label: 'Option 13', value: '13' },\n    { label: 'Option 14', value: '14' },\n    { label: 'Option 15', value: '15', disabled: true },\n    { label: 'Option 16', value: '16' },\n    { label: 'Option 17', value: '17' },\n    { label: 'Option 18', value: '18' },\n    { label: 'Option 19', value: '19', disabled: true },\n    { label: 'Option 20', value: '20' },\n    { label: 'Option 21', value: '21' },\n    { label: 'Option 22', value: '22' },\n    { label: 'Option 23', value: '23', disabled: true },\n    { label: 'Option 24', value: '24' },\n   ];\n\n   select2.options = options;\n   select3.options = options;\n  });\n </script>\n\n */\n}\n"],"version":3}

package/dist/design-system/p-1b6b3344.entry.js

@@ -1,2 +0,0 @@
-import{r as o,c as e,a as t,h as s}from"./p-B2T3tS5r.js";const i="sd-select-option-group{display:block;height:fit-content}sd-select-option-group .sd-select__option-group{display:flex;padding:4px 12px;padding-left:28px;font-size:12px;line-height:20px}sd-select-option-group .sd-select__option-group.sd-select__option-group--group:not(.sd-select__option-group--use-checkbox),sd-select-option-group .sd-select__option-group.sd-select__option-group--subgroup:not(.sd-select__option-group--use-checkbox){cursor:default}sd-select-option-group .sd-select__option-group.sd-select__option-group--group{padding-left:12px;background-color:#f5faff !important;color:#333333 !important;font-weight:700}sd-select-option-group .sd-select__option-group.sd-select__option-group--subgroup{padding-left:20px;background-color:#f9f9f9 !important;color:#333333 !important;font-weight:500}sd-select-option-group .sd-select__option-group sd-checkbox__bg{border-color:#888888}sd-select-option-group .sd-select__option-group__label-wrapper{display:flex;width:100%;column-gap:8px;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}sd-select-option-group .sd-select__option-group__label-wrapper sd-checkbox{flex-shrink:0}sd-select-option-group .sd-select__option-group__label-wrapper .sd-select__option-group-label{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}sd-select-option-group .sd-select__option-group__label-wrapper .sd-select__option-group__count-indicator{width:fit-content;flex-shrink:0;font-size:12px;font-weight:500;color:#888888}sd-select-option-group .sd-select__option-group--focused{background-color:#e6f1ff}sd-select-option-group .sd-select__option-group--selected.sd-select__option-group--item:not(:hover):not(.sd-select__option-group--use-checkbox),sd-select-option-group .sd-select__option-group--focused.sd-select__option-group--item:not(:hover):not(.sd-select__option-group--use-checkbox){color:#0075ff;font-weight:700}sd-select-option-group .sd-select__option-group--disabled{color:#aaaaaa;cursor:not-allowed}sd-select-option-group .sd-select__option-group:hover:not(.sd-select__option-group--disabled){background-color:#0075ff;color:white}sd-select-option-group .sd-select__option-group:hover.sd-select__option-group--selected.sd-select__option-group--item sd-checkbox .sd-checkbox__bg{border-color:white !important}";const p=class{constructor(t){o(this,t);this.optionClick=e(this,"optionClick")}get el(){return t(this)}option;index;isSelected=false;isFocused=false;optionStyle;disabled=false;useCheckbox=false;useIndicator=true;countInfo={selectedCount:0,totalCount:0};isHovered=false;async isDisabled(){return!!this.option.disabled||this.option.type==="group"||this.option.type==="subgroup"}optionClick;handleClick=(o,e,t)=>{t.stopPropagation();if(o.type==="group"||o.type==="subgroup"){this.optionClick.emit({option:this.option,isSelected:e,index:this.index,event:t});return}if(!this.option.disabled&&!this.disabled){this.optionClick.emit({option:this.option,isSelected:e,index:this.index,event:t})}};render(){return s("div",{key:"ab10e48405e8457f1319518f9790c5dd94d1b5e6",class:{"sd-select__option-group":true,"sd-select__option-group--selected":!!this.isSelected,"sd-select__option-group--disabled":!!this.option.disabled,"sd-select__option-group--focused":this.isFocused,"sd-select__option-group--use-checkbox":this.useCheckbox,"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:o=>this.handleClick(this.option,this.isSelected,o)},s("div",{key:"e9b0636bc98818aa48b5d486c3e5b4c216b76046",class:"sd-select__option-group__label-wrapper"},this.useCheckbox&&s("sd-checkbox",{key:"b7495da88ddad187588569c64235ccc1697466fe",checked:this.isSelected,disabled:this.option.disabled,onClick:o=>{o.preventDefault();this.handleClick(this.option,this.isSelected,o)}}),s("span",{key:"f8a51d2ea1a99ae17a1ba79fb6f802f0c2a27be1",class:"sd-select__option-group-label"},this.option.label),this.useIndicator&&this.option.type!=="item"&&s("span",{key:"ee29e4503321462981c6d6fe497d70f271e5f814",class:"sd-select__option-group__count-indicator"},`(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))}};p.style=i;export{p as sd_select_option_group};
-//# sourceMappingURL=p-1b6b3344.entry.js.map

package/dist/design-system/p-5e0ac5e6.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as t,a as s,h as i,H as l}from"./p-B2T3tS5r.js";import{B as o,S as r}from"./p-C2JaR3A6.js";const p=".sd-select-multiple-group__dropdown{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-select-multiple-group__dropdown::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-select-multiple-group__dropdown::-webkit-scrollbar:horizontal{height:8px}.sd-select-multiple-group__dropdown::-webkit-scrollbar:vertical{width:8px}.sd-select-multiple-group__dropdown::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-select-multiple-group__dropdown::-webkit-scrollbar-track{background-color:transparent}sd-select-multiple-group{display:inline-block;height:fit-content}sd-select-multiple-group .sd-select-multiple-group{display:flex;flex-wrap:nowrap;width:var(--select-width, 200px);cursor:pointer;user-select:none;border:1px solid #aaaaaa;border-radius:4px;background-color:white;color:#333333}sd-select-multiple-group .sd-select-multiple-group:hover:not(.sd-select-multiple-group--disabled){background:#f6f6f6}sd-select-multiple-group .sd-select-multiple-group.sd-select-multiple-group--disabled{cursor:not-allowed;background-color:#eeeeee;border-color:#cccccc}sd-select-multiple-group .sd-select-multiple-group.sd-select-multiple-group--disabled .sd-select-multiple-group__label{border-right:1px solid #cccccc}sd-select-multiple-group .sd-select-multiple-group.sd-select-multiple-group--disabled .sd-select-multiple-group__trigger{color:#888888}sd-select-multiple-group .sd-select-multiple-group.sd-select-multiple-group--disabled .sd-select-multiple-group__trigger:focus,sd-select-multiple-group .sd-select-multiple-group.sd-select-multiple-group--disabled .sd-select-multiple-group__trigger:focus-visible,sd-select-multiple-group .sd-select-multiple-group.sd-select-multiple-group--disabled .sd-select-multiple-group__trigger:focus-within{outline:none !important}sd-select-multiple-group .sd-select-multiple-group__label{font-size:12px;font-weight:500;color:#333333;padding:4px 12px;border-right:1px solid #cccccc;border-radius:4px 0 0 4px;background-color:#f6f6f6}sd-select-multiple-group .sd-select-multiple-group__container{position:relative;width:100%;display:flex}sd-select-multiple-group .sd-select-multiple-group__container .sd-select-multiple-group__trigger{padding:4px 20px 4px 12px;display:flex;width:100%;align-items:center}sd-select-multiple-group .sd-select-multiple-group__container .sd-select-multiple-group__trigger .sd-select-multiple-group__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400}sd-select-multiple-group .sd-select-multiple-group__container .sd-select-multiple-group__trigger .sd-select-multiple-group__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select-multiple-group .sd-select-multiple-group__container .sd-select-multiple-group__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease}sd-select-multiple-group .sd-select-multiple-group__container .sd-select-multiple-group__arrow--open{transform:rotate(180deg)}.sd-select-multiple-group__dropdown{width:var(--select-width, 200px);max-height:var(--select-dropdown-height, 260px);padding-bottom:2px;background-color:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);border-radius:4px;overflow-y:auto;color:#333333}.sd-select-multiple-group__dropdown .sd-select-multiple-group__search-container{position:sticky;top:0;display:flex;width:100%;background-color:white;align-items:center;padding:4px 8px}.sd-select-multiple-group__dropdown .sd-select-multiple-group__search-container sd-input{width:100%}.sd-select-multiple-group__dropdown .sd-select-multiple-group__search-container--scrolled{box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}.sd-select-multiple-group__dropdown .sd-select-multiple-group__option-placeholder{padding:4px 12px;font-size:12px;line-height:20px}";const n=class extends o{constructor(s){super();e(this,s);this.sdChange=t(this,"sdChange");this.dropDownShow=t(this,"dropDownShow")}get el(){return s(this)}value=null;label="";options=[];placeholder="선택";optionPlaceholder="옵션이 없습니다.";width="200px";dropdownHeight="260px";disabled=false;clearable=false;searchable=false;useCheckbox=false;containerStyle={};triggerStyle={};dropdownStyle={};optionStyle={};labelStyle={};optionRenderer;filteredOptions=this.options;isOpen=false;searchText=null;itemIndex=-1;isScrolled=false;sdChange;dropDownShow;selectRef;searchRef;optionRef;dropdownRef;valueChanged(){this.sdChange?.emit(this.value)}optionsChanged(){this.filteredOptions=this.options;this.filterOptions()}searchTextChanged(){this.filterOptions()}async itemIndexChanged(e,t){if(this.searchable){const e=await this.getNativeInputElement();if(this.itemIndex===-1){e?.focus();return}else if(e?.matches(":focus")){e?.blur()}}const s=Array.from(this.dropdownRef?.querySelectorAll(".sd-select-multiple-group__dropdown sd-select-option-group")||[]);const i=s?.[this.itemIndex];if(!i||!this.isOpen)return;this.optionRef=i;const l=await this.optionRef.isDisabled();if(l){e>t?this.itemIndex++:this.itemIndex--;return}this.scrollToOption(i)}async isOpenChanged(){this.onDropdownToggle(this.isOpen);const e=this.getSelectedOption();if(!e){this.itemIndex=-1}else{this.itemIndex=this.options.indexOf(e[0])}this.dropDownShow?.emit({isOpen:this.isOpen});if(this.isOpen===false)return;await new Promise((e=>setTimeout(e,10)));const t=Array.from(this.dropdownRef?.querySelectorAll(".sd-select-multiple__dropdown sd-select-item")||[]);const s=t?.[this.itemIndex];if(this.searchable){const e=await this.getNativeInputElement();e?.focus()}if(!s)return;await new Promise((e=>setTimeout(e,10)));this.scrollToOption(s)}componentWillLoad(){this.filteredOptions=this.options;this.initializeEvent()}disconnectedCallback(){this.cleanupEvent()}handleDocumentClick(e){if(!this.selectRef?.contains(e.target)){this.isOpen=false}}handleDocumentKeydown(e){e.stopPropagation();const t=["ArrowDown","ArrowUp","Enter","Escape"];if(!t.includes(e.key))return;e.preventDefault();switch(e.key){case"ArrowDown":case"ArrowUp":const t=new r(this.searchable,this.filteredOptions);const s=t.getNextIndex(this.itemIndex,e.key);this.itemIndex=s;break;case"Enter":const i=this.filteredOptions[this.itemIndex];if(i&&!i.disabled){this.handleOptionSelection(i)}break;case"Escape":this.isOpen=false;break}}handleTriggerClick=e=>{e.stopPropagation();if(!this.disabled){this.isOpen=!this.isOpen;this.dropDownShow?.emit({isOpen:this.isOpen})}};handleOptionClick=e=>{const{option:t,event:s}=e;s.stopPropagation();if(t.type==="group")this.handleGroupOptionClick(e);if(t.type==="subgroup")this.handleSubGroupOptionClick(e);if(t.type==="item")this.handleOptionSelection(t)};handleGroupOptionClick=e=>{const{option:t,isSelected:s}=e;const i=this.filteredOptions.filter((e=>e.parent===t.value&&!e.disabled));i.forEach((e=>{this.handleSubGroupOptionClick({option:e,isSelected:s||s===null})}))};handleSubGroupOptionClick=e=>{const{option:t,isSelected:s}=e;const i=this.filteredOptions.filter((e=>e.parent===t.value&&!e.disabled));if(s||s===null){this.value=this.value?.filter((e=>!i.some((t=>t.value===e.value))))||null}else{const e=i.filter((e=>!this.value?.some((t=>t.value===e.value))));this.value=[...this.value||[],...e]}};filterOptions(){if(!this.searchText||this.searchText.trim()===""){this.filteredOptions=this.options;return}const e=this.searchText.toLowerCase();const t=new Set;this.options.forEach((s=>{if(s.label.toLowerCase().includes(e)){t.add(s);this.addParentGroups(s,t)}}));this.filteredOptions=this.options.filter((e=>t.has(e)))}addParentGroups(e,t){if(!e.parent)return;const s=this.options.find((t=>t.value===e.parent));if(s&&!t.has(s)){t.add(s);this.addParentGroups(s,t)}}getSelectedOption(){return this.options.filter((e=>this.value?.includes(e)))}handleDropdownScroll=e=>{const t=e.target;const s=t.scrollTop;this.isScrolled=s>0};async getNativeInputElement(){if(this.searchRef){return this.searchRef.getNativeElement()}return null}handleOptionSelection=e=>{if(!e||e.disabled)return;const t=this.value?.some((t=>t.value===e.value));if(t){this.value=this.value?.filter((t=>t.value!==e.value))||null}else{this.value=[...this.value||[],e]}};getAllItemsUnderOption(e){const t=this.filteredOptions.filter((t=>t.parent===e.value&&!t.disabled));if(e.type==="group"){const e=t.filter((e=>e.type==="subgroup"));const s=[];e.forEach((e=>{const t=this.filteredOptions.filter((t=>t.parent===e.value&&t.type==="item"&&!t.disabled));s.push(...t)}));const i=t.filter((e=>e.type==="item"));s.push(...i);return s}return t.filter((e=>e.type==="item"))}isAllChildrenSelected(e){const t=this.getAllItemsUnderOption(e);if(t.length===0)return false;const s=t.filter((e=>this.value?.some((t=>t.value===e.value))));if(s.length===t.length)return true;if(s.length>0)return null;return false}getChildrenOptions(e){if(e.type==="group"){const t=this.getAllItemsUnderOption(e);const s=t.filter((e=>this.value?.some((t=>t.value===e.value))));return{selectedCount:s.length,totalCount:t.length}}const t=this.filteredOptions.filter((t=>t.parent===e.value));return{selectedCount:t.filter((e=>this.value?.some((t=>t.value===e.value)))).length,totalCount:t.length}}closeDropdown(){this.isOpen=false}scrollToOption(e){if(!this.dropdownRef||!e)return;const t=this.dropdownRef;const s=e.offsetTop;const i=e.offsetHeight;const l=t.scrollTop;const o=t.clientHeight;const r=t.querySelector(".sd-select__search-container");const p=r?r.offsetHeight:0;const n=l+p;const c=l+o;if(s<n){t.scrollTop=s-p}else if(s+i>c){t.scrollTop=s+i-o+p}}render(){const e={"--select-width":this.width||"200px","--select-dropdown-height":this.dropdownHeight||"260px"};return i(l,{key:"25cb748a149def1b633f7e6baf77e55a57c6d43b",style:e},i("div",{key:"14fabf19488e6370612eb3f29fb97d0077ddb0f0",class:{"sd-select-multiple-group":true,"sd-select-multiple-group--open":this.isOpen,"sd-select-multiple-group--disabled":this.disabled},style:this.containerStyle,ref:e=>this.selectRef=e},this.renderLabel(this.label,this.labelStyle),i("div",{key:"4f762e4ab93da2cb1e684d85af9c3abf5f1304e4",class:"sd-select-multiple-group__container"},this.renderTrigger(),this.renderDropdown())))}renderLabel(e,t){if(!e)return null;return i("label",{class:"sd-select-multiple-group__label",style:t},e)}renderTrigger(){const e=this.getSelectedOption();return i("div",{class:"sd-select-multiple-group__trigger",tabindex:this.disabled?-1:0,onClick:this.handleTriggerClick,style:this.triggerStyle},i("span",{class:"sd-select-multiple-group__value"},!e?"선택":e.length?e.map((e=>e.label)).join(", "):this.placeholder),this.clearable&&e?.length>0&&!this.disabled&&i("sd-icon",{key:"close-icon",name:"close",size:10,color:"#888",class:"sd-select-multiple-group__clear",onClick:e=>{e.stopPropagation();this.value=null}}),i("sd-icon",{key:"arrow-icon",name:"arrowDown",color:"#888",class:{"sd-select-multiple-group__arrow":true,"sd-select-multiple-group__arrow--open":this.isOpen}}))}renderDropdown(){const e={"--select-width":this.width||"200px","--select-dropdown-height":this.dropdownHeight||"260px"};if(this.isOpen===false)return null;return i("sd-portal",{open:this.isOpen,parentRef:this.selectRef,onSdClose:this.closeDropdown},i("div",{class:"sd-select-multiple-group__dropdown",style:{...e,...this.dropdownStyle},onScroll:this.handleDropdownScroll,ref:e=>this.dropdownRef=e},this.searchable&&i("div",{class:{"sd-select-multiple-group__search-container":true,"sd-select-multiple-group__search-container--scrolled":this.isScrolled},onClick:e=>e.stopPropagation()},i("sd-input",{ref:e=>this.searchRef=e,value:this.searchText,placeholder:"검색",clearable:true,inputStyle:{"padding-left":"8px"},autofocus:true,onSdInput:e=>{this.searchText=String(e?.detail)},onSdFocus:()=>{this.itemIndex=-1},onKeyDown:e=>{if(e.code==="Enter")e.stopPropagation()}},i("sd-icon",{name:"search",size:16,color:"#737373",slot:"prefix"}))),this.filteredOptions.length>0?this.filteredOptions.map(((e,t)=>i("slot",{name:`option-${e.value}`},i("sd-select-option-group",{option:e,index:t,isSelected:e.type==="item"?this.value?.some((t=>t.value===e.value)):this.isAllChildrenSelected(e),isFocused:t===this.itemIndex,optionStyle:this.optionStyle,onOptionClick:({detail:t})=>{if(e.type!=="item"&&!this.useCheckbox){return}this.handleOptionClick(t)},useCheckbox:this.useCheckbox,...e.type!=="item"&&{countInfo:this.getChildrenOptions(e)}})))):i("slot",{name:"option-placeholder"},i("div",{class:"sd-select-multiple-group__option-placeholder",style:this.optionStyle},this.optionPlaceholder))))}static get watchers(){return{value:["valueChanged"],options:["optionsChanged"],searchText:["searchTextChanged"],itemIndex:["itemIndexChanged"],isOpen:["isOpenChanged"]}}};n.style=p;export{n as sd_select_multiple_group};
-//# sourceMappingURL=p-5e0ac5e6.entry.js.map

package/dist/design-system/p-5e0ac5e6.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["registerInstance","createEvent","getElement","h","Host","BaseDropdownEvent","SelectKeyboardNavigation","sdSelectMultipleGroupCss","SdSelectMultipleGroup","constructor","hostRef","super","this","sdChange","dropDownShow","el","value","label","options","placeholder","optionPlaceholder","width","dropdownHeight","disabled","clearable","searchable","useCheckbox","containerStyle","triggerStyle","dropdownStyle","optionStyle","labelStyle","optionRenderer","filteredOptions","isOpen","searchText","itemIndex","isScrolled","selectRef","searchRef","optionRef","dropdownRef","valueChanged","emit","optionsChanged","filterOptions","searchTextChanged","itemIndexChanged","newIndex","oldIndex","searchInput","getNativeInputElement","focus","matches","blur","optionElements","Array","from","querySelectorAll","currentItem","isOptionDisabled","isDisabled","scrollToOption","isOpenChanged","onDropdownToggle","selectedOption","getSelectedOption","indexOf","Promise","resolve","setTimeout","componentWillLoad","initializeEvent","disconnectedCallback","cleanupEvent","handleDocumentClick","event","contains","target","handleDocumentKeydown","keyboardEvent","stopPropagation","targetKey","includes","key","preventDefault","keyboardNavigation","nextIndex","getNextIndex","handleOptionSelection","handleTriggerClick","handleOptionClick","detail","option","type","handleGroupOptionClick","handleSubGroupOptionClick","isSelected","childOptions","filter","opt","parent","forEach","subgroup","selected","some","child","newSelections","trim","searchTerm","toLowerCase","matchedOptions","Set","add","addParentGroups","has","matchedSet","parentOption","find","handleDropdownScroll","scrollTop","getNativeElement","isAlreadySelected","getAllItemsUnderOption","subgroupOptions","allItemsUnderGroup","itemsUnderSubgroup","push","directItems","isAllChildrenSelected","groupOption","allItems","length","selectedItems","item","getChildrenOptions","selectedCount","totalCount","children","val","closeDropdown","optionElement","dropdown","optionTop","offsetTop","optionHeight","offsetHeight","dropdownScrollTop","clientHeight","searchContainer","querySelector","searchOffset","visibleTop","visibleBottom","render","style","class","ref","renderLabel","renderTrigger","renderDropdown","tabindex","onClick","map","join","name","size","color","open","parentRef","onSdClose","onScroll","inputStyle","autofocus","onSdInput","String","onSdFocus","onKeyDown","e","code","slot","index","isFocused","onOptionClick","countInfo","watchers"],"sources":["0"],"mappings":"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","ignoreList":[]}