@sellmate/design-system 1.0.16 → 1.0.18

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

@@ -1,300 +1 @@
-import { p as proxyCustomElement, c as createEvent, h, t as transformTag } from './p-CR2Jbl0B.js';
-import { B as BaseDropdownEvent, S as SelectKeyboardNavigation } from './p-CXuU38Gz.js';
-import { d as defineCustomElement$c } from './p-lbT0o9hE.js';
-import { d as defineCustomElement$b } from './p-Cd145I-2.js';
-import { d as defineCustomElement$a } from './p-C2pN-_wD.js';
-import { d as defineCustomElement$9 } from './p-BdgLMKjb.js';
-import { d as defineCustomElement$8 } from './p-zvhzq4Sw.js';
-import { d as defineCustomElement$7 } from './p-xfqZA_70.js';
-import { d as defineCustomElement$6 } from './p-D16-dM6f.js';
-import { d as defineCustomElement$5 } from './p-CkzAorp3.js';
-import { d as defineCustomElement$4 } from './p-Dv4dN3Y5.js';
-import { d as defineCustomElement$3 } from './p-CFHNnfIq.js';
-import { d as defineCustomElement$2 } from './p-CiNjpVRK.js';
-
-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$1 = /*@__PURE__*/ proxyCustomElement(class SdSelectMultiple 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 - select multiple specific
-    useAll = false;
-    useCheckbox = false;
-    // props - label
-    label = '';
-    useLabelRequired = false;
-    labelTooltip = '';
-    labelTooltipProps = null;
-    // props - form
-    name;
-    rules = [];
-    error = false;
-    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 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.handleOptionSelection(selectedOption);
-                }
-                break;
-            case 'Escape':
-                this.isOpen = false;
-                break;
-        }
-    }
-    handleOptionSelection = (option) => {
-        if (!option || option.disabled)
-            return;
-        const isAlreadySelected = this.value?.some(opt => opt.value === option.value);
-        if (isAlreadySelected) {
-            // 이미 선택된 옵션인 경우, 선택 해제
-            this.value = this.value?.filter(opt => opt.value !== option.value) || null;
-        }
-        else {
-            // 새로운 옵션 선택
-            this.value = [...(this.value || []), option];
-        }
-        this.update?.emit(this.value);
-    };
-    getSelectedOption() {
-        return this.options.filter(option => this.value?.includes(option));
-    }
-    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();
-        this.handleOptionSelection(option);
-    };
-    render() {
-        return (h("sd-field", { key: 'a70e7fefb98428e616d2f124923dfa7ee7a7c2e2', 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: 'fda63e4e8dcc72aa0147b2981b49b7e28e377ee8', class: {
-                'sd-select-multiple': true,
-                'sd-select-multiple--open': this.isOpen,
-                'sd-select-multiple--disabled': this.disabled,
-                'sd-select-multiple--error': !!this.error,
-            }, ref: el => (this.selectRef = el) }, this.renderTrigger(), this.renderDropdown())));
-    }
-    renderTrigger() {
-        const selectedOption = this.getSelectedOption();
-        return (h("div", { class: "sd-select-multiple__trigger", tabindex: this.disabled ? -1 : 0, onClick: this.handleTriggerClick, ref: el => (this.triggerRef = el) }, h("span", { class: "sd-select-multiple__value" }, !selectedOption || selectedOption.length === 0
-            ? this.placeholder
-            : selectedOption.map(option => option.label).join(', ')), this.clearable && selectedOption?.length > 0 && !this.disabled && (h("sd-icon", { key: "close-icon", name: "close", size: 10, color: "#888", class: "sd-select-multiple__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-multiple__arrow': true, 'sd-select-multiple__arrow--open': this.isOpen } })));
-    }
-    renderDropdown() {
-        if (this.isOpen === false)
-            return null;
-        const parentRef = (this.selectRef?.querySelector('.sd-select-multiple__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, useCheckbox: this.useCheckbox, useAll: this.useAll, onSdOptionClick: ({ detail }) => this.handleOptionClick(detail), onSdOptionFiltered: ({ detail }) => (this.filteredOptions = detail) })));
-    }
-    static get watchers() { return {
-        "isOpen": ["isOpenChanged"]
-    }; }
-    static get style() { return sdSelectMultipleCss(); }
-}, [768, "sd-select-multiple", {
-        "value": [1040],
-        "options": [1040],
-        "placeholder": [1],
-        "optionPlaceholder": [1, "option-placeholder"],
-        "width": [1],
-        "dropdownHeight": [1, "dropdown-height"],
-        "autoFocus": [4, "auto-focus"],
-        "disabled": [4],
-        "clearable": [4],
-        "searchable": [4],
-        "useAll": [4, "use-all"],
-        "useCheckbox": [4, "use-checkbox"],
-        "label": [1],
-        "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, {
-        "isOpen": ["isOpenChanged"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["sd-select-multiple", "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-multiple":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), SdSelectMultiple$1);
-            }
-            break;
-        case "sd-button":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$c();
-            }
-            break;
-        case "sd-checkbox":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$b();
-            }
-            break;
-        case "sd-field":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$a();
-            }
-            break;
-        case "sd-floating-portal":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$9();
-            }
-            break;
-        case "sd-icon":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$8();
-            }
-            break;
-        case "sd-input":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$7();
-            }
-            break;
-        case "sd-portal":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$6();
-            }
-            break;
-        case "sd-select-dropdown":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$5();
-            }
-            break;
-        case "sd-select-option":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$4();
-            }
-            break;
-        case "sd-select-search-input":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$3();
-            }
-            break;
-        case "sd-tooltip":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const SdSelectMultiple = SdSelectMultiple$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SdSelectMultiple, defineCustomElement };
-//# sourceMappingURL=sd-select-multiple.js.map
-
-//# sourceMappingURL=sd-select-multiple.js.map
+import{p as e,c as s,h as t,t as i}from"./p-4iQAU7kM.js";import{B as l,S as o}from"./p-Cc-cekjN.js";import{n as r}from"./p-CCwNgVmC.js";import{d}from"./p-B45-wHcP.js";import{d as n}from"./p-Csz5Om2E.js";import{d as a}from"./p-DOdjsjwr.js";import{d as c}from"./p-BkU8yMUR.js";import{d as p}from"./p-Bxs0Hp4o.js";import{d as h}from"./p-CIDMF6fj.js";import{d as u}from"./p-DojkP9rD.js";import{d as m}from"./p-CNgER9mk.js";import{d as f}from"./p-BDlbibwl.js";import{d as b}from"./p-IFDX7o1t.js";import{d as w}from"./p-Ay5V-5Fu.js";const g=e(class extends l{constructor(e){super(!1),!1!==e&&this.__registerHost(),this.update=s(this,"sdUpdate"),this.dropDownShow=s(this,"sdDropDownShow")}get el(){return this}value=null;options=[];placeholder="선택";optionPlaceholder="선택지가 없습니다.";width="200px";dropdownHeight="260px";autoFocus=!1;disabled=!1;clearable=!1;searchable=!1;useAll=!1;useCheckbox=!1;label="";useLabelRequired=!1;labelTooltip="";labelTooltipProps=null;rules=[];error=!1;optionRenderer;isOpen=!1;itemIndex=-1;isScrolled=!1;update;dropDownShow;selectRef;triggerRef;formField;filteredOptions=this.options;dropDownWidth=this.width;name=r();async sdOpen(){this.isOpen=!0}async sdValidate(){this.formField?.sdValidate()}async sdReset(){this.formField?.sdReset()}async sdResetValidate(){this.formField?.sdResetValidation()}async sdFocus(){this.formField?.sdFocus()}async isOpenChanged(){this.onDropdownToggle(this.isOpen),this.dropDownShow?.emit({isOpen:this.isOpen}),!1===this.isOpen&&await(this.formField?.sdValidate())}componentWillLoad(){this.initializeEvent()}componentDidLoad(){this.autoFocus&&this.selectRef?.focus()}componentDidRender(){const e=this.triggerRef,s=e?.getBoundingClientRect();this.dropDownWidth=s?.width?s.width+"px":this.width}disconnectedCallback(){this.cleanupEvent()}handleDocumentClick(e){this.selectRef?.contains(e.target)||(this.isOpen=!1)}handleDocumentKeydown(e){if(e.stopPropagation(),["ArrowDown","ArrowUp","Enter","Escape"].includes(e.key))switch(e.preventDefault(),e.key){case"ArrowDown":case"ArrowUp":const s=new o(this.searchable,this.filteredOptions).getNextIndex(this.itemIndex,e.key);this.itemIndex=s;break;case"Enter":const t=this.filteredOptions[this.itemIndex];t&&!t.disabled&&this.handleOptionSelection(t);break;case"Escape":this.isOpen=!1}}handleOptionSelection=e=>{if(!e||e.disabled)return;const s=this.value?.some((s=>s.value===e.value));this.value=s?this.value?.filter((s=>s.value!==e.value))||null:[...this.value||[],e],this.update?.emit(this.value)};getSelectedOption(){return this.options.filter((e=>this.value?.includes(e)))}closeDropdown(){this.isOpen=!1}handleTriggerClick=e=>{e.stopPropagation(),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 t("sd-field",{key:"f870320a5e124564c3f1666efb8a8e98d0fcaa4d",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},t("div",{key:"f6ba635376c512745488c7bd5ba29a8dd54552fa",class:{"sd-select-multiple":!0,"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 t("div",{class:"sd-select-multiple__trigger",tabindex:this.disabled?-1:0,onClick:this.handleTriggerClick,ref:e=>this.triggerRef=e},t("span",{class:"sd-select-multiple__value"},e&&0!==e.length?e.map((e=>e.label)).join(", "):this.placeholder),this.clearable&&e?.length>0&&!this.disabled&&t("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())}}),t("sd-icon",{key:"arrow-icon",name:"arrowDown",color:"#888",class:{"sd-select-multiple__arrow":!0,"sd-select-multiple__arrow--open":this.isOpen}}))}renderDropdown(){if(!1===this.isOpen)return null;const e=this.selectRef?.querySelector(".sd-select-multiple__trigger")||this.selectRef;return t("sd-portal",{open:this.isOpen,parentRef:e,onSdClose:this.closeDropdown},t("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{isOpen:[{isOpenChanged:0}]}}static get style(){return"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)}"}},[512,"sd-select-multiple",{value:[1040],options:[1040],placeholder:[1],optionPlaceholder:[1,"option-placeholder"],width:[1],dropdownHeight:[1,"dropdown-height"],autoFocus:[4,"auto-focus"],disabled:[4],clearable:[4],searchable:[4],useAll:[4,"use-all"],useCheckbox:[4,"use-checkbox"],label:[1],useLabelRequired:[4,"use-label-required"],labelTooltip:[1,"label-tooltip"],labelTooltipProps:[16],rules:[16],error:[4],optionRenderer:[16],isOpen:[32],itemIndex:[32],isScrolled:[32],sdOpen:[64],sdValidate:[64],sdReset:[64],sdResetValidate:[64],sdFocus:[64]},void 0,{isOpen:[{isOpenChanged:0}]}]),k=g,x=function(){"undefined"!=typeof customElements&&["sd-select-multiple","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"].forEach((e=>{switch(e){case"sd-select-multiple":customElements.get(i(e))||customElements.define(i(e),g);break;case"sd-button":customElements.get(i(e))||d();break;case"sd-checkbox":customElements.get(i(e))||n();break;case"sd-field":customElements.get(i(e))||a();break;case"sd-floating-portal":customElements.get(i(e))||c();break;case"sd-icon":customElements.get(i(e))||p();break;case"sd-input":customElements.get(i(e))||h();break;case"sd-portal":customElements.get(i(e))||u();break;case"sd-select-dropdown":customElements.get(i(e))||m();break;case"sd-select-option":customElements.get(i(e))||f();break;case"sd-select-search-input":customElements.get(i(e))||b();break;case"sd-tooltip":customElements.get(i(e))||w()}}))};export{k as SdSelectMultiple,x as defineCustomElement}

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

@@ -1,9 +1 @@
-import { S as SdSelectOptionGroup$1, d as defineCustomElement$1 } from './p-B-8YfRUg.js';
-
-const SdSelectOptionGroup = SdSelectOptionGroup$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SdSelectOptionGroup, defineCustomElement };
-//# sourceMappingURL=sd-select-option-group.js.map
-
-//# sourceMappingURL=sd-select-option-group.js.map
+import{S as o,d as s}from"./p-GjahxZoU.js";const a=o,p=s;export{a as SdSelectOptionGroup,p as defineCustomElement}

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

@@ -1,9 +1 @@
-import { S as SdSelectOption$1, d as defineCustomElement$1 } from './p-Dv4dN3Y5.js';
-
-const SdSelectOption = SdSelectOption$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SdSelectOption, defineCustomElement };
-//# sourceMappingURL=sd-select-option.js.map
-
-//# sourceMappingURL=sd-select-option.js.map
+import{S as o,d as s}from"./p-BDlbibwl.js";const p=o,r=s;export{p as SdSelectOption,r as defineCustomElement}

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

@@ -1,9 +1 @@
-import { S as SdSelectSearchInput$1, d as defineCustomElement$1 } from './p-CFHNnfIq.js';
-
-const SdSelectSearchInput = SdSelectSearchInput$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SdSelectSearchInput, defineCustomElement };
-//# sourceMappingURL=sd-select-search-input.js.map
-
-//# sourceMappingURL=sd-select-search-input.js.map
+import{S as o,d as s}from"./p-IFDX7o1t.js";const t=o,p=s;export{t as SdSelectSearchInput,p as defineCustomElement}

package/dist/components/sd-select.js

@@ -1,9 +1 @@
-import { S as SdSelect$1, d as defineCustomElement$1 } from './p-DjZ8vXCq.js';
-
-const SdSelect = SdSelect$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SdSelect, defineCustomElement };
-//# sourceMappingURL=sd-select.js.map
-
-//# sourceMappingURL=sd-select.js.map
+import{S as o,d as s}from"./p-DHdV8DHV.js";const p=o,r=s;export{p as SdSelect,r as defineCustomElement}