@sellmate/design-system 1.0.76 → 1.0.78

package/dist/esm/sd-progress.entry.js

@@ -1,61 +0,0 @@
-import { r as registerInstance, h } from './index-Bp7ytJz5.js';
-
-const sdProgressCss = () => `sd-progress{display:block}sd-progress .sd-progress__bar{position:relative;width:100%;height:20px;overflow:hidden;border-radius:4px;background-color:#EEEEEE;text-align:center}sd-progress .sd-progress__bar__percent{width:var(--progress-percentage);height:100%;border-radius:4px;background-color:var(--progress-color, #0075FF);transition:all 0.5s}sd-progress .sd-progress__bar__percent.proceed{border-top-right-radius:50%}sd-progress .sd-progress__bar__indicator{position:absolute;left:0;top:0;height:20px;width:100%;background-color:#EEEEEE;font-size:12px;font-weight:700;line-height:20px;z-index:1}sd-progress .sd-progress__bar__indicator--left{color:var(--progress-color, #0075FF);clip-path:inset(0 0 0 var(--progress-percentage))}sd-progress .sd-progress__bar__indicator--right{color:white;background-color:var(--progress-color, #0075FF);clip-path:inset(0 calc(100% - var(--progress-percentage)) 0 0)}sd-progress .sd-progress__spinner{display:flex;flex-direction:column;align-items:center;justify-content:center}sd-progress .sd-progress__spinner svg{transform:rotate(-90deg)}sd-progress .sd-progress__spinner__label{margin-top:8px;font-size:16px;color:var(--progress-color, #0075FF)}sd-progress .sd-progress__label{margin-top:4px;font-size:12px;color:#222222;text-align:center}`;
-
-const SdProgress = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    type = 'bar';
-    error = false;
-    percentage = 0;
-    size = 80;
-    strokeWidth = 12;
-    label;
-    statusColor = {
-        default: '#aaaaaa',
-        progress: '#0075ff',
-        complete: '#12B553',
-        error: '#FB4444',
-    };
-    get progressPercentage() {
-        if (this.error)
-            return 100;
-        return this.percentage;
-    }
-    get progressStatus() {
-        if (this.error)
-            return 'error';
-        switch (this.percentage) {
-            case 100:
-                return 'complete';
-            case 0:
-                return 'default';
-            default:
-                return 'progress';
-        }
-    }
-    get progressColor() {
-        return this.statusColor[this.progressStatus];
-    }
-    render() {
-        return (h("div", { key: '34c1ecf23c120f53595529004ed3d6818896e816', style: {
-                '--progress-color': this.progressColor,
-                '--progress-percentage': `${this.progressPercentage}%`,
-            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: '29461b9428416262c10b1917eaee4e0091d290dc', class: "sd-progress__label" }, this.label)));
-    }
-    renderBarProgress() {
-        return (h("div", { class: `sd-progress__bar sd-progress__bar--${this.progressStatus}` }, h("div", { class: ['sd-progress__bar__percent', this.progressPercentage < 100 ? 'proceed' : ''].join(' ') }), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--left" }, this.progressPercentage, "%"), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--right" }, this.progressPercentage, "%")));
-    }
-    renderSpinnerProgress() {
-        const radius = (this.size - this.strokeWidth) / 2; // 원의 반지름
-        const circumference = 2 * Math.PI * radius; // 원의 둘레
-        const offset = circumference - (this.progressPercentage / 100) * circumference; // 진행률에 따른 offset
-        const progressBgSize = `${this.size}px`;
-        const progressSize = `${this.size / 2}px`;
-        return (h("div", { class: `sd-progress__spinner sd-progress__spinner--${this.progressStatus}` }, h("svg", { width: progressBgSize, height: progressBgSize }, h("circle", { cx: progressSize, cy: progressSize, r: radius, stroke: "#EEEEEE", "stroke-width": this.strokeWidth, fill: "transparent" }), h("circle", { cx: progressSize, cy: progressSize, r: radius, stroke: this.progressColor, "stroke-width": this.strokeWidth, fill: "transparent", "stroke-dasharray": circumference, "stroke-dashoffset": offset, "stroke-linecap": "round", class: "transition-all duration-500" })), h("strong", { class: "sd-progress__spinner__label" }, this.progressPercentage, " %")));
-    }
-};
-SdProgress.style = sdProgressCss();
-
-export { SdProgress as sd_progress };

