import { r as m, e as t, s as b, D as c, u as v, y as p, a as g, g as d } from "./base-472fc154.js";
import { t as h } from "./state-7aa80e51.js";
const x = `.sil-number{font-family:inherit;position:relative;display:flex;flex-direction:column-reverse}.sil-number,.sil-number *{box-sizing:border-box}.sil-number__input{background-color:var(--input-field--background-color, var(--background, transparent));border-radius:var(--border-radius-top-left, var(--input-field--border-radius, var(--border-radius, .25em))) var(--border-radius-top-right, var(--input-field--border-radius, var(--border-radius, .25em))) var(--border-radius-bottom-left, var(--input-field--border-radius, var(--border-radius, .25em))) var(--border-radius-bottom-right, var(--input-field--border-radius, var(--border-radius, .25em)));position:relative;border:var(--input-field--border-width, 2px) solid var(--input-field--border-color, var(--foreground, currentColor))}.sil-number__input:has(:focus){outline:none;border-color:rgba(var(--primary-r),var(--primary-g),var(--primary-b),.5)}.sil-number__control{width:100%;padding:var(--input-field--padding, 1em);font-family:var(--input-field--font-family, .75em 1em);font-size:1em;border:none;color:var(--input-field--text-color, var(--foreground, #fff));background-color:transparent}.sil-number__control:focus{outline:none;border-color:rgba(var(--primary-r),var(--primary-g),var(--primary-b),.5)}.sil-number__controls{position:absolute;right:0;top:0;height:100%;display:flex;flex-direction:column;-moz-appearance:textfield}.sil-number__controls::-webkit-outer-spin-button,.sil-number__controls::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.sil-number__down,.sil-number__up{height:100%;aspect-ratio:.5/1;padding:0;margin:0;border:none;background-color:transparent;background-size:1em 1em;background-repeat:no-repeat;background-position:center center;fill:purple;transition:background-color .2s;background-color:var(--foreground);color:#00f;mask-repeat:no-repeat;mask-size:1em 1em;webkit-mask-position:center center;-webkit-mask-size:1em 1em;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center center}.sil-number__up{mask-image:url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' fill='\${color}' viewBox='0 0 72 72' style='enable-background:new 0 0 72 72;' xml:space='preserve'%3E%3Cg%3E%3Cpolygon points='36,18.5 65.8,48.3 60.2,54 36,29.8 11.8,54 6.2,48.3 '/%3E%3C/g%3E%3C/svg%3E%0A");-webkit-mask-image:url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' fill='\${color}' viewBox='0 0 72 72' style='enable-background:new 0 0 72 72;' xml:space='preserve'%3E%3Cg%3E%3Cpolygon points='36,18.5 65.8,48.3 60.2,54 36,29.8 11.8,54 6.2,48.3 '/%3E%3C/g%3E%3C/svg%3E%0A")}.sil-number__down{mask-image:url("data:image/svg+xml,%3Csvg version='1.1'  xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' fill='\${color}' viewBox='0 0 72 72' style='enable-background:new 0 0 72 72;' xml:space='preserve'%3E%3Cg%3E%3Cpolygon points='36,54 6.2,24.2 11.8,18.5 36,42.7 60.2,18.5 65.8,24.2 '/%3E%3C/g%3E%3C/svg%3E%0A");-webkit-mask-image:url("data:image/svg+xml,%3Csvg version='1.1'  xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' fill='\${color}' viewBox='0 0 72 72' style='enable-background:new 0 0 72 72;' xml:space='preserve'%3E%3Cg%3E%3Cpolygon points='36,54 6.2,24.2 11.8,18.5 36,42.7 60.2,18.5 65.8,24.2 '/%3E%3C/g%3E%3C/svg%3E%0A")}.sil-number__label{padding:var(--input-field--label-padding, var(--input-field--padding, .75em 0em))}.sil-number__preview{padding:var(--input-field--preview-opacity, .5)}.sil-number--has-error .sil-number__input{border-color:var(--error, red);--border-radius-bottom-right: 0em;--border-radius-bottom-left: 0em}.sil-number__error{background-color:var(--error);border-radius:0 0 var(--border-radius, .5) var(--border-radius, .5);color:var(--error-text);padding:.5em 1em;font-size:.85em;display:block}
`;
var w = Object.defineProperty, f = Object.getOwnPropertyDescriptor, i = (r, n, a, s) => {
  for (var o = s > 1 ? void 0 : s ? f(n, a) : n, l = r.length - 1, u; l >= 0; l--)
    (u = r[l]) && (o = (s ? u(n, a, o) : u(o)) || o);
  return s && o && w(n, a, o), o;
};
let e = class extends b {
  constructor() {
    super(...arguments), this._touched = !1, this.label = "", this.value = "", this.placeholder = "", this.required = !1, this.requiredError = c.required, this.min = null, this.max = null, this.preview = !1, this.increment = 1;
  }
  minMax(r) {
    return this.min !== null && r < this.min ? this.min : this.max !== null && r > this.max ? this.max : r;
  }
  handleChange(r) {
    this.value = r.target.value, this._touched = !0;
  }
  hasError() {
    return this.required && this._touched && this.value == "";
  }
  increase() {
    const r = isNaN(parseInt(this.value)) ? "0" : this.value;
    this.value = `${this.minMax(parseInt(r) + this.increment)}`;
  }
  decrease() {
    const r = isNaN(parseInt(this.value)) ? "0" : this.value;
    this.value = `${this.minMax(parseInt(r) - this.increment)}`;
  }
  render() {
    const { bemm: r, classes: n } = v(d("number"), {
      return: "string"
    });
    return p`
      <div
        class="${n(
      {},
      !this._touched && { m: "is-pristine" },
      this._touched && { m: "is-touched" },
      this.hasError() && { m: "has-error" }
    )}"
      >
        ${this.hasError() ? p`<div class="${r("error")}">${this.requiredError}</div>` : null}
        ${this.preview ? `<div class="${r("preview")}">${this.value}</div>` : null}
        <div class="${r("input")}">
          <div class="${r("controls")}">
            <button class="${r("up")}" @click="${this.increase}"></button>
            <button class="${r("down")}" @click="${this.decrease}"></button>
          </div>
          <input
            type="number"
            class="${r("control")}"
            ${this.min !== null ? 'min="' + this.min + '"' : null}
            ${this.max !== null ? 'max="' + this.max + '"' : null}
            value="${this.value}"
            required="${this.required}"
            @input="${this.handleChange}"
            @blur="${this.handleChange}"
          />
        </div>
        <label class="${r("label")}">${this.label}</label>
      </div>
    `;
  }
};
e.styles = m(x);
i([
  h()
], e.prototype, "_touched", 2);
i([
  t({ type: String })
], e.prototype, "label", 2);
i([
  t({ type: String || e })
], e.prototype, "value", 2);
i([
  t({ type: String })
], e.prototype, "placeholder", 2);
i([
  t({ type: Boolean })
], e.prototype, "required", 2);
i([
  t({ type: String })
], e.prototype, "requiredError", 2);
i([
  t({ type: e || null })
], e.prototype, "min", 2);
i([
  t({ type: e || null })
], e.prototype, "max", 2);
i([
  t({ type: Boolean })
], e.prototype, "preview", 2);
i([
  t({ type: e })
], e.prototype, "increment", 2);
e = i([
  g(d("number"))
], e);
export {
  e as Number
};
