@sellmate/design-system 0.0.55 → 1.0.0

package/dist/cjs/sd-select-multiple-group.cjs.entry.js

@@ -0,0 +1,446 @@
+'use strict';
+
+var index = require('./index-D_J8ScR5.js');
+var baseDropdownEvent = require('./base-dropdown-event-Dc6AuxR4.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 = class extends baseDropdownEvent.BaseDropdownEvent {
+    constructor(hostRef) {
+        super();
+        index.registerInstance(this, hostRef);
+        this.update = index.createEvent(this, "sdUpdate");
+        this.dropDownShow = index.createEvent(this, "sdDropDownShow");
+    }
+    get el() { return index.getElement(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 baseDropdownEvent.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 (index.h("sd-field", { key: '7ec71405f801265b0abf2d381491a65454c540cd', 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' } }, index.h("div", { key: '80c1db9cd2c47e4acfece06a9b23896cc0acef88', 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 (index.h("div", { class: "sd-select-multiple-group__trigger", tabindex: this.disabled ? -1 : 0, onClick: this.handleTriggerClick, style: this.triggerStyle }, index.h("span", { class: "sd-select-multiple-group__value" }, this.getTriggerLabel()), this.clearable && selectedOption?.length > 0 && !this.disabled && (index.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();
+            } })), index.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 (index.h("sd-portal", { open: this.isOpen, parentRef: this.selectRef, onSdClose: this.closeDropdown }, index.h("div", { style: { width: '0', height: '0', overflow: 'visible' } }, index.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 && (index.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 ? (index.h(index.Fragment, null, this.useAll && (index.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$1) => (index.h("slot", { name: `option-${option.value}` }, index.h("sd-select-option-group", { option: option, index: index$1, isSelected: option.type === 'item'
+                ? this.value?.some(selected => selected.value === option.value)
+                : this.isAllChildrenSelected(option), isFocused: index$1 === 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) }) })))))) : (index.h("slot", { name: "option-placeholder" }, index.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"]
+    }; }
+};
+SdSelectMultipleGroup.style = sdSelectMultipleGroupCss();
+
+exports.sd_select_multiple_group = SdSelectMultipleGroup;
+//# sourceMappingURL=sd-select-multiple-group.entry.cjs.js.map