import { P as d, r as B, n as a } from "./plus-base-1920dd44.mjs";
import { e as k } from "./custom-element-eaccb8d2.mjs";
import { t as z } from "./state-4d7d9621.mjs";
import { i as _ } from "./query-48157d42.mjs";
import { l as F } from "./live-cd074699.mjs";
import { n as u } from "./static-be5c3b1c.mjs";
import { l as P, c as S } from "./label.style-1b60b221.mjs";
import { s as W } from "./index-975d3293.mjs";
import { i as E } from "./input.style-cfa9d9b5.mjs";
import { l as o } from "./if-defined-66202ed0.mjs";
import "./directive-daf4e9b6.mjs";
const D = `:host{display:block;width:100%;max-width:256px}:host([full-width]){max-width:none}
`, I = W({
  extend: E,
  slots: {
    inputElement: "rounded-md"
  },
  variants: {
    size: {
      sm: {
        inputWrapper: "p-0",
        inputElement: "py-2 px-2"
      },
      md: {
        inputWrapper: "p-0",
        inputElement: "py-2 px-3"
      },
      lg: {
        inputWrapper: "p-0",
        inputElement: "py-2 px-4"
      }
    }
  },
  defaultVariants: {
    focus: !1,
    error: !1,
    disabled: !1,
    size: "md"
  }
});
var O = Object.defineProperty, q = Object.getOwnPropertyDescriptor, t = (l, r, i, p) => {
  for (var s = p > 1 ? void 0 : p ? q(r, i) : r, n = l.length - 1, h; n >= 0; n--)
    (h = l[n]) && (s = (p ? h(r, i, s) : h(s)) || s);
  return p && s && O(r, i, s), s;
};
let e = class extends d {
  constructor() {
    super(...arguments), this.hasFocus = !1, this.name = "", this.value = "", this.placeholder = "", this.size = "md", this.clearable = !1, this.error = !1, this.rows = 4, this.fullWidth = !1;
  }
  handleBlur() {
    this.hasFocus = !1, this.emit("plus-blur");
  }
  handleChange() {
    this.value = this.textarea.value, this.emit("plus-change");
  }
  handleClearClick(l) {
    this.value = "", this.emit("plus-clear"), this.emit("plus-textarea"), this.emit("plus-change"), this.textarea.focus(), l.stopPropagation();
  }
  handleFocus() {
    this.hasFocus = !0, this.emit("plus-focus");
  }
  handleInput() {
    this.value = this.textarea.value, this.emit("plus-textarea");
  }
  handleInvalid(l) {
  }
  handleKeyDown(l) {
  }
  render() {
    const { label: l, hasFocus: r, error: i, disabled: p, caption: s, clearable: n, value: h, size: c, required: y } = this, { inputElement: f, host: $, inputWrapper: x, prefix: v, suffix: m, clearButton: b } = I({ focus: r, error: i, disabled: p, size: c }), g = () => l ? u`<label class=${P({ size: c, required: y })} for="textarea">${l}</label>` : null, w = () => s ? u`<div class=${S({ error: i, size: c })}>${s}</div>` : null, C = () => n && h ? u`<div class=${b() + m()} @click=${this.handleClearClick}>
            <i class="fas fa-circle-xmark"></i>
          </div>` : null;
    return u`<div class=${$()}>
      ${g()}
      <div class=${x()} @click=${() => this.textarea.focus()}>
        <!-- <slot name="prefix" class=${v()}></slot> -->
        <textarea
          id="textarea"
          type="text"
          class=${f()}
          title=${this.title}
          name=${o(this.name)}
          ?disabled=${this.disabled}
          ?readonly=${this.readonly}
          ?required=${this.required}
          placeholder=${o(this.placeholder)}
          rows=${o(this.rows)}
          minlength=${o(this.minlength)}
          maxlength=${o(this.maxlength)}
          .value=${F(this.value)}
          autocapitalize=${o(this.autocapitalize)}
          autocomplete=${o(this.autocomplete)}
          autocorrect=${o(this.autocorrect)}
          ?autofocus=${this.autofocus}
          spellcheck=${this.spellcheck}
          enterkeyhint=${o(this.enterkeyhint)}
          inputmode=${o(this.inputmode)}
          aria-describedby="help-text"
          @change=${this.handleChange}
          @input=${this.handleInput}
          @invalid=${this.handleInvalid}
          @keydown=${this.handleKeyDown}
          @focus=${this.handleFocus}
          @blur=${this.handleBlur}
        ></textarea>
        <!-- <slot name="suffix" class=${m()}></slot> -->
        <!-- ${C()} -->
      </div>
      ${w()}
    </div>`;
  }
};
e.styles = [...d.styles, B(D)];
t([
  _("#textarea")
], e.prototype, "textarea", 2);
t([
  z()
], e.prototype, "hasFocus", 2);
t([
  a()
], e.prototype, "name", 2);
t([
  a()
], e.prototype, "value", 2);
t([
  a()
], e.prototype, "placeholder", 2);
t([
  a({ reflect: !0 })
], e.prototype, "size", 2);
t([
  a({ type: Boolean })
], e.prototype, "clearable", 2);
t([
  a({ type: String })
], e.prototype, "label", 2);
t([
  a({ type: Number })
], e.prototype, "minlength", 2);
t([
  a({ type: Number })
], e.prototype, "maxlength", 2);
t([
  a()
], e.prototype, "autocapitalize", 2);
t([
  a()
], e.prototype, "autocorrect", 2);
t([
  a()
], e.prototype, "autocomplete", 2);
t([
  a({ type: Boolean })
], e.prototype, "autofocus", 2);
t([
  a()
], e.prototype, "enterkeyhint", 2);
t([
  a()
], e.prototype, "inputmode", 2);
t([
  a({ type: Boolean })
], e.prototype, "spellcheck", 2);
t([
  a({ type: String })
], e.prototype, "caption", 2);
t([
  a({ type: Boolean, converter: (l) => l != "false" })
], e.prototype, "error", 2);
t([
  a({ type: Number })
], e.prototype, "rows", 2);
t([
  a({ reflect: !0, attribute: "full-width", type: Boolean })
], e.prototype, "fullWidth", 2);
e = t([
  k("plus-textarea")
], e);
export {
  e as textareaComponent
};
