@nectary/components 5.11.1 → 5.13.0

package/bundle.js

@@ -5346,6 +5346,7 @@ class Input extends NectaryElement {
     this.#$iconSlot.addEventListener("slotchange", this.#onIconSlotChange, options);
     this.#$leftSlot.addEventListener("slotchange", this.#onLeftSlotChange, options);
     this.#$rightSlot.addEventListener("slotchange", this.#onRightSlotChange, options);
+    this.addEventListener("-key-down", this.#onKeyDownReactHandler, options);
     this.addEventListener("-change", this.#onChangeReactHandler, options);
     this.addEventListener("-focus", this.#onFocusReactHandler, options);
     this.addEventListener("-blur", this.#onBlurReactHandler, options);
@@ -5437,6 +5438,7 @@ class Input extends NectaryElement {
         }
       }
     }
+    this.dispatchEvent(new CustomEvent("-key-down", e));
   };
   static get observedAttributes() {
     return [
@@ -5998,6 +6000,10 @@ class Input extends NectaryElement {
     const size = this.getAttribute("data-size") ?? DEFAULT_SIZE;
     this.#sizeContext.dispatch(size);
   }
+  #onKeyDownReactHandler = (e) => {
+    getReactEventHandler(this, "on-key-down")?.(e);
+    getReactEventHandler(this, "onKeyDown")?.(e);
+  };
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
     getReactEventHandler(this, "onChange")?.(e);
@@ -12389,6 +12395,7 @@ class Textarea extends NectaryElement {
     this.#sizeContext.listen(this.#controller.signal);
     this.#onBottomSlotChange();
     this.#updateMinRows();
+    this.#updateMaxRows();
     this.#onSizeUpdate();
   }
   disconnectedCallback() {
@@ -12484,6 +12491,10 @@ class Textarea extends NectaryElement {
         updateAttribute(this.#$input, "rows", newVal);
         break;
       }
+      case "maxrows": {
+        this.#updateMaxRows();
+        break;
+      }
       case "minrows": {
         this.#updateMinRows();
         break;
@@ -12549,6 +12560,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 +12593,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 +12625,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/input/index.js

@@ -69,6 +69,7 @@ class Input extends NectaryElement {
     this.#$iconSlot.addEventListener("slotchange", this.#onIconSlotChange, options);
     this.#$leftSlot.addEventListener("slotchange", this.#onLeftSlotChange, options);
     this.#$rightSlot.addEventListener("slotchange", this.#onRightSlotChange, options);
+    this.addEventListener("-key-down", this.#onKeyDownReactHandler, options);
     this.addEventListener("-change", this.#onChangeReactHandler, options);
     this.addEventListener("-focus", this.#onFocusReactHandler, options);
     this.addEventListener("-blur", this.#onBlurReactHandler, options);
@@ -160,6 +161,7 @@ class Input extends NectaryElement {
         }
       }
     }
+    this.dispatchEvent(new CustomEvent("-key-down", e));
   };
   static get observedAttributes() {
     return [
@@ -721,6 +723,10 @@ class Input extends NectaryElement {
     const size = this.getAttribute("data-size") ?? DEFAULT_SIZE;
     this.#sizeContext.dispatch(size);
   }
+  #onKeyDownReactHandler = (e) => {
+    getReactEventHandler(this, "on-key-down")?.(e);
+    getReactEventHandler(this, "onKeyDown")?.(e);
+  };
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
     getReactEventHandler(this, "onChange")?.(e);

package/input/types.d.ts

@@ -50,6 +50,8 @@ export type TSinchInputMethods = {
     setSelectionRange(selectionStart: number, selectionEnd: number): void;
 };
 export type TSinchInputEvents = {
+    /** key-down handler*/
+    '-key-down'?: (e: KeyboardEvent) => void;
     /** Change value handler */
     '-change'?: (e: CustomEvent<string>) => void;
     /** Focus handler */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "5.11.1",
+  "version": "5.13.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;