@sellmate/design-system 1.0.2 → 1.0.3

package/dist/design-system/{p-9a68ab88.entry.js.map → p-a2291ce8.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["registerInstance","h","Host","createEvent","getElement","resolveColor","BaseDropdownEvent","SelectKeyboardNavigation","sdLoadingSpinnerCss","SdLoadingSpinner","constructor","hostRef","this","color","resolvedColor","render","key","class","width","height","viewBox","style","cx","cy","r","fill","stroke","sdSelectCss","SdSelect","super","update","dropDownShow","el","value","options","placeholder","optionPlaceholder","dropdownHeight","autoFocus","disabled","clearable","searchable","label","insideLabel","useLabelRequired","labelTooltip","labelTooltipProps","name","rules","error","optionRenderer","isOpen","itemIndex","isScrolled","selectRef","triggerRef","formField","filteredOptions","dropDownWidth","sdOpen","sdValidate","sdReset","sdResetValidate","sdResetValidation","sdFocus","valueChanged","selectedOption","getSelectedOption","emit","option","isOpenChanged","onDropdownToggle","componentWillLoad","initializeEvent","componentDidLoad","focus","componentDidRender","trigger","rect","getBoundingClientRect","disconnectedCallback","cleanupEvent","handleDocumentClick","event","contains","target","handleDocumentKeydown","keyboardEvent","stopPropagation","targetKey","includes","preventDefault","keyboardNavigation","nextIndex","getNextIndex","find","closeDropdown","handleTriggerClick","handleOptionClick","detail","ref","renderTrigger","renderDropdown","tabindex","onClick","size","async","parentRef","querySelector","open","onSdClose","onSdOptionClick","onSdOptionFiltered","watchers"],"sources":["0"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["registerInstance","h","Host","createEvent","getElement","resolveColor","BaseDropdownEvent","SelectKeyboardNavigation","sdLoadingSpinnerCss","SdLoadingSpinner","constructor","hostRef","this","color","resolvedColor","render","key","class","width","height","viewBox","style","cx","cy","r","fill","stroke","sdSelectCss","SdSelect","super","update","dropDownShow","el","value","options","placeholder","optionPlaceholder","dropdownHeight","autoFocus","disabled","clearable","searchable","label","insideLabel","useLabelRequired","labelTooltip","labelTooltipProps","name","rules","error","optionRenderer","isOpen","itemIndex","isScrolled","selectRef","triggerRef","formField","filteredOptions","dropDownWidth","sdOpen","sdValidate","sdReset","sdResetValidate","sdResetValidation","sdFocus","valueChanged","selectedOption","getSelectedOption","emit","option","isOpenChanged","onDropdownToggle","componentWillLoad","initializeEvent","componentDidLoad","focus","componentDidRender","trigger","rect","getBoundingClientRect","disconnectedCallback","cleanupEvent","handleDocumentClick","event","contains","target","handleDocumentKeydown","keyboardEvent","stopPropagation","targetKey","includes","preventDefault","keyboardNavigation","nextIndex","getNextIndex","find","closeDropdown","handleTriggerClick","handleOptionClick","detail","ref","renderTrigger","renderDropdown","tabindex","onClick","size","async","parentRef","querySelector","open","onSdClose","onSdOptionClick","onSdOptionFiltered","watchers"],"sources":["0"],"mappings":"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","ignoreList":[]}

package/dist/design-system/p-a8650b7e.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as s,a as t,h as i}from"./p-C3qNZ7Qh.js";import{B as l,S as o}from"./p-BShXSO5x.js";const n=()=>`sd-select-multiple{display:inline-flex;flex-flow:column nowrap;height:fit-content}sd-select-multiple *:focus,sd-select-multiple *:focus-visible,sd-select-multiple *:focus-within{outline:none !important}sd-select-multiple .sd-select-multiple{width:100%}sd-select-multiple .sd-select-multiple .sd-select-multiple__trigger{padding:4px 28px 4px 12px;display:flex;width:100%;align-items:center}sd-select-multiple .sd-select-multiple .sd-select-multiple__trigger .sd-select-multiple__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400;text-align:left}sd-select-multiple .sd-select-multiple .sd-select-multiple__trigger .sd-select-multiple__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select-multiple .sd-select-multiple__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease;margin-left:8px}sd-select-multiple .sd-select-multiple__arrow--open{transform:rotate(180deg)}`;const r=class extends l{constructor(t){super();e(this,t);this.update=s(this,"sdUpdate");this.dropDownShow=s(this,"sdDropDownShow")}get el(){return t(this)}value=null;options=[];placeholder="선택";optionPlaceholder="옵션이 없습니다.";width="200px";dropdownHeight="260px";autoFocus=false;disabled=false;clearable=false;searchable=false;useAll=false;useCheckbox=false;label="";useLabelRequired=false;labelTooltip="";labelTooltipProps=null;name;rules=[];error=false;optionRenderer;isOpen=false;itemIndex=-1;isScrolled=false;update;dropDownShow;selectRef;triggerRef;formField;filteredOptions=this.options;dropDownWidth=this.width;async sdOpen(){this.isOpen=true}async sdValidate(){this.formField?.sdValidate()}async sdReset(){this.formField?.sdReset()}async sdResetValidate(){this.formField?.sdResetValidation()}async sdFocus(){this.formField?.sdFocus()}valueChanged(){this.update?.emit(this.value)}async isOpenChanged(){this.onDropdownToggle(this.isOpen);this.dropDownShow?.emit({isOpen:this.isOpen});if(this.isOpen===false){await(this.formField?.sdValidate())}}componentWillLoad(){this.initializeEvent()}componentDidLoad(){if(this.autoFocus){this.selectRef?.focus()}}componentDidRender(){const e=this.triggerRef;const s=e?.getBoundingClientRect();this.dropDownWidth=s?.width?`${s.width}px`:this.width}disconnectedCallback(){this.cleanupEvent()}handleDocumentClick(e){if(!this.selectRef?.contains(e.target)){this.isOpen=false}}handleDocumentKeydown(e){e.stopPropagation();const s=["ArrowDown","ArrowUp","Enter","Escape"];if(!s.includes(e.key))return;e.preventDefault();switch(e.key){case"ArrowDown":case"ArrowUp":const s=new o(this.searchable,this.filteredOptions);const t=s.getNextIndex(this.itemIndex,e.key);this.itemIndex=t;break;case"Enter":const i=this.filteredOptions[this.itemIndex];if(i&&!i.disabled){this.handleOptionSelection(i)}break;case"Escape":this.isOpen=false;break}}handleOptionSelection=e=>{if(!e||e.disabled)return;const s=this.value?.some((s=>s.value===e.value));if(s){this.value=this.value?.filter((s=>s.value!==e.value))||null}else{this.value=[...this.value||[],e]}};getSelectedOption(){return this.options.filter((e=>this.value?.includes(e)))}closeDropdown(){this.isOpen=false}handleTriggerClick=e=>{e.stopPropagation();if(!this.disabled){this.isOpen=!this.isOpen;this.dropDownShow?.emit({isOpen:this.isOpen})}};handleOptionClick=e=>{const{option:s,event:t}=e;t.stopPropagation();this.handleOptionSelection(s)};render(){return i("sd-field",{key:"079e5eeb997e23ddcd53fd1285b749e0e853485e",label:this.label,name:this.name,rules:this.rules,error:this.error,disabled:this.disabled,useLabelRequired:this.useLabelRequired,labelTooltip:this.labelTooltip,labelTooltipProps:this.labelTooltipProps,ref:e=>this.formField=e},i("div",{key:"c3c536fb2415dec2bb33f2e5e564de67cd118dc4",class:{"sd-select-multiple":true,"sd-select-multiple--open":this.isOpen,"sd-select-multiple--disabled":this.disabled,"sd-select-multiple--error":!!this.error},ref:e=>this.selectRef=e},this.renderTrigger(),this.renderDropdown()))}renderTrigger(){const e=this.getSelectedOption();return i("div",{class:"sd-select-multiple__trigger",tabindex:this.disabled?-1:0,onClick:this.handleTriggerClick,ref:e=>this.triggerRef=e},i("span",{class:"sd-select-multiple__value"},!e||e.length===0?this.placeholder:e.map((e=>e.label)).join(", ")),this.clearable&&e?.length>0&&!this.disabled&&i("sd-icon",{key:"close-icon",name:"close",size:10,color:"#888",class:"sd-select-multiple__clear",onClick:async e=>{e.stopPropagation();this.value=null;await(this.formField?.sdValidate())}}),i("sd-icon",{key:"arrow-icon",name:"arrowDown",color:"#888",class:{"sd-select-multiple__arrow":true,"sd-select-multiple__arrow--open":this.isOpen}}))}renderDropdown(){if(this.isOpen===false)return null;const e=this.selectRef?.querySelector(".sd-select-multiple__trigger")||this.selectRef;return i("sd-portal",{open:this.isOpen,parentRef:e,onSdClose:this.closeDropdown},i("sd-select-dropdown",{value:this.value,options:this.options,itemIndex:this.itemIndex,width:this.dropDownWidth,dropdownHeight:this.dropdownHeight,searchable:this.searchable,optionPlaceholder:this.optionPlaceholder,useCheckbox:this.useCheckbox,useAll:this.useAll,onSdOptionClick:({detail:e})=>this.handleOptionClick(e),onSdOptionFiltered:({detail:e})=>this.filteredOptions=e}))}static get watchers(){return{value:["valueChanged"],isOpen:["isOpenChanged"]}}};r.style=n();export{r as sd_select_multiple};
+//# sourceMappingURL=p-a8650b7e.entry.js.map

package/dist/design-system/{p-b521ce06.entry.js.map → p-a8650b7e.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["registerInstance","createEvent","getElement","h","BaseDropdownEvent","SelectKeyboardNavigation","sdSelectMultipleCss","SdSelectMultiple","constructor","hostRef","super","this","update","dropDownShow","el","value","options","placeholder","optionPlaceholder","width","dropdownHeight","autoFocus","disabled","clearable","searchable","useAll","useCheckbox","label","useLabelRequired","labelTooltip","labelTooltipProps","name","rules","error","optionRenderer","isOpen","itemIndex","isScrolled","selectRef","triggerRef","formField","filteredOptions","dropDownWidth","sdOpen","sdValidate","sdReset","sdResetValidate","sdResetValidation","sdFocus","valueChanged","emit","isOpenChanged","onDropdownToggle","componentWillLoad","initializeEvent","componentDidLoad","focus","componentDidRender","trigger","rect","getBoundingClientRect","disconnectedCallback","cleanupEvent","handleDocumentClick","event","contains","target","handleDocumentKeydown","keyboardEvent","stopPropagation","targetKey","includes","key","preventDefault","keyboardNavigation","nextIndex","getNextIndex","selectedOption","handleOptionSelection","option","isAlreadySelected","some","opt","filter","getSelectedOption","closeDropdown","handleTriggerClick","handleOptionClick","detail","render","ref","style","class","renderTrigger","renderDropdown","tabindex","onClick","length","map","join","size","color","async","parentRef","querySelector","open","onSdClose","onSdOptionClick","onSdOptionFiltered","watchers"],"sources":["0"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["registerInstance","createEvent","getElement","h","BaseDropdownEvent","SelectKeyboardNavigation","sdSelectMultipleCss","SdSelectMultiple","constructor","hostRef","super","this","update","dropDownShow","el","value","options","placeholder","optionPlaceholder","width","dropdownHeight","autoFocus","disabled","clearable","searchable","useAll","useCheckbox","label","useLabelRequired","labelTooltip","labelTooltipProps","name","rules","error","optionRenderer","isOpen","itemIndex","isScrolled","selectRef","triggerRef","formField","filteredOptions","dropDownWidth","sdOpen","sdValidate","sdReset","sdResetValidate","sdResetValidation","sdFocus","valueChanged","emit","isOpenChanged","onDropdownToggle","componentWillLoad","initializeEvent","componentDidLoad","focus","componentDidRender","trigger","rect","getBoundingClientRect","disconnectedCallback","cleanupEvent","handleDocumentClick","event","contains","target","handleDocumentKeydown","keyboardEvent","stopPropagation","targetKey","includes","key","preventDefault","keyboardNavigation","nextIndex","getNextIndex","selectedOption","handleOptionSelection","option","isAlreadySelected","some","opt","filter","getSelectedOption","closeDropdown","handleTriggerClick","handleOptionClick","detail","render","ref","class","renderTrigger","renderDropdown","tabindex","onClick","length","map","join","size","color","async","parentRef","querySelector","open","onSdClose","onSdOptionClick","onSdOptionFiltered","watchers","style"],"sources":["0"],"mappings":"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","ignoreList":[]}

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, a as getElement, h, H as Host, c as createEvent } from './index-C3qNZ7Qh.js';
 
