@sellmate/design-system 1.8.0 → 1.10.0

package/dist/collection/components/sd-chip-input/sd-chip-input.js

@@ -0,0 +1,709 @@
+import { h, } from "@stencil/core";
+import { nanoid } from "nanoid/non-secure";
+import { CHIP_INPUT_SIZE_MAP, CHIP_INPUT_COLORS, CHIP_INPUT_LAYOUT, CHIP_INPUT_RESET, } from "./sd-chip-input.config";
+import { CHIP_LAYOUT, CHIP_COLORS, CHIP_TYPOGRAPHY } from "../sd-chip/sd-chip.config";
+export class SdChipInput {
+    host;
+    values = [];
+    errors = [];
+    size = 'sm';
+    disabled = false;
+    placeholder = '입력해 주세요.';
+    name = nanoid();
+    rules = [];
+    error = false;
+    useReset = false;
+    // sd-field props
+    label = '';
+    labelWidth = '';
+    hint = '';
+    errorMessage = '';
+    width = '';
+    status;
+    icon = undefined;
+    labelTooltip = '';
+    labelTooltipProps = null;
+    internalValues = [];
+    internalErrors = [];
+    focused = false;
+    hovered = false;
+    inputValue = '';
+    inputEl;
+    formField;
+    get value() {
+        return this.internalValues;
+    }
+    valuesChanged(newValues) {
+        this.internalValues = [...(newValues ?? [])];
+    }
+    errorsChanged(newErrors) {
+        if (Array.isArray(newErrors)) {
+            this.internalErrors = [...newErrors];
+        }
+    }
+    componentWillLoad() {
+        this.internalValues = [...(this.values ?? [])];
+        if (Array.isArray(this.errors)) {
+            this.internalErrors = [...this.errors];
+        }
+    }
+    getChipError(index) {
+        if (typeof this.errors === 'function') {
+            return this.errors(this.internalValues[index] ?? '');
+        }
+        return this.internalErrors[index] ?? false;
+    }
+    update;
+    focusEvent;
+    blurEvent;
+    async sdValidate() {
+        return this.formField?.sdValidate();
+    }
+    async sdReset() {
+        return this.formField?.sdReset();
+    }
+    async sdResetValidate() {
+        return this.formField?.sdResetValidation();
+    }
+    async sdFocus() {
+        return this.formField?.sdFocus();
+    }
+    handleChipUpdate = (index, newValue) => {
+        if (newValue.trim() === '') {
+            this.handleChipRemove(index);
+            return;
+        }
+        const next = [...this.internalValues];
+        next[index] = newValue;
+        this.internalValues = next;
+        this.values = next;
+        this.update.emit(next);
+    };
+    handleChipRemove = (index) => {
+        const next = this.internalValues.filter((_, i) => i !== index);
+        this.internalValues = next;
+        this.values = next;
+        if (Array.isArray(this.errors)) {
+            const nextErrors = this.internalErrors.filter((_, i) => i !== index);
+            this.internalErrors = nextErrors;
+            this.errors = nextErrors;
+        }
+        this.update.emit(next);
+        this.inputEl?.focus();
+    };
+    handleKeyDown = (event) => {
+        const input = event.target;
+        if (event.key === 'Enter' && !event.isComposing && input.value.trim() !== '') {
+            event.preventDefault();
+            const next = [...this.internalValues, input.value.trim()];
+            this.internalValues = next;
+            this.values = next;
+            input.value = '';
+            this.inputValue = '';
+            this.update.emit(next);
+        }
+        else if (event.key === 'Backspace' && input.value === '' && this.internalValues.length > 0) {
+            event.preventDefault();
+            const next = this.internalValues.slice(0, -1);
+            const nextErrors = this.internalErrors.slice(0, -1);
+            this.internalValues = next;
+            this.internalErrors = nextErrors;
+            this.values = next;
+            this.errors = nextErrors;
+            this.update.emit(next);
+        }
+    };
+    handleInput = (event) => {
+        this.inputValue = event.target.value;
+    };
+    handleFocus = () => {
+        this.focused = true;
+        this.focusEvent.emit();
+    };
+    handleBlur = () => {
+        this.focused = false;
+        this.blurEvent.emit();
+    };
+    handleContainerClick = () => {
+        if (!this.disabled) {
+            this.inputEl?.focus();
+        }
+    };
+    handleResetInput = () => {
+        this.internalValues = [];
+        this.internalErrors = [];
+        this.values = [];
+        if (Array.isArray(this.errors)) {
+            this.errors = [];
+        }
+        this.update.emit([]);
+        this.inputEl?.focus();
+    };
+    render() {
+        const sizeTokens = CHIP_INPUT_SIZE_MAP[this.size] ?? CHIP_INPUT_SIZE_MAP.sm;
+        const cssVars = {
+            [`--sd-system-size-field-${this.size}-height`]: 'auto',
+            [`--sd-system-radius-field-${this.size}`]: `${sizeTokens.radius}px`,
+            '--sd-chip-input-min-height': `${sizeTokens.minHeight}px`,
+            '--sd-chip-input-padding-x': `${sizeTokens.paddingX}px`,
+            '--sd-chip-input-padding-y': `${sizeTokens.paddingY}px`,
+            '--sd-chip-input-font-size': `${sizeTokens.fontSize}px`,
+            '--sd-chip-input-line-height': `${sizeTokens.lineHeight}px`,
+            '--sd-chip-input-font-weight': sizeTokens.fontWeight,
+            '--sd-chip-input-font-family': sizeTokens.fontFamily,
+            '--sd-chip-input-chip-gap': CHIP_INPUT_LAYOUT.chipGap,
+            '--sd-chip-input-placeholder-color': CHIP_INPUT_COLORS.text.placeholder,
+            '--sd-chip-input-reset-gap': CHIP_INPUT_LAYOUT.chipGap,
+            '--sd-chip-input-divider-color': CHIP_INPUT_RESET.dividerColor,
+            '--sd-chip-input-field-height': CHIP_LAYOUT.height,
+            '--sd-chip-input-field-padding-x': CHIP_LAYOUT.paddingX,
+            '--sd-chip-input-field-radius': CHIP_LAYOUT.radius,
+            '--sd-chip-input-field-border-width': CHIP_LAYOUT.borderWidth,
+            '--sd-chip-input-field-bg': CHIP_COLORS.bg.default,
+            '--sd-chip-input-field-border-color': 'transparent',
+            '--sd-chip-input-field-content': CHIP_COLORS.content.focus,
+            '--sd-chip-input-field-font-size': CHIP_TYPOGRAPHY.focus.fontSize,
+            '--sd-chip-input-field-font-weight': CHIP_TYPOGRAPHY.focus.fontWeight,
+            '--sd-chip-input-field-line-height': CHIP_TYPOGRAPHY.focus.lineHeight,
+            '--sd-chip-input-field-font-family': CHIP_TYPOGRAPHY.focus.fontFamily,
+        };
+        return (h("sd-field", { key: 'cfff85a1732e23052fb2c736512f48f5653c4e1a', name: this.name, label: this.label, labelWidth: this.labelWidth, hint: this.hint, errorMessage: this.errorMessage, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, width: this.width, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: cssVars, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("div", { key: '872d73f015e8aa79a9afcf1592372b3ba3bbb9a5', class: "sd-chip-input", onClick: this.handleContainerClick }, this.internalValues.map((value, i) => (h("sd-chip", { key: i, value: value, error: this.getChipError(i), disabled: this.disabled, onSdUpdate: (e) => this.handleChipUpdate(i, e.detail), onSdRemove: () => this.handleChipRemove(i), onSdFocus: () => {
+                this.focused = true;
+            }, onSdBlur: () => {
+                this.focused = false;
+            } }))), h("div", { key: '33746a3ce014b5d28329c193d93d8bf1fc4957a6', class: {
+                'sd-chip-input__field': true,
+                'sd-chip-input__field--filled': this.inputValue !== '',
+                'sd-chip-input__field--empty': this.inputValue === '' && this.internalValues.length > 0 && !this.focused,
+            }, "data-value": this.inputValue !== '' ? this.inputValue : this.internalValues.length === 0 ? this.placeholder : '' }, h("input", { key: '74b1e76b3123c371fffe344d922ff42801f028e7', ref: el => (this.inputEl = el), class: "sd-chip-input__input", placeholder: this.internalValues.length === 0 ? this.placeholder : '', disabled: this.disabled, size: 1, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur })), this.useReset && this.internalValues.length > 0 && (h("div", { key: '3343b3d3fed05856739675d802115f7e5b2ea110', class: "sd-chip-input__reset" }, this.inputValue === '' && h("span", { key: 'c0398e9c476309964c132b3647dd95cd2a65d948', class: "sd-chip-input__divider" }), h("sd-text-link", { key: 'e00af312380d40e8b6a3c9a463cea796146632a1', icon: "reset", iconColor: CHIP_INPUT_RESET.iconColor, label: "\uC785\uB825 \uCD08\uAE30\uD654", underline: true, disabled: this.disabled, style: { '--sd-text-link-color': CHIP_INPUT_RESET.labelColor }, onSdClick: this.handleResetInput }))))));
+    }
+    static get is() { return "sd-chip-input"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-chip-input.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-chip-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "values": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "errors": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean[] | ((value: string) => boolean)",
+                    "resolved": "((value: string) => boolean) | boolean[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ChipInputSize",
+                    "resolved": "\"md\" | \"sm\"",
+                    "references": {
+                        "ChipInputSize": {
+                            "location": "import",
+                            "path": "./sd-chip-input.config",
+                            "id": "src/components/sd-chip-input/sd-chip-input.config.ts::ChipInputSize",
+                            "referenceLocation": "ChipInputSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'sm'"
+            },
+            "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"
+            },
+            "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": "'\uC785\uB825\uD574 \uC8FC\uC138\uC694.'"
+            },
+            "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()"
+            },
+            "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": "[]"
+            },
+            "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"
+            },
+            "useReset": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "use-reset",
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "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": "''"
+            },
+            "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": "''"
+            },
+            "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": "''"
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'pass' | 'error'",
+                    "resolved": "\"default\" | \"error\" | \"pass\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status"
+            },
+            "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": "SdTooltip | 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"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalValues": {},
+            "internalErrors": {},
+            "focused": {},
+            "hovered": {},
+            "inputValue": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "update",
+                "name": "sdUpdate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                }
+            }, {
+                "method": "focusEvent",
+                "name": "sdFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "blurEvent",
+                "name": "sdBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "sdValidate": {
+                "complexType": {
+                    "signature": "() => Promise<boolean | undefined>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean | undefined>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "sdReset": {
+                "complexType": {
+                    "signature": "() => Promise<void | undefined>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void | undefined>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "sdResetValidate": {
+                "complexType": {
+                    "signature": "() => Promise<void | undefined>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void | undefined>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "sdFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void | undefined>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void | undefined>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "values",
+                "methodName": "valuesChanged"
+            }, {
+                "propName": "errors",
+                "methodName": "errorsChanged"
+            }];
+    }
+}