@nectary/components 5.11.0 → 5.12.0

package/bundle.js

@@ -295,8 +295,8 @@ class Text extends NectaryElement {
   get inline() {
     return getBooleanAttribute(this, "inline");
   }
-  set ellipsis(isEllipsis) {
-    updateBooleanAttribute(this, "ellipsis", isEllipsis);
+  set ellipsis(isEllipsis2) {
+    updateBooleanAttribute(this, "ellipsis", isEllipsis2);
   }
   get ellipsis() {
     return getBooleanAttribute(this, "ellipsis");
@@ -364,8 +364,8 @@ class Title extends NectaryElement {
   get type() {
     return getLiteralAttribute(this, typeValues$6, "type");
   }
-  set ellipsis(isEllipsis) {
-    updateBooleanAttribute(this, "ellipsis", isEllipsis);
+  set ellipsis(isEllipsis2) {
+    updateBooleanAttribute(this, "ellipsis", isEllipsis2);
   }
   get ellipsis() {
     return getBooleanAttribute(this, "ellipsis");
@@ -3358,8 +3358,8 @@ class CardV2Title extends NectaryElement {
   set orientation(value) {
     updateAttribute(this, "orientation", value);
   }
-  set ellipsis(isEllipsis) {
-    updateBooleanAttribute(this, "ellipsis", isEllipsis);
+  set ellipsis(isEllipsis2) {
+    updateBooleanAttribute(this, "ellipsis", isEllipsis2);
   }
   get ellipsis() {
     return getBooleanAttribute(this, "ellipsis");
@@ -7696,6 +7696,9 @@ const FIRST_BTN_INDEX = 0;
 const LAST_BTN_INDEX = NUM_BUTTONS - 1;
 const DOTS_LEFT_INDEX = 1;
 const DOTS_RIGHT_INDEX = LAST_BTN_INDEX - 1;
+const isEllipsis = (btnIndex, value, max) => {
+  return btnIndex === DOTS_LEFT_INDEX && value > MIDDLE_BTN_INDEX || btnIndex === DOTS_RIGHT_INDEX && value <= max - DOTS_RIGHT_INDEX;
+};
 const template$t = document.createElement("template");
 template$t.innerHTML = templateHTML$t;
 class Pagination extends NectaryElement {
@@ -7763,19 +7766,12 @@ class Pagination extends NectaryElement {
         isActive = i === MIDDLE_BTN_INDEX;
       }
       setClass($b, "active", isActive);
-      if (isActive) {
-        $b.setAttribute("aria-current", "page");
-      } else {
-        $b.removeAttribute("aria-current");
-      }
+      updateAttribute($b, "aria-current", isActive ? "page" : null);
       if (max > NUM_BUTTONS) {
-        const isEllipsis = i === DOTS_LEFT_INDEX && value > MIDDLE_BTN_INDEX || i === DOTS_RIGHT_INDEX && value <= max - DOTS_RIGHT_INDEX;
-        setClass($b, "dots", isEllipsis);
-        if (isEllipsis) {
-          $b.setAttribute("aria-hidden", "true");
-        } else {
-          $b.removeAttribute("aria-hidden");
-        }
+        const ellipsis = isEllipsis(i, value, max);
+        setClass($b, "dots", ellipsis);
+        updateAttribute($b, "aria-hidden", ellipsis);
+        $b.disabled = ellipsis;
       }
       setClass($b, "hidden", i >= max);
       const btnText = $b.firstElementChild;
@@ -7791,7 +7787,7 @@ class Pagination extends NectaryElement {
   }
   #onButtonClick = (e) => {
     e.stopPropagation();
-    const value = Math.max(getIntegerAttribute(this, "value", 0) - 1);
+    const value = getIntegerAttribute(this, "value", 0) - 1;
     const max = Math.max(0, getIntegerAttribute(this, "max", 0));
     if (isTargetEqual(e, this.#$left)) {
       return this.#dispatchChangeEvent(Math.max(value - 1, 0));
@@ -12393,6 +12389,7 @@ class Textarea extends NectaryElement {
     this.#sizeContext.listen(this.#controller.signal);
     this.#onBottomSlotChange();
     this.#updateMinRows();
+    this.#updateMaxRows();
     this.#onSizeUpdate();
   }
   disconnectedCallback() {
@@ -12488,6 +12485,10 @@ class Textarea extends NectaryElement {
         updateAttribute(this.#$input, "rows", newVal);
         break;
       }
+      case "maxrows": {
+        this.#updateMaxRows();
+        break;
+      }
       case "minrows": {
         this.#updateMinRows();
         break;
@@ -12553,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;
   }
@@ -12580,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) {
@@ -12603,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.0",
+  "version": "5.12.0",
   "files": [
     "**/*/*.css",
     "**/*/*.json",

package/pagination/index.js

@@ -11,6 +11,9 @@ const FIRST_BTN_INDEX = 0;
 const LAST_BTN_INDEX = NUM_BUTTONS - 1;
 const DOTS_LEFT_INDEX = 1;
 const DOTS_RIGHT_INDEX = LAST_BTN_INDEX - 1;
+const isEllipsis = (btnIndex, value, max) => {
+  return btnIndex === DOTS_LEFT_INDEX && value > MIDDLE_BTN_INDEX || btnIndex === DOTS_RIGHT_INDEX && value <= max - DOTS_RIGHT_INDEX;
+};
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class Pagination extends NectaryElement {
@@ -78,19 +81,12 @@ class Pagination extends NectaryElement {
         isActive = i === MIDDLE_BTN_INDEX;
       }
       setClass($b, "active", isActive);
-      if (isActive) {
-        $b.setAttribute("aria-current", "page");
-      } else {
-        $b.removeAttribute("aria-current");
-      }
+      updateAttribute($b, "aria-current", isActive ? "page" : null);
       if (max > NUM_BUTTONS) {
-        const isEllipsis = i === DOTS_LEFT_INDEX && value > MIDDLE_BTN_INDEX || i === DOTS_RIGHT_INDEX && value <= max - DOTS_RIGHT_INDEX;
-        setClass($b, "dots", isEllipsis);
-        if (isEllipsis) {
-          $b.setAttribute("aria-hidden", "true");
-        } else {
-          $b.removeAttribute("aria-hidden");
-        }
+        const ellipsis = isEllipsis(i, value, max);
+        setClass($b, "dots", ellipsis);
+        updateAttribute($b, "aria-hidden", ellipsis);
+        $b.disabled = ellipsis;
       }
       setClass($b, "hidden", i >= max);
       const btnText = $b.firstElementChild;
@@ -106,7 +102,7 @@ class Pagination extends NectaryElement {
   }
   #onButtonClick = (e) => {
     e.stopPropagation();
-    const value = Math.max(getIntegerAttribute(this, "value", 0) - 1);
+    const value = getIntegerAttribute(this, "value", 0) - 1;
     const max = Math.max(0, getIntegerAttribute(this, "max", 0));
     if (isTargetEqual(e, this.#$left)) {
       return this.#dispatchChangeEvent(Math.max(value - 1, 0));

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;