From c7bbf0c17dc508409fc28c47085e17cfeefda38b Mon Sep 17 00:00:00 2001
From: dn55333 <147149405+dn55533@users.noreply.github.com>
Date: Fri, 3 Jan 2025 18:31:16 +0000
Subject: [PATCH] fix(canary-web-components): icpaginationbar itemsperpage fix
 all option when the options vary

include the all option when there are fewer items than the available options

fix #2843
---
 .../ic-pagination-bar/ic-pagination-bar.tsx   | 39 ++++++++++++++++---
 1 file changed, 33 insertions(+), 6 deletions(-)

diff --git a/packages/canary-web-components/src/components/ic-pagination-bar/ic-pagination-bar.tsx b/packages/canary-web-components/src/components/ic-pagination-bar/ic-pagination-bar.tsx
index a2e22947bf..fa3fe46795 100644
--- a/packages/canary-web-components/src/components/ic-pagination-bar/ic-pagination-bar.tsx
+++ b/packages/canary-web-components/src/components/ic-pagination-bar/ic-pagination-bar.tsx
@@ -91,6 +91,10 @@ export class PaginationBar {
    * If `true`, the 'All' option will be hidden from the 'items per page' select input.
    */
   @Prop() hideAllFromItemsPerPage?: boolean = false;
+  @Watch("hideAllFromItemsPerPage")
+  watchHideAllFromItemsPerPageHandler(): void {
+    this.setPaginationBarContent();
+  }
 
   /**
    * The text which will be used in place of 'Item' on the pagination bar.
@@ -358,7 +362,7 @@ export class PaginationBar {
     this.icPageChange.emit({ value: this.activePage, fromItemsPerPage: true });
   };
 
-  private setPaginationBarContent = (): void => {
+  private setItemsPerPageOptions = () => {
     const clonedItemsPerPageOptions: {
       label: string;
       value: string;
@@ -379,16 +383,39 @@ export class PaginationBar {
             { label: "100", value: "100" },
             { label: "1000", value: "1000" },
           ]);
-    !this.hideAllFromItemsPerPage &&
-      displayedItemsPerPageOptions.push({
-        label: "All",
-        value: String(this.totalItems),
-      });
 
     this.displayedItemsPerPageOptions = displayedItemsPerPageOptions.filter(
       ({ value }) => this.totalItems >= Number(value)
     );
 
+    const currentItemsLength = this.displayedItemsPerPageOptions.length;
+
+    const addAllOption = () =>
+      this.displayedItemsPerPageOptions.push({
+        label: "All",
+        value: String(this.totalItems),
+      });
+
+    const lastItemsPerPageEqualsTotalItems = () =>
+      Number(
+        this.displayedItemsPerPageOptions[currentItemsLength - 1].value
+      ) === this.totalItems;
+
+    const relabelLastOptionToAll = () =>
+      (this.displayedItemsPerPageOptions[currentItemsLength - 1].label = "All");
+
+    if (currentItemsLength === 0) {
+      addAllOption();
+    } else if (lastItemsPerPageEqualsTotalItems()) {
+      relabelLastOptionToAll();
+    } else if (!this.hideAllFromItemsPerPage) {
+      addAllOption();
+    }
+  };
+
+  private setPaginationBarContent = (): void => {
+    this.setItemsPerPageOptions();
+
     let lastOptionValue = 0;
     const updated = this.displayedItemsPerPageOptions.some(({ value }) => {
       lastOptionValue = Number(value);