@sellmate/design-system 0.0.11 → 0.0.13

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

@@ -0,0 +1,754 @@
+import { Host, h, } from "@stencil/core";
+import { BaseDropdownEvent } from "../../utils/base-dropdown-event";
+import { SelectKeyboardNavigation } from "../../utils/select-keyboard-navigation";
+export class SdSelectMultipleGroup extends BaseDropdownEvent {
+    constructor() {
+        super();
+    }
+    el;
+    // props
+    value = null;
+    label = '';
+    options = [];
+    placeholder = '선택';
+    optionPlaceholder = '옵션이 없습니다.';
+    width = '200px';
+    dropdownHeight = '260px';
+    disabled = false;
+    clearable = false;
+    searchable = false;
+    useCheckbox = 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;
+    // events
+    sdChange;
+    dropDownShow;
+    selectRef;
+    searchRef;
+    optionRef;
+    dropdownRef;
+    valueChanged() {
+        this.sdChange?.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();
+                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 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 (!currentItem)
+            return;
+        await new Promise(resolve => setTimeout(resolve, 10)); // 추가 딜레이
+        this.scrollToOption(currentItem);
+    }
+    connectedCallback() {
+        // props가 모두 설정된 후에 실행되므로 올바른 options 값을 가져올 수 있음
+        this.filteredOptions = this.options;
+        this.initializeEvent(); // global dropdown Manager에 등록 + 이벤트 핸들러 초기화
+    }
+    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 });
+        }
+    };
+    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.options.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.options.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;
+        }
+        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;
+        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];
+        }
+    };
+    isAllChildrenSelected(parentOption) {
+        const childOptions = this.options.filter(option => option.parent === parentOption.value);
+        const isChecked = childOptions.filter(child => this.value?.some(selected => selected.value === child.value));
+        if (isChecked.length === childOptions.length)
+            return true;
+        if (isChecked.length > 0)
+            return null;
+        return false;
+    }
+    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;
+        }
+    }
+    render() {
+        const style = {
+            '--select-width': this.width || '200px',
+            '--select-dropdown-height': this.dropdownHeight || '260px',
+        };
+        return (h(Host, { key: 'b2dd93262b0d07ca7991b9a9c4b4b643ece0132d', style: style }, h("div", { key: '02759e35f71bcc24242d55448218947232232c84', class: {
+                'sd-select-multiple-group': true,
+                'sd-select-multiple-group--open': this.isOpen,
+                'sd-select-multiple-group--disabled': this.disabled,
+            }, style: this.containerStyle, ref: el => (this.selectRef = el) }, this.renderLabel(this.label, this.labelStyle), h("div", { key: 'de24276ab88ecad8e49d1766153c84366380cf68', class: "sd-select-multiple-group__container" }, this.renderTrigger(), this.renderDropdown()))));
+    }
+    renderLabel(label, labelStyle) {
+        if (!label)
+            return null;
+        return (h("label", { class: "sd-select-multiple-group__label", style: labelStyle }, label));
+    }
+    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" }, !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-group__clear", onClick: event => {
+                event.stopPropagation();
+                this.value = null;
+            } })), 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() {
+        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-group__dropdown", style: this.dropdownStyle, onScroll: this.handleDropdownScroll }, this.searchable && (h("div", { class: {
+                'sd-select-multiple-group__search-container': true,
+                'sd-select-multiple-group__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", slot: "prefix" })))), this.filteredOptions.length > 0 ? (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, }) => this.handleOptionClick(detail), useCheckbox: this.useCheckbox }))))) : (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": "C:/Users/KimMeeKyeong/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"
+            },
+            "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": "''"
+            },
+            "options": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "SelectOptionGroup[]",
+                    "resolved": "SelectOptionGroup[]",
+                    "references": {
+                        "SelectOptionGroup": {
+                            "location": "local",
+                            "path": "C:/Users/KimMeeKyeong/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": "'\uC635\uC158\uC774 \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"
+            },
+            "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"
+                        }
+                    }
+                },
+                "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"
+                        }
+                    }
+                },
+                "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"
+                        }
+                    }
+                },
+                "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"
+                        }
+                    }
+                },
+                "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"
+                        }
+                    }
+                },
+                "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"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "filteredOptions": {},
+            "isOpen": {},
+            "searchText": {},
+            "itemIndex": {},
+            "isScrolled": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sdChange",
+                "name": "sdChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "SelectMultipleEvents['sdChange']",
+                    "resolved": "SelectOption[] | null",
+                    "references": {
+                        "SelectMultipleEvents": {
+                            "location": "import",
+                            "path": "../sd-select/sd-select",
+                            "id": "src/components/sd-select/sd-select.tsx::SelectMultipleEvents"
+                        }
+                    }
+                }
+            }, {
+                "method": "dropDownShow",
+                "name": "dropDownShow",
+                "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"
+                        }
+                    }
+                }
+            }];
+    }
+    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"
+            }];
+    }
+}
+//# sourceMappingURL=sd-select-multiple-group.js.map