-const sdFieldCss = () => `.sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:100%}.sd-field *:focus,.sd-field *:focus-visible,.sd-field *:focus-within{outline:none !important}.sd-field:not(.sd-field--disabled):hover .sd-field__control{border:1px solid #0075ff !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}.sd-field.sd-field--disabled{cursor:not-allowed}.sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}.sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#cccccc;color:#888888;cursor:not-allowed !important}.sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#eeeeee;border-color:#cccccc;color:#888888;cursor:not-allowed !important}.sd-field--has-label .sd-field__wrapper .sd-field__label{display:flex;align-items:center;margin-right:12px}.sd-field--has-label .sd-field__wrapper .sd-field__label__required-icon{margin-right:4px}.sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:12px;line-height:20px;color:#333333;white-space:nowrap}.sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip{margin-left:2px}.sd-field--has-label-inside .sd-field__wrapper .sd-field__label{margin-right:0;display:flex;align-items:center;justify-content:center;padding:3px 12px;border:1px solid #cccccc;border-right:none;border-radius:4px 0 0 4px;border-color:#aaaaaa;background-color:#f6f6f6}.sd-field__wrapper{width:var(--field-width, 200px);height:28px;display:flex;align-items:center;flex-flow:row nowrap;position:relative;color:#333333;cursor:pointer;-webkit-user-select:none;user-select:none}.sd-field__wrapper .sd-field__control{position:relative;width:100%;height:100%;display:flex;flex:1;border:1px solid #aaaaaa;border-radius:4px;background:white}.sd-field__wrapper .sd-field__control--label-inside{border-top-left-radius:0px;border-bottom-left-radius:0px}.sd-field--error:not(:hover) .sd-field__wrapper .sd-field__control{border:1px solid #fb4444 !important}.sd-field.sd-field--focus .sd-field__wrapper .sd-field__control,.sd-field.sd-field--hover .sd-field__wrapper .sd-field__control{border:1px solid #0075ff !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}.sd-field .sd-field__error-message{color:#fb4444;font-size:12px;line-height:20px;margin-top:4px}`;
+const sdFieldCss = () => `.sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:100%}.sd-field *:focus,.sd-field *:focus-visible,.sd-field *:focus-within{outline:none !important}.sd-field:not(.sd-field--disabled):hover .sd-field__control{border:1px solid #0075ff !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}.sd-field.sd-field--disabled{cursor:not-allowed}.sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}.sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#cccccc;color:#888888;cursor:not-allowed !important}.sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#eeeeee;border-color:#cccccc;color:#888888;cursor:not-allowed !important}.sd-field--has-label .sd-field__wrapper .sd-field__label{display:flex;align-items:center;margin-right:12px}.sd-field--has-label .sd-field__wrapper .sd-field__label__required-icon{margin-right:4px}.sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:12px;line-height:20px;color:#333333;white-space:nowrap}.sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip{margin-left:2px}.sd-field--has-label-inside .sd-field__wrapper .sd-field__label{margin-right:0;display:flex;align-items:center;justify-content:center;padding:3px 12px;border:1px solid #cccccc;border-right:none;border-radius:4px 0 0 4px;border-color:#aaaaaa;background-color:#f6f6f6}.sd-field__wrapper{width:100%;height:28px;display:flex;align-items:center;flex-flow:row nowrap;position:relative;color:#333333;cursor:pointer;-webkit-user-select:none;user-select:none}.sd-field__wrapper .sd-field__control{position:relative;width:100%;height:100%;display:flex;flex:1;border:1px solid #aaaaaa;border-radius:4px;background:white}.sd-field__wrapper .sd-field__control--label-inside{border-top-left-radius:0px;border-bottom-left-radius:0px}.sd-field--error:not(:hover) .sd-field__wrapper .sd-field__control{border:1px solid #fb4444 !important}.sd-field.sd-field--focus .sd-field__wrapper .sd-field__control,.sd-field.sd-field--hover .sd-field__wrapper .sd-field__control{border:1px solid #0075ff !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}.sd-field .sd-field__error-message{color:#fb4444;font-size:12px;line-height:20px;margin-top:4px}`;
 
 const FORM_PARENT_TAGS = [
     'sd-select',

package/dist/esm/sd-loading-spinner_2.entry.js

@@ -18,7 +18,7 @@ const SdLoadingSpinner = class {
 };
 SdLoadingSpinner.style = sdLoadingSpinnerCss();
 
-const sdSelectCss = () => `sd-select{display:inline-flex;flex-flow:column nowrap;width:fit-content;height:fit-content}sd-select *:focus,sd-select *:focus-visible,sd-select *:focus-within{outline:none !important}sd-select .sd-select{width:100%}sd-select .sd-select .sd-select__trigger{padding:4px 28px 4px 12px;display:flex;width:100%;height:100%;align-items:center}sd-select .sd-select .sd-select__trigger .sd-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400;text-align:left}sd-select .sd-select .sd-select__trigger .sd-select__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select .sd-select .sd-select__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease;margin-left:8px}sd-select .sd-select .sd-select__arrow--open{transform:rotate(180deg)}`;
+const sdSelectCss = () => `sd-select{display:inline-flex;flex-flow:column nowrap;height:fit-content}sd-select *:focus,sd-select *:focus-visible,sd-select *:focus-within{outline:none !important}sd-select .sd-select{width:100%}sd-select .sd-select .sd-select__trigger{padding:4px 28px 4px 12px;display:flex;width:100%;height:100%;align-items:center}sd-select .sd-select .sd-select__trigger .sd-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400;text-align:left}sd-select .sd-select .sd-select__trigger .sd-select__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select .sd-select .sd-select__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease;margin-left:8px}sd-select .sd-select .sd-select__arrow--open{transform:rotate(180deg)}`;
 
 const SdSelect = class extends BaseDropdownEvent {
     constructor(hostRef) {
@@ -159,7 +159,7 @@ const SdSelect = class extends BaseDropdownEvent {
         }
     };
     render() {
-        return (h("sd-field", { key: '5c638efb68498690a30a855e3a337fac0e6e7810', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, insideLabel: this.insideLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, h("div", { key: 'e14a4f235235fdafa94f645eac0c18091080c8e9', class: {
+        return (h("sd-field", { key: 'b53c365ea3fbc27e7b88a6b9d8c543f316ea26e8', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, insideLabel: this.insideLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, h("div", { key: 'cb672c68bf475f1336b993e3f9576048ca482bfb', class: {
                 'sd-select': true,
                 'sd-select--disabled': this.disabled,
                 'sd-select--error': !!this.error,

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, a as getElement, h } from './index-C3qNZ7Qh.js';
 import { B as BaseDropdownEvent, S as SelectKeyboardNavigation } from './base-dropdown-event-BShXSO5x.js';
 
-const sdSelectMultipleCss = () => `sd-select-multiple{display:inline-flex;flex-flow:column nowrap;width:fit-content;height:fit-content}sd-select-multiple *:focus,sd-select-multiple *:focus-visible,sd-select-multiple *:focus-within{outline:none !important}sd-select-multiple .sd-select-multiple{width:100%}sd-select-multiple .sd-select-multiple .sd-select-multiple__trigger{padding:4px 28px 4px 12px;display:flex;width:100%;align-items:center}sd-select-multiple .sd-select-multiple .sd-select-multiple__trigger .sd-select-multiple__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400;text-align:left}sd-select-multiple .sd-select-multiple .sd-select-multiple__trigger .sd-select-multiple__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select-multiple .sd-select-multiple__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease;margin-left:8px}sd-select-multiple .sd-select-multiple__arrow--open{transform:rotate(180deg)}`;
+const sdSelectMultipleCss = () => `sd-select-multiple{display:inline-flex;flex-flow:column nowrap;height:fit-content}sd-select-multiple *:focus,sd-select-multiple *:focus-visible,sd-select-multiple *:focus-within{outline:none !important}sd-select-multiple .sd-select-multiple{width:100%}sd-select-multiple .sd-select-multiple .sd-select-multiple__trigger{padding:4px 28px 4px 12px;display:flex;width:100%;align-items:center}sd-select-multiple .sd-select-multiple .sd-select-multiple__trigger .sd-select-multiple__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400;text-align:left}sd-select-multiple .sd-select-multiple .sd-select-multiple__trigger .sd-select-multiple__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select-multiple .sd-select-multiple__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease;margin-left:8px}sd-select-multiple .sd-select-multiple__arrow--open{transform:rotate(180deg)}`;
 
 const SdSelectMultiple = class extends BaseDropdownEvent {
     constructor(hostRef) {
@@ -151,12 +151,12 @@ const SdSelectMultiple = class extends BaseDropdownEvent {
         this.handleOptionSelection(option);
     };
     render() {
-        return (h("sd-field", { key: '67a0bebbd4ad8ae405db1c9c1d0b9701a9b904f8', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, h("div", { key: 'aa86839508c103bbe70287877020ec3eb82b7190', class: {
+        return (h("sd-field", { key: '079e5eeb997e23ddcd53fd1285b749e0e853485e', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, h("div", { key: 'c3c536fb2415dec2bb33f2e5e564de67cd118dc4', class: {
                 'sd-select-multiple': true,
                 'sd-select-multiple--open': this.isOpen,
                 'sd-select-multiple--disabled': this.disabled,
                 'sd-select-multiple--error': !!this.error,
-            }, style: { '--select-width': this.width || '200px' }, ref: el => (this.selectRef = el) }, this.renderTrigger(), this.renderDropdown())));
+            }, ref: el => (this.selectRef = el) }, this.renderTrigger(), this.renderDropdown())));
     }
     renderTrigger() {
         const selectedOption = this.getSelectedOption();

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

@@ -1 +1 @@
-{"version":3,"file":"sd-select-multiple.entry.js","sources":["src/components/sd-select-multiple/sd-select-multiple.scss?tag=sd-select-multiple","src/components/sd-select-multiple/sd-select-multiple.tsx"],"sourcesContent":["@import 'variables';\n@import 'extend';\n\nsd-select-multiple {\n display: inline-flex;\n flex-flow: column nowrap;\n width: fit-content;\n height: fit-content;\n\n *:focus,\n *:focus-visible,\n *:focus-within {\n  outline: none !important;\n }\n\n .sd-select-multiple {\n  width: 100%;\n\n  .sd-select-multiple__trigger {\n   padding: 4px 28px 4px 12px;\n   display: flex;\n   width: 100%;\n   align-items: center;\n\n   .sd-select-multiple__value {\n    flex: 1;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    line-height: 20px;\n    font-size: 12px;\n    font-weight: 400;\n    text-align: left;\n   }\n\n   .sd-select-multiple__clear {\n    margin: 0 4px;\n    width: 8px;\n    height: 8px;\n    background-color: transparent;\n    outline: none;\n    border: none;\n   }\n  }\n }\n\n .sd-select-multiple__arrow {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  width: 12px;\n  height: 12px;\n  color: $grey_65;\n  transition: transform 0.3s ease;\n  margin-left: 8px;\n\n  &--open {\n   transform: rotate(180deg);\n  }\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Method,\n Prop,\n State,\n Watch,\n h,\n} from '@stencil/core';\nimport type { SelectOption, SelectMultipleEvents } from '../../types/select';\nimport { SelectKeyboardNavigation } from '../../utils/select-keyboard-navigation';\nimport { BaseDropdownEvent } from '../../utils/base-dropdown-event';\nimport { Rule, SdTooltipProps } from '../../components';\n\n@Component({\n tag: 'sd-select-multiple',\n styleUrl: 'sd-select-multiple.scss',\n})\nexport class SdSelectMultiple extends BaseDropdownEvent {\n @Element() el!: HTMLElement;\n\n // props\n @Prop({ mutable: true }) value: SelectOption[] | null = null;\n @Prop({ mutable: true }) options: SelectOption[] = [];\n @Prop() placeholder: string = '선택';\n @Prop() optionPlaceholder: string = '옵션이 없습니다.';\n @Prop() width: string = '200px';\n @Prop() dropdownHeight: string = '260px';\n @Prop() autoFocus: boolean = false;\n @Prop() disabled: boolean = false;\n @Prop() clearable: boolean = false;\n @Prop() searchable: boolean = false;\n\n // props - select multiple specific\n @Prop() useAll: boolean = false;\n @Prop() useCheckbox: boolean = false;\n\n // props - label\n @Prop() label: string = '';\n @Prop() useLabelRequired: boolean = false;\n @Prop() labelTooltip: string = '';\n @Prop() labelTooltipProps: SdTooltipProps | null = null;\n\n // props - form\n @Prop() name?: string;\n @Prop() rules?: Rule[] = [];\n @Prop() error?: boolean = false;\n\n @Prop() optionRenderer?: (option: SelectOption, index: number, isSelected: boolean) => any;\n\n // states\n @State() isOpen: boolean = false;\n @State() itemIndex: number = -1;\n @State() isScrolled: boolean = false;\n\n // events\n @Event({ eventName: 'sdUpdate' }) update?: EventEmitter<SelectMultipleEvents['sdUpdate']>;\n @Event({ eventName: 'sdDropDownShow' }) dropDownShow?: EventEmitter<\n  SelectMultipleEvents['dropDownShow']\n >;\n\n private selectRef?: HTMLElement;\n private triggerRef?: HTMLElement;\n private formField?: HTMLSdFieldElement;\n private filteredOptions = this.options;\n private dropDownWidth: string = this.width;\n\n @Method()\n async sdOpen() {\n  this.isOpen = true;\n }\n\n @Method()\n async sdValidate() {\n  this.formField?.sdValidate();\n }\n\n @Method()\n async sdReset() {\n  this.formField?.sdReset();\n }\n\n @Method()\n async sdResetValidate() {\n  this.formField?.sdResetValidation();\n }\n\n @Method()\n async sdFocus() {\n  this.formField?.sdFocus();\n }\n\n @Watch('value')\n valueChanged() {\n  this.update?.emit(this.value);\n }\n\n @Watch('isOpen')\n async isOpenChanged() {\n  // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지\n  this.onDropdownToggle(this.isOpen);\n  this.dropDownShow?.emit({ isOpen: this.isOpen });\n\n  if (this.isOpen === false) {\n   await this.formField?.sdValidate();\n  }\n }\n\n componentWillLoad() {\n  this.initializeEvent(); // global dropdown Manager에 등록 + 이벤트 핸들러 초기화\n }\n\n componentDidLoad() {\n  if (this.autoFocus) {\n   this.selectRef?.focus();\n  }\n }\n\n // render 이후 label을 제외한 trigger의 너비를 기준으로 dropdown 너비 설정\n componentDidRender() {\n  const trigger = this.triggerRef;\n  const rect = trigger?.getBoundingClientRect();\n  this.dropDownWidth = rect?.width ? `${rect.width}px` : this.width;\n }\n\n disconnectedCallback() {\n  this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리\n }\n\n protected handleDocumentClick(event: Event): void {\n  if (!this.selectRef?.contains(event.target as Node)) {\n   this.isOpen = false;\n  }\n }\n\n protected handleDocumentKeydown(keyboardEvent: KeyboardEvent): void {\n  keyboardEvent.stopPropagation();\n  const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];\n  if (!targetKey.includes(keyboardEvent.key)) return;\n\n  keyboardEvent.preventDefault();\n  switch (keyboardEvent.key) {\n   case 'ArrowDown':\n   case 'ArrowUp':\n    const keyboardNavigation = new SelectKeyboardNavigation(this.searchable, this.filteredOptions);\n    const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);\n    this.itemIndex = nextIndex;\n    break;\n   case 'Enter':\n    const selectedOption = this.filteredOptions[this.itemIndex];\n    if (selectedOption && !selectedOption.disabled) {\n     this.handleOptionSelection(selectedOption);\n    }\n    break;\n   case 'Escape':\n    this.isOpen = false;\n    break;\n  }\n }\n\n private handleOptionSelection = (option: SelectOption) => {\n  if (!option || option.disabled) return;\n\n  const isAlreadySelected = this.value?.some(opt => opt.value === option.value);\n  if (isAlreadySelected) {\n   // 이미 선택된 옵션인 경우, 선택 해제\n   this.value = this.value?.filter(opt => opt.value !== option.value) || null;\n  } else {\n   // 새로운 옵션 선택\n   this.value = [...(this.value || []), option];\n  }\n };\n\n private getSelectedOption(): SelectOption[] {\n  return this.options.filter(option => this.value?.includes(option));\n }\n\n closeDropdown() {\n  this.isOpen = false;\n }\n\n handleTriggerClick = (event: Event) => {\n  event.stopPropagation();\n\n  if (!this.disabled) {\n   this.isOpen = !this.isOpen;\n   this.dropDownShow?.emit({ isOpen: this.isOpen });\n  }\n };\n\n handleOptionClick = (detail: { option: SelectOption; event: Event }) => {\n  const { option, event } = detail;\n  event.stopPropagation();\n\n  this.handleOptionSelection(option);\n };\n\n render() {\n  return (\n   <sd-field\n    label={this.label}\n    name={this.name}\n    rules={this.rules}\n    error={this.error}\n    disabled={this.disabled}\n    useLabelRequired={this.useLabelRequired}\n    labelTooltip={this.labelTooltip}\n    labelTooltipProps={this.labelTooltipProps}\n    ref={el => (this.formField = el)}\n    style={{ '--field-width': this.width || '200px' }}\n   >\n    <div\n     class={{\n      'sd-select-multiple': true,\n      'sd-select-multiple--open': this.isOpen,\n      'sd-select-multiple--disabled': this.disabled,\n      'sd-select-multiple--error': !!this.error,\n     }}\n     style={{ '--select-width': this.width || '200px' }}\n     ref={el => (this.selectRef = el)}\n    >\n     {this.renderTrigger()}\n     {this.renderDropdown()}\n    </div>\n   </sd-field>\n  );\n }\n\n private renderTrigger() {\n  const selectedOption = this.getSelectedOption();\n  return (\n   <div\n    class=\"sd-select-multiple__trigger\"\n    tabindex={this.disabled ? -1 : 0}\n    onClick={this.handleTriggerClick}\n    ref={el => (this.triggerRef = el)}\n   >\n    <span class=\"sd-select-multiple__value\">\n     {!selectedOption || selectedOption.length === 0\n      ? this.placeholder\n      : selectedOption.map(option => option.label).join(', ')}\n    </span>\n    {this.clearable && selectedOption?.length > 0 && !this.disabled && (\n     <sd-icon\n      key=\"close-icon\"\n      name=\"close\"\n      size={10}\n      color=\"#888\"\n      class=\"sd-select-multiple__clear\"\n      onClick={async event => {\n       event.stopPropagation();\n       this.value = null;\n       await this.formField?.sdValidate();\n      }}\n     ></sd-icon>\n    )}\n\n    <sd-icon\n     key=\"arrow-icon\"\n     name=\"arrowDown\"\n     color=\"#888\"\n     class={{ 'sd-select-multiple__arrow': true, 'sd-select-multiple__arrow--open': this.isOpen }}\n    ></sd-icon>\n   </div>\n  );\n }\n\n private renderDropdown() {\n  if (this.isOpen === false) return null;\n\n  const parentRef = (this.selectRef?.querySelector('.sd-select-multiple__trigger') ||\n   this.selectRef) as HTMLElement;\n\n  return (\n   <sd-portal open={this.isOpen} parentRef={parentRef} onSdClose={this.closeDropdown}>\n    <sd-select-dropdown\n     value={this.value}\n     options={this.options}\n     itemIndex={this.itemIndex}\n     width={this.dropDownWidth}\n     dropdownHeight={this.dropdownHeight}\n     searchable={this.searchable}\n     optionPlaceholder={this.optionPlaceholder}\n     useCheckbox={this.useCheckbox}\n     useAll={this.useAll}\n     onSdOptionClick={({ detail }) => this.handleOptionClick(detail)}\n     onSdOptionFiltered={({ detail }) => (this.filteredOptions = detail)}\n    ></sd-select-dropdown>\n   </sd-portal>\n  );\n }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"sd-select-multiple.entry.js","sources":["src/components/sd-select-multiple/sd-select-multiple.scss?tag=sd-select-multiple","src/components/sd-select-multiple/sd-select-multiple.tsx"],"sourcesContent":["@import 'variables';\n@import 'extend';\n\nsd-select-multiple {\n display: inline-flex;\n flex-flow: column nowrap;\n height: fit-content;\n\n *:focus,\n *:focus-visible,\n *:focus-within {\n  outline: none !important;\n }\n\n .sd-select-multiple {\n  width: 100%;\n\n  .sd-select-multiple__trigger {\n   padding: 4px 28px 4px 12px;\n   display: flex;\n   width: 100%;\n   align-items: center;\n\n   .sd-select-multiple__value {\n    flex: 1;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    line-height: 20px;\n    font-size: 12px;\n    font-weight: 400;\n    text-align: left;\n   }\n\n   .sd-select-multiple__clear {\n    margin: 0 4px;\n    width: 8px;\n    height: 8px;\n    background-color: transparent;\n    outline: none;\n    border: none;\n   }\n  }\n }\n\n .sd-select-multiple__arrow {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  width: 12px;\n  height: 12px;\n  color: $grey_65;\n  transition: transform 0.3s ease;\n  margin-left: 8px;\n\n  &--open {\n   transform: rotate(180deg);\n  }\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Method,\n Prop,\n State,\n Watch,\n h,\n} from '@stencil/core';\nimport type { SelectOption, SelectMultipleEvents } from '../../types/select';\nimport { SelectKeyboardNavigation } from '../../utils/select-keyboard-navigation';\nimport { BaseDropdownEvent } from '../../utils/base-dropdown-event';\nimport { Rule, SdTooltipProps } from '../../components';\n\n@Component({\n tag: 'sd-select-multiple',\n styleUrl: 'sd-select-multiple.scss',\n})\nexport class SdSelectMultiple extends BaseDropdownEvent {\n @Element() el!: HTMLElement;\n\n // props\n @Prop({ mutable: true }) value: SelectOption[] | null = null;\n @Prop({ mutable: true }) options: SelectOption[] = [];\n @Prop() placeholder: string = '선택';\n @Prop() optionPlaceholder: string = '옵션이 없습니다.';\n @Prop() width: string = '200px';\n @Prop() dropdownHeight: string = '260px';\n @Prop() autoFocus: boolean = false;\n @Prop() disabled: boolean = false;\n @Prop() clearable: boolean = false;\n @Prop() searchable: boolean = false;\n\n // props - select multiple specific\n @Prop() useAll: boolean = false;\n @Prop() useCheckbox: boolean = false;\n\n // props - label\n @Prop() label: string = '';\n @Prop() useLabelRequired: boolean = false;\n @Prop() labelTooltip: string = '';\n @Prop() labelTooltipProps: SdTooltipProps | null = null;\n\n // props - form\n @Prop() name?: string;\n @Prop() rules?: Rule[] = [];\n @Prop() error?: boolean = false;\n\n @Prop() optionRenderer?: (option: SelectOption, index: number, isSelected: boolean) => any;\n\n // states\n @State() isOpen: boolean = false;\n @State() itemIndex: number = -1;\n @State() isScrolled: boolean = false;\n\n // events\n @Event({ eventName: 'sdUpdate' }) update?: EventEmitter<SelectMultipleEvents['sdUpdate']>;\n @Event({ eventName: 'sdDropDownShow' }) dropDownShow?: EventEmitter<\n  SelectMultipleEvents['dropDownShow']\n >;\n\n private selectRef?: HTMLElement;\n private triggerRef?: HTMLElement;\n private formField?: HTMLSdFieldElement;\n private filteredOptions = this.options;\n private dropDownWidth: string = this.width;\n\n @Method()\n async sdOpen() {\n  this.isOpen = true;\n }\n\n @Method()\n async sdValidate() {\n  this.formField?.sdValidate();\n }\n\n @Method()\n async sdReset() {\n  this.formField?.sdReset();\n }\n\n @Method()\n async sdResetValidate() {\n  this.formField?.sdResetValidation();\n }\n\n @Method()\n async sdFocus() {\n  this.formField?.sdFocus();\n }\n\n @Watch('value')\n valueChanged() {\n  this.update?.emit(this.value);\n }\n\n @Watch('isOpen')\n async isOpenChanged() {\n  // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지\n  this.onDropdownToggle(this.isOpen);\n  this.dropDownShow?.emit({ isOpen: this.isOpen });\n\n  if (this.isOpen === false) {\n   await this.formField?.sdValidate();\n  }\n }\n\n componentWillLoad() {\n  this.initializeEvent(); // global dropdown Manager에 등록 + 이벤트 핸들러 초기화\n }\n\n componentDidLoad() {\n  if (this.autoFocus) {\n   this.selectRef?.focus();\n  }\n }\n\n // render 이후 label을 제외한 trigger의 너비를 기준으로 dropdown 너비 설정\n componentDidRender() {\n  const trigger = this.triggerRef;\n  const rect = trigger?.getBoundingClientRect();\n  this.dropDownWidth = rect?.width ? `${rect.width}px` : this.width;\n }\n\n disconnectedCallback() {\n  this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리\n }\n\n protected handleDocumentClick(event: Event): void {\n  if (!this.selectRef?.contains(event.target as Node)) {\n   this.isOpen = false;\n  }\n }\n\n protected handleDocumentKeydown(keyboardEvent: KeyboardEvent): void {\n  keyboardEvent.stopPropagation();\n  const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];\n  if (!targetKey.includes(keyboardEvent.key)) return;\n\n  keyboardEvent.preventDefault();\n  switch (keyboardEvent.key) {\n   case 'ArrowDown':\n   case 'ArrowUp':\n    const keyboardNavigation = new SelectKeyboardNavigation(this.searchable, this.filteredOptions);\n    const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);\n    this.itemIndex = nextIndex;\n    break;\n   case 'Enter':\n    const selectedOption = this.filteredOptions[this.itemIndex];\n    if (selectedOption && !selectedOption.disabled) {\n     this.handleOptionSelection(selectedOption);\n    }\n    break;\n   case 'Escape':\n    this.isOpen = false;\n    break;\n  }\n }\n\n private handleOptionSelection = (option: SelectOption) => {\n  if (!option || option.disabled) return;\n\n  const isAlreadySelected = this.value?.some(opt => opt.value === option.value);\n  if (isAlreadySelected) {\n   // 이미 선택된 옵션인 경우, 선택 해제\n   this.value = this.value?.filter(opt => opt.value !== option.value) || null;\n  } else {\n   // 새로운 옵션 선택\n   this.value = [...(this.value || []), option];\n  }\n };\n\n private getSelectedOption(): SelectOption[] {\n  return this.options.filter(option => this.value?.includes(option));\n }\n\n closeDropdown() {\n  this.isOpen = false;\n }\n\n handleTriggerClick = (event: Event) => {\n  event.stopPropagation();\n\n  if (!this.disabled) {\n   this.isOpen = !this.isOpen;\n   this.dropDownShow?.emit({ isOpen: this.isOpen });\n  }\n };\n\n handleOptionClick = (detail: { option: SelectOption; event: Event }) => {\n  const { option, event } = detail;\n  event.stopPropagation();\n\n  this.handleOptionSelection(option);\n };\n\n render() {\n  return (\n   <sd-field\n    label={this.label}\n    name={this.name}\n    rules={this.rules}\n    error={this.error}\n    disabled={this.disabled}\n    useLabelRequired={this.useLabelRequired}\n    labelTooltip={this.labelTooltip}\n    labelTooltipProps={this.labelTooltipProps}\n    ref={el => (this.formField = el)}\n   >\n    <div\n     class={{\n      'sd-select-multiple': true,\n      'sd-select-multiple--open': this.isOpen,\n      'sd-select-multiple--disabled': this.disabled,\n      'sd-select-multiple--error': !!this.error,\n     }}\n     ref={el => (this.selectRef = el)}\n    >\n     {this.renderTrigger()}\n     {this.renderDropdown()}\n    </div>\n   </sd-field>\n  );\n }\n\n private renderTrigger() {\n  const selectedOption = this.getSelectedOption();\n  return (\n   <div\n    class=\"sd-select-multiple__trigger\"\n    tabindex={this.disabled ? -1 : 0}\n    onClick={this.handleTriggerClick}\n    ref={el => (this.triggerRef = el)}\n   >\n    <span class=\"sd-select-multiple__value\">\n     {!selectedOption || selectedOption.length === 0\n      ? this.placeholder\n      : selectedOption.map(option => option.label).join(', ')}\n    </span>\n    {this.clearable && selectedOption?.length > 0 && !this.disabled && (\n     <sd-icon\n      key=\"close-icon\"\n      name=\"close\"\n      size={10}\n      color=\"#888\"\n      class=\"sd-select-multiple__clear\"\n      onClick={async event => {\n       event.stopPropagation();\n       this.value = null;\n       await this.formField?.sdValidate();\n      }}\n     ></sd-icon>\n    )}\n\n    <sd-icon\n     key=\"arrow-icon\"\n     name=\"arrowDown\"\n     color=\"#888\"\n     class={{ 'sd-select-multiple__arrow': true, 'sd-select-multiple__arrow--open': this.isOpen }}\n    ></sd-icon>\n   </div>\n  );\n }\n\n private renderDropdown() {\n  if (this.isOpen === false) return null;\n\n  const parentRef = (this.selectRef?.querySelector('.sd-select-multiple__trigger') ||\n   this.selectRef) as HTMLElement;\n\n  return (\n   <sd-portal open={this.isOpen} parentRef={parentRef} onSdClose={this.closeDropdown}>\n    <sd-select-dropdown\n     value={this.value}\n     options={this.options}\n     itemIndex={this.itemIndex}\n     width={this.dropDownWidth}\n     dropdownHeight={this.dropdownHeight}\n     searchable={this.searchable}\n     optionPlaceholder={this.optionPlaceholder}\n     useCheckbox={this.useCheckbox}\n     useAll={this.useAll}\n     onSdOptionClick={({ detail }) => this.handleOptionClick(detail)}\n     onSdOptionFiltered={({ detail }) => (this.filteredOptions = detail)}\n    ></sd-select-dropdown>\n   </sd-portal>\n  );\n }\n}\n"],"names":[],"mappings":"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"}

package/hydrate/index.js

@@ -4430,7 +4430,7 @@ class SdDateRangePicker {
     }; }
 }
 
-const sdFieldCss = () => `.sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:100%}.sd-field *:focus,.sd-field *:focus-visible,.sd-field *:focus-within{outline:none !important}.sd-field:not(.sd-field--disabled):hover .sd-field__control{border:1px solid #0075ff !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}.sd-field.sd-field--disabled{cursor:not-allowed}.sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}.sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#cccccc;color:#888888;cursor:not-allowed !important}.sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#eeeeee;border-color:#cccccc;color:#888888;cursor:not-allowed !important}.sd-field--has-label .sd-field__wrapper .sd-field__label{display:flex;align-items:center;margin-right:12px}.sd-field--has-label .sd-field__wrapper .sd-field__label__required-icon{margin-right:4px}.sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:12px;line-height:20px;color:#333333;white-space:nowrap}.sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip{margin-left:2px}.sd-field--has-label-inside .sd-field__wrapper .sd-field__label{margin-right:0;display:flex;align-items:center;justify-content:center;padding:3px 12px;border:1px solid #cccccc;border-right:none;border-radius:4px 0 0 4px;border-color:#aaaaaa;background-color:#f6f6f6}.sd-field__wrapper{width:var(--field-width, 200px);height:28px;display:flex;align-items:center;flex-flow:row nowrap;position:relative;color:#333333;cursor:pointer;-webkit-user-select:none;user-select:none}.sd-field__wrapper .sd-field__control{position:relative;width:100%;height:100%;display:flex;flex:1;border:1px solid #aaaaaa;border-radius:4px;background:white}.sd-field__wrapper .sd-field__control--label-inside{border-top-left-radius:0px;border-bottom-left-radius:0px}.sd-field--error:not(:hover) .sd-field__wrapper .sd-field__control{border:1px solid #fb4444 !important}.sd-field.sd-field--focus .sd-field__wrapper .sd-field__control,.sd-field.sd-field--hover .sd-field__wrapper .sd-field__control{border:1px solid #0075ff !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}.sd-field .sd-field__error-message{color:#fb4444;font-size:12px;line-height:20px;margin-top:4px}`;
+const sdFieldCss = () => `.sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:100%}.sd-field *:focus,.sd-field *:focus-visible,.sd-field *:focus-within{outline:none !important}.sd-field:not(.sd-field--disabled):hover .sd-field__control{border:1px solid #0075ff !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}.sd-field.sd-field--disabled{cursor:not-allowed}.sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}.sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#cccccc;color:#888888;cursor:not-allowed !important}.sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#eeeeee;border-color:#cccccc;color:#888888;cursor:not-allowed !important}.sd-field--has-label .sd-field__wrapper .sd-field__label{display:flex;align-items:center;margin-right:12px}.sd-field--has-label .sd-field__wrapper .sd-field__label__required-icon{margin-right:4px}.sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:12px;line-height:20px;color:#333333;white-space:nowrap}.sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip{margin-left:2px}.sd-field--has-label-inside .sd-field__wrapper .sd-field__label{margin-right:0;display:flex;align-items:center;justify-content:center;padding:3px 12px;border:1px solid #cccccc;border-right:none;border-radius:4px 0 0 4px;border-color:#aaaaaa;background-color:#f6f6f6}.sd-field__wrapper{width:100%;height:28px;display:flex;align-items:center;flex-flow:row nowrap;position:relative;color:#333333;cursor:pointer;-webkit-user-select:none;user-select:none}.sd-field__wrapper .sd-field__control{position:relative;width:100%;height:100%;display:flex;flex:1;border:1px solid #aaaaaa;border-radius:4px;background:white}.sd-field__wrapper .sd-field__control--label-inside{border-top-left-radius:0px;border-bottom-left-radius:0px}.sd-field--error:not(:hover) .sd-field__wrapper .sd-field__control{border:1px solid #fb4444 !important}.sd-field.sd-field--focus .sd-field__wrapper .sd-field__control,.sd-field.sd-field--hover .sd-field__wrapper .sd-field__control{border:1px solid #0075ff !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}.sd-field .sd-field__error-message{color:#fb4444;font-size:12px;line-height:20px;margin-top:4px}`;
 
 const FORM_PARENT_TAGS = [
     'sd-select',
@@ -8322,7 +8322,7 @@ class SelectKeyboardNavigation {
     }
 }
 
-const sdSelectCss = () => `sd-select{display:inline-flex;flex-flow:column nowrap;width:fit-content;height:fit-content}sd-select *:focus,sd-select *:focus-visible,sd-select *:focus-within{outline:none !important}sd-select .sd-select{width:100%}sd-select .sd-select .sd-select__trigger{padding:4px 28px 4px 12px;display:flex;width:100%;height:100%;align-items:center}sd-select .sd-select .sd-select__trigger .sd-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400;text-align:left}sd-select .sd-select .sd-select__trigger .sd-select__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select .sd-select .sd-select__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease;margin-left:8px}sd-select .sd-select .sd-select__arrow--open{transform:rotate(180deg)}`;
+const sdSelectCss = () => `sd-select{display:inline-flex;flex-flow:column nowrap;height:fit-content}sd-select *:focus,sd-select *:focus-visible,sd-select *:focus-within{outline:none !important}sd-select .sd-select{width:100%}sd-select .sd-select .sd-select__trigger{padding:4px 28px 4px 12px;display:flex;width:100%;height:100%;align-items:center}sd-select .sd-select .sd-select__trigger .sd-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400;text-align:left}sd-select .sd-select .sd-select__trigger .sd-select__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select .sd-select .sd-select__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease;margin-left:8px}sd-select .sd-select .sd-select__arrow--open{transform:rotate(180deg)}`;
 
 class SdSelect extends BaseDropdownEvent {
     constructor(hostRef) {
@@ -8463,7 +8463,7 @@ class SdSelect extends BaseDropdownEvent {
         }
     };
     render() {
-        return (hAsync("sd-field", { key: '5c638efb68498690a30a855e3a337fac0e6e7810', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, insideLabel: this.insideLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, hAsync("div", { key: 'e14a4f235235fdafa94f645eac0c18091080c8e9', class: {
+        return (hAsync("sd-field", { key: 'b53c365ea3fbc27e7b88a6b9d8c543f316ea26e8', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, insideLabel: this.insideLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, hAsync("div", { key: 'cb672c68bf475f1336b993e3f9576048ca482bfb', class: {
                 'sd-select': true,
                 'sd-select--disabled': this.disabled,
                 'sd-select--error': !!this.error,
@@ -8716,7 +8716,7 @@ class SdSelectDropdown {
     }; }
 }
 
-const sdSelectMultipleCss = () => `sd-select-multiple{display:inline-flex;flex-flow:column nowrap;width:fit-content;height:fit-content}sd-select-multiple *:focus,sd-select-multiple *:focus-visible,sd-select-multiple *:focus-within{outline:none !important}sd-select-multiple .sd-select-multiple{width:100%}sd-select-multiple .sd-select-multiple .sd-select-multiple__trigger{padding:4px 28px 4px 12px;display:flex;width:100%;align-items:center}sd-select-multiple .sd-select-multiple .sd-select-multiple__trigger .sd-select-multiple__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400;text-align:left}sd-select-multiple .sd-select-multiple .sd-select-multiple__trigger .sd-select-multiple__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select-multiple .sd-select-multiple__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease;margin-left:8px}sd-select-multiple .sd-select-multiple__arrow--open{transform:rotate(180deg)}`;
+const sdSelectMultipleCss = () => `sd-select-multiple{display:inline-flex;flex-flow:column nowrap;height:fit-content}sd-select-multiple *:focus,sd-select-multiple *:focus-visible,sd-select-multiple *:focus-within{outline:none !important}sd-select-multiple .sd-select-multiple{width:100%}sd-select-multiple .sd-select-multiple .sd-select-multiple__trigger{padding:4px 28px 4px 12px;display:flex;width:100%;align-items:center}sd-select-multiple .sd-select-multiple .sd-select-multiple__trigger .sd-select-multiple__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400;text-align:left}sd-select-multiple .sd-select-multiple .sd-select-multiple__trigger .sd-select-multiple__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select-multiple .sd-select-multiple__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease;margin-left:8px}sd-select-multiple .sd-select-multiple__arrow--open{transform:rotate(180deg)}`;
 
 class SdSelectMultiple extends BaseDropdownEvent {
     constructor(hostRef) {
@@ -8866,12 +8866,12 @@ class SdSelectMultiple extends BaseDropdownEvent {
         this.handleOptionSelection(option);
     };
     render() {
-        return (hAsync("sd-field", { key: '67a0bebbd4ad8ae405db1c9c1d0b9701a9b904f8', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, hAsync("div", { key: 'aa86839508c103bbe70287877020ec3eb82b7190', class: {
+        return (hAsync("sd-field", { key: '079e5eeb997e23ddcd53fd1285b749e0e853485e', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, hAsync("div", { key: 'c3c536fb2415dec2bb33f2e5e564de67cd118dc4', class: {
                 'sd-select-multiple': true,
                 'sd-select-multiple--open': this.isOpen,
                 'sd-select-multiple--disabled': this.disabled,
                 'sd-select-multiple--error': !!this.error,
-            }, style: { '--select-width': this.width || '200px' }, ref: el => (this.selectRef = el) }, this.renderTrigger(), this.renderDropdown())));
+            }, ref: el => (this.selectRef = el) }, this.renderTrigger(), this.renderDropdown())));
     }
     renderTrigger() {
         const selectedOption = this.getSelectedOption();

package/hydrate/index.mjs

@@ -4428,7 +4428,7 @@ class SdDateRangePicker {
     }; }
 }
 
-const sdFieldCss = () => `.sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:100%}.sd-field *:focus,.sd-field *:focus-visible,.sd-field *:focus-within{outline:none !important}.sd-field:not(.sd-field--disabled):hover .sd-field__control{border:1px solid #0075ff !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}.sd-field.sd-field--disabled{cursor:not-allowed}.sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}.sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#cccccc;color:#888888;cursor:not-allowed !important}.sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#eeeeee;border-color:#cccccc;color:#888888;cursor:not-allowed !important}.sd-field--has-label .sd-field__wrapper .sd-field__label{display:flex;align-items:center;margin-right:12px}.sd-field--has-label .sd-field__wrapper .sd-field__label__required-icon{margin-right:4px}.sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:12px;line-height:20px;color:#333333;white-space:nowrap}.sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip{margin-left:2px}.sd-field--has-label-inside .sd-field__wrapper .sd-field__label{margin-right:0;display:flex;align-items:center;justify-content:center;padding:3px 12px;border:1px solid #cccccc;border-right:none;border-radius:4px 0 0 4px;border-color:#aaaaaa;background-color:#f6f6f6}.sd-field__wrapper{width:var(--field-width, 200px);height:28px;display:flex;align-items:center;flex-flow:row nowrap;position:relative;color:#333333;cursor:pointer;-webkit-user-select:none;user-select:none}.sd-field__wrapper .sd-field__control{position:relative;width:100%;height:100%;display:flex;flex:1;border:1px solid #aaaaaa;border-radius:4px;background:white}.sd-field__wrapper .sd-field__control--label-inside{border-top-left-radius:0px;border-bottom-left-radius:0px}.sd-field--error:not(:hover) .sd-field__wrapper .sd-field__control{border:1px solid #fb4444 !important}.sd-field.sd-field--focus .sd-field__wrapper .sd-field__control,.sd-field.sd-field--hover .sd-field__wrapper .sd-field__control{border:1px solid #0075ff !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}.sd-field .sd-field__error-message{color:#fb4444;font-size:12px;line-height:20px;margin-top:4px}`;
+const sdFieldCss = () => `.sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:100%}.sd-field *:focus,.sd-field *:focus-visible,.sd-field *:focus-within{outline:none !important}.sd-field:not(.sd-field--disabled):hover .sd-field__control{border:1px solid #0075ff !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}.sd-field.sd-field--disabled{cursor:not-allowed}.sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}.sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#cccccc;color:#888888;cursor:not-allowed !important}.sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#eeeeee;border-color:#cccccc;color:#888888;cursor:not-allowed !important}.sd-field--has-label .sd-field__wrapper .sd-field__label{display:flex;align-items:center;margin-right:12px}.sd-field--has-label .sd-field__wrapper .sd-field__label__required-icon{margin-right:4px}.sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:12px;line-height:20px;color:#333333;white-space:nowrap}.sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip{margin-left:2px}.sd-field--has-label-inside .sd-field__wrapper .sd-field__label{margin-right:0;display:flex;align-items:center;justify-content:center;padding:3px 12px;border:1px solid #cccccc;border-right:none;border-radius:4px 0 0 4px;border-color:#aaaaaa;background-color:#f6f6f6}.sd-field__wrapper{width:100%;height:28px;display:flex;align-items:center;flex-flow:row nowrap;position:relative;color:#333333;cursor:pointer;-webkit-user-select:none;user-select:none}.sd-field__wrapper .sd-field__control{position:relative;width:100%;height:100%;display:flex;flex:1;border:1px solid #aaaaaa;border-radius:4px;background:white}.sd-field__wrapper .sd-field__control--label-inside{border-top-left-radius:0px;border-bottom-left-radius:0px}.sd-field--error:not(:hover) .sd-field__wrapper .sd-field__control{border:1px solid #fb4444 !important}.sd-field.sd-field--focus .sd-field__wrapper .sd-field__control,.sd-field.sd-field--hover .sd-field__wrapper .sd-field__control{border:1px solid #0075ff !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}.sd-field .sd-field__error-message{color:#fb4444;font-size:12px;line-height:20px;margin-top:4px}`;
 
 const FORM_PARENT_TAGS = [
     'sd-select',
@@ -8320,7 +8320,7 @@ class SelectKeyboardNavigation {
     }
 }
 
-const sdSelectCss = () => `sd-select{display:inline-flex;flex-flow:column nowrap;width:fit-content;height:fit-content}sd-select *:focus,sd-select *:focus-visible,sd-select *:focus-within{outline:none !important}sd-select .sd-select{width:100%}sd-select .sd-select .sd-select__trigger{padding:4px 28px 4px 12px;display:flex;width:100%;height:100%;align-items:center}sd-select .sd-select .sd-select__trigger .sd-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400;text-align:left}sd-select .sd-select .sd-select__trigger .sd-select__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select .sd-select .sd-select__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease;margin-left:8px}sd-select .sd-select .sd-select__arrow--open{transform:rotate(180deg)}`;
+const sdSelectCss = () => `sd-select{display:inline-flex;flex-flow:column nowrap;height:fit-content}sd-select *:focus,sd-select *:focus-visible,sd-select *:focus-within{outline:none !important}sd-select .sd-select{width:100%}sd-select .sd-select .sd-select__trigger{padding:4px 28px 4px 12px;display:flex;width:100%;height:100%;align-items:center}sd-select .sd-select .sd-select__trigger .sd-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400;text-align:left}sd-select .sd-select .sd-select__trigger .sd-select__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select .sd-select .sd-select__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease;margin-left:8px}sd-select .sd-select .sd-select__arrow--open{transform:rotate(180deg)}`;
 
 class SdSelect extends BaseDropdownEvent {
     constructor(hostRef) {
@@ -8461,7 +8461,7 @@ class SdSelect extends BaseDropdownEvent {
         }
     };
     render() {
-        return (hAsync("sd-field", { key: '5c638efb68498690a30a855e3a337fac0e6e7810', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, insideLabel: this.insideLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, hAsync("div", { key: 'e14a4f235235fdafa94f645eac0c18091080c8e9', class: {
+        return (hAsync("sd-field", { key: 'b53c365ea3fbc27e7b88a6b9d8c543f316ea26e8', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, insideLabel: this.insideLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, hAsync("div", { key: 'cb672c68bf475f1336b993e3f9576048ca482bfb', class: {
                 'sd-select': true,
                 'sd-select--disabled': this.disabled,
                 'sd-select--error': !!this.error,
@@ -8714,7 +8714,7 @@ class SdSelectDropdown {
     }; }
 }
 
-const sdSelectMultipleCss = () => `sd-select-multiple{display:inline-flex;flex-flow:column nowrap;width:fit-content;height:fit-content}sd-select-multiple *:focus,sd-select-multiple *:focus-visible,sd-select-multiple *:focus-within{outline:none !important}sd-select-multiple .sd-select-multiple{width:100%}sd-select-multiple .sd-select-multiple .sd-select-multiple__trigger{padding:4px 28px 4px 12px;display:flex;width:100%;align-items:center}sd-select-multiple .sd-select-multiple .sd-select-multiple__trigger .sd-select-multiple__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400;text-align:left}sd-select-multiple .sd-select-multiple .sd-select-multiple__trigger .sd-select-multiple__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select-multiple .sd-select-multiple__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease;margin-left:8px}sd-select-multiple .sd-select-multiple__arrow--open{transform:rotate(180deg)}`;
+const sdSelectMultipleCss = () => `sd-select-multiple{display:inline-flex;flex-flow:column nowrap;height:fit-content}sd-select-multiple *:focus,sd-select-multiple *:focus-visible,sd-select-multiple *:focus-within{outline:none !important}sd-select-multiple .sd-select-multiple{width:100%}sd-select-multiple .sd-select-multiple .sd-select-multiple__trigger{padding:4px 28px 4px 12px;display:flex;width:100%;align-items:center}sd-select-multiple .sd-select-multiple .sd-select-multiple__trigger .sd-select-multiple__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400;text-align:left}sd-select-multiple .sd-select-multiple .sd-select-multiple__trigger .sd-select-multiple__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select-multiple .sd-select-multiple__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease;margin-left:8px}sd-select-multiple .sd-select-multiple__arrow--open{transform:rotate(180deg)}`;
 
 class SdSelectMultiple extends BaseDropdownEvent {
     constructor(hostRef) {
@@ -8864,12 +8864,12 @@ class SdSelectMultiple extends BaseDropdownEvent {
         this.handleOptionSelection(option);
     };
     render() {
-        return (hAsync("sd-field", { key: '67a0bebbd4ad8ae405db1c9c1d0b9701a9b904f8', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, hAsync("div", { key: 'aa86839508c103bbe70287877020ec3eb82b7190', class: {
+        return (hAsync("sd-field", { key: '079e5eeb997e23ddcd53fd1285b749e0e853485e', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, hAsync("div", { key: 'c3c536fb2415dec2bb33f2e5e564de67cd118dc4', class: {
                 'sd-select-multiple': true,
                 'sd-select-multiple--open': this.isOpen,
                 'sd-select-multiple--disabled': this.disabled,
                 'sd-select-multiple--error': !!this.error,
-            }, style: { '--select-width': this.width || '200px' }, ref: el => (this.selectRef = el) }, this.renderTrigger(), this.renderDropdown())));
+            }, ref: el => (this.selectRef = el) }, this.renderTrigger(), this.renderDropdown())));
     }
     renderTrigger() {
         const selectedOption = this.getSelectedOption();

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@sellmate/design-system",
- "version": "1.0.2",
+ "version": "1.0.3",
  "description": "Sellmate Design System - Web Components Library built with Stencil",
  "keywords": [
   "web-components",
@@ -93,5 +93,5 @@
   "@stencil/vue-output-target": "^0.11.8",
   "nanoid": "^5.1.6"
  },
- "gitHead": "c48450d417635dc2b4e73313b6e13ee006a20145"
+ "gitHead": "264035cb968cb8bb769aa1729cea6e6982ebdc1d"
 }

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

@@ -1 +0,0 @@
-{"file":"p-COJpIimp.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-field/sd-field.scss?tag=sd-field","src/components/sd-field/sd-field.tsx"],"sourcesContent":["@import 'variables';\n\n.sd-field {\n display: inline-flex;\n flex-flow: column nowrap;\n height: fit-content;\n width: 100%;\n\n *:focus,\n *:focus-visible,\n *:focus-within {\n  outline: none !important;\n }\n\n &:not(.sd-field--disabled) {\n  &:hover {\n   .sd-field__control {\n    border: 1px solid $brilliantblue_75 !important;\n    box-shadow: 0px 0px 4px 0px #0071ff66;\n   }\n  }\n }\n\n &.sd-field--disabled {\n  cursor: not-allowed;\n\n  .sd-field__wrapper {\n   cursor: not-allowed !important;\n   .sd-field__label-inside {\n    border-color: $grey_45;\n    color: $grey_65;\n    cursor: not-allowed !important;\n   }\n\n   .sd-field__control {\n    background-color: $grey_20;\n    border-color: $grey_45;\n    color: $grey_65;\n    cursor: not-allowed !important;\n   }\n  }\n }\n\n &--has-label {\n  .sd-field__wrapper {\n   .sd-field__label {\n    display: flex;\n    align-items: center;\n    margin-right: 12px;\n\n    &__required-icon {\n     margin-right: 4px;\n    }\n\n    &__text {\n     font-size: 12px;\n     line-height: 20px;\n     // font-weight: 500;\n     color: $grey_90;\n     white-space: nowrap;\n    }\n\n    &__tooltip {\n     margin-left: 2px;\n    }\n   }\n  }\n }\n\n &--has-label-inside {\n  .sd-field__wrapper {\n   .sd-field__label {\n    margin-right: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 3px 12px;\n    border: 1px solid $grey_45;\n    border-right: none;\n    border-radius: 4px 0 0 4px;\n    border-color: $grey_55;\n    background-color: $grey_10;\n   }\n  }\n }\n\n &__wrapper {\n  width: var(--field-width, 200px);\n  height: 28px;\n  display: flex;\n  align-items: center;\n  flex-flow: row nowrap;\n  position: relative;\n  color: $grey_90;\n  cursor: pointer;\n  -webkit-user-select: none;\n  user-select: none;\n\n  .sd-field__control {\n   position: relative;\n   width: 100%;\n   height: 100%;\n   display: flex;\n   flex: 1;\n   border: 1px solid $grey_55;\n   border-radius: 4px;\n   background: white;\n\n   &--label-inside {\n    border-top-left-radius: 0px;\n    border-bottom-left-radius: 0px;\n   }\n  }\n }\n\n &--error:not(:hover) {\n  .sd-field__wrapper .sd-field__control {\n   border: 1px solid $red_70 !important;\n  }\n }\n\n &.sd-field--focus,\n &.sd-field--hover {\n  .sd-field__wrapper .sd-field__control {\n   border: 1px solid $brilliantblue_75 !important;\n   box-shadow: 0px 0px 4px 0px #0071ff66;\n  }\n }\n\n .sd-field__error-message {\n  color: $red_70;\n  font-size: 12px;\n  line-height: 20px;\n  margin-top: 4px;\n }\n}\n","import { h, Component, Host, Element, Prop, State, Method } from '@stencil/core';\nimport { ValidatableField } from '../sd-form/sd-form';\nimport { Rule } from '../../types/form';\nimport { SdTooltipProps } from '../sd-tooltip/sd-tooltip';\n\nconst FORM_PARENT_TAGS = [\n 'sd-select',\n 'sd-select-multiple',\n 'sd-select-multiple-group',\n 'sd-input',\n 'sd-textarea',\n];\n\ninterface FormHostElement extends HTMLElement {\n value: any;\n error?: boolean;\n errorMsg?: string;\n}\n\n@Component({ tag: 'sd-field', styleUrl: 'sd-field.scss' })\nexport class SdField implements ValidatableField {\n @Element() el!: HTMLElement;\n\n @Prop() name: string = '';\n @Prop() rules?: Rule[] = [];\n\n @Prop({ mutable: true }) error?: boolean = false;\n @Prop({ mutable: true }) disabled?: boolean = false;\n @Prop({ mutable: true }) hovered?: boolean = false;\n @Prop({ mutable: true }) focused?: boolean = false;\n @Prop() status?: 'default' | 'pass' | 'error';\n\n // props - label\n @Prop() label: string = '';\n @Prop() insideLabel: boolean = false;\n @Prop() useLabelRequired: boolean = false;\n @Prop() labelTooltip: string = '';\n @Prop() labelTooltipProps: SdTooltipProps | null = null;\n\n @State() errorMsg: string = '';\n\n private hostElement: FormHostElement | null = null;\n\n get value() {\n  return this.hostElement?.value ?? null;\n }\n\n get fieldStatus() {\n  let status = '';\n\n  if (!!this.disabled) {\n   status = 'disabled';\n   return `sd-field--${status}`;\n  }\n\n  if (!!this.focused) {\n   status = 'focus';\n   return `sd-field--${status}`;\n  }\n\n  if (!!this.hovered) status = 'hover';\n  if (!!this.status) status = this.status;\n  if (!!this.error) status = 'error';\n  return status ? `sd-field--${status}` : '';\n }\n\n componentDidLoad() {\n  this.hostElement = this.findHostElement();\n  this.registerToForm();\n }\n\n disconnectedCallback() {\n  this.unregisterFromForm();\n }\n\n private findHostElement(): FormHostElement | null {\n  for (const tag of FORM_PARENT_TAGS) {\n   const parent = this.el.closest<FormHostElement>(tag);\n   if (parent && 'value' in parent) {\n    return parent;\n   }\n  }\n  return null;\n }\n\n private registerToForm() {\n  // if (!this.rules || this.rules.length === 0) {\n  //  console.warn('[sd-form-field] rules prop is required for sd-form integration');\n  //  return;\n  // }\n\n  const formEl = this.el.closest<HTMLSdFormElement>('sd-form');\n  if (!formEl) return;\n\n  formEl.componentOnReady().then(form => {\n   form.sdRegisterField(this);\n  });\n }\n\n private unregisterFromForm() {\n  if (!this.name) return;\n\n  const formEl = this.el.closest<HTMLSdFormElement>('sd-form');\n  formEl?.componentOnReady().then(form => {\n   form.sdUnregisterField(this.name);\n  });\n }\n\n @Method()\n async sdValidate(): Promise<boolean> {\n  if (!this.rules || this.rules.length === 0) return true;\n\n  for (const rule of this.rules) {\n   const result = rule(this.value ?? '');\n   if (result !== true) {\n    this.setError(true, result);\n    return false;\n   }\n  }\n  this.setError(false, '');\n  return true;\n }\n\n @Method()\n async sdReset() {\n  if (this.hostElement) {\n   this.hostElement.value = null;\n  }\n  this.setError(false, '');\n }\n\n @Method()\n async sdResetValidation() {\n  this.setError(false, '');\n }\n\n @Method()\n async sdFocus() {\n  this.hostElement?.focus?.();\n  this.hostElement?.scrollIntoView({ behavior: 'smooth', block: 'center' });\n }\n\n private setError(error: boolean, errorMsg: string) {\n  this.errorMsg = errorMsg;\n\n  if (this.hostElement) {\n   this.hostElement.error = error;\n  }\n }\n\n render() {\n  return (\n   <Host\n    class={{\n     'sd-field': true,\n     'sd-field--has-label': !!this.label,\n     'sd-field--has-label-inside': !!this.label && this.insideLabel,\n     [this.fieldStatus]: !!this.fieldStatus,\n    }}\n   >\n    <div class=\"sd-field__wrapper\">\n     {this.renderLabel(this.label)}\n     <div\n      class={{\n       'sd-field__control': true,\n       'sd-field__control--label-inside ': !!this.label && this.insideLabel,\n      }}\n     >\n      <slot></slot>\n     </div>\n    </div>\n    {this.errorMsg && <div class=\"sd-field__error-message\">{this.errorMsg}</div>}\n   </Host>\n  );\n }\n\n private renderLabel(label?: string) {\n  if (!label) return null;\n\n  return (\n   <label class={{ 'sd-field__label': true, 'sd-field__label-inside': this.insideLabel }}>\n    {this.useLabelRequired && (\n     <sd-icon\n      name=\"star\"\n      size=\"10\"\n      color=\"brilliantblue_75\"\n      class=\"sd-field__label__required-icon\"\n     ></sd-icon>\n    )}\n    <div class=\"sd-field__label__text\">{label}</div>\n    {this.labelTooltip && (\n     <sd-tooltip class=\"sd-field__label__tooltip\" {...this.labelTooltipProps}>\n      <div slot=\"content\">{this.labelTooltip}</div>\n     </sd-tooltip>\n    )}\n   </label>\n  );\n }\n}\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"p-DYLnDz12.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/sd-select/sd-select.scss?tag=sd-select","src/components/sd-select/sd-select.tsx"],"sourcesContent":["@import 'variables';\n@import 'extend';\n\nsd-select {\n display: inline-flex;\n flex-flow: column nowrap;\n width: fit-content;\n height: fit-content;\n\n *:focus,\n *:focus-visible,\n *:focus-within {\n  outline: none !important;\n }\n\n .sd-select {\n  width: 100%;\n\n  .sd-select__trigger {\n   padding: 4px 28px 4px 12px;\n   display: flex;\n   width: 100%;\n   height: 100%;\n   align-items: center;\n\n   .sd-select__value {\n    flex: 1;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    line-height: 20px;\n    font-size: 12px;\n    font-weight: 400;\n    text-align: left;\n   }\n\n   .sd-select__clear {\n    margin: 0 4px;\n    width: 8px;\n    height: 8px;\n    background-color: transparent;\n    outline: none;\n    border: none;\n   }\n  }\n\n  .sd-select__arrow {\n   position: absolute;\n   top: 8px;\n   right: 8px;\n   width: 12px;\n   height: 12px;\n   color: $grey_65;\n   transition: transform 0.3s ease;\n   margin-left: 8px;\n\n   &--open {\n    transform: rotate(180deg);\n   }\n  }\n }\n}\n","import {\n Component,\n Event,\n EventEmitter,\n Prop,\n State,\n h,\n Element,\n Watch,\n Method,\n} from '@stencil/core';\nimport { BaseDropdownEvent } from '../../utils/base-dropdown-event';\nimport { SelectKeyboardNavigation } from '../../utils/select-keyboard-navigation';\nimport { SdTooltipProps } from '../sd-tooltip/sd-tooltip';\nimport { Rule } from '../../components';\n\nexport interface SelectOption {\n value: string | number;\n label: string;\n disabled?: boolean;\n}\n\nexport type SelectGroupOptionType = 'group' | 'subgroup' | 'item' | 'all';\n\nexport interface SelectOptionGroup extends SelectOption {\n type: SelectGroupOptionType;\n parent?: string;\n}\n\nexport interface SelectStyleProps {\n containerStyle?: { [key: string]: string };\n triggerStyle?: { [key: string]: string };\n dropdownStyle?: { [key: string]: string };\n optionStyle?: { [key: string]: string };\n labelStyle?: { [key: string]: string };\n}\n\nexport interface SelectEvents {\n sdUpdate: {\n  value: string | number | null;\n  option: SelectOption | null;\n };\n dropDownShow: { isOpen: boolean };\n}\n\nexport interface SelectMultipleEvents extends Pick<SelectEvents, 'dropDownShow' | 'dropDownShow'> {\n sdUpdate: SelectOption[] | null;\n}\n\n@Component({\n tag: 'sd-select',\n styleUrl: 'sd-select.scss',\n})\nexport class SdSelect extends BaseDropdownEvent {\n @Element() el!: HTMLElement;\n\n // props\n @Prop({ mutable: true }) value: string | number | null = null;\n @Prop({ mutable: true }) options: SelectOption[] = [];\n @Prop() placeholder: string = '선택';\n @Prop() optionPlaceholder: string = '옵션이 없습니다.';\n @Prop() width: string = '200px';\n @Prop() dropdownHeight: string = '260px';\n @Prop() autoFocus: boolean = false;\n @Prop() disabled: boolean = false;\n @Prop() clearable: boolean = false;\n @Prop() searchable: boolean = false;\n\n // props - label\n @Prop() label: string = '';\n @Prop() insideLabel: boolean = false;\n @Prop() useLabelRequired: boolean = false;\n @Prop() labelTooltip: string = '';\n @Prop() labelTooltipProps: SdTooltipProps | null = null;\n\n // props - form\n @Prop() name?: string;\n @Prop() rules?: Rule[] = [];\n @Prop() error?: boolean = false;\n\n // props - custom slots\n @Prop() optionRenderer?: (option: SelectOption, index: number, isSelected: boolean) => any;\n\n // states\n @State() isOpen: boolean = false;\n @State() itemIndex: number = -1;\n @State() isScrolled: boolean = false;\n\n // events\n @Event({ eventName: 'sdUpdate' }) update?: EventEmitter<SelectEvents['sdUpdate']>;\n @Event({ eventName: 'sdDropDownShow' }) dropDownShow?: EventEmitter<SelectEvents['dropDownShow']>;\n\n private selectRef?: HTMLElement;\n private triggerRef?: HTMLElement;\n private formField?: HTMLSdFieldElement;\n private filteredOptions = this.options;\n private dropDownWidth: string = this.width;\n\n @Method()\n async sdOpen() {\n  this.isOpen = true;\n }\n\n @Method()\n async sdValidate() {\n  this.formField?.sdValidate();\n }\n\n @Method()\n async sdReset() {\n  this.formField?.sdReset();\n }\n\n @Method()\n async sdResetValidate() {\n  this.formField?.sdResetValidation();\n }\n\n @Method()\n async sdFocus() {\n  this.formField?.sdFocus();\n }\n\n @Watch('value')\n async valueChanged() {\n  const selectedOption = this.getSelectedOption();\n  this.update?.emit({ value: selectedOption?.value || null, option: selectedOption || null });\n }\n\n @Watch('isOpen')\n async isOpenChanged() {\n  // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지\n  this.onDropdownToggle(this.isOpen);\n  this.dropDownShow?.emit({ isOpen: this.isOpen });\n\n  if (this.isOpen === false) {\n   await this.formField?.sdValidate();\n  }\n }\n\n componentWillLoad() {\n  this.initializeEvent(); // global dropdown Manager에 등록 + 이벤트 핸들러 초기화\n }\n\n componentDidLoad() {\n  if (this.autoFocus) {\n   this.selectRef?.focus();\n  }\n }\n\n // render 이후 label을 제외한 trigger의 너비를 기준으로 dropdown 너비 설정\n componentDidRender() {\n  const trigger = this.triggerRef;\n  const rect = trigger?.getBoundingClientRect();\n  this.dropDownWidth = rect?.width ? `${rect.width}px` : this.width;\n }\n\n disconnectedCallback() {\n  this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리\n }\n\n protected handleDocumentClick(event: Event): void {\n  if (!this.selectRef?.contains(event.target as Node)) {\n   this.isOpen = false;\n  }\n }\n\n protected handleDocumentKeydown(keyboardEvent: KeyboardEvent): void {\n  keyboardEvent.stopPropagation();\n  const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];\n  if (!targetKey.includes(keyboardEvent.key)) return;\n\n  keyboardEvent.preventDefault();\n  switch (keyboardEvent.key) {\n   case 'ArrowDown':\n   case 'ArrowUp':\n    const keyboardNavigation = new SelectKeyboardNavigation(this.searchable, this.filteredOptions);\n    const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);\n    this.itemIndex = nextIndex;\n    break;\n   case 'Enter':\n    const selectedOption = this.filteredOptions[this.itemIndex];\n    if (selectedOption && !selectedOption.disabled) {\n     this.value = selectedOption.value;\n     this.isOpen = false;\n    }\n    break;\n   case 'Escape':\n    this.isOpen = false;\n    break;\n  }\n }\n\n private getSelectedOption(): SelectOption | undefined {\n  return this.options.find(option => option.value === this.value);\n }\n\n closeDropdown() {\n  this.isOpen = false;\n }\n\n handleTriggerClick = (event: Event) => {\n  event.stopPropagation();\n\n  if (!this.disabled) {\n   this.isOpen = !this.isOpen;\n   this.dropDownShow?.emit({ isOpen: this.isOpen });\n  }\n };\n\n handleOptionClick = (detail: { option: SelectOption; event: Event }) => {\n  const { option, event } = detail;\n  event.stopPropagation();\n\n  if (!option.disabled) {\n   this.value = option.value;\n   this.isOpen = false;\n  }\n };\n\n render() {\n  return (\n   <sd-field\n    label={this.label}\n    name={this.name}\n    rules={this.rules}\n    error={this.error}\n    disabled={this.disabled}\n    useLabelRequired={this.useLabelRequired}\n    insideLabel={this.insideLabel}\n    labelTooltip={this.labelTooltip}\n    labelTooltipProps={this.labelTooltipProps}\n    ref={el => (this.formField = el)}\n    style={{ '--field-width': this.width || '200px' }}\n   >\n    <div\n     class={{\n      'sd-select': true,\n      'sd-select--disabled': this.disabled,\n      'sd-select--error': !!this.error,\n      'sd-select--label': !!this.label,\n     }}\n     ref={el => (this.selectRef = el)}\n    >\n     {this.renderTrigger()}\n     {this.renderDropdown()}\n    </div>\n   </sd-field>\n  );\n }\n\n private renderTrigger() {\n  const selectedOption = this.getSelectedOption();\n  return (\n   <div\n    class=\"sd-select__trigger\"\n    tabindex={this.disabled ? -1 : 0}\n    onClick={this.handleTriggerClick}\n    ref={el => (this.triggerRef = el)}\n   >\n    <span class=\"sd-select__value\">{selectedOption ? selectedOption.label : this.placeholder}</span>\n    {this.clearable && selectedOption && !this.disabled && (\n     <sd-icon\n      key=\"clear-icon\"\n      name=\"close\"\n      size={10}\n      color=\"#888\"\n      class=\"sd-select__clear\"\n      onClick={async event => {\n       event.stopPropagation();\n       this.value = null;\n       await this.formField?.sdValidate();\n      }}\n     ></sd-icon>\n    )}\n\n    <sd-icon\n     key=\"arrow-icon\"\n     name=\"arrowDown\"\n     color=\"#888\"\n     class={{ 'sd-select__arrow': true, 'sd-select__arrow--open': this.isOpen }}\n    ></sd-icon>\n   </div>\n  );\n }\n\n private renderDropdown() {\n  if (this.isOpen === false) return null;\n\n  const parentRef = (this.selectRef?.querySelector('.sd-select__trigger') ||\n   this.selectRef) as HTMLElement;\n\n  return (\n   <sd-portal open={this.isOpen} parentRef={parentRef} onSdClose={this.closeDropdown}>\n    <sd-select-dropdown\n     value={this.value}\n     options={this.options}\n     itemIndex={this.itemIndex}\n     width={this.dropDownWidth}\n     dropdownHeight={this.dropdownHeight}\n     searchable={this.searchable}\n     optionPlaceholder={this.optionPlaceholder}\n     onSdOptionClick={({ detail }) => this.handleOptionClick(detail)}\n     onSdOptionFiltered={({ detail }) => (this.filteredOptions = detail)}\n    ></sd-select-dropdown>\n   </sd-portal>\n  );\n }\n}\n"],"version":3}

package/dist/design-system/p-694c9cc9.entry.js

@@ -1,2 +0,0 @@
-import{r as e,a as t,h as i,H as s,c as d}from"./p-C3qNZ7Qh.js";const a=()=>`.sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:100%}.sd-field *:focus,.sd-field *:focus-visible,.sd-field *:focus-within{outline:none !important}.sd-field:not(.sd-field--disabled):hover .sd-field__control{border:1px solid #0075ff !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}.sd-field.sd-field--disabled{cursor:not-allowed}.sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}.sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#cccccc;color:#888888;cursor:not-allowed !important}.sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#eeeeee;border-color:#cccccc;color:#888888;cursor:not-allowed !important}.sd-field--has-label .sd-field__wrapper .sd-field__label{display:flex;align-items:center;margin-right:12px}.sd-field--has-label .sd-field__wrapper .sd-field__label__required-icon{margin-right:4px}.sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:12px;line-height:20px;color:#333333;white-space:nowrap}.sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip{margin-left:2px}.sd-field--has-label-inside .sd-field__wrapper .sd-field__label{margin-right:0;display:flex;align-items:center;justify-content:center;padding:3px 12px;border:1px solid #cccccc;border-right:none;border-radius:4px 0 0 4px;border-color:#aaaaaa;background-color:#f6f6f6}.sd-field__wrapper{width:var(--field-width, 200px);height:28px;display:flex;align-items:center;flex-flow:row nowrap;position:relative;color:#333333;cursor:pointer;-webkit-user-select:none;user-select:none}.sd-field__wrapper .sd-field__control{position:relative;width:100%;height:100%;display:flex;flex:1;border:1px solid #aaaaaa;border-radius:4px;background:white}.sd-field__wrapper .sd-field__control--label-inside{border-top-left-radius:0px;border-bottom-left-radius:0px}.sd-field--error:not(:hover) .sd-field__wrapper .sd-field__control{border:1px solid #fb4444 !important}.sd-field.sd-field--focus .sd-field__wrapper .sd-field__control,.sd-field.sd-field--hover .sd-field__wrapper .sd-field__control{border:1px solid #0075ff !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}.sd-field .sd-field__error-message{color:#fb4444;font-size:12px;line-height:20px;margin-top:4px}`;const r=["sd-select","sd-select-multiple","sd-select-multiple-group","sd-input","sd-textarea"];const n=class{constructor(t){e(this,t)}get el(){return t(this)}name="";rules=[];error=false;disabled=false;hovered=false;focused=false;status;label="";insideLabel=false;useLabelRequired=false;labelTooltip="";labelTooltipProps=null;errorMsg="";hostElement=null;get value(){return this.hostElement?.value??null}get fieldStatus(){let e="";if(!!this.disabled){e="disabled";return`sd-field--${e}`}if(!!this.focused){e="focus";return`sd-field--${e}`}if(!!this.hovered)e="hover";if(!!this.status)e=this.status;if(!!this.error)e="error";return e?`sd-field--${e}`:""}componentDidLoad(){this.hostElement=this.findHostElement();this.registerToForm()}disconnectedCallback(){this.unregisterFromForm()}findHostElement(){for(const e of r){const t=this.el.closest(e);if(t&&"value"in t){return t}}return null}registerToForm(){const e=this.el.closest("sd-form");if(!e)return;e.componentOnReady().then((e=>{e.sdRegisterField(this)}))}unregisterFromForm(){if(!this.name)return;const e=this.el.closest("sd-form");e?.componentOnReady().then((e=>{e.sdUnregisterField(this.name)}))}async sdValidate(){if(!this.rules||this.rules.length===0)return true;for(const e of this.rules){const t=e(this.value??"");if(t!==true){this.setError(true,t);return false}}this.setError(false,"");return true}async sdReset(){if(this.hostElement){this.hostElement.value=null}this.setError(false,"")}async sdResetValidation(){this.setError(false,"")}async sdFocus(){this.hostElement?.focus?.();this.hostElement?.scrollIntoView({behavior:"smooth",block:"center"})}setError(e,t){this.errorMsg=t;if(this.hostElement){this.hostElement.error=e}}render(){return i(s,{key:"8d4368c9802a01a58872ae1467d6183bb6a1d1d3",class:{"sd-field":true,"sd-field--has-label":!!this.label,"sd-field--has-label-inside":!!this.label&&this.insideLabel,[this.fieldStatus]:!!this.fieldStatus}},i("div",{key:"86a8ae1ee6f2b56bbff2a0dda2f4c87e8cec74bd",class:"sd-field__wrapper"},this.renderLabel(this.label),i("div",{key:"c32b068f6459d326af29e2666a3ff17882c02c11",class:{"sd-field__control":true,"sd-field__control--label-inside ":!!this.label&&this.insideLabel}},i("slot",{key:"a636756df1b20b4fa0b785cba57e96a7695ff103"}))),this.errorMsg&&i("div",{key:"da410dd97d83a910d6819410878349144ed1af0e",class:"sd-field__error-message"},this.errorMsg))}renderLabel(e){if(!e)return null;return i("label",{class:{"sd-field__label":true,"sd-field__label-inside":this.insideLabel}},this.useLabelRequired&&i("sd-icon",{name:"star",size:"10",color:"brilliantblue_75",class:"sd-field__label__required-icon"}),i("div",{class:"sd-field__label__text"},e),this.labelTooltip&&i("sd-tooltip",{class:"sd-field__label__tooltip",...this.labelTooltipProps},i("div",{slot:"content"},this.labelTooltip)))}};n.style=a();var l;var o;function p(){if(o)return l;o=1;let e="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";let t=(e,t=21)=>(i=t)=>{let s="";let d=i|0;while(d--){s+=e[Math.random()*e.length|0]}return s};let i=(t=21)=>{let i="";let s=t|0;while(s--){i+=e[Math.random()*64|0]}return i};l={nanoid:i,customAlphabet:t};return l}var c=p();const h=()=>`sd-icon{display:inline-block;line-height:0}sd-icon .sd-icon--rotate-90{transform:rotate(90deg)}sd-icon .sd-icon--rotate-180{transform:rotate(180deg)}sd-icon .sd-icon--rotate-270{transform:rotate(270deg)}.sd-date-picker{width:100%;display:inline-block}.sd-date-picker .sd-date-picker--disabled .date-icon{cursor:not-allowed !important;color:#888888 !important}.sd-date-picker .sd-date-picker__input{text-align:center !important}.sd-date-picker__menu{width:304px;box-sizing:border-box;border-radius:8px;padding:24px 19px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);background:white}.sd-date-picker__menu .sd-date-picker__header{display:flex;flex-flow:row nowrap;align-items:center;gap:20px;font-size:14px;padding:0 5px;height:24px;line-height:24px}.sd-date-picker__menu .sd-date-picker__header .year-nav,.sd-date-picker__menu .sd-date-picker__header .month-nav{display:flex;flex-flow:row nowrap;align-items:center;gap:12px}.sd-date-picker__menu .sd-date-picker__header .year-nav button,.sd-date-picker__menu .sd-date-picker__header .month-nav button{background:none;border:none;cursor:pointer;margin:0;padding:0}.sd-date-picker__menu .sd-date-picker__header .year-nav__current{width:40px;text-align:center}.sd-date-picker__menu .sd-date-picker__header .month-nav__current{width:100px;text-align:center}.sd-date-picker__menu .sd-date-picker__days{margin-top:8px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:10px;padding:0 5px}.sd-date-picker__menu .sd-date-picker__days .day{width:28px;height:20px;font-size:12px;line-height:20px;text-align:center;color:#888888}.sd-date-picker__menu .sd-date-picker__body{margin-top:12px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr))}sd-date-range-picker{width:fit-content;display:inline-flex}sd-date-range-picker .sd-date-range-picker--disabled .date-icon{cursor:not-allowed !important;color:#888888 !important}sd-date-range-picker .sd-date-range-picker--disabled .sd-input__native{color:#888888 !important}sd-date-range-picker .sd-field .sd-field__control{min-width:210px}sd-date-range-picker .sd-field .sd-input__native{margin-left:17px !important}.sd-date-range-picker__menu{width:609px;box-sizing:border-box;border-radius:8px;padding:24px 19px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);background:white}.sd-date-range-picker__menu .sd-date-range-picker__header{margin-bottom:16px;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center}.sd-date-range-picker__menu .sd-date-range-picker__header .header-label{margin:0 12px;width:40px;text-align:center;font-size:14px;line-height:24px}.sd-date-range-picker__menu .sd-date-range-picker__body{display:flex;flex-flow:row nowrap;align-items:stretch;gap:19px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container{width:266px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header{width:100%;height:24px;line-height:24px;font-size:14px;text-align:center;position:relative;padding:0 5px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button{position:absolute;top:50%;transform:translateY(-50%)}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button.header-button-prev{left:5px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button.header-button-next{right:5px;left:auto}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-days{padding:0 5px;margin-top:8px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:10px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-days .day{width:28px;height:20px;font-size:12px;line-height:20px;text-align:center;color:#888888}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-body{margin-top:12px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr))}.sd-date-range-picker__menu .sd-date-range-picker__body .separator{width:1px;background-color:#d8d8d8}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}input:autofill,input:autofill:hover,input:autofill:focus,input:autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}sd-input{display:inline-flex}sd-input .sd-input__content{width:100%;height:100%;display:flex;flex-flow:row nowrap;align-items:center;color:#333333;font-size:12px;line-height:20px;padding:0 8px}sd-input .sd-input__content .sd-input__native{width:100%;height:100%;border:none;outline:none;background:transparent}sd-input .sd-input__content .sd-input__native[disabled]{cursor:not-allowed;color:#888888}sd-input .sd-input__content .sd-input__native::placeholder{color:#aaaaaa}`;const f=class{constructor(t){e(this,t);this.input=d(this,"sdUpdate");this.focus=d(this,"sdFocus");this.blur=d(this,"sdBlur")}get host(){return t(this)}value=null;type="text";insideLabel=false;placeholder="입력해 주세요.";disabled=false;clearable=false;width;barcode=false;rules=[];autoFocus=false;status;inputClass="";readonly=false;error=false;focused=false;hovered=false;label="";useLabelRequired=false;labelTooltip="";labelTooltipProps=null;inputStyle={};internalValue=null;nativeEl=undefined;formField;name=c.nanoid();input;focus;blur;valueChanged(e){this.internalValue=e}internalValueChanged(e){if(e!==this.value){this.value=e;this.input?.emit(this.value)}}async sdGetNativeElement(){return this.nativeEl||null}async sdValidate(){this.formField?.sdValidate()}async sdReset(){this.formField?.sdReset()}async sdResetValidate(){this.formField?.sdResetValidation()}async sdFocus(){this.formField?.sdFocus()}componentWillLoad(){if(this.value){this.internalValue=this.value}}componentDidLoad(){if(this.autoFocus){this.nativeEl?.focus()}}handleInput=e=>{const t=e.target;this.internalValue=t.value};handleFocus=async(e,t)=>{this.focused=e==="focus";if(e==="blur"){if(this.rules&&this.rules.length>0){await(this.formField?.sdValidate())}this.blur?.emit(t)}else{this.focus?.emit(t)}};render(){const e=this.width?{"--input-width":typeof this.width==="number"?`${this.width}px`:this.width}:{};return i("sd-field",{key:"1ea8809ec8f05e9713b26022014400811f3c4da2",name:this.name,label:this.label,insideLabel:this.insideLabel,rules:this.rules,error:this.error,disabled:this.disabled,focused:this.focused,hovered:this.hovered,status:this.status,useLabelRequired:this.useLabelRequired,labelTooltip:this.labelTooltip,labelTooltipProps:this.labelTooltipProps,ref:e=>this.formField=e,style:e,onMouseEnter:()=>this.hovered=true,onMouseLeave:()=>this.hovered=false},i("label",{key:"f0f266bf75953342785b8296e40f7ca86018a75d",class:"sd-input__content",style:{width:"100%"}},i("slot",{key:"2fa7295a91e35292d794879432195e9cb76bce1a",name:"prefix"}),i("input",{key:"5529de166855c571c385fb479f6dbfec148a6771",name:this.name,ref:e=>this.nativeEl=e,class:`sd-input__native ${this.inputClass}`,type:this.type,value:this.internalValue||"",placeholder:this.placeholder,disabled:this.disabled,readonly:this.readonly,autofocus:this.autoFocus,onInput:this.handleInput,onFocus:e=>this.handleFocus("focus",e),onBlur:e=>this.handleFocus("blur",e),style:this.inputStyle}),i("slot",{key:"5ae1f154e1ac870c8629ebf4b2007274d591018d",name:"suffix"}),this.clearable&&this.internalValue&&i("sd-icon",{key:"57f515d933010326bd7f64ef74beb37df3fa7ba7",name:"close",color:"grey_65",size:"16",class:"sd-input__clear-icon",onClick:async()=>{this.internalValue="";await(this.formField?.sdValidate())}})))}static get watchers(){return{value:["valueChanged"],internalValue:["internalValueChanged"]}}};f.style=h();const u=class{constructor(t){e(this,t);this.close=d(this,"sdClose")}get hostEl(){return t(this)}to="body";parentRef=null;offset=[0,4];zIndex=9999;open=false;close;container;wrapper;rafId;isInsideClick=false;resizeObserver;mutationObserver;componentDidLoad(){this.container=this.resolveContainer();this.createWrapper();this.moveSlotContent();this.updatePosition();this.observeParent()}componentDidRender(){if(!this.wrapper)return;this.wrapper.style.display=this.open?"block":"none";if(this.open)this.updatePosition()}disconnectedCallback(){this.unobserveParent();this.wrapper?.remove()}resolveContainer(){const e=typeof this.to==="string"?document.querySelector(this.to):this.to;return e instanceof HTMLElement?e:document.body}createWrapper(){this.wrapper=document.createElement("div");Object.assign(this.wrapper.style,{position:"absolute",zIndex:this.zIndex.toString(),transition:"opacity 0.4s"});this.container.appendChild(this.wrapper)}moveSlotContent(){if(!this.wrapper)return;const e=Array.from(this.hostEl.childNodes).filter((e=>e.nodeType!==Node.COMMENT_NODE));e.forEach((e=>this.wrapper.appendChild(e)))}updatePosition(){if(this.rafId)cancelAnimationFrame(this.rafId);this.rafId=requestAnimationFrame((()=>{if(!this.parentRef||!this.wrapper)return;const e=this.parentRef.getBoundingClientRect();const t=this.wrapper.getBoundingClientRect();const i={width:window.innerWidth,height:window.innerHeight};let s=e.bottom+window.scrollY+this.offset[1];let d=e.left+window.scrollX+this.offset[0];if(e.bottom+t.height+this.offset[1]>i.height){s=e.top+window.scrollY-t.height-this.offset[1]}if(s<window.scrollY){s=e.bottom+window.scrollY+this.offset[1]}if(e.left+t.width+this.offset[0]>i.width){d=e.right+window.scrollX-t.width-this.offset[0]}if(d<0){d=this.offset[0]}this.wrapper.style.top=`${s}px`;this.wrapper.style.left=`${d}px`}))}observeParent(){if(!this.parentRef)return;this.resizeObserver=new ResizeObserver((()=>this.updatePosition()));this.resizeObserver.observe(this.parentRef);this.mutationObserver=new MutationObserver((()=>this.updatePosition()));this.mutationObserver.observe(document.body,{childList:true,subtree:true})}unobserveParent(){this.resizeObserver?.disconnect();this.mutationObserver?.disconnect()}handleMouseDown(e){this.isInsideClick=!!(this.wrapper&&this.wrapper.contains(e.target))}handleWindowClick(e){if(this.isInsideClick){this.isInsideClick=false;return}if(this.wrapper?.contains(e.target))return;this.close.emit()}render(){return i("slot",{key:"6181685d61b1e95116316b72208702597bba2b8e"})}};export{n as sd_field,f as sd_input,u as sd_portal};
-//# sourceMappingURL=p-694c9cc9.entry.js.map

package/dist/design-system/p-9a68ab88.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as s,H as t,c as i,a}from"./p-C3qNZ7Qh.js";import{r as o}from"./p-DcGvp3RM.js";import{B as n,S as r}from"./p-BShXSO5x.js";const l=()=>`sd-loading-spinner{display:block}sd-loading-spinner .sd-loading-spinner{animation:sd-loading-spin 2s linear infinite;transform-origin:center center}sd-loading-spinner .sd-loading-spinner .path{animation:sd-loading-spin-path 1.5s ease-in-out infinite}@keyframes sd-loading-spin{0%{transform:rotate3d(0, 0, 1, 0deg)}25%{transform:rotate3d(0, 0, 1, 90deg)}50%{transform:rotate3d(0, 0, 1, 180deg)}75%{transform:rotate3d(0, 0, 1, 270deg)}100%{transform:rotate3d(0, 0, 1, 359deg)}}@keyframes sd-loading-spin-path{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35px}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124px}}`;const d=class{constructor(s){e(this,s)}color="#0075ff";get resolvedColor(){return o(this.color)}render(){return s(t,{key:"90e8d5b70e299835006b59d8240e0e0a526c14f7"},s("svg",{key:"22c2e6c4a638440fd97abc82ebcba99a26a6e13c",class:"sd-loading-spinner",width:"72px",height:"72px",viewBox:"25 25 50 50",style:{color:this.resolvedColor}},s("circle",{key:"41470486ab808e13a8d9fa0815b1a26436d6ca79",class:"path",cx:"50",cy:"50",r:"20",fill:"none",stroke:"currentColor","stroke-width":"5","stroke-miterlimit":"10"})))}};d.style=l();const h=()=>`sd-select{display:inline-flex;flex-flow:column nowrap;width:fit-content;height:fit-content}sd-select *:focus,sd-select *:focus-visible,sd-select *:focus-within{outline:none !important}sd-select .sd-select{width:100%}sd-select .sd-select .sd-select__trigger{padding:4px 28px 4px 12px;display:flex;width:100%;height:100%;align-items:center}sd-select .sd-select .sd-select__trigger .sd-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400;text-align:left}sd-select .sd-select .sd-select__trigger .sd-select__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select .sd-select .sd-select__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease;margin-left:8px}sd-select .sd-select .sd-select__arrow--open{transform:rotate(180deg)}`;const c=class extends n{constructor(s){super();e(this,s);this.update=i(this,"sdUpdate");this.dropDownShow=i(this,"sdDropDownShow")}get el(){return a(this)}value=null;options=[];placeholder="선택";optionPlaceholder="옵션이 없습니다.";width="200px";dropdownHeight="260px";autoFocus=false;disabled=false;clearable=false;searchable=false;label="";insideLabel=false;useLabelRequired=false;labelTooltip="";labelTooltipProps=null;name;rules=[];error=false;optionRenderer;isOpen=false;itemIndex=-1;isScrolled=false;update;dropDownShow;selectRef;triggerRef;formField;filteredOptions=this.options;dropDownWidth=this.width;async sdOpen(){this.isOpen=true}async sdValidate(){this.formField?.sdValidate()}async sdReset(){this.formField?.sdReset()}async sdResetValidate(){this.formField?.sdResetValidation()}async sdFocus(){this.formField?.sdFocus()}async valueChanged(){const e=this.getSelectedOption();this.update?.emit({value:e?.value||null,option:e||null})}async isOpenChanged(){this.onDropdownToggle(this.isOpen);this.dropDownShow?.emit({isOpen:this.isOpen});if(this.isOpen===false){await(this.formField?.sdValidate())}}componentWillLoad(){this.initializeEvent()}componentDidLoad(){if(this.autoFocus){this.selectRef?.focus()}}componentDidRender(){const e=this.triggerRef;const s=e?.getBoundingClientRect();this.dropDownWidth=s?.width?`${s.width}px`:this.width}disconnectedCallback(){this.cleanupEvent()}handleDocumentClick(e){if(!this.selectRef?.contains(e.target)){this.isOpen=false}}handleDocumentKeydown(e){e.stopPropagation();const s=["ArrowDown","ArrowUp","Enter","Escape"];if(!s.includes(e.key))return;e.preventDefault();switch(e.key){case"ArrowDown":case"ArrowUp":const s=new r(this.searchable,this.filteredOptions);const t=s.getNextIndex(this.itemIndex,e.key);this.itemIndex=t;break;case"Enter":const i=this.filteredOptions[this.itemIndex];if(i&&!i.disabled){this.value=i.value;this.isOpen=false}break;case"Escape":this.isOpen=false;break}}getSelectedOption(){return this.options.find((e=>e.value===this.value))}closeDropdown(){this.isOpen=false}handleTriggerClick=e=>{e.stopPropagation();if(!this.disabled){this.isOpen=!this.isOpen;this.dropDownShow?.emit({isOpen:this.isOpen})}};handleOptionClick=e=>{const{option:s,event:t}=e;t.stopPropagation();if(!s.disabled){this.value=s.value;this.isOpen=false}};render(){return s("sd-field",{key:"5c638efb68498690a30a855e3a337fac0e6e7810",label:this.label,name:this.name,rules:this.rules,error:this.error,disabled:this.disabled,useLabelRequired:this.useLabelRequired,insideLabel:this.insideLabel,labelTooltip:this.labelTooltip,labelTooltipProps:this.labelTooltipProps,ref:e=>this.formField=e,style:{"--field-width":this.width||"200px"}},s("div",{key:"e14a4f235235fdafa94f645eac0c18091080c8e9",class:{"sd-select":true,"sd-select--disabled":this.disabled,"sd-select--error":!!this.error,"sd-select--label":!!this.label},ref:e=>this.selectRef=e},this.renderTrigger(),this.renderDropdown()))}renderTrigger(){const e=this.getSelectedOption();return s("div",{class:"sd-select__trigger",tabindex:this.disabled?-1:0,onClick:this.handleTriggerClick,ref:e=>this.triggerRef=e},s("span",{class:"sd-select__value"},e?e.label:this.placeholder),this.clearable&&e&&!this.disabled&&s("sd-icon",{key:"clear-icon",name:"close",size:10,color:"#888",class:"sd-select__clear",onClick:async e=>{e.stopPropagation();this.value=null;await(this.formField?.sdValidate())}}),s("sd-icon",{key:"arrow-icon",name:"arrowDown",color:"#888",class:{"sd-select__arrow":true,"sd-select__arrow--open":this.isOpen}}))}renderDropdown(){if(this.isOpen===false)return null;const e=this.selectRef?.querySelector(".sd-select__trigger")||this.selectRef;return s("sd-portal",{open:this.isOpen,parentRef:e,onSdClose:this.closeDropdown},s("sd-select-dropdown",{value:this.value,options:this.options,itemIndex:this.itemIndex,width:this.dropDownWidth,dropdownHeight:this.dropdownHeight,searchable:this.searchable,optionPlaceholder:this.optionPlaceholder,onSdOptionClick:({detail:e})=>this.handleOptionClick(e),onSdOptionFiltered:({detail:e})=>this.filteredOptions=e}))}static get watchers(){return{value:["valueChanged"],isOpen:["isOpenChanged"]}}};c.style=h();export{d as sd_loading_spinner,c as sd_select};
-//# sourceMappingURL=p-9a68ab88.entry.js.map

package/dist/design-system/p-b521ce06.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as t,a as s,h as i}from"./p-C3qNZ7Qh.js";import{B as l,S as o}from"./p-BShXSO5x.js";const n=()=>`sd-select-multiple{display:inline-flex;flex-flow:column nowrap;width:fit-content;height:fit-content}sd-select-multiple *:focus,sd-select-multiple *:focus-visible,sd-select-multiple *:focus-within{outline:none !important}sd-select-multiple .sd-select-multiple{width:100%}sd-select-multiple .sd-select-multiple .sd-select-multiple__trigger{padding:4px 28px 4px 12px;display:flex;width:100%;align-items:center}sd-select-multiple .sd-select-multiple .sd-select-multiple__trigger .sd-select-multiple__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400;text-align:left}sd-select-multiple .sd-select-multiple .sd-select-multiple__trigger .sd-select-multiple__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select-multiple .sd-select-multiple__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease;margin-left:8px}sd-select-multiple .sd-select-multiple__arrow--open{transform:rotate(180deg)}`;const r=class extends l{constructor(s){super();e(this,s);this.update=t(this,"sdUpdate");this.dropDownShow=t(this,"sdDropDownShow")}get el(){return s(this)}value=null;options=[];placeholder="선택";optionPlaceholder="옵션이 없습니다.";width="200px";dropdownHeight="260px";autoFocus=false;disabled=false;clearable=false;searchable=false;useAll=false;useCheckbox=false;label="";useLabelRequired=false;labelTooltip="";labelTooltipProps=null;name;rules=[];error=false;optionRenderer;isOpen=false;itemIndex=-1;isScrolled=false;update;dropDownShow;selectRef;triggerRef;formField;filteredOptions=this.options;dropDownWidth=this.width;async sdOpen(){this.isOpen=true}async sdValidate(){this.formField?.sdValidate()}async sdReset(){this.formField?.sdReset()}async sdResetValidate(){this.formField?.sdResetValidation()}async sdFocus(){this.formField?.sdFocus()}valueChanged(){this.update?.emit(this.value)}async isOpenChanged(){this.onDropdownToggle(this.isOpen);this.dropDownShow?.emit({isOpen:this.isOpen});if(this.isOpen===false){await(this.formField?.sdValidate())}}componentWillLoad(){this.initializeEvent()}componentDidLoad(){if(this.autoFocus){this.selectRef?.focus()}}componentDidRender(){const e=this.triggerRef;const t=e?.getBoundingClientRect();this.dropDownWidth=t?.width?`${t.width}px`:this.width}disconnectedCallback(){this.cleanupEvent()}handleDocumentClick(e){if(!this.selectRef?.contains(e.target)){this.isOpen=false}}handleDocumentKeydown(e){e.stopPropagation();const t=["ArrowDown","ArrowUp","Enter","Escape"];if(!t.includes(e.key))return;e.preventDefault();switch(e.key){case"ArrowDown":case"ArrowUp":const t=new o(this.searchable,this.filteredOptions);const s=t.getNextIndex(this.itemIndex,e.key);this.itemIndex=s;break;case"Enter":const i=this.filteredOptions[this.itemIndex];if(i&&!i.disabled){this.handleOptionSelection(i)}break;case"Escape":this.isOpen=false;break}}handleOptionSelection=e=>{if(!e||e.disabled)return;const t=this.value?.some((t=>t.value===e.value));if(t){this.value=this.value?.filter((t=>t.value!==e.value))||null}else{this.value=[...this.value||[],e]}};getSelectedOption(){return this.options.filter((e=>this.value?.includes(e)))}closeDropdown(){this.isOpen=false}handleTriggerClick=e=>{e.stopPropagation();if(!this.disabled){this.isOpen=!this.isOpen;this.dropDownShow?.emit({isOpen:this.isOpen})}};handleOptionClick=e=>{const{option:t,event:s}=e;s.stopPropagation();this.handleOptionSelection(t)};render(){return i("sd-field",{key:"67a0bebbd4ad8ae405db1c9c1d0b9701a9b904f8",label:this.label,name:this.name,rules:this.rules,error:this.error,disabled:this.disabled,useLabelRequired:this.useLabelRequired,labelTooltip:this.labelTooltip,labelTooltipProps:this.labelTooltipProps,ref:e=>this.formField=e,style:{"--field-width":this.width||"200px"}},i("div",{key:"aa86839508c103bbe70287877020ec3eb82b7190",class:{"sd-select-multiple":true,"sd-select-multiple--open":this.isOpen,"sd-select-multiple--disabled":this.disabled,"sd-select-multiple--error":!!this.error},style:{"--select-width":this.width||"200px"},ref:e=>this.selectRef=e},this.renderTrigger(),this.renderDropdown()))}renderTrigger(){const e=this.getSelectedOption();return i("div",{class:"sd-select-multiple__trigger",tabindex:this.disabled?-1:0,onClick:this.handleTriggerClick,ref:e=>this.triggerRef=e},i("span",{class:"sd-select-multiple__value"},!e||e.length===0?this.placeholder:e.map((e=>e.label)).join(", ")),this.clearable&&e?.length>0&&!this.disabled&&i("sd-icon",{key:"close-icon",name:"close",size:10,color:"#888",class:"sd-select-multiple__clear",onClick:async e=>{e.stopPropagation();this.value=null;await(this.formField?.sdValidate())}}),i("sd-icon",{key:"arrow-icon",name:"arrowDown",color:"#888",class:{"sd-select-multiple__arrow":true,"sd-select-multiple__arrow--open":this.isOpen}}))}renderDropdown(){if(this.isOpen===false)return null;const e=this.selectRef?.querySelector(".sd-select-multiple__trigger")||this.selectRef;return i("sd-portal",{open:this.isOpen,parentRef:e,onSdClose:this.closeDropdown},i("sd-select-dropdown",{value:this.value,options:this.options,itemIndex:this.itemIndex,width:this.dropDownWidth,dropdownHeight:this.dropdownHeight,searchable:this.searchable,optionPlaceholder:this.optionPlaceholder,useCheckbox:this.useCheckbox,useAll:this.useAll,onSdOptionClick:({detail:e})=>this.handleOptionClick(e),onSdOptionFiltered:({detail:e})=>this.filteredOptions=e}))}static get watchers(){return{value:["valueChanged"],isOpen:["isOpenChanged"]}}};r.style=n();export{r as sd_select_multiple};
-//# sourceMappingURL=p-b521ce06.entry.js.map