@orangelogic/design-system 2.77.0 → 2.78.0

package/library/components/textarea.js

@@ -1,19 +1,20 @@
-import { n as r, C as x } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as f } from "../chunks/component.styles.DMSLciL5.js";
-import { f as m } from "../chunks/form-control.styles.CUGhvlfT.js";
-import { c as b } from "../chunks/custom-element.L4WJXn1j.js";
-import { d as v } from "../chunks/default-value.COZopaet.js";
-import { F as g } from "../chunks/form.DgwYWi0O.js";
-import { H as y } from "../chunks/slot.j5oheLJC.js";
-import { w as u } from "../chunks/watch.BCJD77bD.js";
-import { i as _, x as p } from "../chunks/lit-element.jLBm65_O.js";
-import { r as z } from "../chunks/state.CSDxrqLd.js";
-import { e as C } from "../chunks/query.BBf1UFkC.js";
-import { e as d } from "../chunks/class-map.BiVq-cVR.js";
+import { n as a, C as m } from "../chunks/lib-cortex-element.CVMmyPMC.js";
+import { c as b } from "../chunks/component.styles.DMSLciL5.js";
+import { f as g } from "../chunks/form-control.styles.CUGhvlfT.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.DgwYWi0O.js";
+import { H as z } from "../chunks/slot.j5oheLJC.js";
+import { w as d } from "../chunks/watch.BCJD77bD.js";
+import { i as w, x as p } from "../chunks/lit-element.jLBm65_O.js";
+import { r as C } 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 w } from "../chunks/live.SCz6M8Gs.js";
-import { n as k } from "../chunks/when.Dr1es41R.js";
-const $ = _`
+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 F = w`
   :host {
     display: block;
   }
