Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | 3x 3x 3x 3x 3x 3x 5x 5x 4x 5x 5x 1x 1x | import { ViewportScroller } from '@angular/common';
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import { Observable, map } from 'rxjs';
import { AppFacade } from 'ish-core/facades/app.facade';
// maximum number of pages to display in the pagination component per device type
const MAX_SIZE: Readonly<Record<'desktop' | 'mobile', number>> = {
mobile: 3,
desktop: 5,
};
/**
* Displays a pagination control for navigating through a paged list of items.
* Renders the page navigation only when the total item count exceeds the page size.
*/
@Component({
selector: 'ish-paging',
standalone: false,
templateUrl: './paging.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class PagingComponent {
@Input({ required: true }) currentPage: number;
@Input({ required: true }) itemCount: number;
@Input({ required: true }) pageSize: number;
@Output() readonly goToPage: EventEmitter<number> = new EventEmitter<number>();
maxSize$: Observable<number> = this.appFacade.deviceType$.pipe(
map(deviceType => (deviceType === 'mobile' ? MAX_SIZE.mobile : MAX_SIZE.desktop))
);
constructor(
private scroller: ViewportScroller,
private appFacade: AppFacade
) {}
/**
* If the user changes the page the goToPage event is emitted
*
* @param page : changed page number
*/
setPage(page: number) {
this.goToPage.emit(page);
this.scroller.scrollToPosition([0, 0]);
}
}
|