From 698a01375e12318d46bb6486fa1d951c7fbae2d4 Mon Sep 17 00:00:00 2001 From: Akshat Patel Date: Wed, 8 Oct 2025 16:07:37 -0400 Subject: [PATCH 1/2] feat: allow more fine grained control over next/prev buttons Signed-off-by: Akshat Patel --- src/pagination/pagination.component.ts | 16 +++++++++++----- src/pagination/pagination.stories.ts | 8 ++++++-- src/pagination/stories/pagination.component.ts | 4 ++++ 3 files changed, 21 insertions(+), 7 deletions(-) diff --git a/src/pagination/pagination.component.ts b/src/pagination/pagination.component.ts index 4d16fbe4c2..dd38dc79cf 100644 --- a/src/pagination/pagination.component.ts +++ b/src/pagination/pagination.component.ts @@ -161,12 +161,12 @@ export interface PaginationTranslations { iconOnly="true" class="cds--pagination__button cds--pagination__button--backward" [ngClass]="{ - 'cds--pagination__button--no-index': currentPage <= 1 || disabled + 'cds--pagination__button--no-index': currentPage <= 1 || previousDisabled }" tabindex="0" [attr.aria-label]="backwardText.subject | async" (click)="selectPage.emit(previousPage)" - [disabled]="(currentPage <= 1 || disabled ? true : null)"> + [disabled]="(currentPage <= 1 || previousDisabled ? true : null)"> @@ -177,12 +177,12 @@ export interface PaginationTranslations { cds--pagination__button cds--pagination__button--forward" [ngClass]="{ - 'cds--pagination__button--no-index': currentPage >= lastPage || disabled + 'cds--pagination__button--no-index': currentPage >= lastPage || forwardDisabled }" tabindex="0" [attr.aria-label]="forwardText.subject | async" (click)="selectPage.emit(nextPage)" - [disabled]="(currentPage >= lastPage || disabled ? true : null)"> + [disabled]="(currentPage >= lastPage || forwardDisabled ? true : null)"> @@ -204,7 +204,10 @@ export class Pagination { /** * Set to `true` to disable the backward/forward buttons. */ - @Input() disabled = false; + @Input() set disabled(value: boolean) { + this.previousDisabled = value; + this.forwardDisabled = value; + } /** * Set to `true` to disable the select box that changes the page. */ @@ -219,6 +222,9 @@ export class Pagination { @Input() pagesUnknown = false; @Input() pageSelectThreshold = 1000; + @Input() previousDisabled = false; + @Input() forwardDisabled = false; + /** * Expects an object that contains some or all of: * ``` diff --git a/src/pagination/pagination.stories.ts b/src/pagination/pagination.stories.ts index 4a7e39b48f..39bfaebed0 100644 --- a/src/pagination/pagination.stories.ts +++ b/src/pagination/pagination.stories.ts @@ -32,6 +32,8 @@ const Template = (args) => ({ [pagesUnknown]="pagesUnknown" [totalDataLength]="totalDataLength" [showPageInput]="showPageInput" + [previousDisabled]="previousDisabled" + [forwardDisabled]="forwardDisabled" [skeleton]="skeleton"> ` @@ -40,8 +42,10 @@ export const Basic = Template.bind({}); Basic.args = { disabled: false, pageInputDisabled: false, - pageUnknown: false, + pagesUnknown: false, totalDataLength: 105, showPageInput: true, - skeleton: false + skeleton: false, + previousDisabled: false, + forwardDisabled: false }; diff --git a/src/pagination/stories/pagination.component.ts b/src/pagination/stories/pagination.component.ts index 7f73ec5397..1b1979236f 100644 --- a/src/pagination/stories/pagination.component.ts +++ b/src/pagination/stories/pagination.component.ts @@ -16,6 +16,8 @@ import { PaginationModel } from ".."; [pagesUnknown]="pagesUnknown" [showPageInput]="showPageInput" [skeleton]="skeleton" + [previousDisabled]="previousDisabled" + [forwardDisabled]="forwardDisabled" (selectPage)="selectPage($event)"> ` @@ -27,6 +29,8 @@ export class PaginationStory implements OnInit { @Input() pageInputDisabled = false; @Input() pagesUnknown = false; @Input() showPageInput = true; + @Input() previousDisabled = false; + @Input() forwardDisabled = false; @Input() get totalDataLength() { return this.model.totalDataLength; From b2ecdebe8421c053cf4585db7d39146e2c77dcac Mon Sep 17 00:00:00 2001 From: Akshat Patel Date: Wed, 8 Oct 2025 16:34:29 -0400 Subject: [PATCH 2/2] fix: update variable name for readability --- src/pagination/pagination.component.ts | 8 ++++---- src/pagination/pagination.stories.ts | 4 ++-- src/pagination/stories/pagination.component.ts | 4 ++-- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/pagination/pagination.component.ts b/src/pagination/pagination.component.ts index dd38dc79cf..2626e08f13 100644 --- a/src/pagination/pagination.component.ts +++ b/src/pagination/pagination.component.ts @@ -161,12 +161,12 @@ export interface PaginationTranslations { iconOnly="true" class="cds--pagination__button cds--pagination__button--backward" [ngClass]="{ - 'cds--pagination__button--no-index': currentPage <= 1 || previousDisabled + 'cds--pagination__button--no-index': currentPage <= 1 || backwardDisabled }" tabindex="0" [attr.aria-label]="backwardText.subject | async" (click)="selectPage.emit(previousPage)" - [disabled]="(currentPage <= 1 || previousDisabled ? true : null)"> + [disabled]="(currentPage <= 1 || backwardDisabled ? true : null)"> @@ -205,7 +205,7 @@ export class Pagination { * Set to `true` to disable the backward/forward buttons. */ @Input() set disabled(value: boolean) { - this.previousDisabled = value; + this.backwardDisabled = value; this.forwardDisabled = value; } /** @@ -222,7 +222,7 @@ export class Pagination { @Input() pagesUnknown = false; @Input() pageSelectThreshold = 1000; - @Input() previousDisabled = false; + @Input() backwardDisabled = false; @Input() forwardDisabled = false; /** diff --git a/src/pagination/pagination.stories.ts b/src/pagination/pagination.stories.ts index 39bfaebed0..1fea538b0e 100644 --- a/src/pagination/pagination.stories.ts +++ b/src/pagination/pagination.stories.ts @@ -32,7 +32,7 @@ const Template = (args) => ({ [pagesUnknown]="pagesUnknown" [totalDataLength]="totalDataLength" [showPageInput]="showPageInput" - [previousDisabled]="previousDisabled" + [backwardDisabled]="backwardDisabled" [forwardDisabled]="forwardDisabled" [skeleton]="skeleton"> @@ -46,6 +46,6 @@ Basic.args = { totalDataLength: 105, showPageInput: true, skeleton: false, - previousDisabled: false, + backwardDisabled: false, forwardDisabled: false }; diff --git a/src/pagination/stories/pagination.component.ts b/src/pagination/stories/pagination.component.ts index 1b1979236f..f1903a3bfe 100644 --- a/src/pagination/stories/pagination.component.ts +++ b/src/pagination/stories/pagination.component.ts @@ -16,7 +16,7 @@ import { PaginationModel } from ".."; [pagesUnknown]="pagesUnknown" [showPageInput]="showPageInput" [skeleton]="skeleton" - [previousDisabled]="previousDisabled" + [backwardDisabled]="backwardDisabled" [forwardDisabled]="forwardDisabled" (selectPage)="selectPage($event)"> @@ -29,7 +29,7 @@ export class PaginationStory implements OnInit { @Input() pageInputDisabled = false; @Input() pagesUnknown = false; @Input() showPageInput = true; - @Input() previousDisabled = false; + @Input() backwardDisabled = false; @Input() forwardDisabled = false; @Input() get totalDataLength() {