@sellmate/design-system 0.0.56 → 1.0.0

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

@@ -1,12 +1,18 @@
-import { p as proxyCustomElement, d as createEvent, h, c as Host, t as transformTag } from './p-CQBrru3e.js';
-import { B as BaseDropdownEvent, S as SelectKeyboardNavigation } from './p-B3H_uLbl.js';
-import { d as defineCustomElement$6 } from './p-Bj4u0G5b.js';
-import { d as defineCustomElement$5 } from './p-BHHbLFXg.js';
-import { d as defineCustomElement$4 } from './p-C4kdHNdl.js';
-import { d as defineCustomElement$3 } from './p-B8yBkdjE.js';
-import { d as defineCustomElement$2 } from './p-O3tgQfvT.js';
+import { p as proxyCustomElement, d as createEvent, h, t as transformTag } from './p-YLoygqPr.js';
+import { B as BaseDropdownEvent, S as SelectKeyboardNavigation } from './p-Dt-KAeBx.js';
+import { d as defineCustomElement$c } from './p-CdGD6AqM.js';
+import { d as defineCustomElement$b } from './p-UZEmuyIR.js';
+import { d as defineCustomElement$a } from './p-CpRkV7pg.js';
+import { d as defineCustomElement$9 } from './p-CVMprLsE.js';
+import { d as defineCustomElement$8 } from './p-DnQF6htq.js';
+import { d as defineCustomElement$7 } from './p-D54IEoI6.js';
+import { d as defineCustomElement$6 } from './p-DbebUQwg.js';
+import { d as defineCustomElement$5 } from './p-s4Mg_xSz.js';
+import { d as defineCustomElement$4 } from './p-JF61vPAh.js';
+import { d as defineCustomElement$3 } from './p-RhBqdixM.js';
+import { d as defineCustomElement$2 } from './p-7xekTQRB.js';
 
