@sellmate/design-system 0.0.12 → 0.0.15

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

@@ -1359,11 +1359,18 @@ textarea {
   cursor: pointer;
 }
 
+:host {
+  display: block;
+  height: fit-content;
+  line-height: 0;
+}
+
 .sd-select__option {
   display: flex;
   padding: 4px 12px;
   font-size: 12px;
   line-height: 20px;
+  cursor: pointer;
 }
 .sd-select__option__checkbox-wrapper {
   display: flex;

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

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 export class SdSelectOption {
     el;
     option;
@@ -24,23 +24,26 @@ export class SdSelectOption {
         }
     };
     render() {
-        return (h("div", { key: '1346e81953991129aefcda1460f1e01a52dfa166', class: {
+        return (h(Host, { key: '23d87df53fa083e6c9aceb1956de51800117df9f' }, h("div", { key: '569c5d35098350fa4d186ba838925de4f966c491', 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, checkboxStyle: !this.isSelected
-                ? { borderColor: '#888' }
-                : this.isHovered
-                    ? { borderColor: 'white' }
-                    : { borderColor: '#0075ff' }, onClick: e => {
+            }, 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,
+            //   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)));
+            } }), h("span", { class: "sd-select__option-label" }, this.option.label))) : (this.option.label))));
     }
     static get is() { return "sd-select-option"; }
-    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["sd-select-option.scss"]

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,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAQhG,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,4DACC,KAAK,EAAE;gBACN,mBAAmB,EAAE,IAAI;gBACzB,6BAA6B,EAAE,IAAI,CAAC,UAAU;gBAC9C,6BAA6B,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ;gBACrD,4BAA4B,EAAE,IAAI,CAAC,SAAS;gBAC5C,iCAAiC,EAAE,IAAI,CAAC,WAAW;aACnD,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;YAC/C,mBACC,OAAO,EAAE,IAAI,CAAC,UAAU,EACxB,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,EAC9B,aAAa,EACZ,CAAC,IAAI,CAAC,UAAU;oBACf,CAAC,CAAC,EAAE,WAAW,EAAE,MAAM,EAAE;oBACzB,CAAC,CAAC,IAAI,CAAC,SAAS;wBACd,CAAC,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE;wBAC1B,CAAC,CAAC,EAAE,WAAW,EAAE,SAAS,EAAE,EAEhC,OAAO,EAAE,CAAC,CAAC,EAAE;oBACZ,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;gBACrB,CAAC,GACa;YACf,YAAM,KAAK,EAAC,yBAAyB,IAAE,IAAI,CAAC,MAAM,CAAC,KAAK,CAAQ,CAC3D,CACN,CAAC,CAAC,CAAC,CACH,IAAI,CAAC,MAAM,CAAC,KAAK,CACjB,CACI,CACN,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\r\nimport type { SelectOption } from '../../../types/select';\r\n\r\n@Component({\r\n tag: 'sd-select-option',\r\n styleUrl: 'sd-select-option.scss',\r\n shadow: true,\r\n})\r\nexport class SdSelectOption {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() option!: SelectOption;\r\n @Prop() index!: number;\r\n @Prop() isSelected: boolean = false;\r\n @Prop() isFocused: boolean = false;\r\n @Prop() optionStyle?: { [key: string]: string };\r\n @Prop() disabled: boolean = false;\r\n @Prop() useCheckbox: boolean = false;\r\n\r\n @State() isHovered: boolean = false;\r\n\r\n @Method()\r\n async isDisabled(): Promise<boolean> {\r\n  return !!this.option.disabled;\r\n }\r\n\r\n @Event() optionClick!: EventEmitter<{\r\n  option: SelectOption;\r\n  index: number;\r\n  event: MouseEvent;\r\n }>;\r\n\r\n private handleClick = (event: MouseEvent) => {\r\n  event.stopPropagation();\r\n\r\n  if (!this.option.disabled && !this.disabled) {\r\n   this.optionClick.emit({\r\n    option: this.option,\r\n    index: this.index,\r\n    event,\r\n   });\r\n  }\r\n };\r\n\r\n render() {\r\n  return (\r\n   <div\r\n    class={{\r\n     'sd-select__option': true,\r\n     'sd-select__option--selected': this.isSelected,\r\n     'sd-select__option--disabled': !!this.option.disabled,\r\n     'sd-select__option--focused': this.isFocused,\r\n     'sd-select__option--use-checkbox': this.useCheckbox,\r\n    }}\r\n    onMouseEnter={() => (this.isHovered = true)}\r\n    onMouseLeave={() => (this.isHovered = false)}\r\n    style={this.optionStyle}\r\n    data-index={this.index}\r\n    onClick={this.handleClick}\r\n   >\r\n    {this.useCheckbox ? (\r\n     <div class=\"sd-select__option__checkbox-wrapper\">\r\n      <sd-checkbox\r\n       checked={this.isSelected}\r\n       disabled={this.option.disabled}\r\n       checkboxStyle={\r\n        !this.isSelected\r\n         ? { borderColor: '#888' }\r\n         : this.isHovered\r\n           ? { borderColor: 'white' }\r\n           : { borderColor: '#0075ff' }\r\n       }\r\n       onClick={e => {\r\n        e.preventDefault();\r\n        this.handleClick(e);\r\n       }}\r\n      ></sd-checkbox>\r\n      <span class=\"sd-select__option-label\">{this.option.label}</span>\r\n     </div>\r\n    ) : (\r\n     this.option.label\r\n    )}\r\n   </div>\r\n  );\r\n }\r\n}\r\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,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 {\r\n Component,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n h,\r\n Host,\r\n Method,\r\n Prop,\r\n State,\r\n} from '@stencil/core';\r\nimport type { SelectOption } from '../../../types/select';\r\n\r\n@Component({\r\n tag: 'sd-select-option',\r\n styleUrl: 'sd-select-option.scss',\r\n})\r\nexport class SdSelectOption {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() option!: SelectOption;\r\n @Prop() index!: number;\r\n @Prop() isSelected: boolean = false;\r\n @Prop() isFocused: boolean = false;\r\n @Prop() optionStyle?: { [key: string]: string };\r\n @Prop() disabled: boolean = false;\r\n @Prop() useCheckbox: boolean = false;\r\n\r\n @State() isHovered: boolean = false;\r\n\r\n @Method()\r\n async isDisabled(): Promise<boolean> {\r\n  return !!this.option.disabled;\r\n }\r\n\r\n @Event() optionClick!: EventEmitter<{\r\n  option: SelectOption;\r\n  index: number;\r\n  event: MouseEvent;\r\n }>;\r\n\r\n private handleClick = (event: MouseEvent) => {\r\n  event.stopPropagation();\r\n\r\n  if (!this.option.disabled && !this.disabled) {\r\n   this.optionClick.emit({\r\n    option: this.option,\r\n    index: this.index,\r\n    event,\r\n   });\r\n  }\r\n };\r\n\r\n render() {\r\n  return (\r\n   <Host>\r\n    <div\r\n     class={{\r\n      'sd-select__option': true,\r\n      'sd-select__option--selected': this.isSelected,\r\n      'sd-select__option--disabled': !!this.option.disabled,\r\n      'sd-select__option--focused': this.isFocused,\r\n      'sd-select__option--use-checkbox': this.useCheckbox,\r\n     }}\r\n     onMouseEnter={() => (this.isHovered = true)}\r\n     onMouseLeave={() => (this.isHovered = false)}\r\n     style={this.optionStyle}\r\n     data-index={this.index}\r\n     onClick={this.handleClick}\r\n    >\r\n     {this.useCheckbox ? (\r\n      <div class=\"sd-select__option__checkbox-wrapper\">\r\n       <sd-checkbox\r\n        checked={this.isSelected}\r\n        disabled={this.option.disabled}\r\n        //   checkboxStyle={\r\n        //    !this.isSelected\r\n        //     ? { borderColor: '#888' }\r\n        //     : this.isHovered\r\n        //       ? { borderColor: 'white' }\r\n        //       : { borderColor: '#0075ff' }\r\n        //   }\r\n        onClick={e => {\r\n         e.preventDefault();\r\n         this.handleClick(e);\r\n        }}\r\n       ></sd-checkbox>\r\n       <span class=\"sd-select__option-label\">{this.option.label}</span>\r\n      </div>\r\n     ) : (\r\n      this.option.label\r\n     )}\r\n    </div>\r\n   </Host>\r\n  );\r\n }\r\n}\r\n"]}

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

@@ -1481,6 +1481,8 @@ textarea {
   border-radius: 4px;
   overflow-y: auto;
   color: #333333;
+  display: flex;
+  flex-direction: column nowrap;
 }
 .sd-select__dropdown .sd-select__search-container {
   position: sticky;

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

@@ -17,12 +17,6 @@ export class SdSelect extends BaseDropdownEvent {
     disabled = false;
     clearable = false;
     searchable = false;
-    // props - custom styles
-    containerStyle = {};
-    triggerStyle = {};
-    dropdownStyle = {};
-    optionStyle = {};
-    labelStyle = {};
     // props - custom slots
     optionRenderer;
     // states
@@ -156,9 +150,6 @@ export class SdSelect extends BaseDropdownEvent {
             this.isOpen = false;
         }
     };
-    handleDropdownOpen = (element) => {
-        this.dropdownRef = element;
-    };
     filterOptions() {
         if (!this.searchText || this.searchText.trim() === '') {
             // 검색어가 없으면 전체 옵션 표시
@@ -209,20 +200,20 @@ export class SdSelect extends BaseDropdownEvent {
             '--select-width': this.width || '200px',
             '--select-dropdown-height': this.dropdownHeight || '260px',
         };
-        return (h(Host, { key: 'c43c086134d7a179d63a7f0c0df7e62058f7625e', style: style }, h("div", { key: 'd6ef6428b1a5ec114fbf97741c93b6cbb354bec0', class: {
+        return (h(Host, { key: 'cf8f4ce07f7ee5fc9706bdcd0d34c5211113f21e', style: style }, h("div", { key: 'b2cc0ad9e72668d33255c4e7277fabfd121e8b72', class: {
                 'sd-select': true,
                 'sd-select--open': this.isOpen,
                 'sd-select--disabled': this.disabled,
-            }, style: this.containerStyle, ref: el => (this.selectRef = el) }, this.renderLabel(this.label, this.labelStyle), h("div", { key: 'c6a3ec4e8705b9654fa5123b228e8f9f0d75c9dc', class: "sd-select__container" }, this.renderTrigger(), this.renderDropdown()))));
+            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), h("div", { key: '1be74d029ebbc24eecc6cbd2d2f236715282f350', class: "sd-select__container" }, this.renderTrigger(), this.renderDropdown()))));
     }
-    renderLabel(label, labelStyle) {
+    renderLabel(label) {
         if (!label)
             return null;
-        return (h("label", { class: "sd-select__label", style: labelStyle }, label));
+        return h("label", { class: "sd-select__label" }, label);
     }
     renderTrigger() {
         const selectedOption = this.getSelectedOption();
-        return (h("div", { class: "sd-select__trigger", tabindex: this.disabled ? -1 : 0, onClick: this.handleTriggerClick, style: this.triggerStyle }, h("span", { class: "sd-select__value" }, selectedOption ? selectedOption.label : this.placeholder), this.clearable && selectedOption && !this.disabled && (h("sd-icon", { key: "clear-icon", name: "close", size: 10, color: "#888", class: "sd-select__clear", onClick: event => {
+        return (h("div", { class: "sd-select__trigger", tabindex: this.disabled ? -1 : 0, onClick: this.handleTriggerClick }, h("span", { class: "sd-select__value" }, selectedOption ? selectedOption.label : this.placeholder), this.clearable && selectedOption && !this.disabled && (h("sd-icon", { key: "clear-icon", name: "close", size: 10, color: "#888", class: "sd-select__clear", onClick: event => {
                 event.stopPropagation();
                 this.value = null;
             } })), h("sd-icon", { key: "arrow-icon", name: "arrowDown", color: "#888", class: { 'sd-select__arrow': true, 'sd-select__arrow--open': this.isOpen } })));
@@ -230,14 +221,14 @@ export class SdSelect extends BaseDropdownEvent {
     renderDropdown() {
         if (this.isOpen === false)
             return null;
-        return (h("sd-portal", { open: this.isOpen, parentRef: this.selectRef, onSdClose: this.closeDropdown }, h("div", { class: "sd-select__dropdown", style: this.dropdownStyle, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (h("div", { class: {
+        return (h("sd-portal", { open: this.isOpen, parentRef: this.selectRef, onSdClose: this.closeDropdown }, h("div", { class: "sd-select__dropdown", onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (h("div", { class: {
                 'sd-select__search-container': true,
                 'sd-select__search-container--scrolled': this.isScrolled,
             }, onClick: event => event.stopPropagation() }, h("sd-input", { ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdInput: event => {
                 this.searchText = String(event?.detail);
             }, onSdFocus: () => {
                 this.itemIndex = -1;
-            } }, h("sd-icon", { name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" })))), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (h("slot", { name: `option-${option.value}` }, h("sd-select-option", { option: option, index: index, isSelected: option.value === this.value, isFocused: index === this.itemIndex, optionStyle: this.optionStyle, onOptionClick: ({ detail }) => this.handleOptionClick(detail) }))))) : (h("slot", { name: "option-placeholder" }, h("div", { class: 'sd-select__option-placeholder', style: this.optionStyle }, this.optionPlaceholder))))));
+            } }, h("sd-icon", { name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" })))), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (h("slot", { name: `option-${option.value}` }, h("sd-select-option", { option: option, index: index, isSelected: option.value === this.value, isFocused: index === this.itemIndex, onOptionClick: ({ detail }) => this.handleOptionClick(detail) }))))) : (h("slot", { name: "option-placeholder" }, h("div", { class: 'sd-select__option-placeholder' }, this.optionPlaceholder))))));
     }
     static get is() { return "sd-select"; }
     static get originalStyleUrls() {
@@ -456,126 +447,6 @@ export class SdSelect extends BaseDropdownEvent {
                 "attribute": "searchable",
                 "defaultValue": "false"
             },
-            "containerStyle": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "SelectStyleProps['containerStyle']",
-                    "resolved": "undefined | { [key: string]: string; }",
-                    "references": {
-                        "SelectStyleProps": {
-                            "location": "local",
-                            "path": "C:/Users/KimMeeKyeong/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-select/sd-select.tsx",
-                            "id": "src/components/sd-select/sd-select.tsx::SelectStyleProps"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "{}"
-            },
-            "triggerStyle": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "SelectStyleProps['triggerStyle']",
-                    "resolved": "undefined | { [key: string]: string; }",
-                    "references": {
-                        "SelectStyleProps": {
-                            "location": "local",
-                            "path": "C:/Users/KimMeeKyeong/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-select/sd-select.tsx",
-                            "id": "src/components/sd-select/sd-select.tsx::SelectStyleProps"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "{}"
-            },
-            "dropdownStyle": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "SelectStyleProps['dropdownStyle']",
-                    "resolved": "undefined | { [key: string]: string; }",
-                    "references": {
-                        "SelectStyleProps": {
-                            "location": "local",
-                            "path": "C:/Users/KimMeeKyeong/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-select/sd-select.tsx",
-                            "id": "src/components/sd-select/sd-select.tsx::SelectStyleProps"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "{}"
-            },
-            "optionStyle": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "SelectStyleProps['optionStyle']",
-                    "resolved": "undefined | { [key: string]: string; }",
-                    "references": {
-                        "SelectStyleProps": {
-                            "location": "local",
-                            "path": "C:/Users/KimMeeKyeong/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-select/sd-select.tsx",
-                            "id": "src/components/sd-select/sd-select.tsx::SelectStyleProps"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "{}"
-            },
-            "labelStyle": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "SelectStyleProps['labelStyle']",
-                    "resolved": "undefined | { [key: string]: string; }",
-                    "references": {
-                        "SelectStyleProps": {
-                            "location": "local",
-                            "path": "C:/Users/KimMeeKyeong/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-select/sd-select.tsx",
-                            "id": "src/components/sd-select/sd-select.tsx::SelectStyleProps"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "{}"
-            },
             "optionRenderer": {
                 "type": "unknown",
                 "mutable": false,

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

@@ -1 +1 @@
-{"version":3,"file":"sd-select.js","sourceRoot":"","sources":["../../../src/components/sd-select/sd-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\r\n Component,\r\n Event,\r\n EventEmitter,\r\n Host,\r\n Prop,\r\n State,\r\n h,\r\n Element,\r\n Watch,\r\n} from '@stencil/core';\r\nimport { BaseDropdownEvent } from '../../utils/base-dropdown-event';\r\nimport { SelectKeyboardNavigation } from '../../utils/select-keyboard-navigation';\r\n\r\nexport interface SelectOption {\r\n value: string | number;\r\n label: string;\r\n disabled?: boolean;\r\n}\r\n\r\nexport interface SelectOptionGroup extends SelectOption {\r\n type: 'group' | 'subgroup' | 'item';\r\n parent?: string;\r\n}\r\n\r\nexport interface SelectStyleProps {\r\n containerStyle?: { [key: string]: string };\r\n triggerStyle?: { [key: string]: string };\r\n dropdownStyle?: { [key: string]: string };\r\n optionStyle?: { [key: string]: string };\r\n labelStyle?: { [key: string]: string };\r\n}\r\n\r\nexport interface SelectEvents {\r\n sdChange: {\r\n  value: string | number | null;\r\n  option: SelectOption | null;\r\n };\r\n dropDownShow: { isOpen: boolean };\r\n}\r\n\r\nexport interface SelectMultipleEvents extends Pick<SelectEvents, 'dropDownShow' | 'dropDownShow'> {\r\n sdChange: SelectOption[] | null;\r\n}\r\n\r\n@Component({\r\n tag: 'sd-select',\r\n styleUrl: 'sd-select.scss',\r\n})\r\nexport class SdSelect extends BaseDropdownEvent {\r\n @Element() el!: HTMLElement;\r\n\r\n // props\r\n @Prop({ mutable: true }) value: string | number | null = null;\r\n @Prop() label: string = '';\r\n @Prop({ mutable: true }) options: SelectOption[] = [];\r\n @Prop() placeholder: string = '선택';\r\n @Prop() optionPlaceholder: string = '옵션이 없습니다.';\r\n @Prop() width: string = '200px';\r\n @Prop() dropdownHeight: string = '260px';\r\n @Prop() disabled: boolean = false;\r\n @Prop() clearable: boolean = false;\r\n @Prop() searchable: boolean = false;\r\n\r\n // props - custom styles\r\n @Prop() containerStyle: SelectStyleProps['containerStyle'] = {};\r\n @Prop() triggerStyle: SelectStyleProps['triggerStyle'] = {};\r\n @Prop() dropdownStyle: SelectStyleProps['dropdownStyle'] = {};\r\n @Prop() optionStyle: SelectStyleProps['optionStyle'] = {};\r\n @Prop() labelStyle: SelectStyleProps['labelStyle'] = {};\r\n\r\n // props - custom slots\r\n @Prop() optionRenderer?: (option: SelectOption, index: number, isSelected: boolean) => any;\r\n\r\n // states\r\n @State() filteredOptions = this.options;\r\n @State() isOpen: boolean = false;\r\n @State() searchText: string | null = null;\r\n @State() itemIndex: number = -1;\r\n @State() isScrolled: boolean = false;\r\n\r\n // events\r\n @Event() sdChange?: EventEmitter<SelectEvents['sdChange']>;\r\n @Event() dropDownShow?: EventEmitter<SelectEvents['dropDownShow']>;\r\n\r\n private selectRef?: HTMLElement;\r\n private searchRef?: HTMLSdInputElement;\r\n private optionRef?: HTMLSdSelectOptionElement;\r\n private dropdownRef?: HTMLElement;\r\n\r\n @Watch('value')\r\n valueChanged() {\r\n  const selectedOption = this.getSelectedOption();\r\n  this.sdChange?.emit({ value: selectedOption?.value || null, option: selectedOption || null });\r\n }\r\n\r\n @Watch('options')\r\n optionsChanged() {\r\n  this.filteredOptions = this.options;\r\n  this.filterOptions();\r\n }\r\n\r\n @Watch('searchText')\r\n searchTextChanged() {\r\n  this.filterOptions();\r\n }\r\n\r\n @Watch('itemIndex')\r\n async itemIndexChanged(newIndex: number, oldIndex: number) {\r\n  if (this.searchable) {\r\n   const searchInput = await this.getNativeInputElement();\r\n   if (this.itemIndex === -1) {\r\n    searchInput?.focus();\r\n    return;\r\n   } else if (searchInput?.matches(':focus')) {\r\n    searchInput?.blur();\r\n   }\r\n  }\r\n\r\n  const optionElements =\r\n   this.dropdownRef?.querySelectorAll('.sd-select__dropdown sd-select-option') || [];\r\n  const currentItem = optionElements?.[this.itemIndex];\r\n\r\n  if (!currentItem || !this.isOpen) return;\r\n\r\n  this.optionRef = currentItem as HTMLSdSelectOptionElement;\r\n  const isOptionDisabled = await this.optionRef.isDisabled();\r\n\r\n  if (isOptionDisabled) {\r\n   newIndex > oldIndex ? this.itemIndex++ : this.itemIndex--;\r\n   return;\r\n  }\r\n\r\n  this.scrollToOption(currentItem as HTMLElement);\r\n }\r\n\r\n componentWillLoad() {\r\n  // props가 모두 설정된 후에 실행되므로 올바른 options 값을 가져올 수 있음\r\n  this.filteredOptions = this.options;\r\n  this.initializeEvent(); // global dropdown Manager에 등록 + 이벤트 핸들러 초기화\r\n }\r\n\r\n disconnectedCallback() {\r\n  this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리\r\n }\r\n\r\n @Watch('isOpen')\r\n async isOpenChanged() {\r\n  // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지\r\n  this.onDropdownToggle(this.isOpen);\r\n\r\n  const selectedOption = this.getSelectedOption();\r\n  if (!selectedOption) {\r\n   this.itemIndex = /* this.searchable ?  */ -1 /* : 0 */;\r\n  } else {\r\n   this.itemIndex = this.options.indexOf(selectedOption);\r\n  }\r\n\r\n  this.dropDownShow?.emit({ isOpen: this.isOpen });\r\n\r\n  if (this.isOpen === false) return;\r\n\r\n  await new Promise(resolve => setTimeout(resolve, 10));\r\n\r\n  const optionElements =\r\n   this.dropdownRef?.querySelectorAll('.sd-select__dropdown sd-select-option') || [];\r\n\r\n  const currentItem = optionElements?.[this.itemIndex];\r\n\r\n  if (this.searchable) {\r\n   const searchInput = await this.getNativeInputElement();\r\n   searchInput?.focus();\r\n  }\r\n\r\n  if (!currentItem) return;\r\n\r\n  await new Promise(resolve => setTimeout(resolve, 10));\r\n  this.scrollToOption(currentItem as HTMLElement);\r\n }\r\n\r\n protected handleDocumentClick(event: Event): void {\r\n  if (!this.selectRef?.contains(event.target as Node)) {\r\n   this.isOpen = false;\r\n  }\r\n }\r\n\r\n protected handleDocumentKeydown(keyboardEvent: KeyboardEvent): void {\r\n  keyboardEvent.stopPropagation();\r\n  const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];\r\n  if (!targetKey.includes(keyboardEvent.key)) return;\r\n\r\n  keyboardEvent.preventDefault();\r\n  switch (keyboardEvent.key) {\r\n   case 'ArrowDown':\r\n   case 'ArrowUp':\r\n    const keyboardNavigation = new SelectKeyboardNavigation(this.searchable, this.filteredOptions);\r\n    const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);\r\n    this.itemIndex = nextIndex;\r\n    break;\r\n   case 'Enter':\r\n    const selectedOption = this.filteredOptions[this.itemIndex];\r\n    if (selectedOption && !selectedOption.disabled) {\r\n     this.value = selectedOption.value;\r\n     this.searchText = null;\r\n     this.isOpen = false;\r\n    }\r\n    break;\r\n   case 'Escape':\r\n    this.isOpen = false;\r\n    break;\r\n  }\r\n }\r\n\r\n // closeDropdown 메서드 구현 (Manager에서 호출됨)\r\n closeDropdown() {\r\n  this.isOpen = false;\r\n }\r\n\r\n // event handlers\r\n handleTriggerClick = (event: Event) => {\r\n  event.stopPropagation();\r\n\r\n  if (!this.disabled) {\r\n   this.isOpen = !this.isOpen;\r\n   this.dropDownShow?.emit({ isOpen: this.isOpen });\r\n  }\r\n };\r\n\r\n handleOptionClick = (detail: { option: SelectOption; event: Event }) => {\r\n  const { option, event } = detail;\r\n  event.stopPropagation();\r\n\r\n  if (!option.disabled) {\r\n   this.value = option.value;\r\n   this.isOpen = false;\r\n  }\r\n };\r\n\r\n handleDropdownOpen = (element: HTMLElement) => {\r\n  this.dropdownRef = element;\r\n };\r\n\r\n private filterOptions() {\r\n  if (!this.searchText || this.searchText.trim() === '') {\r\n   // 검색어가 없으면 전체 옵션 표시\r\n   this.filteredOptions = this.options;\r\n  } else {\r\n   // 검색어가 있으면 필터링\r\n   this.filteredOptions = this.options.filter(option =>\r\n    option.label.toLowerCase().includes(this.searchText!.toLowerCase()),\r\n   );\r\n  }\r\n }\r\n\r\n private getSelectedOption(): SelectOption | undefined {\r\n  return this.options.find(option => option.value === this.value);\r\n }\r\n\r\n private handleDropdownScroll = (event: Event) => {\r\n  const target = event.target as HTMLElement;\r\n  const scrollTop = target.scrollTop;\r\n\r\n  // 스크롤이 조금이라도 되면 그림자 표시\r\n  this.isScrolled = scrollTop > 0;\r\n };\r\n\r\n private async getNativeInputElement(): Promise<HTMLInputElement | null> {\r\n  if (this.searchRef) {\r\n   return this.searchRef.getNativeElement();\r\n  }\r\n  return null;\r\n }\r\n\r\n private scrollToOption(optionElement: HTMLElement) {\r\n  if (!this.dropdownRef || !optionElement) return;\r\n\r\n  const dropdown = this.dropdownRef;\r\n  const optionTop = optionElement.offsetTop;\r\n  const optionHeight = optionElement.offsetHeight;\r\n  const dropdownScrollTop = dropdown.scrollTop;\r\n  const dropdownHeight = dropdown.clientHeight;\r\n\r\n  const searchContainer = dropdown.querySelector('.sd-select__search-container');\r\n  const searchOffset = searchContainer ? (searchContainer as HTMLElement).offsetHeight : 0;\r\n\r\n  const visibleTop = dropdownScrollTop + searchOffset;\r\n  const visibleBottom = dropdownScrollTop + dropdownHeight;\r\n\r\n  if (optionTop < visibleTop) {\r\n   dropdown.scrollTop = optionTop - searchOffset;\r\n  } else if (optionTop + optionHeight > visibleBottom) {\r\n   dropdown.scrollTop = optionTop + optionHeight - dropdownHeight + searchOffset;\r\n  }\r\n }\r\n\r\n // render method\r\n render() {\r\n  const style = {\r\n   '--select-width': this.width || '200px',\r\n   '--select-dropdown-height': this.dropdownHeight || '260px',\r\n  };\r\n\r\n  return (\r\n   <Host style={style}>\r\n    <div\r\n     class={{\r\n      'sd-select': true,\r\n      'sd-select--open': this.isOpen,\r\n      'sd-select--disabled': this.disabled,\r\n     }}\r\n     style={this.containerStyle}\r\n     ref={el => (this.selectRef = el)}\r\n    >\r\n     {this.renderLabel(this.label, this.labelStyle)}\r\n     <div class=\"sd-select__container\">\r\n      {this.renderTrigger()}\r\n      {this.renderDropdown()}\r\n     </div>\r\n    </div>\r\n   </Host>\r\n  );\r\n }\r\n\r\n private renderLabel(label?: string, labelStyle?: { [key: string]: string }) {\r\n  if (!label) return null;\r\n\r\n  return (\r\n   <label class=\"sd-select__label\" style={labelStyle}>\r\n    {label}\r\n   </label>\r\n  );\r\n }\r\n\r\n private renderTrigger() {\r\n  const selectedOption = this.getSelectedOption();\r\n  return (\r\n   <div\r\n    class=\"sd-select__trigger\"\r\n    tabindex={this.disabled ? -1 : 0}\r\n    onClick={this.handleTriggerClick}\r\n    style={this.triggerStyle}\r\n   >\r\n    <span class=\"sd-select__value\">{selectedOption ? selectedOption.label : this.placeholder}</span>\r\n    {this.clearable && selectedOption && !this.disabled && (\r\n     <sd-icon\r\n      key=\"clear-icon\"\r\n      name=\"close\"\r\n      size={10}\r\n      color=\"#888\"\r\n      class=\"sd-select__clear\"\r\n      onClick={event => {\r\n       event.stopPropagation();\r\n       this.value = null;\r\n      }}\r\n     ></sd-icon>\r\n    )}\r\n\r\n    <sd-icon\r\n     key=\"arrow-icon\"\r\n     name=\"arrowDown\"\r\n     color=\"#888\"\r\n     class={{ 'sd-select__arrow': true, 'sd-select__arrow--open': this.isOpen }}\r\n    ></sd-icon>\r\n   </div>\r\n  );\r\n }\r\n\r\n private renderDropdown() {\r\n  if (this.isOpen === false) return null;\r\n  return (\r\n   <sd-portal open={this.isOpen} parentRef={this.selectRef} onSdClose={this.closeDropdown}>\r\n    <div\r\n     class=\"sd-select__dropdown\"\r\n     style={this.dropdownStyle}\r\n     onScroll={this.handleDropdownScroll}\r\n     ref={el => (this.dropdownRef = el)}\r\n    >\r\n     {this.searchable && (\r\n      <div\r\n       class={{\r\n        'sd-select__search-container': true,\r\n        'sd-select__search-container--scrolled': this.isScrolled,\r\n       }}\r\n       onClick={event => event.stopPropagation()}\r\n      >\r\n       <sd-input\r\n        ref={el => (this.searchRef = el)}\r\n        value={this.searchText}\r\n        placeholder=\"검색\"\r\n        clearable\r\n        inputStyle={{ 'padding-left': '8px' }}\r\n        autofocus\r\n        onSdInput={event => {\r\n         this.searchText = String(event?.detail);\r\n        }}\r\n        onSdFocus={() => {\r\n         this.itemIndex = -1;\r\n        }}\r\n       >\r\n        <sd-icon\r\n         name=\"search\"\r\n         size={16}\r\n         color=\"#737373\"\r\n         style={{ marginRight: '4px' }}\r\n         slot=\"prefix\"\r\n        ></sd-icon>\r\n       </sd-input>\r\n      </div>\r\n     )}\r\n     {this.filteredOptions.length > 0 ? (\r\n      this.filteredOptions.map((option, index) => (\r\n       <slot name={`option-${option.value}`}>\r\n        <sd-select-option\r\n         option={option}\r\n         index={index}\r\n         isSelected={option.value === this.value}\r\n         isFocused={index === this.itemIndex}\r\n         optionStyle={this.optionStyle}\r\n         onOptionClick={({ detail }) => this.handleOptionClick(detail)}\r\n        ></sd-select-option>\r\n       </slot>\r\n      ))\r\n     ) : (\r\n      <slot name=\"option-placeholder\">\r\n       <div class={'sd-select__option-placeholder'} style={this.optionStyle}>\r\n        {this.optionPlaceholder}\r\n       </div>\r\n      </slot>\r\n     )}\r\n    </div>\r\n   </sd-portal>\r\n  );\r\n }\r\n}\r\n\r\n{\r\n /*\r\n  <sd-select id=\"select-1\">\r\n    <!-- <div slot=\"option-placeholder\">옵션이 없습니다.</div> -->\r\n   </sd-select>\r\n   <sd-select id=\"select-2\"> </sd-select>\r\n   <sd-select id=\"select-3\" searchable clearable>\r\n    <div slot=\"option-3\">test</div>\r\n   </sd-select>\r\n\r\n    <script>\r\n  document.addEventListener('DOMContentLoaded', () => {\r\n   const select1 = document.getElementById('select-1');\r\n   const select2 = document.getElementById('select-2');\r\n   const select3 = document.getElementById('select-3');\r\n   const select = document.querySelector('sd-select slot[name=\"option-3\"]');\r\n   select1.optionPlaceholder = 'No options available';\r\n\r\n   const options = [\r\n    { label: 'Option 1', value: '1' },\r\n    { label: 'Option 2', value: '2' },\r\n    { label: 'Option 3', value: '3', disabled: true },\r\n    { label: 'Option 4', value: '4' },\r\n    { label: 'Option 5', value: '5' },\r\n    { label: 'Option 6', value: '6' },\r\n    { label: 'Option 7', value: '7', disabled: true },\r\n    { label: 'Option 8', value: '8' },\r\n    { label: 'Option 9', value: '9' },\r\n    { label: 'Option 10', value: '10' },\r\n    { label: 'Option 11', value: '11', disabled: true },\r\n    { label: 'Option 12', value: '12' },\r\n    { label: 'Option 13', value: '13' },\r\n    { label: 'Option 14', value: '14' },\r\n    { label: 'Option 15', value: '15', disabled: true },\r\n    { label: 'Option 16', value: '16' },\r\n    { label: 'Option 17', value: '17' },\r\n    { label: 'Option 18', value: '18' },\r\n    { label: 'Option 19', value: '19', disabled: true },\r\n    { label: 'Option 20', value: '20' },\r\n    { label: 'Option 21', value: '21' },\r\n    { label: 'Option 22', value: '22' },\r\n    { label: 'Option 23', value: '23', disabled: true },\r\n    { label: 'Option 24', value: '24' },\r\n   ];\r\n\r\n   select2.options = options;\r\n   select3.options = options;\r\n  });\r\n </script>\r\n\r\n */\r\n}\r\n"]}
+{"version":3,"file":"sd-select.js","sourceRoot":"","sources":["../../../src/components/sd-select/sd-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\r\n Component,\r\n Event,\r\n EventEmitter,\r\n Host,\r\n Prop,\r\n State,\r\n h,\r\n Element,\r\n Watch,\r\n} from '@stencil/core';\r\nimport { BaseDropdownEvent } from '../../utils/base-dropdown-event';\r\nimport { SelectKeyboardNavigation } from '../../utils/select-keyboard-navigation';\r\n\r\nexport interface SelectOption {\r\n value: string | number;\r\n label: string;\r\n disabled?: boolean;\r\n}\r\n\r\nexport interface SelectOptionGroup extends SelectOption {\r\n type: 'group' | 'subgroup' | 'item';\r\n parent?: string;\r\n}\r\n\r\nexport interface SelectStyleProps {\r\n containerStyle?: { [key: string]: string };\r\n triggerStyle?: { [key: string]: string };\r\n dropdownStyle?: { [key: string]: string };\r\n optionStyle?: { [key: string]: string };\r\n labelStyle?: { [key: string]: string };\r\n}\r\n\r\nexport interface SelectEvents {\r\n sdChange: {\r\n  value: string | number | null;\r\n  option: SelectOption | null;\r\n };\r\n dropDownShow: { isOpen: boolean };\r\n}\r\n\r\nexport interface SelectMultipleEvents extends Pick<SelectEvents, 'dropDownShow' | 'dropDownShow'> {\r\n sdChange: SelectOption[] | null;\r\n}\r\n\r\n@Component({\r\n tag: 'sd-select',\r\n styleUrl: 'sd-select.scss',\r\n})\r\nexport class SdSelect extends BaseDropdownEvent {\r\n @Element() el!: HTMLElement;\r\n\r\n // props\r\n @Prop({ mutable: true }) value: string | number | null = null;\r\n @Prop() label: string = '';\r\n @Prop({ mutable: true }) options: SelectOption[] = [];\r\n @Prop() placeholder: string = '선택';\r\n @Prop() optionPlaceholder: string = '옵션이 없습니다.';\r\n @Prop() width: string = '200px';\r\n @Prop() dropdownHeight: string = '260px';\r\n @Prop() disabled: boolean = false;\r\n @Prop() clearable: boolean = false;\r\n @Prop() searchable: boolean = false;\r\n\r\n // props - custom slots\r\n @Prop() optionRenderer?: (option: SelectOption, index: number, isSelected: boolean) => any;\r\n\r\n // states\r\n @State() filteredOptions = this.options;\r\n @State() isOpen: boolean = false;\r\n @State() searchText: string | null = null;\r\n @State() itemIndex: number = -1;\r\n @State() isScrolled: boolean = false;\r\n\r\n // events\r\n @Event() sdChange?: EventEmitter<SelectEvents['sdChange']>;\r\n @Event() dropDownShow?: EventEmitter<SelectEvents['dropDownShow']>;\r\n\r\n private selectRef?: HTMLElement;\r\n private searchRef?: HTMLSdInputElement;\r\n private optionRef?: HTMLSdSelectOptionElement;\r\n private dropdownRef?: HTMLElement;\r\n\r\n @Watch('value')\r\n valueChanged() {\r\n  const selectedOption = this.getSelectedOption();\r\n  this.sdChange?.emit({ value: selectedOption?.value || null, option: selectedOption || null });\r\n }\r\n\r\n @Watch('options')\r\n optionsChanged() {\r\n  this.filteredOptions = this.options;\r\n  this.filterOptions();\r\n }\r\n\r\n @Watch('searchText')\r\n searchTextChanged() {\r\n  this.filterOptions();\r\n }\r\n\r\n @Watch('itemIndex')\r\n async itemIndexChanged(newIndex: number, oldIndex: number) {\r\n  if (this.searchable) {\r\n   const searchInput = await this.getNativeInputElement();\r\n   if (this.itemIndex === -1) {\r\n    searchInput?.focus();\r\n    return;\r\n   } else if (searchInput?.matches(':focus')) {\r\n    searchInput?.blur();\r\n   }\r\n  }\r\n\r\n  const optionElements =\r\n   this.dropdownRef?.querySelectorAll('.sd-select__dropdown sd-select-option') || [];\r\n  const currentItem = optionElements?.[this.itemIndex];\r\n\r\n  if (!currentItem || !this.isOpen) return;\r\n\r\n  this.optionRef = currentItem as HTMLSdSelectOptionElement;\r\n  const isOptionDisabled = await this.optionRef.isDisabled();\r\n\r\n  if (isOptionDisabled) {\r\n   newIndex > oldIndex ? this.itemIndex++ : this.itemIndex--;\r\n   return;\r\n  }\r\n\r\n  this.scrollToOption(currentItem as HTMLElement);\r\n }\r\n\r\n componentWillLoad() {\r\n  // props가 모두 설정된 후에 실행되므로 올바른 options 값을 가져올 수 있음\r\n  this.filteredOptions = this.options;\r\n  this.initializeEvent(); // global dropdown Manager에 등록 + 이벤트 핸들러 초기화\r\n }\r\n\r\n disconnectedCallback() {\r\n  this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리\r\n }\r\n\r\n @Watch('isOpen')\r\n async isOpenChanged() {\r\n  // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지\r\n  this.onDropdownToggle(this.isOpen);\r\n\r\n  const selectedOption = this.getSelectedOption();\r\n  if (!selectedOption) {\r\n   this.itemIndex = /* this.searchable ?  */ -1 /* : 0 */;\r\n  } else {\r\n   this.itemIndex = this.options.indexOf(selectedOption);\r\n  }\r\n\r\n  this.dropDownShow?.emit({ isOpen: this.isOpen });\r\n\r\n  if (this.isOpen === false) return;\r\n\r\n  await new Promise(resolve => setTimeout(resolve, 10));\r\n\r\n  const optionElements =\r\n   this.dropdownRef?.querySelectorAll('.sd-select__dropdown sd-select-option') || [];\r\n\r\n  const currentItem = optionElements?.[this.itemIndex];\r\n\r\n  if (this.searchable) {\r\n   const searchInput = await this.getNativeInputElement();\r\n   searchInput?.focus();\r\n  }\r\n\r\n  if (!currentItem) return;\r\n\r\n  await new Promise(resolve => setTimeout(resolve, 10));\r\n  this.scrollToOption(currentItem as HTMLElement);\r\n }\r\n\r\n protected handleDocumentClick(event: Event): void {\r\n  if (!this.selectRef?.contains(event.target as Node)) {\r\n   this.isOpen = false;\r\n  }\r\n }\r\n\r\n protected handleDocumentKeydown(keyboardEvent: KeyboardEvent): void {\r\n  keyboardEvent.stopPropagation();\r\n  const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];\r\n  if (!targetKey.includes(keyboardEvent.key)) return;\r\n\r\n  keyboardEvent.preventDefault();\r\n  switch (keyboardEvent.key) {\r\n   case 'ArrowDown':\r\n   case 'ArrowUp':\r\n    const keyboardNavigation = new SelectKeyboardNavigation(this.searchable, this.filteredOptions);\r\n    const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);\r\n    this.itemIndex = nextIndex;\r\n    break;\r\n   case 'Enter':\r\n    const selectedOption = this.filteredOptions[this.itemIndex];\r\n    if (selectedOption && !selectedOption.disabled) {\r\n     this.value = selectedOption.value;\r\n     this.searchText = null;\r\n     this.isOpen = false;\r\n    }\r\n    break;\r\n   case 'Escape':\r\n    this.isOpen = false;\r\n    break;\r\n  }\r\n }\r\n\r\n // closeDropdown 메서드 구현 (Manager에서 호출됨)\r\n closeDropdown() {\r\n  this.isOpen = false;\r\n }\r\n\r\n // event handlers\r\n handleTriggerClick = (event: Event) => {\r\n  event.stopPropagation();\r\n\r\n  if (!this.disabled) {\r\n   this.isOpen = !this.isOpen;\r\n   this.dropDownShow?.emit({ isOpen: this.isOpen });\r\n  }\r\n };\r\n\r\n handleOptionClick = (detail: { option: SelectOption; event: Event }) => {\r\n  const { option, event } = detail;\r\n  event.stopPropagation();\r\n\r\n  if (!option.disabled) {\r\n   this.value = option.value;\r\n   this.isOpen = false;\r\n  }\r\n };\r\n\r\n private filterOptions() {\r\n  if (!this.searchText || this.searchText.trim() === '') {\r\n   // 검색어가 없으면 전체 옵션 표시\r\n   this.filteredOptions = this.options;\r\n  } else {\r\n   // 검색어가 있으면 필터링\r\n   this.filteredOptions = this.options.filter(option =>\r\n    option.label.toLowerCase().includes(this.searchText!.toLowerCase()),\r\n   );\r\n  }\r\n }\r\n\r\n private getSelectedOption(): SelectOption | undefined {\r\n  return this.options.find(option => option.value === this.value);\r\n }\r\n\r\n private handleDropdownScroll = (event: Event) => {\r\n  const target = event.target as HTMLElement;\r\n  const scrollTop = target.scrollTop;\r\n\r\n  // 스크롤이 조금이라도 되면 그림자 표시\r\n  this.isScrolled = scrollTop > 0;\r\n };\r\n\r\n private async getNativeInputElement(): Promise<HTMLInputElement | null> {\r\n  if (this.searchRef) {\r\n   return this.searchRef.getNativeElement();\r\n  }\r\n  return null;\r\n }\r\n\r\n private scrollToOption(optionElement: HTMLElement) {\r\n  if (!this.dropdownRef || !optionElement) return;\r\n\r\n  const dropdown = this.dropdownRef;\r\n  const optionTop = optionElement.offsetTop;\r\n  const optionHeight = optionElement.offsetHeight;\r\n  const dropdownScrollTop = dropdown.scrollTop;\r\n  const dropdownHeight = dropdown.clientHeight;\r\n\r\n  const searchContainer = dropdown.querySelector('.sd-select__search-container');\r\n  const searchOffset = searchContainer ? (searchContainer as HTMLElement).offsetHeight : 0;\r\n\r\n  const visibleTop = dropdownScrollTop + searchOffset;\r\n  const visibleBottom = dropdownScrollTop + dropdownHeight;\r\n\r\n  if (optionTop < visibleTop) {\r\n   dropdown.scrollTop = optionTop - searchOffset;\r\n  } else if (optionTop + optionHeight > visibleBottom) {\r\n   dropdown.scrollTop = optionTop + optionHeight - dropdownHeight + searchOffset;\r\n  }\r\n }\r\n\r\n // render method\r\n render() {\r\n  const style = {\r\n   '--select-width': this.width || '200px',\r\n   '--select-dropdown-height': this.dropdownHeight || '260px',\r\n  };\r\n\r\n  return (\r\n   <Host style={style}>\r\n    <div\r\n     class={{\r\n      'sd-select': true,\r\n      'sd-select--open': this.isOpen,\r\n      'sd-select--disabled': this.disabled,\r\n     }}\r\n     ref={el => (this.selectRef = el)}\r\n    >\r\n     {this.renderLabel(this.label)}\r\n     <div class=\"sd-select__container\">\r\n      {this.renderTrigger()}\r\n      {this.renderDropdown()}\r\n     </div>\r\n    </div>\r\n   </Host>\r\n  );\r\n }\r\n\r\n private renderLabel(label?: string) {\r\n  if (!label) return null;\r\n\r\n  return <label class=\"sd-select__label\">{label}</label>;\r\n }\r\n\r\n private renderTrigger() {\r\n  const selectedOption = this.getSelectedOption();\r\n  return (\r\n   <div\r\n    class=\"sd-select__trigger\"\r\n    tabindex={this.disabled ? -1 : 0}\r\n    onClick={this.handleTriggerClick}\r\n   >\r\n    <span class=\"sd-select__value\">{selectedOption ? selectedOption.label : this.placeholder}</span>\r\n    {this.clearable && selectedOption && !this.disabled && (\r\n     <sd-icon\r\n      key=\"clear-icon\"\r\n      name=\"close\"\r\n      size={10}\r\n      color=\"#888\"\r\n      class=\"sd-select__clear\"\r\n      onClick={event => {\r\n       event.stopPropagation();\r\n       this.value = null;\r\n      }}\r\n     ></sd-icon>\r\n    )}\r\n\r\n    <sd-icon\r\n     key=\"arrow-icon\"\r\n     name=\"arrowDown\"\r\n     color=\"#888\"\r\n     class={{ 'sd-select__arrow': true, 'sd-select__arrow--open': this.isOpen }}\r\n    ></sd-icon>\r\n   </div>\r\n  );\r\n }\r\n\r\n private renderDropdown() {\r\n  if (this.isOpen === false) return null;\r\n  return (\r\n   <sd-portal open={this.isOpen} parentRef={this.selectRef} onSdClose={this.closeDropdown}>\r\n    <div\r\n     class=\"sd-select__dropdown\"\r\n     onScroll={this.handleDropdownScroll}\r\n     ref={el => (this.dropdownRef = el)}\r\n    >\r\n     {this.searchable && (\r\n      <div\r\n       class={{\r\n        'sd-select__search-container': true,\r\n        'sd-select__search-container--scrolled': this.isScrolled,\r\n       }}\r\n       onClick={event => event.stopPropagation()}\r\n      >\r\n       <sd-input\r\n        ref={el => (this.searchRef = el)}\r\n        value={this.searchText}\r\n        placeholder=\"검색\"\r\n        clearable\r\n        inputStyle={{ 'padding-left': '8px' }}\r\n        autofocus\r\n        onSdInput={event => {\r\n         this.searchText = String(event?.detail);\r\n        }}\r\n        onSdFocus={() => {\r\n         this.itemIndex = -1;\r\n        }}\r\n       >\r\n        <sd-icon\r\n         name=\"search\"\r\n         size={16}\r\n         color=\"#737373\"\r\n         style={{ marginRight: '4px' }}\r\n         slot=\"prefix\"\r\n        ></sd-icon>\r\n       </sd-input>\r\n      </div>\r\n     )}\r\n     {this.filteredOptions.length > 0 ? (\r\n      this.filteredOptions.map((option, index) => (\r\n       <slot name={`option-${option.value}`}>\r\n        <sd-select-option\r\n         option={option}\r\n         index={index}\r\n         isSelected={option.value === this.value}\r\n         isFocused={index === this.itemIndex}\r\n         onOptionClick={({ detail }) => this.handleOptionClick(detail)}\r\n        ></sd-select-option>\r\n       </slot>\r\n      ))\r\n     ) : (\r\n      <slot name=\"option-placeholder\">\r\n       <div class={'sd-select__option-placeholder'}>{this.optionPlaceholder}</div>\r\n      </slot>\r\n     )}\r\n    </div>\r\n   </sd-portal>\r\n  );\r\n }\r\n}\r\n\r\n{\r\n /*\r\n  <sd-select id=\"select-1\">\r\n    <!-- <div slot=\"option-placeholder\">옵션이 없습니다.</div> -->\r\n   </sd-select>\r\n   <sd-select id=\"select-2\"> </sd-select>\r\n   <sd-select id=\"select-3\" searchable clearable>\r\n    <div slot=\"option-3\">test</div>\r\n   </sd-select>\r\n\r\n    <script>\r\n  document.addEventListener('DOMContentLoaded', () => {\r\n   const select1 = document.getElementById('select-1');\r\n   const select2 = document.getElementById('select-2');\r\n   const select3 = document.getElementById('select-3');\r\n   const select = document.querySelector('sd-select slot[name=\"option-3\"]');\r\n   select1.optionPlaceholder = 'No options available';\r\n\r\n   const options = [\r\n    { label: 'Option 1', value: '1' },\r\n    { label: 'Option 2', value: '2' },\r\n    { label: 'Option 3', value: '3', disabled: true },\r\n    { label: 'Option 4', value: '4' },\r\n    { label: 'Option 5', value: '5' },\r\n    { label: 'Option 6', value: '6' },\r\n    { label: 'Option 7', value: '7', disabled: true },\r\n    { label: 'Option 8', value: '8' },\r\n    { label: 'Option 9', value: '9' },\r\n    { label: 'Option 10', value: '10' },\r\n    { label: 'Option 11', value: '11', disabled: true },\r\n    { label: 'Option 12', value: '12' },\r\n    { label: 'Option 13', value: '13' },\r\n    { label: 'Option 14', value: '14' },\r\n    { label: 'Option 15', value: '15', disabled: true },\r\n    { label: 'Option 16', value: '16' },\r\n    { label: 'Option 17', value: '17' },\r\n    { label: 'Option 18', value: '18' },\r\n    { label: 'Option 19', value: '19', disabled: true },\r\n    { label: 'Option 20', value: '20' },\r\n    { label: 'Option 21', value: '21' },\r\n    { label: 'Option 22', value: '22' },\r\n    { label: 'Option 23', value: '23', disabled: true },\r\n    { label: 'Option 24', value: '24' },\r\n   ];\r\n\r\n   select2.options = options;\r\n   select3.options = options;\r\n  });\r\n </script>\r\n\r\n */\r\n}\r\n"]}