@progress/kendo-angular-pager
Version:
Kendo UI Angular Pager
247 lines (246 loc) • 10.3 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, ViewChild, Renderer2, ElementRef } from '@angular/core';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { PagerContextService } from './pager-context.service';
import { PagerElementComponent } from './pager-element.component';
import { DEFAULT_SIZE, getStylingClasses } from '../util';
import { ButtonComponent } from '@progress/kendo-angular-buttons';
import { NgIf, NgFor } from '@angular/common';
import { PagerFocusableDirective } from './focusable.directive';
import * as i0 from "@angular/core";
import * as i1 from "@progress/kendo-angular-l10n";
import * as i2 from "./pager-context.service";
/**
* Represents the Kendo UI Pager Numeric Buttons component for Angular. Displays numeric buttons to enable navigation between the pages.
*
* @example
* ```html
* <kendo-pager [skip]="skip" [pageSize]="pageSize" [total]="total">
* <ng-template kendoPagerTemplate>
* <kendo-pager-numeric-buttons [buttonCount]="5"></kendo-pager-numeric-buttons>
* </ng-template>
* </kendo-pager>
* ```
*/
export class PagerNumericButtonsComponent extends PagerElementComponent {
pagerContext;
renderer;
selectElement;
numbersElement;
/**
* Specifies the count of the displayed buttons.
*
* @type {number}
* @memberOf PagerNumericButtonsComponent
*/
buttonCount;
/**
* Specifies the padding of the numeric buttons.
*
* @default 'medium'
*/
set size(size) {
const newSize = size ? size : DEFAULT_SIZE;
this.handleClasses(newSize, 'size');
this._size = newSize;
}
get size() {
return this._size;
}
/**
* @hidden
*
* @readonly
* @type {number[]}
* @memberOf PagerNumericButtonsComponent
*/
get buttons() {
const result = [];
for (let idx = this.start; idx <= this.end; idx++) {
result.push(idx);
}
return result;
}
/**
* @hidden
*/
get end() {
return Math.min((this.start + this.buttonCount) - 1, this.totalPages);
}
/**
* @hidden
*/
get start() {
const page = this.currentPage;
const buttonCount = this.buttonCount;
if (page > buttonCount) {
const reminder = (page % buttonCount);
return (reminder === 0) ? (page - buttonCount) + 1 : (page - reminder) + 1;
}
return 1;
}
constructor(localization, cd, pagerContext, renderer) {
super(localization, pagerContext, cd);
this.pagerContext = pagerContext;
this.renderer = renderer;
}
_size = DEFAULT_SIZE;
ngAfterViewInit() {
this.handleClasses(this.size, 'size');
}
/**
* @hidden
*/
pageLabel(num) {
const pageText = this.textFor('page');
if (pageText) {
return pageText + ' ' + num;
}
return num.toString();
}
/**
* @hidden
*/
onSelectChange(e) {
const target = e.target;
const valueAsNumber = Number(target.value);
if (!Number.isNaN(valueAsNumber)) {
this.changePage(valueAsNumber - 1);
}
else {
if (target.value === 'previousButtons') {
this.changePage(this.start - 2);
}
else {
this.changePage(this.end);
}
}
}
onChanges({ total, skip, pageSize }) {
this.total = total;
this.skip = skip;
this.pageSize = pageSize;
this.cd.markForCheck();
}
get pageChooserLabel() {
return this.textFor('selectPage');
}
handleClasses(value, input) {
const elem = this.selectElement?.nativeElement;
const classes = getStylingClasses('picker', input, this[input], value);
if (!elem) {
return;
}
if (classes.toRemove) {
this.renderer.removeClass(elem, classes.toRemove);
}
if (classes.toAdd) {
this.renderer.addClass(elem, classes.toAdd);
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerNumericButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.PagerContextService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PagerNumericButtonsComponent, isStandalone: true, selector: "kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons", inputs: { buttonCount: "buttonCount", size: "size" }, viewQueries: [{ propertyName: "selectElement", first: true, predicate: ["select"], descendants: true, read: ElementRef }, { propertyName: "numbersElement", first: true, predicate: ["numbers"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
<div class="k-pager-numbers" #numbers>
<button *ngIf="start > 1"
type="button"
kendoPagerFocusable
kendoButton
[size]="size"
fillMode="flat"
themeColor="primary"
rounded="none"
[attr.aria-label]="pageLabel(start - 1)"
[attr.title]="pageLabel(start - 1)"
(click)="changePage(start - 2)">...</button>
<button *ngFor="let num of buttons"
type="button"
kendoPagerFocusable
kendoButton
[size]="size"
fillMode="flat"
themeColor="primary"
rounded="none"
[attr.aria-label]="pageLabel(num)"
[attr.title]="pageLabel(num)"
[attr.aria-current]="currentPage === num ? 'page' : undefined"
[selected]="currentPage === num"
(click)="currentPage === num ? false : changePage(num - 1)">
{{num}}
</button>
<button *ngIf="end < totalPages"
type="button"
kendoPagerFocusable
kendoButton
[size]="size"
fillMode="flat"
themeColor="primary"
rounded="none"
[attr.aria-label]="pageLabel(end + 1)"
[attr.title]="pageLabel(end + 1)"
(click)="changePage(end)">...</button>
</div>
`, isInline: true, dependencies: [{ kind: "directive", type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerNumericButtonsComponent, decorators: [{
type: Component,
args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons',
template: `
<div class="k-pager-numbers" #numbers>
<button *ngIf="start > 1"
type="button"
kendoPagerFocusable
kendoButton
[size]="size"
fillMode="flat"
themeColor="primary"
rounded="none"
[attr.aria-label]="pageLabel(start - 1)"
[attr.title]="pageLabel(start - 1)"
(click)="changePage(start - 2)">...</button>
<button *ngFor="let num of buttons"
type="button"
kendoPagerFocusable
kendoButton
[size]="size"
fillMode="flat"
themeColor="primary"
rounded="none"
[attr.aria-label]="pageLabel(num)"
[attr.title]="pageLabel(num)"
[attr.aria-current]="currentPage === num ? 'page' : undefined"
[selected]="currentPage === num"
(click)="currentPage === num ? false : changePage(num - 1)">
{{num}}
</button>
<button *ngIf="end < totalPages"
type="button"
kendoPagerFocusable
kendoButton
[size]="size"
fillMode="flat"
themeColor="primary"
rounded="none"
[attr.aria-label]="pageLabel(end + 1)"
[attr.title]="pageLabel(end + 1)"
(click)="changePage(end)">...</button>
</div>
`,
standalone: true,
imports: [PagerFocusableDirective, NgIf, NgFor, ButtonComponent]
}]
}], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i2.PagerContextService }, { type: i0.Renderer2 }]; }, propDecorators: { selectElement: [{
type: ViewChild,
args: ['select', { read: ElementRef }]
}], numbersElement: [{
type: ViewChild,
args: ['numbers', { read: ElementRef }]
}], buttonCount: [{
type: Input
}], size: [{
type: Input
}] } });