import { P as m, r as C, n as s } from "./plus-base-1920dd44.mjs";
import { e as k } from "./custom-element-eaccb8d2.mjs";
import { t as S } 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 z } from "./label.style-1b60b221.mjs";
import { i as I } from "./input.style-cfa9d9b5.mjs";
import { l as o } from "./if-defined-66202ed0.mjs";
import "./directive-daf4e9b6.mjs";
import "./index-975d3293.mjs";
const N = `:host{display:block;width:100%;max-width:256px}:host([full-width]){max-width:none}
`;
var T = Object.defineProperty, D = Object.getOwnPropertyDescriptor, e = (l, a, p, r) => {
  for (var i = r > 1 ? void 0 : r ? D(a, p) : a, n = l.length - 1, h; n >= 0; n--)
    (h = l[n]) && (i = (r ? h(a, p, i) : h(i)) || i);
  return r && i && T(a, p, i), i;
};
let t = class extends m {
  constructor() {
    super(...arguments), this.hasFocus = !1, this.type = "text", this.name = "", this.value = "", this.placeholder = "", this.size = "md", this.clearable = !1, this.passwordToggle = !1, this.passwordVisible = !1, this.error = !1, this.fullWidth = !1;
  }
  handleBlur() {
    this.hasFocus = !1, this.emit("plus-blur");
  }
  handleChange() {
    this.value = this.input.value, this.emit("plus-change");
  }
  handleClearClick(l) {
    this.value = "", this.emit("plus-clear"), this.emit("plus-input"), this.emit("plus-change"), this.input.focus(), l.stopPropagation();
  }
  handleFocus() {
    this.hasFocus = !0, this.emit("plus-focus");
  }
  handleInput() {
    this.value = this.input.value, this.emit("plus-input");
  }
  handleInvalid(l) {
  }
  handleKeyDown(l) {
  }
  handleSlotchange(l) {
    l.target.assignedNodes({ flatten: !0 }).length && (l.target.style.display = "block");
  }
  render() {
    const { label: l, hasFocus: a, error: p, disabled: r, caption: i, clearable: n, value: h, size: c, required: y } = this, { inputElement: f, host: $, inputWrapper: v, prefix: g, suffix: d, clearButton: b } = I({ focus: a, error: p, disabled: r, size: c }), x = () => l ? u`<label class=${P({ size: c, required: y })} for="input">${l}</label>` : null, w = () => i ? u`<div class=${z({ error: p, size: c })}>${i}</div>` : null, B = () => n && h ? u`<div class=${b() + d()} @click=${this.handleClearClick}>
            <i class="fas fa-circle-xmark"></i>
          </div>` : null;
    return u`<div class=${$()}>
      ${x()}
      <div class=${v()} @click=${() => this.input.focus()}>
        <slot name="prefix" class=${g()} @slotchange=${this.handleSlotchange}></slot>
        <input
          id="input"
          type="text"
          class=${f()}
          type=${this.type === "password" && this.passwordVisible ? "text" : this.type}
          title=${this.title}
          name=${o(this.name)}
          ?disabled=${this.disabled}
          ?readonly=${this.readonly}
          ?required=${this.required}
          placeholder=${o(this.placeholder)}
          minlength=${o(this.minlength)}
          maxlength=${o(this.maxlength)}
          min=${o(this.min)}
          max=${o(this.max)}
          step=${o(this.step)}
          .value=${F(this.value)}
          autocapitalize=${o(this.autocapitalize)}
          autocomplete=${o(this.autocomplete)}
          autocorrect=${o(this.autocorrect)}
          ?autofocus=${this.autofocus}
          spellcheck=${this.spellcheck}
          pattern=${o(this.pattern)}
          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}
        />
        <slot name="suffix" class=${d()} @slotchange=${this.handleSlotchange}></slot>
        ${B()}
      </div>
      ${w()}
    </div>`;
  }
};
t.styles = [...m.styles, C(N)];
e([
  _("#input")
], t.prototype, "input", 2);
e([
  S()
], t.prototype, "hasFocus", 2);
e([
  s({ reflect: !0 })
], t.prototype, "type", 2);
e([
  s()
], t.prototype, "name", 2);
e([
  s()
], t.prototype, "value", 2);
e([
  s()
], t.prototype, "placeholder", 2);
e([
  s({ reflect: !0 })
], t.prototype, "size", 2);
e([
  s({ type: Boolean })
], t.prototype, "clearable", 2);
e([
  s({ attribute: "password-toggle", type: Boolean })
], t.prototype, "passwordToggle", 2);
e([
  s({ attribute: "password-visible", type: Boolean })
], t.prototype, "passwordVisible", 2);
e([
  s({ type: String })
], t.prototype, "label", 2);
e([
  s()
], t.prototype, "pattern", 2);
e([
  s({ type: Number })
], t.prototype, "minlength", 2);
e([
  s({ type: Number })
], t.prototype, "maxlength", 2);
e([
  s()
], t.prototype, "min", 2);
e([
  s()
], t.prototype, "max", 2);
e([
  s()
], t.prototype, "step", 2);
e([
  s()
], t.prototype, "autocapitalize", 2);
e([
  s()
], t.prototype, "autocorrect", 2);
e([
  s()
], t.prototype, "autocomplete", 2);
e([
  s({ type: Boolean })
], t.prototype, "autofocus", 2);
e([
  s()
], t.prototype, "enterkeyhint", 2);
e([
  s()
], t.prototype, "inputmode", 2);
e([
  s({ type: Boolean })
], t.prototype, "spellcheck", 2);
e([
  s({ type: String })
], t.prototype, "caption", 2);
e([
  s({ type: Boolean, converter: (l) => l != "false" })
], t.prototype, "error", 2);
e([
  s({ reflect: !0, attribute: "full-width", type: Boolean })
], t.prototype, "fullWidth", 2);
t = e([
  k("plus-input")
], t);
export {
  t as InputComponent
};
