@getflip/swirl-components 0.39.1 → 0.40.0

package/dist/collection/components/swirl-text-input/swirl-text-input.css

@@ -17,6 +17,10 @@
   line-height: var(--s-line-height-sm);
 }
 
+.text-input--auto-grow .text-input__input {
+    max-height: none;
+  }
+
 .text-input--clearable,
 .text-input--type-number,
 .text-input--type-password {

package/dist/collection/components/swirl-text-input/swirl-text-input.js

@@ -68,6 +68,7 @@ export class SwirlTextInput {
     };
     this.autoComplete = "on";
     this.autoFocus = undefined;
+    this.autoGrow = undefined;
     this.autoSelect = undefined;
     this.clearable = undefined;
     this.clearButtonLabel = "Clear input";
@@ -113,12 +114,12 @@ export class SwirlTextInput {
     this.iconSize = smallIcon ? 20 : 24;
   }
   adjustInputSize() {
-    if (this.rows > 1) {
+    if (this.rows > 1 || this.autoGrow) {
       this.inputEl.style.width = "";
       this.inputEl.style.height = "";
       this.inputEl.style.height = this.inputEl.scrollHeight / 16 + "rem";
     }
-    if (this.rows === 1) {
+    if (this.rows === 1 && !this.autoGrow) {
       this.inputEl.style.height = "";
       this.inputEl.style.width = "";
       if (this.type !== "password" && !this.disableDynamicWidth) {
@@ -134,7 +135,7 @@ export class SwirlTextInput {
   }
   render() {
     var _a;
-    const Tag = this.rows === 1 ? "input" : "textarea";
+    const Tag = this.rows === 1 && !this.autoGrow ? "input" : "textarea";
     const ariaInvalid = this.invalid === true || this.invalid === false
       ? String(this.invalid)
       : undefined;
@@ -148,13 +149,14 @@ export class SwirlTextInput {
       !this.showCharacterCounter;
     const type = this.type === "password" && this.showPassword ? "text" : this.type;
     const className = classnames("text-input", `text-input--type-${this.type}`, {
+      "text-input--auto-grow": this.autoGrow,
       "text-input--clearable": this.clearable,
       "text-input--disabled": this.disabled,
       "text-input--disable-dynamic-width": this.disableDynamicWidth,
       "text-input--inline": this.inline,
       "text-input--show-password": this.type === "password" && this.showPassword,
     });
-    return (h(Host, null, h("div", { class: className }, this.prefixLabel && (h("span", { class: "text-input__prefix" }, this.prefixLabel)), h(Tag, { "aria-autocomplete": this.swirlAriaAutocomplete, "aria-controls": this.swirlAriaControls, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-invalid": ariaInvalid, autoComplete: this.autoComplete, autoFocus: this.autoFocus, class: "text-input__input", disabled: this.disabled, inputMode: this.mode, maxLength: this.maxLength, max: this.type === "number" ? this.max : undefined, min: this.type === "number" ? this.min : undefined, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, onKeyPress: this.onKeyPress, ref: (el) => (this.inputEl = el), required: this.required, role: this.swirlRole, rows: this.rows > 1 ? this.rows : undefined, spellcheck: this.spellCheck, step: this.type === "number" ? this.step : undefined, type: type, value: this.rows === 1 ? this.value : undefined }, this.rows > 1 && this.value), this.suffixLabel && (h("span", { class: "text-input__suffix" }, this.suffixLabel)), showClearButton && (h("button", { "aria-label": this.clearButtonLabel, class: "text-input__clear-button", onClick: this.clear, part: "text-input__clear-button", type: "button" }, h("swirl-icon-cancel", { size: this.iconSize }))), showPasswordToggle && (h("button", { "aria-label": this.passwordToggleLabel, class: "text-input__password-toggle", onClick: this.togglePassword, type: "button" }, this.showPassword ? (h("swirl-icon-visibility-off", { size: this.iconSize })) : (h("swirl-icon-visibility", { size: this.iconSize })))), showStepper && (h("span", { class: "text-input__stepper" }, h("button", { "aria-hidden": "true", class: "text-input__step-button", onClick: this.increaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-less", { size: this.iconSize })), h("button", { "aria-hidden": "true", class: "text-input__step-button", onClick: this.decreaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-more", { size: this.iconSize })))), this.showCharacterCounter && (h("span", { class: "text-input__character-counter" }, ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0, " ", Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")))));
+    return (h(Host, null, h("div", { class: className }, this.prefixLabel && (h("span", { class: "text-input__prefix" }, this.prefixLabel)), h(Tag, { "aria-autocomplete": this.swirlAriaAutocomplete, "aria-controls": this.swirlAriaControls, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-invalid": ariaInvalid, autoComplete: this.autoComplete, autoFocus: this.autoFocus, class: "text-input__input", disabled: this.disabled, inputMode: this.mode, maxLength: this.maxLength, max: this.type === "number" ? this.max : undefined, min: this.type === "number" ? this.min : undefined, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, onKeyPress: this.onKeyPress, ref: (el) => (this.inputEl = el), required: this.required, role: this.swirlRole, rows: this.rows > 1 ? this.rows : this.autoGrow ? 1 : undefined, spellcheck: this.spellCheck, step: this.type === "number" ? this.step : undefined, type: type, value: this.rows === 1 ? this.value : undefined }, this.rows > 1 && this.value), this.suffixLabel && (h("span", { class: "text-input__suffix" }, this.suffixLabel)), showClearButton && (h("button", { "aria-label": this.clearButtonLabel, class: "text-input__clear-button", onClick: this.clear, part: "text-input__clear-button", type: "button" }, h("swirl-icon-cancel", { size: this.iconSize }))), showPasswordToggle && (h("button", { "aria-label": this.passwordToggleLabel, class: "text-input__password-toggle", onClick: this.togglePassword, type: "button" }, this.showPassword ? (h("swirl-icon-visibility-off", { size: this.iconSize })) : (h("swirl-icon-visibility", { size: this.iconSize })))), showStepper && (h("span", { class: "text-input__stepper" }, h("button", { "aria-hidden": "true", class: "text-input__step-button", onClick: this.increaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-less", { size: this.iconSize })), h("button", { "aria-hidden": "true", class: "text-input__step-button", onClick: this.decreaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-more", { size: this.iconSize })))), this.showCharacterCounter && (h("span", { class: "text-input__character-counter" }, ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0, " ", Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")))));
   }
   static get is() { return "swirl-text-input"; }
   static get encapsulation() { return "scoped"; }
@@ -205,6 +207,23 @@ export class SwirlTextInput {
         "attribute": "auto-focus",
         "reflect": false
       },
+      "autoGrow": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "auto-grow",
+        "reflect": false
+      },
       "autoSelect": {
         "type": "boolean",
         "mutable": false,