@sellmate/design-system 1.0.16 → 1.0.17

package/dist/components/p-qi6qs5Jb.js

@@ -1,81 +0,0 @@
-import { p as proxyCustomElement, H, h, t as transformTag } from './p-CR2Jbl0B.js';
-
-const sdTagCss = () => `:host{display:inline-block}:host([full-width]){display:block}.sd-tag{display:inline-flex;width:100%;align-items:center;justify-content:center;gap:8px;text-decoration:none;border:1px solid transparent;border-radius:4px;transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box}.sd-tag__content{display:inline-block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sd-tag--custom-color{background:var(--tag-bg-color);color:var(--tag-text-color)}.sd-tag--sm{padding:0 6px;font-size:11px;line-height:18px;height:20px;border-radius:4px}.sd-tag--md{padding:0 8px;font-size:12px;font-weight:700;line-height:20px;height:24px;border-radius:4px}.sd-tag--lg{padding:0 10px;font-size:14px;font-weight:700;line-height:24px;min-height:28px;border-radius:5px}.sd-tag--rounded.sd-tag--sm{border-radius:20px}.sd-tag--rounded.sd-tag--md{border-radius:20px}.sd-tag--rounded.sd-tag--lg{border-radius:15px}`;
-
-const TAG_COLORS = {
-    grey: 'bg-grey_20 text-grey_70',
-    red: 'bg-red_15 text-red_70',
-    orange: 'bg-orange_10 text-orange_65',
-    yellow: 'bg-yellow_10 text-yellow_70',
-    green: 'bg-green_15 text-green_75',
-    blue: 'bg-brilliantblue_20 text-brilliantblue_75',
-    darkblue: 'bg-oceanblue_15 text-oceanblue_70',
-    indigo: 'bg-brilliantblue_10 text-brilliantblue_85',
-};
-const SdTag = /*@__PURE__*/ proxyCustomElement(class SdTag extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-    }
-    get el() { return this; }
-    size = 'md';
-    color = 'grey';
-    rounded = false;
-    label = '';
-    bgColor;
-    textColor;
-    getTagClasses() {
-        const classes = ['sd-tag', `sd-tag--${this.size}`];
-        if (this.rounded) {
-            classes.push('sd-tag--rounded');
-        }
-        if (this.color && !this.bgColor && !this.textColor) {
-            classes.push(TAG_COLORS[this.color]);
-        }
-        if (this.bgColor || this.textColor) {
-            classes.push('sd-tag--custom-color');
-        }
-        return classes.join(' ');
-    }
-    renderContent() {
-        return [
-            h("span", { class: "sd-tag__content" }, h("slot", null, this.label)),
-        ];
-    }
-    render() {
-        const tagClasses = this.getTagClasses();
-        return (h("span", { key: '9745415753fe657bf5e7e5ca9eb6e02f8c953bfd', class: tagClasses, style: {
-                '--tag-bg-color': this.bgColor,
-                '--tag-text-color': this.textColor,
-            }, "aria-label": this.label || 'tag' }, this.renderContent()));
-    }
-    static get style() { return sdTagCss(); }
-}, [769, "sd-tag", {
-        "size": [1],
-        "color": [1],
-        "rounded": [4],
-        "label": [1],
-        "bgColor": [1, "bg-color"],
-        "textColor": [1, "text-color"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["sd-tag"];
-    components.forEach(tagName => { switch (tagName) {
-        case "sd-tag":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), SdTag);
-            }
-            break;
-    } });
-}
-
-export { SdTag as S, defineCustomElement as d };
-//# sourceMappingURL=p-qi6qs5Jb.js.map
-
-//# sourceMappingURL=p-qi6qs5Jb.js.map

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

