@sellmate/design-system 1.0.15 → 1.0.16

package/dist/esm/sd-number-input.entry.js

@@ -1,260 +0,0 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-DqSa0XJ6.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-container{display:inline-flex}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:1px solid #aaaaaa;border-radius:4px;color:#333333;font-size:12px;line-height:20px;background:white;position:relative}sd-number-input .sd-number-input--hovered{border-color:#0075ff;box-shadow:0 0 4px 0 rgba(0, 113, 255, 0.4)}sd-number-input .sd-number-input.sd-number-input--error{border-color:#fb4444}sd-number-input .sd-number-input.sd-number-input--pass{border-color:#2bce6c}sd-number-input .sd-number-input.sd-number-input--disabled{background-color:#eeeeee !important;border-color:#cccccc !important;cursor:not-allowed !important;box-shadow:none !important}sd-number-input .sd-number-input.sd-number-input--disabled .sd-number-input__input{color:#888888 !important;cursor:not-allowed !important}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::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 = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.update = createEvent(this, "sdUpdate");
-        this.focus = createEvent(this, "sdFocus");
-        this.blur = createEvent(this, "sdBlur");
-    }
-    get el() { return getElement(this); }
-    min = Number.NEGATIVE_INFINITY;
-    max = Number.POSITIVE_INFINITY;
-    step = 1;
-    useButton = false;
-    useDecimal = false;
-    value = null;
-    label;
-    placeholder = '입력해 주세요.';
-    disabled = false;
-    width;
-    rules;
-    autoFocus = false;
-    status;
-    inputClass = '';
-    readonly = false;
-    inputStyle = {};
-    internalValue = null;
-    displayValue = '';
-    hovered = false;
-    error = false;
-    nativeEl = undefined;
-    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);
-        }
-        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;
-            }
-        }
-    }
-    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 = (event) => {
-        this.updateDisplay();
-        if (this.nativeEl) {
-            this.nativeEl.value = this.displayValue;
-        }
-        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("div", { key: 'b46cd55c205c9d0f0b7e4af181cbef7cc558f464', class: "sd-number-input-container", style: inputWidth, onFocus: this.handleFocus, onBlur: this.handleBlur }, this.label && h("div", { key: 'f2e0ef64df2132b0efca4bd5d50441f191fcc307', class: "sd-number-input__label" }, this.label), h("label", { key: '98920eb7ee7e07ad4719069201beffdeb3c8510a', 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: 'b8ffd42e1a1d3936f6f8b5bf2351b46d31a193ad', 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 }), this.useButton && (h("div", { key: 'b94de21e7b6b1020daac92cfefe9215444704a43', class: "sd-number-input__buttons" }, h("button", { key: '0a96725cc1c469db6c7520d21df06f757d20ffc6', 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: '598f637e2ad3cb46f4c881552dc2812c86964c68', name: "minus", size: 12, color: this.isDecrementDisabled() ? 'grey_45' : 'brilliantblue_70' })), h("button", { key: '03532b7f895aaa6b616739c1a2272c0a517a2140', 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: 'bd9d565d790305f4153e52a4323dce18559df970', name: "add", size: 12, color: this.isIncrementDisabled() ? 'grey_45' : 'brilliantblue_70' })))))));
-    }
-    static get watchers() { return {
-        "value": ["valueChanged"],
-        "internalValue": ["internalValueChanged"]
-    }; }
-};
-SdNumberInput.style = sdNumberInputCss();
-
-export { SdNumberInput as sd_number_input };
-//# sourceMappingURL=sd-number-input.entry.js.map

