import { r as v, e as a, s as b, D as h, u as c, y as u, a as f, g as p } from "./base-472fc154.js";
import { t as m } from "./state-7aa80e51.js";
const g = `.sil-text{font-family:inherit;position:relative;display:flex;flex-direction:column-reverse}.sil-text,.sil-text *{box-sizing:border-box}.sil-text__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:2px solid var(--input-field--border-color, rgba(var(--foreground-r), var(--foreground-g), var(--foreground-b), .25))}.sil-text__input:has(:focus){outline:none;border-color:rgba(var(--primary-r),var(--primary-g),var(--primary-b),.5)}.sil-text__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-text__control:focus{outline:none;border-color:rgba(var(--primary-r),var(--primary-g),var(--primary-b),.5)}.sil-text__label{padding:var(--input-field--label-padding, var(--input-field--padding, .75em 0em))}.sil-text__preview{padding:var(--input-field--preview-opacity, .5)}.sil-text--has-error .sil-text__input{border-color:var(--error, red);--border-radius-bottom-right: 0em;--border-radius-bottom-left: 0em}.sil-text__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 y = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, t = (r, o, d, s) => {
  for (var i = s > 1 ? void 0 : s ? _(o, d) : o, l = r.length - 1, n; l >= 0; l--)
    (n = r[l]) && (i = (s ? n(o, d, i) : n(i)) || i);
  return s && i && y(o, d, i), i;
};
let e = class extends b {
  constructor() {
    super(...arguments), this._touched = !1, this.label = "", this.value = "", this.required = !1, this.requiredError = h.required, this.placeholder = "", this.preview = !1;
  }
  handleChange(r) {
    this.value = r.target.value, this._touched = !0;
  }
  hasError() {
    return this.required && this._touched && this.value == "";
  }
  render() {
    const { bemm: r, classes: o } = c(p("text"), {
      return: "string"
    });
    return u`
      <div
        class="${o(
      {},
      !this._touched && { m: "is-pristine" },
      this._touched && { m: "is-touched" },
      this.hasError() && { m: "has-error" }
    )}"
      >
        ${this.hasError() ? u`<div class="${r("error")}">${this.requiredError}</div>` : null}
        ${this.preview ? `<div class="${r("preview")}">${this.value}</div>` : null}
        <div class="${r("input")}">
          <input
            type="text"
            class="${r("control")}"
            placeholder="${this.placeholder}"
            value="${this.value}"
            required="${this.required}"
            @input="${this.handleChange}"
            @blur="${this.handleChange}"
          />
        </div>
        <label class="${r("label")}">${this.label}</label>
      </div>
    `;
  }
};
e.styles = v(g);
t([
  m()
], e.prototype, "_touched", 2);
t([
  a({ type: String })
], e.prototype, "label", 2);
t([
  a({ type: String })
], e.prototype, "value", 2);
t([
  a({ type: Boolean })
], e.prototype, "required", 2);
t([
  a({ type: String })
], e.prototype, "requiredError", 2);
t([
  a({ type: String })
], e.prototype, "placeholder", 2);
t([
  a({ type: Boolean })
], e.prototype, "preview", 2);
e = t([
  f(p("text"))
], e);
export {
  e as Text
};
