@sellmate/design-system 1.0.76 → 1.0.78

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

@@ -1,1183 +0,0 @@
-import { Fragment, h, } from "@stencil/core";
-import { nanoid } from "nanoid/non-secure";
-import { BaseDropdownEvent } from "../../utils/base-dropdown-event";
-import { SelectKeyboardNavigation } from "../../utils/select-keyboard-navigation";
-/**
- * @deprecated sd-select-v2 (name="multi_depth")를 사용하세요.
- */
-export class SdSelectMultipleGroup extends BaseDropdownEvent {
-    constructor() {
-        super();
-    }
-    el;
-    // 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 = '';
-    labelWidth = '';
-    icon = undefined;
-    labelTooltip = '';
-    labelTooltipProps = null;
-    // props - form
-    rules = [];
-    error = false;
-    // props - custom styles
-    containerStyle = {};
-    triggerStyle = {};
-    dropdownStyle = {};
-    optionStyle = {};
-    labelStyle = {};
-    // props - custom slots
-    optionRenderer;
-    // states
-    filteredOptions = [];
-    isOpen = false;
-    searchText = null;
-    itemIndex = -1;
-    isScrolled = false;
-    isDropdownReady = false;
-    // events
-    update;
-    dropDownShow;
-    selectRef;
-    searchRef;
-    triggerRef;
-    optionRef;
-    dropdownRef;
-    formField;
-    dropDownWidth = '200px';
-    name = nanoid();
-    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() {
-        this.filteredOptions = this.options;
-        this.dropDownWidth = this.width;
-        this.initializeEvent();
-    }
-    // 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: '4140b6529565f97fa65d81ae1462108476d52bcc', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, h("div", { key: '2dab2697f3e375d214b66464b0f57aa32e77757b', 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 is() { return "sd-select-multiple-group"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["sd-select-multiple-group.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["sd-select-multiple-group.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "value": {
-                "type": "unknown",
-                "mutable": true,
-                "complexType": {
-                    "original": "SelectOptionGroup[] | null",
-                    "resolved": "SelectOptionGroup[] | null",
-                    "references": {
-                        "SelectOptionGroup": {
-                            "location": "local",
-                            "path": "/Users/meijing/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-select-multiple-group/sd-select-multiple-group.tsx",
-                            "id": "src/components/sd-select-multiple-group/sd-select-multiple-group.tsx::SelectOptionGroup"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "null"
-            },
-            "options": {
-                "type": "unknown",
-                "mutable": true,
-                "complexType": {
-                    "original": "SelectOptionGroup[]",
-                    "resolved": "SelectOptionGroup[]",
-                    "references": {
-                        "SelectOptionGroup": {
-                            "location": "local",
-                            "path": "/Users/meijing/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-select-multiple-group/sd-select-multiple-group.tsx",
-                            "id": "src/components/sd-select-multiple-group/sd-select-multiple-group.tsx::SelectOptionGroup"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "[]"
-            },
-            "placeholder": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "placeholder",
-                "defaultValue": "'\uC120\uD0DD'"
-            },
-            "optionPlaceholder": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "option-placeholder",
-                "defaultValue": "'\uC120\uD0DD\uC9C0\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.'"
-            },
-            "width": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "width",
-                "defaultValue": "'200px'"
-            },
-            "dropdownHeight": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "dropdown-height",
-                "defaultValue": "'260px'"
-            },
-            "disabled": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "disabled",
-                "defaultValue": "false"
-            },
-            "clearable": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "clearable",
-                "defaultValue": "false"
-            },
-            "searchable": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "searchable",
-                "defaultValue": "false"
-            },
-            "useCheckbox": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "use-checkbox",
-                "defaultValue": "false"
-            },
-            "useAll": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "use-all",
-                "defaultValue": "false"
-            },
-            "allCheckedLabel": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "all-checked-label",
-                "defaultValue": "'\uC804\uCCB4'"
-            },
-            "allCheckOptionLabel": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "all-check-option-label",
-                "defaultValue": "'\uC804\uCCB4'"
-            },
-            "label": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "label",
-                "defaultValue": "''"
-            },
-            "labelWidth": {
-                "type": "any",
-                "mutable": false,
-                "complexType": {
-                    "original": "string | number",
-                    "resolved": "number | string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "label-width",
-                "defaultValue": "''"
-            },
-            "icon": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "IconProps",
-                    "resolved": "IconProps | undefined",
-                    "references": {
-                        "IconProps": {
-                            "location": "global",
-                            "id": "global::IconProps"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "undefined"
-            },
-            "labelTooltip": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "label-tooltip",
-                "defaultValue": "''"
-            },
-            "labelTooltipProps": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "SdTooltipProps | null",
-                    "resolved": "SdTooltipProps | null",
-                    "references": {
-                        "SdTooltipProps": {
-                            "location": "import",
-                            "path": "../sd-tooltip/sd-tooltip.config",
-                            "id": "src/components/sd-tooltip/sd-tooltip.config.ts::SdTooltipProps",
-                            "referenceLocation": "SdTooltipProps"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "null"
-            },
-            "rules": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "Rule[]",
-                    "resolved": "Rule[] | undefined",
-                    "references": {
-                        "Rule": {
-                            "location": "import",
-                            "path": "../../components",
-                            "id": "src/components.d.ts::Rule",
-                            "referenceLocation": "Rule"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "[]"
-            },
-            "error": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "error",
-                "defaultValue": "false"
-            },
-            "containerStyle": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "SelectStyleProps['containerStyle']",
-                    "resolved": "undefined | { [key: string]: string; }",
-                    "references": {
-                        "SelectStyleProps": {
-                            "location": "import",
-                            "path": "../sd-select/sd-select",
-                            "id": "src/components/sd-select/sd-select.tsx::SelectStyleProps",
-                            "referenceLocation": "SelectStyleProps"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "{}"
-            },
-            "triggerStyle": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "SelectStyleProps['triggerStyle']",
-                    "resolved": "undefined | { [key: string]: string; }",
-                    "references": {
-                        "SelectStyleProps": {
-                            "location": "import",
-                            "path": "../sd-select/sd-select",
-                            "id": "src/components/sd-select/sd-select.tsx::SelectStyleProps",
-                            "referenceLocation": "SelectStyleProps"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "{}"
-            },
-            "dropdownStyle": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "SelectStyleProps['dropdownStyle']",
-                    "resolved": "undefined | { [key: string]: string; }",
-                    "references": {
-                        "SelectStyleProps": {
-                            "location": "import",
-                            "path": "../sd-select/sd-select",
-                            "id": "src/components/sd-select/sd-select.tsx::SelectStyleProps",
-                            "referenceLocation": "SelectStyleProps"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "{}"
-            },
-            "optionStyle": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "SelectStyleProps['optionStyle']",
-                    "resolved": "undefined | { [key: string]: string; }",
-                    "references": {
-                        "SelectStyleProps": {
-                            "location": "import",
-                            "path": "../sd-select/sd-select",
-                            "id": "src/components/sd-select/sd-select.tsx::SelectStyleProps",
-                            "referenceLocation": "SelectStyleProps"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "{}"
-            },
-            "labelStyle": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "SelectStyleProps['labelStyle']",
-                    "resolved": "undefined | { [key: string]: string; }",
-                    "references": {
-                        "SelectStyleProps": {
-                            "location": "import",
-                            "path": "../sd-select/sd-select",
-                            "id": "src/components/sd-select/sd-select.tsx::SelectStyleProps",
-                            "referenceLocation": "SelectStyleProps"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "{}"
-            },
-            "optionRenderer": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "(option: SelectOption, index: number, isSelected: boolean) => any",
-                    "resolved": "((option: SelectOption, index: number, isSelected: boolean) => any) | undefined",
-                    "references": {
-                        "SelectOption": {
-                            "location": "import",
-                            "path": "../sd-select/sd-select",
-                            "id": "src/components/sd-select/sd-select.tsx::SelectOption",
-                            "referenceLocation": "SelectOption"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false
-            }
-        };
-    }
-    static get states() {
-        return {
-            "filteredOptions": {},
-            "isOpen": {},
-            "searchText": {},
-            "itemIndex": {},
-            "isScrolled": {},
-            "isDropdownReady": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "update",
-                "name": "sdUpdate",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "SelectMultipleEvents['sdUpdate']",
-                    "resolved": "SelectOption[] | null",
-                    "references": {
-                        "SelectMultipleEvents": {
-                            "location": "import",
-                            "path": "../sd-select/sd-select",
-                            "id": "src/components/sd-select/sd-select.tsx::SelectMultipleEvents",
-                            "referenceLocation": "SelectMultipleEvents"
-                        }
-                    }
-                }
-            }, {
-                "method": "dropDownShow",
-                "name": "sdDropDownShow",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "SelectMultipleEvents['dropDownShow']",
-                    "resolved": "{ isOpen: boolean; }",
-                    "references": {
-                        "SelectMultipleEvents": {
-                            "location": "import",
-                            "path": "../sd-select/sd-select",
-                            "id": "src/components/sd-select/sd-select.tsx::SelectMultipleEvents",
-                            "referenceLocation": "SelectMultipleEvents"
-                        }
-                    }
-                }
-            }];
-    }
-    static get methods() {
-        return {
-            "sdOpen": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            },
-            "sdValidate": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            },
-            "sdReset": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            },
-            "sdResetValidate": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            },
-            "sdFocus": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            }
-        };
-    }
-    static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "value",
-                "methodName": "valueChanged"
-            }, {
-                "propName": "options",
-                "methodName": "optionsChanged"
-            }, {
-                "propName": "searchText",
-                "methodName": "searchTextChanged"
-            }, {
-                "propName": "itemIndex",
-                "methodName": "itemIndexChanged"
-            }, {
-                "propName": "isOpen",
-                "methodName": "isOpenChanged"
-            }];
-    }
-}