@sellmate/design-system 1.0.16 → 1.0.17

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

@@ -1,353 +1 @@
-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$6 } from './p-lbT0o9hE.js';
-import { d as defineCustomElement$5 } from './p-C2pN-_wD.js';
-import { d as defineCustomElement$4 } from './p-BdgLMKjb.js';
-import { d as defineCustomElement$3 } from './p-zvhzq4Sw.js';
-import { d as defineCustomElement$2 } from './p-CiNjpVRK.js';
-
-const sdNumberInputCss = () => `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-number-input .sd-number-input{box-sizing:border-box;display:flex;width:var(--input-width, 100%);align-items:center;height:28px;padding:4px 8px;border-radius:4px;color:#333333;font-size:12px;line-height:20px;position:relative}sd-number-input .sd-number-input .sd-number-input__input{display:block;width:100%;height:20px;line-height:20px;border:none;outline:none;background:transparent;font-size:inherit;color:#333333;margin-left:4px;margin-right:4px;padding-block:0;padding-inline:0;text-align:right}sd-number-input .sd-number-input .sd-number-input__input[disabled]{cursor:not-allowed;color:#888888}sd-number-input .sd-number-input .sd-number-input__input::placeholder{font-size:12px;height:20px;line-height:20px;color:#aaaaaa}sd-number-input .sd-number-input .sd-number-input__clear-icon{cursor:pointer;margin-left:8px}sd-number-input .sd-number-input .sd-number-input__buttons{padding:4px;display:flex;justify-content:space-between;align-items:center;position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity 0.2s ease}sd-number-input .sd-number-input .sd-number-input__button{width:20px;height:20px;border:none;border-radius:2px;background-color:#eff6ff;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;margin:0;transition:background-color 0.2s ease}sd-number-input .sd-number-input .sd-number-input__button:hover:not(:disabled){background-color:#e6f1ff}sd-number-input .sd-number-input .sd-number-input__button:disabled{background-color:#eeeeee;cursor:not-allowed}sd-number-input .sd-number-input .sd-number-input__button--decrement{border-bottom-left-radius:0;border-bottom-right-radius:0}sd-number-input .sd-number-input .sd-number-input__button--increment{border-top-left-radius:0;border-top-right-radius:0}sd-number-input .sd-number-input .sd-number-input__label{margin-bottom:8px;font-weight:500;color:#333333}sd-number-input:focus-within .sd-number-input__buttons{opacity:1;pointer-events:auto}sd-number-input:focus-within .sd-number-input{border-color:#0075ff;box-shadow:0 0 4px 0 rgba(0, 113, 255, 0.4)}`;
-
-const SdNumberInput$1 = /*@__PURE__*/ proxyCustomElement(class SdNumberInput extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.update = createEvent(this, "sdUpdate");
-        this.focus = createEvent(this, "sdFocus");
-        this.blur = createEvent(this, "sdBlur");
-    }
-    get el() { return this; }
-    min = Number.NEGATIVE_INFINITY;
-    max = Number.POSITIVE_INFINITY;
-    step = 1;
-    useButton = false;
-    useDecimal = false;
-    value = null;
-    label;
-    insideLabel = false;
-    placeholder = '입력해 주세요.';
-    disabled = false;
-    width;
-    rules = [];
-    autoFocus = false;
-    status;
-    inputClass = '';
-    readonly = false;
-    inputStyle = {};
-    error = false;
-    focused = false;
-    hovered = false;
-    internalValue = null;
-    displayValue = '';
-    nativeEl = undefined;
-    formField;
-    name = nanoid();
-    update;
-    focus;
-    blur;
-    formatWithCommas(value) {
-        if (value === null || value === undefined)
-            return '';
-        const isNegative = value < 0;
-        const absValue = Math.abs(value);
-        const [intPart, decPart] = absValue.toString().split('.');
-        const formatted = (+intPart).toLocaleString();
-        const result = isNegative ? '-' + formatted : formatted;
-        return decPart ? result + '.' + decPart : String(result);
-    }
-    parseInput(input) {
-        if (!input || input.trim() === '')
-            return null;
-        const cleaned = input.replace(/,/g, '').trim();
-        // -로 시작을 할 수 있을 수 있고, 소수점 0.n | .n
-        if (!/^-?(\d+\.?\d*|\d*\.\d+)$/.test(cleaned)) {
-            return null;
-        }
-        const parsed = parseFloat(cleaned);
-        if (isNaN(parsed))
-            return null;
-        // 소수점 사용 하지 않는데 . 이 있는 경우
-        if (!this.useDecimal && cleaned.includes('.')) {
-            return null;
-        }
-        return parsed;
-    }
-    clampMinMax(value) {
-        return Math.min(Math.max(value, this.min), this.max);
-    }
-    updateDisplay() {
-        this.displayValue = this.formatWithCommas(this.internalValue);
-    }
-    isIncrementDisabled() {
-        if (this.disabled || this.readonly)
-            return true;
-        if (this.internalValue !== null) {
-            return this.internalValue >= this.max;
-        }
-        return false;
-    }
-    isDecrementDisabled() {
-        if (this.disabled || this.readonly)
-            return true;
-        if (this.internalValue !== null) {
-            return this.internalValue <= this.min;
-        }
-        return false;
-    }
-    valueChanged(newValue) {
-        if (newValue === null || newValue === '') {
-            this.internalValue = null;
-        }
-        else {
-            const parsed = typeof newValue === 'string' ? this.parseInput(newValue) : newValue;
-            if (parsed !== null) {
-                this.internalValue = this.clampMinMax(parsed);
-            }
-        }
-        this.updateDisplay();
-    }
-    internalValueChanged(newValue) {
-        this.updateDisplay();
-        if (newValue !== this.value) {
-            this.value = newValue;
-            this.update?.emit(newValue);
-        }
-    }
-    async sdValidate() {
-        this.formField?.sdValidate();
-    }
-    async sdReset() {
-        this.formField?.sdReset();
-    }
-    async sdResetValidate() {
-        this.formField?.sdResetValidation();
-    }
-    async sdFocus() {
-        this.formField?.sdFocus();
-    }
-    componentWillLoad() {
-        if (this.value !== null && this.value !== undefined) {
-            const parsed = typeof this.value === 'string' ? this.parseInput(this.value) : this.value;
-            if (parsed !== null) {
-                this.internalValue = this.clampMinMax(parsed);
-            }
-        }
-        this.updateDisplay();
-    }
-    // TODO: 현재 숫자를 크게 넣어서 숫자e+21등의 형식으로 변환되면 값이 바뀌지않음 수정 필요
-    handleInput = (event) => {
-        const target = event.target;
-        const inputValue = target.value;
-        if (inputValue === '') {
-            this.internalValue = null;
-            this.displayValue = '';
-            return;
-        }
-        const commasRemoved = inputValue.replace(/,/g, '');
-        // 만약에 소수점 (.) 이 여러개 일 경우
-        const decimalCount = (commasRemoved.match(/\./g) || []).length;
-        if (decimalCount > 1) {
-            target.value = this.displayValue;
-            return;
-        }
-        // 가능: "-", ".", "-." (단순 기호만 있는 경우)
-        if (commasRemoved === '-' || commasRemoved === '.' || commasRemoved === '-.') {
-            target.value = commasRemoved;
-            return;
-        }
-        // 숫자 뒤에 . 이 있는 경우 (예: "1000.") -> 콤마 포맷 적용 + . 유지
-        if (commasRemoved.endsWith('.') && decimalCount === 1) {
-            const numberPart = commasRemoved.slice(0, -1);
-            const parsed = this.parseInput(numberPart);
-            if (parsed !== null) {
-                const formatted = this.formatWithCommas(parsed);
-                target.value = formatted + '.';
-                return;
-            }
-        }
-        const parsed = this.parseInput(commasRemoved);
-        if (parsed !== null) {
-            if (parsed < this.min) {
-                target.value = this.displayValue;
-                return;
-            }
-            if (parsed > this.max) {
-                target.value = this.displayValue;
-                return;
-            }
-            this.internalValue = parsed;
-            this.displayValue = this.formatWithCommas(parsed);
-            target.value = this.displayValue;
-        }
-        else {
-            target.value = this.displayValue;
-        }
-    };
-    handleFocus = (event) => {
-        this.focus?.emit(event);
-    };
-    handleBlur = async (event) => {
-        this.updateDisplay();
-        if (this.nativeEl) {
-            this.nativeEl.value = this.displayValue;
-        }
-        if (this.rules && this.rules.length > 0) {
-            await this.formField?.sdValidate();
-        }
-        this.focused = false;
-        this.blur?.emit(event);
-    };
-    handleKeyDown = (event) => {
-        if (event.key === 'ArrowUp') {
-            event.preventDefault();
-            this.handleIncrement();
-        }
-        else if (event.key === 'ArrowDown') {
-            event.preventDefault();
-            this.handleDecrement();
-        }
-    };
-    handleIncrement = () => {
-        if (this.isIncrementDisabled())
-            return;
-        const currentVal = this.internalValue ?? this.min ?? 0;
-        let nextVal = currentVal + this.step;
-        if (nextVal > this.max) {
-            nextVal = this.max;
-        }
-        if (nextVal === currentVal)
-            return;
-        this.internalValue = nextVal;
-    };
-    handleDecrement = () => {
-        if (this.isDecrementDisabled())
-            return;
-        const currentVal = this.internalValue ?? this.min ?? 0;
-        let nextVal = currentVal - this.step;
-        if (nextVal < this.min) {
-            nextVal = this.min;
-        }
-        if (nextVal === currentVal)
-            return;
-        this.internalValue = nextVal;
-    };
-    async sdGetNativeElement() {
-        return this.nativeEl || null;
-    }
-    getInputStatus() {
-        if (this.disabled)
-            return 'sd-number-input--disabled';
-        if (this.hovered)
-            return 'sd-number-input--hovered';
-        if (this.status)
-            return `sd-number-input--${this.status}`;
-        if (this.error)
-            return 'sd-number-input--error';
-        return '';
-    }
-    render() {
-        const inputWidth = this.width
-            ? {
-                '--input-width': typeof this.width === 'number' ? `${this.width}px` : this.width,
-            }
-            : {};
-        const inputStyles = {
-            textAlign: this.useButton ? 'center' : 'right',
-        };
-        return (h("sd-field", { key: 'ea231ae67c1e209d4c9adca87bd9760bcd28ec51', 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, ref: el => (this.formField = el), style: inputWidth }, h("label", { key: '76bbc2fb1e36d25887ac0559ff7f34617a35883e', class: {
-                'sd-number-input': true,
-                [this.getInputStatus()]: true,
-                'sd-number-input--with-buttons': this.useButton,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("input", { key: '7978c4e8383017b9a8213e827f92c2d9ccc7b275', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__input ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, style: inputStyles, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.useButton && (h("div", { key: 'aff328615ab939724ee0f77f4b7ac8b046eb16d1', class: "sd-number-input__buttons" }, h("button", { key: 'a27a592cc4e74b3272e3473988dbd877e9d0afd3', type: "button", class: {
-                'sd-number-input__button': true,
-                'sd-number-input__button--decrement': true,
-            }, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: '79853e0a9ab38cfaafbd8027dae1a0732702d5bc', name: "minus", size: 12, color: this.isDecrementDisabled() ? 'grey_45' : 'brilliantblue_70' })), h("button", { key: '0993c22719cdbdf3982dea138653ba1f2f6aa523', type: "button", class: {
-                'sd-number-input__button': true,
-                'sd-number-input__button--increment': true,
-            }, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: '6da02951a443a1a46fd44f6bd7c1a7ed41af0b01', name: "add", size: 12, color: this.isIncrementDisabled() ? 'grey_45' : 'brilliantblue_70' })))))));
-    }
-    static get watchers() { return {
-        "value": ["valueChanged"],
-        "internalValue": ["internalValueChanged"]
-    }; }
-    static get style() { return sdNumberInputCss(); }
-}, [768, "sd-number-input", {
-        "min": [2],
-        "max": [2],
-        "step": [2],
-        "useButton": [4, "use-button"],
-        "useDecimal": [4, "use-decimal"],
-        "value": [1032],
-        "label": [1],
-        "insideLabel": [4, "inside-label"],
-        "placeholder": [1],
-        "disabled": [4],
-        "width": [8],
-        "rules": [16],
-        "autoFocus": [4, "auto-focus"],
-        "status": [1],
-        "inputClass": [1, "input-class"],
-        "readonly": [4],
-        "inputStyle": [16],
-        "error": [1028],
-        "focused": [1028],
-        "hovered": [1028],
-        "internalValue": [32],
-        "displayValue": [32],
-        "sdValidate": [64],
-        "sdReset": [64],
-        "sdResetValidate": [64],
-        "sdFocus": [64],
-        "sdGetNativeElement": [64]
-    }, undefined, {
-        "value": ["valueChanged"],
-        "internalValue": ["internalValueChanged"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["sd-number-input", "sd-button", "sd-field", "sd-floating-portal", "sd-icon", "sd-tooltip"];
-    components.forEach(tagName => { switch (tagName) {
-        case "sd-number-input":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), SdNumberInput$1);
-            }
-            break;
-        case "sd-button":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$6();
-            }
-            break;
-        case "sd-field":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$5();
-            }
-            break;
-        case "sd-floating-portal":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$4();
-            }
-            break;
-        case "sd-icon":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$3();
-            }
-            break;
-        case "sd-tooltip":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const SdNumberInput = SdNumberInput$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SdNumberInput, defineCustomElement };
-//# sourceMappingURL=sd-number-input.js.map
-
-//# sourceMappingURL=sd-number-input.js.map
+import{p as t,H as e,c as s,h as i,t as n}from"./p-4iQAU7kM.js";import{n as r}from"./p-CCwNgVmC.js";import{d as u}from"./p-BJ1sZUZE.js";import{d}from"./p-B1d3IESD.js";import{d as a}from"./p-BRSMWd2J.js";import{d as o}from"./p-IlOHs7VA.js";import{d as l}from"./p-DGXSqFYF.js";const h=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.update=s(this,"sdUpdate"),this.focus=s(this,"sdFocus"),this.blur=s(this,"sdBlur")}get el(){return this}min=-1/0;max=1/0;step=1;useButton=!1;useDecimal=!1;value=null;label;insideLabel=!1;placeholder="입력해 주세요.";disabled=!1;width;rules=[];autoFocus=!1;status;inputClass="";readonly=!1;inputStyle={};error=!1;focused=!1;hovered=!1;internalValue=null;displayValue="";nativeEl=void 0;formField;name=r();update;focus;blur;formatWithCommas(t){if(null==t)return"";const e=t<0,s=Math.abs(t),[i,n]=(""+s).split("."),r=(+i).toLocaleString(),u=e?"-"+r:r;return n?u+"."+n:u+""}parseInput(t){if(!t||""===t.trim())return null;const e=t.replace(/,/g,"").trim();if(!/^-?(\d+\.?\d*|\d*\.\d+)$/.test(e))return null;const s=parseFloat(e);return isNaN(s)||!this.useDecimal&&e.includes(".")?null:s}clampMinMax(t){return Math.min(Math.max(t,this.min),this.max)}updateDisplay(){this.displayValue=this.formatWithCommas(this.internalValue)}isIncrementDisabled(){return!(!this.disabled&&!this.readonly)||null!==this.internalValue&&this.internalValue>=this.max}isDecrementDisabled(){return!(!this.disabled&&!this.readonly)||null!==this.internalValue&&this.internalValue<=this.min}valueChanged(t){if(null===t||""===t)this.internalValue=null;else{const e="string"==typeof t?this.parseInput(t):t;null!==e&&(this.internalValue=this.clampMinMax(e))}this.updateDisplay()}internalValueChanged(t){this.updateDisplay(),t!==this.value&&(this.value=t,this.update?.emit(t))}async sdValidate(){this.formField?.sdValidate()}async sdReset(){this.formField?.sdReset()}async sdResetValidate(){this.formField?.sdResetValidation()}async sdFocus(){this.formField?.sdFocus()}componentWillLoad(){if(null!=this.value){const t="string"==typeof this.value?this.parseInput(this.value):this.value;null!==t&&(this.internalValue=this.clampMinMax(t))}this.updateDisplay()}handleInput=t=>{const e=t.target,s=e.value;if(""===s)return this.internalValue=null,void(this.displayValue="");const i=s.replace(/,/g,""),n=(i.match(/\./g)||[]).length;if(n>1)return void(e.value=this.displayValue);if("-"===i||"."===i||"-."===i)return void(e.value=i);if(i.endsWith(".")&&1===n){const t=i.slice(0,-1),s=this.parseInput(t);if(null!==s){const t=this.formatWithCommas(s);return void(e.value=t+".")}}const r=this.parseInput(i);if(null!==r){if(r<this.min)return void(e.value=this.displayValue);if(r>this.max)return void(e.value=this.displayValue);this.internalValue=r,this.displayValue=this.formatWithCommas(r),e.value=this.displayValue}else e.value=this.displayValue};handleFocus=t=>{this.focus?.emit(t)};handleBlur=async t=>{this.updateDisplay(),this.nativeEl&&(this.nativeEl.value=this.displayValue),this.rules&&this.rules.length>0&&await(this.formField?.sdValidate()),this.focused=!1,this.blur?.emit(t)};handleKeyDown=t=>{"ArrowUp"===t.key?(t.preventDefault(),this.handleIncrement()):"ArrowDown"===t.key&&(t.preventDefault(),this.handleDecrement())};handleIncrement=()=>{if(this.isIncrementDisabled())return;const t=this.internalValue??this.min??0;let e=t+this.step;e>this.max&&(e=this.max),e!==t&&(this.internalValue=e)};handleDecrement=()=>{if(this.isDecrementDisabled())return;const t=this.internalValue??this.min??0;let e=t-this.step;e<this.min&&(e=this.min),e!==t&&(this.internalValue=e)};async sdGetNativeElement(){return this.nativeEl||null}getInputStatus(){return this.disabled?"sd-number-input--disabled":this.hovered?"sd-number-input--hovered":this.status?"sd-number-input--"+this.status:this.error?"sd-number-input--error":""}render(){const t={textAlign:this.useButton?"center":"right"};return i("sd-field",{key:"ea231ae67c1e209d4c9adca87bd9760bcd28ec51",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,ref:t=>this.formField=t,style:this.width?{"--input-width":"number"==typeof this.width?this.width+"px":this.width}:{}},i("label",{key:"76bbc2fb1e36d25887ac0559ff7f34617a35883e",class:{"sd-number-input":!0,[this.getInputStatus()]:!0,"sd-number-input--with-buttons":this.useButton},onMouseEnter:()=>this.hovered=!0,onMouseLeave:()=>this.hovered=!1,style:this.inputStyle},i("input",{key:"7978c4e8383017b9a8213e827f92c2d9ccc7b275",name:this.name,ref:t=>this.nativeEl=t,class:"sd-number-input__input "+this.inputClass,type:"text",inputMode:"numeric",value:this.displayValue,placeholder:this.placeholder,disabled:this.disabled,readonly:this.readonly,autofocus:this.autoFocus,onInput:this.handleInput,onKeyDown:this.handleKeyDown,style:t,onFocus:this.handleFocus,onBlur:this.handleBlur}),this.useButton&&i("div",{key:"aff328615ab939724ee0f77f4b7ac8b046eb16d1",class:"sd-number-input__buttons"},i("button",{key:"a27a592cc4e74b3272e3473988dbd877e9d0afd3",type:"button",class:{"sd-number-input__button":!0,"sd-number-input__button--decrement":!0},disabled:this.isDecrementDisabled(),onClick:this.handleDecrement,tabindex:-1},i("sd-icon",{key:"79853e0a9ab38cfaafbd8027dae1a0732702d5bc",name:"minus",size:12,color:this.isDecrementDisabled()?"grey_45":"brilliantblue_70"})),i("button",{key:"0993c22719cdbdf3982dea138653ba1f2f6aa523",type:"button",class:{"sd-number-input__button":!0,"sd-number-input__button--increment":!0},disabled:this.isIncrementDisabled(),onClick:this.handleIncrement,tabindex:-1},i("sd-icon",{key:"6da02951a443a1a46fd44f6bd7c1a7ed41af0b01",name:"add",size:12,color:this.isIncrementDisabled()?"grey_45":"brilliantblue_70"})))))}static get watchers(){return{value:[{valueChanged:0}],internalValue:[{internalValueChanged:0}]}}static get style(){return"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-number-input .sd-number-input{box-sizing:border-box;display:flex;width:var(--input-width, 100%);align-items:center;height:28px;padding:4px 8px;border-radius:4px;color:#333333;font-size:12px;line-height:20px;position:relative}sd-number-input .sd-number-input .sd-number-input__input{display:block;width:100%;height:20px;line-height:20px;border:none;outline:none;background:transparent;font-size:inherit;color:#333333;margin-left:4px;margin-right:4px;padding-block:0;padding-inline:0;text-align:right}sd-number-input .sd-number-input .sd-number-input__input[disabled]{cursor:not-allowed;color:#888888}sd-number-input .sd-number-input .sd-number-input__input::placeholder{font-size:12px;height:20px;line-height:20px;color:#aaaaaa}sd-number-input .sd-number-input .sd-number-input__clear-icon{cursor:pointer;margin-left:8px}sd-number-input .sd-number-input .sd-number-input__buttons{padding:4px;display:flex;justify-content:space-between;align-items:center;position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity 0.2s ease}sd-number-input .sd-number-input .sd-number-input__button{width:20px;height:20px;border:none;border-radius:2px;background-color:#eff6ff;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;margin:0;transition:background-color 0.2s ease}sd-number-input .sd-number-input .sd-number-input__button:hover:not(:disabled){background-color:#e6f1ff}sd-number-input .sd-number-input .sd-number-input__button:disabled{background-color:#eeeeee;cursor:not-allowed}sd-number-input .sd-number-input .sd-number-input__button--decrement{border-bottom-left-radius:0;border-bottom-right-radius:0}sd-number-input .sd-number-input .sd-number-input__button--increment{border-top-left-radius:0;border-top-right-radius:0}sd-number-input .sd-number-input .sd-number-input__label{margin-bottom:8px;font-weight:500;color:#333333}sd-number-input:focus-within .sd-number-input__buttons{opacity:1;pointer-events:auto}sd-number-input:focus-within .sd-number-input{border-color:#0075ff;box-shadow:0 0 4px 0 rgba(0, 113, 255, 0.4)}"}},[512,"sd-number-input",{min:[2],max:[2],step:[2],useButton:[4,"use-button"],useDecimal:[4,"use-decimal"],value:[1032],label:[1],insideLabel:[4,"inside-label"],placeholder:[1],disabled:[4],width:[8],rules:[16],autoFocus:[4,"auto-focus"],status:[1],inputClass:[1,"input-class"],readonly:[4],inputStyle:[16],error:[1028],focused:[1028],hovered:[1028],internalValue:[32],displayValue:[32],sdValidate:[64],sdReset:[64],sdResetValidate:[64],sdFocus:[64],sdGetNativeElement:[64]},void 0,{value:[{valueChanged:0}],internalValue:[{internalValueChanged:0}]}]),p=h,b=function(){"undefined"!=typeof customElements&&["sd-number-input","sd-button","sd-field","sd-floating-portal","sd-icon","sd-tooltip"].forEach((t=>{switch(t){case"sd-number-input":customElements.get(n(t))||customElements.define(n(t),h);break;case"sd-button":customElements.get(n(t))||u();break;case"sd-field":customElements.get(n(t))||d();break;case"sd-floating-portal":customElements.get(n(t))||a();break;case"sd-icon":customElements.get(n(t))||o();break;case"sd-tooltip":customElements.get(n(t))||l()}}))};export{p as SdNumberInput,b as defineCustomElement}

