Pagination: implements items per page prop

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": "30.9.2--canary.1673.aae465494350113a03d5687dfe66c3823dc98f42.0",
+    "@infineon/infineon-design-system-react": "31.0.0--canary.1697.d182a3c648fcdb68889698ab9252e421f923fb47.0",
     "path": "^0.12.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"

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>
   );

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": "30.9.2--canary.1673.aae465494350113a03d5687dfe66c3823dc98f42.0",
+    "@infineon/infineon-design-system-vue": "31.0.0--canary.1697.d182a3c648fcdb68889698ab9252e421f923fb47.0",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vitejs/plugin-vue-jsx": "^4.0.0",
     "vite": "^5.0.12",

examples/wrapper-components/vue-javascript/src/components/Pagination.vue

@@ -2,6 +2,7 @@
   <div>
     <h2>Pagination</h2>
     <ifx-pagination @ifxPageChange="handleChange" @ifxPrevPage="handleChange" @ifxNextPage="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>
 </template>

lerna.json

@@ -1,6 +1,6 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "version": "30.9.2--canary.1673.aae465494350113a03d5687dfe66c3823dc98f42.0",
+  "version": "31.0.0--canary.1697.d182a3c648fcdb68889698ab9252e421f923fb47.0",
   "command": {
     "publish": {
       "verifyAccess": false

packages/components-angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "components-angular",
-  "version": "30.9.2--canary.1673.aae465494350113a03d5687dfe66c3823dc98f42.0",
+  "version": "31.0.0--canary.1697.d182a3c648fcdb68889698ab9252e421f923fb47.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": "^30.9.2--canary.1673.aae465494350113a03d5687dfe66c3823dc98f42.0",
+    "@infineon/infineon-design-system-angular": "^31.0.0--canary.1697.d182a3c648fcdb68889698ab9252e421f923fb47.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "typescript": "~5.4.4",

packages/components-angular/projects/component-library/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-angular",
-  "version": "30.9.2--canary.1673.aae465494350113a03d5687dfe66c3823dc98f42.0",
+  "version": "31.0.0--canary.1697.d182a3c648fcdb68889698ab9252e421f923fb47.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": "30.9.2--canary.1673.aae465494350113a03d5687dfe66c3823dc98f42.0"
+    "@infineon/infineon-design-system-stencil": "31.0.0--canary.1697.d182a3c648fcdb68889698ab9252e421f923fb47.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"

packages/components-angular/projects/my-app/src/app/app.component.html

@@ -640,7 +640,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 />
 

packages/components-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-react",
-  "version": "30.9.2--canary.1673.aae465494350113a03d5687dfe66c3823dc98f42.0",
+  "version": "31.0.0--canary.1697.d182a3c648fcdb68889698ab9252e421f923fb47.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": "^30.9.2--canary.1673.aae465494350113a03d5687dfe66c3823dc98f42.0",
+    "@infineon/infineon-design-system-stencil": "^31.0.0--canary.1697.d182a3c648fcdb68889698ab9252e421f923fb47.0",
     "@stencil/react-output-target": "^0.7.1"
   },
   "auto": {

packages/components-vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-vue",
-  "version": "30.9.2--canary.1673.aae465494350113a03d5687dfe66c3823dc98f42.0",
+  "version": "31.0.0--canary.1697.d182a3c648fcdb68889698ab9252e421f923fb47.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": "^30.9.2--canary.1673.aae465494350113a03d5687dfe66c3823dc98f42.0"
+    "@infineon/infineon-design-system-stencil": "^31.0.0--canary.1697.d182a3c648fcdb68889698ab9252e421f923fb47.0"
   },
   "auto": {
     "plugins": [

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-stencil",
-  "version": "30.9.2--canary.1673.aae465494350113a03d5687dfe66c3823dc98f42.0",
+  "version": "31.0.0--canary.1697.d182a3c648fcdb68889698ab9252e421f923fb47.0",
   "private": false,
   "description": "Infineon design system Stencil web components",
   "homepage": "https://infineon.github.io/infineon-design-system-stencil",

packages/components/src/components/pagination/pagination.stories.ts

@@ -7,6 +7,7 @@ export default {
   args: {
     total: 50,
     currentPage: 1,
+    itemsPerPage: '[{"value":"ten","label":"10","selected":true}, {"value":"Twenty","label":"20","selected":false}, {"value":"Thirty","label":"30","selected":false}]'
   },
   argTypes: {
     ifxPageChange: {
@@ -49,6 +50,7 @@ const DefaultTemplate = args => {
   const element = document.createElement('ifx-pagination');
   element.setAttribute('total', args.total);
   element.setAttribute('current-page', args.currentPage);
+  element.setAttribute('items-per-page', args.itemsPerPage);
   element.addEventListener('ifxPageChange', action('ifxPageChange'));
   return element;
 };

packages/components/src/components/pagination/pagination.tsx

@@ -13,9 +13,10 @@ export class Pagination {
   @Event() ifxPrevPage: 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;
 
   private CLASS_DISABLED = "disabled"
   private CLASS_ACTIVE = "active"
@@ -25,9 +26,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;
     }
   }
 
@@ -43,8 +44,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) {
@@ -81,7 +82,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 })
   }
 
@@ -188,7 +189,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.itemsPerPage} >
             </ifx-select>
           </div>
         </div>

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

packages/components/src/components/table-advanced-version/table.tsx

@@ -529,7 +529,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>