import { r as h, e as a, s as v, D as b, 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-textarea{font-family:inherit;position:relative;display:flex;flex-direction:column-reverse}.sil-textarea,.sil-textarea *{box-sizing:border-box}.sil-textarea__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-textarea__input:has(:focus){outline:none;border-color:var(--primary, lightblue)}.sil-textarea__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-textarea__control:focus{outline:none;border-color:rgba(var(--primary-r),var(--primary-g),var(--primary-b),.5)}.sil-textarea__control{resize:none}.sil-textarea__label{padding:var(--input-field--label-padding, var(--input-field--padding, .75em 0em))}.sil-textarea__preview{padding:var(--input-field--preview-opacity, .5)}.sil-textarea--has-error .sil-textarea__input{border-color:var(--error, red);--border-radius-bottom-right: 0em;--border-radius-bottom-left: 0em}.sil-textarea__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 = (r, o, l, s) => {
  for (var i = s > 1 ? void 0 : s ? _(o, l) : o, d = r.length - 1, n; d >= 0; d--)
    (n = r[d]) && (i = (s ? n(o, l, i) : n(i)) || i);
  return s && i && y(o, l, i), i;
};
let e = class extends v {
  constructor() {
    super(...arguments), this._touched = !1, this.label = "", this.value = "", this.required = !1, this.requiredError = b.required, this.placeholder = "", this.preview = !1, this.resize = !0;
  }
  autoSize(r) {
    r.target.style.height = 0, r.target.style.height = r.target.scrollHeight + "px";
  }
  handleChange(r) {
    this.value = r.target.value, this.resize && this.autoSize(r), this._touched = !0;
  }
  hasError() {
    return this.required && this._touched && this.value == "";
  }
  render() {
    const { bemm: r, classes: o } = c(p("textarea"), {
      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")}">
          <textarea
            id="${this.id}"
            class="${r("control")}"
            placeholder="${this.placeholder}"
            value="${this.value}"
            required="${this.required}"
            @input="${this.handleChange}"
            @blur="${this.handleChange}"
          ></textarea>
        </div>
        <label for="${this.id}" class="${r("label")}">${this.label}</label>
      </div>
    `;
  }
};
e.styles = h(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);
t([
  a({ type: Boolean })
], e.prototype, "resize", 2);
e = t([
  f(p("textarea"))
], e);
export {
  e as TextArea
};