package/dist/esm/sd-select-dropdown_2.entry.js

@@ -1,228 +0,0 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-Bp7ytJz5.js';
-
-const sdSelectDropdownCss = () => `.sd-select-dropdown .sd-select-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-dropdown{overflow:auto;min-width:fit-content;width:var(--select-dropdown-width, 200px);max-height:var(--select-dropdown-height, 260px);padding-bottom:2px;background-color:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);border-radius:4px;overflow-y:auto;color:#333333;display:flex;flex-direction:column;opacity:0.5;transition:opacity 0.15s ease-in}.sd-select-dropdown--ready{opacity:1}`;
-
-const SdSelectDropdown = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.optionClick = createEvent(this, "sdOptionClick", 7);
-        this.optionFiltered = createEvent(this, "sdOptionFiltered", 7);
-        this.scroll = createEvent(this, "sdScroll", 7);
-    }
-    itemIndex;
-    value = null;
-    options;
-    width;
-    dropdownHeight;
-    searchable;
-    optionPlaceholder;
-    useCheckbox = false;
-    useAll = false;
-    filteredOptions = [];
-    searchText = null;
-    isScrolled = false;
-    isDropdownReady = false;
-    optionClick;
-    optionFiltered;
-    scroll;
-    filteredOptionsChanged(newValue) {
-        this.optionFiltered.emit(newValue);
-    }
-    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 = this.dropdownRef?.querySelectorAll('.sd-select-dropdown sd-select-option') || [];
-        const currentItem = optionElements?.[this.itemIndex];
-        if (!currentItem)
-            return;
-        this.optionRef = currentItem;
-        const isOptionDisabled = await this.optionRef.sdIsDisabled();
-        if (isOptionDisabled) {
-            newIndex > oldIndex ? this.itemIndex++ : this.itemIndex--;
-            return;
-        }
-        this.scrollToOption(currentItem);
-    }
-    componentWillLoad() {
-        this.filteredOptions = this.options;
-        // DOM 렌더링을 기다리기 위해 이중 requestAnimationFrame 사용 - (레이아웃/스타일 계산 - 페인트 이후)
-        requestAnimationFrame(() => {
-            requestAnimationFrame(async () => {
-                const selectedOptions = this.getSelectedOption();
-                // 선택된 옵션이 있으면 첫 번째 선택된 항목으로 스크롤
-                if (selectedOptions) {
-                    const selectedIndex = Array.isArray(selectedOptions)
-                        ? this.options.indexOf(selectedOptions[0])
-                        : this.options.indexOf(selectedOptions);
-                    const optionElements = Array.from(this.dropdownRef?.querySelectorAll('sd-select-option') || []);
-                    // 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, 'instant');
-                    }
-                }
-                this.isDropdownReady = true;
-                if (this.searchable) {
-                    const searchInput = await this.getNativeInputElement();
-                    if (searchInput) {
-                        requestAnimationFrame(() => {
-                            searchInput.focus({ preventScroll: true });
-                        });
-                    }
-                }
-            });
-        });
-    }
-    dropdownRef;
-    searchRef;
-    optionRef;
-    get dropdownSize() {
-        return {
-            '--select-dropdown-width': this.width || '200px',
-            '--select-dropdown-height': this.dropdownHeight || '260px',
-        };
-    }
-    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() {
-        if (typeof this.value !== 'object') {
-            return this.options.find(option => option.value === this.value);
-        }
-        return this.options.filter(option => this.value?.includes(option));
-    }
-    isOptionSelected(value) {
-        if (Array.isArray(this.value)) {
-            return this.value.some(selected => selected.value === value);
-        }
-        return value === this.value;
-    }
-    async getNativeInputElement() {
-        if (this.searchRef) {
-            return this.searchRef.sdGetNativeElement();
-        }
-        return null;
-    }
-    scrollToOption(optionElement, scrollBehavior = 'smooth') {
-        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-input');
-        const searchOffset = searchContainer ? searchContainer.offsetHeight : 0;
-        const visibleTop = dropdownScrollTop + searchOffset;
-        const visibleBottom = dropdownScrollTop + dropdownHeight;
-        if (optionTop < visibleTop) {
-            dropdown.scrollTo({ top: optionTop - searchOffset, behavior: scrollBehavior });
-        }
-        else if (optionTop + optionHeight > visibleBottom) {
-            dropdown.scrollTo({
-                top: optionTop + optionHeight - dropdownHeight + searchOffset,
-                behavior: scrollBehavior,
-            });
-        }
-    }
-    handleDropdownScroll = (event) => {
-        const target = event.target;
-        const scrollTop = target.scrollTop;
-        // 스크롤이 조금이라도 되면 그림자 표시
-        this.isScrolled = scrollTop > 0;
-    };
-    render() {
-        return (h("div", { key: 'a831a99130074fa072534d76f4b0db7169d906e2', class: {
-                'sd-select-dropdown': true,
-                'sd-select-dropdown--ready': this.isDropdownReady,
-            }, style: this.dropdownSize, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (h("sd-select-search-input", { key: 'f09a5575454c30387aeac9996d15625d7581a367', 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 ? (this.filteredOptions.map((option, index) => (h("slot", { name: `option-${option.value}` }, h("sd-select-option", { option: option, index: index, isSelected: this.isOptionSelected(option.value), isFocused: index === this.itemIndex, onOptionClick: ({ detail }) => this.optionClick.emit(detail), useCheckbox: this.useCheckbox }))))) : (h("slot", { name: "option-placeholder" }, h("div", { class: 'sd-select-option-placeholder' }, this.optionPlaceholder)))));
-    }
-    static get watchers() { return {
-        "filteredOptions": [{
-                "filteredOptionsChanged": 0
-            }],
-        "searchText": [{
-                "searchTextChanged": 0
-            }],
-        "itemIndex": [{
-                "itemIndexChanged": 0
-            }]
-    }; }
-};
-SdSelectDropdown.style = sdSelectDropdownCss();
-
-const sdSelectOptionCss = () => `sd-select-option{display:block;height:fit-content;line-height:0}sd-select-option .sd-select__option{display:flex;padding:4px 12px;font-size:12px;line-height:20px;cursor:pointer}sd-select-option .sd-select__option__checkbox-wrapper{display:flex;width:100%;column-gap:8px;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}sd-select-option .sd-select__option--focused{background-color:#E6F1FF}sd-select-option .sd-select__option--selected:not(:hover):not(.sd-select__option--use-checkbox),sd-select-option .sd-select__option--focused:not(:hover):not(.sd-select__option--use-checkbox){color:#0075FF;font-weight:700}sd-select-option .sd-select__option--disabled{color:#AAAAAA;cursor:not-allowed}sd-select-option .sd-select__option:hover:not(.sd-select__option--disabled){background-color:#0075FF;color:white}`;
-
-const SdSelectOption = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.optionClick = createEvent(this, "optionClick", 7);
-    }
-    get el() { return getElement(this); }
-    option;
-    index;
-    isSelected = false;
-    isFocused = false;
-    optionStyle;
-    disabled = false;
-    useCheckbox = false;
-    isHovered = false;
-    async sdIsDisabled() {
-        return !!this.option.disabled;
-    }
-    optionClick;
-    handleClick = (event) => {
-        event.stopPropagation();
-        if (!this.option.disabled && !this.disabled) {
-            this.optionClick.emit({
-                option: this.option,
-                index: this.index,
-                event,
-            });
-        }
-    };
-    render() {
-        return (h("div", { key: '413176678e27ad80c3ba51f8e32681f017d210ac', class: {
-                'sd-select__option': true,
-                'sd-select__option--selected': this.isSelected,
-                'sd-select__option--disabled': !!this.option.disabled,
-                'sd-select__option--focused': this.isFocused,
-                'sd-select__option--use-checkbox': this.useCheckbox,
-            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: this.handleClick }, this.useCheckbox ? (h("div", { class: "sd-select__option__checkbox-wrapper" }, h("sd-checkbox", { value: this.isSelected, disabled: this.option.disabled,
-            //   checkboxStyle={
-            //    !this.isSelected
-            //     ? { borderColor: '#888' }
-            //     : this.isHovered
-            //       ? { borderColor: 'white' }
-            //       : { borderColor: '#0075ff' }
-            //   }
-            onClick: e => {
-                e.preventDefault();
-                this.handleClick(e);
-            } }), h("span", { class: "sd-select__option-label" }, this.option.label))) : (this.option.label)));
-    }
-};
-SdSelectOption.style = sdSelectOptionCss();
-
-export { SdSelectDropdown as sd_select_dropdown, SdSelectOption as sd_select_option };

package/dist/esm/sd-select-group.entry.js

@@ -1,330 +0,0 @@
-import { r as registerInstance, c as createEvent, a as getElement, h, F as Fragment } from './index-Bp7ytJz5.js';
-import { n as nanoid } from './index-CCwNgVmC.js';
-import { B as BaseDropdownEvent } from './base-dropdown-event-CRdYeSBK.js';
-import { S as SelectKeyboardNavigation } from './select-keyboard-navigation-Cy6HMEsK.js';
-
-const sdSelectGroupCss = () => `.sd-select-group__dropdown .sd-select-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-group{display:inline-flex;flex-flow:column nowrap;width:fit-content;height:fit-content}sd-select-group:focus,sd-select-group:focus-visible,sd-select-group:focus-within{outline:none !important}sd-select-group .sd-select-group{width:100%}sd-select-group .sd-select-group .sd-select-group__trigger{padding:4px 28px 4px 12px;display:flex;width:100%;height:100%;align-items:center;cursor:pointer}.sd-field--disabled sd-select-group .sd-select-group .sd-select-group__trigger{cursor:not-allowed}sd-select-group .sd-select-group .sd-select-group__trigger .sd-select-group__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400;text-align:left}sd-select-group .sd-select-group .sd-select-group__trigger .sd-select-group__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select-group .sd-select-group .sd-select-group__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease}sd-select-group .sd-select-group .sd-select-group__arrow--open{transform:rotate(180deg)}.sd-select-group__dropdown{overflow:auto;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-group__dropdown--ready{opacity:1}`;
-
-const SdSelectGroup = class extends BaseDropdownEvent {
-    constructor(hostRef) {
-        super();
-        registerInstance(this, hostRef);
-        this.update = createEvent(this, "sdUpdate", 7);
-        this.dropDownShow = createEvent(this, "sdDropDownShow", 7);
-    }
-    get el() { return getElement(this); }
-    // props
-    value = null;
-    options = [];
-    placeholder = '선택';
-    optionPlaceholder = '선택지가 없습니다.';
-    width = '200px';
-    dropdownHeight = '260px';
-    autoFocus = false;
-    disabled = false;
-    clearable = false;
-    searchable = false;
-    // props - label
-    label = '';
-    labelWidth = '';
-    addonLabel = '';
-    addonAlign = 'start';
-    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();
-    }
-    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') || []);
-        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() {
-        this.onDropdownToggle(this.isOpen);
-        this.dropDownShow?.emit({ isOpen: this.isOpen });
-        this.isDropdownReady = false;
-        if (this.isOpen === false) {
-            await this.formField?.sdValidate();
-            return;
-        }
-        requestAnimationFrame(() => {
-            requestAnimationFrame(async () => {
-                const selectedOption = this.getSelectedOption();
-                if (selectedOption) {
-                    const selectedIndex = this.filteredOptions.indexOf(selectedOption);
-                    const optionElements = Array.from(this.dropdownRef?.querySelectorAll('sd-select-option-group') || []);
-                    const targetIndex = Math.min(selectedIndex + 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();
-    }
-    componentDidLoad() {
-        if (this.autoFocus) {
-            this.selectRef?.focus();
-        }
-    }
-    componentDidRender() {
-        const trigger = this.triggerRef;
-        const rect = trigger?.getBoundingClientRect();
-        this.dropDownWidth = rect?.width ? `${rect.width}px` : this.width;
-    }
-    disconnectedCallback() {
-        this.cleanupEvent();
-    }
-    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 && selectedOption.type === 'item') {
-                    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 === 'item') {
-            this.handleOptionSelection(option);
-        }
-    };
-    filterOptions() {
-        if (!this.searchText || this.searchText.trim() === '') {
-            this.filteredOptions = this.options;
-            return;
-        }
-        const searchTerm = this.searchText.toLowerCase();
-        const matchedOptions = new Set();
-        this.options.forEach(option => {
-            if (option.label.toLowerCase().includes(searchTerm)) {
-                matchedOptions.add(option);
-                this.addParentGroups(option, matchedOptions);
-            }
-        });
-        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.find(option => option.value === this.value);
-    }
-    handleDropdownScroll = (event) => {
-        const target = event.target;
-        this.isScrolled = target.scrollTop > 0;
-    };
-    async getNativeInputElement() {
-        if (this.searchRef) {
-            return this.searchRef.sdGetNativeElement();
-        }
-        return null;
-    }
-    handleOptionSelection = (option) => {
-        if (!option || option.disabled)
-            return;
-        this.value = option.value;
-        this.isOpen = false;
-        const selectedOption = this.getSelectedOption();
-        this.update?.emit({ value: selectedOption?.value || null, option: selectedOption || null });
-    };
-    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-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: 'aa5470eaba6489d6eb380996eeb0c0c985e20fbf', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, addonAlign: this.addonAlign, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, h("div", { key: '90d4cc0bde3240be6a8406c9ea6c82c2fdad3482', class: {
-                'sd-select-group': true,
-                'sd-select-group--open': this.isOpen,
-                'sd-select-group--disabled': this.disabled,
-                'sd-select-group--label': !!this.label,
-            }, ref: el => (this.selectRef = el) }, this.renderTrigger(), this.renderDropdown())));
-    }
-    renderTrigger() {
-        const selectedOption = this.getSelectedOption();
-        return (h("div", { class: "sd-select-group__trigger", tabindex: this.disabled ? -1 : 0, onClick: this.handleTriggerClick, style: this.triggerStyle, ref: el => (this.triggerRef = el) }, h("span", { class: "sd-select-group__value" }, selectedOption ? selectedOption.label : this.placeholder), this.clearable && selectedOption && !this.disabled && (h("sd-icon", { key: "close-icon", name: "close", size: 10, color: "grey_65", class: "sd-select-group__clear", onClick: async (event) => {
-                event.stopPropagation();
-                this.value = null;
-                this.update?.emit({ value: null, option: null });
-                await this.formField?.sdValidate();
-            } })), h("sd-icon", { key: "arrow-icon", name: "arrowDown", color: "grey_65", class: {
-                'sd-select-group__arrow': true,
-                'sd-select-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-group__dropdown': true,
-                'sd-select-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.filteredOptions.map((option, index) => (h("slot", { name: `option-${option.value}` }, h("sd-select-option-group", { option: option, index: index, isSelected: option.type === 'item' ? option.value === this.value : false, isFocused: index === this.itemIndex, optionStyle: this.optionStyle, onOptionClick: ({ detail, }) => {
-                if (option.type !== 'item')
-                    return;
-                this.handleOptionClick(detail);
-            }, useCheckbox: false, useIndicator: false })))))) : (h("slot", { name: "option-placeholder" }, h("div", { class: 'sd-select-group__option-placeholder', style: this.optionStyle }, this.optionPlaceholder)))))));
-    }
-    static get watchers() { return {
-        "options": [{
-                "optionsChanged": 0
-            }],
-        "searchText": [{
-                "searchTextChanged": 0
-            }],
-        "itemIndex": [{
-                "itemIndexChanged": 0
-            }],
-        "isOpen": [{
-                "isOpenChanged": 0
-            }]
-    }; }
-};
-SdSelectGroup.style = sdSelectGroupCss();
-
-export { SdSelectGroup as sd_select_group };