import { r as h, s as v, D as b, y as u, e as c, g as p } from "./base-0db4ef3a.js";
import { e as i } from "./property-ca27685b.js";
import { t as m } from "./state-fcb7c7f1.js";
import { u as f } from "./useBemm-077765ce.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:var(--input-field--border-width, 2px) solid var(--input-field--border-color, var(--foreground, currentColor))}.sil-text__input:has(:focus){outline:none;border-color:var(--primary, lightblue)}.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, .5em) var(--border-radius, .5em);color:var(--error-text);padding:.5em 1em;font-size:.85em;display:block}
`;
var y = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, t = (e, a, d, s) => {
  for (var o = s > 1 ? void 0 : s ? _(a, d) : a, l = e.length - 1, n; l >= 0; l--)
    (n = e[l]) && (o = (s ? n(a, d, o) : n(o)) || o);
  return s && o && y(a, d, o), o;
};
let r = class extends v {
  constructor() {
    super(...arguments), this._touched = !1, this.name = "", this.id = "", this.label = "", this.value = "", this.required = !1, this.requiredError = b.required, this.placeholder = "", this.preview = !1;
  }
  handleChange(e) {
    this.value = e.target.value, this._touched = !0;
  }
  hasError() {
    return this.required && this._touched && this.value == "";
  }
  render() {
    const { bemm: e, classes: a } = f(p("text"), {
      return: "string"
    });
    return u`
      <div
        class="${a(
      {},
      !this._touched && { m: "is-pristine" },
      this._touched && { m: "is-touched" },
      this.hasError() && { m: "has-error" }
    )}"
      >
        ${this.hasError() ? u`<div class="${e("error")}">${this.requiredError}</div>` : null}
        ${this.preview ? `<div class="${e("preview")}">${this.value}</div>` : null}
        <div class="${e("input")}">
          <input
            ${this.name ? `name="${this.name}"` : null}
            ${this.id ? `id="${this.id}"` : null}
            type="text"
            class="${e("control")}"
            placeholder="${this.placeholder}"
            value="${this.value}"
            required="${this.required}"
            @input="${this.handleChange}"
            @blur="${this.handleChange}"
          />
        </div>
        <label ${this.id ? `for="${this.id}"` : 'for="nothing"'} class="${e("label")}"
          >${this.label}</label
        >
      </div>
    `;
  }
};
r.styles = h(g);
t([
  m()
], r.prototype, "_touched", 2);
t([
  i({ type: String })
], r.prototype, "name", 2);
t([
  i({ type: String })
], r.prototype, "id", 2);
t([
  i({ type: String })
], r.prototype, "label", 2);
t([
  i({ type: String })
], r.prototype, "value", 2);
t([
  i({ type: Boolean })
], r.prototype, "required", 2);
t([
  i({ type: String })
], r.prototype, "requiredError", 2);
t([
  i({ type: String })
], r.prototype, "placeholder", 2);
t([
  i({ type: Boolean })
], r.prototype, "preview", 2);
r = t([
  c(p("text"))
], r);
export {
  r as Text
};