package/dist/components/sd-pagination.js

@@ -1,9 +1 @@
-import { S as SdPagination$1, d as defineCustomElement$1 } from './p-DUh9r-hn.js';
-
-const SdPagination = SdPagination$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SdPagination, defineCustomElement };
-//# sourceMappingURL=sd-pagination.js.map
-
-//# sourceMappingURL=sd-pagination.js.map
+import{S as s,d as o}from"./p-BSPYsa_p.js";const p=s,a=o;export{p as SdPagination,a as defineCustomElement}

package/dist/components/sd-popover.js

@@ -1,110 +1 @@
-import { p as proxyCustomElement, H, h, F as Fragment, t as transformTag } from './p-CR2Jbl0B.js';
-import { T as TooltipArrow } from './p-hwPQdJr0.js';
-import { d as defineCustomElement$4 } from './p-lbT0o9hE.js';
-import { d as defineCustomElement$3 } from './p-BdgLMKjb.js';
-import { d as defineCustomElement$2 } from './p-zvhzq4Sw.js';
-
-const sdPopoverCss = () => `sd-popover{position:relative;cursor:pointer;display:inline-flex}`;
-
-const SdPopover$1 = /*@__PURE__*/ proxyCustomElement(class SdPopover extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-    }
-    get el() { return this; }
-    show = false;
-    placement = 'bottom';
-    color = '#01BB4B';
-    icon = 'helpOutline';
-    iconSize = 12;
-    label = '';
-    buttonSize = 'sm';
-    buttonVariant = 'primary';
-    menuTitle;
-    messages = [];
-    buttons = [];
-    menuClass = '';
-    noHover = true;
-    useClose = false;
-    showPopover = false;
-    slotContent = '';
-    watchShowHandler(newValue) {
-        this.showPopover = newValue;
-    }
-    componentWillLoad() {
-        this.showPopover = this.show;
-        this.slotContent = this.el.innerHTML;
-    }
-    buttonEl;
-    handleClose = () => {
-        this.showPopover = false;
-    };
-    render() {
-        return (h(Fragment, { key: '883bea0d5ef88bb63b4a1a2d778aedf0bce6f000' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (h("sd-floating-portal", { key: '748b76d151dce05cffdd97d9803a96f14554ad3b', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: '36bd2a265c89589b13e67107d57e8045a87d6b40', class: {
-                'sd-floating-menu': true,
-                [`sd-floating-menu--${this.placement}`]: true,
-                [this.menuClass]: !!this.menuClass,
-            } }, h("i", { key: 'cd9b298e666ce898c83576c869e60e1e5e0bb38f', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '79012e2c547a71e2084958925445ac26a8bbf7fe' })), h("div", { key: '0664419fe24318ced7cbca2da1b9e0741c48f333', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: 'a3f9238db85a7ca245cb5f794e1a9249742c3b42', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '56696f99a5400276c099a8ca69f904b4a932802c', class: "sd-floating-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: 'cbdf8231857ccb20156d25758dbe2d1809e28656', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("button", { key: 'a2f249d05c6cd40d24005307d78aea95a841b0b8', title: "close", class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '13ba057c4acf7ae65cfe8d722fe8bdb69ce506ac', name: "close", size: "12", color: "gery_55" }))))))));
-    }
-    static get watchers() { return {
-        "show": ["watchShowHandler"]
-    }; }
-    static get style() { return sdPopoverCss(); }
-}, [768, "sd-popover", {
-        "show": [1028],
-        "placement": [513],
-        "color": [513],
-        "icon": [513],
-        "iconSize": [514, "icon-size"],
-        "label": [1],
-        "buttonSize": [513, "button-size"],
-        "buttonVariant": [513, "button-variant"],
-        "menuTitle": [513, "title"],
-        "messages": [16],
-        "buttons": [16],
-        "menuClass": [1, "menu-class"],
-        "noHover": [4, "no-hover"],
-        "useClose": [4, "use-close"],
-        "showPopover": [32],
-        "slotContent": [32]
-    }, undefined, {
-        "show": ["watchShowHandler"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["sd-popover", "sd-button", "sd-floating-portal", "sd-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "sd-popover":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), SdPopover$1);
-            }
-            break;
-        case "sd-button":
-            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;
-    } });
-}
-
-const SdPopover = SdPopover$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SdPopover, defineCustomElement };
-//# sourceMappingURL=sd-popover.js.map
-
-//# sourceMappingURL=sd-popover.js.map
+import{p as s,H as e,h as t,F as o,t as i}from"./p-4iQAU7kM.js";import{T as n}from"./p-BE_euN7G.js";import{d as a}from"./p-BJ1sZUZE.js";import{d}from"./p-BRSMWd2J.js";import{d as c}from"./p-IlOHs7VA.js";const l=s(class extends e{constructor(s){super(),!1!==s&&this.__registerHost()}get el(){return this}show=!1;placement="bottom";color="#01BB4B";icon="helpOutline";iconSize=12;label="";buttonSize="sm";buttonVariant="primary";menuTitle;messages=[];buttons=[];menuClass="";noHover=!0;useClose=!1;showPopover=!1;slotContent="";watchShowHandler(s){this.showPopover=s}componentWillLoad(){this.showPopover=this.show,this.slotContent=this.el.innerHTML}buttonEl;handleClose=()=>{this.showPopover=!1};render(){return t(o,{key:"883bea0d5ef88bb63b4a1a2d778aedf0bce6f000"},this.label?t("sd-button",{ref:s=>this.buttonEl=s,label:this.label,icon:this.icon,size:this.buttonSize,color:this.color,variant:this.buttonVariant,class:"sd-popover",onSdClick:()=>this.showPopover=!this.showPopover}):t("sd-icon",{ref:s=>this.buttonEl=s,name:this.icon,size:this.iconSize,color:this.color,class:"sd-popover",onClick:()=>this.showPopover=!this.showPopover}),this.showPopover&&t("sd-floating-portal",{key:"f38658d537cd8cebb84e579b02c73209e8a81d3a",parentRef:this.buttonEl,onSdClose:this.handleClose,placement:this.placement},t("div",{key:"472702d7d51c08051670012fc2e930f41ad7f1b5",class:{"sd-floating-menu":!0,["sd-floating-menu--"+this.placement]:!0,[this.menuClass]:!!this.menuClass}},t("i",{key:"1895eba14b74f393c7221db83fdf97e9a8f3a1aa",class:"sd-floating-menu__arrow sd-floating-menu__arrow--"+this.placement},t(n,{key:"4307eb8e750dc36cae5477b366a4ea08a59a5a45"})),t("div",{key:"840d94cf1d4e3c63346cd48a2d47c1c0b0633046",class:"sd-floating-menu__content"},this.menuTitle&&t("div",{key:"ede807dfdb2efc2a8bf8f89ef597965092c79211",class:"sd-floating-menu__title"},this.menuTitle),this.messages.length>0&&t("div",{key:"613ea1b46810eec1958b735fc23811d66ff2ebf8",class:"sd-floating-menu__messages"},this.messages.map((s=>t("div",null,s)))),this.buttons.length>0&&t("div",{key:"06712ed73687c0e99778d5fda6d75a4e07d815dd",class:"sd-floating-menu__buttons sd-floating-menu__buttons--"+this.buttons.length},this.buttons.map((s=>t("sd-button",{...s}))))),this.useClose&&t("button",{key:"20d628d8d31bd6464c26f3cf5ba894c5c3a2428f",title:"close",class:"sd-floating-menu__close-button",onClick:()=>this.handleClose()},t("sd-icon",{key:"cd1dcbe02ed55a25364e88621db5ab287eb7ed8e",name:"close",size:"12",color:"gery_55"})))))}static get watchers(){return{show:[{watchShowHandler:0}]}}static get style(){return"sd-popover{position:relative;cursor:pointer;display:inline-flex}"}},[512,"sd-popover",{show:[1028],placement:[513],color:[513],icon:[513],iconSize:[514,"icon-size"],label:[1],buttonSize:[513,"button-size"],buttonVariant:[513,"button-variant"],menuTitle:[513,"title"],messages:[16],buttons:[16],menuClass:[1,"menu-class"],noHover:[4,"no-hover"],useClose:[4,"use-close"],showPopover:[32],slotContent:[32]},void 0,{show:[{watchShowHandler:0}]}]),r=l,h=function(){"undefined"!=typeof customElements&&["sd-popover","sd-button","sd-floating-portal","sd-icon"].forEach((s=>{switch(s){case"sd-popover":customElements.get(i(s))||customElements.define(i(s),l);break;case"sd-button":customElements.get(i(s))||a();break;case"sd-floating-portal":customElements.get(i(s))||d();break;case"sd-icon":customElements.get(i(s))||c()}}))};export{r as SdPopover,h as defineCustomElement}

package/dist/components/sd-portal.js

@@ -1,9 +1 @@
-import { S as SdPortal$1, d as defineCustomElement$1 } from './p-D16-dM6f.js';
-
-const SdPortal = SdPortal$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SdPortal, defineCustomElement };
-//# sourceMappingURL=sd-portal.js.map
-
-//# sourceMappingURL=sd-portal.js.map
+import{S as o,d as s}from"./p-zP9SItz2.js";const t=o,p=s;export{t as SdPortal,p as defineCustomElement}

package/dist/components/sd-progress.js

@@ -1,90 +1 @@
-import { p as proxyCustomElement, H, h, t as transformTag } from './p-CR2Jbl0B.js';
-
-const sdProgressCss = () => `sd-progress{display:block}sd-progress .sd-progress__bar{position:relative;width:100%;height:20px;overflow:hidden;border-radius:4px;background-color:#eeeeee;text-align:center}sd-progress .sd-progress__bar__percent{width:var(--progress-percentage);height:100%;border-radius:4px;background-color:var(--progress-color, #0075ff);transition:all 0.5s}sd-progress .sd-progress__bar__percent.proceed{border-top-right-radius:50%}sd-progress .sd-progress__bar__indicator{position:absolute;left:0;top:0;height:20px;width:100%;background-color:#eeeeee;font-size:12px;font-weight:700;line-height:20px;z-index:1}sd-progress .sd-progress__bar__indicator--left{color:var(--progress-color, #0075ff);clip-path:inset(0 0 0 var(--progress-percentage))}sd-progress .sd-progress__bar__indicator--right{color:white;background-color:var(--progress-color, #0075ff);clip-path:inset(0 calc(100% - var(--progress-percentage)) 0 0)}sd-progress .sd-progress__spinner{display:flex;flex-direction:column;align-items:center;justify-content:center}sd-progress .sd-progress__spinner svg{transform:rotate(-90deg)}sd-progress .sd-progress__spinner__label{margin-top:8px;font-size:16px;color:var(--progress-color, #0075ff)}sd-progress .sd-progress__label{margin-top:4px;font-size:12px;color:#222222;text-align:center}`;
-
-const SdProgress$1 = /*@__PURE__*/ proxyCustomElement(class SdProgress extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-    }
-    type = 'bar';
-    error = false;
-    percentage = 0;
-    size = 80;
-    strokeWidth = 12;
-    label;
-    statusColor = {
-        default: '#aaaaaa',
-        progress: '#0075ff',
-        complete: '#12B553',
-        error: '#FB4444',
-    };
-    get progressPercentage() {
-        if (this.error)
-            return 100;
-        return this.percentage;
-    }
-    get progressStatus() {
-        if (this.error)
-            return 'error';
-        switch (this.percentage) {
-            case 100:
-                return 'complete';
-            case 0:
-                return 'default';
-            default:
-                return 'progress';
-        }
-    }
-    get progressColor() {
-        return this.statusColor[this.progressStatus];
-    }
-    render() {
-        return (h("div", { key: '43da9dac67e760bfe53b8db11c27eef7ef0d8b3b', style: {
-                '--progress-color': this.progressColor,
-                '--progress-percentage': `${this.progressPercentage}%`,
-            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: 'af4b1c44f655546fede8ad548bddc6afb7810d2b', class: "sd-progress__label" }, this.label)));
-    }
-    renderBarProgress() {
-        return (h("div", { class: `sd-progress__bar sd-progress__bar--${this.progressStatus}` }, h("div", { class: ['sd-progress__bar__percent', this.progressPercentage < 100 ? 'proceed' : ''].join(' ') }), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--left" }, this.progressPercentage, "%"), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--right" }, this.progressPercentage, "%")));
-    }
-    renderSpinnerProgress() {
-        const radius = (this.size - this.strokeWidth) / 2; // 원의 반지름
-        const circumference = 2 * Math.PI * radius; // 원의 둘레
-        const offset = circumference - (this.progressPercentage / 100) * circumference; // 진행률에 따른 offset
-        const progressBgSize = `${this.size}px`;
-        const progressSize = `${this.size / 2}px`;
-        return (h("div", { class: `sd-progress__spinner sd-progress__spinner--${this.progressStatus}` }, h("svg", { width: progressBgSize, height: progressBgSize }, h("circle", { cx: progressSize, cy: progressSize, r: radius, stroke: "#EEEEEE", "stroke-width": this.strokeWidth, fill: "transparent" }), h("circle", { cx: progressSize, cy: progressSize, r: radius, stroke: this.progressColor, "stroke-width": this.strokeWidth, fill: "transparent", "stroke-dasharray": circumference, "stroke-dashoffset": offset, "stroke-linecap": "round", class: "transition-all duration-500" })), h("strong", { class: "sd-progress__spinner__label" }, this.progressPercentage, " %")));
-    }
-    static get style() { return sdProgressCss(); }
-}, [768, "sd-progress", {
-        "type": [1],
-        "error": [4],
-        "percentage": [2],
-        "size": [2],
-        "strokeWidth": [2, "stroke-width"],
-        "label": [1]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["sd-progress"];
-    components.forEach(tagName => { switch (tagName) {
-        case "sd-progress":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), SdProgress$1);
-            }
-            break;
-    } });
-}
-
-const SdProgress = SdProgress$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SdProgress, defineCustomElement };
-//# sourceMappingURL=sd-progress.js.map
-
-//# sourceMappingURL=sd-progress.js.map
+import{p as r,H as s,h as e,t}from"./p-4iQAU7kM.js";const o=r(class extends s{constructor(r){super(),!1!==r&&this.__registerHost()}type="bar";error=!1;percentage=0;size=80;strokeWidth=12;label;statusColor={default:"#aaaaaa",progress:"#0075ff",complete:"#12B553",error:"#FB4444"};get progressPercentage(){return this.error?100:this.percentage}get progressStatus(){if(this.error)return"error";switch(this.percentage){case 100:return"complete";case 0:return"default";default:return"progress"}}get progressColor(){return this.statusColor[this.progressStatus]}render(){return e("div",{key:"43da9dac67e760bfe53b8db11c27eef7ef0d8b3b",style:{"--progress-color":this.progressColor,"--progress-percentage":this.progressPercentage+"%"}},"bar"===this.type?this.renderBarProgress():this.renderSpinnerProgress(),this.label&&e("div",{key:"af4b1c44f655546fede8ad548bddc6afb7810d2b",class:"sd-progress__label"},this.label))}renderBarProgress(){return e("div",{class:"sd-progress__bar sd-progress__bar--"+this.progressStatus},e("div",{class:["sd-progress__bar__percent",this.progressPercentage<100?"proceed":""].join(" ")}),e("div",{class:"sd-progress__bar__indicator sd-progress__bar__indicator--left"},this.progressPercentage,"%"),e("div",{class:"sd-progress__bar__indicator sd-progress__bar__indicator--right"},this.progressPercentage,"%"))}renderSpinnerProgress(){const r=(this.size-this.strokeWidth)/2,s=2*Math.PI*r,t=s-this.progressPercentage/100*s,o=this.size+"px",i=this.size/2+"px";return e("div",{class:"sd-progress__spinner sd-progress__spinner--"+this.progressStatus},e("svg",{width:o,height:o},e("circle",{cx:i,cy:i,r,stroke:"#EEEEEE","stroke-width":this.strokeWidth,fill:"transparent"}),e("circle",{cx:i,cy:i,r,stroke:this.progressColor,"stroke-width":this.strokeWidth,fill:"transparent","stroke-dasharray":s,"stroke-dashoffset":t,"stroke-linecap":"round",class:"transition-all duration-500"})),e("strong",{class:"sd-progress__spinner__label"},this.progressPercentage," %"))}static get style(){return"sd-progress{display:block}sd-progress .sd-progress__bar{position:relative;width:100%;height:20px;overflow:hidden;border-radius:4px;background-color:#eeeeee;text-align:center}sd-progress .sd-progress__bar__percent{width:var(--progress-percentage);height:100%;border-radius:4px;background-color:var(--progress-color, #0075ff);transition:all 0.5s}sd-progress .sd-progress__bar__percent.proceed{border-top-right-radius:50%}sd-progress .sd-progress__bar__indicator{position:absolute;left:0;top:0;height:20px;width:100%;background-color:#eeeeee;font-size:12px;font-weight:700;line-height:20px;z-index:1}sd-progress .sd-progress__bar__indicator--left{color:var(--progress-color, #0075ff);clip-path:inset(0 0 0 var(--progress-percentage))}sd-progress .sd-progress__bar__indicator--right{color:white;background-color:var(--progress-color, #0075ff);clip-path:inset(0 calc(100% - var(--progress-percentage)) 0 0)}sd-progress .sd-progress__spinner{display:flex;flex-direction:column;align-items:center;justify-content:center}sd-progress .sd-progress__spinner svg{transform:rotate(-90deg)}sd-progress .sd-progress__spinner__label{margin-top:8px;font-size:16px;color:var(--progress-color, #0075ff)}sd-progress .sd-progress__label{margin-top:4px;font-size:12px;color:#222222;text-align:center}"}},[512,"sd-progress",{type:[1],error:[4],percentage:[2],size:[2],strokeWidth:[2,"stroke-width"],label:[1]}]),i=o,a=function(){"undefined"!=typeof customElements&&["sd-progress"].forEach((r=>{"sd-progress"===r&&(customElements.get(t(r))||customElements.define(t(r),o))}))};export{i as SdProgress,a as defineCustomElement}