@sellmate/design-system 1.0.15 → 1.0.17

package/dist/components/p-CXuU38Gz.js

@@ -1,115 +0,0 @@
-import { H } from './p-CR2Jbl0B.js';
-
-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();
-
-const BaseDropdownEvent = class extends H {
-    constructor() {
-        super(false);
-    }
-    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=p-CXuU38Gz.js.map
-
-//# sourceMappingURL=p-CXuU38Gz.js.map

package/dist/components/p-CXuU38Gz.js.map

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

package/dist/components/p-CXyVUgP3.js

@@ -1,260 +0,0 @@
-import { p as proxyCustomElement, H, c as createEvent, h, t as transformTag } from './p-CR2Jbl0B.js';
-import { d as defineCustomElement$9 } from './p-lbT0o9hE.js';
-import { d as defineCustomElement$8 } from './p-Cd145I-2.js';
-import { d as defineCustomElement$7 } from './p-SUihbngJ.js';
-import { d as defineCustomElement$6 } from './p-BdgLMKjb.js';
-import { d as defineCustomElement$5 } from './p-zvhzq4Sw.js';
-import { d as defineCustomElement$4 } from './p-DQE5-tOR.js';
-import { d as defineCustomElement$3 } from './p-CYYaSMIB.js';
-import { d as defineCustomElement$2 } from './p-CYr3YYfa.js';
-import { d as defineCustomElement$1 } from './p-CiNjpVRK.js';
-
-const sdSelectDropdownCss = () => `.sd-select-dropdown{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-select-dropdown::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-select-dropdown::-webkit-scrollbar:horizontal{height:8px}.sd-select-dropdown::-webkit-scrollbar:vertical{width:8px}.sd-select-dropdown::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-select-dropdown::-webkit-scrollbar-track{background-color:transparent}.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{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 = /*@__PURE__*/ proxyCustomElement(class SdSelectDropdown extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.optionClick = createEvent(this, "sdOptionClick");
-        this.optionFiltered = createEvent(this, "sdOptionFiltered");
-        this.scroll = createEvent(this, "sdScroll");
-    }
-    itemIndex;
-    value = null;
-    options;
-    width;
-    dropdownHeight;
-    searchable;
-    optionPlaceholder;
-    useCheckbox = false;
-    useAll = false;
-    filteredOptions = this.options;
-    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: '91c0ce599b9f479404c9353bc976949d2e71f161', 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: '6ede4c281647a0282caf04db174d5b522969e897', 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"],
-        "searchText": ["searchTextChanged"],
-        "itemIndex": ["itemIndexChanged"]
-    }; }
-    static get style() { return sdSelectDropdownCss(); }
-}, [772, "sd-select-dropdown", {
-        "itemIndex": [1026, "item-index"],
-        "value": [8],
-        "options": [16],
-        "width": [1],
-        "dropdownHeight": [1, "dropdown-height"],
-        "searchable": [4],
-        "optionPlaceholder": [1, "option-placeholder"],
-        "useCheckbox": [4, "use-checkbox"],
-        "useAll": [4, "use-all"],
-        "filteredOptions": [32],
-        "searchText": [32],
-        "isScrolled": [32],
-        "isDropdownReady": [32]
-    }, undefined, {
-        "filteredOptions": ["filteredOptionsChanged"],
-        "searchText": ["searchTextChanged"],
-        "itemIndex": ["itemIndexChanged"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["sd-select-dropdown", "sd-button", "sd-checkbox", "sd-field", "sd-floating-portal", "sd-icon", "sd-input", "sd-select-option", "sd-select-search-input", "sd-tooltip"];
-    components.forEach(tagName => { switch (tagName) {
-        case "sd-select-dropdown":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), SdSelectDropdown);
-            }
-            break;
-        case "sd-button":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$9();
-            }
-            break;
-        case "sd-checkbox":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$8();
-            }
-            break;
-        case "sd-field":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$7();
-            }
-            break;
-        case "sd-floating-portal":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$6();
-            }
-            break;
-        case "sd-icon":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$5();
-            }
-            break;
-        case "sd-input":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$4();
-            }
-            break;
-        case "sd-select-option":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$3();
-            }
-            break;
-        case "sd-select-search-input":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$2();
-            }
-            break;
-        case "sd-tooltip":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { SdSelectDropdown as S, defineCustomElement as d };
-//# sourceMappingURL=p-CXyVUgP3.js.map
-
-//# sourceMappingURL=p-CXyVUgP3.js.map

package/dist/components/p-CXyVUgP3.js.map

@@ -1 +0,0 @@
-{"file":"p-CXyVUgP3.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-select/sd-select-dropdown/sd-select-dropdown.scss?tag=sd-select-dropdown","src/components/sd-select/sd-select-dropdown/sd-select-dropdown.tsx"],"sourcesContent":["@import 'variables';\n@import 'extend';\n\n.sd-select-dropdown {\n @extend %scrollBar;\n width: var(--select-dropdown-width, 200px);\n max-height: var(--select-dropdown-height, 260px);\n padding-bottom: 2px;\n background-color: white;\n box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.1);\n border-radius: 4px;\n overflow-y: auto;\n color: $grey_90;\n display: flex;\n flex-direction: column;\n opacity: 0.5;\n transition: opacity 0.15s ease-in;\n\n &--ready {\n  opacity: 1;\n }\n\n .sd-select-option-placeholder {\n  @extend %selectOptionPlaceholder;\n }\n}\n","import { Component, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport { SelectOption } from '../sd-select';\n\ntype SelectValue = SelectOption[] | string | number | null;\n\n@Component({\n tag: 'sd-select-dropdown',\n styleUrl: 'sd-select-dropdown.scss',\n})\nexport class SdSelectDropdown {\n @Prop({ mutable: true }) itemIndex!: number;\n @Prop() value: SelectValue = null;\n @Prop() options!: SelectOption[];\n @Prop() width!: string;\n @Prop() dropdownHeight!: string;\n @Prop() searchable!: boolean;\n @Prop() optionPlaceholder!: string;\n @Prop() useCheckbox: boolean = false;\n @Prop() useAll?: boolean = false;\n\n @State() filteredOptions = this.options;\n @State() searchText: string | null = null;\n @State() isScrolled: boolean = false;\n @State() isDropdownReady: boolean = false;\n\n @Event({ eventName: 'sdOptionClick' }) optionClick!: EventEmitter<{\n  option: SelectOption;\n  index: number;\n  event: MouseEvent;\n }>;\n @Event({ eventName: 'sdOptionFiltered' }) optionFiltered!: EventEmitter<SelectOption[]>;\n @Event({ eventName: 'sdScroll' }) scroll!: EventEmitter<Event>;\n\n @Watch('filteredOptions')\n filteredOptionsChanged(newValue: SelectOption[]) {\n  this.optionFiltered.emit(newValue);\n }\n\n @Watch('searchText')\n searchTextChanged() {\n  this.filterOptions();\n }\n\n @Watch('itemIndex')\n async itemIndexChanged(newIndex: number, oldIndex: number) {\n  if (this.searchable) {\n   const searchInput = await this.getNativeInputElement();\n   if (this.itemIndex === -1) {\n    searchInput?.focus({ preventScroll: true });\n    return;\n   } else if (searchInput?.matches(':focus')) {\n    searchInput?.blur();\n   }\n  }\n\n  const optionElements =\n   this.dropdownRef?.querySelectorAll('.sd-select-dropdown sd-select-option') || [];\n  const currentItem = optionElements?.[this.itemIndex];\n\n  if (!currentItem) return;\n\n  this.optionRef = currentItem as HTMLSdSelectOptionElement;\n  const isOptionDisabled = await this.optionRef.sdIsDisabled();\n\n  if (isOptionDisabled) {\n   newIndex > oldIndex ? this.itemIndex++ : this.itemIndex--;\n   return;\n  }\n\n  this.scrollToOption(currentItem as HTMLElement);\n }\n\n componentWillLoad() {\n  this.filteredOptions = this.options;\n\n  // DOM 렌더링을 기다리기 위해 이중 requestAnimationFrame 사용 - (레이아웃/스타일 계산 - 페인트 이후)\n  requestAnimationFrame(() => {\n   requestAnimationFrame(async () => {\n    const selectedOptions = this.getSelectedOption();\n\n    // 선택된 옵션이 있으면 첫 번째 선택된 항목으로 스크롤\n    if (selectedOptions) {\n     const selectedIndex = Array.isArray(selectedOptions)\n      ? this.options.indexOf(selectedOptions[0])\n      : this.options.indexOf(selectedOptions);\n     const optionElements = Array.from(\n      this.dropdownRef?.querySelectorAll('sd-select-option') || [],\n     );\n\n     // useAll 사용시 \"전체\" 옵션 포함한 인덱스 사용\n     const actualIndex = this.useAll ? selectedIndex + 1 : selectedIndex;\n\n     // 선택된 옵션이 화면 가운데에 오도록 index 조정\n     const targetIndex = Math.min(actualIndex + 4, optionElements.length - 1);\n     const currentItem = optionElements?.[targetIndex];\n\n     if (currentItem) {\n      this.scrollToOption(currentItem as HTMLElement, 'instant');\n     }\n    }\n\n    this.isDropdownReady = true;\n\n    if (this.searchable) {\n     const searchInput = await this.getNativeInputElement();\n\n     if (searchInput) {\n      requestAnimationFrame(() => {\n       searchInput.focus({ preventScroll: true });\n      });\n     }\n    }\n   });\n  });\n }\n\n private dropdownRef?: HTMLElement;\n private searchRef?: HTMLSdSelectSearchInputElement;\n private optionRef?: HTMLSdSelectOptionElement;\n\n private get dropdownSize() {\n  return {\n   '--select-dropdown-width': this.width || '200px',\n   '--select-dropdown-height': this.dropdownHeight || '260px',\n  };\n }\n\n private filterOptions() {\n  if (!this.searchText || this.searchText.trim() === '') {\n   // 검색어가 없으면 전체 옵션 표시\n   this.filteredOptions = this.options;\n  } else {\n   // 검색어가 있으면 필터링\n   this.filteredOptions = this.options.filter(option =>\n    option.label.toLowerCase().includes(this.searchText!.toLowerCase()),\n   );\n  }\n }\n\n private getSelectedOption(): SelectOption | SelectOption[] | undefined {\n  if (typeof this.value !== 'object') {\n   return this.options.find(option => option.value === this.value);\n  }\n\n  return this.options.filter(option => (this.value as SelectOption[])?.includes(option));\n }\n\n private isOptionSelected(value: SelectValue) {\n  if (Array.isArray(this.value)) {\n   return this.value.some(selected => selected.value === value);\n  }\n  return value === this.value;\n }\n\n private async getNativeInputElement(): Promise<HTMLInputElement | null> {\n  if (this.searchRef) {\n   return this.searchRef.sdGetNativeElement();\n  }\n  return null;\n }\n\n private scrollToOption(optionElement: HTMLElement, scrollBehavior: ScrollBehavior = 'smooth') {\n  if (!this.dropdownRef || !optionElement) return;\n\n  const dropdown = this.dropdownRef;\n  const optionTop = optionElement.offsetTop;\n  const optionHeight = optionElement.offsetHeight;\n  const dropdownScrollTop = dropdown.scrollTop;\n  const dropdownHeight = dropdown.clientHeight;\n\n  const searchContainer = dropdown.querySelector('.sd-select-search-input');\n  const searchOffset = searchContainer ? (searchContainer as HTMLElement).offsetHeight : 0;\n\n  const visibleTop = dropdownScrollTop + searchOffset;\n  const visibleBottom = dropdownScrollTop + dropdownHeight;\n\n  if (optionTop < visibleTop) {\n   dropdown.scrollTo({ top: optionTop - searchOffset, behavior: scrollBehavior });\n  } else if (optionTop + optionHeight > visibleBottom) {\n   dropdown.scrollTo({\n    top: optionTop + optionHeight - dropdownHeight + searchOffset,\n    behavior: scrollBehavior,\n   });\n  }\n }\n\n private handleDropdownScroll = (event: Event) => {\n  const target = event.target as HTMLElement;\n  const scrollTop = target.scrollTop;\n\n  // 스크롤이 조금이라도 되면 그림자 표시\n  this.isScrolled = scrollTop > 0;\n };\n\n render() {\n  return (\n   <div\n    class={{\n     'sd-select-dropdown': true,\n     'sd-select-dropdown--ready': this.isDropdownReady,\n    }}\n    style={this.dropdownSize}\n    onScroll={this.handleDropdownScroll}\n    ref={el => (this.dropdownRef = el)}\n   >\n    {this.searchable && (\n     <sd-select-search-input\n      ref={el => (this.searchRef = el)}\n      isScrolled={this.isScrolled}\n      searchText={this.searchText}\n      onSdSearchInput={(event: CustomEvent<string>) => (this.searchText = event.detail || '')}\n      onSdSearchFocus={() => (this.itemIndex = -1)}\n     ></sd-select-search-input>\n    )}\n    {this.filteredOptions.length > 0 ? (\n     this.filteredOptions.map((option, index) => (\n      <slot name={`option-${option.value}`}>\n       <sd-select-option\n        option={option}\n        index={index}\n        isSelected={this.isOptionSelected(option.value)}\n        isFocused={index === this.itemIndex}\n        onOptionClick={({ detail }) => this.optionClick.emit(detail)}\n        useCheckbox={this.useCheckbox}\n       ></sd-select-option>\n      </slot>\n     ))\n    ) : (\n     <slot name=\"option-placeholder\">\n      <div class={'sd-select-option-placeholder'}>{this.optionPlaceholder}</div>\n     </slot>\n    )}\n   </div>\n  );\n }\n}\n"],"version":3}

package/dist/components/p-CYYaSMIB.js

@@ -1,97 +0,0 @@
-import { p as proxyCustomElement, H, c as createEvent, h, t as transformTag } from './p-CR2Jbl0B.js';
-import { d as defineCustomElement$2 } from './p-Cd145I-2.js';
-import { d as defineCustomElement$1 } from './p-zvhzq4Sw.js';
-
-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 = /*@__PURE__*/ proxyCustomElement(class SdSelectOption extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.optionClick = createEvent(this, "optionClick");
-    }
-    get el() { return 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: '59df3cd1bfc1195025ae829999ff882f369f40f4', 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)));
-    }
-    static get style() { return sdSelectOptionCss(); }
-}, [768, "sd-select-option", {
-        "option": [16],
-        "index": [2],
-        "isSelected": [4, "is-selected"],
-        "isFocused": [4, "is-focused"],
-        "optionStyle": [16],
-        "disabled": [4],
-        "useCheckbox": [4, "use-checkbox"],
-        "isHovered": [32],
-        "sdIsDisabled": [64]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["sd-select-option", "sd-checkbox", "sd-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "sd-select-option":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), SdSelectOption);
-            }
-            break;
-        case "sd-checkbox":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$2();
-            }
-            break;
-        case "sd-icon":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { SdSelectOption as S, defineCustomElement as d };
-//# sourceMappingURL=p-CYYaSMIB.js.map
-
-//# sourceMappingURL=p-CYYaSMIB.js.map

package/dist/components/p-CYYaSMIB.js.map

@@ -1 +0,0 @@
-{"file":"p-CYYaSMIB.js","mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,MAAM,CAAC,8zBAA8zB,CAAC;;MCOn1B,cAAc,iBAAAA,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;;;;;;;;;AAGlB,IAAA,MAAM;AACN,IAAA,KAAK;IACL,UAAU,GAAY,KAAK;IAC3B,SAAS,GAAY,KAAK;AAC1B,IAAA,WAAW;IACX,QAAQ,GAAY,KAAK;IACzB,WAAW,GAAY,KAAK;IAE3B,SAAS,GAAY,KAAK;AAGnC,IAAA,MAAM,YAAY,GAAA;AACjB,QAAA,OAAO,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ;;AAGrB,IAAA,WAAW;AAMZ,IAAA,WAAW,GAAG,CAAC,KAAiB,KAAI;QAC3C,KAAK,CAAC,eAAe,EAAE;AAEvB,QAAA,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAC5C,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;gBACrB,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,KAAK;AACL,aAAA,CAAC;;AAEJ,KAAC;IAED,MAAM,GAAA;QACL,QACC,CACC,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACN,gBAAA,mBAAmB,EAAE,IAAI;gBACzB,6BAA6B,EAAE,IAAI,CAAC,UAAU;AAC9C,gBAAA,6BAA6B,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ;gBACrD,4BAA4B,EAAE,IAAI,CAAC,SAAS;gBAC5C,iCAAiC,EAAE,IAAI,CAAC,WAAW;AACnD,aAAA,EACD,YAAY,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAC3C,YAAY,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,EAC5C,KAAK,EAAE,IAAI,CAAC,WAAW,EACX,YAAA,EAAA,IAAI,CAAC,KAAK,EACtB,OAAO,EAAE,IAAI,CAAC,WAAW,EAExB,EAAA,IAAI,CAAC,WAAW,IAChB,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,qCAAqC,EAAA,EAC/C,CAAA,CAAA,aAAA,EAAA,EACC,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ;;;;;;;;YAQ9B,OAAO,EAAE,CAAC,IAAG;gBACZ,CAAC,CAAC,cAAc,EAAE;AAClB,gBAAA,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;AACpB,aAAC,EACa,CAAA,EACf,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,yBAAyB,EAAE,EAAA,IAAI,CAAC,MAAM,CAAC,KAAK,CAAQ,CAC3D,KAEN,IAAI,CAAC,MAAM,CAAC,KAAK,CACjB,CACI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-select/sd-select-option/sd-select-option.scss?tag=sd-select-option","src/components/sd-select/sd-select-option/sd-select-option.tsx"],"sourcesContent":["@import 'variables';\n\nsd-select-option {\n display: block;\n height: fit-content;\n line-height: 0;\n .sd-select__option {\n  display: flex;\n  padding: 4px 12px;\n  font-size: 12px;\n  line-height: 20px;\n  cursor: pointer;\n\n  &__checkbox-wrapper {\n   display: flex;\n   width: 100%;\n   column-gap: 8px;\n   align-items: center;\n   overflow: hidden;\n   white-space: nowrap;\n   text-overflow: ellipsis;\n  }\n\n  &--focused {\n   background-color: $brilliantblue_20;\n  }\n\n  &--selected,\n  &--focused {\n   &:not(:hover):not(.sd-select__option--use-checkbox) {\n    color: $brilliantblue_75;\n    font-weight: 700;\n   }\n  }\n\n  &--disabled {\n   color: $grey_55;\n   cursor: not-allowed;\n  }\n\n  &:hover {\n   &:not(.sd-select__option--disabled) {\n    background-color: $brilliantblue_75;\n    color: white;\n   }\n  }\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport type { SelectOption } from '../../../types/select';\n\n@Component({\n tag: 'sd-select-option',\n styleUrl: 'sd-select-option.scss',\n})\nexport class SdSelectOption {\n @Element() el!: HTMLElement;\n\n @Prop() option!: SelectOption;\n @Prop() index!: number;\n @Prop() isSelected: boolean = false;\n @Prop() isFocused: boolean = false;\n @Prop() optionStyle?: { [key: string]: string };\n @Prop() disabled: boolean = false;\n @Prop() useCheckbox: boolean = false;\n\n @State() isHovered: boolean = false;\n\n @Method()\n async sdIsDisabled(): Promise<boolean> {\n  return !!this.option.disabled;\n }\n\n @Event() optionClick!: EventEmitter<{\n  option: SelectOption;\n  index: number;\n  event: MouseEvent;\n }>;\n\n private handleClick = (event: MouseEvent) => {\n  event.stopPropagation();\n\n  if (!this.option.disabled && !this.disabled) {\n   this.optionClick.emit({\n    option: this.option,\n    index: this.index,\n    event,\n   });\n  }\n };\n\n render() {\n  return (\n   <div\n    class={{\n     'sd-select__option': true,\n     'sd-select__option--selected': this.isSelected,\n     'sd-select__option--disabled': !!this.option.disabled,\n     'sd-select__option--focused': this.isFocused,\n     'sd-select__option--use-checkbox': this.useCheckbox,\n    }}\n    onMouseEnter={() => (this.isHovered = true)}\n    onMouseLeave={() => (this.isHovered = false)}\n    style={this.optionStyle}\n    data-index={this.index}\n    onClick={this.handleClick}\n   >\n    {this.useCheckbox ? (\n     <div class=\"sd-select__option__checkbox-wrapper\">\n      <sd-checkbox\n       value={this.isSelected}\n       disabled={this.option.disabled}\n       //   checkboxStyle={\n       //    !this.isSelected\n       //     ? { borderColor: '#888' }\n       //     : this.isHovered\n       //       ? { borderColor: 'white' }\n       //       : { borderColor: '#0075ff' }\n       //   }\n       onClick={e => {\n        e.preventDefault();\n        this.handleClick(e);\n       }}\n      ></sd-checkbox>\n      <span class=\"sd-select__option-label\">{this.option.label}</span>\n     </div>\n    ) : (\n     this.option.label\n    )}\n   </div>\n  );\n }\n}\n"],"version":3}

package/dist/components/p-CYr3YYfa.js

@@ -1,102 +0,0 @@
-import { p as proxyCustomElement, H, c as createEvent, h, t as transformTag } from './p-CR2Jbl0B.js';
-import { d as defineCustomElement$6 } from './p-lbT0o9hE.js';
-import { d as defineCustomElement$5 } from './p-SUihbngJ.js';
-import { d as defineCustomElement$4 } from './p-BdgLMKjb.js';
-import { d as defineCustomElement$3 } from './p-zvhzq4Sw.js';
-import { d as defineCustomElement$2 } from './p-DQE5-tOR.js';
-import { d as defineCustomElement$1 } from './p-CiNjpVRK.js';
-
-const sdSelectSearchInputCss = () => `sd-select-search-input{position:sticky;top:0;display:flex;width:100%;background-color:white;align-items:center}sd-select-search-input .sd-select-search-input{position:sticky;top:0;display:flex;width:100%;background-color:white;align-items:center;padding:4px 8px}sd-select-search-input .sd-select-search-input sd-input{width:100%}sd-select-search-input .sd-select-search-input--scrolled{box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}`;
-
-const SdSelectSearchInput = /*@__PURE__*/ proxyCustomElement(class SdSelectSearchInput extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.searchInput = createEvent(this, "sdSearchInput");
-        this.searchFocus = createEvent(this, "sdSearchFocus");
-    }
-    isScrolled = false;
-    searchText = '';
-    searchInput;
-    searchFocus;
-    searchRef;
-    async sdGetNativeElement() {
-        if (this.searchRef) {
-            return this.searchRef.sdGetNativeElement();
-        }
-        return null;
-    }
-    async sdSearchInputFocus() {
-        const input = await this.sdGetNativeElement();
-        input?.focus({ preventScroll: true });
-    }
-    render() {
-        return (h("div", { key: '199b6bdb1da143241f5e2cf797cc0f484b38aac0', class: {
-                'sd-select-search-input': true,
-                'sd-select-search-input--scrolled': !!this.isScrolled,
-            }, onClick: event => event.stopPropagation() }, h("sd-input", { key: 'c768d0a2324f3ea40cff3eb049ddfad3cddcb882', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdUpdate: event => {
-                this.searchInput.emit(String(event?.detail));
-            }, onSdFocus: () => {
-                this.searchFocus.emit();
-            }, onKeyDown: event => {
-                if (event.code === 'Enter')
-                    event.stopPropagation();
-            } }, h("sd-icon", { key: '21062cf3032b5488487b61a08753de01a5de7b98', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
-    }
-    static get style() { return sdSelectSearchInputCss(); }
-}, [768, "sd-select-search-input", {
-        "isScrolled": [4, "is-scrolled"],
-        "searchText": [1, "search-text"],
-        "sdGetNativeElement": [64],
-        "sdSearchInputFocus": [64]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["sd-select-search-input", "sd-button", "sd-field", "sd-floating-portal", "sd-icon", "sd-input", "sd-tooltip"];
-    components.forEach(tagName => { switch (tagName) {
-        case "sd-select-search-input":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), SdSelectSearchInput);
-            }
-            break;
-        case "sd-button":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$6();
-            }
-            break;
-        case "sd-field":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$5();
-            }
-            break;
-        case "sd-floating-portal":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$4();
-            }
-            break;
-        case "sd-icon":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$3();
-            }
-            break;
-        case "sd-input":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$2();
-            }
-            break;
-        case "sd-tooltip":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { SdSelectSearchInput as S, defineCustomElement as d };
-//# sourceMappingURL=p-CYr3YYfa.js.map
-
-//# sourceMappingURL=p-CYr3YYfa.js.map

package/dist/components/p-CYr3YYfa.js.map

@@ -1 +0,0 @@
-{"file":"p-CYr3YYfa.js","mappings":";;;;;;;;AAAA,MAAM,sBAAsB,GAAG,MAAM,CAAC,gbAAgb,CAAC;;MCM1c,mBAAmB,iBAAAA,kBAAA,CAAA,MAAA,mBAAA,SAAAC,CAAA,CAAA;;;;;;;;;IACvB,UAAU,GAAa,KAAK;IAC5B,UAAU,GAAkB,EAAE;AAEC,IAAA,WAAW;AACX,IAAA,WAAW;AAE1C,IAAA,SAAS;AAGjB,IAAA,MAAM,kBAAkB,GAAA;AACvB,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;AACnB,YAAA,OAAO,IAAI,CAAC,SAAS,CAAC,kBAAkB,EAAE;;AAE3C,QAAA,OAAO,IAAI;;AAIZ,IAAA,MAAM,kBAAkB,GAAA;AACvB,QAAA,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,kBAAkB,EAAE;QAC7C,KAAK,EAAE,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC;;IAGtC,MAAM,GAAA;QACL,QACC,CACC,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACN,gBAAA,wBAAwB,EAAE,IAAI;AAC9B,gBAAA,kCAAkC,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU;AACrD,aAAA,EACD,OAAO,EAAE,KAAK,IAAI,KAAK,CAAC,eAAe,EAAE,EAAA,EAEzC,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,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,UAAU,EAAE,KAAK,IAAG;AACnB,gBAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;AAC7C,aAAC,EACD,SAAS,EAAE,MAAK;AACf,gBAAA,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE;AACxB,aAAC,EACD,SAAS,EAAE,KAAK,IAAG;AAClB,gBAAA,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO;oBAAE,KAAK,CAAC,eAAe,EAAE;AACpD,aAAC,EAAA,EAED,CACC,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,EAAE,EACR,KAAK,EAAC,SAAS,EACf,KAAK,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,EAC7B,IAAI,EAAC,QAAQ,EACH,CAAA,CACD,CACN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-select/sd-select-search-input/sd-select-search-input.scss?tag=sd-select-search-input","src/components/sd-select/sd-select-search-input/sd-select-search-input.tsx"],"sourcesContent":["@import 'variables';\n\nsd-select-search-input {\n position: sticky;\n top: 0;\n display: flex;\n width: 100%;\n background-color: white;\n align-items: center;\n .sd-select-search-input {\n  position: sticky;\n  top: 0;\n  display: flex;\n  width: 100%;\n  background-color: white;\n  align-items: center;\n  padding: 4px 8px;\n\n  sd-input {\n   width: 100%;\n  }\n\n  &--scrolled {\n   box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.2);\n  }\n }\n}\n","import { h, Component, Prop, Method, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'sd-select-search-input',\n styleUrl: 'sd-select-search-input.scss',\n})\nexport class SdSelectSearchInput {\n @Prop() isScrolled?: boolean = false;\n @Prop() searchText: string | null = '';\n\n @Event({ eventName: 'sdSearchInput' }) searchInput!: EventEmitter<string>;\n @Event({ eventName: 'sdSearchFocus' }) searchFocus!: EventEmitter<void>;\n\n private searchRef?: HTMLSdInputElement;\n\n @Method()\n async sdGetNativeElement(): Promise<HTMLInputElement | null> {\n  if (this.searchRef) {\n   return this.searchRef.sdGetNativeElement();\n  }\n  return null;\n }\n\n @Method()\n async sdSearchInputFocus() {\n  const input = await this.sdGetNativeElement();\n  input?.focus({ preventScroll: true });\n }\n\n render() {\n  return (\n   <div\n    class={{\n     'sd-select-search-input': true,\n     'sd-select-search-input--scrolled': !!this.isScrolled,\n    }}\n    onClick={event => event.stopPropagation()}\n   >\n    <sd-input\n     ref={el => (this.searchRef = el)}\n     value={this.searchText}\n     placeholder=\"검색\"\n     clearable\n     inputStyle={{ 'padding-left': '8px' }}\n     autofocus\n     onSdUpdate={event => {\n      this.searchInput.emit(String(event?.detail));\n     }}\n     onSdFocus={() => {\n      this.searchFocus.emit();\n     }}\n     onKeyDown={event => {\n      if (event.code === 'Enter') event.stopPropagation();\n     }}\n    >\n     <sd-icon\n      name=\"search\"\n      size={16}\n      color=\"#737373\"\n      style={{ marginRight: '4px' }}\n      slot=\"prefix\"\n     ></sd-icon>\n    </sd-input>\n   </div>\n  );\n }\n}\n"],"version":3}