@nectary/components 5.11.1 → 5.12.0

package/bundle.js

@@ -12389,6 +12389,7 @@ class Textarea extends NectaryElement {
     this.#sizeContext.listen(this.#controller.signal);
     this.#onBottomSlotChange();
     this.#updateMinRows();
+    this.#updateMaxRows();
     this.#onSizeUpdate();
   }
   disconnectedCallback() {
@@ -12484,6 +12485,10 @@ class Textarea extends NectaryElement {
         updateAttribute(this.#$input, "rows", newVal);
         break;
       }
+      case "maxrows": {
+        this.#updateMaxRows();
+        break;
+      }
       case "minrows": {
         this.#updateMinRows();
         break;
@@ -12549,6 +12554,12 @@ class Textarea extends NectaryElement {
   get minRows() {
     return getIntegerAttribute(this, "minrows", 0);
   }
+  get maxRows() {
+    return getIntegerAttribute(this, "maxrows", 0);
+  }
+  set maxRows(value) {
+    updateAttribute(this, "maxRows", value);
+  }
   get selectionStart() {
     return this.#$input.selectionStart;
   }
@@ -12576,6 +12587,15 @@ class Textarea extends NectaryElement {
   blur() {
     this.#$input.blur();
   }
+  #updateMaxRows() {
+    if (this.maxRows === 0) {
+      this.#$input.style.removeProperty("max-height");
+      return;
+    }
+    if (this.isDomConnected) {
+      this.#calcMaxRows();
+    }
+  }
   #updateMinRows() {
     const minRows = this.minRows;
     if (minRows <= 0) {
@@ -12599,6 +12619,14 @@ class Textarea extends NectaryElement {
       this.#calcMinRows();
     }
   };
+  #calcMaxRows() {
+    if (this.maxRows === 0) {
+      return;
+    }
+    this.#$input.rows = this.maxRows;
+    this.#$input.style.setProperty("max-height", `${getRect(this.#$input).height}px`);
+    this.#$input.rows = this.rows;
+  }
   #calcMinRows() {
     this.#$input.rows = this.minRows;
     this.#$input.style.setProperty("min-height", `${getRect(this.#$input).height}px`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "5.11.1",
+  "version": "5.12.0",
   "files": [
     "**/*/*.css",
     "**/*/*.json",

package/textarea/index.d.ts

@@ -27,6 +27,8 @@ export declare class Textarea extends NectaryElement {
     get rows(): HTMLTextAreaElement['rows'];
     set minRows(value: number);
     get minRows(): number;
+    get maxRows(): number;
+    set maxRows(value: number);
     get selectionStart(): HTMLTextAreaElement['selectionStart'];
     set selectionStart(value: HTMLTextAreaElement['selectionStart']);
     get selectionEnd(): HTMLTextAreaElement['selectionEnd'];

package/textarea/index.js

@@ -57,6 +57,7 @@ class Textarea extends NectaryElement {
     this.#sizeContext.listen(this.#controller.signal);
     this.#onBottomSlotChange();
     this.#updateMinRows();
+    this.#updateMaxRows();
     this.#onSizeUpdate();
   }
   disconnectedCallback() {
@@ -152,6 +153,10 @@ class Textarea extends NectaryElement {
         updateAttribute(this.#$input, "rows", newVal);
         break;
       }
+      case "maxrows": {
+        this.#updateMaxRows();
+        break;
+      }
       case "minrows": {
         this.#updateMinRows();
         break;
@@ -217,6 +222,12 @@ class Textarea extends NectaryElement {
   get minRows() {
     return getIntegerAttribute(this, "minrows", 0);
   }
+  get maxRows() {
+    return getIntegerAttribute(this, "maxrows", 0);
+  }
+  set maxRows(value) {
+    updateAttribute(this, "maxRows", value);
+  }
   get selectionStart() {
     return this.#$input.selectionStart;
   }
@@ -244,6 +255,15 @@ class Textarea extends NectaryElement {
   blur() {
     this.#$input.blur();
   }
+  #updateMaxRows() {
+    if (this.maxRows === 0) {
+      this.#$input.style.removeProperty("max-height");
+      return;
+    }
+    if (this.isDomConnected) {
+      this.#calcMaxRows();
+    }
+  }
   #updateMinRows() {
     const minRows = this.minRows;
     if (minRows <= 0) {
@@ -267,6 +287,14 @@ class Textarea extends NectaryElement {
       this.#calcMinRows();
     }
   };
+  #calcMaxRows() {
+    if (this.maxRows === 0) {
+      return;
+    }
+    this.#$input.rows = this.maxRows;
+    this.#$input.style.setProperty("max-height", `${getRect(this.#$input).height}px`);
+    this.#$input.rows = this.rows;
+  }
   #calcMinRows() {
     this.#$input.rows = this.minRows;
     this.#$input.style.setProperty("min-height", `${getRect(this.#$input).height}px`);

package/textarea/types.d.ts

@@ -14,6 +14,7 @@ export type TSinchTextareaProps = {
     /** Number of rows */
     rows?: number;
     minRows?: number;
+    maxRows?: number;
     /** Whether the text field is resizable */
     resizable?: boolean;
     selectionStart?: number;