@@ -1 +0,0 @@
-{"file":"p-qi6qs5Jb.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,q+BAAq+B,CAAC;;ACc9/B,MAAM,UAAU,GAAG;AAClB,IAAA,IAAI,EAAE,yBAAyB;AAC/B,IAAA,GAAG,EAAE,uBAAuB;AAC5B,IAAA,MAAM,EAAE,6BAA6B;AACrC,IAAA,MAAM,EAAE,6BAA6B;AACrC,IAAA,KAAK,EAAE,2BAA2B;AAClC,IAAA,IAAI,EAAE,2CAA2C;AACjD,IAAA,QAAQ,EAAE,mCAAmC;AAC7C,IAAA,MAAM,EAAE,2CAA2C;CACnD;MAOY,KAAK,iBAAAA,kBAAA,CAAA,MAAA,KAAA,SAAAC,CAAA,CAAA;;;;;;;;;IAGT,IAAI,GAAY,IAAI;IACpB,KAAK,GAAa,MAAM;IACxB,OAAO,GAAY,KAAK;IACxB,KAAK,GAAW,EAAE;AAClB,IAAA,OAAO;AACP,IAAA,SAAS;IAET,aAAa,GAAA;QACpB,MAAM,OAAO,GAAG,CAAC,QAAQ,EAAE,CAAW,QAAA,EAAA,IAAI,CAAC,IAAI,CAAE,CAAA,CAAC;AAElD,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AACjB,YAAA,OAAO,CAAC,IAAI,CAAC,iBAAiB,CAAC;;AAGhC,QAAA,IAAI,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YACnD,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;;QAGrC,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,EAAE;AACnC,YAAA,OAAO,CAAC,IAAI,CAAC,sBAAsB,CAAC;;AAGrC,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;IAGjB,aAAa,GAAA;QACpB,OAAO;AACN,YAAA,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC5B,CAAA,CAAA,MAAA,EAAA,IAAA,EAAO,IAAI,CAAC,KAAK,CAAQ,CACnB;SACP;;IAGF,MAAM,GAAA;AACL,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE;AAEvC,QAAA,QACC,CACC,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,UAAU,EACjB,KAAK,EAAE;gBACN,gBAAgB,EAAE,IAAI,CAAC,OAAO;gBAC9B,kBAAkB,EAAE,IAAI,CAAC,SAAS;AAClC,aAAA,EAAA,YAAA,EACW,IAAI,CAAC,KAAK,IAAI,KAAK,EAAA,EAE9B,IAAI,CAAC,aAAa,EAAE,CACf;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-tag/sd-tag.scss?tag=sd-tag&encapsulation=shadow","src/components/sd-tag/sd-tag.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n:host([full-width]) {\n display: block;\n}\n\n.sd-tag {\n display: inline-flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n gap: 8px;\n text-decoration: none;\n border: 1px solid transparent;\n border-radius: 4px;\n transition: all 0.2s ease-in-out;\n position: relative;\n overflow: hidden;\n white-space: nowrap;\n -webkit-user-select: none;\n user-select: none;\n box-sizing: border-box;\n\n &__content {\n  display: inline-block;\n  width: 100%;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n }\n\n &--custom-color {\n  background: var(--tag-bg-color);\n  color: var(--tag-text-color);\n }\n\n &--sm {\n  padding: 0 6px;\n  font-size: 11px;\n  line-height: 18px;\n  height: 20px;\n  border-radius: 4px;\n }\n &--md {\n  padding: 0 8px;\n  font-size: 12px;\n  font-weight: 700;\n  line-height: 20px;\n  height: 24px;\n  border-radius: 4px;\n }\n &--lg {\n  padding: 0 10px;\n  font-size: 14px;\n  font-weight: 700;\n  line-height: 24px;\n  min-height: 28px;\n  border-radius: 5px;\n }\n &--rounded {\n  &.sd-tag--sm {\n   border-radius: 20px;\n  }\n  &.sd-tag--md {\n   border-radius: 20px;\n  }\n  &.sd-tag--lg {\n   border-radius: 15px;\n  }\n }\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\n\nexport type TagColor =\n | 'grey'\n | 'red'\n | 'orange'\n | 'yellow'\n | 'green'\n | 'blue'\n | 'darkblue'\n | 'indigo';\n\nexport type TagSize = 'sm' | 'md' | 'lg';\n\nconst TAG_COLORS = {\n grey: 'bg-grey_20 text-grey_70',\n red: 'bg-red_15 text-red_70',\n orange: 'bg-orange_10 text-orange_65',\n yellow: 'bg-yellow_10 text-yellow_70',\n green: 'bg-green_15 text-green_75',\n blue: 'bg-brilliantblue_20 text-brilliantblue_75',\n darkblue: 'bg-oceanblue_15 text-oceanblue_70',\n indigo: 'bg-brilliantblue_10 text-brilliantblue_85',\n};\n\n@Component({\n tag: 'sd-tag',\n styleUrl: 'sd-tag.scss',\n shadow: true,\n})\nexport class SdTag {\n @Element() el!: HTMLElement;\n\n @Prop() size: TagSize = 'md';\n @Prop() color: TagColor = 'grey';\n @Prop() rounded: boolean = false;\n @Prop() label: string = '';\n @Prop() bgColor?: string;\n @Prop() textColor?: string;\n\n private getTagClasses(): string {\n  const classes = ['sd-tag', `sd-tag--${this.size}`];\n\n  if (this.rounded) {\n   classes.push('sd-tag--rounded');\n  }\n\n  if (this.color && !this.bgColor && !this.textColor) {\n   classes.push(TAG_COLORS[this.color]);\n  }\n\n  if (this.bgColor || this.textColor) {\n   classes.push('sd-tag--custom-color');\n  }\n\n  return classes.join(' ');\n }\n\n private renderContent() {\n  return [\n   <span class=\"sd-tag__content\">\n    <slot>{this.label}</slot>\n   </span>,\n  ];\n }\n\n render() {\n  const tagClasses = this.getTagClasses();\n\n  return (\n   <span\n    class={tagClasses}\n    style={{\n     '--tag-bg-color': this.bgColor,\n     '--tag-text-color': this.textColor,\n    }}\n    aria-label={this.label || 'tag'}\n   >\n    {this.renderContent()}\n   </span>\n  );\n }\n}\n"],"version":3}

