@sellmate/design-system 0.0.55 → 1.0.0

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

@@ -1,110 +1,99 @@
-import { Host, h, } from "@stencil/core";
+import { h, } from "@stencil/core";
+import { nanoid } from "nanoid/non-secure";
 export class SdInput {
-    el;
+    host;
     value = null;
-    label;
+    //  @Prop() name?: string;
+    type = 'text';
     insideLabel = false;
     placeholder = '입력해 주세요.';
     disabled = false;
     clearable = false;
     width;
     barcode = false;
-    rules;
+    rules = [];
     autoFocus = false;
     status;
     inputClass = '';
     readonly = false;
-    //  props - custom styles
-    inputStyle = {};
-    internalValue = null;
     error = false;
     focused = false;
     hovered = false;
+    // props - label
+    label = '';
+    useLabelRequired = false;
+    labelTooltip = '';
+    labelTooltipProps = null;
+    //  props - custom styles
+    inputStyle = {};
+    internalValue = null;
     nativeEl = undefined;
-    sdClick;
-    sdInput;
-    sdChange;
-    sdFocus;
-    sdBlur;
+    formField;
+    name = nanoid();
+    input;
+    focus;
+    blur;
     valueChanged(newValue) {
         this.internalValue = newValue;
     }
     internalValueChanged(newValue) {
         if (newValue !== this.value) {
             this.value = newValue;
-            this.sdInput?.emit(this.value);
-        }
-        if (!this.rules || this.rules.length === 0)
-            return;
-        this.error = false;
-        for (const rule of this.rules) {
-            const result = rule(newValue);
-            if (result !== true) {
-                this.error = true;
-                break;
-            }
+            this.input?.emit(this.value);
         }
     }
-    async getNativeElement() {
+    async sdGetNativeElement() {
         return this.nativeEl || null;
     }
+    async sdValidate() {
+        this.formField?.sdValidate();
+    }
+    async sdReset() {
+        this.formField?.sdReset();
+    }
+    async sdResetValidate() {
+        this.formField?.sdResetValidation();
+    }
+    async sdFocus() {
+        this.formField?.sdFocus();
+    }
     componentWillLoad() {
         if (this.value) {
             this.internalValue = this.value;
         }
     }
+    componentDidLoad() {
+        if (this.autoFocus) {
+            this.nativeEl?.focus();
+        }
+    }
     handleInput = (event) => {
         const target = event.target;
         this.internalValue = target.value;
-        this.sdInput?.emit(this.internalValue);
-    };
-    handleChange = (event) => {
-        const target = event.target;
-        this.internalValue = target.value;
-        this.sdChange?.emit(this.internalValue);
     };
-    handleFocus = (type, event) => {
+    handleFocus = async (type, event) => {
         this.focused = type === 'focus';
-        if (type === 'blur')
-            this.sdBlur?.emit(event);
-        else
-            this.sdFocus?.emit(event);
+        if (type === 'blur') {
+            // Auto-validate on blur if rules exist
+            if (this.rules && this.rules.length > 0) {
+                await this.formField?.sdValidate();
+            }
+            this.blur?.emit(event);
+        }
+        else {
+            this.focus?.emit(event);
+        }
     };
-    getInputStatus() {
-        // input 상태 우선순위: hovered > focused > status(상태 주입) > error(rules 검사)
-        if (this.disabled)
-            return 'sd-input--disabled';
-        if (this.hovered)
-            return 'sd-input--hovered';
-        if (this.focused)
-            return 'sd-input--focused';
-        if (this.status)
-            return `sd-input--${this.status}`;
-        if (this.error)
-            return 'sd-input--error';
-        return '';
-    }
     render() {
         const inputWidth = this.width
             ? {
                 '--input-width': typeof this.width === 'number' ? `${this.width}px` : this.width,
             }
             : {};
-        return (h(Host, { key: '3e95d5ff30f78cff43d6ed263acf6d782ee082d9', style: inputWidth }, h("div", { key: '6005f125ada3a94cf320d6390e8868c51b773b07', class: {
-                'sd-input': true,
-                'sd-input--with-label': !!this.label,
-                'sd-input--inside-label': !!this.label && this.insideLabel,
-                'sd-input--barcode': !!this.barcode,
-                [this.getInputStatus()]: true,
-            } }, this.label && (h("div", { key: '89009bc9f0bf631a0274c5261cacdc915548c4ca', class: {
-                'sd-input__label': true,
-            } }, this.label)), h("label", { key: '83f40c08eef0754904941fffd00bec035f654bbf', class: {
-                'sd-input__container': true,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("slot", { key: '17d648f43076578e54f96c9e4fbd99553af45ef6', name: "prefix" }), h("input", { key: '03a7c6da51930e629e75b8a0af8c3e843169a6df', ref: el => (this.nativeEl = el), class: `sd-input__native_element ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onChange: this.handleChange, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) }), h("slot", { key: '604948d6bc07fb3e97e644c5459862b1fd3e91f0', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: '124d732eaa54a824dc82896d2bfc7520aa3dc2a2', name: "close", color: "#888", class: "sd-input__clear-icon", onClick: () => {
+        return (h("sd-field", { key: '78d338ae57d61752e8cb691197c3882f32ccfc16', name: this.name, label: this.label, insideLabel: this.insideLabel, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: inputWidth, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("label", { key: '180c948116cb0a644d2696a46a8040cd5f19010d', class: "sd-input__content", style: { width: '100%' } }, h("slot", { key: '4ead5aaaa62ac8c93d6207e04d5555e56f096a58', name: "prefix" }), h("input", { key: 'd5bce7f062c7550f6204f5df416122fe8e4a40f0', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: '9ab6a7556416dd5dbfea6b83f90b337366935b49', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: '7a803590e461dc740feb8bb55fd69c6dc11f3b62', name: "close", color: "grey_65", size: "16", class: "sd-input__clear-icon", onClick: async () => {
                 this.internalValue = '';
-                this.sdChange?.emit(this.internalValue);
-                this.sdInput?.emit(this.internalValue);
-            } }))))));
+                await this.formField?.sdValidate();
+            } })))));
     }
     static get is() { return "sd-input"; }
     static get originalStyleUrls() {
@@ -139,16 +128,16 @@ export class SdInput {
                 "attribute": "value",
                 "defaultValue": "null"
             },
-            "label": {
+            "type": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
+                    "original": "'text' | 'password' | 'email'",
+                    "resolved": "\"email\" | \"password\" | \"text\"",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -156,7 +145,8 @@ export class SdInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "label"
+                "attribute": "type",
+                "defaultValue": "'text'"
             },
             "insideLabel": {
                 "type": "boolean",
@@ -281,12 +271,13 @@ export class SdInput {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "Array<(value: string | number | null) => boolean | string>",
-                    "resolved": "(((value: string | number | null) => string | boolean)[]) | undefined",
+                    "original": "Rule[]",
+                    "resolved": "Rule[] | undefined",
                     "references": {
-                        "Array": {
-                            "location": "global",
-                            "id": "global::Array"
+                        "Rule": {
+                            "location": "import",
+                            "path": "../../types/form",
+                            "id": "src/types/form.d.ts::Rule"
                         }
                     }
                 },
@@ -297,7 +288,8 @@ export class SdInput {
                     "text": ""
                 },
                 "getter": false,
-                "setter": false
+                "setter": false,
+                "defaultValue": "[]"
             },
             "autoFocus": {
                 "type": "boolean",
@@ -378,6 +370,150 @@ export class SdInput {
                 "attribute": "readonly",
                 "defaultValue": "false"
             },
+            "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"
+            },
+            "focused": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "focused",
+                "defaultValue": "false"
+            },
+            "hovered": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hovered",
+                "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": "''"
+            },
+            "useLabelRequired": {
+                "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-label-required",
+                "defaultValue": "false"
+            },
+            "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",
+                            "id": "src/components/sd-tooltip/sd-tooltip.tsx::SdTooltipProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            },
             "inputStyle": {
                 "type": "unknown",
                 "mutable": false,
@@ -400,31 +536,13 @@ export class SdInput {
     }
     static get states() {
         return {
-            "internalValue": {},
-            "error": {},
-            "focused": {},
-            "hovered": {}
+            "internalValue": {}
         };
     }
     static get events() {
         return [{
-                "method": "sdClick",
-                "name": "sdClick",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "string | number | null",
-                    "resolved": "null | number | string",
-                    "references": {}
-                }
-            }, {
-                "method": "sdInput",
-                "name": "sdInput",
+                "method": "input",
+                "name": "sdUpdate",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -438,22 +556,7 @@ export class SdInput {
                     "references": {}
                 }
             }, {
-                "method": "sdChange",
-                "name": "sdChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "string | number | null",
-                    "resolved": "null | number | string",
-                    "references": {}
-                }
-            }, {
-                "method": "sdFocus",
+                "method": "focus",
                 "name": "sdFocus",
                 "bubbles": true,
                 "cancelable": true,
@@ -474,7 +577,7 @@ export class SdInput {
                     }
                 }
             }, {
-                "method": "sdBlur",
+                "method": "blur",
                 "name": "sdBlur",
                 "bubbles": true,
                 "cancelable": true,
@@ -498,7 +601,7 @@ export class SdInput {
     }
     static get methods() {
         return {
-            "getNativeElement": {
+            "sdGetNativeElement": {
                 "complexType": {
                     "signature": "() => Promise<HTMLInputElement | null>",
                     "parameters": [],
@@ -518,10 +621,78 @@ export class SdInput {
                     "text": "",
                     "tags": []
                 }
+            },
+            "sdValidate": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "sdReset": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "sdResetValidate": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "sdFocus": {
+                "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 elementRef() { return "host"; }
     static get watchers() {
         return [{
                 "propName": "value",

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

@@ -1 +1 @@
-{"version":3,"file":"sd-input.js","sourceRoot":"","sources":["../../../src/components/sd-input/sd-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EACN,SAAS,EACT,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,KAAK,EACL,KAAK,EAEL,CAAC,EACD,MAAM,GACN,MAAM,eAAe,CAAC;AAMvB,MAAM,OAAO,OAAO;IACR,EAAE,CAAe;IAEH,KAAK,GAA4B,IAAI,CAAC;IACvD,KAAK,CAAU;IACf,WAAW,GAAY,KAAK,CAAC;IAC7B,WAAW,GAAW,UAAU,CAAC;IACjC,QAAQ,GAAY,KAAK,CAAC;IAC1B,SAAS,GAAY,KAAK,CAAC;IAC3B,KAAK,CAAmB;IACxB,OAAO,GAAa,KAAK,CAAC;IAC1B,KAAK,CAA8D;IACnE,SAAS,GAAY,KAAK,CAAC;IAC3B,MAAM,CAAgC;IACtC,UAAU,GAAW,EAAE,CAAC;IACxB,QAAQ,GAAY,KAAK,CAAC;IAElC,yBAAyB;IACjB,UAAU,GAA8B,EAAE,CAAC;IAElC,aAAa,GAA2B,IAAI,CAAC;IAC7C,KAAK,GAAY,KAAK,CAAC;IACvB,OAAO,GAAY,KAAK,CAAC;IACzB,OAAO,GAAY,KAAK,CAAC;IAElC,QAAQ,GAAiC,SAAS,CAAC;IAElD,OAAO,CAAwC;IAC/C,OAAO,CAAwC;IAC/C,QAAQ,CAAwC;IAChD,OAAO,CAAuB;IAC9B,MAAM,CAAuB;IAGtC,YAAY,CAAC,QAAgC;QAC5C,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;IAC/B,CAAC;IAGD,oBAAoB,CAAC,QAAgC;QACpD,IAAI,QAAQ,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC;YAC7B,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;YACtB,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAChC,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO;QACnD,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YAC/B,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC;YAC9B,IAAI,MAAM,KAAK,IAAI,EAAE,CAAC;gBACrB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;gBAClB,MAAM;YACP,CAAC;QACF,CAAC;IACF,CAAC;IAGD,KAAK,CAAC,gBAAgB;QACrB,OAAO,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC;IAC9B,CAAC;IAED,iBAAiB;QAChB,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YAChB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC;QACjC,CAAC;IACF,CAAC;IAEO,WAAW,GAAG,CAAC,KAAY,EAAE,EAAE;QACtC,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;QAChD,IAAI,CAAC,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC;QAClC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IACxC,CAAC,CAAC;IAEM,YAAY,GAAG,CAAC,KAAY,EAAE,EAAE;QACvC,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;QAChD,IAAI,CAAC,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC;QAClC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IACzC,CAAC,CAAC;IAEM,WAAW,GAAG,CAAC,IAAsB,EAAE,KAAY,EAAE,EAAE;QAC9D,IAAI,CAAC,OAAO,GAAG,IAAI,KAAK,OAAO,CAAC;QAEhC,IAAI,IAAI,KAAK,MAAM;YAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;;YACzC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAChC,CAAC,CAAC;IAEF,cAAc;QACb,qEAAqE;QACrE,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO,oBAAoB,CAAC;QAC/C,IAAI,IAAI,CAAC,OAAO;YAAE,OAAO,mBAAmB,CAAC;QAC7C,IAAI,IAAI,CAAC,OAAO;YAAE,OAAO,mBAAmB,CAAC;QAC7C,IAAI,IAAI,CAAC,MAAM;YAAE,OAAO,aAAa,IAAI,CAAC,MAAM,EAAE,CAAC;QACnD,IAAI,IAAI,CAAC,KAAK;YAAE,OAAO,iBAAiB,CAAC;QACzC,OAAO,EAAE,CAAC;IACX,CAAC;IAED,MAAM;QACL,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK;YAC5B,CAAC,CAAC;gBACC,eAAe,EAAE,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK;aAChF;YACH,CAAC,CAAC,EAAE,CAAC;QAEN,OAAO,CACN,EAAC,IAAI,qDAAC,KAAK,EAAE,UAAU;YACtB,4DACC,KAAK,EAAE;oBACN,UAAU,EAAE,IAAI;oBAChB,sBAAsB,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK;oBACpC,wBAAwB,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,WAAW;oBAC1D,mBAAmB,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO;oBAEnC,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,EAAE,IAAI;iBAC7B;gBAEA,IAAI,CAAC,KAAK,IAAI,CACd,4DACC,KAAK,EAAE;wBACN,iBAAiB,EAAE,IAAI;qBACvB,IAEA,IAAI,CAAC,KAAK,CACN,CACN;gBACD,8DACC,KAAK,EAAE;wBACN,qBAAqB,EAAE,IAAI;qBAC3B,EACD,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,EACzC,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,EAC1C,KAAK,EAAE,IAAI,CAAC,UAAU;oBAEtB,6DAAM,IAAI,EAAC,QAAQ,GAAQ;oBAC3B,8DACC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC,EAC/B,KAAK,EAAE,4BAA4B,IAAI,CAAC,UAAU,EAAE,EACpD,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,IAAI,CAAC,aAAa,IAAI,EAAE,EAC/B,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,EAClD,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,KAAK,CAAC,GAC/C;oBACF,6DAAM,IAAI,EAAC,QAAQ,GAAQ;oBAC1B,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,aAAa,IAAI,CACxC,gEACC,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,MAAM,EACZ,KAAK,EAAC,sBAAsB,EAC5B,OAAO,EAAE,GAAG,EAAE;4BACb,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC;4BACxB,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;4BACxC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;wBACxC,CAAC,GACA,CACF,CACM,CACH,CACA,CACP,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import {\n Component,\n Element,\n Host,\n Prop,\n State,\n Watch,\n Event,\n EventEmitter,\n h,\n Method,\n} from '@stencil/core';\n\n@Component({\n tag: 'sd-input',\n styleUrl: 'sd-input.scss',\n})\nexport class SdInput {\n @Element() el!: HTMLElement;\n\n @Prop({ mutable: true }) value?: string | number | null = null;\n @Prop() label?: string;\n @Prop() insideLabel: boolean = false;\n @Prop() placeholder: string = '입력해 주세요.';\n @Prop() disabled: boolean = false;\n @Prop() clearable: boolean = false;\n @Prop() width?: number | string;\n @Prop() barcode?: boolean = false;\n @Prop() rules?: Array<(value: string | number | null) => boolean | string>;\n @Prop() autoFocus: boolean = false;\n @Prop() status?: 'default' | 'pass' | 'error';\n @Prop() inputClass: string = '';\n @Prop() readonly: boolean = false;\n\n //  props - custom styles\n @Prop() inputStyle: { [key: string]: string } = {};\n\n @State() private internalValue: string | number | null = null;\n @State() private error: boolean = false;\n @State() private focused: boolean = false;\n @State() private hovered: boolean = false;\n\n private nativeEl: HTMLInputElement | undefined = undefined;\n\n @Event() sdClick?: EventEmitter<string | number | null>;\n @Event() sdInput?: EventEmitter<string | number | null>;\n @Event() sdChange?: EventEmitter<string | number | null>;\n @Event() sdFocus?: EventEmitter<Event>;\n @Event() sdBlur?: EventEmitter<Event>;\n\n @Watch('value')\n valueChanged(newValue: string | number | null) {\n  this.internalValue = newValue;\n }\n\n @Watch('internalValue')\n internalValueChanged(newValue: string | number | null) {\n  if (newValue !== this.value) {\n   this.value = newValue;\n   this.sdInput?.emit(this.value);\n  }\n\n  if (!this.rules || this.rules.length === 0) return;\n  this.error = false;\n  for (const rule of this.rules) {\n   const result = rule(newValue);\n   if (result !== true) {\n    this.error = true;\n    break;\n   }\n  }\n }\n\n @Method()\n async getNativeElement(): Promise<HTMLInputElement | null> {\n  return this.nativeEl || null;\n }\n\n componentWillLoad() {\n  if (this.value) {\n   this.internalValue = this.value;\n  }\n }\n\n private handleInput = (event: Event) => {\n  const target = event.target as HTMLInputElement;\n  this.internalValue = target.value;\n  this.sdInput?.emit(this.internalValue);\n };\n\n private handleChange = (event: Event) => {\n  const target = event.target as HTMLInputElement;\n  this.internalValue = target.value;\n  this.sdChange?.emit(this.internalValue);\n };\n\n private handleFocus = (type: 'focus' | 'blur', event: Event) => {\n  this.focused = type === 'focus';\n\n  if (type === 'blur') this.sdBlur?.emit(event);\n  else this.sdFocus?.emit(event);\n };\n\n getInputStatus() {\n  // input 상태 우선순위: hovered > focused > status(상태 주입) > error(rules 검사)\n  if (this.disabled) return 'sd-input--disabled';\n  if (this.hovered) return 'sd-input--hovered';\n  if (this.focused) return 'sd-input--focused';\n  if (this.status) return `sd-input--${this.status}`;\n  if (this.error) return 'sd-input--error';\n  return '';\n }\n\n render() {\n  const inputWidth = this.width\n   ? {\n      '--input-width': typeof this.width === 'number' ? `${this.width}px` : this.width,\n     }\n   : {};\n\n  return (\n   <Host style={inputWidth}>\n    <div\n     class={{\n      'sd-input': true,\n      'sd-input--with-label': !!this.label,\n      'sd-input--inside-label': !!this.label && this.insideLabel,\n      'sd-input--barcode': !!this.barcode,\n\n      [this.getInputStatus()]: true,\n     }}\n    >\n     {this.label && (\n      <div\n       class={{\n        'sd-input__label': true,\n       }}\n      >\n       {this.label}\n      </div>\n     )}\n     <label\n      class={{\n       'sd-input__container': true,\n      }}\n      onMouseEnter={() => (this.hovered = true)}\n      onMouseLeave={() => (this.hovered = false)}\n      style={this.inputStyle}\n     >\n      <slot name=\"prefix\"></slot>\n      <input\n       ref={el => (this.nativeEl = el)}\n       class={`sd-input__native_element ${this.inputClass}`}\n       type=\"text\"\n       value={this.internalValue || ''}\n       placeholder={this.placeholder}\n       disabled={this.disabled}\n       readonly={this.readonly}\n       autofocus={this.autoFocus}\n       onInput={this.handleInput}\n       onChange={this.handleChange}\n       onFocus={event => this.handleFocus('focus', event)}\n       onBlur={event => this.handleFocus('blur', event)}\n      />\n      <slot name=\"suffix\"></slot>\n      {this.clearable && this.internalValue && (\n       <sd-icon\n        name=\"close\"\n        color=\"#888\"\n        class=\"sd-input__clear-icon\"\n        onClick={() => {\n         this.internalValue = '';\n         this.sdChange?.emit(this.internalValue);\n         this.sdInput?.emit(this.internalValue);\n        }}\n       />\n      )}\n     </label>\n    </div>\n   </Host>\n  );\n }\n}\n"]}
+{"version":3,"file":"sd-input.js","sourceRoot":"","sources":["../../../src/components/sd-input/sd-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Prop,\n State,\n Watch,\n Event,\n EventEmitter,\n h,\n Method,\n} from '@stencil/core';\nimport { Rule } from '../../types/form';\nimport { SdTooltipProps } from '../sd-tooltip/sd-tooltip';\nimport { nanoid } from 'nanoid/non-secure';\n\n@Component({\n tag: 'sd-input',\n styleUrl: 'sd-input.scss',\n})\nexport class SdInput {\n @Element() host!: HTMLElement;\n\n @Prop({ mutable: true }) value?: string | number | null = null;\n //  @Prop() name?: string;\n @Prop() type: 'text' | 'password' | 'email' = 'text';\n @Prop() insideLabel: boolean = false;\n @Prop() placeholder: string = '입력해 주세요.';\n @Prop() disabled: boolean = false;\n @Prop() clearable: boolean = false;\n @Prop() width?: number | string;\n @Prop() barcode?: boolean = false;\n @Prop() rules?: Rule[] = [];\n @Prop() autoFocus: boolean = false;\n @Prop() status?: 'default' | 'pass' | 'error';\n @Prop() inputClass: string = '';\n @Prop() readonly: boolean = false;\n @Prop({ mutable: true }) error: boolean = false;\n @Prop({ mutable: true }) focused: boolean = false;\n @Prop({ mutable: true }) hovered: boolean = false;\n\n // props - label\n @Prop() label?: string = '';\n @Prop() useLabelRequired: boolean = false;\n @Prop() labelTooltip: string = '';\n @Prop() labelTooltipProps: SdTooltipProps | null = null;\n\n //  props - custom styles\n @Prop() inputStyle: { [key: string]: string } = {};\n\n @State() private internalValue: string | number | null = null;\n\n private nativeEl: HTMLInputElement | undefined = undefined;\n private formField?: HTMLSdFieldElement;\n name = nanoid();\n\n @Event({ eventName: 'sdUpdate' }) input?: EventEmitter<string | number | null>;\n @Event({ eventName: 'sdFocus' }) focus?: EventEmitter<Event>;\n @Event({ eventName: 'sdBlur' }) blur?: EventEmitter<Event>;\n\n @Watch('value')\n valueChanged(newValue: string | number | null) {\n  this.internalValue = newValue;\n }\n\n @Watch('internalValue')\n internalValueChanged(newValue: string | number | null) {\n  if (newValue !== this.value) {\n   this.value = newValue;\n   this.input?.emit(this.value);\n  }\n }\n\n @Method()\n async sdGetNativeElement(): Promise<HTMLInputElement | null> {\n  return this.nativeEl || null;\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 componentWillLoad() {\n  if (this.value) {\n   this.internalValue = this.value;\n  }\n }\n\n componentDidLoad() {\n  if (this.autoFocus) {\n   this.nativeEl?.focus();\n  }\n }\n\n private handleInput = (event: Event) => {\n  const target = event.target as HTMLInputElement;\n  this.internalValue = target.value;\n };\n\n private handleFocus = async (type: 'focus' | 'blur', event: Event) => {\n  this.focused = type === 'focus';\n\n  if (type === 'blur') {\n   // Auto-validate on blur if rules exist\n   if (this.rules && this.rules.length > 0) {\n    await this.formField?.sdValidate();\n   }\n   this.blur?.emit(event);\n  } else {\n   this.focus?.emit(event);\n  }\n };\n\n render() {\n  const inputWidth = this.width\n   ? {\n      '--input-width': typeof this.width === 'number' ? `${this.width}px` : this.width,\n     }\n   : {};\n\n  return (\n   <sd-field\n    name={this.name}\n    label={this.label}\n    insideLabel={this.insideLabel}\n    rules={this.rules}\n    error={this.error}\n    disabled={this.disabled}\n    focused={this.focused}\n    hovered={this.hovered}\n    status={this.status}\n    useLabelRequired={this.useLabelRequired}\n    labelTooltip={this.labelTooltip}\n    labelTooltipProps={this.labelTooltipProps}\n    ref={el => (this.formField = el)}\n    style={inputWidth}\n    onMouseEnter={() => (this.hovered = true)}\n    onMouseLeave={() => (this.hovered = false)}\n   >\n    <label class=\"sd-input__content\" style={{ width: '100%' }}>\n     <slot name=\"prefix\"></slot>\n     <input\n      name={this.name}\n      ref={el => (this.nativeEl = el)}\n      class={`sd-input__native ${this.inputClass}`}\n      type={this.type}\n      value={this.internalValue || ''}\n      placeholder={this.placeholder}\n      disabled={this.disabled}\n      readonly={this.readonly}\n      autofocus={this.autoFocus}\n      onInput={this.handleInput}\n      onFocus={event => this.handleFocus('focus', event)}\n      onBlur={event => this.handleFocus('blur', event)}\n      style={this.inputStyle}\n     />\n     <slot name=\"suffix\"></slot>\n     {this.clearable && this.internalValue && (\n      <sd-icon\n       name=\"close\"\n       color=\"grey_65\"\n       size=\"16\"\n       class=\"sd-input__clear-icon\"\n       onClick={async () => {\n        this.internalValue = '';\n        await this.formField?.sdValidate();\n       }}\n      />\n     )}\n    </label>\n   </sd-field>\n  );\n }\n}\n"]}

package/dist/collection/components/sd-modal-card/sd-modal-card.css

@@ -6,6 +6,7 @@ sd-modal-card .sd-modal-card {
   padding: 40px 32px;
   border-radius: 8px;
   box-shadow: 4px 4px 24px 4px rgba(0, 0, 0, 0.2);
+  background: white;
 }
 sd-modal-card .sd-modal-card__close-button {
   position: absolute;

package/dist/collection/components/sd-modal-card/sd-modal-card.js

@@ -15,8 +15,8 @@ export class SdModalCard {
     ];
     message = [];
     modalClass = '';
-    sdClose;
-    sdConfirm;
+    close;
+    confirm;
     get pointColor() {
         if (this.type !== 'normal') {
             return 'grey_95';
@@ -36,7 +36,7 @@ export class SdModalCard {
         return modalClass;
     }
     render() {
-        return (h(Host, { key: '83640de79f0c1a67ec114a048c3e8a691def5514', style: { '--point-color': this.pointColor } }, h("div", { key: 'fd741a11ac5c82a6b1d2c1972ec525596eb4c4f6', class: this.getModalClass }, this.useCloseButton && (h("sd-icon", { key: '144d5726721cdd28d56db268eb643f1ba5f66e57', class: "sd-modal-card__close-button", name: "close", size: "20", color: "grey_65", onClick: () => this.sdClose.emit() })), this.type !== 'normal' && (h("sd-icon", { key: '9d7dff32800d2f44e2c0753434dfd471c898200b', class: "sd-modal-card__icon", name: this.type === 'info' ? 'notificationOutline' : 'warningOutline', size: "32", color: this.type === 'info' ? 'brilliantblue_75' : 'red_75' })), h("h2", { key: 'c59db6982fb2369b3ca23990cd94f79547b4b758', class: "sd-modal-card__title" }, this.modalTitle), h("slot", { key: '1628852290bdb64ee99cd3f45318e3d25dde8e46' }, h("div", { key: 'a21d6157f28974f537938bf1acddcc33a5e3c5ca', class: `sd-modal-card__message-container` }, this.message.map(msg => (h("p", { class: "sd-modal-card__message" }, msg))))), h("div", { key: '336092ac86ab1e6ddd2af9a7f25b358ba694a036', class: `sd-modal-card__button-container flex-${this.buttonFlexDirection}` }, this.buttonProps.map(button => (h("sd-button", { class: 'sd-modal-card__button', variant: button.variant ? button.variant : 'outline', label: button.label, color: button.color, size: button.size, onClick: () => !button.type || button.type === 'confirm' ? this.sdConfirm.emit() : this.sdClose.emit(), ...(button.class && { class: button.class }) })))))));
+        return (h(Host, { key: 'e143942e62530660fb9a60dd70a418be197943b7', style: { '--point-color': this.pointColor } }, h("div", { key: '7033fb4220b84ed00eae6fa753fcfc676fc02a7f', class: this.getModalClass }, this.useCloseButton && (h("sd-icon", { key: 'e28d60dcd5281aa62fcd55f72d9eb7bb83767ca7', class: "sd-modal-card__close-button", name: "close", size: "20", color: "grey_65", onClick: () => this.close.emit() })), this.type !== 'normal' && (h("sd-icon", { key: 'e209095abf43af9885ccd63a9bc2183d24863f0c', class: "sd-modal-card__icon", name: this.type === 'info' ? 'notificationOutline' : 'warningOutline', size: "32", color: this.type === 'info' ? 'brilliantblue_75' : 'red_75' })), h("h2", { key: '5beac7a046be5afe446af94e9032dd9bb219cd60', class: "sd-modal-card__title" }, this.modalTitle), h("slot", { key: '83f5e5978ed9489888fdb5bc839eefb4ad99ce6c' }, h("div", { key: 'feaaee161b474b7464a51c515ac1fa5448b140f1', class: `sd-modal-card__message-container` }, this.message.map(msg => (h("p", { class: "sd-modal-card__message" }, msg))))), h("div", { key: 'cb2354ca63ab663aded356f4f931b40d64697209', class: `sd-modal-card__button-container flex-${this.buttonFlexDirection}` }, this.buttonProps.map(button => (h("sd-button", { class: 'sd-modal-card__button', variant: button.variant ? button.variant : 'outline', label: button.label, color: button.color, size: button.size, onClick: () => !button.type || button.type === 'confirm' ? this.confirm.emit() : this.close.emit(), ...(button.class && { class: button.class }) })))))));
     }
     static get is() { return "sd-modal-card"; }
     static get originalStyleUrls() {
@@ -217,7 +217,7 @@ export class SdModalCard {
     }
     static get events() {
         return [{
-                "method": "sdClose",
+                "method": "close",
                 "name": "sdClose",
                 "bubbles": true,
                 "cancelable": true,
@@ -237,7 +237,7 @@ export class SdModalCard {
                     }
                 }
             }, {
-                "method": "sdConfirm",
+                "method": "confirm",
                 "name": "sdConfirm",
                 "bubbles": true,
                 "cancelable": true,