package/dist/esm/sd-number-input.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"sd-number-input.entry.js","sources":["src/components/sd-number-input/sd-number-input.scss?tag=sd-number-input","src/components/sd-number-input/sd-number-input.tsx"],"sourcesContent":["@import 'variables';\n@import '../sd-icon/sd-icon.scss';\n\nsd-number-input {\n .sd-number-input-container {\n  display: inline-flex;\n }\n .sd-number-input {\n  box-sizing: border-box;\n  display: flex;\n  width: var(--input-width, 100%);\n  align-items: center;\n  height: 28px;\n  padding: 4px 8px;\n  border: 1px solid $grey_55;\n  border-radius: 4px;\n  color: $grey_90;\n  font-size: 12px;\n  line-height: 20px;\n  background: white;\n  position: relative;\n\n  &--hovered {\n   border-color: $brilliantblue_75;\n   box-shadow: 0 0 4px 0 #0071ff66;\n  }\n\n  &.sd-number-input--error {\n   border-color: $red_70;\n  }\n\n  &.sd-number-input--pass {\n   border-color: $green_65;\n  }\n\n  &.sd-number-input--disabled {\n   background-color: $grey_20 !important;\n   border-color: $grey_45 !important;\n   cursor: not-allowed !important;\n   box-shadow: none !important;\n\n   .sd-number-input__input {\n    color: $grey_65 !important;\n    cursor: not-allowed !important;\n   }\n  }\n\n  .sd-number-input__input {\n   display: block;\n   width: 100%;\n   height: 20px;\n   line-height: 20px;\n   border: none;\n   outline: none;\n   background: transparent;\n   font-size: inherit;\n   color: $grey_90;\n   margin-left: 4px;\n   margin-right: 4px;\n   padding-block: 0;\n   padding-inline: 0;\n   text-align: right;\n\n   &::placeholder {\n    font-size: 12px;\n    height: 20px;\n    line-height: 20px;\n    color: $grey_55;\n   }\n  }\n\n  .sd-number-input__clear-icon {\n   cursor: pointer;\n   margin-left: 8px;\n  }\n\n  .sd-number-input__buttons {\n   padding: 4px;\n   display: flex;\n   justify-content: space-between;\n   align-items: center;\n   position: absolute;\n   inset: 0;\n   opacity: 0;\n   pointer-events: none;\n   transition: opacity 0.2s ease;\n  }\n\n  .sd-number-input__button {\n   width: 20px;\n   height: 20px;\n   border: none;\n   border-radius: 2px;\n   background-color: $brilliantblue_10;\n   cursor: pointer;\n   display: flex;\n   align-items: center;\n   justify-content: center;\n   padding: 0;\n   margin: 0;\n   transition: background-color 0.2s ease;\n\n   &:hover:not(:disabled) {\n    background-color: $brilliantblue_20;\n   }\n\n   &:disabled {\n    background-color: $grey_20;\n    cursor: not-allowed;\n   }\n\n   &--decrement {\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n   }\n\n   &--increment {\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n   }\n  }\n\n  .sd-number-input__label {\n   margin-bottom: 8px;\n   font-weight: 500;\n   color: $grey_90;\n  }\n }\n\n &:focus-within {\n  .sd-number-input__buttons {\n   opacity: 1;\n   pointer-events: auto;\n  }\n\n  .sd-number-input {\n   border-color: $brilliantblue_75;\n   box-shadow: 0 0 4px 0 #0071ff66;\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';\n\n@Component({\n tag: 'sd-number-input',\n styleUrl: 'sd-number-input.scss',\n})\nexport class SdNumberInput {\n @Element() el!: HTMLElement;\n\n @Prop() min: number = Number.NEGATIVE_INFINITY;\n @Prop() max: number = Number.POSITIVE_INFINITY;\n @Prop() step: number = 1;\n @Prop() useButton: boolean = false;\n @Prop() useDecimal: boolean = false;\n\n @Prop({ mutable: true }) value?: string | number | null = null;\n @Prop() label?: string;\n @Prop() placeholder: string = '입력해 주세요.';\n @Prop() disabled: boolean = false;\n @Prop() width?: number | string;\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 @Prop() inputStyle: { [key: string]: string } = {};\n\n @State() private internalValue: number | null = null;\n @State() private displayValue: string = '';\n @State() private hovered: boolean = false;\n @State() private error: boolean = false;\n\n private nativeEl: HTMLInputElement | undefined = undefined;\n\n @Event({ eventName: 'sdUpdate' }) update?: EventEmitter<number | null>;\n @Event({ eventName: 'sdFocus' }) focus?: EventEmitter<Event>;\n @Event({ eventName: 'sdBlur' }) blur?: EventEmitter<Event>;\n\n private formatWithCommas(value: number | null): string {\n  if (value === null || value === undefined) return '';\n\n  const isNegative = value < 0;\n  const absValue = Math.abs(value);\n\n  const [intPart, decPart] = absValue.toString().split('.');\n  const formatted = (+intPart).toLocaleString();\n\n  const result = isNegative ? '-' + formatted : formatted;\n  return decPart ? result + '.' + decPart : String(result);\n }\n\n private parseInput(input: string): number | null {\n  if (!input || input.trim() === '') return null;\n\n  const cleaned = input.replace(/,/g, '').trim();\n\n  // -로 시작을 할 수 있을 수 있고, 소수점 0.n | .n\n  if (!/^-?(\\d+\\.?\\d*|\\d*\\.\\d+)$/.test(cleaned)) {\n   return null;\n  }\n\n  const parsed = parseFloat(cleaned);\n\n  if (isNaN(parsed)) return null;\n\n  // 소수점 사용 하지 않는데 . 이 있는 경우\n  if (!this.useDecimal && cleaned.includes('.')) {\n   return null;\n  }\n\n  return parsed;\n }\n\n private clampMinMax(value: number): number {\n  return Math.min(Math.max(value, this.min), this.max);\n }\n\n private updateDisplay() {\n  this.displayValue = this.formatWithCommas(this.internalValue);\n }\n\n private isIncrementDisabled(): boolean {\n  if (this.disabled || this.readonly) return true;\n  if (this.internalValue !== null) {\n   return this.internalValue >= this.max;\n  }\n  return false;\n }\n\n private isDecrementDisabled(): boolean {\n  if (this.disabled || this.readonly) return true;\n  if (this.internalValue !== null) {\n   return this.internalValue <= this.min;\n  }\n  return false;\n }\n\n @Watch('value')\n valueChanged(newValue: string | number | null) {\n  if (newValue === null || newValue === '') {\n   this.internalValue = null;\n  } else {\n   const parsed = typeof newValue === 'string' ? this.parseInput(newValue) : newValue;\n   if (parsed !== null) {\n    this.internalValue = this.clampMinMax(parsed);\n   }\n  }\n  this.updateDisplay();\n }\n\n @Watch('internalValue')\n internalValueChanged(newValue: number | null) {\n  this.updateDisplay();\n\n  if (newValue !== this.value) {\n   this.value = newValue;\n   this.update?.emit(newValue);\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 componentWillLoad() {\n  if (this.value !== null && this.value !== undefined) {\n   const parsed = typeof this.value === 'string' ? this.parseInput(this.value) : this.value;\n   if (parsed !== null) {\n    this.internalValue = this.clampMinMax(parsed);\n   }\n  }\n  this.updateDisplay();\n }\n\n // TODO: 현재 숫자를 크게 넣어서 숫자e+21등의 형식으로 변환되면 값이 바뀌지않음 수정 필요\n private handleInput = (event: Event) => {\n  const target = event.target as HTMLInputElement;\n  const inputValue = target.value;\n\n  if (inputValue === '') {\n   this.internalValue = null;\n   this.displayValue = '';\n   return;\n  }\n\n  const commasRemoved = inputValue.replace(/,/g, '');\n\n  // 만약에 소수점 (.) 이 여러개 일 경우\n  const decimalCount = (commasRemoved.match(/\\./g) || []).length;\n  if (decimalCount > 1) {\n   target.value = this.displayValue;\n   return;\n  }\n\n  // 가능: \"-\", \".\", \"-.\" (단순 기호만 있는 경우)\n  if (commasRemoved === '-' || commasRemoved === '.' || commasRemoved === '-.') {\n   target.value = commasRemoved;\n   return;\n  }\n\n  // 숫자 뒤에 . 이 있는 경우 (예: \"1000.\") -> 콤마 포맷 적용 + . 유지\n  if (commasRemoved.endsWith('.') && decimalCount === 1) {\n   const numberPart = commasRemoved.slice(0, -1);\n   const parsed = this.parseInput(numberPart);\n   if (parsed !== null) {\n    const formatted = this.formatWithCommas(parsed);\n    target.value = formatted + '.';\n    return;\n   }\n  }\n\n  const parsed = this.parseInput(commasRemoved);\n\n  if (parsed !== null) {\n   if (parsed < this.min) {\n    target.value = this.displayValue;\n    return;\n   }\n\n   if (parsed > this.max) {\n    target.value = this.displayValue;\n    return;\n   }\n\n   this.internalValue = parsed;\n   this.displayValue = this.formatWithCommas(parsed);\n   target.value = this.displayValue;\n  } else {\n   target.value = this.displayValue;\n  }\n };\n\n private handleFocus = (event: Event) => {\n  this.focus?.emit(event);\n };\n\n private handleBlur = (event: Event) => {\n  this.updateDisplay();\n  if (this.nativeEl) {\n   this.nativeEl.value = this.displayValue;\n  }\n  this.blur?.emit(event);\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n  if (event.key === 'ArrowUp') {\n   event.preventDefault();\n   this.handleIncrement();\n  } else if (event.key === 'ArrowDown') {\n   event.preventDefault();\n   this.handleDecrement();\n  }\n };\n\n private handleIncrement = () => {\n  if (this.isIncrementDisabled()) return;\n\n  const currentVal = this.internalValue ?? this.min ?? 0;\n  let nextVal = currentVal + this.step;\n\n  if (nextVal > this.max) {\n   nextVal = this.max;\n  }\n\n  if (nextVal === currentVal) return;\n\n  this.internalValue = nextVal;\n };\n\n private handleDecrement = () => {\n  if (this.isDecrementDisabled()) return;\n\n  const currentVal = this.internalValue ?? this.min ?? 0;\n  let nextVal = currentVal - this.step;\n\n  if (nextVal < this.min) {\n   nextVal = this.min;\n  }\n\n  if (nextVal === currentVal) return;\n\n  this.internalValue = nextVal;\n };\n\n @Method()\n async sdGetNativeElement(): Promise<HTMLInputElement | null> {\n  return this.nativeEl || null;\n }\n\n getInputStatus() {\n  if (this.disabled) return 'sd-number-input--disabled';\n  if (this.hovered) return 'sd-number-input--hovered';\n  if (this.status) return `sd-number-input--${this.status}`;\n  if (this.error) return 'sd-number-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  const inputStyles = {\n   textAlign: this.useButton ? 'center' : 'right',\n  };\n\n  return (\n   <div\n    class=\"sd-number-input-container\"\n    style={inputWidth}\n    onFocus={this.handleFocus}\n    onBlur={this.handleBlur}\n   >\n    {this.label && <div class=\"sd-number-input__label\">{this.label}</div>}\n    <label\n     class={{\n      'sd-number-input': true,\n      [this.getInputStatus()]: true,\n      'sd-number-input--with-buttons': this.useButton,\n     }}\n     onMouseEnter={() => (this.hovered = true)}\n     onMouseLeave={() => (this.hovered = false)}\n     style={this.inputStyle}\n    >\n     <input\n      ref={el => (this.nativeEl = el)}\n      class={`sd-number-input__input ${this.inputClass}`}\n      type=\"text\"\n      inputMode=\"numeric\"\n      value={this.displayValue}\n      placeholder={this.placeholder}\n      disabled={this.disabled}\n      readonly={this.readonly}\n      autofocus={this.autoFocus}\n      onInput={this.handleInput}\n      onKeyDown={this.handleKeyDown}\n      style={inputStyles}\n     />\n\n     {this.useButton && (\n      <div class=\"sd-number-input__buttons\">\n       <button\n        type=\"button\"\n        class={{\n         'sd-number-input__button': true,\n         'sd-number-input__button--decrement': true,\n        }}\n        disabled={this.isDecrementDisabled()}\n        onClick={this.handleDecrement}\n        tabindex={-1}\n       >\n        <sd-icon\n         name=\"minus\"\n         size={12}\n         color={this.isDecrementDisabled() ? 'grey_45' : 'brilliantblue_70'}\n        />\n       </button>\n       <button\n        type=\"button\"\n        class={{\n         'sd-number-input__button': true,\n         'sd-number-input__button--increment': true,\n        }}\n        disabled={this.isIncrementDisabled()}\n        onClick={this.handleIncrement}\n        tabindex={-1}\n       >\n        <sd-icon\n         name=\"add\"\n         size={12}\n         color={this.isIncrementDisabled() ? 'grey_45' : 'brilliantblue_70'}\n        />\n       </button>\n      </div>\n     )}\n    </label>\n   </div>\n  );\n }\n}\n"],"names":[],"mappings":"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"}