@sellmate/design-system 0.0.56 → 1.0.0

package/dist/collection/components/sd-select/sd-select-dropdown/sd-select-dropdown.js

@@ -0,0 +1,441 @@
+import { h, Host } from "@stencil/core";
+export class SdSelectDropdown {
+    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(Host, { key: 'de06f67bf93dce6db12fee6bce3c6b11b7ee375f', style: this.dropdownSize }, h("div", { key: '42510dd6a21f1aa224f5141555c02729d09a6baf', class: {
+                'sd-select-dropdown': true,
+                'sd-select-dropdown--ready': this.isDropdownReady,
+            }, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (h("sd-select-search-input", { key: '2177a7ad0dc3ea5ded63103a55e03b9b0d4d3913', 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 is() { return "sd-select-dropdown"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-select-dropdown.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-select-dropdown.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "itemIndex": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "item-index"
+            },
+            "value": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "SelectValue",
+                    "resolved": "SelectOption[] | null | number | string",
+                    "references": {
+                        "SelectValue": {
+                            "location": "global",
+                            "id": "global::SelectValue"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "null"
+            },
+            "options": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SelectOption[]",
+                    "resolved": "SelectOption[]",
+                    "references": {
+                        "SelectOption": {
+                            "location": "import",
+                            "path": "../sd-select",
+                            "id": "src/components/sd-select/sd-select.tsx::SelectOption"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width"
+            },
+            "dropdownHeight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dropdown-height"
+            },
+            "searchable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "searchable"
+            },
+            "optionPlaceholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "option-placeholder"
+            },
+            "useCheckbox": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "use-checkbox",
+                "defaultValue": "false"
+            },
+            "useAll": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "use-all",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "filteredOptions": {},
+            "searchText": {},
+            "isScrolled": {},
+            "isDropdownReady": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "optionClick",
+                "name": "sdOptionClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{\n  option: SelectOption;\n  index: number;\n  event: MouseEvent;\n }",
+                    "resolved": "{ option: SelectOption; index: number; event: MouseEvent; }",
+                    "references": {
+                        "SelectOption": {
+                            "location": "import",
+                            "path": "../sd-select",
+                            "id": "src/components/sd-select/sd-select.tsx::SelectOption"
+                        },
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "optionFiltered",
+                "name": "sdOptionFiltered",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "SelectOption[]",
+                    "resolved": "SelectOption[]",
+                    "references": {
+                        "SelectOption": {
+                            "location": "import",
+                            "path": "../sd-select",
+                            "id": "src/components/sd-select/sd-select.tsx::SelectOption"
+                        }
+                    }
+                }
+            }, {
+                "method": "scroll",
+                "name": "sdScroll",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "Event",
+                    "resolved": "Event",
+                    "references": {
+                        "Event": {
+                            "location": "import",
+                            "path": "@stencil/core",
+                            "id": "../../node_modules/@stencil/core/internal/stencil-core/index.d.ts::Event"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "filteredOptions",
+                "methodName": "filteredOptionsChanged"
+            }, {
+                "propName": "searchText",
+                "methodName": "searchTextChanged"
+            }, {
+                "propName": "itemIndex",
+                "methodName": "itemIndexChanged"
+            }];
+    }
+}
+//# sourceMappingURL=sd-select-dropdown.js.map

package/dist/collection/components/sd-select/sd-select-dropdown/sd-select-dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-select-dropdown.js","sourceRoot":"","sources":["../../../../src/components/sd-select/sd-select-dropdown/sd-select-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Host, 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   <Host style={this.dropdownSize}>\n    <div\n     class={{\n      'sd-select-dropdown': true,\n      'sd-select-dropdown--ready': this.isDropdownReady,\n     }}\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   </Host>\n  );\n }\n}\n"]}

package/dist/collection/components/sd-select/sd-select-option/sd-select-option.js

