<div class="adf-pagination__block adf-pagination__range-block"> <span class="adf-pagination__range"> {{ 'CORE.PAGINATION.ITEMS_RANGE' | translate: { range: range.join('-'), total: pagination.totalItems } }} </span> </div> <div class="adf-pagination__block adf-pagination__perpage-block"> <span> {{ 'CORE.PAGINATION.ITEMS_PER_PAGE' | translate }} </span> <span class="adf-pagination__max-items"> {{ pagination.maxItems }} </span> <button mat-icon-button [matMenuTriggerFor]="pageSizeMenu"> <mat-icon>arrow_drop_down</mat-icon> </button> <mat-menu #pageSizeMenu="matMenu"> <button mat-menu-item *ngFor="let pageSize of supportedPageSizes" (click)="onChangePageSize(pageSize)"> {{ pageSize }} </button> </mat-menu> </div> <div class="adf-pagination__block adf-pagination__actualinfo-block"> <span class="adf-pagination__current-page"> {{ 'CORE.PAGINATION.CURRENT_PAGE' | translate: { number: current } }} </span> <button mat-icon-button [matMenuTriggerFor]="pagesMenu" *ngIf="pages.length > 1"> <mat-icon>arrow_drop_down</mat-icon> </button> <span class="adf-pagination__total-pages"> {{ 'CORE.PAGINATION.TOTAL_PAGES' | translate: { total: pages.length } }} </span> <mat-menu #pagesMenu="matMenu" class="adf-pagination__page-selector"> <button mat-menu-item *ngFor="let pageNumber of pages" (click)="onChangePageNumber(pageNumber)"> {{ pageNumber }} </button> </mat-menu> </div> <div class="adf-pagination__block adf-pagination__controls-block"> <button class="adf-pagination__previous-button" mat-icon-button [disabled]="isFirstPage" (click)="goPrevious()"> <mat-icon>keyboard_arrow_left</mat-icon> </button> <button class="adf-pagination__next-button" mat-icon-button [disabled]="isLastPage" (click)="goNext()"> <mat-icon>keyboard_arrow_right</mat-icon> </button> </div>