Merge 542fb75 into 3b3bf1d

infor-design · May 21, 2024 · e9916bc · e9916bc
2 parents 3b3bf1d + 542fb75
commit e9916bc
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 16 deletions.
diff --git a/doc/CHANGELOG.md b/doc/CHANGELOG.md
@@ -5,6 +5,7 @@
 ### 1.2.0 Fixes
 
 - `[Dropdown]` Added additional fixes so that typeahead works in the angular examples. ([#2249](https://github.com/infor-design/enterprise-wc/issues/2249))
+- `[Pager]` Fix `ids-pager-button` so that it can be enabled if `page-total` is unknown or not provided. ([#1506](https://github.com/infor-design/enterprise-wc/issues/1506))
 - `[PopupMenu]` Fix popupmenu truncation bug for menu items with shortcuts. ([#2250](https://github.com/infor-design/enterprise-wc/issues/2250))
 - `[Popupmenu]` Changed the `position-style` default to `fixed` this causes better placement in scroll containers. ([#2289](https://github.com/infor-design/enterprise-wc/issues/2289))
 - `[Toolbar]` Converted toolbar tests to playwright. ([#1984](https://github.com/infor-design/enterprise-wc/issues/1984))

diff --git a/src/components/ids-pager/ids-pager-button.ts b/src/components/ids-pager/ids-pager-button.ts
@@ -88,7 +88,6 @@ export default class IdsPagerButton extends Base {
     super.attributeChangedCallback(name, oldValue, newValue);
 
     const shouldRerender = [
-      attributes.DISABLED,
       attributes.PAGE_NUMBER,
       attributes.PAGE_SIZE,
       attributes.STEP,
@@ -114,7 +113,7 @@ export default class IdsPagerButton extends Base {
       this.disabled = this.pager.disabled;
       this.pageNumber = this.pager.pageNumber;
       this.pageSize = this.pager.pageSize;
-      this.total = this.pager.total;
+      this.total = this.pager?.total ?? 0;
     }
 
     this.#updateNavDisabled();
@@ -137,7 +136,7 @@ export default class IdsPagerButton extends Base {
    */
   get pageCount(): number | null {
     const val = this.hasAttribute(attributes.TOTAL)
-      ? Math.ceil(this.total / this.pageSize)
+      ? Math.max(Math.ceil(this.total / this.pageSize), 1)
       : null;
     return this.pager?.pageCount ?? val;
   }
@@ -208,7 +207,7 @@ export default class IdsPagerButton extends Base {
    */
   set total(value: number) {
     let val = stringToNumber(value);
-    if (Number.isNaN(val) || val < 1) val = 1;
+    if (Number.isNaN(val) || val < 1) val = 0;
     this.setAttribute(attributes.TOTAL, String(val));
 
     this.#updateNavDisabled();
@@ -417,12 +416,12 @@ export default class IdsPagerButton extends Base {
     switch (this.type) {
       case attributes.FIRST:
       case attributes.PREVIOUS: {
-        isNavDisabled = this.pageNumber <= 1;
+        isNavDisabled = this.pageNumber <= 1 && this.total > 0;
         break;
       }
       case attributes.NEXT:
       case attributes.LAST: {
-        isNavDisabled = this.pageNumber >= (this.pageCount || 0);
+        isNavDisabled = this.pageNumber >= (this.pageCount || 0) && this.total > 0;
         break;
       }
       default: {

diff --git a/src/components/ids-pager/ids-pager-input.ts b/src/components/ids-pager/ids-pager-input.ts
@@ -215,7 +215,7 @@ export default class IdsPagerInput extends Base {
   /** @param {string|number} value The number of items to track */
   set total(value: string | number) {
     let val = stringToNumber(value);
-    if (Number.isNaN(val) || val < 1) val = 1;
+    if (Number.isNaN(val) || val < 1) val = 0;
     this.setAttribute(attributes.TOTAL, String(val));
     this.#updatePageCountShown();
   }
@@ -229,7 +229,7 @@ export default class IdsPagerInput extends Base {
   /** @returns {number|null} The calculated pageCount using total and pageSize */
   get pageCount(): number | null {
     const val = this.hasAttribute(attributes.TOTAL)
-      ? Math.ceil(this.total / this.pageSize)
+      ? Math.max(Math.ceil(this.total / this.pageSize), 1)
       : null;
     return this.pager?.pageCount ?? val;
   }
@@ -316,7 +316,7 @@ export default class IdsPagerInput extends Base {
   /** Updates text found in page-count within ids-text span */
   #updatePageCountShown(): void {
     const pageCount = this.pageCount;
-    const pageCountShown = (pageCount === null) ? 'N/A' : pageCount;
+    const pageCountShown = (pageCount === null || Number.isNaN(pageCount)) ? 'N/A' : pageCount;
     const pageCountElem = this.shadowRoot?.querySelector('span.page-count');
     if (pageCountElem) {
       pageCountElem.textContent = String(pageCountShown);

diff --git a/src/components/ids-pager/ids-pager-number-list.ts b/src/components/ids-pager/ids-pager-number-list.ts
@@ -151,7 +151,7 @@ export default class IdsPagerNumberList extends Base {
   /** @param {number} value The number of items to track */
   set total(value: number) {
     let val = stringToNumber(value);
-    if (Number.isNaN(val) || val < 1) val = 1;
+    if (Number.isNaN(val) || val < 1) val = 0;
     this.setAttribute(attributes.TOTAL, String(val));
   }
 
@@ -164,7 +164,7 @@ export default class IdsPagerNumberList extends Base {
   /** @returns {number|null} The calculated pageCount using total and pageSize */
   get pageCount(): number | null {
     const val = this.hasAttribute(attributes.TOTAL)
-      ? Math.ceil(this.total / this.pageSize)
+      ? Math.max(Math.ceil(this.total / this.pageSize), 1)
       : null;
     return this.pager?.pageCount ?? val;
   }

diff --git a/src/components/ids-pager/ids-pager.ts b/src/components/ids-pager/ids-pager.ts
@@ -254,7 +254,7 @@ export default class IdsPager extends IdsEventsMixin(IdsElement) {
   /** @returns {number|null} The calculated pageCount using total and pageSize */
   get pageCount(): number | null {
     return (this.total !== null && !Number.isNaN(this.total))
-      ? Math.ceil(this.total / this.pageSize)
+      ? Math.max(Math.ceil(this.total / this.pageSize), 1)
       : null;
   }
 
@@ -280,7 +280,7 @@ export default class IdsPager extends IdsEventsMixin(IdsElement) {
   /** @param {number} value The number of items to track */
   set total(value) {
     let val = stringToNumber(value);
-    if (Number.isNaN(val) || val < 1) val = 1;
+    if (Number.isNaN(val) || val < 1) val = 0;
     this.setAttribute(attributes.TOTAL, String(val));
     this.#keepPageNumberInBounds();
   }

diff --git a/tests/ids-pager/ids-pager.spec.ts b/tests/ids-pager/ids-pager.spec.ts
@@ -240,7 +240,7 @@ test.describe('IdsPager tests', () => {
       const testData = [
         { data: 100, expected: 100 },
         { data: '50', expected: 50 },
-        { data: 'ACE', expected: 1 }
+        { data: 'ACE', expected: 0 }
       ];
 
       expect(await idsPager.evaluate((element: IdsPager) => element.total)).toEqual(200);

diff --git a/tests/ids-pager/snapshots/pager-html.snap b/tests/ids-pager/snapshots/pager-html.snap
@@ -1,6 +1,6 @@
 <ids-pager page-number="1" page-size="20" total="200" id="ids-pager-example">
-          <ids-pager-button first="" page-number="1" nav-disabled="" page-size="20" total="200"></ids-pager-button>
-          <ids-pager-button previous="" page-number="1" nav-disabled="" page-size="20" total="200"></ids-pager-button>
+          <ids-pager-button first="" page-number="1" page-size="20" total="200" nav-disabled=""></ids-pager-button>
+          <ids-pager-button previous="" page-number="1" page-size="20" total="200" nav-disabled=""></ids-pager-button>
           <ids-pager-input page-size="20" total="200" page-number="1"></ids-pager-input>
           <ids-pager-button next="" page-number="1" page-size="20" total="200"></ids-pager-button>
           <ids-pager-button last="" page-number="1" page-size="20" total="200"></ids-pager-button>