@sellmate/design-system 0.0.55 → 1.0.0

package/dist/components/p-CpRkV7pg.js

@@ -0,0 +1,201 @@
+import { p as proxyCustomElement, H, h, c as Host, t as transformTag } from './p-YLoygqPr.js';
+import { d as defineCustomElement$4 } from './p-CdGD6AqM.js';
+import { d as defineCustomElement$3 } from './p-CVMprLsE.js';
+import { d as defineCustomElement$2 } from './p-DnQF6htq.js';
+import { d as defineCustomElement$1 } from './p-7xekTQRB.js';
+
+const sdFieldCss = () => `.sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:fit-content}.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 FORM_PARENT_TAGS = [
+    'sd-select',
+    'sd-select-multiple',
+    'sd-select-multiple-group',
+    'sd-input',
+    'sd-textarea',
+];
+const SdField = /*@__PURE__*/ proxyCustomElement(class SdField extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+    }
+    get el() { return this; }
+    name = '';
+    rules = [];
+    error = false;
+    disabled = false;
+    hovered = false;
+    focused = false;
+    status;
+    // props - label
+    label = '';
+    insideLabel = false;
+    useLabelRequired = false;
+    labelTooltip = '';
+    labelTooltipProps = null;
+    errorMsg = '';
+    hostElement = null;
+    get value() {
+        return this.hostElement?.value ?? null;
+    }
+    get fieldStatus() {
+        let status = '';
+        if (!!this.disabled) {
+            status = 'disabled';
+            return `sd-field--${status}`;
+        }
+        if (!!this.focused) {
+            status = 'focus';
+            return `sd-field--${status}`;
+        }
+        if (!!this.hovered)
+            status = 'hover';
+        if (!!this.status)
+            status = this.status;
+        if (!!this.error)
+            status = 'error';
+        return status ? `sd-field--${status}` : '';
+    }
+    componentDidLoad() {
+        this.hostElement = this.findHostElement();
+        this.registerToForm();
+    }
+    disconnectedCallback() {
+        this.unregisterFromForm();
+    }
+    findHostElement() {
+        for (const tag of FORM_PARENT_TAGS) {
+            const parent = this.el.closest(tag);
+            if (parent && 'value' in parent) {
+                return parent;
+            }
+        }
+        return null;
+    }
+    registerToForm() {
+        if (!this.rules || this.rules.length === 0) {
+            console.warn('[sd-form-field] rules prop is required for sd-form integration');
+            return;
+        }
+        const formEl = this.el.closest('sd-form');
+        if (!formEl)
+            return;
+        formEl.componentOnReady().then(form => {
+            form.sdRegisterField(this);
+        });
+    }
+    unregisterFromForm() {
+        if (!this.name)
+            return;
+        const formEl = this.el.closest('sd-form');
+        formEl?.componentOnReady().then(form => {
+            form.sdUnregisterField(this.name);
+        });
+    }
+    async sdValidate() {
+        if (!this.rules || this.rules.length === 0)
+            return true;
+        for (const rule of this.rules) {
+            const result = rule(this.value ?? '');
+            if (result !== true) {
+                this.setError(true, result);
+                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(error, errorMsg) {
+        this.errorMsg = errorMsg;
+        if (this.hostElement) {
+            this.hostElement.error = error;
+        }
+    }
+    render() {
+        return (h(Host, { key: '16609b3313318dfc4db917a32bd44e6e2cb2f4e7', class: {
+                'sd-field': true,
+                'sd-field--has-label': !!this.label,
+                'sd-field--has-label-inside': !!this.label && this.insideLabel,
+                [this.fieldStatus]: !!this.fieldStatus,
+            } }, h("div", { key: '5c3056123cb54f8d6c26406ae76b13219d289f9c', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '786bcd6ec3651bb226013474fae112c592ec6890', class: {
+                'sd-field__control': true,
+                'sd-field__control--label-inside ': !!this.label && this.insideLabel,
+            } }, h("slot", { key: '60ae2f97cc7225930df9d17958fe78d3dd8e01e3' }))), this.errorMsg && h("div", { key: '4984f7e64c6c6611063c46b5c7ea21a0ae0b5343', class: "sd-field__error-message" }, this.errorMsg)));
+    }
+    renderLabel(label) {
+        if (!label)
+            return null;
+        return (h("label", { class: { 'sd-field__label': true, 'sd-field__label-inside': this.insideLabel } }, this.useLabelRequired && (h("sd-icon", { name: "star", size: "10", color: "brilliantblue_75", class: "sd-field__label__required-icon" })), h("div", { class: "sd-field__label__text" }, label), this.labelTooltip && (h("sd-tooltip", { class: "sd-field__label__tooltip", ...this.labelTooltipProps }, h("div", { slot: "content" }, this.labelTooltip)))));
+    }
+    static get style() { return sdFieldCss(); }
+}, [772, "sd-field", {
+        "name": [1],
+        "rules": [16],
+        "error": [1028],
+        "disabled": [1028],
+        "hovered": [1028],
+        "focused": [1028],
+        "status": [1],
+        "label": [1],
+        "insideLabel": [4, "inside-label"],
+        "useLabelRequired": [4, "use-label-required"],
+        "labelTooltip": [1, "label-tooltip"],
+        "labelTooltipProps": [16],
+        "errorMsg": [32],
+        "sdValidate": [64],
+        "sdReset": [64],
+        "sdResetValidation": [64],
+        "sdFocus": [64]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["sd-field", "sd-button", "sd-floating-portal", "sd-icon", "sd-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "sd-field":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), SdField);
+            }
+            break;
+        case "sd-button":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$4();
+            }
+            break;
+        case "sd-floating-portal":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$3();
+            }
+            break;
+        case "sd-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$2();
+            }
+            break;
+        case "sd-tooltip":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { SdField as S, defineCustomElement as d };
+//# sourceMappingURL=p-CpRkV7pg.js.map
+
+//# sourceMappingURL=p-CpRkV7pg.js.map

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

@@ -0,0 +1 @@
+{"file":"p-CpRkV7pg.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: fit-content;\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-D2movWkD.js

@@ -0,0 +1,289 @@
+import { p as proxyCustomElement, d as createEvent, h, t as transformTag } from './p-YLoygqPr.js';
+import { B as BaseDropdownEvent, S as SelectKeyboardNavigation } from './p-Dt-KAeBx.js';
+import { d as defineCustomElement$b } from './p-CdGD6AqM.js';
+import { d as defineCustomElement$a } from './p-UZEmuyIR.js';
+import { d as defineCustomElement$9 } from './p-CpRkV7pg.js';
+import { d as defineCustomElement$8 } from './p-CVMprLsE.js';
+import { d as defineCustomElement$7 } from './p-DnQF6htq.js';
+import { d as defineCustomElement$6 } from './p-D54IEoI6.js';
+import { d as defineCustomElement$5 } from './p-DbebUQwg.js';
+import { d as defineCustomElement$4 } from './p-s4Mg_xSz.js';
+import { d as defineCustomElement$3 } from './p-JF61vPAh.js';
+import { d as defineCustomElement$2 } from './p-RhBqdixM.js';
+import { d as defineCustomElement$1 } from './p-7xekTQRB.js';
+
+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 SdSelect = /*@__PURE__*/ proxyCustomElement(class SdSelect extends BaseDropdownEvent {
+    constructor(registerHost) {
+        super(false);
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.update = createEvent(this, "sdUpdate");
+        this.dropDownShow = createEvent(this, "sdDropDownShow");
+    }
+    get el() { return this; }
+    // props
+    value = null;
+    options = [];
+    placeholder = '선택';
+    optionPlaceholder = '옵션이 없습니다.';
+    width = '200px';
+    dropdownHeight = '260px';
+    autoFocus = false;
+    disabled = false;
+    clearable = false;
+    searchable = false;
+    // props - label
+    label = '';
+    insideLabel = false;
+    useLabelRequired = false;
+    labelTooltip = '';
+    labelTooltipProps = null;
+    // props - form
+    name;
+    rules = [];
+    error = false;
+    // props - custom slots
+    optionRenderer;
+    // states
+    isOpen = false;
+    itemIndex = -1;
+    isScrolled = false;
+    // events
+    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 selectedOption = this.getSelectedOption();
+        this.update?.emit({ value: selectedOption?.value || null, option: selectedOption || null });
+    }
+    async isOpenChanged() {
+        // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지
+        this.onDropdownToggle(this.isOpen);
+        this.dropDownShow?.emit({ isOpen: this.isOpen });
+        if (this.isOpen === false) {
+            await this.formField?.sdValidate();
+        }
+    }
+    componentWillLoad() {
+        this.initializeEvent(); // global dropdown Manager에 등록 + 이벤트 핸들러 초기화
+    }
+    componentDidLoad() {
+        if (this.autoFocus) {
+            this.selectRef?.focus();
+        }
+    }
+    // render 이후 label을 제외한 trigger의 너비를 기준으로 dropdown 너비 설정
+    componentDidRender() {
+        const trigger = this.triggerRef;
+        const rect = trigger?.getBoundingClientRect();
+        this.dropDownWidth = rect?.width ? `${rect.width}px` : this.width;
+    }
+    disconnectedCallback() {
+        this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리
+    }
+    handleDocumentClick(event) {
+        if (!this.selectRef?.contains(event.target)) {
+            this.isOpen = false;
+        }
+    }
+    handleDocumentKeydown(keyboardEvent) {
+        keyboardEvent.stopPropagation();
+        const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];
+        if (!targetKey.includes(keyboardEvent.key))
+            return;
+        keyboardEvent.preventDefault();
+        switch (keyboardEvent.key) {
+            case 'ArrowDown':
+            case 'ArrowUp':
+                const keyboardNavigation = new SelectKeyboardNavigation(this.searchable, this.filteredOptions);
+                const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);
+                this.itemIndex = nextIndex;
+                break;
+            case 'Enter':
+                const selectedOption = this.filteredOptions[this.itemIndex];
+                if (selectedOption && !selectedOption.disabled) {
+                    this.value = selectedOption.value;
+                    this.isOpen = false;
+                }
+                break;
+            case 'Escape':
+                this.isOpen = false;
+                break;
+        }
+    }
+    getSelectedOption() {
+        return this.options.find(option => option.value === this.value);
+    }
+    closeDropdown() {
+        this.isOpen = false;
+    }
+    handleTriggerClick = (event) => {
+        event.stopPropagation();
+        if (!this.disabled) {
+            this.isOpen = !this.isOpen;
+            this.dropDownShow?.emit({ isOpen: this.isOpen });
+        }
+    };
+    handleOptionClick = (detail) => {
+        const { option, event } = detail;
+        event.stopPropagation();
+        if (!option.disabled) {
+            this.value = option.value;
+            this.isOpen = false;
+        }
+    };
+    render() {
+        return (h("sd-field", { key: '507736637b3b7acee4bfef07eac7175c5e196c86', 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: 'd905202201f5977d04a929af507653900af3ee75', class: {
+                'sd-select': true,
+                'sd-select--disabled': this.disabled,
+                'sd-select--error': !!this.error,
+                'sd-select--label': !!this.label,
+            }, ref: el => (this.selectRef = el) }, this.renderTrigger(), this.renderDropdown())));
+    }
+    renderTrigger() {
+        const selectedOption = this.getSelectedOption();
+        return (h("div", { class: "sd-select__trigger", tabindex: this.disabled ? -1 : 0, onClick: this.handleTriggerClick, ref: el => (this.triggerRef = el) }, h("span", { class: "sd-select__value" }, selectedOption ? selectedOption.label : this.placeholder), this.clearable && selectedOption && !this.disabled && (h("sd-icon", { key: "clear-icon", name: "close", size: 10, color: "#888", class: "sd-select__clear", onClick: async (event) => {
+                event.stopPropagation();
+                this.value = null;
+                await this.formField?.sdValidate();
+            } })), h("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 parentRef = (this.selectRef?.querySelector('.sd-select__trigger') ||
+            this.selectRef);
+        return (h("sd-portal", { open: this.isOpen, parentRef: parentRef, onSdClose: this.closeDropdown }, h("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 }) => this.handleOptionClick(detail), onSdOptionFiltered: ({ detail }) => (this.filteredOptions = detail) })));
+    }
+    static get watchers() { return {
+        "value": ["valueChanged"],
+        "isOpen": ["isOpenChanged"]
+    }; }
+    static get style() { return sdSelectCss(); }
+}, [768, "sd-select", {
+        "value": [1032],
+        "options": [1040],
+        "placeholder": [1],
+        "optionPlaceholder": [1, "option-placeholder"],
+        "width": [1],
+        "dropdownHeight": [1, "dropdown-height"],
+        "autoFocus": [4, "auto-focus"],
+        "disabled": [4],
+        "clearable": [4],
+        "searchable": [4],
+        "label": [1],
+        "insideLabel": [4, "inside-label"],
+        "useLabelRequired": [4, "use-label-required"],
+        "labelTooltip": [1, "label-tooltip"],
+        "labelTooltipProps": [16],
+        "name": [1],
+        "rules": [16],
+        "error": [4],
+        "optionRenderer": [16],
+        "isOpen": [32],
+        "itemIndex": [32],
+        "isScrolled": [32],
+        "sdOpen": [64],
+        "sdValidate": [64],
+        "sdReset": [64],
+        "sdResetValidate": [64],
+        "sdFocus": [64]
+    }, undefined, {
+        "value": ["valueChanged"],
+        "isOpen": ["isOpenChanged"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["sd-select", "sd-button", "sd-checkbox", "sd-field", "sd-floating-portal", "sd-icon", "sd-input", "sd-portal", "sd-select-dropdown", "sd-select-option", "sd-select-search-input", "sd-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "sd-select":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), SdSelect);
+            }
+            break;
+        case "sd-button":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$b();
+            }
+            break;
+        case "sd-checkbox":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$a();
+            }
+            break;
+        case "sd-field":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$9();
+            }
+            break;
+        case "sd-floating-portal":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$8();
+            }
+            break;
+        case "sd-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$7();
+            }
+            break;
+        case "sd-input":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$6();
+            }
+            break;
+        case "sd-portal":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$5();
+            }
+            break;
+        case "sd-select-dropdown":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$4();
+            }
+            break;
+        case "sd-select-option":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$3();
+            }
+            break;
+        case "sd-select-search-input":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$2();
+            }
+            break;
+        case "sd-tooltip":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { SdSelect as S, defineCustomElement as d };
+//# sourceMappingURL=p-D2movWkD.js.map
+
+//# sourceMappingURL=p-D2movWkD.js.map

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

@@ -0,0 +1 @@
+{"file":"p-D2movWkD.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}