@sellmate/design-system 1.0.16 → 1.0.18

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

@@ -1,568 +1 @@
-import { p as proxyCustomElement, c as createEvent, h, F as Fragment, t as transformTag } from './p-CR2Jbl0B.js';
-import { B as BaseDropdownEvent, S as SelectKeyboardNavigation } from './p-CXuU38Gz.js';
-import { d as defineCustomElement$b } from './p-lbT0o9hE.js';
-import { d as defineCustomElement$a } from './p-Cd145I-2.js';
-import { d as defineCustomElement$9 } from './p-C2pN-_wD.js';
-import { d as defineCustomElement$8 } from './p-BdgLMKjb.js';
-import { d as defineCustomElement$7 } from './p-zvhzq4Sw.js';
-import { d as defineCustomElement$6 } from './p-xfqZA_70.js';
-import { d as defineCustomElement$5 } from './p-D16-dM6f.js';
-import { d as defineCustomElement$4 } from './p-B-8YfRUg.js';
-import { d as defineCustomElement$3 } from './p-CFHNnfIq.js';
-import { d as defineCustomElement$2 } from './p-CiNjpVRK.js';
-
-const sdSelectMultipleGroupCss = () => `.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__dropdown .sd-select-multiple-group__option-placeholder{height:48px;display:flex;align-items:center;padding:8px 16px;font-size:12px;line-height:0;text-align:left;color:#888888}sd-select-multiple-group{display:inline-flex;flex-flow:column nowrap;width:fit-content;height:fit-content}sd-select-multiple-group:focus,sd-select-multiple-group:focus-visible,sd-select-multiple-group:focus-within{outline:none !important}sd-select-multiple-group .sd-select-multiple-group{width:100%}sd-select-multiple-group .sd-select-multiple-group .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 .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 .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 .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 .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;opacity:0.5;transition:opacity 0.15s ease-in}.sd-select-multiple-group__dropdown--ready{opacity:1}`;
-
-const SdSelectMultipleGroup$1 = /*@__PURE__*/ proxyCustomElement(class SdSelectMultipleGroup extends BaseDropdownEvent {
-    constructor(registerHost) {
-        super(false);
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.update = createEvent(this, "sdUpdate");
-        this.dropDownShow = createEvent(this, "sdDropDownShow");
-    }
-    get el() { return this; }
-    // props
-    value = null;
-    options = [];
-    placeholder = '선택';
-    optionPlaceholder = '옵션이 없습니다.';
-    width = '200px';
-    dropdownHeight = '260px';
-    disabled = false;
-    clearable = false;
-    searchable = false;
-    useCheckbox = false;
-    useAll = false;
-    allCheckedLabel = '전체';
-    allCheckOptionLabel = '전체';
-    // props - label
-    label = '';
-    useLabelRequired = false;
-    labelTooltip = '';
-    labelTooltipProps = null;
-    // props - form
-    name;
-    rules = [];
-    error = false;
-    // props - custom styles
-    containerStyle = {};
-    triggerStyle = {};
-    dropdownStyle = {};
-    optionStyle = {};
-    labelStyle = {};
-    // props - custom slots
-    optionRenderer;
-    // states
-    filteredOptions = this.options;
-    isOpen = false;
-    searchText = null;
-    itemIndex = -1;
-    isScrolled = false;
-    isDropdownReady = false;
-    // events
-    update;
-    dropDownShow;
-    selectRef;
-    searchRef;
-    triggerRef;
-    optionRef;
-    dropdownRef;
-    formField;
-    dropDownWidth = this.width;
-    async sdOpen() {
-        await new Promise(resolve => setTimeout(resolve, 0));
-        this.isOpen = true;
-    }
-    async sdValidate() {
-        this.formField?.sdValidate();
-    }
-    async sdReset() {
-        this.formField?.sdReset();
-    }
-    async sdResetValidate() {
-        this.formField?.sdResetValidation();
-    }
-    async sdFocus() {
-        this.formField?.sdFocus();
-    }
-    valueChanged() {
-        this.update?.emit(this.value);
-    }
-    optionsChanged() {
-        this.filteredOptions = this.options;
-        this.filterOptions();
-    }
-    searchTextChanged() {
-        this.filterOptions();
-    }
-    async itemIndexChanged(newIndex, oldIndex) {
-        if (this.searchable) {
-            const searchInput = await this.getNativeInputElement();
-            if (this.itemIndex === -1) {
-                searchInput?.focus({ preventScroll: true });
-                return;
-            }
-            else if (searchInput?.matches(':focus')) {
-                searchInput?.blur();
-            }
-        }
-        const optionElements = Array.from(this.dropdownRef?.querySelectorAll('sd-select-option-group') || []);
-        // useAll 사용시 "전체" 옵션 포함한 인덱스 사용
-        const actualIndex = this.useAll ? this.itemIndex + 1 : this.itemIndex;
-        const currentItem = optionElements?.[actualIndex];
-        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 isOpenChanged() {
-        // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지
-        this.onDropdownToggle(this.isOpen);
-        this.dropDownShow?.emit({ isOpen: this.isOpen });
-        this.isDropdownReady = false;
-        if (this.isOpen === false) {
-            await this.formField?.sdValidate();
-            return;
-        }
-        // DOM 렌더링을 기다리기 위해 이중 requestAnimationFrame 사용 - (레이아웃/스타일 계산 - 페인트 이후)
-        requestAnimationFrame(() => {
-            requestAnimationFrame(async () => {
-                const selectedOptions = this.getSelectedOption();
-                // 선택된 옵션이 있으면 첫 번째 선택된 항목으로 스크롤
-                if (selectedOptions && selectedOptions.length > 0) {
-                    const selectedIndex = this.options.indexOf(selectedOptions[0]);
-                    const optionElements = Array.from(this.dropdownRef?.querySelectorAll('sd-select-option-group') || []);
-                    // useAll 사용시 "전체" 옵션 포함한 인덱스 사용
-                    const actualIndex = this.useAll ? selectedIndex + 1 : selectedIndex;
-                    // 선택된 옵션이 화면 가운데에 오도록 index 조정
-                    const targetIndex = Math.min(actualIndex + 4, optionElements.length - 1);
-                    const currentItem = optionElements?.[targetIndex];
-                    if (currentItem) {
-                        this.scrollToOption(currentItem);
-                    }
-                }
-                this.isDropdownReady = true;
-                if (this.searchable) {
-                    const searchInput = await this.getNativeInputElement();
-                    if (searchInput) {
-                        requestAnimationFrame(() => {
-                            searchInput.focus({ preventScroll: true });
-                        });
-                    }
-                }
-            });
-        });
-    }
-    componentWillLoad() {
-        // props가 모두 설정된 후에 실행되므로 올바른 options 값을 가져올 수 있음
-        this.filteredOptions = this.options;
-        this.initializeEvent(); // global dropdown Manager에 등록 + 이벤트 핸들러 초기화
-    }
-    // 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에서 제거 + 이벤트 정리
-    }
-    handleDocumentClick(event) {
-        if (!this.selectRef?.contains(event.target)) {
-            this.isOpen = false;
-        }
-    }
-    handleDocumentKeydown(keyboardEvent) {
-        keyboardEvent.stopPropagation();
-        const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];
-        if (!targetKey.includes(keyboardEvent.key))
-            return;
-        keyboardEvent.preventDefault();
-        switch (keyboardEvent.key) {
-            case 'ArrowDown':
-            case 'ArrowUp':
-                const keyboardNavigation = new SelectKeyboardNavigation(this.searchable, this.filteredOptions);
-                const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);
-                this.itemIndex = nextIndex;
-                break;
-            case 'Enter':
-                const selectedOption = this.filteredOptions[this.itemIndex];
-                if (selectedOption && !selectedOption.disabled) {
-                    this.handleOptionSelection(selectedOption);
-                }
-                break;
-            case 'Escape':
-                this.isOpen = false;
-                break;
-        }
-    }
-    // event handlers
-    handleTriggerClick = (event) => {
-        event.stopPropagation();
-        if (!this.disabled) {
-            this.isOpen = !this.isOpen;
-            this.dropDownShow?.emit({ isOpen: this.isOpen });
-        }
-    };
-    handleAllOptionClick = (detail) => {
-        if (detail.isSelected) {
-            // 이미 선택된 옵션인 경우, 선택 해제
-            const filterDisabledOptions = this.filteredOptions.filter(opt => opt.type === 'item' && !opt.disabled);
-            this.value =
-                this.value?.filter(selected => !filterDisabledOptions.some(opt => opt.value === selected.value)) || this.value;
-        }
-        else {
-            // 새로운 옵션 선택
-            const valueSet = new Set([
-                ...(this.value || []),
-                ...this.filteredOptions.filter(opt => opt.type === 'item' && !opt.disabled),
-            ]);
-            this.value = Array.from(valueSet);
-        }
-    };
-    handleOptionClick = (detail) => {
-        const { option, event } = detail;
-        event.stopPropagation();
-        if (option.type === 'group')
-            this.handleGroupOptionClick(detail);
-        if (option.type === 'subgroup')
-            this.handleSubGroupOptionClick(detail);
-        if (option.type === 'item')
-            this.handleOptionSelection(option);
-    };
-    handleGroupOptionClick = (detail) => {
-        const { option, isSelected } = detail;
-        const childOptions = this.filteredOptions.filter(opt => opt.parent === option.value && !opt.disabled);
-        childOptions.forEach(subgroup => {
-            this.handleSubGroupOptionClick({
-                option: subgroup,
-                isSelected: isSelected || isSelected === null,
-            });
-        });
-    };
-    handleSubGroupOptionClick = (detail) => {
-        const { option, isSelected } = detail;
-        const childOptions = this.filteredOptions.filter(opt => opt.parent === option.value && !opt.disabled);
-        if (isSelected || isSelected === null) {
-            // 모든 자식 옵션이 선택된 경우, 모두 선택 해제
-            this.value =
-                this.value?.filter(selected => !childOptions.some(child => child.value === selected.value)) ||
-                    null;
-        }
-        else {
-            // 일부 또는 전체 자식 옵션이 선택되지 않은 경우, 모두 선택
-            const newSelections = childOptions.filter(child => !this.value?.some(selected => selected.value === child.value));
-            this.value = [...(this.value || []), ...newSelections];
-        }
-    };
-    filterOptions() {
-        if (!this.searchText || this.searchText.trim() === '') {
-            // 검색어가 없으면 전체 옵션 표시
-            this.filteredOptions = this.options;
-            return;
-        }
-        const searchTerm = this.searchText.toLowerCase();
-        const matchedOptions = new Set();
-        // 1. 직접 매칭되는 옵션들 찾기
-        this.options.forEach(option => {
-            if (option.label.toLowerCase().includes(searchTerm)) {
-                matchedOptions.add(option);
-                // 매칭된 옵션의 상위 그룹들도 포함
-                this.addParentGroups(option, matchedOptions);
-            }
-        });
-        // 2. Set을 배열로 변환하고 원본 순서 유지
-        this.filteredOptions = this.options.filter(option => matchedOptions.has(option));
-    }
-    addParentGroups(option, matchedSet) {
-        if (!option.parent)
-            return;
-        const parentOption = this.options.find(opt => opt.value === option.parent);
-        if (parentOption && !matchedSet.has(parentOption)) {
-            matchedSet.add(parentOption);
-            // 재귀적으로 상위 그룹들도 추가
-            this.addParentGroups(parentOption, matchedSet);
-        }
-    }
-    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.sdGetNativeElement();
-        }
-        return null;
-    }
-    handleOptionSelection = (option) => {
-        if (!option || option.disabled)
-            return;
-        const isAlreadySelected = this.value?.some(opt => opt.value === option.value);
-        if (isAlreadySelected) {
-            // 이미 선택된 옵션인 경우, 선택 해제
-            this.value = this.value?.filter(opt => opt.value !== option.value) || null;
-        }
-        else {
-            // 새로운 옵션 선택
-            this.value = [...(this.value || []), option];
-        }
-    };
-    getAllItemsUnderOption(parentOption, includeDisabled = false) {
-        const filterChildrenWithParent = (option) => option.parent === parentOption.value && (includeDisabled || !option.disabled);
-        if (parentOption.type === 'subgroup') {
-            return this.filteredOptions.filter(option => filterChildrenWithParent(option) && option.type === 'item');
-        }
-        const allItems = [];
-        const childOptions = this.filteredOptions.filter(filterChildrenWithParent);
-        const subgroupOptions = childOptions.filter(option => option.type === 'subgroup');
-        subgroupOptions.forEach(subgroup => {
-            const itemsUnderSubgroup = this.filteredOptions.filter(option => option.parent === subgroup.value &&
-                option.type === 'item' &&
-                (includeDisabled ? true : !option.disabled));
-            allItems.push(...itemsUnderSubgroup);
-        });
-        const directItems = childOptions.filter(option => option.type === 'item');
-        allItems.push(...directItems);
-        return allItems;
-    }
-    isAllChildrenSelected(groupOption) {
-        const allItems = this.getAllItemsUnderOption(groupOption);
-        if (allItems.length === 0)
-            return false;
-        const selectedItems = allItems.filter(item => this.value?.some(selected => selected.value === item.value));
-        if (selectedItems.length === allItems.length)
-            return true;
-        if (selectedItems.length > 0)
-            return null;
-        return false;
-    }
-    getChildrenOptions(parentOption) {
-        const allItems = this.getAllItemsUnderOption(parentOption, true);
-        const selectedCount = allItems.filter(item => this.value?.some(val => val.value === item.value)).length;
-        return {
-            selectedCount,
-            totalCount: allItems.length,
-        };
-    }
-    isAllOptionsSelected() {
-        if (!this.value || this.value.length === 0)
-            return false;
-        const selectableItems = this.options.filter(opt => opt.type === 'item' && !opt.disabled);
-        if (selectableItems.length === 0)
-            return false;
-        const selectedValues = new Set(this.value.map(v => v.value));
-        return selectableItems.every(option => selectedValues.has(option.value));
-    }
-    getTriggerLabel() {
-        const selectedOption = this.getSelectedOption();
-        if (!selectedOption)
-            return '선택';
-        if (selectedOption.length === 0)
-            return this.placeholder;
-        const isAllChecked = this.isAllOptionsSelected();
-        return isAllChecked
-            ? this.allCheckedLabel
-            : selectedOption.map(option => option.label).join(', ');
-    }
-    closeDropdown() {
-        this.isOpen = false;
-    }
-    async scrollToOption(optionElement) {
-        if (!this.dropdownRef || !optionElement)
-            return;
-        requestAnimationFrame(() => {
-            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-multiple-group__search-container');
-            const searchOffset = searchContainer ? searchContainer.offsetHeight : 0;
-            const visibleContentHeight = dropdownHeight - searchOffset;
-            const visibleTop = dropdownScrollTop + searchOffset;
-            const visibleBottom = dropdownScrollTop + dropdownHeight;
-            if (optionTop < visibleTop) {
-                dropdown.scrollTo({ top: optionTop - searchOffset, behavior: 'instant' });
-            }
-            else if (optionTop + optionHeight > visibleBottom) {
-                dropdown.scrollTo({
-                    top: optionTop + optionHeight - visibleContentHeight - searchOffset,
-                    behavior: 'instant',
-                });
-            }
-        });
-    }
-    render() {
-        return (h("sd-field", { key: '1656f964cda04b6b1c4d118c7204d2733306caac', 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: '59f784d6d84365d5abf05a19338bdcefa844ce18', class: {
-                'sd-select-multiple-group': true,
-                'sd-select-multiple-group--open': this.isOpen,
-                'sd-select-multiple-group--disabled': this.disabled,
-                'sd-select-multiple-group--label': !!this.label,
-            }, ref: el => (this.selectRef = el) }, this.renderTrigger(), this.renderDropdown())));
-    }
-    renderTrigger() {
-        const selectedOption = this.getSelectedOption();
-        return (h("div", { class: "sd-select-multiple-group__trigger", tabindex: this.disabled ? -1 : 0, onClick: this.handleTriggerClick, style: this.triggerStyle }, h("span", { class: "sd-select-multiple-group__value" }, this.getTriggerLabel()), this.clearable && selectedOption?.length > 0 && !this.disabled && (h("sd-icon", { key: "close-icon", name: "close", size: 10, color: "#888", class: "sd-select-multiple-group__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-group__arrow': true,
-                'sd-select-multiple-group__arrow--open': this.isOpen,
-            } })));
-    }
-    renderDropdown() {
-        const style = {
-            '--select-width': this.dropDownWidth || '200px',
-            '--select-dropdown-height': this.dropdownHeight || '260px',
-        };
-        if (this.isOpen === false)
-            return null;
-        return (h("sd-portal", { open: this.isOpen, parentRef: this.selectRef, onSdClose: this.closeDropdown }, h("div", { style: { width: '0', height: '0', overflow: 'visible' } }, h("div", { class: {
-                'sd-select-multiple-group__dropdown': true,
-                'sd-select-multiple-group__dropdown--ready': this.isDropdownReady,
-            }, style: { ...style, ...this.dropdownStyle }, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (h("sd-select-search-input", { ref: el => (this.searchRef = el), isScrolled: this.isScrolled, searchText: this.searchText, onSdSearchInput: (event) => (this.searchText = event.detail || ''), onSdSearchFocus: () => (this.itemIndex = -1) })), this.filteredOptions.length > 0 ? (h(Fragment, null, this.useAll && (h("sd-select-option-group", { option: { label: this.allCheckOptionLabel, value: '', type: 'all' }, index: 0, isSelected: this.isAllOptionsSelected(), isFocused: this.itemIndex === 0, optionStyle: this.optionStyle, onOptionClick: ({ detail, }) => this.handleAllOptionClick(detail), useCheckbox: this.useCheckbox, useIndicator: false })), this.filteredOptions.map((option, index) => (h("slot", { name: `option-${option.value}` }, h("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) }) })))))) : (h("slot", { name: "option-placeholder" }, h("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"]
-    }; }
-    static get style() { return sdSelectMultipleGroupCss(); }
-}, [772, "sd-select-multiple-group", {
-        "value": [1040],
-        "options": [1040],
-        "placeholder": [1],
-        "optionPlaceholder": [1, "option-placeholder"],
-        "width": [1],
-        "dropdownHeight": [1, "dropdown-height"],
-        "disabled": [4],
-        "clearable": [4],
-        "searchable": [4],
-        "useCheckbox": [4, "use-checkbox"],
-        "useAll": [4, "use-all"],
-        "allCheckedLabel": [1, "all-checked-label"],
-        "allCheckOptionLabel": [1, "all-check-option-label"],
-        "label": [1],
-        "useLabelRequired": [4, "use-label-required"],
-        "labelTooltip": [1, "label-tooltip"],
-        "labelTooltipProps": [16],
-        "name": [1],
-        "rules": [16],
-        "error": [4],
-        "containerStyle": [16],
-        "triggerStyle": [16],
-        "dropdownStyle": [16],
-        "optionStyle": [16],
-        "labelStyle": [16],
-        "optionRenderer": [16],
-        "filteredOptions": [32],
-        "isOpen": [32],
-        "searchText": [32],
-        "itemIndex": [32],
-        "isScrolled": [32],
-        "isDropdownReady": [32],
-        "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-group", "sd-button", "sd-checkbox", "sd-field", "sd-floating-portal", "sd-icon", "sd-input", "sd-portal", "sd-select-option-group", "sd-select-search-input", "sd-tooltip"];
-    components.forEach(tagName => { switch (tagName) {
-        case "sd-select-multiple-group":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), SdSelectMultipleGroup$1);
-            }
-            break;
-        case "sd-button":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$b();
-            }
-            break;
-        case "sd-checkbox":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$a();
-            }
-            break;
-        case "sd-field":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$9();
-            }
-            break;
-        case "sd-floating-portal":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$8();
-            }
-            break;
-        case "sd-icon":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$7();
-            }
-            break;
-        case "sd-input":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$6();
-            }
-            break;
-        case "sd-portal":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$5();
-            }
-            break;
-        case "sd-select-option-group":
-            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();
-            }
-            break;
-    } });
-}
-
-const SdSelectMultipleGroup = SdSelectMultipleGroup$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SdSelectMultipleGroup, defineCustomElement };
-//# sourceMappingURL=sd-select-multiple-group.js.map
-
-//# sourceMappingURL=sd-select-multiple-group.js.map
+import{p as e,c as t,h as s,F as i,t as o}from"./p-4iQAU7kM.js";import{n as l}from"./p-CCwNgVmC.js";import{B as r,S as n}from"./p-Cc-cekjN.js";import{d as p}from"./p-B45-wHcP.js";import{d as h}from"./p-Csz5Om2E.js";import{d as a}from"./p-DOdjsjwr.js";import{d as c}from"./p-BkU8yMUR.js";import{d}from"./p-Bxs0Hp4o.js";import{d as u}from"./p-CIDMF6fj.js";import{d as m}from"./p-DojkP9rD.js";import{d as g}from"./p-GjahxZoU.js";import{d as b}from"./p-IFDX7o1t.js";import{d as w}from"./p-Ay5V-5Fu.js";const f=e(class extends r{constructor(e){super(!1),!1!==e&&this.__registerHost(),this.update=t(this,"sdUpdate"),this.dropDownShow=t(this,"sdDropDownShow")}get el(){return this}value=null;options=[];placeholder="선택";optionPlaceholder="선택지가 없습니다.";width="200px";dropdownHeight="260px";disabled=!1;clearable=!1;searchable=!1;useCheckbox=!1;useAll=!1;allCheckedLabel="전체";allCheckOptionLabel="전체";label="";useLabelRequired=!1;labelTooltip="";labelTooltipProps=null;rules=[];error=!1;containerStyle={};triggerStyle={};dropdownStyle={};optionStyle={};labelStyle={};optionRenderer;filteredOptions=this.options;isOpen=!1;searchText=null;itemIndex=-1;isScrolled=!1;isDropdownReady=!1;update;dropDownShow;selectRef;searchRef;triggerRef;optionRef;dropdownRef;formField;dropDownWidth=this.width;name=l();async sdOpen(){await new Promise((e=>setTimeout(e,0))),this.isOpen=!0}async sdValidate(){this.formField?.sdValidate()}async sdReset(){this.formField?.sdReset()}async sdResetValidate(){this.formField?.sdResetValidation()}async sdFocus(){this.formField?.sdFocus()}valueChanged(){this.update?.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(-1===this.itemIndex)return void e?.focus({preventScroll:!0});e?.matches(":focus")&&e?.blur()}const s=Array.from(this.dropdownRef?.querySelectorAll("sd-select-option-group")||[]),i=this.useAll?this.itemIndex+1:this.itemIndex,o=s?.[i];o&&this.isOpen&&(this.optionRef=o,await this.optionRef.isDisabled()?e>t?this.itemIndex++:this.itemIndex--:this.scrollToOption(o))}async isOpenChanged(){this.onDropdownToggle(this.isOpen),this.dropDownShow?.emit({isOpen:this.isOpen}),this.isDropdownReady=!1,!1!==this.isOpen?requestAnimationFrame((()=>{requestAnimationFrame((async()=>{const e=this.getSelectedOption();if(e&&e.length>0){const t=this.options.indexOf(e[0]),s=Array.from(this.dropdownRef?.querySelectorAll("sd-select-option-group")||[]),i=Math.min((this.useAll?t+1:t)+4,s.length-1),o=s?.[i];o&&this.scrollToOption(o)}if(this.isDropdownReady=!0,this.searchable){const e=await this.getNativeInputElement();e&&requestAnimationFrame((()=>{e.focus({preventScroll:!0})}))}}))})):await(this.formField?.sdValidate())}componentWillLoad(){this.filteredOptions=this.options,this.initializeEvent()}componentDidRender(){const e=this.triggerRef,t=e?.getBoundingClientRect();this.dropDownWidth=t?.width?t.width+"px":this.width}disconnectedCallback(){this.cleanupEvent()}handleDocumentClick(e){this.selectRef?.contains(e.target)||(this.isOpen=!1)}handleDocumentKeydown(e){if(e.stopPropagation(),["ArrowDown","ArrowUp","Enter","Escape"].includes(e.key))switch(e.preventDefault(),e.key){case"ArrowDown":case"ArrowUp":const t=new n(this.searchable,this.filteredOptions).getNextIndex(this.itemIndex,e.key);this.itemIndex=t;break;case"Enter":const s=this.filteredOptions[this.itemIndex];s&&!s.disabled&&this.handleOptionSelection(s);break;case"Escape":this.isOpen=!1}}handleTriggerClick=e=>{e.stopPropagation(),this.disabled||(this.isOpen=!this.isOpen,this.dropDownShow?.emit({isOpen:this.isOpen}))};handleAllOptionClick=e=>{if(e.isSelected){const e=this.filteredOptions.filter((e=>"item"===e.type&&!e.disabled));this.value=this.value?.filter((t=>!e.some((e=>e.value===t.value))))||this.value}else{const e=new Set([...this.value||[],...this.filteredOptions.filter((e=>"item"===e.type&&!e.disabled))]);this.value=Array.from(e)}};handleOptionClick=e=>{const{option:t,event:s}=e;s.stopPropagation(),"group"===t.type&&this.handleGroupOptionClick(e),"subgroup"===t.type&&this.handleSubGroupOptionClick(e),"item"===t.type&&this.handleOptionSelection(t)};handleGroupOptionClick=e=>{const{option:t,isSelected:s}=e;this.filteredOptions.filter((e=>e.parent===t.value&&!e.disabled)).forEach((e=>{this.handleSubGroupOptionClick({option:e,isSelected:s||null===s})}))};handleSubGroupOptionClick=e=>{const{option:t,isSelected:s}=e,i=this.filteredOptions.filter((e=>e.parent===t.value&&!e.disabled));if(s||null===s)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())return void(this.filteredOptions=this.options);const e=this.searchText.toLowerCase(),t=new Set;this.options.forEach((s=>{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));s&&!t.has(s)&&(t.add(s),this.addParentGroups(s,t))}getSelectedOption(){return this.options.filter((e=>this.value?.includes(e)))}handleDropdownScroll=e=>{this.isScrolled=e.target.scrollTop>0};async getNativeInputElement(){return this.searchRef?this.searchRef.sdGetNativeElement():null}handleOptionSelection=e=>{if(!e||e.disabled)return;const t=this.value?.some((t=>t.value===e.value));this.value=t?this.value?.filter((t=>t.value!==e.value))||null:[...this.value||[],e]};getAllItemsUnderOption(e,t=!1){const s=s=>s.parent===e.value&&(t||!s.disabled);if("subgroup"===e.type)return this.filteredOptions.filter((e=>s(e)&&"item"===e.type));const i=[],o=this.filteredOptions.filter(s);o.filter((e=>"subgroup"===e.type)).forEach((e=>{const s=this.filteredOptions.filter((s=>!(s.parent!==e.value||"item"!==s.type||!t&&s.disabled)));i.push(...s)}));const l=o.filter((e=>"item"===e.type));return i.push(...l),i}isAllChildrenSelected(e){const t=this.getAllItemsUnderOption(e);if(0===t.length)return!1;const s=t.filter((e=>this.value?.some((t=>t.value===e.value))));return s.length===t.length||s.length>0&&null}getChildrenOptions(e){const t=this.getAllItemsUnderOption(e,!0);return{selectedCount:t.filter((e=>this.value?.some((t=>t.value===e.value)))).length,totalCount:t.length}}isAllOptionsSelected(){if(!this.value||0===this.value.length)return!1;const e=this.options.filter((e=>"item"===e.type&&!e.disabled));if(0===e.length)return!1;const t=new Set(this.value.map((e=>e.value)));return e.every((e=>t.has(e.value)))}getTriggerLabel(){const e=this.getSelectedOption();return e?0===e.length?this.placeholder:this.isAllOptionsSelected()?this.allCheckedLabel:e.map((e=>e.label)).join(", "):"선택"}closeDropdown(){this.isOpen=!1}async scrollToOption(e){this.dropdownRef&&e&&requestAnimationFrame((()=>{const t=this.dropdownRef,s=e.offsetTop,i=e.offsetHeight,o=t.scrollTop,l=t.clientHeight,r=t.querySelector(".sd-select-multiple-group__search-container"),n=r?r.offsetHeight:0,p=l-n,h=o+l;s<o+n?t.scrollTo({top:s-n,behavior:"instant"}):s+i>h&&t.scrollTo({top:s+i-p-n,behavior:"instant"})}))}render(){return s("sd-field",{key:"edcc86b68474b668acce13cd04cf2e75cdc3e5cc",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:e=>this.formField=e,style:{"--field-width":this.width||"200px"}},s("div",{key:"13b3366af18b65ac30a9e1a9a295c486351f585e",class:{"sd-select-multiple-group":!0,"sd-select-multiple-group--open":this.isOpen,"sd-select-multiple-group--disabled":this.disabled,"sd-select-multiple-group--label":!!this.label},ref:e=>this.selectRef=e},this.renderTrigger(),this.renderDropdown()))}renderTrigger(){const e=this.getSelectedOption();return s("div",{class:"sd-select-multiple-group__trigger",tabindex:this.disabled?-1:0,onClick:this.handleTriggerClick,style:this.triggerStyle},s("span",{class:"sd-select-multiple-group__value"},this.getTriggerLabel()),this.clearable&&e?.length>0&&!this.disabled&&s("sd-icon",{key:"close-icon",name:"close",size:10,color:"#888",class:"sd-select-multiple-group__clear",onClick:async e=>{e.stopPropagation(),this.value=null,await(this.formField?.sdValidate())}}),s("sd-icon",{key:"arrow-icon",name:"arrowDown",color:"#888",class:{"sd-select-multiple-group__arrow":!0,"sd-select-multiple-group__arrow--open":this.isOpen}}))}renderDropdown(){return!1===this.isOpen?null:s("sd-portal",{open:this.isOpen,parentRef:this.selectRef,onSdClose:this.closeDropdown},s("div",{style:{width:"0",height:"0",overflow:"visible"}},s("div",{class:{"sd-select-multiple-group__dropdown":!0,"sd-select-multiple-group__dropdown--ready":this.isDropdownReady},style:{"--select-width":this.dropDownWidth||"200px","--select-dropdown-height":this.dropdownHeight||"260px",...this.dropdownStyle},onScroll:this.handleDropdownScroll,ref:e=>this.dropdownRef=e},this.searchable&&s("sd-select-search-input",{ref:e=>this.searchRef=e,isScrolled:this.isScrolled,searchText:this.searchText,onSdSearchInput:e=>this.searchText=e.detail||"",onSdSearchFocus:()=>this.itemIndex=-1}),this.filteredOptions.length>0?s(i,null,this.useAll&&s("sd-select-option-group",{option:{label:this.allCheckOptionLabel,value:"",type:"all"},index:0,isSelected:this.isAllOptionsSelected(),isFocused:0===this.itemIndex,optionStyle:this.optionStyle,onOptionClick:({detail:e})=>this.handleAllOptionClick(e),useCheckbox:this.useCheckbox,useIndicator:!1}),this.filteredOptions.map(((e,t)=>s("slot",{name:"option-"+e.value},s("sd-select-option-group",{option:e,index:t,isSelected:"item"===e.type?this.value?.some((t=>t.value===e.value)):this.isAllChildrenSelected(e),isFocused:t===this.itemIndex,optionStyle:this.optionStyle,onOptionClick:({detail:t})=>{("item"===e.type||this.useCheckbox)&&this.handleOptionClick(t)},useCheckbox:this.useCheckbox,..."item"!==e.type&&{countInfo:this.getChildrenOptions(e)}}))))):s("slot",{name:"option-placeholder"},s("div",{class:"sd-select-multiple-group__option-placeholder",style:this.optionStyle},this.optionPlaceholder)))))}static get watchers(){return{value:[{valueChanged:0}],options:[{optionsChanged:0}],searchText:[{searchTextChanged:0}],itemIndex:[{itemIndexChanged:0}],isOpen:[{isOpenChanged:0}]}}static get style(){return".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__dropdown .sd-select-multiple-group__option-placeholder{height:48px;display:flex;align-items:center;padding:8px 16px;font-size:12px;line-height:0;text-align:left;color:#888888}sd-select-multiple-group{display:inline-flex;flex-flow:column nowrap;width:fit-content;height:fit-content}sd-select-multiple-group:focus,sd-select-multiple-group:focus-visible,sd-select-multiple-group:focus-within{outline:none !important}sd-select-multiple-group .sd-select-multiple-group{width:100%}sd-select-multiple-group .sd-select-multiple-group .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 .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 .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 .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 .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;opacity:0.5;transition:opacity 0.15s ease-in}.sd-select-multiple-group__dropdown--ready{opacity:1}"}},[772,"sd-select-multiple-group",{value:[1040],options:[1040],placeholder:[1],optionPlaceholder:[1,"option-placeholder"],width:[1],dropdownHeight:[1,"dropdown-height"],disabled:[4],clearable:[4],searchable:[4],useCheckbox:[4,"use-checkbox"],useAll:[4,"use-all"],allCheckedLabel:[1,"all-checked-label"],allCheckOptionLabel:[1,"all-check-option-label"],label:[1],useLabelRequired:[4,"use-label-required"],labelTooltip:[1,"label-tooltip"],labelTooltipProps:[16],rules:[16],error:[4],containerStyle:[16],triggerStyle:[16],dropdownStyle:[16],optionStyle:[16],labelStyle:[16],optionRenderer:[16],filteredOptions:[32],isOpen:[32],searchText:[32],itemIndex:[32],isScrolled:[32],isDropdownReady:[32],sdOpen:[64],sdValidate:[64],sdReset:[64],sdResetValidate:[64],sdFocus:[64]},void 0,{value:[{valueChanged:0}],options:[{optionsChanged:0}],searchText:[{searchTextChanged:0}],itemIndex:[{itemIndexChanged:0}],isOpen:[{isOpenChanged:0}]}]),x=f,k=function(){"undefined"!=typeof customElements&&["sd-select-multiple-group","sd-button","sd-checkbox","sd-field","sd-floating-portal","sd-icon","sd-input","sd-portal","sd-select-option-group","sd-select-search-input","sd-tooltip"].forEach((e=>{switch(e){case"sd-select-multiple-group":customElements.get(o(e))||customElements.define(o(e),f);break;case"sd-button":customElements.get(o(e))||p();break;case"sd-checkbox":customElements.get(o(e))||h();break;case"sd-field":customElements.get(o(e))||a();break;case"sd-floating-portal":customElements.get(o(e))||c();break;case"sd-icon":customElements.get(o(e))||d();break;case"sd-input":customElements.get(o(e))||u();break;case"sd-portal":customElements.get(o(e))||m();break;case"sd-select-option-group":customElements.get(o(e))||g();break;case"sd-select-search-input":customElements.get(o(e))||b();break;case"sd-tooltip":customElements.get(o(e))||w()}}))};export{x as SdSelectMultipleGroup,k as defineCustomElement}