@sellmate/design-system 0.0.23 → 0.0.25

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

@@ -0,0 +1,261 @@
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-CqOU6L62.js';
+import { B as BaseDropdownEvent, S as SelectKeyboardNavigation } from './select-keyboard-navigation-C2JaR3A6.js';
+
+const sdSelectMultipleCss = ".sd-select-multiple__dropdown{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-select-multiple__dropdown::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-select-multiple__dropdown::-webkit-scrollbar:horizontal{height:8px}.sd-select-multiple__dropdown::-webkit-scrollbar:vertical{width:8px}.sd-select-multiple__dropdown::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-select-multiple__dropdown::-webkit-scrollbar-track{background-color:transparent}:host{display:inline-block;height:fit-content;position:relative}.sd-select-multiple{display:flex;flex-wrap:nowrap;width:var(--select-width, 200px);height:28px;cursor:pointer;user-select:none;border:1px solid #aaaaaa;border-radius:4px;background-color:white}.sd-select-multiple:hover:not(.sd-select-multiple--disabled){background:#f6f6f6}.sd-select-multiple.sd-select-multiple--disabled{cursor:not-allowed;background-color:#eeeeee;border-color:#cccccc}.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__label{border-right:1px solid #cccccc}.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__trigger{color:#888888}.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__trigger:focus,.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__trigger:focus-visible,.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__trigger:focus-within{outline:none !important}.sd-select-multiple__label{font-size:12px;font-weight:500;color:#333333;padding:4px 12px;border-right:1px solid #cccccc;border-radius:4px 0 0 4px;background-color:#f6f6f6}.sd-select-multiple__container{position:relative;width:100%;display:flex}.sd-select-multiple__container .sd-select-multiple__trigger{padding:4px 20px 4px 12px;display:flex;width:100%;align-items:center}.sd-select-multiple__container .sd-select-multiple__trigger .sd-select-multiple__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400}.sd-select-multiple__container .sd-select-multiple__trigger .sd-select-multiple__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}.sd-select-multiple__container .sd-select-multiple__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease}.sd-select-multiple__container .sd-select-multiple__arrow--open{transform:rotate(180deg)}.sd-select-multiple__dropdown{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}.sd-select-multiple__dropdown .sd-select-multiple__search-container{position:sticky;top:0;display:flex;width:100%;background-color:white;align-items:center;padding:4px 8px;z-index:1}.sd-select-multiple__dropdown .sd-select-multiple__search-container--scrolled{box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}.sd-select-multiple__dropdown .sd-select-multiple__option-placeholder{padding:4px 12px;font-size:12px;line-height:20px;text-align:left}";
+
+const SdSelectMultiple = class extends BaseDropdownEvent {
+    constructor(hostRef) {
+        super();
+        registerInstance(this, hostRef);
+        this.sdChange = createEvent(this, "sdChange");
+        this.dropDownShow = createEvent(this, "dropDownShow");
+    }
+    get el() { return getElement(this); }
+    // props
+    value = null;
+    label = '';
+    options = [];
+    placeholder = '선택';
+    optionPlaceholder = '옵션이 없습니다.';
+    width = '200px';
+    dropdownHeight = '260px';
+    disabled = false;
+    clearable = false;
+    searchable = false;
+    useCheckbox = false;
+    // 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();
+        this.handleOptionSelection(option);
+    };
+    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];
+        }
+    };
+    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 method
+    render() {
+        const style = {
+            '--select-width': this.width || '200px',
+            '--select-dropdown-height': this.dropdownHeight || '260px',
+        };
+        return (h(Host, { key: '8a237d4dc7f743a7685b440cd654d51629765a20', style: style }, h("div", { key: 'c1240092508fbb9e9b638803171847b174da9062', class: {
+                'sd-select-multiple': true,
+                'sd-select-multiple--open': this.isOpen,
+                'sd-select-multiple--disabled': this.disabled,
+            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), h("div", { key: 'b99913866f316d7eacffd9e0e71fd58baac05c34', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
+    }
+    renderLabel(label) {
+        if (!label)
+            return null;
+        return h("label", { class: "sd-select-multiple__label" }, label);
+    }
+    renderTrigger() {
+        const selectedOption = this.getSelectedOption();
+        return (h("div", { class: "sd-select-multiple__trigger", tabindex: this.disabled ? -1 : 0, onClick: this.handleTriggerClick }, h("span", { class: "sd-select-multiple__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__clear", onClick: event => {
+                event.stopPropagation();
+                this.value = null;
+            } })), h("sd-icon", { key: "arrow-icon", name: "arrowDown", color: "#888", class: { 'sd-select-multiple__arrow': true, 'sd-select-multiple__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__dropdown", onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (h("div", { class: {
+                'sd-select-multiple__search-container': true,
+                'sd-select-multiple__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", style: { marginRight: '4px' }, slot: "prefix" })))), 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.value?.some(selected => selected.value === option.value), isFocused: index === this.itemIndex, onOptionClick: ({ detail }) => this.handleOptionClick(detail), useCheckbox: this.useCheckbox }))))) : (h("slot", { name: "option-placeholder" }, h("div", { class: 'sd-select-multiple__option-placeholder' }, this.optionPlaceholder))))));
+    }
+    static get watchers() { return {
+        "value": ["valueChanged"],
+        "options": ["optionsChanged"],
+        "searchText": ["searchTextChanged"],
+        "itemIndex": ["itemIndexChanged"],
+        "isOpen": ["isOpenChanged"]
+    }; }
+};
+SdSelectMultiple.style = sdSelectMultipleCss;
+
+export { SdSelectMultiple as sd_select_multiple };
+//# sourceMappingURL=sd-select-multiple.entry.js.map

package/dist/esm/sd-select-multiple.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-select-multiple.entry.js","sources":["src/components/sd-select-multiple/sd-select-multiple.scss?tag=sd-select-multiple","src/components/sd-select-multiple/sd-select-multiple.tsx"],"sourcesContent":["@import 'variables';\r\n@import 'extend';\r\n\r\n:host {\r\n display: inline-block;\r\n height: fit-content;\r\n position: relative;\r\n}\r\n\r\n.sd-select-multiple {\r\n display: flex;\r\n flex-wrap: nowrap;\r\n width: var(--select-width, 200px);\r\n height: 28px;\r\n cursor: pointer;\r\n user-select: none;\r\n border: 1px solid $grey_55;\r\n border-radius: 4px;\r\n background-color: white;\r\n\r\n &:hover:not(.sd-select-multiple--disabled) {\r\n  background: $grey_10;\r\n }\r\n\r\n &.sd-select-multiple--disabled {\r\n  cursor: not-allowed;\r\n  background-color: $grey_20;\r\n  border-color: $grey_45;\r\n\r\n  .sd-select-multiple__label {\r\n   border-right: 1px solid $grey_45;\r\n  }\r\n\r\n  .sd-select-multiple__trigger {\r\n   color: $grey_65;\r\n   &:focus,\r\n   &:focus-visible,\r\n   &:focus-within {\r\n    outline: none !important;\r\n   }\r\n  }\r\n }\r\n\r\n &__label {\r\n  font-size: 12px;\r\n  font-weight: 500;\r\n  color: $grey_90;\r\n  padding: 4px 12px;\r\n  border-right: 1px solid $grey_45;\r\n  border-radius: 4px 0 0 4px;\r\n  background-color: $grey_10;\r\n }\r\n\r\n &__container {\r\n  position: relative;\r\n  width: 100%;\r\n  display: flex;\r\n\r\n  .sd-select-multiple__trigger {\r\n   padding: 4px 20px 4px 12px;\r\n   display: flex;\r\n   width: 100%;\r\n   align-items: center;\r\n\r\n   .sd-select-multiple__value {\r\n    flex: 1;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    white-space: nowrap;\r\n    line-height: 20px;\r\n    font-size: 12px;\r\n    font-weight: 400;\r\n   }\r\n\r\n   .sd-select-multiple__clear {\r\n    margin: 0 4px;\r\n    width: 8px;\r\n    height: 8px;\r\n    background-color: transparent;\r\n    outline: none;\r\n    border: none;\r\n   }\r\n  }\r\n\r\n  .sd-select-multiple__arrow {\r\n   position: absolute;\r\n   top: 8px;\r\n   right: 8px;\r\n   width: 12px;\r\n   height: 12px;\r\n   color: $grey_65;\r\n   transition: transform 0.3s ease;\r\n\r\n   &--open {\r\n    transform: rotate(180deg);\r\n   }\r\n  }\r\n }\r\n}\r\n\r\n.sd-select-multiple__dropdown {\r\n @extend %scrollBar;\r\n width: var(--select-dropdown-width, 200px);\r\n max-height: var(--select-dropdown-height, 260px);\r\n padding-bottom: 2px;\r\n background-color: white;\r\n box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.1);\r\n border-radius: 4px;\r\n overflow-y: auto;\r\n color: $grey_90;\r\n\r\n .sd-select-multiple__search-container {\r\n  position: sticky;\r\n  top: 0;\r\n  display: flex;\r\n  width: 100%;\r\n  background-color: white;\r\n  align-items: center;\r\n  padding: 4px 8px;\r\n  z-index: 1;\r\n\r\n  &--scrolled {\r\n   box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.2);\r\n  }\r\n }\r\n\r\n .sd-select-multiple__option-placeholder {\r\n  padding: 4px 12px;\r\n  font-size: 12px;\r\n  line-height: 20px;\r\n  text-align: left;\r\n }\r\n}\r\n","import {\r\n Component,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n Host,\r\n Prop,\r\n State,\r\n Watch,\r\n h,\r\n} from '@stencil/core';\r\nimport type { SelectOption, SelectMultipleEvents } from '../../types/select';\r\nimport { SelectKeyboardNavigation } from '../../utils/select-keyboard-navigation';\r\nimport { BaseDropdownEvent } from '../../utils/base-dropdown-event';\r\n\r\n@Component({\r\n tag: 'sd-select-multiple',\r\n styleUrl: 'sd-select-multiple.scss',\r\n})\r\nexport class SdSelectMultiple extends BaseDropdownEvent {\r\n @Element() el!: HTMLElement;\r\n\r\n // props\r\n @Prop({ mutable: true }) value: SelectOption[] | null = null;\r\n @Prop() label: string = '';\r\n @Prop({ mutable: true }) options: SelectOption[] = [];\r\n @Prop() placeholder: string = '선택';\r\n @Prop() optionPlaceholder: string = '옵션이 없습니다.';\r\n @Prop() width: string = '200px';\r\n @Prop() dropdownHeight: string = '260px';\r\n @Prop() disabled: boolean = false;\r\n @Prop() clearable: boolean = false;\r\n @Prop() searchable: boolean = false;\r\n @Prop() useCheckbox: boolean = false;\r\n\r\n // props - custom slots\r\n @Prop() optionRenderer?: (option: SelectOption, index: number, isSelected: boolean) => any;\r\n\r\n // states\r\n @State() filteredOptions = this.options;\r\n @State() isOpen: boolean = false;\r\n @State() searchText: string | null = null;\r\n @State() itemIndex: number = -1;\r\n @State() isScrolled: boolean = false;\r\n\r\n // events\r\n @Event() sdChange?: EventEmitter<SelectMultipleEvents['sdChange']>;\r\n @Event() dropDownShow?: EventEmitter<SelectMultipleEvents['dropDownShow']>;\r\n\r\n private selectRef?: HTMLElement;\r\n private searchRef?: HTMLSdInputElement;\r\n private optionRef?: HTMLSdSelectOptionElement;\r\n private dropdownRef?: HTMLElement;\r\n\r\n @Watch('value')\r\n valueChanged() {\r\n  this.sdChange?.emit(this.value);\r\n }\r\n\r\n @Watch('options')\r\n optionsChanged() {\r\n  this.filteredOptions = this.options;\r\n  this.filterOptions();\r\n }\r\n\r\n @Watch('searchText')\r\n searchTextChanged() {\r\n  this.filterOptions();\r\n }\r\n\r\n @Watch('itemIndex')\r\n async itemIndexChanged(newIndex: number, oldIndex: number) {\r\n  if (this.searchable) {\r\n   const searchInput = await this.getNativeInputElement();\r\n   if (this.itemIndex === -1) {\r\n    searchInput?.focus();\r\n    return;\r\n   } else if (searchInput?.matches(':focus')) {\r\n    searchInput?.blur();\r\n   }\r\n  }\r\n\r\n  const optionElements = Array.from(\r\n   this.dropdownRef?.querySelectorAll('.sd-select-multiple__dropdown sd-select-option') || [],\r\n  );\r\n  const currentItem = optionElements?.[this.itemIndex];\r\n\r\n  if (!currentItem || !this.isOpen) return;\r\n\r\n  this.optionRef = currentItem as HTMLSdSelectOptionElement;\r\n  const isOptionDisabled = await this.optionRef.isDisabled();\r\n\r\n  if (isOptionDisabled) {\r\n   newIndex > oldIndex ? this.itemIndex++ : this.itemIndex--;\r\n   return;\r\n  }\r\n\r\n  this.scrollToOption(currentItem as HTMLElement);\r\n }\r\n\r\n @Watch('isOpen')\r\n async isOpenChanged() {\r\n  // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지\r\n  this.onDropdownToggle(this.isOpen);\r\n\r\n  const selectedOption = this.getSelectedOption();\r\n  if (!selectedOption) {\r\n   this.itemIndex = -1;\r\n  } else {\r\n   this.itemIndex = this.options.indexOf(selectedOption[0]);\r\n  }\r\n\r\n  this.dropDownShow?.emit({ isOpen: this.isOpen });\r\n\r\n  if (this.isOpen === false) return;\r\n\r\n  await new Promise(resolve => setTimeout(resolve, 10));\r\n\r\n  const optionElements = Array.from(\r\n   this.dropdownRef?.querySelectorAll('.sd-select-multiple__dropdown sd-select-item') || [],\r\n  );\r\n  const currentItem = optionElements?.[this.itemIndex];\r\n\r\n  // 드롭다운이 열릴 때 검색 입력에 포커스\r\n  if (this.searchable) {\r\n   const searchInput = await this.getNativeInputElement();\r\n   searchInput?.focus();\r\n  }\r\n\r\n  if (!currentItem) return;\r\n\r\n  await new Promise(resolve => setTimeout(resolve, 10)); // 추가 딜레이\r\n  this.scrollToOption(currentItem as HTMLElement);\r\n }\r\n\r\n connectedCallback() {\r\n  // props가 모두 설정된 후에 실행되므로 올바른 options 값을 가져올 수 있음\r\n  this.filteredOptions = this.options;\r\n  this.initializeEvent(); // global dropdown Manager에 등록 + 이벤트 핸들러 초기화\r\n }\r\n\r\n disconnectedCallback() {\r\n  this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리\r\n }\r\n\r\n protected handleDocumentClick(event: Event): void {\r\n  if (!this.selectRef?.contains(event.target as Node)) {\r\n   this.isOpen = false;\r\n  }\r\n }\r\n\r\n protected handleDocumentKeydown(keyboardEvent: KeyboardEvent): void {\r\n  keyboardEvent.stopPropagation();\r\n  const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];\r\n  if (!targetKey.includes(keyboardEvent.key)) return;\r\n\r\n  keyboardEvent.preventDefault();\r\n  switch (keyboardEvent.key) {\r\n   case 'ArrowDown':\r\n   case 'ArrowUp':\r\n    const keyboardNavigation = new SelectKeyboardNavigation(this.searchable, this.filteredOptions);\r\n    const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);\r\n    this.itemIndex = nextIndex;\r\n    break;\r\n   case 'Enter':\r\n    const selectedOption = this.filteredOptions[this.itemIndex];\r\n    if (selectedOption && !selectedOption.disabled) {\r\n     this.handleOptionSelection(selectedOption);\r\n    }\r\n    break;\r\n   case 'Escape':\r\n    this.isOpen = false;\r\n    break;\r\n  }\r\n }\r\n\r\n // event handlers\r\n handleTriggerClick = (event: Event) => {\r\n  event.stopPropagation();\r\n\r\n  if (!this.disabled) {\r\n   this.isOpen = !this.isOpen;\r\n   this.dropDownShow?.emit({ isOpen: this.isOpen });\r\n  }\r\n };\r\n\r\n handleOptionClick = (detail: { option: SelectOption; event: Event }) => {\r\n  const { option, event } = detail;\r\n  event.stopPropagation();\r\n\r\n  this.handleOptionSelection(option);\r\n };\r\n\r\n private filterOptions() {\r\n  if (!this.searchText || this.searchText.trim() === '') {\r\n   // 검색어가 없으면 전체 옵션 표시\r\n   this.filteredOptions = this.options;\r\n  } else {\r\n   // 검색어가 있으면 필터링\r\n   this.filteredOptions = this.options.filter(option =>\r\n    option.label.toLowerCase().includes(this.searchText!.toLowerCase()),\r\n   );\r\n  }\r\n }\r\n\r\n private getSelectedOption(): SelectOption[] {\r\n  return this.options.filter(option => this.value?.includes(option));\r\n }\r\n\r\n private handleDropdownScroll = (event: Event) => {\r\n  const target = event.target as HTMLElement;\r\n  const scrollTop = target.scrollTop;\r\n\r\n  // 스크롤이 조금이라도 되면 그림자 표시\r\n  this.isScrolled = scrollTop > 0;\r\n };\r\n\r\n private async getNativeInputElement(): Promise<HTMLInputElement | null> {\r\n  if (this.searchRef) {\r\n   return this.searchRef.getNativeElement();\r\n  }\r\n  return null;\r\n }\r\n\r\n private handleOptionSelection = (option: SelectOption) => {\r\n  if (!option || option.disabled) return;\r\n\r\n  const isAlreadySelected = this.value?.some(opt => opt.value === option.value);\r\n  if (isAlreadySelected) {\r\n   // 이미 선택된 옵션인 경우, 선택 해제\r\n   this.value = this.value?.filter(opt => opt.value !== option.value) || null;\r\n  } else {\r\n   // 새로운 옵션 선택\r\n   this.value = [...(this.value || []), option];\r\n  }\r\n };\r\n\r\n closeDropdown() {\r\n  this.isOpen = false;\r\n }\r\n\r\n private scrollToOption(optionElement: HTMLElement) {\r\n  if (!this.dropdownRef || !optionElement) return;\r\n\r\n  const dropdown = this.dropdownRef;\r\n  const optionTop = optionElement.offsetTop;\r\n  const optionHeight = optionElement.offsetHeight;\r\n  const dropdownScrollTop = dropdown.scrollTop;\r\n  const dropdownHeight = dropdown.clientHeight;\r\n\r\n  const searchContainer = dropdown.querySelector('.sd-select__search-container');\r\n  const searchOffset = searchContainer ? (searchContainer as HTMLElement).offsetHeight : 0;\r\n\r\n  const visibleTop = dropdownScrollTop + searchOffset;\r\n  const visibleBottom = dropdownScrollTop + dropdownHeight;\r\n\r\n  if (optionTop < visibleTop) {\r\n   dropdown.scrollTop = optionTop - searchOffset;\r\n  } else if (optionTop + optionHeight > visibleBottom) {\r\n   dropdown.scrollTop = optionTop + optionHeight - dropdownHeight + searchOffset;\r\n  }\r\n }\r\n\r\n // render method\r\n render() {\r\n  const style = {\r\n   '--select-width': this.width || '200px',\r\n   '--select-dropdown-height': this.dropdownHeight || '260px',\r\n  };\r\n\r\n  return (\r\n   <Host style={style}>\r\n    <div\r\n     class={{\r\n      'sd-select-multiple': true,\r\n      'sd-select-multiple--open': this.isOpen,\r\n      'sd-select-multiple--disabled': this.disabled,\r\n     }}\r\n     ref={el => (this.selectRef = el)}\r\n    >\r\n     {this.renderLabel(this.label)}\r\n     <div class=\"sd-select-multiple__container\">\r\n      {this.renderTrigger()}\r\n      {this.renderDropdown()}\r\n     </div>\r\n    </div>\r\n   </Host>\r\n  );\r\n }\r\n\r\n private renderLabel(label?: string) {\r\n  if (!label) return null;\r\n\r\n  return <label class=\"sd-select-multiple__label\">{label}</label>;\r\n }\r\n\r\n private renderTrigger() {\r\n  const selectedOption = this.getSelectedOption();\r\n  return (\r\n   <div\r\n    class=\"sd-select-multiple__trigger\"\r\n    tabindex={this.disabled ? -1 : 0}\r\n    onClick={this.handleTriggerClick}\r\n   >\r\n    <span class=\"sd-select-multiple__value\">\r\n     {!selectedOption\r\n      ? '선택'\r\n      : selectedOption.length\r\n        ? selectedOption.map(option => option.label).join(', ')\r\n        : this.placeholder}\r\n    </span>\r\n    {this.clearable && selectedOption?.length > 0 && !this.disabled && (\r\n     <sd-icon\r\n      key=\"close-icon\"\r\n      name=\"close\"\r\n      size={10}\r\n      color=\"#888\"\r\n      class=\"sd-select-multiple__clear\"\r\n      onClick={event => {\r\n       event.stopPropagation();\r\n       this.value = null;\r\n      }}\r\n     ></sd-icon>\r\n    )}\r\n\r\n    <sd-icon\r\n     key=\"arrow-icon\"\r\n     name=\"arrowDown\"\r\n     color=\"#888\"\r\n     class={{ 'sd-select-multiple__arrow': true, 'sd-select-multiple__arrow--open': this.isOpen }}\r\n    ></sd-icon>\r\n   </div>\r\n  );\r\n }\r\n\r\n private renderDropdown() {\r\n  if (this.isOpen === false) return null;\r\n  return (\r\n   <sd-portal open={this.isOpen} parentRef={this.selectRef} onSdClose={this.closeDropdown}>\r\n    <div\r\n     class=\"sd-select-multiple__dropdown\"\r\n     onScroll={this.handleDropdownScroll}\r\n     ref={el => (this.dropdownRef = el)}\r\n    >\r\n     {this.searchable && (\r\n      <div\r\n       class={{\r\n        'sd-select-multiple__search-container': true,\r\n        'sd-select-multiple__search-container--scrolled': this.isScrolled,\r\n       }}\r\n       onClick={event => event.stopPropagation()}\r\n      >\r\n       <sd-input\r\n        ref={el => (this.searchRef = el)}\r\n        value={this.searchText}\r\n        placeholder=\"검색\"\r\n        clearable\r\n        inputStyle={{ 'padding-left': '8px' }}\r\n        autofocus\r\n        onSdInput={event => {\r\n         this.searchText = String(event?.detail);\r\n        }}\r\n        onSdFocus={() => {\r\n         this.itemIndex = -1;\r\n        }}\r\n       >\r\n        <sd-icon\r\n         name=\"search\"\r\n         size={16}\r\n         color=\"#737373\"\r\n         style={{ marginRight: '4px' }}\r\n         slot=\"prefix\"\r\n        ></sd-icon>\r\n       </sd-input>\r\n      </div>\r\n     )}\r\n     {this.filteredOptions.length > 0 ? (\r\n      this.filteredOptions.map((option, index) => (\r\n       <slot name={`option-${option.value}`}>\r\n        <sd-select-option\r\n         option={option}\r\n         index={index}\r\n         isSelected={this.value?.some(selected => selected.value === option.value)}\r\n         isFocused={index === this.itemIndex}\r\n         onOptionClick={({ detail }: { detail: { option: SelectOption; event: Event } }) =>\r\n          this.handleOptionClick(detail)\r\n         }\r\n         useCheckbox={this.useCheckbox}\r\n        ></sd-select-option>\r\n       </slot>\r\n      ))\r\n     ) : (\r\n      <slot name=\"option-placeholder\">\r\n       <div class={'sd-select-multiple__option-placeholder'}>{this.optionPlaceholder}</div>\r\n      </slot>\r\n     )}\r\n    </div>\r\n   </sd-portal>\r\n  );\r\n }\r\n}\r\n"],"names":[],"mappings":";;;AAAA,MAAM,mBAAmB,GAAG,kkGAAkkG;;MCmBjlG,gBAAiB,GAAA,cAAQ,iBAAiB,CAAA;;;;;;;;;IAI7B,KAAK,GAA0B,IAAI;IACpD,KAAK,GAAW,EAAE;IACD,OAAO,GAAmB,EAAE;IAC7C,WAAW,GAAW,IAAI;IAC1B,iBAAiB,GAAW,WAAW;IACvC,KAAK,GAAW,OAAO;IACvB,cAAc,GAAW,OAAO;IAChC,QAAQ,GAAY,KAAK;IACzB,SAAS,GAAY,KAAK;IAC1B,UAAU,GAAY,KAAK;IAC3B,WAAW,GAAY,KAAK;;AAG5B,IAAA,cAAc;;AAGb,IAAA,eAAe,GAAG,IAAI,CAAC,OAAO;IAC9B,MAAM,GAAY,KAAK;IACvB,UAAU,GAAkB,IAAI;IAChC,SAAS,GAAW,EAAE;IACtB,UAAU,GAAY,KAAK;;AAG3B,IAAA,QAAQ;AACR,IAAA,YAAY;AAEb,IAAA,SAAS;AACT,IAAA,SAAS;AACT,IAAA,SAAS;AACT,IAAA,WAAW;IAGnB,YAAY,GAAA;QACX,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;;IAIhC,cAAc,GAAA;AACb,QAAA,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO;QACnC,IAAI,CAAC,aAAa,EAAE;;IAIrB,iBAAiB,GAAA;QAChB,IAAI,CAAC,aAAa,EAAE;;AAIrB,IAAA,MAAM,gBAAgB,CAAC,QAAgB,EAAE,QAAgB,EAAA;AACxD,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;AACpB,YAAA,MAAM,WAAW,GAAG,MAAM,IAAI,CAAC,qBAAqB,EAAE;AACtD,YAAA,IAAI,IAAI,CAAC,SAAS,KAAK,EAAE,EAAE;gBAC1B,WAAW,EAAE,KAAK,EAAE;gBACpB;;AACM,iBAAA,IAAI,WAAW,EAAE,OAAO,CAAC,QAAQ,CAAC,EAAE;gBAC1C,WAAW,EAAE,IAAI,EAAE;;;AAIrB,QAAA,MAAM,cAAc,GAAG,KAAK,CAAC,IAAI,CAChC,IAAI,CAAC,WAAW,EAAE,gBAAgB,CAAC,gDAAgD,CAAC,IAAI,EAAE,CAC1F;QACD,MAAM,WAAW,GAAG,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC;AAEpD,QAAA,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,MAAM;YAAE;AAElC,QAAA,IAAI,CAAC,SAAS,GAAG,WAAwC;QACzD,MAAM,gBAAgB,GAAG,MAAM,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE;QAE1D,IAAI,gBAAgB,EAAE;AACrB,YAAA,QAAQ,GAAG,QAAQ,GAAG,IAAI,CAAC,SAAS,EAAE,GAAG,IAAI,CAAC,SAAS,EAAE;YACzD;;AAGD,QAAA,IAAI,CAAC,cAAc,CAAC,WAA0B,CAAC;;AAIhD,IAAA,MAAM,aAAa,GAAA;;AAElB,QAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,MAAM,CAAC;AAElC,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,iBAAiB,EAAE;QAC/C,IAAI,CAAC,cAAc,EAAE;AACpB,YAAA,IAAI,CAAC,SAAS,GAAG,EAAE;;aACb;AACN,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;;AAGzD,QAAA,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;AAEhD,QAAA,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK;YAAE;AAE3B,QAAA,MAAM,IAAI,OAAO,CAAC,OAAO,IAAI,UAAU,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;AAErD,QAAA,MAAM,cAAc,GAAG,KAAK,CAAC,IAAI,CAChC,IAAI,CAAC,WAAW,EAAE,gBAAgB,CAAC,8CAA8C,CAAC,IAAI,EAAE,CACxF;QACD,MAAM,WAAW,GAAG,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC;;AAGpD,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;AACpB,YAAA,MAAM,WAAW,GAAG,MAAM,IAAI,CAAC,qBAAqB,EAAE;YACtD,WAAW,EAAE,KAAK,EAAE;;AAGrB,QAAA,IAAI,CAAC,WAAW;YAAE;AAElB,QAAA,MAAM,IAAI,OAAO,CAAC,OAAO,IAAI,UAAU,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,CAAC;AACtD,QAAA,IAAI,CAAC,cAAc,CAAC,WAA0B,CAAC;;IAGhD,iBAAiB,GAAA;;AAEhB,QAAA,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO;AACnC,QAAA,IAAI,CAAC,eAAe,EAAE,CAAC;;IAGxB,oBAAoB,GAAA;AACnB,QAAA,IAAI,CAAC,YAAY,EAAE,CAAC;;AAGX,IAAA,mBAAmB,CAAC,KAAY,EAAA;AACzC,QAAA,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE;AACpD,YAAA,IAAI,CAAC,MAAM,GAAG,KAAK;;;AAIX,IAAA,qBAAqB,CAAC,aAA4B,EAAA;QAC3D,aAAa,CAAC,eAAe,EAAE;QAC/B,MAAM,SAAS,GAAG,CAAC,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,CAAC;QAC7D,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC;YAAE;QAE5C,aAAa,CAAC,cAAc,EAAE;AAC9B,QAAA,QAAQ,aAAa,CAAC,GAAG;AACxB,YAAA,KAAK,WAAW;AAChB,YAAA,KAAK,SAAS;AACb,gBAAA,MAAM,kBAAkB,GAAG,IAAI,wBAAwB,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,eAAe,CAAC;AAC9F,gBAAA,MAAM,SAAS,GAAG,kBAAkB,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS,EAAE,aAAa,CAAC,GAAG,CAAC;AACpF,gBAAA,IAAI,CAAC,SAAS,GAAG,SAAS;gBAC1B;AACD,YAAA,KAAK,OAAO;gBACX,MAAM,cAAc,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,SAAS,CAAC;AAC3D,gBAAA,IAAI,cAAc,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE;AAC/C,oBAAA,IAAI,CAAC,qBAAqB,CAAC,cAAc,CAAC;;gBAE3C;AACD,YAAA,KAAK,QAAQ;AACZ,gBAAA,IAAI,CAAC,MAAM,GAAG,KAAK;gBACnB;;;;AAKH,IAAA,kBAAkB,GAAG,CAAC,KAAY,KAAI;QACrC,KAAK,CAAC,eAAe,EAAE;AAEvB,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AACnB,YAAA,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM;AAC1B,YAAA,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;;AAElD,KAAC;AAED,IAAA,iBAAiB,GAAG,CAAC,MAA8C,KAAI;AACtE,QAAA,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,MAAM;QAChC,KAAK,CAAC,eAAe,EAAE;AAEvB,QAAA,IAAI,CAAC,qBAAqB,CAAC,MAAM,CAAC;AACnC,KAAC;IAEO,aAAa,GAAA;AACpB,QAAA,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;;AAEtD,YAAA,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO;;aAC7B;;AAEN,YAAA,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,IAChD,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAW,CAAC,WAAW,EAAE,CAAC,CACnE;;;IAIK,iBAAiB,GAAA;AACxB,QAAA,OAAO,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;;AAG3D,IAAA,oBAAoB,GAAG,CAAC,KAAY,KAAI;AAC/C,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB;AAC1C,QAAA,MAAM,SAAS,GAAG,MAAM,CAAC,SAAS;;AAGlC,QAAA,IAAI,CAAC,UAAU,GAAG,SAAS,GAAG,CAAC;AAChC,KAAC;AAEO,IAAA,MAAM,qBAAqB,GAAA;AAClC,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;AACnB,YAAA,OAAO,IAAI,CAAC,SAAS,CAAC,gBAAgB,EAAE;;AAEzC,QAAA,OAAO,IAAI;;AAGJ,IAAA,qBAAqB,GAAG,CAAC,MAAoB,KAAI;AACxD,QAAA,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,QAAQ;YAAE;QAEhC,MAAM,iBAAiB,GAAG,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK,CAAC;QAC7E,IAAI,iBAAiB,EAAE;;YAEtB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,IAAI,GAAG,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK,CAAC,IAAI,IAAI;;aACpE;;AAEN,YAAA,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,EAAE,MAAM,CAAC;;AAE9C,KAAC;IAED,aAAa,GAAA;AACZ,QAAA,IAAI,CAAC,MAAM,GAAG,KAAK;;AAGZ,IAAA,cAAc,CAAC,aAA0B,EAAA;AAChD,QAAA,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,aAAa;YAAE;AAEzC,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW;AACjC,QAAA,MAAM,SAAS,GAAG,aAAa,CAAC,SAAS;AACzC,QAAA,MAAM,YAAY,GAAG,aAAa,CAAC,YAAY;AAC/C,QAAA,MAAM,iBAAiB,GAAG,QAAQ,CAAC,SAAS;AAC5C,QAAA,MAAM,cAAc,GAAG,QAAQ,CAAC,YAAY;QAE5C,MAAM,eAAe,GAAG,QAAQ,CAAC,aAAa,CAAC,8BAA8B,CAAC;AAC9E,QAAA,MAAM,YAAY,GAAG,eAAe,GAAI,eAA+B,CAAC,YAAY,GAAG,CAAC;AAExF,QAAA,MAAM,UAAU,GAAG,iBAAiB,GAAG,YAAY;AACnD,QAAA,MAAM,aAAa,GAAG,iBAAiB,GAAG,cAAc;AAExD,QAAA,IAAI,SAAS,GAAG,UAAU,EAAE;AAC3B,YAAA,QAAQ,CAAC,SAAS,GAAG,SAAS,GAAG,YAAY;;AACvC,aAAA,IAAI,SAAS,GAAG,YAAY,GAAG,aAAa,EAAE;YACpD,QAAQ,CAAC,SAAS,GAAG,SAAS,GAAG,YAAY,GAAG,cAAc,GAAG,YAAY;;;;IAK/E,MAAM,GAAA;AACL,QAAA,MAAM,KAAK,GAAG;AACb,YAAA,gBAAgB,EAAE,IAAI,CAAC,KAAK,IAAI,OAAO;AACvC,YAAA,0BAA0B,EAAE,IAAI,CAAC,cAAc,IAAI,OAAO;SAC1D;QAED,QACC,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,KAAK,EAAA,EACjB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACC,KAAK,EAAE;AACN,gBAAA,oBAAoB,EAAE,IAAI;gBAC1B,0BAA0B,EAAE,IAAI,CAAC,MAAM;gBACvC,8BAA8B,EAAE,IAAI,CAAC,QAAQ;aAC7C,EACD,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,EAAA,EAE/B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,EAC7B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,+BAA+B,EAAA,EACxC,IAAI,CAAC,aAAa,EAAE,EACpB,IAAI,CAAC,cAAc,EAAE,CACjB,CACD,CACA;;AAID,IAAA,WAAW,CAAC,KAAc,EAAA;AACjC,QAAA,IAAI,CAAC,KAAK;AAAE,YAAA,OAAO,IAAI;AAEvB,QAAA,OAAO,aAAO,KAAK,EAAC,2BAA2B,EAAE,EAAA,KAAK,CAAS;;IAGxD,aAAa,GAAA;AACpB,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,iBAAiB,EAAE;AAC/C,QAAA,QACC,CACC,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,6BAA6B,EACnC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,CAAC,EAChC,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAAA,EAEhC,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,2BAA2B,EAAA,EACrC,CAAC;AACD,cAAE;cACA,cAAc,CAAC;AACf,kBAAE,cAAc,CAAC,GAAG,CAAC,MAAM,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI;kBACpD,IAAI,CAAC,WAAW,CACf,EACN,IAAI,CAAC,SAAS,IAAI,cAAc,EAAE,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,KAC9D,CACC,CAAA,SAAA,EAAA,EAAA,GAAG,EAAC,YAAY,EAChB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,EAAE,EACR,KAAK,EAAC,MAAM,EACZ,KAAK,EAAC,2BAA2B,EACjC,OAAO,EAAE,KAAK,IAAG;gBAChB,KAAK,CAAC,eAAe,EAAE;AACvB,gBAAA,IAAI,CAAC,KAAK,GAAG,IAAI;AAClB,aAAC,GACS,CACX,EAED,CAAA,CAAA,SAAA,EAAA,EACC,GAAG,EAAC,YAAY,EAChB,IAAI,EAAC,WAAW,EAChB,KAAK,EAAC,MAAM,EACZ,KAAK,EAAE,EAAE,2BAA2B,EAAE,IAAI,EAAE,iCAAiC,EAAE,IAAI,CAAC,MAAM,EAAE,EAAA,CAClF,CACN;;IAIA,cAAc,GAAA;AACrB,QAAA,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK;AAAE,YAAA,OAAO,IAAI;AACtC,QAAA,QACC,CAAW,CAAA,WAAA,EAAA,EAAA,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC,aAAa,EAAA,EACrF,CACC,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,8BAA8B,EACpC,QAAQ,EAAE,IAAI,CAAC,oBAAoB,EACnC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,EAAA,EAEjC,IAAI,CAAC,UAAU,KACf,CAAA,CAAA,KAAA,EAAA,EACC,KAAK,EAAE;AACN,gBAAA,sCAAsC,EAAE,IAAI;gBAC5C,gDAAgD,EAAE,IAAI,CAAC,UAAU;AACjE,aAAA,EACD,OAAO,EAAE,KAAK,IAAI,KAAK,CAAC,eAAe,EAAE,EAAA,EAEzC,CAAA,CAAA,UAAA,EAAA,EACC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,EAChC,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,WAAW,EAAC,cAAI,EAChB,SAAS,QACT,UAAU,EAAE,EAAE,cAAc,EAAE,KAAK,EAAE,EACrC,SAAS,EAAA,IAAA,EACT,SAAS,EAAE,KAAK,IAAG;gBAClB,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC;AACxC,aAAC,EACD,SAAS,EAAE,MAAK;AACf,gBAAA,IAAI,CAAC,SAAS,GAAG,EAAE;AACpB,aAAC,EAAA,EAED,CACC,CAAA,SAAA,EAAA,EAAA,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,EAAE,EACR,KAAK,EAAC,SAAS,EACf,KAAK,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,EAC7B,IAAI,EAAC,QAAQ,EAAA,CACH,CACD,CACN,CACN,EACA,IAAI,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC,IAC/B,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,MACtC,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAE,CAAU,OAAA,EAAA,MAAM,CAAC,KAAK,CAAA,CAAE,EAAA,EACnC,CAAA,CAAA,kBAAA,EAAA,EACC,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,IAAI,QAAQ,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK,CAAC,EACzE,SAAS,EAAE,KAAK,KAAK,IAAI,CAAC,SAAS,EACnC,aAAa,EAAE,CAAC,EAAE,MAAM,EAAsD,KAC7E,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,EAE/B,WAAW,EAAE,IAAI,CAAC,WAAW,EAAA,CACV,CACd,CACP,CAAC,KAEF,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,oBAAoB,EAAA,EAC9B,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,wCAAwC,EAAA,EAAG,IAAI,CAAC,iBAAiB,CAAO,CAC9E,CACP,CACI,CACK;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,67 @@
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-CqOU6L62.js';
+
+const sdSelectOptionGroupCss = "sd-select-option-group{display:block;height:fit-content}sd-select-option-group .sd-select__option-group{display:flex;padding:4px 12px;padding-left:28px;font-size:12px;line-height:20px}sd-select-option-group .sd-select__option-group.sd-select__option-group--group:not(.sd-select__option-group--use-checkbox),sd-select-option-group .sd-select__option-group.sd-select__option-group--subgroup:not(.sd-select__option-group--use-checkbox){cursor:default}sd-select-option-group .sd-select__option-group.sd-select__option-group--group{padding-left:12px;background-color:#f5faff !important;color:#333333 !important;font-weight:700}sd-select-option-group .sd-select__option-group.sd-select__option-group--subgroup{padding-left:20px;background-color:#f9f9f9 !important;color:#333333 !important;font-weight:500}sd-select-option-group .sd-select__option-group sd-checkbox__bg{border-color:#888888}sd-select-option-group .sd-select__option-group__label-wrapper{display:flex;width:100%;column-gap:8px;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}sd-select-option-group .sd-select__option-group__label-wrapper sd-checkbox{flex-shrink:0}sd-select-option-group .sd-select__option-group__label-wrapper .sd-select__option-group-label{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}sd-select-option-group .sd-select__option-group__label-wrapper .sd-select__option-group__count-indicator{width:fit-content;flex-shrink:0;font-size:12px;font-weight:500;color:#888888}sd-select-option-group .sd-select__option-group--focused{background-color:#e6f1ff}sd-select-option-group .sd-select__option-group--selected.sd-select__option-group--item:not(:hover):not(.sd-select__option-group--use-checkbox),sd-select-option-group .sd-select__option-group--focused.sd-select__option-group--item:not(:hover):not(.sd-select__option-group--use-checkbox){color:#0075ff;font-weight:700}sd-select-option-group .sd-select__option-group--disabled{color:#aaaaaa;cursor:not-allowed}sd-select-option-group .sd-select__option-group:hover:not(.sd-select__option-group--disabled){background-color:#0075ff;color:white}sd-select-option-group .sd-select__option-group:hover.sd-select__option-group--selected.sd-select__option-group--item sd-checkbox .sd-checkbox__bg{border-color:white !important}";
+
+const SdSelectOptionGroup = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.optionClick = createEvent(this, "optionClick");
+    }
+    get el() { return getElement(this); }
+    option;
+    index;
+    isSelected = false;
+    isFocused = false;
+    optionStyle;
+    disabled = false;
+    useCheckbox = false;
+    useIndicator = true;
+    countInfo = {
+        selectedCount: 0,
+        totalCount: 0,
+    };
+    isHovered = false;
+    async isDisabled() {
+        return !!this.option.disabled || this.option.type === 'group' || this.option.type === 'subgroup';
+    }
+    optionClick;
+    handleClick = (option, isSelected, event) => {
+        event.stopPropagation();
+        if (option.type === 'group' || option.type === 'subgroup') {
+            this.optionClick.emit({
+                option: this.option,
+                isSelected,
+                index: this.index,
+                event,
+            });
+            return;
+        }
+        if (!this.option.disabled && !this.disabled) {
+            this.optionClick.emit({
+                option: this.option,
+                isSelected,
+                index: this.index,
+                event,
+            });
+        }
+    };
+    render() {
+        return (h("div", { key: '0b921cd09e8115ed3af13fc2e9f1ecaff60f2b08', class: {
+                'sd-select__option-group': true,
+                'sd-select__option-group--selected': !!this.isSelected,
+                'sd-select__option-group--disabled': !!this.option.disabled,
+                'sd-select__option-group--focused': this.isFocused,
+                'sd-select__option-group--use-checkbox': this.useCheckbox,
+                'sd-select__option-group--group': this.option.type === 'group',
+                'sd-select__option-group--subgroup': this.option.type === 'subgroup',
+                'sd-select__option-group--item': this.option.type === 'item',
+            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, h("div", { key: '402a3e272f03930fe049d249c275a2acc1539bc3', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: '6f8c05df6de67268636495b3d15dd5f896c8b846', checked: this.isSelected, disabled: this.option.disabled, onClick: e => {
+                e.preventDefault();
+                this.handleClick(this.option, this.isSelected, e);
+            } })), h("span", { key: '4cbe65750bace072e680c251e904688c63eb6722', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: 'af63ce7b9e377da8453049c49c5af28e411b9eec', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
+    }
+};
+SdSelectOptionGroup.style = sdSelectOptionGroupCss;
+
+export { SdSelectOptionGroup as sd_select_option_group };
+//# sourceMappingURL=sd-select-option-group.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sd-select-option-group.entry.js","sources":["src/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.scss?tag=sd-select-option-group","src/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.tsx"],"sourcesContent":["@import 'variables';\r\n\r\nsd-select-option-group {\r\n display: block;\r\n height: fit-content;\r\n .sd-select__option-group {\r\n  display: flex;\r\n  padding: 4px 12px;\r\n  padding-left: 28px;\r\n  font-size: 12px;\r\n  line-height: 20px;\r\n\r\n  &.sd-select__option-group--group,\r\n  &.sd-select__option-group--subgroup {\r\n   &:not(.sd-select__option-group--use-checkbox) {\r\n    cursor: default;\r\n   }\r\n  }\r\n\r\n  &.sd-select__option-group--group {\r\n   padding-left: 12px;\r\n   background-color: $brilliantblue_05 !important;\r\n   color: $grey_90 !important;\r\n   font-weight: 700;\r\n  }\r\n\r\n  &.sd-select__option-group--subgroup {\r\n   padding-left: 20px;\r\n   background-color: $grey_05 !important;\r\n   color: $grey_90 !important;\r\n   font-weight: 500;\r\n  }\r\n\r\n  sd-checkbox {\r\n   &__bg {\r\n    border-color: $grey_65;\r\n   }\r\n  }\r\n\r\n  &__label-wrapper {\r\n   display: flex;\r\n   width: 100%;\r\n   column-gap: 8px;\r\n   align-items: center;\r\n   overflow: hidden;\r\n   white-space: nowrap;\r\n   text-overflow: ellipsis;\r\n\r\n   sd-checkbox {\r\n    flex-shrink: 0;\r\n   }\r\n\r\n   .sd-select__option-group-label {\r\n    flex: 0 1 auto;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    white-space: nowrap;\r\n   }\r\n\r\n   .sd-select__option-group__count-indicator {\r\n    width: fit-content;\r\n    flex-shrink: 0;\r\n    font-size: 12px;\r\n    font-weight: 500;\r\n    color: $grey_65;\r\n   }\r\n  }\r\n\r\n  &--focused {\r\n   background-color: $brilliantblue_20;\r\n  }\r\n\r\n  &--selected,\r\n  &--focused {\r\n   &.sd-select__option-group--item:not(:hover):not(.sd-select__option-group--use-checkbox) {\r\n    color: $brilliantblue_75;\r\n    font-weight: 700;\r\n   }\r\n  }\r\n\r\n  &--disabled {\r\n   color: $grey_55;\r\n   cursor: not-allowed;\r\n  }\r\n\r\n  &:hover {\r\n   &:not(.sd-select__option-group--disabled) {\r\n    background-color: $brilliantblue_75;\r\n    color: white;\r\n   }\r\n\r\n   &.sd-select__option-group--selected.sd-select__option-group--item sd-checkbox {\r\n    .sd-checkbox__bg {\r\n     border-color: white !important;\r\n    }\r\n   }\r\n  }\r\n }\r\n}\r\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\r\nimport { SelectOptionGroup } from '../../sd-select/sd-select';\r\n\r\n@Component({\r\n tag: 'sd-select-option-group',\r\n styleUrl: 'sd-select-option-group.scss',\r\n})\r\nexport class SdSelectOptionGroup {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() option!: SelectOptionGroup;\r\n @Prop() index!: number;\r\n @Prop() isSelected: boolean | null = false;\r\n @Prop() isFocused: boolean = false;\r\n @Prop() optionStyle?: { [key: string]: string };\r\n @Prop() disabled: boolean = false;\r\n @Prop() useCheckbox: boolean = false;\r\n @Prop() useIndicator?: boolean = true;\r\n @Prop() countInfo?: { selectedCount: number; totalCount: number } = {\r\n  selectedCount: 0,\r\n  totalCount: 0,\r\n };\r\n\r\n @State() isHovered: boolean = false;\r\n\r\n @Method()\r\n async isDisabled(): Promise<boolean> {\r\n  return !!this.option.disabled || this.option.type === 'group' || this.option.type === 'subgroup';\r\n }\r\n\r\n @Event() optionClick!: EventEmitter<{\r\n  option: SelectOptionGroup;\r\n  isSelected: boolean | null;\r\n  index: number;\r\n  event: MouseEvent;\r\n }>;\r\n\r\n private handleClick = (\r\n  option: SelectOptionGroup,\r\n  isSelected: boolean | null,\r\n  event: MouseEvent,\r\n ) => {\r\n  event.stopPropagation();\r\n\r\n  if (option.type === 'group' || option.type === 'subgroup') {\r\n   this.optionClick.emit({\r\n    option: this.option,\r\n    isSelected,\r\n    index: this.index,\r\n    event,\r\n   });\r\n   return;\r\n  }\r\n\r\n  if (!this.option.disabled && !this.disabled) {\r\n   this.optionClick.emit({\r\n    option: this.option,\r\n    isSelected,\r\n    index: this.index,\r\n    event,\r\n   });\r\n  }\r\n };\r\n\r\n render() {\r\n  return (\r\n   <div\r\n    class={{\r\n     'sd-select__option-group': true,\r\n     'sd-select__option-group--selected': !!this.isSelected,\r\n     'sd-select__option-group--disabled': !!this.option.disabled,\r\n     'sd-select__option-group--focused': this.isFocused,\r\n     'sd-select__option-group--use-checkbox': this.useCheckbox,\r\n     'sd-select__option-group--group': this.option.type === 'group',\r\n     'sd-select__option-group--subgroup': this.option.type === 'subgroup',\r\n     'sd-select__option-group--item': this.option.type === 'item',\r\n    }}\r\n    onMouseEnter={() => (this.isHovered = true)}\r\n    onMouseLeave={() => (this.isHovered = false)}\r\n    style={this.optionStyle}\r\n    data-index={this.index}\r\n    onClick={event => this.handleClick(this.option, this.isSelected, event)}\r\n   >\r\n    <div class=\"sd-select__option-group__label-wrapper\">\r\n     {this.useCheckbox && (\r\n      <sd-checkbox\r\n       checked={this.isSelected}\r\n       disabled={this.option.disabled}\r\n       onClick={e => {\r\n        e.preventDefault();\r\n        this.handleClick(this.option, this.isSelected, e);\r\n       }}\r\n      ></sd-checkbox>\r\n     )}\r\n     <span class=\"sd-select__option-group-label\">{this.option.label}</span>\r\n     {this.useIndicator && this.option.type !== 'item' && (\r\n      <span class=\"sd-select__option-group__count-indicator\">{`(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`}</span>\r\n     )}\r\n    </div>\r\n   </div>\r\n  );\r\n }\r\n}\r\n"],"names":[],"mappings":"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"}

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

@@ -43,7 +43,7 @@ const SdTag = class {
     }
     render() {
         const tagClasses = this.getTagClasses();
-        return (h("span", { key: '42250b22292bd0f6d6ffd4dc46ceda624a7001ba', class: tagClasses, style: {
+        return (h("span", { key: 'eff57a253b788f0435525cae9a15881cce8a08a0', class: tagClasses, style: {
                 '--tag-bg-color': this.bgColor,
                 '--tag-text-color': this.textColor,
             }, "aria-label": this.label || 'tag' }, this.renderContent()));

package/dist/esm/select-keyboard-navigation-C2JaR3A6.js

@@ -0,0 +1,116 @@
+class DropdownManager {
+    static instance;
+    activeDropdowns = new Set();
+    static getInstance() {
+        if (!DropdownManager.instance) {
+            DropdownManager.instance = new DropdownManager();
+        }
+        return DropdownManager.instance;
+    }
+    register(component) {
+        this.activeDropdowns.add(component);
+    }
+    unregister(component) {
+        this.activeDropdowns.delete(component);
+    }
+    openDropdown(targetComponent) {
+        // 다른 모든 드롭다운 닫기
+        this.activeDropdowns.forEach(component => {
+            if (component !== targetComponent && component.isOpen) {
+                component.closeDropdown();
+            }
+        });
+    }
+    closeAllDropdowns() {
+        this.activeDropdowns.forEach(component => {
+            if (component.isOpen) {
+                component.closeDropdown();
+            }
+        });
+    }
+}
+const dropdownManager = DropdownManager.getInstance();
+
+// 여러 select를 동시에 사용할때에 이벤트 리스너의 등록이 충돌나는 문제를 해결하기 위한 Base class
+// 각 드롭다운 컴포넌트는 이 클래스를 상속 및 구현 필요
+// 기본적으로 click, keydown 추상 이벤트를 구현해야하고
+// isOpen가 true일때에만 이벤트 등록 그외에는 이벤트 클리닝을 수행
+// 추후 필요한 이벤트는 이곳에 추가하여 추가 구현 후 사용
+// 별도로 드롭다운 전용의 Base class가 아닌 공통적으로 사용할 수 있는 Base class가 필요할지 검토 필요
+class BaseDropdownEvent {
+    documentClickHandler;
+    documentKeydownHandler;
+    // 컴포넌트 생명주기에서 호출할 메서드들
+    initializeEvent() {
+        dropdownManager.register(this);
+        this.initializeEventHandlers();
+    }
+    cleanupEvent() {
+        dropdownManager.unregister(this);
+        this.cleanup();
+    }
+    initializeEventHandlers() {
+        this.documentClickHandler = (event) => this.handleDocumentClick(event);
+        this.documentKeydownHandler = (event) => this.handleDocumentKeydown(event);
+    }
+    addGlobalEventListeners() {
+        if (this.documentClickHandler) {
+            document.addEventListener('click', this.documentClickHandler);
+        }
+        if (this.documentKeydownHandler) {
+            document.addEventListener('keydown', this.documentKeydownHandler);
+        }
+    }
+    removeGlobalEventListeners() {
+        if (this.documentClickHandler) {
+            document.removeEventListener('click', this.documentClickHandler);
+        }
+        if (this.documentKeydownHandler) {
+            document.removeEventListener('keydown', this.documentKeydownHandler);
+        }
+    }
+    onDropdownToggle(isOpen) {
+        if (isOpen && !this.disabled) {
+            dropdownManager.openDropdown(this);
+            this.addGlobalEventListeners();
+        }
+        else {
+            this.removeGlobalEventListeners();
+        }
+    }
+    cleanup() {
+        this.removeGlobalEventListeners();
+    }
+    closeDropdown() {
+        this.isOpen = false;
+    }
+}
+
+class SelectKeyboardNavigation {
+    isSearchable;
+    filteredOptions;
+    constructor(isSearchable, filteredOptions) {
+        this.isSearchable = isSearchable;
+        this.filteredOptions = filteredOptions;
+    }
+    getNavigationBounds() {
+        return {
+            minIndex: this.isSearchable ? -1 : 0,
+            maxIndex: this.filteredOptions.length - 1,
+        };
+    }
+    getNextIndex(currentIndex, direction) {
+        const { minIndex, maxIndex } = this.getNavigationBounds();
+        if (direction === 'ArrowUp') {
+            return currentIndex > minIndex ? currentIndex - 1 : maxIndex;
+        }
+        else {
+            return currentIndex < maxIndex ? currentIndex + 1 : minIndex;
+        }
+    }
+}
+
+export { BaseDropdownEvent as B, SelectKeyboardNavigation as S };
+//# sourceMappingURL=select-keyboard-navigation-C2JaR3A6.js.map
+
+//# sourceMappingURL=select-keyboard-navigation-C2JaR3A6.js.map

package/dist/esm/select-keyboard-navigation-C2JaR3A6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-keyboard-navigation-C2JaR3A6.js","sources":["src/utils/dropdown-manager.ts","src/utils/base-dropdown-event.ts","src/utils/select-keyboard-navigation.ts"],"sourcesContent":["import { BaseDropdownEvent } from './base-dropdown-event';\r\n\r\nclass DropdownManager {\r\n private static instance: DropdownManager;\r\n private activeDropdowns = new Set<BaseDropdownEvent>();\r\n\r\n static getInstance(): DropdownManager {\r\n  if (!DropdownManager.instance) {\r\n   DropdownManager.instance = new DropdownManager();\r\n  }\r\n  return DropdownManager.instance;\r\n }\r\n\r\n register(component: BaseDropdownEvent) {\r\n  this.activeDropdowns.add(component);\r\n }\r\n\r\n unregister(component: BaseDropdownEvent) {\r\n  this.activeDropdowns.delete(component);\r\n }\r\n\r\n openDropdown(targetComponent: BaseDropdownEvent) {\r\n  // 다른 모든 드롭다운 닫기\r\n  this.activeDropdowns.forEach(component => {\r\n   if (component !== targetComponent && component.isOpen) {\r\n    component.closeDropdown();\r\n   }\r\n  });\r\n }\r\n\r\n closeAllDropdowns() {\r\n  this.activeDropdowns.forEach(component => {\r\n   if (component.isOpen) {\r\n    component.closeDropdown();\r\n   }\r\n  });\r\n }\r\n}\r\n\r\nexport const dropdownManager = DropdownManager.getInstance();\r\n","import { dropdownManager } from './dropdown-manager';\r\n\r\n// 여러 select를 동시에 사용할때에 이벤트 리스너의 등록이 충돌나는 문제를 해결하기 위한 Base class\r\n// 각 드롭다운 컴포넌트는 이 클래스를 상속 및 구현 필요\r\n// 기본적으로 click, keydown 추상 이벤트를 구현해야하고\r\n// isOpen가 true일때에만 이벤트 등록 그외에는 이벤트 클리닝을 수행\r\n// 추후 필요한 이벤트는 이곳에 추가하여 추가 구현 후 사용\r\n// 별도로 드롭다운 전용의 Base class가 아닌 공통적으로 사용할 수 있는 Base class가 필요할지 검토 필요\r\nexport abstract class BaseDropdownEvent {\r\n abstract el: HTMLElement;\r\n abstract isOpen: boolean;\r\n abstract disabled?: boolean;\r\n\r\n private documentClickHandler?: (event: Event) => void;\r\n private documentKeydownHandler?: (event: KeyboardEvent) => void;\r\n\r\n // 컴포넌트 생명주기에서 호출할 메서드들\r\n protected initializeEvent() {\r\n  dropdownManager.register(this);\r\n  this.initializeEventHandlers();\r\n }\r\n\r\n protected cleanupEvent() {\r\n  dropdownManager.unregister(this);\r\n  this.cleanup();\r\n }\r\n\r\n protected initializeEventHandlers() {\r\n  this.documentClickHandler = (event: Event) => this.handleDocumentClick(event);\r\n  this.documentKeydownHandler = (event: KeyboardEvent) => this.handleDocumentKeydown(event);\r\n }\r\n\r\n protected addGlobalEventListeners() {\r\n  if (this.documentClickHandler) {\r\n   document.addEventListener('click', this.documentClickHandler);\r\n  }\r\n  if (this.documentKeydownHandler) {\r\n   document.addEventListener('keydown', this.documentKeydownHandler);\r\n  }\r\n }\r\n\r\n protected removeGlobalEventListeners() {\r\n  if (this.documentClickHandler) {\r\n   document.removeEventListener('click', this.documentClickHandler);\r\n  }\r\n  if (this.documentKeydownHandler) {\r\n   document.removeEventListener('keydown', this.documentKeydownHandler);\r\n  }\r\n }\r\n\r\n protected onDropdownToggle(isOpen: boolean) {\r\n  if (isOpen && !this.disabled) {\r\n   dropdownManager.openDropdown(this);\r\n   this.addGlobalEventListeners();\r\n  } else {\r\n   this.removeGlobalEventListeners();\r\n  }\r\n }\r\n\r\n protected cleanup() {\r\n  this.removeGlobalEventListeners();\r\n }\r\n\r\n closeDropdown() {\r\n  this.isOpen = false;\r\n }\r\n\r\n protected abstract handleDocumentClick(event: Event): void;\r\n protected abstract handleDocumentKeydown(event: KeyboardEvent): void;\r\n}\r\n","import { SelectOption } from '../types/select';\r\n\r\nexport class SelectKeyboardNavigation {\r\n isSearchable: boolean;\r\n filteredOptions: SelectOption[];\r\n\r\n constructor(isSearchable: boolean, filteredOptions: SelectOption[]) {\r\n  this.isSearchable = isSearchable;\r\n  this.filteredOptions = filteredOptions;\r\n }\r\n\r\n getNavigationBounds() {\r\n  return {\r\n   minIndex: this.isSearchable ? -1 : 0,\r\n   maxIndex: this.filteredOptions.length - 1,\r\n  };\r\n }\r\n\r\n getNextIndex(currentIndex: number, direction: KeyboardEvent['key']): number {\r\n  const { minIndex, maxIndex } = this.getNavigationBounds();\r\n\r\n  if (direction === 'ArrowUp') {\r\n   return currentIndex > minIndex ? currentIndex - 1 : maxIndex;\r\n  } else {\r\n   return currentIndex < maxIndex ? currentIndex + 1 : minIndex;\r\n  }\r\n }\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/types/components/sd-table/sd-table.d.ts

@@ -1,4 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+import { SelectOption } from '../sd-select/sd-select';
 export type SdTableSortDir = 'asc' | 'desc' | 'none';
 export interface SdTableColumn {
     name: string;
@@ -39,6 +40,9 @@ export declare class SdTable {
         lastPage?: number;
     };
     bodyCellRenderer?: (column: SdTableColumn, row: Row) => HTMLElement | string | null | undefined;
+    useInternalPagination: boolean;
+    useRowsPerPageSelect: boolean;
+    rowsPerPageOption: SelectOption[];
     sdSelectChange: EventEmitter<Row[]>;
     sdPageChange: EventEmitter<number>;
     currentPage: number;

package/dist/types/components.d.ts

@@ -585,6 +585,10 @@ export namespace Components {
          */
         "rowKey": string;
         "rows": Row[];
+        /**
+          * @default [   { label: '10개씩 보기', value: 10 },   { label: '25개씩 보기', value: 25 },   { label: '50개씩 보기', value: 50 },   { label: '100개씩 보기', value: 100 },  ]
+         */
+        "rowsPerPageOption": SelectOption2[];
         /**
           * @default false
          */
@@ -601,6 +605,14 @@ export namespace Components {
           * @default false
          */
         "stickyHeader": boolean;
+        /**
+          * @default false
+         */
+        "useInternalPagination": boolean;
+        /**
+          * @default false
+         */
+        "useRowsPerPageSelect": boolean;
         "width"?: string;
     }
     interface SdTag {
@@ -1687,6 +1699,10 @@ declare namespace LocalJSX {
          */
         "rowKey"?: string;
         "rows": Row[];
+        /**
+          * @default [   { label: '10개씩 보기', value: 10 },   { label: '25개씩 보기', value: 25 },   { label: '50개씩 보기', value: 50 },   { label: '100개씩 보기', value: 100 },  ]
+         */
+        "rowsPerPageOption"?: SelectOption2[];
         /**
           * @default false
          */
@@ -1703,6 +1719,14 @@ declare namespace LocalJSX {
           * @default false
          */
         "stickyHeader"?: boolean;
+        /**
+          * @default false
+         */
+        "useInternalPagination"?: boolean;
+        /**
+          * @default false
+         */
+        "useRowsPerPageSelect"?: boolean;
         "width"?: string;
     }
     interface SdTag {