import { n as a, C as m } from "../chunks/lib-cortex-element.CVMmyPMC.js";
import { c as b } from "../chunks/component.styles.CRO4Odto.js";
import { f as g } from "../chunks/form-control.styles.CaGWmeAS.js";
import { c as v } from "../chunks/custom-element.L4WJXn1j.js";
import { d as y } from "../chunks/default-value.COZopaet.js";
import { F as _ } from "../chunks/form.Ch1cwYzO.js";
import { H as z } from "../chunks/slot.j5oheLJC.js";
import { w as d } from "../chunks/watch.BCJD77bD.js";
import { i as C, x as p } from "../chunks/lit-element.jLBm65_O.js";
import { r as w } from "../chunks/state.CSDxrqLd.js";
import { e as f } from "../chunks/query.BBf1UFkC.js";
import { e as x } from "../chunks/class-map.BiVq-cVR.js";
import { o as n } from "../chunks/if-defined.BRoBj_Rp.js";
import { l as k } from "../chunks/live.SCz6M8Gs.js";
import { n as $ } from "../chunks/when.Dr1es41R.js";
var c = /* @__PURE__ */ ((t) => (t.Max = "max", t))(c || {});
const H = C`:host{display:block}:host([data-user-invalid])::part(base){border-color:var(--cx-input-invalid-border-color)}:host([data-user-invalid]:focus-within)::part(base){border-color:var(--cx-input-invalid-border-color);box-shadow:var(--cx-input-invalid-shadow)}.textarea{--textarea-background-color:var(--cx-input-background-color);width:100%;font-family:var(--cx-input-font-family);font-weight:var(--cx-input-font-weight);line-height:var(--cx-line-height-large);letter-spacing:var(--cx-input-letter-spacing);vertical-align:middle;transition:var(--cx-transition-fast) color, var(--cx-transition-fast) border, var(--cx-transition-fast) box-shadow, var(--cx-transition-fast) background-color;cursor:text;align-items:center;display:flex;position:relative}.textarea--standard{background-color:var(--textarea-background-color);border:solid var(--cx-input-border-width) var(--cx-input-border-color)}.textarea--standard:hover:not(.textarea--disabled){--textarea-background-color:var(--cx-input-background-color-hover);border-color:var(--cx-input-border-color-hover)}.textarea--standard:hover:not(.textarea--disabled) .textarea__control{color:var(--cx-input-color-hover)}.textarea--standard.textarea--focused:not(.textarea--disabled){--textarea-background-color:var(--cx-input-background-color-focus);border-color:var(--cx-input-border-color-focus);color:var(--cx-input-color-focus)}.textarea--standard.textarea--focused:not(.textarea--disabled) .textarea__control{color:var(--cx-input-color-focus)}.textarea--standard.textarea--disabled{--textarea-background-color:var(--cx-input-background-color-disabled);border-color:var(--cx-input-border-color-disabled);opacity:.5;cursor:default}.textarea--standard.textarea--disabled .textarea__control{color:var(--cx-input-color-disabled)}.textarea--standard.textarea--disabled .textarea__control::placeholder{color:var(--cx-input-placeholder-color-disabled)}.textarea--filled{--textarea-background-color:var(--cx-input-filled-background-color);background-color:var(--textarea-background-color);color:var(--cx-input-color);border:none}.textarea--filled:hover:not(.textarea--disabled){--textarea-background-color:var(--cx-input-filled-background-color-hover)}.textarea--filled.textarea--focused:not(.textarea--disabled){--textarea-background-color:var(--cx-input-filled-background-color-focus);outline:var(--cx-focus-ring);outline-offset:var(--cx-focus-ring-offset)}.textarea--filled.textarea--disabled{--textarea-background-color:var(--cx-input-filled-background-color-disabled);opacity:.5;cursor:default}.textarea__control{font:inherit;color:var(--cx-input-color);box-shadow:none;cursor:inherit;-webkit-appearance:none;line-height:1.4;line-height:var(--cx-line-height-medium);padding-top:var(--cx-spacing-x-small);padding-bottom:var(--cx-spacing-x-small);background:0 0;border:none;flex:auto;padding-left:0;padding-right:0}.textarea__control::-webkit-search-decoration,.textarea__control::-webkit-search-cancel-button,.textarea__control::-webkit-search-results-button,.textarea__control::-webkit-search-results-decoration{-webkit-appearance:none}.textarea__control::placeholder{color:var(--cx-input-placeholder-color);-webkit-user-select:none;user-select:none}.textarea__control:focus{outline:none}.textarea--small{border-radius:var(--cx-input-border-radius-small);font-size:var(--cx-input-font-size-small)}.textarea--small .textarea-container{padding-left:var(--cx-input-spacing-small);padding-right:var(--cx-input-spacing-small)}.textarea--medium{border-radius:var(--cx-input-border-radius-medium);font-size:var(--cx-input-font-size-small)}.textarea--medium .textarea-container{padding-left:var(--cx-input-spacing-medium);padding-right:var(--cx-input-spacing-medium)}.textarea--large{border-radius:var(--cx-input-border-radius-large);font-size:var(--cx-input-font-size-small)}.textarea--large .textarea-container{padding-left:var(--cx-input-spacing-large);padding-right:var(--cx-input-spacing-large)}.textarea--resize-none .textarea__control{resize:none}.textarea--resize-vertical .textarea__control{resize:vertical}.textarea--resize-auto .textarea__control{resize:none;height:auto;overflow-y:hidden}.textarea-container{flex-direction:column;width:100%;height:100%;display:inline-flex;position:relative}.form-control__label{pointer-events:none;background-color:var(--textarea-background-color);width:fit-content;line-height:1;-webkit-transition:transform .2s ease-in-out;-moz-transition:transform .2s ease-in-out;transition:transform .2s ease-in-out;position:relative}.form-control--has-label .textarea--small .form-control__label{font-size:var(--cx-input-label-font-size-small);margin:0}.form-control--has-label .textarea--medium .form-control__label{font-size:var(--cx-input-label-font-size-medium);margin:0}.form-control--has-label .textarea--large .form-control__label{font-size:var(--cx-input-label-font-size-large);margin:0}.textarea__character-count{color:var(--cx-input-suffix-color,var(--cx-input-color));font-size:var(--cx-input-font-size);font-weight:var(--cx-input-font-weight);letter-spacing:var(--cx-input-letter-spacing);line-height:var(--cx-input-line-height);padding-inline-end:var(--cx-spacing-x-small);padding-top:var(--cx-spacing-2x-small);white-space:nowrap;justify-content:flex-end;align-items:center;display:flex}.textarea--small .form-control__label{transform:translateY(calc(( var(--cx-input-height-small) + 1.25rem - var(--cx-input-label-font-size-small) ) / 2))}.textarea--medium .form-control__label{transform:translateY(calc(( var(--cx-input-height-medium) + 1rem - var(--cx-input-label-font-size-medium) ) / 2))}.textarea--large .form-control__label{transform:translateY(calc(( var(--cx-input-height-large) + 1rem - var(--cx-input-label-font-size-large) ) / 2))}.form-control--has-label .textarea--focused .form-control__label,.form-control--has-label .textarea--placeholder-visible .form-control__label,.form-control--has-label .textarea:not(.textarea--empty) .form-control__label{transform:translateY(calc(var(--cx-spacing-2x-small) + var(--cx-spacing-3x-small)))}`;
var F = Object.defineProperty, T = Object.getOwnPropertyDescriptor, r = (t, o, i, l) => {
  for (var s = l > 1 ? void 0 : l ? T(o, i) : o, h = t.length - 1, u; h >= 0; h--)
    (u = t[h]) && (s = (l ? u(o, i, s) : u(s)) || s);
  return l && s && F(o, i, s), s;
};
let e = class extends m {
  constructor() {
    super(...arguments), this.formControlController = new _(this, {
      assumeInteractionOn: ["cx-input"]
    }), this.hasSlotController = new z(
      this,
      "help-text",
      "label"
    ), this.hasFocus = !1, this.title = "", this.name = "", this.value = "", this.size = "medium", this.filled = !1, this.label = "", this.helpText = "", this.placeholder = "", this.rows = 4, this.resize = "vertical", this.disabled = !1, this.readonly = !1, this.form = void 0, this.required = !1, this.showLength = !1, this.autoFocus = !1, this.spellCheck = !0, this.defaultValue = "", this._fillHeightPx = null;
  }
  /** Gets the validity state object */
  get validity() {
    return this.input.validity;
  }
  /** Gets the validation message */
  get validationMessage() {
    return this.input.validationMessage;
  }
  connectedUpdatedCallback() {
    this.resizeObserver = new ResizeObserver(() => {
      requestAnimationFrame(() => this.setTextareaHeight());
    }), this.setTextareaHeight(), this.updateResizeObserver();
  }
  runFirstUpdated() {
    this.formControlController.updateValidity();
  }
  disconnectedCallback() {
    super.disconnectedCallback(), this.resizeObserver?.disconnect();
  }
  updateResizeObserver() {
    this.resizeObserver.disconnect(), this.rows === c.Max ? (this.resizeObserver.observe(this), this.resizeObserver.observe(this.formControlRoot)) : this.resizeObserver.observe(this.input);
  }
  handleBlur() {
    this.hasFocus = !1, this.emit("cx-blur");
  }
  handleChange() {
    this.value = this.input.value, this.setTextareaHeight(), this.emit("cx-change");
  }
  handleFocus() {
    this.hasFocus = !0, this.emit("cx-focus");
  }
  handleInput() {
    this.value = this.input.value, this.emit("cx-input");
  }
  handleInvalid(t) {
    this.formControlController.setValidity(!1), this.formControlController.emitInvalidEvent(t);
  }
  setTextareaHeight() {
    if (this.rows === c.Max) {
      const t = this.clientHeight;
      if (t === 0)
        return;
      const o = Number.parseFloat(this.input.style.height);
      if (this._fillHeightPx !== null && o !== this._fillHeightPx)
        return;
      this.input.style.height = "0px";
      const i = this.formControlRoot?.offsetHeight ?? 0, l = Math.max(t - i, 0);
      this.input.style.height = `${l}px`, this._fillHeightPx = l;
    } else this.resize === "auto" ? (this.input.style.height = "auto", this.input.style.height = `${this.input.scrollHeight}px`) : this.input.style.height = void 0;
  }
  handleDisabledChange() {
    this.formControlController.setValidity(this.disabled);
  }
  handleRowsChange() {
    this.input.style.height = "", this._fillHeightPx = null, this.setTextareaHeight(), this.updateResizeObserver();
  }
  async handleValueChange() {
    await this.updateComplete, this.formControlController.updateValidity(), this.setTextareaHeight();
  }
  /** Sets focus on the textarea. */
  focus(t) {
    this.input.focus(t);
  }
  /** Removes focus from the textarea. */
  blur() {
    this.input.blur();
  }
  /** Selects all the text in the textarea. */
  select() {
    this.input.select();
  }
  /** Gets or sets the textarea's scroll position. */
  scrollPosition(t) {
    if (t) {
      typeof t.top == "number" && (this.input.scrollTop = t.top), typeof t.left == "number" && (this.input.scrollLeft = t.left);
      return;
    }
    return {
      left: this.input.scrollLeft,
      top: this.input.scrollTop
    };
  }
  /** Sets the start and end positions of the text selection (0-based). */
  setSelectionRange(t, o, i = "none") {
    this.input.setSelectionRange(
      t,
      o,
      i
    );
  }
  /** Replaces a range of text with a new string. */
  setRangeText(t, o, i, l = "preserve") {
    const s = o ?? this.input.selectionStart, h = i ?? this.input.selectionEnd;
    this.input.setRangeText(
      t,
      s,
      h,
      l
    ), this.value !== this.input.value && (this.value = this.input.value, this.setTextareaHeight());
  }
  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
  checkValidity() {
    return this.input.checkValidity();
  }
  /** Gets the associated form, if one exists. */
  getForm() {
    return this.formControlController.getForm();
  }
  /** Checks for validity and shows the browser's validation message if the control is invalid. */
  reportValidity() {
    return this.input.reportValidity();
  }
  /** Sets a custom validation message. Pass an empty string to restore validity. */
  setCustomValidity(t) {
    this.input.setCustomValidity(t), this.formControlController.updateValidity();
  }
  render() {
    const t = this.hasSlotController.test("label"), o = this.hasSlotController.test("help-text"), i = this.label ? !0 : !!t, l = this.helpText ? !0 : !!o, s = this.placeholder && this.value.length === 0;
    return p`<div part="form-control" class=${x({
      "form-control": !0,
      "form-control--has-help-text": l,
      "form-control--has-label": i,
      "form-control--large": this.size === "large",
      "form-control--medium": this.size === "medium",
      "form-control--small": this.size === "small"
    })}><div part="form-control-input" class="form-control-input"><div part="base" class=${x({
      textarea: !0,
      "textarea--disabled": this.disabled,
      "textarea--empty": !this.value,
      "textarea--filled": this.filled,
      "textarea--focused": this.hasFocus,
      "textarea--large": this.size === "large",
      "textarea--medium": this.size === "medium",
      "textarea--placeholder-visible": s,
      "textarea--resize-auto": this.resize === "auto" && this.rows !== c.Max,
      "textarea--resize-none": this.resize === "none",
      "textarea--resize-vertical": this.resize === "vertical",
      "textarea--small": this.size === "small",
      "textarea--standard": !this.filled
    })}><span class="textarea-container"><label part="form-control-label" class="form-control__label" for="input" aria-hidden=${i ? "false" : "true"}><slot name="label">${this.label}</slot></label><textarea part="textarea" id="input" class="textarea__control" title=${this.title} name=${n(this.name)} .value=${k(this.value)} ?disabled=${this.disabled} ?readonly=${this.readonly} ?required=${this.required} placeholder=${n(this.placeholder)} rows=${n(this.rows === c.Max ? void 0 : this.rows)} minlength=${n(this.minlength)} maxlength=${n(this.maxlength)} autocapitalize=${n(this.autoCapitalize)} autocorrect=${n(this.autoCorrect)} ?autofocus=${this.autoFocus} spellcheck=${n(this.spellCheck)} enterkeyhint=${n(this.enterKeyHint)} inputmode=${n(this.inputMode)} aria-describedby="help-text" @change=${this.handleChange} @input=${this.handleInput} @invalid=${this.handleInvalid} @focus=${this.handleFocus} @blur=${this.handleBlur}></textarea></span></div>${$(this.showLength, () => p`<div part="character-count" class="textarea__character-count">${[
      this.minlength && `${this.minlength} /`,
      this.value.length,
      this.maxlength && `/ ${this.maxlength}`
    ].filter(Boolean).join(" ")}</div>`)}</div><div part="form-control-help-text" id="help-text" class="form-control__help-text" aria-hidden=${l ? "false" : "true"}><slot name="help-text">${this.helpText}</slot></div></div>`;
  }
};
e.styles = [b, g, H];
r([
  f(".textarea__control")
], e.prototype, "input", 2);
r([
  f(".form-control")
], e.prototype, "formControlRoot", 2);
r([
  w()
], e.prototype, "hasFocus", 2);
r([
  a()
], e.prototype, "title", 2);
r([
  a()
], e.prototype, "name", 2);
r([
  a()
], e.prototype, "value", 2);
r([
  a({ reflect: !0 })
], e.prototype, "size", 2);
r([
  a({ reflect: !0, type: Boolean })
], e.prototype, "filled", 2);
r([
  a()
], e.prototype, "label", 2);
r([
  a({ attribute: "help-text" })
], e.prototype, "helpText", 2);
r([
  a()
], e.prototype, "placeholder", 2);
r([
  a({
    converter: {
      fromAttribute: (t) => {
        if (t == null || t.trim() === "")
          return 4;
        if (t === c.Max)
          return c.Max;
        const o = Number(t);
        return Number.isFinite(o) && o > 0 ? o : 4;
      },
      toAttribute: String
    }
  })
], e.prototype, "rows", 2);
r([
  a()
], e.prototype, "resize", 2);
r([
  a({ reflect: !0, type: Boolean })
], e.prototype, "disabled", 2);
r([
  a({ reflect: !0, type: Boolean })
], e.prototype, "readonly", 2);
r([
  a({ reflect: !1 })
], e.prototype, "form", 2);
r([
  a({ reflect: !0, type: Boolean })
], e.prototype, "required", 2);
r([
  a({ type: Number })
], e.prototype, "minlength", 2);
r([
  a({ type: Number })
], e.prototype, "maxlength", 2);
r([
  a({ attribute: "show-length", type: Boolean })
], e.prototype, "showLength", 2);
r([
  a({ attribute: "autocapitalize", reflect: !0, type: String })
], e.prototype, "autoCapitalize", 2);
r([
  a({ attribute: "autocorrect", reflect: !0, type: Boolean })
], e.prototype, "autoCorrect", 2);
r([
  a()
], e.prototype, "autocomplete", 2);
r([
  a({ attribute: "autofocus", reflect: !0, type: Boolean })
], e.prototype, "autoFocus", 2);
r([
  a({ attribute: "enterkeyhint", reflect: !0, type: String })
], e.prototype, "enterKeyHint", 2);
r([
  a({
    attribute: "spellcheck",
    converter: {
      // Allow "true|false" attribute values but keep the property boolean
      fromAttribute: (t) => !(!t || t === "false"),
      toAttribute: (t) => t ? "true" : "false"
    },
    reflect: !0,
    type: Boolean
  })
], e.prototype, "spellCheck", 2);
r([
  a({ attribute: "inputmode", reflect: !0, type: String })
], e.prototype, "inputMode", 2);
r([
  y()
], e.prototype, "defaultValue", 2);
r([
  d("disabled", { waitUntilFirstUpdate: !0 })
], e.prototype, "handleDisabledChange", 1);
r([
  d("rows", { waitUntilFirstUpdate: !0 })
], e.prototype, "handleRowsChange", 1);
r([
  d("value", { waitUntilFirstUpdate: !0 })
], e.prototype, "handleValueChange", 1);
e = r([
  v("cx-textarea")
], e);
export {
  e as default
};