-const sdSelectMultipleCss = () => `.sd-select-multiple__dropdown{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-select-multiple__dropdown::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-select-multiple__dropdown::-webkit-scrollbar:horizontal{height:8px}.sd-select-multiple__dropdown::-webkit-scrollbar:vertical{width:8px}.sd-select-multiple__dropdown::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-select-multiple__dropdown::-webkit-scrollbar-track{background-color:transparent}:host{display:inline-block;height:fit-content;position:relative}.sd-select-multiple{display:flex;flex-wrap:nowrap;width:var(--select-width, 200px);height:28px;cursor:pointer;user-select:none;border:1px solid #aaaaaa;border-radius:4px;background-color:white}.sd-select-multiple:hover:not(.sd-select-multiple--disabled){background:#f6f6f6}.sd-select-multiple.sd-select-multiple--disabled{cursor:not-allowed;background-color:#eeeeee;border-color:#cccccc}.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__label{border-right:1px solid #cccccc}.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__trigger{color:#888888}.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__trigger:focus,.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__trigger:focus-visible,.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__trigger:focus-within{outline:none !important}.sd-select-multiple__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__container{position:relative;width:100%;display:flex}.sd-select-multiple__container .sd-select-multiple__trigger{padding:4px 20px 4px 12px;display:flex;width:100%;align-items:center}.sd-select-multiple__container .sd-select-multiple__trigger .sd-select-multiple__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400}.sd-select-multiple__container .sd-select-multiple__trigger .sd-select-multiple__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}.sd-select-multiple__container .sd-select-multiple__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease}.sd-select-multiple__container .sd-select-multiple__arrow--open{transform:rotate(180deg)}.sd-select-multiple__dropdown{width:var(--select-dropdown-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__dropdown .sd-select-multiple__search-container{position:sticky;top:0;display:flex;width:100%;background-color:white;align-items:center;padding:4px 8px;z-index:1}.sd-select-multiple__dropdown .sd-select-multiple__search-container--scrolled{box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}.sd-select-multiple__dropdown .sd-select-multiple__option-placeholder{padding:4px 12px;font-size:12px;line-height:20px;text-align:left}`;
+const sdSelectMultipleCss = () => `sd-select-multiple{display:inline-flex;flex-flow:column nowrap;width:fit-content;height:fit-content}sd-select-multiple *:focus,sd-select-multiple *:focus-visible,sd-select-multiple *:focus-within{outline:none !important}sd-select-multiple .sd-select-multiple{width:100%}sd-select-multiple .sd-select-multiple .sd-select-multiple__trigger{padding:4px 28px 4px 12px;display:flex;width:100%;align-items:center}sd-select-multiple .sd-select-multiple .sd-select-multiple__trigger .sd-select-multiple__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400;text-align:left}sd-select-multiple .sd-select-multiple .sd-select-multiple__trigger .sd-select-multiple__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select-multiple .sd-select-multiple__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease;margin-left:8px}sd-select-multiple .sd-select-multiple__arrow--open{transform:rotate(180deg)}`;
 
 const SdSelectMultiple$1 = /*@__PURE__*/ proxyCustomElement(class SdSelectMultiple extends BaseDropdownEvent {
     constructor(registerHost) {
@@ -14,104 +20,86 @@ const SdSelectMultiple$1 = /*@__PURE__*/ proxyCustomElement(class SdSelectMultip
         if (registerHost !== false) {
             this.__registerHost();
         }
-        this.sdChange = createEvent(this, "sdChange");
-        this.dropDownShow = createEvent(this, "dropDownShow");
+        this.update = createEvent(this, "sdUpdate");
+        this.dropDownShow = createEvent(this, "sdDropDownShow");
     }
     get el() { return this; }
     // props
     value = null;
-    label = '';
     options = [];
     placeholder = '선택';
     optionPlaceholder = '옵션이 없습니다.';
     width = '200px';
     dropdownHeight = '260px';
+    autoFocus = false;
     disabled = false;
     clearable = false;
     searchable = false;
+    // props - select multiple specific
+    useAll = false;
     useCheckbox = false;
-    // props - custom slots
+    // props - label
+    label = '';
+    useLabelRequired = false;
+    labelTooltip = '';
+    labelTooltipProps = null;
+    // props - form
+    name;
+    rules = [];
+    error = false;
     optionRenderer;
     // states
-    filteredOptions = this.options;
     isOpen = false;
-    searchText = null;
     itemIndex = -1;
     isScrolled = false;
     // events
-    sdChange;
+    update;
     dropDownShow;
     selectRef;
-    searchRef;
-    optionRef;
-    dropdownRef;
-    async open() {
+    triggerRef;
+    formField;
+    filteredOptions = this.options;
+    dropDownWidth = this.width;
+    async sdOpen() {
         this.isOpen = true;
     }
-    valueChanged() {
-        this.sdChange?.emit(this.value);
+    async sdValidate() {
+        this.formField?.sdValidate();
     }
-    optionsChanged() {
-        this.filteredOptions = this.options;
-        this.filterOptions();
+    async sdReset() {
+        this.formField?.sdReset();
     }
-    searchTextChanged() {
-        this.filterOptions();
+    async sdResetValidate() {
+        this.formField?.sdResetValidation();
     }
-    async itemIndexChanged(newIndex, oldIndex) {
-        if (this.searchable) {
-            const searchInput = await this.getNativeInputElement();
-            if (this.itemIndex === -1) {
-                searchInput?.focus();
-                return;
-            }
-            else if (searchInput?.matches(':focus')) {
-                searchInput?.blur();
-            }
-        }
-        const optionElements = Array.from(this.dropdownRef?.querySelectorAll('.sd-select-multiple__dropdown sd-select-option') || []);
-        const currentItem = optionElements?.[this.itemIndex];
-        if (!currentItem || !this.isOpen)
-            return;
-        this.optionRef = currentItem;
-        const isOptionDisabled = await this.optionRef.isDisabled();
-        if (isOptionDisabled) {
-            newIndex > oldIndex ? this.itemIndex++ : this.itemIndex--;
-            return;
-        }
-        this.scrollToOption(currentItem);
+    async sdFocus() {
+        this.formField?.sdFocus();
+    }
+    valueChanged() {
+        this.update?.emit(this.value);
     }
     async isOpenChanged() {
         // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지
         this.onDropdownToggle(this.isOpen);
-        const selectedOption = this.getSelectedOption();
-        if (!selectedOption) {
-            this.itemIndex = -1;
-        }
-        else {
-            this.itemIndex = this.options.indexOf(selectedOption[0]);
-        }
         this.dropDownShow?.emit({ isOpen: this.isOpen });
-        if (this.isOpen === false)
-            return;
-        await new Promise(resolve => setTimeout(resolve, 10));
-        const optionElements = Array.from(this.dropdownRef?.querySelectorAll('.sd-select-multiple__dropdown sd-select-item') || []);
-        const currentItem = optionElements?.[this.itemIndex];
-        // 드롭다운이 열릴 때 검색 입력에 포커스
-        if (this.searchable) {
-            const searchInput = await this.getNativeInputElement();
-            searchInput?.focus();
+        if (this.isOpen === false) {
+            await this.formField?.sdValidate();
         }
-        if (!currentItem)
-            return;
-        await new Promise(resolve => setTimeout(resolve, 10)); // 추가 딜레이
-        this.scrollToOption(currentItem);
     }
-    connectedCallback() {
-        // props가 모두 설정된 후에 실행되므로 올바른 options 값을 가져올 수 있음
-        this.filteredOptions = this.options;
+    componentWillLoad() {
         this.initializeEvent(); // global dropdown Manager에 등록 + 이벤트 핸들러 초기화
     }
+    componentDidLoad() {
+        if (this.autoFocus) {
+            this.selectRef?.focus();
+        }
+    }
+    // render 이후 label을 제외한 trigger의 너비를 기준으로 dropdown 너비 설정
+    componentDidRender() {
+        const trigger = this.triggerRef;
+        const rect = trigger?.getBoundingClientRect();
+        this.dropDownWidth = rect?.width ? `${rect.width}px` : this.width;
+    }
     disconnectedCallback() {
         this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리
     }
@@ -144,44 +132,6 @@ const SdSelectMultiple$1 = /*@__PURE__*/ proxyCustomElement(class SdSelectMultip
                 break;
         }
     }
-    // event handlers
-    handleTriggerClick = (event) => {
-        event.stopPropagation();
-        if (!this.disabled) {
-            this.isOpen = !this.isOpen;
-            this.dropDownShow?.emit({ isOpen: this.isOpen });
-        }
-    };
-    handleOptionClick = (detail) => {
-        const { option, event } = detail;
-        event.stopPropagation();
-        this.handleOptionSelection(option);
-    };
-    filterOptions() {
-        if (!this.searchText || this.searchText.trim() === '') {
-            // 검색어가 없으면 전체 옵션 표시
-            this.filteredOptions = this.options;
-        }
-        else {
-            // 검색어가 있으면 필터링
-            this.filteredOptions = this.options.filter(option => option.label.toLowerCase().includes(this.searchText.toLowerCase()));
-        }
-    }
-    getSelectedOption() {
-        return this.options.filter(option => this.value?.includes(option));
-    }
-    handleDropdownScroll = (event) => {
-        const target = event.target;
-        const scrollTop = target.scrollTop;
-        // 스크롤이 조금이라도 되면 그림자 표시
-        this.isScrolled = scrollTop > 0;
-    };
-    async getNativeInputElement() {
-        if (this.searchRef) {
-            return this.searchRef.getNativeElement();
-        }
-        return null;
-    }
     handleOptionSelection = (option) => {
         if (!option || option.disabled)
             return;
@@ -195,134 +145,149 @@ const SdSelectMultiple$1 = /*@__PURE__*/ proxyCustomElement(class SdSelectMultip
             this.value = [...(this.value || []), option];
         }
     };
+    getSelectedOption() {
+        return this.options.filter(option => this.value?.includes(option));
+    }
     closeDropdown() {
         this.isOpen = false;
     }
-    scrollToOption(optionElement) {
-        if (!this.dropdownRef || !optionElement)
-            return;
-        const dropdown = this.dropdownRef;
-        const optionTop = optionElement.offsetTop;
-        const optionHeight = optionElement.offsetHeight;
-        const dropdownScrollTop = dropdown.scrollTop;
-        const dropdownHeight = dropdown.clientHeight;
-        const searchContainer = dropdown.querySelector('.sd-select__search-container');
-        const searchOffset = searchContainer ? searchContainer.offsetHeight : 0;
-        const visibleTop = dropdownScrollTop + searchOffset;
-        const visibleBottom = dropdownScrollTop + dropdownHeight;
-        if (optionTop < visibleTop) {
-            dropdown.scrollTop = optionTop - searchOffset;
-        }
-        else if (optionTop + optionHeight > visibleBottom) {
-            dropdown.scrollTop = optionTop + optionHeight - dropdownHeight + searchOffset;
+    handleTriggerClick = (event) => {
+        event.stopPropagation();
+        if (!this.disabled) {
+            this.isOpen = !this.isOpen;
+            this.dropDownShow?.emit({ isOpen: this.isOpen });
         }
-    }
-    // render method
+    };
+    handleOptionClick = (detail) => {
+        const { option, event } = detail;
+        event.stopPropagation();
+        this.handleOptionSelection(option);
+    };
     render() {
-        const style = {
-            '--select-width': this.width || '200px',
-            '--select-dropdown-height': this.dropdownHeight || '260px',
-        };
-        return (h(Host, { key: 'ff0653e24d97db442399017df0380a17f96dffe4', style: style }, h("div", { key: 'd5f6c3425abfcfdd81e47529659aa591fc604b0b', class: {
+        return (h("sd-field", { key: 'cc40c09b8c1ea2aa049d12857c6cc80cd5a5966b', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, h("div", { key: '0d90b8368287d7e67a384234a976da5d387b065b', class: {
                 'sd-select-multiple': true,
                 'sd-select-multiple--open': this.isOpen,
                 'sd-select-multiple--disabled': this.disabled,
-            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), h("div", { key: 'ee82c8383eb3e98729b2d55065b66e9a84cf5215', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
-    }
-    renderLabel(label) {
-        if (!label)
-            return null;
-        return h("label", { class: "sd-select-multiple__label" }, label);
+                'sd-select-multiple--error': !!this.error,
+            }, style: { '--select-width': this.width || '200px' }, ref: el => (this.selectRef = el) }, this.renderTrigger(), this.renderDropdown())));
     }
     renderTrigger() {
         const selectedOption = this.getSelectedOption();
-        return (h("div", { class: "sd-select-multiple__trigger", tabindex: this.disabled ? -1 : 0, onClick: this.handleTriggerClick }, h("span", { class: "sd-select-multiple__value" }, !selectedOption
-            ? '선택'
-            : selectedOption.length
-                ? selectedOption.map(option => option.label).join(', ')
-                : this.placeholder), this.clearable && selectedOption?.length > 0 && !this.disabled && (h("sd-icon", { key: "close-icon", name: "close", size: 10, color: "#888", class: "sd-select-multiple__clear", onClick: event => {
+        return (h("div", { class: "sd-select-multiple__trigger", tabindex: this.disabled ? -1 : 0, onClick: this.handleTriggerClick, ref: el => (this.triggerRef = el) }, h("span", { class: "sd-select-multiple__value" }, !selectedOption || selectedOption.length === 0
+            ? this.placeholder
+            : selectedOption.map(option => option.label).join(', ')), this.clearable && selectedOption?.length > 0 && !this.disabled && (h("sd-icon", { key: "close-icon", name: "close", size: 10, color: "#888", class: "sd-select-multiple__clear", onClick: async (event) => {
                 event.stopPropagation();
                 this.value = null;
+                await this.formField?.sdValidate();
             } })), h("sd-icon", { key: "arrow-icon", name: "arrowDown", color: "#888", class: { 'sd-select-multiple__arrow': true, 'sd-select-multiple__arrow--open': this.isOpen } })));
     }
     renderDropdown() {
         if (this.isOpen === false)
             return null;
-        return (h("sd-portal", { open: this.isOpen, parentRef: this.selectRef, onSdClose: this.closeDropdown }, h("div", { class: "sd-select-multiple__dropdown", onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (h("div", { class: {
-                'sd-select-multiple__search-container': true,
-                'sd-select-multiple__search-container--scrolled': this.isScrolled,
-            }, onClick: event => event.stopPropagation() }, h("sd-input", { ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdInput: event => {
-                this.searchText = String(event?.detail);
-            }, onSdFocus: () => {
-                this.itemIndex = -1;
-            } }, h("sd-icon", { name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" })))), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (h("slot", { name: `option-${option.value}` }, h("sd-select-option", { option: option, index: index, isSelected: this.value?.some(selected => selected.value === option.value), isFocused: index === this.itemIndex, onOptionClick: ({ detail }) => this.handleOptionClick(detail), useCheckbox: this.useCheckbox }))))) : (h("slot", { name: "option-placeholder" }, h("div", { class: 'sd-select-multiple__option-placeholder' }, this.optionPlaceholder))))));
+        const parentRef = (this.selectRef?.querySelector('.sd-select-multiple__trigger') ||
+            this.selectRef);
+        return (h("sd-portal", { open: this.isOpen, parentRef: parentRef, onSdClose: this.closeDropdown }, h("sd-select-dropdown", { value: this.value, options: this.options, itemIndex: this.itemIndex, width: this.dropDownWidth, dropdownHeight: this.dropdownHeight, searchable: this.searchable, optionPlaceholder: this.optionPlaceholder, useCheckbox: this.useCheckbox, useAll: this.useAll, onSdOptionClick: ({ detail }) => this.handleOptionClick(detail), onSdOptionFiltered: ({ detail }) => (this.filteredOptions = detail) })));
     }
     static get watchers() { return {
         "value": ["valueChanged"],
-        "options": ["optionsChanged"],
-        "searchText": ["searchTextChanged"],
-        "itemIndex": ["itemIndexChanged"],
         "isOpen": ["isOpenChanged"]
     }; }
     static get style() { return sdSelectMultipleCss(); }
-}, [772, "sd-select-multiple", {
+}, [768, "sd-select-multiple", {
         "value": [1040],
-        "label": [1],
         "options": [1040],
         "placeholder": [1],
         "optionPlaceholder": [1, "option-placeholder"],
         "width": [1],
         "dropdownHeight": [1, "dropdown-height"],
+        "autoFocus": [4, "auto-focus"],
         "disabled": [4],
         "clearable": [4],
         "searchable": [4],
+        "useAll": [4, "use-all"],
         "useCheckbox": [4, "use-checkbox"],
+        "label": [1],
+        "useLabelRequired": [4, "use-label-required"],
+        "labelTooltip": [1, "label-tooltip"],
+        "labelTooltipProps": [16],
+        "name": [1],
+        "rules": [16],
+        "error": [4],
         "optionRenderer": [16],
-        "filteredOptions": [32],
         "isOpen": [32],
-        "searchText": [32],
         "itemIndex": [32],
         "isScrolled": [32],
-        "open": [64]
+        "sdOpen": [64],
+        "sdValidate": [64],
+        "sdReset": [64],
+        "sdResetValidate": [64],
+        "sdFocus": [64]
     }, undefined, {
         "value": ["valueChanged"],
-        "options": ["optionsChanged"],
-        "searchText": ["searchTextChanged"],
-        "itemIndex": ["itemIndexChanged"],
         "isOpen": ["isOpenChanged"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["sd-select-multiple", "sd-checkbox", "sd-icon", "sd-input", "sd-portal", "sd-select-option"];
+    const components = ["sd-select-multiple", "sd-button", "sd-checkbox", "sd-field", "sd-floating-portal", "sd-icon", "sd-input", "sd-portal", "sd-select-dropdown", "sd-select-option", "sd-select-search-input", "sd-tooltip"];
     components.forEach(tagName => { switch (tagName) {
         case "sd-select-multiple":
             if (!customElements.get(transformTag(tagName))) {
                 customElements.define(transformTag(tagName), SdSelectMultiple$1);
             }
             break;
+        case "sd-button":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$c();
+            }
+            break;
         case "sd-checkbox":
             if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$6();
+                defineCustomElement$b();
+            }
+            break;
+        case "sd-field":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$a();
+            }
+            break;
+        case "sd-floating-portal":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$9();
             }
             break;
         case "sd-icon":
             if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$5();
+                defineCustomElement$8();
             }
             break;
         case "sd-input":
             if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$4();
+                defineCustomElement$7();
             }
             break;
         case "sd-portal":
             if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$3();
+                defineCustomElement$6();
+            }
+            break;
+        case "sd-select-dropdown":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$5();
             }
             break;
         case "sd-select-option":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$4();
+            }
+            break;
+        case "sd-select-search-input":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$3();
+            }
+            break;
+        case "sd-tooltip":
             if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$2();
             }

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

@@ -1 +1 @@
-{"file":"sd-select-multiple.js","mappings":"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","names":["SdSelectMultiple","__stencil_proxyCustomElement"],"sources":["src/components/sd-select-multiple/sd-select-multiple.scss?tag=sd-select-multiple","src/components/sd-select-multiple/sd-select-multiple.tsx"],"sourcesContent":["@import 'variables';\n@import 'extend';\n\n:host {\n display: inline-block;\n height: fit-content;\n position: relative;\n}\n\n.sd-select-multiple {\n display: flex;\n flex-wrap: nowrap;\n width: var(--select-width, 200px);\n height: 28px;\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-multiple--disabled) {\n  background: $grey_10;\n }\n\n &.sd-select-multiple--disabled {\n  cursor: not-allowed;\n  background-color: $grey_20;\n  border-color: $grey_45;\n\n  .sd-select-multiple__label {\n   border-right: 1px solid $grey_45;\n  }\n\n  .sd-select-multiple__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  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 }\n\n &__container {\n  position: relative;\n  width: 100%;\n  display: flex;\n\n  .sd-select-multiple__trigger {\n   padding: 4px 20px 4px 12px;\n   display: flex;\n   width: 100%;\n   align-items: center;\n\n   .sd-select-multiple__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   }\n\n   .sd-select-multiple__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-multiple__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-multiple__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\n .sd-select-multiple__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  z-index: 1;\n\n  &--scrolled {\n   box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.2);\n  }\n }\n\n .sd-select-multiple__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 Element,\n Event,\n EventEmitter,\n Host,\n Method,\n Prop,\n State,\n Watch,\n h,\n} from '@stencil/core';\nimport type { SelectOption, SelectMultipleEvents } from '../../types/select';\nimport { SelectKeyboardNavigation } from '../../utils/select-keyboard-navigation';\nimport { BaseDropdownEvent } from '../../utils/base-dropdown-event';\n\n@Component({\n tag: 'sd-select-multiple',\n styleUrl: 'sd-select-multiple.scss',\n})\nexport class SdSelectMultiple extends BaseDropdownEvent {\n @Element() el!: HTMLElement;\n\n // props\n @Prop({ mutable: true }) value: SelectOption[] | 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 @Prop() useCheckbox: 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<SelectMultipleEvents['sdChange']>;\n @Event() dropDownShow?: EventEmitter<SelectMultipleEvents['dropDownShow']>;\n\n private selectRef?: HTMLElement;\n private searchRef?: HTMLSdInputElement;\n private optionRef?: HTMLSdSelectOptionElement;\n private dropdownRef?: HTMLElement;\n\n @Method()\n async open() {\n  this.isOpen = true;\n }\n\n @Watch('value')\n valueChanged() {\n  this.sdChange?.emit(this.value);\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 = Array.from(\n   this.dropdownRef?.querySelectorAll('.sd-select-multiple__dropdown sd-select-option') || [],\n  );\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 @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 = -1;\n  } else {\n   this.itemIndex = this.options.indexOf(selectedOption[0]);\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 = Array.from(\n   this.dropdownRef?.querySelectorAll('.sd-select-multiple__dropdown sd-select-item') || [],\n  );\n  const currentItem = optionElements?.[this.itemIndex];\n\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 connectedCallback() {\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 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.handleOptionSelection(selectedOption);\n    }\n    break;\n   case 'Escape':\n    this.isOpen = false;\n    break;\n  }\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  this.handleOptionSelection(option);\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[] {\n  return this.options.filter(option => this.value?.includes(option));\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 handleOptionSelection = (option: SelectOption) => {\n  if (!option || option.disabled) return;\n\n  const isAlreadySelected = this.value?.some(opt => opt.value === option.value);\n  if (isAlreadySelected) {\n   // 이미 선택된 옵션인 경우, 선택 해제\n   this.value = this.value?.filter(opt => opt.value !== option.value) || null;\n  } else {\n   // 새로운 옵션 선택\n   this.value = [...(this.value || []), option];\n  }\n };\n\n closeDropdown() {\n  this.isOpen = false;\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-multiple': true,\n      'sd-select-multiple--open': this.isOpen,\n      'sd-select-multiple--disabled': this.disabled,\n     }}\n     ref={el => (this.selectRef = el)}\n    >\n     {this.renderLabel(this.label)}\n     <div class=\"sd-select-multiple__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-multiple__label\">{label}</label>;\n }\n\n private renderTrigger() {\n  const selectedOption = this.getSelectedOption();\n  return (\n   <div\n    class=\"sd-select-multiple__trigger\"\n    tabindex={this.disabled ? -1 : 0}\n    onClick={this.handleTriggerClick}\n   >\n    <span class=\"sd-select-multiple__value\">\n     {!selectedOption\n      ? '선택'\n      : selectedOption.length\n        ? selectedOption.map(option => option.label).join(', ')\n        : this.placeholder}\n    </span>\n    {this.clearable && selectedOption?.length > 0 && !this.disabled && (\n     <sd-icon\n      key=\"close-icon\"\n      name=\"close\"\n      size={10}\n      color=\"#888\"\n      class=\"sd-select-multiple__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-multiple__arrow': true, 'sd-select-multiple__arrow--open': this.isOpen }}\n    ></sd-icon>\n   </div>\n  );\n }\n\n private renderDropdown() {\n  if (this.isOpen === false) return null;\n  return (\n   <sd-portal open={this.isOpen} parentRef={this.selectRef} onSdClose={this.closeDropdown}>\n    <div\n     class=\"sd-select-multiple__dropdown\"\n     onScroll={this.handleDropdownScroll}\n     ref={el => (this.dropdownRef = el)}\n    >\n     {this.searchable && (\n      <div\n       class={{\n        'sd-select-multiple__search-container': true,\n        'sd-select-multiple__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={this.value?.some(selected => selected.value === option.value)}\n         isFocused={index === this.itemIndex}\n         onOptionClick={({ detail }: { detail: { option: SelectOption; event: Event } }) =>\n          this.handleOptionClick(detail)\n         }\n         useCheckbox={this.useCheckbox}\n        ></sd-select-option>\n       </slot>\n      ))\n     ) : (\n      <slot name=\"option-placeholder\">\n       <div class={'sd-select-multiple__option-placeholder'}>{this.optionPlaceholder}</div>\n      </slot>\n     )}\n    </div>\n   </sd-portal>\n  );\n }\n}\n"],"version":3}
+{"file":"sd-select-multiple.js","mappings":"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","names":["SdSelectMultiple","__stencil_proxyCustomElement"],"sources":["src/components/sd-select-multiple/sd-select-multiple.scss?tag=sd-select-multiple","src/components/sd-select-multiple/sd-select-multiple.tsx"],"sourcesContent":["@import 'variables';\n@import 'extend';\n\nsd-select-multiple {\n display: inline-flex;\n flex-flow: column nowrap;\n width: fit-content;\n height: fit-content;\n\n *:focus,\n *:focus-visible,\n *:focus-within {\n  outline: none !important;\n }\n\n .sd-select-multiple {\n  width: 100%;\n\n  .sd-select-multiple__trigger {\n   padding: 4px 28px 4px 12px;\n   display: flex;\n   width: 100%;\n   align-items: center;\n\n   .sd-select-multiple__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-multiple__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\n .sd-select-multiple__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  margin-left: 8px;\n\n  &--open {\n   transform: rotate(180deg);\n  }\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Method,\n Prop,\n State,\n Watch,\n h,\n} from '@stencil/core';\nimport type { SelectOption, SelectMultipleEvents } from '../../types/select';\nimport { SelectKeyboardNavigation } from '../../utils/select-keyboard-navigation';\nimport { BaseDropdownEvent } from '../../utils/base-dropdown-event';\nimport { Rule, SdTooltipProps } from '../../components';\n\n@Component({\n tag: 'sd-select-multiple',\n styleUrl: 'sd-select-multiple.scss',\n})\nexport class SdSelectMultiple extends BaseDropdownEvent {\n @Element() el!: HTMLElement;\n\n // props\n @Prop({ mutable: true }) value: SelectOption[] | null = null;\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() autoFocus: boolean = false;\n @Prop() disabled: boolean = false;\n @Prop() clearable: boolean = false;\n @Prop() searchable: boolean = false;\n\n // props - select multiple specific\n @Prop() useAll: boolean = false;\n @Prop() useCheckbox: boolean = false;\n\n // props - label\n @Prop() label: string = '';\n @Prop() useLabelRequired: boolean = false;\n @Prop() labelTooltip: string = '';\n @Prop() labelTooltipProps: SdTooltipProps | null = null;\n\n // props - form\n @Prop() name?: string;\n @Prop() rules?: Rule[] = [];\n @Prop() error?: boolean = false;\n\n @Prop() optionRenderer?: (option: SelectOption, index: number, isSelected: boolean) => any;\n\n // states\n @State() isOpen: boolean = false;\n @State() itemIndex: number = -1;\n @State() isScrolled: boolean = false;\n\n // events\n @Event({ eventName: 'sdUpdate' }) update?: EventEmitter<SelectMultipleEvents['sdUpdate']>;\n @Event({ eventName: 'sdDropDownShow' }) dropDownShow?: EventEmitter<\n  SelectMultipleEvents['dropDownShow']\n >;\n\n private selectRef?: HTMLElement;\n private triggerRef?: HTMLElement;\n private formField?: HTMLSdFieldElement;\n private filteredOptions = this.options;\n private dropDownWidth: string = this.width;\n\n @Method()\n async sdOpen() {\n  this.isOpen = true;\n }\n\n @Method()\n async sdValidate() {\n  this.formField?.sdValidate();\n }\n\n @Method()\n async sdReset() {\n  this.formField?.sdReset();\n }\n\n @Method()\n async sdResetValidate() {\n  this.formField?.sdResetValidation();\n }\n\n @Method()\n async sdFocus() {\n  this.formField?.sdFocus();\n }\n\n @Watch('value')\n valueChanged() {\n  this.update?.emit(this.value);\n }\n\n @Watch('isOpen')\n async isOpenChanged() {\n  // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지\n  this.onDropdownToggle(this.isOpen);\n  this.dropDownShow?.emit({ isOpen: this.isOpen });\n\n  if (this.isOpen === false) {\n   await this.formField?.sdValidate();\n  }\n }\n\n componentWillLoad() {\n  this.initializeEvent(); // global dropdown Manager에 등록 + 이벤트 핸들러 초기화\n }\n\n componentDidLoad() {\n  if (this.autoFocus) {\n   this.selectRef?.focus();\n  }\n }\n\n // render 이후 label을 제외한 trigger의 너비를 기준으로 dropdown 너비 설정\n componentDidRender() {\n  const trigger = this.triggerRef;\n  const rect = trigger?.getBoundingClientRect();\n  this.dropDownWidth = rect?.width ? `${rect.width}px` : this.width;\n }\n\n disconnectedCallback() {\n  this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리\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.handleOptionSelection(selectedOption);\n    }\n    break;\n   case 'Escape':\n    this.isOpen = false;\n    break;\n  }\n }\n\n private handleOptionSelection = (option: SelectOption) => {\n  if (!option || option.disabled) return;\n\n  const isAlreadySelected = this.value?.some(opt => opt.value === option.value);\n  if (isAlreadySelected) {\n   // 이미 선택된 옵션인 경우, 선택 해제\n   this.value = this.value?.filter(opt => opt.value !== option.value) || null;\n  } else {\n   // 새로운 옵션 선택\n   this.value = [...(this.value || []), option];\n  }\n };\n\n private getSelectedOption(): SelectOption[] {\n  return this.options.filter(option => this.value?.includes(option));\n }\n\n closeDropdown() {\n  this.isOpen = false;\n }\n\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  this.handleOptionSelection(option);\n };\n\n render() {\n  return (\n   <sd-field\n    label={this.label}\n    name={this.name}\n    rules={this.rules}\n    error={this.error}\n    disabled={this.disabled}\n    useLabelRequired={this.useLabelRequired}\n    labelTooltip={this.labelTooltip}\n    labelTooltipProps={this.labelTooltipProps}\n    ref={el => (this.formField = el)}\n    style={{ '--field-width': this.width || '200px' }}\n   >\n    <div\n     class={{\n      'sd-select-multiple': true,\n      'sd-select-multiple--open': this.isOpen,\n      'sd-select-multiple--disabled': this.disabled,\n      'sd-select-multiple--error': !!this.error,\n     }}\n     style={{ '--select-width': this.width || '200px' }}\n     ref={el => (this.selectRef = el)}\n    >\n     {this.renderTrigger()}\n     {this.renderDropdown()}\n    </div>\n   </sd-field>\n  );\n }\n\n private renderTrigger() {\n  const selectedOption = this.getSelectedOption();\n  return (\n   <div\n    class=\"sd-select-multiple__trigger\"\n    tabindex={this.disabled ? -1 : 0}\n    onClick={this.handleTriggerClick}\n    ref={el => (this.triggerRef = el)}\n   >\n    <span class=\"sd-select-multiple__value\">\n     {!selectedOption || selectedOption.length === 0\n      ? this.placeholder\n      : selectedOption.map(option => option.label).join(', ')}\n    </span>\n    {this.clearable && selectedOption?.length > 0 && !this.disabled && (\n     <sd-icon\n      key=\"close-icon\"\n      name=\"close\"\n      size={10}\n      color=\"#888\"\n      class=\"sd-select-multiple__clear\"\n      onClick={async event => {\n       event.stopPropagation();\n       this.value = null;\n       await this.formField?.sdValidate();\n      }}\n     ></sd-icon>\n    )}\n\n    <sd-icon\n     key=\"arrow-icon\"\n     name=\"arrowDown\"\n     color=\"#888\"\n     class={{ 'sd-select-multiple__arrow': true, 'sd-select-multiple__arrow--open': this.isOpen }}\n    ></sd-icon>\n   </div>\n  );\n }\n\n private renderDropdown() {\n  if (this.isOpen === false) return null;\n\n  const parentRef = (this.selectRef?.querySelector('.sd-select-multiple__trigger') ||\n   this.selectRef) as HTMLElement;\n\n  return (\n   <sd-portal open={this.isOpen} parentRef={parentRef} onSdClose={this.closeDropdown}>\n    <sd-select-dropdown\n     value={this.value}\n     options={this.options}\n     itemIndex={this.itemIndex}\n     width={this.dropDownWidth}\n     dropdownHeight={this.dropdownHeight}\n     searchable={this.searchable}\n     optionPlaceholder={this.optionPlaceholder}\n     useCheckbox={this.useCheckbox}\n     useAll={this.useAll}\n     onSdOptionClick={({ detail }) => this.handleOptionClick(detail)}\n     onSdOptionFiltered={({ detail }) => (this.filteredOptions = detail)}\n    ></sd-select-dropdown>\n   </sd-portal>\n  );\n }\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
-import { S as SdSelectOptionGroup$1, d as defineCustomElement$1 } from './p-w5tohH2H.js';
+import { S as SdSelectOptionGroup$1, d as defineCustomElement$1 } from './p-zvZtN3nR.js';
 
 const SdSelectOptionGroup = SdSelectOptionGroup$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { S as SdSelectOption$1, d as defineCustomElement$1 } from './p-O3tgQfvT.js';
+import { S as SdSelectOption$1, d as defineCustomElement$1 } from './p-JF61vPAh.js';
 
 const SdSelectOption = SdSelectOption$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { S as SdSelectSearchInput$1, d as defineCustomElement$1 } from './p-QpwY2yqY.js';
+import { S as SdSelectSearchInput$1, d as defineCustomElement$1 } from './p-RhBqdixM.js';
 
 const SdSelectSearchInput = SdSelectSearchInput$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sd-select.js

@@ -1,4 +1,4 @@
-import { S as SdSelect$1, d as defineCustomElement$1 } from './p-D8KGixEs.js';
+import { S as SdSelect$1, d as defineCustomElement$1 } from './p-D2movWkD.js';
 
 const SdSelect = SdSelect$1;
 const defineCustomElement = defineCustomElement$1;