@@ -9,7 +9,7 @@ export class SdSelectOption {
     disabled = false;
     useCheckbox = false;
     isHovered = false;
-    async isDisabled() {
+    async sdIsDisabled() {
         return !!this.option.disabled;
     }
     optionClick;
@@ -24,13 +24,13 @@ export class SdSelectOption {
         }
     };
     render() {
-        return (h(Host, { key: 'cfb999f7001240e6bd5dc302b24aade477671f74' }, h("div", { key: '053e073fee23e99bd23a9b9fa95cb9ddabf9d6bf', class: {
+        return (h(Host, { key: '33542be792e3345ee693a6064f9398ecd1fceda1' }, h("div", { key: '408d402f5e4a845ebb896f78a557ac93ca414eaa', 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", { checked: this.isSelected, disabled: this.option.disabled,
+            }, 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' }
@@ -232,7 +232,7 @@ export class SdSelectOption {
     }
     static get methods() {
         return {
-            "isDisabled": {
+            "sdIsDisabled": {
                 "complexType": {
                     "signature": "() => Promise<boolean>",
                     "parameters": [],

package/dist/collection/components/sd-select/sd-select-option/sd-select-option.js.map

@@ -1 +1 @@
-{"version":3,"file":"sd-select-option.js","sourceRoot":"","sources":["../../../../src/components/sd-select/sd-select-option/sd-select-option.tsx"],"names":[],"mappings":"AAAA,OAAO,EACN,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,KAAK,GACL,MAAM,eAAe,CAAC;AAOvB,MAAM,OAAO,cAAc;IACf,EAAE,CAAe;IAEpB,MAAM,CAAgB;IACtB,KAAK,CAAU;IACf,UAAU,GAAY,KAAK,CAAC;IAC5B,SAAS,GAAY,KAAK,CAAC;IAC3B,WAAW,CAA6B;IACxC,QAAQ,GAAY,KAAK,CAAC;IAC1B,WAAW,GAAY,KAAK,CAAC;IAE5B,SAAS,GAAY,KAAK,CAAC;IAGpC,KAAK,CAAC,UAAU;QACf,OAAO,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC;IAC/B,CAAC;IAEQ,WAAW,CAIjB;IAEK,WAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;QAC3C,KAAK,CAAC,eAAe,EAAE,CAAC;QAExB,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YAC7C,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;gBACrB,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,KAAK;aACL,CAAC,CAAC;QACJ,CAAC;IACF,CAAC,CAAC;IAEF,MAAM;QACL,OAAO,CACN,EAAC,IAAI;YACJ,4DACC,KAAK,EAAE;oBACN,mBAAmB,EAAE,IAAI;oBACzB,6BAA6B,EAAE,IAAI,CAAC,UAAU;oBAC9C,6BAA6B,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ;oBACrD,4BAA4B,EAAE,IAAI,CAAC,SAAS;oBAC5C,iCAAiC,EAAE,IAAI,CAAC,WAAW;iBACnD,EACD,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAC3C,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,EAC5C,KAAK,EAAE,IAAI,CAAC,WAAW,gBACX,IAAI,CAAC,KAAK,EACtB,OAAO,EAAE,IAAI,CAAC,WAAW,IAExB,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CACnB,WAAK,KAAK,EAAC,qCAAqC;gBAC/C,mBACC,OAAO,EAAE,IAAI,CAAC,UAAU,EACxB,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ;oBAC9B,oBAAoB;oBACpB,sBAAsB;oBACtB,gCAAgC;oBAChC,uBAAuB;oBACvB,mCAAmC;oBACnC,qCAAqC;oBACrC,MAAM;oBACN,OAAO,EAAE,CAAC,CAAC,EAAE;wBACZ,CAAC,CAAC,cAAc,EAAE,CAAC;wBACnB,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;oBACrB,CAAC,GACa;gBACf,YAAM,KAAK,EAAC,yBAAyB,IAAE,IAAI,CAAC,MAAM,CAAC,KAAK,CAAQ,CAC3D,CACN,CAAC,CAAC,CAAC,CACH,IAAI,CAAC,MAAM,CAAC,KAAK,CACjB,CACI,CACA,CACP,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n} 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 isDisabled(): 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   <Host>\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        checked={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   </Host>\n  );\n }\n}\n"]}
+{"version":3,"file":"sd-select-option.js","sourceRoot":"","sources":["../../../../src/components/sd-select/sd-select-option/sd-select-option.tsx"],"names":[],"mappings":"AAAA,OAAO,EACN,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,KAAK,GACL,MAAM,eAAe,CAAC;AAOvB,MAAM,OAAO,cAAc;IACf,EAAE,CAAe;IAEpB,MAAM,CAAgB;IACtB,KAAK,CAAU;IACf,UAAU,GAAY,KAAK,CAAC;IAC5B,SAAS,GAAY,KAAK,CAAC;IAC3B,WAAW,CAA6B;IACxC,QAAQ,GAAY,KAAK,CAAC;IAC1B,WAAW,GAAY,KAAK,CAAC;IAE5B,SAAS,GAAY,KAAK,CAAC;IAGpC,KAAK,CAAC,YAAY;QACjB,OAAO,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC;IAC/B,CAAC;IAEQ,WAAW,CAIjB;IAEK,WAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;QAC3C,KAAK,CAAC,eAAe,EAAE,CAAC;QAExB,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YAC7C,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;gBACrB,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,KAAK;aACL,CAAC,CAAC;QACJ,CAAC;IACF,CAAC,CAAC;IAEF,MAAM;QACL,OAAO,CACN,EAAC,IAAI;YACJ,4DACC,KAAK,EAAE;oBACN,mBAAmB,EAAE,IAAI;oBACzB,6BAA6B,EAAE,IAAI,CAAC,UAAU;oBAC9C,6BAA6B,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ;oBACrD,4BAA4B,EAAE,IAAI,CAAC,SAAS;oBAC5C,iCAAiC,EAAE,IAAI,CAAC,WAAW;iBACnD,EACD,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAC3C,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,EAC5C,KAAK,EAAE,IAAI,CAAC,WAAW,gBACX,IAAI,CAAC,KAAK,EACtB,OAAO,EAAE,IAAI,CAAC,WAAW,IAExB,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CACnB,WAAK,KAAK,EAAC,qCAAqC;gBAC/C,mBACC,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ;oBAC9B,oBAAoB;oBACpB,sBAAsB;oBACtB,gCAAgC;oBAChC,uBAAuB;oBACvB,mCAAmC;oBACnC,qCAAqC;oBACrC,MAAM;oBACN,OAAO,EAAE,CAAC,CAAC,EAAE;wBACZ,CAAC,CAAC,cAAc,EAAE,CAAC;wBACnB,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;oBACrB,CAAC,GACa;gBACf,YAAM,KAAK,EAAC,yBAAyB,IAAE,IAAI,CAAC,MAAM,CAAC,KAAK,CAAQ,CAC3D,CACN,CAAC,CAAC,CAAC,CACH,IAAI,CAAC,MAAM,CAAC,KAAK,CACjB,CACI,CACA,CACP,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n} 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   <Host>\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   </Host>\n  );\n }\n}\n"]}

package/dist/collection/components/sd-select/sd-select-search-input/sd-select-search-input.css

@@ -1,4 +1,12 @@
-.sd-select-search-input {
+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;
@@ -7,9 +15,9 @@
   align-items: center;
   padding: 4px 8px;
 }
-.sd-select-search-input sd-input {
+sd-select-search-input .sd-select-search-input sd-input {
   width: 100%;
 }
-.sd-select-search-input--scrolled {
+sd-select-search-input .sd-select-search-input--scrolled {
   box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.2);
 }

package/dist/collection/components/sd-select/sd-select-search-input/sd-select-search-input.js

@@ -2,31 +2,31 @@ import { h } from "@stencil/core";
 export class SdSelectSearchInput {
     isScrolled = false;
     searchText = '';
-    sdSearchInput;
-    sdSearchFocus;
+    searchInput;
+    searchFocus;
     searchRef;
-    async getNativeElement() {
+    async sdGetNativeElement() {
         if (this.searchRef) {
-            return this.searchRef.getNativeElement();
+            return this.searchRef.sdGetNativeElement();
         }
         return null;
     }
-    async searchInputFocus() {
-        const input = await this.getNativeElement();
+    async sdSearchInputFocus() {
+        const input = await this.sdGetNativeElement();
         input?.focus({ preventScroll: true });
     }
     render() {
-        return (h("div", { key: '6d05eba9ab9a951d126f703ec9366d8b425581b7', class: {
+        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: 'e00b8cab50be8a096893c4cb4aceff0446cbfde4', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdInput: event => {
-                this.sdSearchInput.emit(String(event?.detail));
+            }, 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.sdSearchFocus.emit();
+                this.searchFocus.emit();
             }, onKeyDown: event => {
                 if (event.code === 'Enter')
                     event.stopPropagation();
-            } }, h("sd-icon", { key: '951178d9cbe80fc944e708207b57949ecd6ed8fc', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
+            } }, h("sd-icon", { key: '21062cf3032b5488487b61a08753de01a5de7b98', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
     }
     static get is() { return "sd-select-search-input"; }
     static get originalStyleUrls() {
@@ -85,7 +85,7 @@ export class SdSelectSearchInput {
     }
     static get events() {
         return [{
-                "method": "sdSearchInput",
+                "method": "searchInput",
                 "name": "sdSearchInput",
                 "bubbles": true,
                 "cancelable": true,
@@ -100,7 +100,7 @@ export class SdSelectSearchInput {
                     "references": {}
                 }
             }, {
-                "method": "sdSearchFocus",
+                "method": "searchFocus",
                 "name": "sdSearchFocus",
                 "bubbles": true,
                 "cancelable": true,
@@ -118,7 +118,7 @@ export class SdSelectSearchInput {
     }
     static get methods() {
         return {
-            "getNativeElement": {
+            "sdGetNativeElement": {
                 "complexType": {
                     "signature": "() => Promise<HTMLInputElement | null>",
                     "parameters": [],
@@ -139,7 +139,7 @@ export class SdSelectSearchInput {
                     "tags": []
                 }
             },
-            "searchInputFocus": {
+            "sdSearchInputFocus": {
                 "complexType": {
                     "signature": "() => Promise<void>",
                     "parameters": [],

package/dist/collection/components/sd-select/sd-select-search-input/sd-select-search-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"sd-select-search-input.js","sourceRoot":"","sources":["../../../../src/components/sd-select/sd-select-search-input/sd-select-search-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAMhF,MAAM,OAAO,mBAAmB;IACvB,UAAU,GAAa,KAAK,CAAC;IAC7B,UAAU,GAAkB,EAAE,CAAC;IAE9B,aAAa,CAAwB;IACrC,aAAa,CAAsB;IAEpC,SAAS,CAAsB;IAGvC,KAAK,CAAC,gBAAgB;QACrB,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACpB,OAAO,IAAI,CAAC,SAAS,CAAC,gBAAgB,EAAE,CAAC;QAC1C,CAAC;QACD,OAAO,IAAI,CAAC;IACb,CAAC;IAGD,KAAK,CAAC,gBAAgB;QACrB,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC5C,KAAK,EAAE,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;IACvC,CAAC;IAED,MAAM;QACL,OAAO,CACN,4DACC,KAAK,EAAE;gBACN,wBAAwB,EAAE,IAAI;gBAC9B,kCAAkC,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU;aACrD,EACD,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,eAAe,EAAE;YAEzC,iEACC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,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,QACT,SAAS,EAAE,KAAK,CAAC,EAAE;oBAClB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC;gBAChD,CAAC,EACD,SAAS,EAAE,GAAG,EAAE;oBACf,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;gBAC3B,CAAC,EACD,SAAS,EAAE,KAAK,CAAC,EAAE;oBAClB,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO;wBAAE,KAAK,CAAC,eAAe,EAAE,CAAC;gBACrD,CAAC;gBAED,gEACC,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,EAAE,EACR,KAAK,EAAC,SAAS,EACf,KAAK,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,EAC7B,IAAI,EAAC,QAAQ,GACH,CACD,CACN,CACN,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["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() sdSearchInput!: EventEmitter<string>;\n @Event() sdSearchFocus!: EventEmitter<void>;\n\n private searchRef?: HTMLSdInputElement;\n\n @Method()\n async getNativeElement(): Promise<HTMLInputElement | null> {\n  if (this.searchRef) {\n   return this.searchRef.getNativeElement();\n  }\n  return null;\n }\n\n @Method()\n async searchInputFocus() {\n  const input = await this.getNativeElement();\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     onSdInput={event => {\n      this.sdSearchInput.emit(String(event?.detail));\n     }}\n     onSdFocus={() => {\n      this.sdSearchFocus.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,"file":"sd-select-search-input.js","sourceRoot":"","sources":["../../../../src/components/sd-select/sd-select-search-input/sd-select-search-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAMhF,MAAM,OAAO,mBAAmB;IACvB,UAAU,GAAa,KAAK,CAAC;IAC7B,UAAU,GAAkB,EAAE,CAAC;IAEA,WAAW,CAAwB;IACnC,WAAW,CAAsB;IAEhE,SAAS,CAAsB;IAGvC,KAAK,CAAC,kBAAkB;QACvB,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACpB,OAAO,IAAI,CAAC,SAAS,CAAC,kBAAkB,EAAE,CAAC;QAC5C,CAAC;QACD,OAAO,IAAI,CAAC;IACb,CAAC;IAGD,KAAK,CAAC,kBAAkB;QACvB,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC9C,KAAK,EAAE,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;IACvC,CAAC;IAED,MAAM;QACL,OAAO,CACN,4DACC,KAAK,EAAE;gBACN,wBAAwB,EAAE,IAAI;gBAC9B,kCAAkC,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU;aACrD,EACD,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,eAAe,EAAE;YAEzC,iEACC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,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,QACT,UAAU,EAAE,KAAK,CAAC,EAAE;oBACnB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC;gBAC9C,CAAC,EACD,SAAS,EAAE,GAAG,EAAE;oBACf,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;gBACzB,CAAC,EACD,SAAS,EAAE,KAAK,CAAC,EAAE;oBAClB,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO;wBAAE,KAAK,CAAC,eAAe,EAAE,CAAC;gBACrD,CAAC;gBAED,gEACC,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,EAAE,EACR,KAAK,EAAC,SAAS,EACf,KAAK,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,EAC7B,IAAI,EAAC,QAAQ,GACH,CACD,CACN,CACN,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["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"]}