package/dist/components/p-xfqZA_70.js

@@ -1,189 +0,0 @@
-import { p as proxyCustomElement, H, c as createEvent, h, t as transformTag } from './p-CR2Jbl0B.js';
-import { n as nanoid } from './p-CCwNgVmC.js';
-import { d as defineCustomElement$5 } from './p-lbT0o9hE.js';
-import { d as defineCustomElement$4 } from './p-C2pN-_wD.js';
-import { d as defineCustomElement$3 } from './p-BdgLMKjb.js';
-import { d as defineCustomElement$2 } from './p-zvhzq4Sw.js';
-import { d as defineCustomElement$1 } from './p-CiNjpVRK.js';
-
-const sdInputCss = () => `sd-icon{display:inline-block;line-height:0}sd-icon .sd-icon--rotate-90{transform:rotate(90deg)}sd-icon .sd-icon--rotate-180{transform:rotate(180deg)}sd-icon .sd-icon--rotate-270{transform:rotate(270deg)}.sd-date-picker{width:100%;display:inline-block}.sd-date-picker .sd-date-picker--disabled .date-icon{cursor:not-allowed !important;color:#888888 !important}.sd-date-picker .sd-date-picker__input{text-align:center !important}.sd-date-picker__menu{width:304px;box-sizing:border-box;border-radius:8px;padding:24px 19px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);background:white}.sd-date-picker__menu .sd-date-picker__header{display:flex;flex-flow:row nowrap;align-items:center;gap:20px;font-size:14px;padding:0 5px;height:24px;line-height:24px}.sd-date-picker__menu .sd-date-picker__header .year-nav,.sd-date-picker__menu .sd-date-picker__header .month-nav{display:flex;flex-flow:row nowrap;align-items:center;gap:12px}.sd-date-picker__menu .sd-date-picker__header .year-nav button,.sd-date-picker__menu .sd-date-picker__header .month-nav button{background:none;border:none;cursor:pointer;margin:0;padding:0}.sd-date-picker__menu .sd-date-picker__header .year-nav__current{width:40px;text-align:center}.sd-date-picker__menu .sd-date-picker__header .month-nav__current{width:100px;text-align:center}.sd-date-picker__menu .sd-date-picker__days{margin-top:8px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:10px;padding:0 5px}.sd-date-picker__menu .sd-date-picker__days .day{width:28px;height:20px;font-size:12px;line-height:20px;text-align:center;color:#888888}.sd-date-picker__menu .sd-date-picker__body{margin-top:12px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr))}sd-date-range-picker{width:fit-content;display:inline-flex}sd-date-range-picker .sd-date-range-picker--disabled .date-icon{cursor:not-allowed !important;color:#888888 !important}sd-date-range-picker .sd-date-range-picker--disabled .sd-input__native{color:#888888 !important}sd-date-range-picker .sd-field .sd-field__control{min-width:210px}sd-date-range-picker .sd-field .sd-input__native{margin-left:17px !important}.sd-date-range-picker__menu{width:609px;box-sizing:border-box;border-radius:8px;padding:24px 19px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);background:white}.sd-date-range-picker__menu .sd-date-range-picker__header{margin-bottom:16px;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center}.sd-date-range-picker__menu .sd-date-range-picker__header .header-label{margin:0 12px;width:40px;text-align:center;font-size:14px;line-height:24px}.sd-date-range-picker__menu .sd-date-range-picker__body{display:flex;flex-flow:row nowrap;align-items:stretch;gap:19px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container{width:266px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header{width:100%;height:24px;line-height:24px;font-size:14px;text-align:center;position:relative;padding:0 5px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button{position:absolute;top:50%;transform:translateY(-50%)}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button.header-button-prev{left:5px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button.header-button-next{right:5px;left:auto}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-days{padding:0 5px;margin-top:8px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:10px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-days .day{width:28px;height:20px;font-size:12px;line-height:20px;text-align:center;color:#888888}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-body{margin-top:12px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr))}.sd-date-range-picker__menu .sd-date-range-picker__body .separator{width:1px;background-color:#d8d8d8}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}input:autofill,input:autofill:hover,input:autofill:focus,input:autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}sd-input{display:inline-flex}sd-input .sd-input__content{width:100%;height:100%;display:flex;flex-flow:row nowrap;align-items:center;color:#333333;font-size:12px;line-height:20px;padding:0 8px}sd-input .sd-input__content .sd-input__native{width:100%;height:100%;border:none;outline:none;background:transparent}sd-input .sd-input__content .sd-input__native[disabled]{cursor:not-allowed;color:#888888}sd-input .sd-input__content .sd-input__native::placeholder{color:#aaaaaa}`;
-
-const SdInput = /*@__PURE__*/ proxyCustomElement(class SdInput extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.input = createEvent(this, "sdUpdate");
-        this.focus = createEvent(this, "sdFocus");
-        this.blur = createEvent(this, "sdBlur");
-    }
-    get host() { return this; }
-    value = null;
-    //  @Prop() name?: string;
-    type = 'text';
-    insideLabel = false;
-    placeholder = '입력해 주세요.';
-    disabled = false;
-    clearable = false;
-    width;
-    barcode = false;
-    rules = [];
-    autoFocus = false;
-    status;
-    inputClass = '';
-    readonly = false;
-    error = false;
-    focused = false;
-    hovered = false;
-    // props - label
-    label = '';
-    useLabelRequired = false;
-    labelTooltip = '';
-    labelTooltipProps = null;
-    //  props - custom styles
-    inputStyle = {};
-    internalValue = null;
-    nativeEl = undefined;
-    formField;
-    name = nanoid();
-    input;
-    focus;
-    blur;
-    valueChanged(newValue) {
-        this.internalValue = newValue;
-    }
-    internalValueChanged(newValue) {
-        if (newValue !== this.value) {
-            this.value = newValue;
-            this.input?.emit(this.value);
-        }
-    }
-    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;
-    };
-    handleFocus = async (type, event) => {
-        this.focused = type === 'focus';
-        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);
-        }
-    };
-    render() {
-        return (h("sd-field", { key: '87f02ba890fd952f89eb86d200318038137ba1a4', 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), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("label", { key: '0bb5824067b33c178b1f60ececdccfe0a3d5f294', class: "sd-input__content", style: { width: '100%' } }, h("slot", { key: '6f67712b4ca708ba511c57379a6b5118732f146a', name: "prefix" }), h("input", { key: 'b337a1161dedb41ed29a690fa963c0ac60dd0c79', 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: 'bf45d9fd71551dc6a3bb96cdc44512796beee923', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: 'aed0a5d9115ba8b7601dc62423349bee1a9978c7', name: "close", color: "grey_65", size: "16", class: "sd-input__clear-icon", onClick: async () => {
-                this.internalValue = '';
-                await this.formField?.sdValidate();
-            } })))));
-    }
-    static get watchers() { return {
-        "value": ["valueChanged"],
-        "internalValue": ["internalValueChanged"]
-    }; }
-    static get style() { return sdInputCss(); }
-}, [772, "sd-input", {
-        "value": [1032],
-        "type": [1],
-        "insideLabel": [4, "inside-label"],
-        "placeholder": [1],
-        "disabled": [4],
-        "clearable": [4],
-        "width": [8],
-        "barcode": [4],
-        "rules": [16],
-        "autoFocus": [4, "auto-focus"],
-        "status": [1],
-        "inputClass": [1, "input-class"],
-        "readonly": [4],
-        "error": [1028],
-        "focused": [1028],
-        "hovered": [1028],
-        "label": [1],
-        "useLabelRequired": [4, "use-label-required"],
-        "labelTooltip": [1, "label-tooltip"],
-        "labelTooltipProps": [16],
-        "inputStyle": [16],
-        "internalValue": [32],
-        "sdGetNativeElement": [64],
-        "sdValidate": [64],
-        "sdReset": [64],
-        "sdResetValidate": [64],
-        "sdFocus": [64]
-    }, undefined, {
-        "value": ["valueChanged"],
-        "internalValue": ["internalValueChanged"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["sd-input", "sd-button", "sd-field", "sd-floating-portal", "sd-icon", "sd-tooltip"];
-    components.forEach(tagName => { switch (tagName) {
-        case "sd-input":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), SdInput);
-            }
-            break;
-        case "sd-button":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$5();
-            }
-            break;
-        case "sd-field":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$4();
-            }
-            break;
-        case "sd-floating-portal":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$3();
-            }
-            break;
-        case "sd-icon":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$2();
-            }
-            break;
-        case "sd-tooltip":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { SdInput as S, defineCustomElement as d };
-//# sourceMappingURL=p-xfqZA_70.js.map
-
-//# sourceMappingURL=p-xfqZA_70.js.map

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