@@ -28,6 +29,7 @@ const $ = _`
   }
 
   .textarea {
+    --textarea-background-color: var(--cx-input-background-color);
     display: flex;
     align-items: center;
     position: relative;
@@ -47,12 +49,12 @@ const $ = _`
 
   /* Standard textareas */
   .textarea--standard {
-    background-color: var(--cx-input-background-color);
+    background-color: var(--textarea-background-color);
     border: solid var(--cx-input-border-width) var(--cx-input-border-color);
   }
 
   .textarea--standard:hover:not(.textarea--disabled) {
-    background-color: var(--cx-input-background-color-hover);
+    --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 {
@@ -60,7 +62,7 @@ const $ = _`
   }
 
   .textarea--standard.textarea--focused:not(.textarea--disabled) {
-    background-color: var(--cx-input-background-color-focus);
+    --textarea-background-color: var(--cx-input-background-color-focus);
     border-color: var(--cx-input-border-color-focus);
     color: var(--cx-input-color-focus);
   }
@@ -71,7 +73,7 @@ const $ = _`
   }
 
   .textarea--standard.textarea--disabled {
-    background-color: var(--cx-input-background-color-disabled);
+    --textarea-background-color: var(--cx-input-background-color-disabled);
     border-color: var(--cx-input-border-color-disabled);
     opacity: 0.5;
     cursor: default;
@@ -87,23 +89,24 @@ const $ = _`
 
   /* Filled textareas */
   .textarea--filled {
+    --textarea-background-color: var(--cx-input-filled-background-color);
     border: none;
-    background-color: var(--cx-input-filled-background-color);
+    background-color: var(--textarea-background-color);
     color: var(--cx-input-color);
   }
 
   .textarea--filled:hover:not(.textarea--disabled) {
-    background-color: var(--cx-input-filled-background-color-hover);
+    --textarea-background-color: var(--cx-input-filled-background-color-hover);
   }
 
   .textarea--filled.textarea--focused:not(.textarea--disabled) {
-    background-color: var(--cx-input-filled-background-color-focus);
+    --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 {
-    background-color: var(--cx-input-filled-background-color-disabled);
+    --textarea-background-color: var(--cx-input-filled-background-color-disabled);
     opacity: 0.5;
     cursor: default;
   }
@@ -215,6 +218,7 @@ const $ = _`
     pointer-events: none;
     width: fit-content;
     line-height: 1; /* use line-height: 1 for easier transform calculation */
+    background-color: var(--textarea-background-color);
   }
 
   .form-control--has-label .textarea--small .form-control__label {
@@ -298,20 +302,20 @@ const $ = _`
     ); /* distance from top */
   }
 `;
-var F = Object.defineProperty, T = Object.getOwnPropertyDescriptor, e = (a, i, l, s) => {
-  for (var o = s > 1 ? void 0 : s ? T(i, l) : i, c = a.length - 1, h; c >= 0; c--)
-    (h = a[c]) && (o = (s ? h(i, l, o) : h(o)) || o);
-  return s && o && F(i, l, o), o;
+var H = Object.defineProperty, S = Object.getOwnPropertyDescriptor, r = (t, o, i, l) => {
+  for (var s = l > 1 ? void 0 : l ? S(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 && H(o, i, s), s;
 };
-let t = class extends x {
+let e = class extends m {
   constructor() {
-    super(...arguments), this.formControlController = new g(this, {
+    super(...arguments), this.formControlController = new _(this, {
       assumeInteractionOn: ["cx-input"]
-    }), this.hasSlotController = new y(
+    }), 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.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() {
@@ -321,18 +325,19 @@ let t = class extends x {
   get validationMessage() {
     return this.input.validationMessage;
   }
-  connectedCallback() {
-    super.connectedCallback(), this.resizeObserver = new ResizeObserver(() => {
+  connectedUpdatedCallback() {
+    this.resizeObserver = new ResizeObserver(() => {
       requestAnimationFrame(() => this.setTextareaHeight());
-    }), this.updateComplete.then(() => {
-      this.setTextareaHeight(), this.resizeObserver.observe(this.input);
-    });
+    }), this.setTextareaHeight(), this.updateResizeObserver();
   }
   runFirstUpdated() {
     this.formControlController.updateValidity();
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.input && this.resizeObserver?.unobserve(this.input);
+    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");
@@ -346,24 +351,34 @@ let t = class extends x {
   handleInput() {
     this.value = this.input.value, this.emit("cx-input");
   }
-  handleInvalid(a) {
-    this.formControlController.setValidity(!1), this.formControlController.emitInvalidEvent(a);
+  handleInvalid(t) {
+    this.formControlController.setValidity(!1), this.formControlController.emitInvalidEvent(t);
   }
   setTextareaHeight() {
-    this.resize === "auto" ? (this.input.style.height = "auto", this.input.style.height = `${this.input.scrollHeight}px`) : this.input.style.height = void 0;
+    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.setTextareaHeight();
+    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(a) {
-    this.input.focus(a);
+  focus(t) {
+    this.input.focus(t);
   }
   /** Removes focus from the textarea. */
   blur() {
@@ -374,9 +389,9 @@ let t = class extends x {
     this.input.select();
   }
   /** Gets or sets the textarea's scroll position. */
-  scrollPosition(a) {
-    if (a) {
-      typeof a.top == "number" && (this.input.scrollTop = a.top), typeof a.left == "number" && (this.input.scrollLeft = a.left);
+  scrollPosition(t) {
+    if (t) {
+      typeof t.top == "number" && (this.input.scrollTop = t.top), typeof t.left == "number" && (this.input.scrollLeft = t.left);
       return;
     }
     return {
@@ -385,21 +400,21 @@ let t = class extends x {
     };
   }
   /** Sets the start and end positions of the text selection (0-based). */
-  setSelectionRange(a, i, l = "none") {
+  setSelectionRange(t, o, i = "none") {
     this.input.setSelectionRange(
-      a,
-      i,
-      l
+      t,
+      o,
+      i
     );
   }
   /** Replaces a range of text with a new string. */
-  setRangeText(a, i, l, s = "preserve") {
-    const o = i ?? this.input.selectionStart, c = l ?? this.input.selectionEnd;
+  setRangeText(t, o, i, l = "preserve") {
+    const s = o ?? this.input.selectionStart, h = i ?? this.input.selectionEnd;
     this.input.setRangeText(
-      a,
-      o,
-      c,
-      s
+      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. */
@@ -415,18 +430,18 @@ let t = class extends x {
     return this.input.reportValidity();
   }
   /** Sets a custom validation message. Pass an empty string to restore validity. */
-  setCustomValidity(a) {
-    this.input.setCustomValidity(a), this.formControlController.updateValidity();
+  setCustomValidity(t) {
+    this.input.setCustomValidity(t), this.formControlController.updateValidity();
   }
   render() {
-    const a = this.hasSlotController.test("label"), i = this.hasSlotController.test("help-text"), l = this.label ? !0 : !!a, s = this.helpText ? !0 : !!i, o = this.placeholder && this.value.length === 0;
+    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=${d({
+        class=${x({
       "form-control": !0,
-      "form-control--has-help-text": s,
-      "form-control--has-label": l,
+      "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"
@@ -435,7 +450,7 @@ let t = class extends x {
         <div part="form-control-input" class="form-control-input">
           <div
             part="base"
-            class=${d({
+            class=${x({
       textarea: !0,
       "textarea--disabled": this.disabled,
       "textarea--empty": !this.value,
@@ -443,8 +458,8 @@ let t = class extends x {
       "textarea--focused": this.hasFocus,
       "textarea--large": this.size === "large",
       "textarea--medium": this.size === "medium",
-      "textarea--placeholder-visible": o,
-      "textarea--resize-auto": this.resize === "auto",
+      "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",
@@ -456,22 +471,20 @@ let t = class extends x {
                 part="form-control-label"
                 class="form-control__label"
                 for="input"
-                aria-hidden=${l ? "false" : "true"}
-              >
-                <slot name="label">${this.label}</slot>
-              </label>
+                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=${w(this.value)}
+                .value=${k(this.value)}
                 ?disabled=${this.disabled}
                 ?readonly=${this.readonly}
                 ?required=${this.required}
                 placeholder=${n(this.placeholder)}
-                rows=${n(this.rows)}
+                rows=${n(this.rows === c.Max ? void 0 : this.rows)}
                 minlength=${n(this.minlength)}
                 maxlength=${n(this.maxlength)}
                 autocapitalize=${n(this.autoCapitalize)}
@@ -489,7 +502,7 @@ let t = class extends x {
               ></textarea>
             </span>
           </div>
-          ${k(this.showLength, () => p`
+          ${$(this.showLength, () => p`
               <div part="character-count" class="textarea__character-count">
                 ${[
       this.minlength && `${this.minlength} /`,
@@ -504,7 +517,7 @@ let t = class extends x {
           part="form-control-help-text"
           id="help-text"
           class="form-control__help-text"
-          aria-hidden=${s ? "false" : "true"}
+          aria-hidden=${l ? "false" : "true"}
         >
           <slot name="help-text">${this.helpText}</slot>
         </div>
@@ -512,109 +525,124 @@ let t = class extends x {
     `;
   }
 };
-t.styles = [f, m, $];
-e([
-  C(".textarea__control")
-], t.prototype, "input", 2);
-e([
-  z()
-], t.prototype, "hasFocus", 2);
-e([
-  r()
-], t.prototype, "title", 2);
-e([
-  r()
-], t.prototype, "name", 2);
-e([
-  r()
-], t.prototype, "value", 2);
-e([
-  r({ reflect: !0 })
-], t.prototype, "size", 2);
-e([
-  r({ reflect: !0, type: Boolean })
-], t.prototype, "filled", 2);
-e([
-  r()
-], t.prototype, "label", 2);
-e([
-  r({ attribute: "help-text" })
-], t.prototype, "helpText", 2);
-e([
-  r()
-], t.prototype, "placeholder", 2);
-e([
-  r({ type: Number })
-], t.prototype, "rows", 2);
-e([
-  r()
-], t.prototype, "resize", 2);
-e([
-  r({ reflect: !0, type: Boolean })
-], t.prototype, "disabled", 2);
-e([
-  r({ reflect: !0, type: Boolean })
-], t.prototype, "readonly", 2);
-e([
-  r({ reflect: !1 })
-], t.prototype, "form", 2);
-e([
-  r({ reflect: !0, type: Boolean })
-], t.prototype, "required", 2);
-e([
-  r({ type: Number })
-], t.prototype, "minlength", 2);
-e([
-  r({ type: Number })
-], t.prototype, "maxlength", 2);
-e([
-  r({ attribute: "show-length", type: Boolean })
-], t.prototype, "showLength", 2);
-e([
-  r({ attribute: "autocapitalize", reflect: !0, type: String })
-], t.prototype, "autoCapitalize", 2);
-e([
-  r({ attribute: "autocorrect", reflect: !0, type: Boolean })
-], t.prototype, "autoCorrect", 2);
-e([
-  r()
-], t.prototype, "autocomplete", 2);
-e([
-  r({ attribute: "autofocus", reflect: !0, type: Boolean })
-], t.prototype, "autoFocus", 2);
-e([
-  r({ attribute: "enterkeyhint", reflect: !0, type: String })
-], t.prototype, "enterKeyHint", 2);
-e([
-  r({
+e.styles = [b, g, F];
+r([
+  f(".textarea__control")
+], e.prototype, "input", 2);
+r([
+  f(".form-control")
+], e.prototype, "formControlRoot", 2);
+r([
+  C()
+], 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: (a) => !(!a || a === "false"),
-      toAttribute: (a) => a ? "true" : "false"
+      fromAttribute: (t) => !(!t || t === "false"),
+      toAttribute: (t) => t ? "true" : "false"
     },
     reflect: !0,
     type: Boolean
   })
-], t.prototype, "spellCheck", 2);
-e([
-  r({ attribute: "inputmode", reflect: !0, type: String })
-], t.prototype, "inputMode", 2);
-e([
-  v()
-], t.prototype, "defaultValue", 2);
-e([
-  u("disabled", { waitUntilFirstUpdate: !0 })
-], t.prototype, "handleDisabledChange", 1);
-e([
-  u("rows", { waitUntilFirstUpdate: !0 })
-], t.prototype, "handleRowsChange", 1);
-e([
-  u("value", { waitUntilFirstUpdate: !0 })
-], t.prototype, "handleValueChange", 1);
-t = e([
-  b("cx-textarea")
-], t);
+], 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 {
-  t as default
+  e as default
 };