@sellmate/design-system 1.0.75 → 1.0.77

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

@@ -1,819 +0,0 @@
-import { h, } from "@stencil/core";
-import { nanoid } from "nanoid/non-secure";
-export class SdSelectV2 {
-    static VIEWPORT_PADDING = 20;
-    static PORTAL_OFFSET_Y = 4;
-    static CLOSE_ANIMATION_DURATION = 150;
-    el;
-    type = 'default';
-    value = null;
-    options = [];
-    placeholder = '선택';
-    maxDropdownWidth = '640px';
-    dropdownHeight = '260px';
-    disabled = false;
-    label = '';
-    labelWidth = '';
-    addonLabel = '';
-    addonAlign = 'start';
-    error = false;
-    hint = '';
-    errorMessage = '';
-    rules = [];
-    icon = undefined;
-    labelTooltip = '';
-    labelTooltipProps = null;
-    emitValue = false;
-    width = '';
-    isOpen = false;
-    isAnimatingOut = false;
-    triggerWidth = '200px';
-    resolvedDropdownHeight = '260px';
-    resolvedMaxDropdownWidth = '640px';
-    focused = false;
-    hovered = false;
-    update;
-    dropDownShow;
-    async sdFocus() {
-        if (this.disabled)
-            return;
-        await this.triggerComponentRef?.sdFocus();
-    }
-    async sdOpen() {
-        // sdFocus 직후 호출 시 트리거 ref/레이아웃이 안정될 때까지 한 틱 대기
-        await new Promise(resolve => setTimeout(resolve, 0));
-        if (this.disabled || this.isOpen)
-            return;
-        this.prepareDropdownGeometry();
-        if (this.closeAnimationTimer)
-            clearTimeout(this.closeAnimationTimer);
-        this.isAnimatingOut = false;
-        this.isOpen = true;
-    }
-    triggerRef;
-    triggerComponentRef;
-    closeAnimationTimer;
-    name = nanoid();
-    triggerHasFocus = false;
-    watchIsOpen(newValue) {
-        this.syncFocusedState(newValue);
-        this.dropDownShow.emit({ isOpen: newValue });
-    }
-    get isMulti() {
-        return this.type === 'multi' || this.type === 'multi_depth';
-    }
-    get displayText() {
-        if (this.isMulti) {
-            if (!Array.isArray(this.value) || this.value.length === 0)
-                return '';
-            const flat = this.flattenOptions(this.options);
-            return this.value
-                .map(item => {
-                if (item != null && typeof item === 'object') {
-                    const opt = item;
-                    return opt.label ?? flat.find(o => o.value === opt.value)?.label ?? '';
-                }
-                return flat.find(o => o.value === item)?.label ?? '';
-            })
-                .filter(Boolean)
-                .join(', ');
-        }
-        if (this.value == null)
-            return '';
-        if (!this.emitValue && typeof this.value === 'object' && !Array.isArray(this.value)) {
-            return this.value.label ?? '';
-        }
-        const flat = this.flattenOptions(this.options);
-        const found = flat.find(o => o.value === this.value);
-        return found?.label ?? '';
-    }
-    flattenOptions(options) {
-        return options.flatMap(o => (o.children ? this.flattenOptions(o.children) : [o]));
-    }
-    getSelectedOptions() {
-        const val = this.value;
-        if (!val || !Array.isArray(val))
-            return [];
-        if (this.emitValue) {
-            return val
-                .map(v => this.findOriginalOption(v, this.options))
-                .filter((o) => !!o);
-        }
-        return val;
-    }
-    toMultiValue(options) {
-        return this.emitValue ? options.map(o => o.value) : options;
-    }
-    parsePixelValue(value, fallback) {
-        const parsed = Number.parseFloat(value);
-        return Number.isFinite(parsed) ? parsed : fallback;
-    }
-    updateDropdownViewportConstraints() {
-        if (!this.triggerRef)
-            return;
-        const triggerRect = this.triggerRef.getBoundingClientRect();
-        const viewportPadding = SdSelectV2.VIEWPORT_PADDING;
-        const offsetY = SdSelectV2.PORTAL_OFFSET_Y;
-        const preferredHeight = this.parsePixelValue(this.dropdownHeight, 260);
-        const preferredWidth = this.parsePixelValue(this.maxDropdownWidth, 640);
-        const availableBelow = Math.max(window.innerHeight - triggerRect.bottom - viewportPadding - offsetY, 0);
-        const availableAbove = Math.max(triggerRect.top - viewportPadding - offsetY, 0);
-        const availableHeight = Math.max(availableBelow, availableAbove);
-        const availableWidth = Math.max(window.innerWidth - viewportPadding * 2, 0);
-        this.resolvedDropdownHeight = `${Math.min(preferredHeight, availableHeight)}px`;
-        this.resolvedMaxDropdownWidth = `${Math.min(preferredWidth, availableWidth)}px`;
-    }
-    handleViewportResize = () => {
-        if (!this.isOpen)
-            return;
-        this.updateDropdownViewportConstraints();
-    };
-    findOriginalOption(value, options) {
-        for (const opt of options) {
-            if (opt.value === value)
-                return opt;
-            if (opt.children) {
-                const found = this.findOriginalOption(value, opt.children);
-                if (found)
-                    return found;
-            }
-        }
-        return undefined;
-    }
-    closeDropdown() {
-        if (!this.isOpen)
-            return;
-        this.isOpen = false;
-        this.isAnimatingOut = true;
-        if (this.closeAnimationTimer)
-            clearTimeout(this.closeAnimationTimer);
-        this.closeAnimationTimer = setTimeout(() => {
-            this.isAnimatingOut = false;
-        }, SdSelectV2.CLOSE_ANIMATION_DURATION);
-    }
-    prepareDropdownGeometry() {
-        if (this.triggerRef) {
-            this.triggerWidth = `${this.triggerRef.offsetWidth}px`;
-        }
-        this.updateDropdownViewportConstraints();
-    }
-    syncFocusedState(isOpen = this.isOpen) {
-        this.focused = isOpen || this.triggerHasFocus;
-    }
-    handleTriggerFocus = () => {
-        this.triggerHasFocus = true;
-        this.syncFocusedState();
-    };
-    handleTriggerBlur = () => {
-        this.triggerHasFocus = false;
-        this.syncFocusedState();
-    };
-    handleTriggerClick = () => {
-        if (this.isOpen) {
-            this.closeDropdown();
-            return;
-        }
-        this.prepareDropdownGeometry();
-        if (this.closeAnimationTimer)
-            clearTimeout(this.closeAnimationTimer);
-        this.isAnimatingOut = false;
-        this.isOpen = true;
-    };
-    emitUpdate(value) {
-        this.update.emit(value);
-    }
-    handleOptionSelect = (detail) => {
-        const { option, leaves } = detail;
-        if (this.isMulti) {
-            this.handleMultiSelect(option, leaves);
-        }
-        else {
-            this.closeDropdown();
-            this.value = this.emitValue ? option.value : option;
-            const nextValue = this.value;
-            requestAnimationFrame(() => {
-                this.emitUpdate(nextValue);
-            });
-        }
-    };
-    handleMultiSelect(option, leaves) {
-        const selected = this.getSelectedOptions();
-        const isGroup = !!option.children;
-        let newSelected;
-        if (isGroup) {
-            const allSelected = leaves.every(l => selected.some(s => s.value === l.value));
-            if (allSelected) {
-                const leafValues = new Set(leaves.map(l => l.value));
-                newSelected = selected.filter(s => !leafValues.has(s.value));
-            }
-            else {
-                const existing = new Set(selected.map(s => s.value));
-                const toAdd = leaves.filter(l => !existing.has(l.value));
-                newSelected = [...selected, ...toAdd];
-            }
-        }
-        else {
-            const exists = selected.some(s => s.value === option.value);
-            newSelected = exists ? selected.filter(s => s.value !== option.value) : [...selected, option];
-        }
-        this.value = this.toMultiValue(newSelected);
-        this.emitUpdate(this.value);
-    }
-    connectedCallback() {
-        window.addEventListener('resize', this.handleViewportResize);
-    }
-    disconnectedCallback() {
-        window.removeEventListener('resize', this.handleViewportResize);
-        if (this.closeAnimationTimer)
-            clearTimeout(this.closeAnimationTimer);
-    }
-    render() {
-        const portalProps = {
-            open: this.isOpen,
-            parentRef: this.triggerRef,
-            viewportPadding: SdSelectV2.VIEWPORT_PADDING,
-            onSdClose: () => {
-                this.closeDropdown();
-            },
-        };
-        return (h("sd-field", { key: '76b432c04fa0f9fca70e63e9c7d16ed768fc9dd1', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
-                this.hovered = true;
-            }, onMouseLeave: () => {
-                this.hovered = false;
-            } }, h("div", { key: 'dba3a313b7e0171a441540877aacdc7d5c2e7f04', class: "sd-select-v2", ref: el => {
-                this.triggerRef = el;
-            } }, h("sd-select-v2-trigger", { key: '7790357558f174eb70b15ed72574f738b062c479', ref: el => {
-                this.triggerComponentRef = el;
-            }, displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '672f3583b24e363b74d184d13866ee19a78b04d9', ...portalProps }, h("sd-select-v2-listbox", { key: 'f71d95ad06c74356e4d5ce94da7e720c002390b6', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
-    }
-    static get is() { return "sd-select-v2"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["sd-select-v2.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["sd-select-v2.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "type": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "SelectV2Type",
-                    "resolved": "\"default\" | \"default_depth\" | \"multi\" | \"multi_depth\"",
-                    "references": {
-                        "SelectV2Type": {
-                            "location": "import",
-                            "path": "./sd-select-v2.config",
-                            "id": "src/components/sd-select-v2/sd-select-v2.config.ts::SelectV2Type",
-                            "referenceLocation": "SelectV2Type"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "type",
-                "defaultValue": "'default'"
-            },
-            "value": {
-                "type": "any",
-                "mutable": true,
-                "complexType": {
-                    "original": "SelectV2Value",
-                    "resolved": "(string | number)[] | SelectV2Option | SelectV2Option[] | null | number | string",
-                    "references": {
-                        "SelectV2Value": {
-                            "location": "import",
-                            "path": "./sd-select-v2.config",
-                            "id": "src/components/sd-select-v2/sd-select-v2.config.ts::SelectV2Value",
-                            "referenceLocation": "SelectV2Value"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "value",
-                "defaultValue": "null"
-            },
-            "options": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "SelectV2Option[]",
-                    "resolved": "SelectV2Option[]",
-                    "references": {
-                        "SelectV2Option": {
-                            "location": "import",
-                            "path": "./sd-select-v2.config",
-                            "id": "src/components/sd-select-v2/sd-select-v2.config.ts::SelectV2Option",
-                            "referenceLocation": "SelectV2Option"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "[]"
-            },
-            "placeholder": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "placeholder",
-                "defaultValue": "'\uC120\uD0DD'"
-            },
-            "maxDropdownWidth": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "max-dropdown-width",
-                "defaultValue": "'640px'"
-            },
-            "dropdownHeight": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "dropdown-height",
-                "defaultValue": "'260px'"
-            },
-            "disabled": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "disabled",
-                "defaultValue": "false"
-            },
-            "label": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "label",
-                "defaultValue": "''"
-            },
-            "labelWidth": {
-                "type": "any",
-                "mutable": false,
-                "complexType": {
-                    "original": "string | number",
-                    "resolved": "number | string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "label-width",
-                "defaultValue": "''"
-            },
-            "addonLabel": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "addon-label",
-                "defaultValue": "''"
-            },
-            "addonAlign": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "FieldAddonAlign",
-                    "resolved": "\"center\" | \"end\" | \"start\"",
-                    "references": {
-                        "FieldAddonAlign": {
-                            "location": "import",
-                            "path": "../sd-field/sd-field.config",
-                            "id": "src/components/sd-field/sd-field.config.ts::FieldAddonAlign",
-                            "referenceLocation": "FieldAddonAlign"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "addon-align",
-                "defaultValue": "'start'"
-            },
-            "error": {
-                "type": "boolean",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "error",
-                "defaultValue": "false"
-            },
-            "hint": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "hint",
-                "defaultValue": "''"
-            },
-            "errorMessage": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "error-message",
-                "defaultValue": "''"
-            },
-            "rules": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "Rule[]",
-                    "resolved": "Rule[] | undefined",
-                    "references": {
-                        "Rule": {
-                            "location": "import",
-                            "path": "../../types/form",
-                            "id": "src/types/form.d.ts::Rule",
-                            "referenceLocation": "Rule"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "[]"
-            },
-            "icon": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "IconProps",
-                    "resolved": "IconProps | undefined",
-                    "references": {
-                        "IconProps": {
-                            "location": "global",
-                            "id": "global::IconProps"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "undefined"
-            },
-            "labelTooltip": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "label-tooltip",
-                "defaultValue": "''"
-            },
-            "labelTooltipProps": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "SdTooltipProps | null",
-                    "resolved": "SdTooltipProps | null",
-                    "references": {
-                        "SdTooltipProps": {
-                            "location": "import",
-                            "path": "../sd-tooltip/sd-tooltip.config",
-                            "id": "src/components/sd-tooltip/sd-tooltip.config.ts::SdTooltipProps",
-                            "referenceLocation": "SdTooltipProps"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "null"
-            },
-            "emitValue": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "emit-value",
-                "defaultValue": "false"
-            },
-            "width": {
-                "type": "any",
-                "mutable": false,
-                "complexType": {
-                    "original": "string | number",
-                    "resolved": "number | string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "width",
-                "defaultValue": "''"
-            },
-            "name": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "name",
-                "defaultValue": "nanoid()"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "isOpen": {},
-            "isAnimatingOut": {},
-            "triggerWidth": {},
-            "resolvedDropdownHeight": {},
-            "resolvedMaxDropdownWidth": {},
-            "focused": {},
-            "hovered": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "update",
-                "name": "sdUpdate",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "SelectV2Value",
-                    "resolved": "(string | number)[] | SelectV2Option | SelectV2Option[] | null | number | string",
-                    "references": {
-                        "SelectV2Value": {
-                            "location": "import",
-                            "path": "./sd-select-v2.config",
-                            "id": "src/components/sd-select-v2/sd-select-v2.config.ts::SelectV2Value",
-                            "referenceLocation": "SelectV2Value"
-                        }
-                    }
-                }
-            }, {
-                "method": "dropDownShow",
-                "name": "sdDropDownShow",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "{ isOpen: boolean }",
-                    "resolved": "{ isOpen: boolean; }",
-                    "references": {}
-                }
-            }];
-    }
-    static get methods() {
-        return {
-            "sdFocus": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            },
-            "sdOpen": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            }
-        };
-    }
-    static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "isOpen",
-                "methodName": "watchIsOpen"
-            }];
-    }
-}