@@ -1 +0,0 @@
-{"file":"p-xfqZA_70.js","mappings":";;;;;;;;AAAA,MAAM,UAAU,GAAG,MAAM,CAAC,s7JAAs7J,CAAC;;MCmBp8J,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;;;;;;;;;;;IAGM,KAAK,GAA4B,IAAI;;IAEtD,IAAI,GAAkC,MAAM;IAC5C,WAAW,GAAY,KAAK;IAC5B,WAAW,GAAW,UAAU;IAChC,QAAQ,GAAY,KAAK;IACzB,SAAS,GAAY,KAAK;AAC1B,IAAA,KAAK;IACL,OAAO,GAAa,KAAK;IACzB,KAAK,GAAY,EAAE;IACnB,SAAS,GAAY,KAAK;AAC1B,IAAA,MAAM;IACN,UAAU,GAAW,EAAE;IACvB,QAAQ,GAAY,KAAK;IACR,KAAK,GAAY,KAAK;IACtB,OAAO,GAAY,KAAK;IACxB,OAAO,GAAY,KAAK;;IAGzC,KAAK,GAAY,EAAE;IACnB,gBAAgB,GAAY,KAAK;IACjC,YAAY,GAAW,EAAE;IACzB,iBAAiB,GAA0B,IAAI;;IAG/C,UAAU,GAA8B,EAAE;IAEjC,aAAa,GAA2B,IAAI;IAErD,QAAQ,GAAiC,SAAS;AAClD,IAAA,SAAS;IACjB,IAAI,GAAG,MAAM,EAAE;AAEmB,IAAA,KAAK;AACN,IAAA,KAAK;AACN,IAAA,IAAI;AAGpC,IAAA,YAAY,CAAC,QAAgC,EAAA;AAC5C,QAAA,IAAI,CAAC,aAAa,GAAG,QAAQ;;AAI9B,IAAA,oBAAoB,CAAC,QAAgC,EAAA;AACpD,QAAA,IAAI,QAAQ,KAAK,IAAI,CAAC,KAAK,EAAE;AAC5B,YAAA,IAAI,CAAC,KAAK,GAAG,QAAQ;YACrB,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;;;AAK9B,IAAA,MAAM,kBAAkB,GAAA;AACvB,QAAA,OAAO,IAAI,CAAC,QAAQ,IAAI,IAAI;;AAI7B,IAAA,MAAM,UAAU,GAAA;AACf,QAAA,IAAI,CAAC,SAAS,EAAE,UAAU,EAAE;;AAI7B,IAAA,MAAM,OAAO,GAAA;AACZ,QAAA,IAAI,CAAC,SAAS,EAAE,OAAO,EAAE;;AAI1B,IAAA,MAAM,eAAe,GAAA;AACpB,QAAA,IAAI,CAAC,SAAS,EAAE,iBAAiB,EAAE;;AAIpC,IAAA,MAAM,OAAO,GAAA;AACZ,QAAA,IAAI,CAAC,SAAS,EAAE,OAAO,EAAE;;IAG1B,iBAAiB,GAAA;AAChB,QAAA,IAAI,IAAI,CAAC,KAAK,EAAE;AACf,YAAA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK;;;IAIjC,gBAAgB,GAAA;AACf,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;AACnB,YAAA,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE;;;AAIhB,IAAA,WAAW,GAAG,CAAC,KAAY,KAAI;AACtC,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B;AAC/C,QAAA,IAAI,CAAC,aAAa,GAAG,MAAM,CAAC,KAAK;AAClC,KAAC;AAEO,IAAA,WAAW,GAAG,OAAO,IAAsB,EAAE,KAAY,KAAI;AACpE,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI,KAAK,OAAO;AAE/B,QAAA,IAAI,IAAI,KAAK,MAAM,EAAE;;AAEpB,YAAA,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;AACxC,gBAAA,MAAM,IAAI,CAAC,SAAS,EAAE,UAAU,EAAE;;AAEnC,YAAA,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC;;aAChB;AACN,YAAA,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC;;AAEzB,KAAC;IAED,MAAM,GAAA;AACL,QAAA,QACC,CACC,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EACzC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,EAChC,YAAY,EAAE,OAAO,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,EACzC,YAAY,EAAE,OAAO,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,EAAA,EAE1C,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAA,EACxD,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAQ,CAAA,EAC3B,CACC,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC,EAC/B,KAAK,EAAE,CAAA,iBAAA,EAAoB,IAAI,CAAC,UAAU,CAAE,CAAA,EAC5C,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,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,OAAO,EAAE,KAAK,IAAI,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,EAClD,MAAM,EAAE,KAAK,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,KAAK,CAAC,EAChD,KAAK,EAAE,IAAI,CAAC,UAAU,EACrB,CAAA,EACF,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAQ,CAAA,EAC1B,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,aAAa,KACpC,CACC,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,sBAAsB,EAC5B,OAAO,EAAE,YAAW;AACnB,gBAAA,IAAI,CAAC,aAAa,GAAG,EAAE;AACvB,gBAAA,MAAM,IAAI,CAAC,SAAS,EAAE,UAAU,EAAE;AACnC,aAAC,EACA,CAAA,CACF,CACM,CACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-input/sd-input.scss?tag=sd-input","src/components/sd-input/sd-input.tsx"],"sourcesContent":["@import 'variables';\n@import '../sd-icon/sd-icon.scss';\n@import '../sd-date-picker/sd-date-picker.scss';\n@import '../sd-date-range-picker/sd-date-range-picker.scss';\n\ninput:-webkit-autofill,\ninput:-webkit-autofill:hover,\ninput:-webkit-autofill:focus,\ninput:-webkit-autofill:active {\n -webkit-text-fill-color: #000;\n -webkit-box-shadow: 0 0 0px 1000px #fff inset;\n box-shadow: 0 0 0px 1000px #fff inset;\n transition: background-color 5000s ease-in-out 0s;\n}\n\ninput:autofill,\ninput:autofill:hover,\ninput:autofill:focus,\ninput:autofill:active {\n -webkit-text-fill-color: #000;\n -webkit-box-shadow: 0 0 0px 1000px #fff inset;\n box-shadow: 0 0 0px 1000px #fff inset;\n transition: background-color 5000s ease-in-out 0s;\n}\n\nsd-input {\n display: inline-flex;\n\n .sd-input__content {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  color: $grey_90;\n  font-size: 12px;\n  line-height: 20px;\n  padding: 0 8px;\n  .sd-input__native {\n   width: 100%;\n   height: 100%;\n   border: none;\n   outline: none;\n   background: transparent;\n\n   &[disabled] {\n    cursor: not-allowed;\n    color: $grey_65;\n   }\n\n   &::placeholder {\n    color: $grey_55;\n   }\n  }\n }\n}\n","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  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    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"],"version":3}