Merge pull request #1697 from Infineon/1665-pagination-make-items-per-page-customizable

tishoyanchev · web-flow · commit eb943b0582a8 · 2025-02-18T13:38:04.000+01:00
Pagination: implements items per page prop
diff --git a/examples/stencil-components/vanilla-cdn/index.html b/examples/stencil-components/vanilla-cdn/index.html
@@ -356,7 +356,7 @@ <h2>Number Indicator</h2>
     <br />
 
     <h2>Pagination</h2>
-    <ifx-pagination total="500" current-page="1"></ifx-pagination>
+    <ifx-pagination total="500" current-page="1" items-per-page='[{"value":"ten","label":"10","selected":true}, {"value":"Twenty","label":"20","selected":false}, {"value":"Thirty","label":"30","selected":false}]'></ifx-pagination>
     <br />
 
     <h2>Progress bar</h2>
diff --git a/examples/wrapper-components/react-vite-js/package.json b/examples/wrapper-components/react-vite-js/package.json
@@ -18,7 +18,7 @@
     "test:local": "run-p preview:link watch:library"
   },
   "dependencies": {
-    "@infineon/infineon-design-system-react": "31.4.1--canary.1693.4a56da3c614d03acd57676f6b9f53fb3032497c0.0",
+    "@infineon/infineon-design-system-react": "32.0.0--canary.1697.69e820d7a9c4791bf2abbd47ce88fc08156594fd.0",
     "path": "^0.12.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
diff --git a/examples/wrapper-components/react-vite-js/src/components/Pagination/Pagination.jsx b/examples/wrapper-components/react-vite-js/src/components/Pagination/Pagination.jsx
@@ -43,6 +43,7 @@ export default function App() {
         currentPage={1}
         total={36}
         onIfxPageChange={handlePageChange}
+        items-per-page='[{"value":"ten","label":"10","selected":true}, {"value":"Twenty","label":"20","selected":false}, {"value":"Thirty","label":"30","selected":false}]'
       />
     </div>
   );
diff --git a/examples/wrapper-components/vue-javascript/package.json b/examples/wrapper-components/vue-javascript/package.json
@@ -15,7 +15,7 @@
     "test:local": "run-p preview:link watch:library"
   },
   "dependencies": {
-    "@infineon/infineon-design-system-vue": "31.4.1--canary.1693.4a56da3c614d03acd57676f6b9f53fb3032497c0.0",
+    "@infineon/infineon-design-system-vue": "32.0.0--canary.1697.69e820d7a9c4791bf2abbd47ce88fc08156594fd.0",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vitejs/plugin-vue-jsx": "^4.0.0",
     "vite": "^5.0.12",
diff --git a/examples/wrapper-components/vue-javascript/src/components/Pagination.vue b/examples/wrapper-components/vue-javascript/src/components/Pagination.vue
@@ -4,6 +4,7 @@
     <ifx-pagination
       @ifxPageChange="handleChange"
       total="500"
+       items-per-page='[{"value":"ten","label":"10","selected":true}, {"value":"Twenty","label":"20","selected":false}, {"value":"Thirty","label":"30","selected":false}]'
       :current-page="current"
     ></ifx-pagination>
   </div>
diff --git a/lerna.json b/lerna.json
@@ -1,6 +1,6 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "version": "31.4.1--canary.1693.4a56da3c614d03acd57676f6b9f53fb3032497c0.0",
+  "version": "32.0.0--canary.1697.69e820d7a9c4791bf2abbd47ce88fc08156594fd.0",
   "command": {
     "publish": {
       "verifyAccess": false
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/components-angular/package.json b/packages/components-angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "components-angular",
-  "version": "31.4.1--canary.1693.4a56da3c614d03acd57676f6b9f53fb3032497c0.0",
+  "version": "32.0.0--canary.1697.69e820d7a9c4791bf2abbd47ce88fc08156594fd.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -26,7 +26,7 @@
     "@angular/platform-browser": "^18.0.0",
     "@angular/platform-browser-dynamic": "^18.0.0",
     "@angular/router": "^18.0.0",
-    "@infineon/infineon-design-system-angular": "^31.4.1--canary.1693.4a56da3c614d03acd57676f6b9f53fb3032497c0.0",
+    "@infineon/infineon-design-system-angular": "^32.0.0--canary.1697.69e820d7a9c4791bf2abbd47ce88fc08156594fd.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "typescript": "~5.4.4",
diff --git a/packages/components-angular/projects/component-library/package.json b/packages/components-angular/projects/component-library/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-angular",
-  "version": "31.4.1--canary.1693.4a56da3c614d03acd57676f6b9f53fb3032497c0.0",
+  "version": "32.0.0--canary.1697.69e820d7a9c4791bf2abbd47ce88fc08156594fd.0",
   "description": "Infineon design system Stencil web components for Angular",
   "author": "Verena Lechner",
   "license": "MIT",
@@ -11,7 +11,7 @@
     "@angular/common": "^18.0.0",
     "@angular/core": "^18.0.0",
     "@infineon/design-system-tokens": "3.3.4",
-    "@infineon/infineon-design-system-stencil": "31.4.1--canary.1693.4a56da3c614d03acd57676f6b9f53fb3032497c0.0"
+    "@infineon/infineon-design-system-stencil": "32.0.0--canary.1697.69e820d7a9c4791bf2abbd47ce88fc08156594fd.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"
diff --git a/packages/components-angular/projects/my-app/src/app/app.component.html b/packages/components-angular/projects/my-app/src/app/app.component.html
@@ -647,7 +647,7 @@ <h2>Number Indicator</h2>
   <br />
 
   <h2>Pagination</h2>
-  <ifx-pagination total="500" current-page="1"></ifx-pagination>
+  <ifx-pagination total="500" current-page="1" items-per-page='[{"value":"ten","label":"10","selected":true}, {"value":"Twenty","label":"20","selected":false}, {"value":"Thirty","label":"30","selected":false}]'></ifx-pagination>
   <br />
   <br />
 
diff --git a/packages/components-react/package.json b/packages/components-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-react",
-  "version": "31.4.1--canary.1693.4a56da3c614d03acd57676f6b9f53fb3032497c0.0",
+  "version": "32.0.0--canary.1697.69e820d7a9c4791bf2abbd47ce88fc08156594fd.0",
   "description": "Infineon design system Stencil web components for React",
   "main": "./dist/index.js",
   "types": "./dist/types/index.d.ts",
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@infineon/design-system-tokens": "3.3.4",
-    "@infineon/infineon-design-system-stencil": "^31.4.1--canary.1693.4a56da3c614d03acd57676f6b9f53fb3032497c0.0",
+    "@infineon/infineon-design-system-stencil": "^32.0.0--canary.1697.69e820d7a9c4791bf2abbd47ce88fc08156594fd.0",
     "@stencil/react-output-target": "^0.7.1"
   },
   "auto": {
diff --git a/packages/components-vue/package.json b/packages/components-vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-vue",
-  "version": "31.4.1--canary.1693.4a56da3c614d03acd57676f6b9f53fb3032497c0.0",
+  "version": "32.0.0--canary.1697.69e820d7a9c4791bf2abbd47ce88fc08156594fd.0",
   "description": "Infineon design system Stencil web components for Vue",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "@infineon/design-system-tokens": "3.3.4",
-    "@infineon/infineon-design-system-stencil": "^31.4.1--canary.1693.4a56da3c614d03acd57676f6b9f53fb3032497c0.0"
+    "@infineon/infineon-design-system-stencil": "^32.0.0--canary.1697.69e820d7a9c4791bf2abbd47ce88fc08156594fd.0"
   },
   "auto": {
     "plugins": [
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-stencil",
-  "version": "31.4.1--canary.1693.4a56da3c614d03acd57676f6b9f53fb3032497c0.0",
+  "version": "32.0.0--canary.1697.69e820d7a9c4791bf2abbd47ce88fc08156594fd.0",
   "private": false,
   "description": "Infineon design system Stencil web components",
   "homepage": "https://infineon.github.io/infineon-design-system-stencil",
diff --git a/packages/components/src/components/pagination/pagination.stories.ts b/packages/components/src/components/pagination/pagination.stories.ts
@@ -7,6 +7,7 @@ export default {
   args: {
     total: 50,
     currentPage: 1,
+    itemsPerPage: '[{"value":"10","selected":true}, {"value":"20","selected":false}, {"value":"30","selected":false}]'
   },
   argTypes: {
     currentPage: {
@@ -34,6 +35,15 @@ export default {
         },
       },
     },
+    itemsPerPage: {
+      description: 'Stringified array of objects setting up the items per page. *Value* and *selected* are required.',
+      table: {
+        category: 'Ifx-pagination props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
 
     ifxPageChange: {
       action: 'ifxPageChange',
@@ -50,11 +60,12 @@ export default {
   },
 };
 
+
 const DefaultTemplate = args => {
-  const element = document.createElement('ifx-pagination');
-  element.setAttribute('total', args.total);
-  element.setAttribute('current-page', args.currentPage);
-  element.addEventListener('ifxPageChange', action('ifxPageChange'));
+  const element = `<ifx-pagination total="${args.total}" current-page="${args.currentPage}" items-per-page='${args.itemsPerPage}'></ifx-pagination>`
+  setTimeout(() => {
+    document.querySelector('ifx-pagination')?.addEventListener('ifxPageChange', action('ifxPageChange'));
+  }, 0);
   return element;
 };
 
diff --git a/packages/components/src/components/pagination/pagination.tsx b/packages/components/src/components/pagination/pagination.tsx
@@ -11,9 +11,11 @@ export class Pagination {
   @Event() ifxPageChange: EventEmitter;
   @Prop() currentPage: number = 0;
   @State() internalPage: number = 1;
-  @State() itemsPerPage: number = 10;
+  @State() internalItemsPerPage: number = 10;
   @State() numberOfPages: number[] = [];
   @Prop() total: number = 1;
+  @Prop() itemsPerPage: any[] | string;
+  @State() filteredItemsPerPage: any[]
 
   private CLASS_DISABLED = "disabled"
   private CLASS_ACTIVE = "active"
@@ -23,9 +25,9 @@ export class Pagination {
   @Listen('ifxSelect')
   setItemsPerPage(e) {
     if(e.detail) {
-      this.itemsPerPage = parseInt(e.detail.label)
+      this.internalItemsPerPage = parseInt(e.detail.label)
     } else { 
-      this.itemsPerPage = 10;
+      this.internalItemsPerPage = 10;
     }
   }
 
@@ -41,8 +43,8 @@ export class Pagination {
     if (isNaN(this.currentPage)) {
       this.currentPage = 1;
     }
-    const total = this.total <= this.itemsPerPage ? this.itemsPerPage : this.total;
-    const itemsPerPage = this.itemsPerPage;
+    const total = this.total <= this.internalItemsPerPage ? this.internalItemsPerPage : this.total;
+    const itemsPerPage = this.internalItemsPerPage;
     const totalPageNumber = Math.ceil(total / itemsPerPage);
 
     if (this.currentPage <= 0) {
@@ -54,8 +56,20 @@ export class Pagination {
     this.numberOfPages = Array.from({ length: totalPageNumber }, (_, index) => index + 1);
   }
 
+  filterOptionsArray() { 
+    let obj: any[] = Array.isArray(this.itemsPerPage) ? this.itemsPerPage : JSON.parse(this.itemsPerPage);
+    for(let i = 0; i < obj.length; i++) { 
+      let item = obj[i];
+      if(!item.label) { 
+        item.label = item.value;
+      }
+    }
+    this.filteredItemsPerPage = obj;
+  }
+
   componentWillLoad() {
     this.calculateNumberOfPages()
+    this.filterOptionsArray()
   }
 
   componentDidUpdate() {
@@ -79,7 +93,7 @@ export class Pagination {
     let totalPages = this.numberOfPages.length;
     let prevPage = currActive === 0 ? null : currActive;
     let nextPage = currActive + 2 > totalPages ? null : currActive + 2;
-    let itemsPerPage = this.itemsPerPage
+    let itemsPerPage = this.internalItemsPerPage
     this.ifxPageChange.emit({ currentPage, totalPages, prevPage, nextPage, itemsPerPage })
   }
 
@@ -186,7 +200,7 @@ export class Pagination {
               error-message='Error'
               label=''
               placeholder-value='Placeholder'
-              options='[{"value":"ten","label":"10","selected":true}, {"value":"Twenty","label":"20","selected":false}, {"value":"Thirty","label":"30","selected":false}]' >
+              options={this.filteredItemsPerPage} >
             </ifx-select>
           </div>
         </div>
diff --git a/packages/components/src/components/pagination/readme.md b/packages/components/src/components/pagination/readme.md
@@ -7,10 +7,11 @@
 
 ## Properties
 
-| Property      | Attribute      | Description | Type     | Default |
-| ------------- | -------------- | ----------- | -------- | ------- |
-| `currentPage` | `current-page` |             | `number` | `0`     |
-| `total`       | `total`        |             | `number` | `1`     |
+| Property       | Attribute        | Description | Type              | Default     |
+| -------------- | ---------------- | ----------- | ----------------- | ----------- |
+| `currentPage`  | `current-page`   |             | `number`          | `0`         |
+| `itemsPerPage` | `items-per-page` |             | `any[] \| string` | `undefined` |
+| `total`        | `total`          |             | `number`          | `1`         |
 
 
 ## Events
diff --git a/packages/components/src/components/select/single-select/select.tsx b/packages/components/src/components/select/single-select/select.tsx
@@ -647,4 +647,4 @@ export class Choices implements IChoicesProps, IChoicesMethods {
     // Assign a unique id for the placeholder
     return this.placeholder !== 'false' ? [<option value="">{this.placeholderValue}</option>] : [<option value=""></option>];
   }
-}
+}
diff --git a/packages/components/src/components/table-advanced-version/table.tsx b/packages/components/src/components/table-advanced-version/table.tsx
@@ -530,7 +530,7 @@ export class Table {
                 <div id={`ifxTable-${this.uniqueKey}`} class='ifx-ag-grid' style={style} ref={(el) => this.container = el}>
                 </div>
               </div>
-              {this.pagination ? <ifx-pagination total={this.allRowData.length} current-page={this.currentPage}></ifx-pagination> : null}
+              {this.pagination ? <ifx-pagination total={this.allRowData.length} current-page={this.currentPage} items-per-page='[{"value":"ten","label":"10","selected":true}, {"value":"Twenty","label":"20","selected":false}, {"value":"Thirty","label":"30","selected":false}]'></ifx-pagination> : null}
             </div>
           </div>
         </div>

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"$schema": "node_modules/lerna/schemas/lerna-schema.json",`
`3`		`- "version": "31.4.1--canary.1693.4a56da3c614d03acd57676f6b9f53fb3032497c0.0",`
	`3`	`+ "version": "32.0.0--canary.1697.69e820d7a9c4791bf2abbd47ce88fc08156594fd.0",`
`4`	`4`	`"command": {`
`5`	`5`	`"publish": {`
`6`	`6`	`"verifyAccess": false`