feat: change pager pagination to match fiori guidline

CHANGELOG.md

@@ -12,11 +12,13 @@ and [releases](https://github.com/openmfp/webcomponents/releases) for details.
 ## [1.4.2] - 2026-09-10
 
 ### Features
+
 - Upgrade displayAs link (#290)
 
 ## [1.4.1] - 2026-09-10
 
 ### Features
+
 - Upgrade displayAs link (#290)
 
 ## [1.3.0] - 2026-09-02

projects/ngx/declarative-ui/stories/declarative-table.stories.ts

@@ -91,12 +91,14 @@ const PODS: Pod[] = [
       [error]="error"
       [hasMore]="hasMore"
       [height]="height"
+      [itemsPerPageLabel]="itemsPerPageLabel"
       [loadMode]="loadMode"
       [loading]="loading"
       [loadingDelay]="loadingDelay"
       [paginationLimit]="paginationLimit"
       [resources]="visibleResources"
       [totalItemsCount]="totalItemsCount"
+      [totalItemsLabel]="totalItemsLabel"
       [trackByPath]="trackByProperty"
       (loadMoreResources)="loadMore()"
       (pageChange)="onPageChange($event)"
@@ -118,6 +120,8 @@ class DeclarativeTableStory {
   @Input() loading = false;
   @Input() loadingDelay = 1000;
   @Input() error = false;
+  @Input() itemsPerPageLabel = 'Items per page:';
+  @Input() totalItemsLabel = 'Results';
 
   /**
    * In pager mode the story slices the full `resources` array to the current
@@ -177,6 +181,8 @@ const meta: Meta<DeclarativeTableStory> = {
     loadingDelay: { control: 'number' },
     error: { control: 'boolean' },
     loadMode: { options: ['scroll', 'button', 'pager'], control: 'select' },
+    itemsPerPageLabel: { control: 'text' },
+    totalItemsLabel: { control: 'text' },
   },
   args: {
     resources: PODS,
@@ -480,7 +486,7 @@ export const Pagination_Pager: Story = {
       { label: 'Namespace', property: 'metadata.namespace' },
       { label: 'Phase', property: 'status.phase' },
     ] satisfies TableFieldDefinition[],
-    resources: Array.from({ length: 20 }, (_, i) => ({
+    resources: Array.from({ length: 100 }, (_, i) => ({
       ...PODS[i % PODS.length],
       id: `pager-${i + 1}`,
       metadata: {
@@ -491,8 +497,8 @@ export const Pagination_Pager: Story = {
     })),
     trackByProperty: 'metadata.uid',
     loadMode: 'pager',
-    paginationLimit: 5,
-    totalItemsCount: 20,
+    paginationLimit: 10,
+    totalItemsCount: 100,
     currentPage: 1,
   },
 };

projects/ngx/declarative-ui/table/declarative-table/declarative-table.component.html

@@ -171,7 +171,7 @@
     <span
       style="color: var(--sapTextColor); font-size: var(--sapFontSmallSize)"
     >
-      {{ isPagerMode() ? 'Items per page:' : 'Items per load:' }}
+      {{ isPagerMode() ? itemsPerPageLabel() : 'Items per load:' }}
     </span>
     <ui5-select
       data-testid="generic-table-pagination-select"
@@ -191,16 +191,15 @@
 
   @if (isPagerMode()) {
     <div class="pager" data-testid="generic-table-pager">
-      @if (knowsTotal()) {
-        <ui5-button
-          accessibleName="First page"
-          data-testid="generic-table-pager-first"
-          design="Transparent"
-          icon="close-command-field"
-          [disabled]="loading() || !canPrev()"
-          (click)="firstPage()"
-        />
-      }
+      <ui5-button
+        accessibleName="First page"
+        class="pager__first-last"
+        data-testid="generic-table-pager-first"
+        design="Transparent"
+        icon="close-command-field"
+        [disabled]="loading() || !canPrev()"
+        (click)="firstPage()"
+      />
       <ui5-button
         accessibleName="Previous page"
         data-testid="generic-table-pager-prev"
@@ -209,17 +208,24 @@
         [disabled]="loading() || !canPrev()"
         (click)="prevPage()"
       />
-      <span
-        class="pager__indicator"
-        data-testid="generic-table-pager-indicator"
-        >{{
-          knowsTotal()
-            ? hasResults()
-              ? currentPage() + ' / ' + totalPages()
-              : '–'
-            : currentPage()
-        }}</span
-      >
+
+      @for (btn of pageButtons(); track $index) {
+        @if (btn === 'ellipsis') {
+          <span class="pager__ellipsis pager__pages-full">…</span>
+        } @else {
+          <button
+            class="pager__page"
+            [attr.data-testid]="'generic-table-pager-page-' + btn"
+            [class.pager__page--active]="btn === currentPage()"
+            [class.pager__pages-full]="btn !== currentPage()"
+            [disabled]="loading() || btn === currentPage()"
+            (click)="goToPage(btn)"
+          >
+            {{ btn }}
+          </button>
+        }
+      }
+
       <ui5-button
         accessibleName="Next page"
         data-testid="generic-table-pager-next"
@@ -228,25 +234,23 @@
         [disabled]="loading() || !canNext()"
         (click)="nextPage()"
       />
-      @if (knowsTotal()) {
-        <ui5-button
-          accessibleName="Last page"
-          data-testid="generic-table-pager-last"
-          design="Transparent"
-          icon="open-command-field"
-          [disabled]="loading() || !canNext()"
-          (click)="lastPage()"
-        />
-      }
+      <ui5-button
+        accessibleName="Last page"
+        class="pager__first-last"
+        data-testid="generic-table-pager-last"
+        design="Transparent"
+        icon="open-command-field"
+        [disabled]="loading() || !canNext()"
+        (click)="lastPage()"
+      />
     </div>
     <div class="pagination-footer__side pagination-footer__side--end">
       @if (knowsTotal()) {
         <span
           data-testid="generic-table-item-count"
           style="color: var(--sapTextColor); font-size: var(--sapFontSmallSize)"
         >
-          <b style="font-size: var(--sapFontSize)">{{ totalItemsCount() }}</b>
-          Items
+          {{ totalItemsCount() }} {{ totalItemsLabel() }}
         </span>
       }
     </div>

projects/ngx/declarative-ui/table/declarative-table/declarative-table.component.scss

@@ -35,6 +35,7 @@ ui5-table-header-row {
 }
 
 .pagination-footer {
+  container-type: inline-size;
   gap: 0.5rem;
 
   &__side {
@@ -57,22 +58,66 @@ ui5-table-header-row {
   gap: 0.25rem;
   justify-content: center;
 
-  ui5-button {
-    color: var(--sapContent_IconColor, #1d2d3e);
-    --sapButton_IconColor: var(--sapContent_IconColor, #1d2d3e);
-    --sapButton_Hover_IconColor: var(--sapContent_IconColor, #1d2d3e);
+  &__nav,
+  &__page {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--sapLinkColor, #0070f2);
+    font-size: var(--sapFontSize);
+    min-width: 2rem;
+    height: 2rem;
+    padding: 0 0.25rem;
+    border-radius: 4px;
+    vertical-align: middle;
 
-    &[disabled] {
+    &:disabled {
       color: var(--sapContent_DisabledTextColor, #b3b3b3);
-      --sapButton_IconColor: var(--sapContent_DisabledTextColor, #b3b3b3);
+      cursor: default;
+    }
+
+    &:not(:disabled):hover {
+      background: var(--sapList_Hover_Background);
     }
   }
 
-  &__indicator {
-    min-width: 3rem;
-    text-align: center;
-    color: var(--sapTextColor);
-    font-size: var(--sapFontSize);
+  &__nav {
+    font-size: 1.2rem;
     font-weight: bold;
   }
+
+  &__page--active {
+    border: 1px solid var(--sapField_BorderColor, #89919a);
+    font-weight: bold;
+    color: var(--sapTextColor);
+    cursor: default;
+  }
+
+  &__ellipsis {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--sapTextColor);
+    min-width: 1.5rem;
+    height: 2rem;
+  }
+
+  // Wide: hide first/last
+  &__first-last {
+    display: none;
+  }
+}
+
+// Narrow: hide page numbers (except active), show first/last
+@container (max-width: 35rem) {
+  .pager__pages-full {
+    display: none;
+  }
+
+  .pager__first-last {
+    display: inline-flex;
+  }
 }