Merge pull request #3185 from Akshat55/pagination-control

feat: allow more fine grained control over next/prev buttons

Author: zvonimirfras

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 || backwardDisabled
 					}"
 					tabindex="0"
 					[attr.aria-label]="backwardText.subject | async"
 					(click)="selectPage.emit(previousPage)"
-					[disabled]="(currentPage <= 1 || disabled ? true : null)">
+					[disabled]="(currentPage <= 1 || backwardDisabled ? true : null)">
 					<svg cdsIcon="caret--left" size="16" class="cds--btn__icon"></svg>
 				</button>
 
@@ -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)">
 					<svg cdsIcon="caret--right" size="16" class="cds--btn__icon"></svg>
 				</button>
 			</div>
@@ -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.backwardDisabled = 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() backwardDisabled = false;
+	@Input() forwardDisabled = false;
+
 	/**
 	 * Expects an object that contains some or all of:
 	 * ```

src/pagination/pagination.stories.ts

@@ -32,6 +32,8 @@ const Template = (args) => ({
 			[pagesUnknown]="pagesUnknown"
 			[totalDataLength]="totalDataLength"
 			[showPageInput]="showPageInput"
+			[backwardDisabled]="backwardDisabled"
+			[forwardDisabled]="forwardDisabled"
 			[skeleton]="skeleton">
 		</app-pagination>
 	`
@@ -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,
+	backwardDisabled: false,
+	forwardDisabled: false
 };

src/pagination/stories/pagination.component.ts

@@ -16,6 +16,8 @@ import { PaginationModel } from "..";
 			[pagesUnknown]="pagesUnknown"
 			[showPageInput]="showPageInput"
 			[skeleton]="skeleton"
+			[backwardDisabled]="backwardDisabled"
+			[forwardDisabled]="forwardDisabled"
 			(selectPage)="selectPage($event)">
 		</cds-pagination>
 	`
@@ -27,6 +29,8 @@ export class PaginationStory implements OnInit {
 	@Input() pageInputDisabled = false;
 	@Input() pagesUnknown = false;
 	@Input() showPageInput = true;
+	@Input() backwardDisabled = false;
+	@Input() forwardDisabled = false;
 
 	@Input() get totalDataLength() {
 		return this.model.totalDataLength;