@progress/kendo-angular-pager
Version:
Kendo UI Angular Pager
137 lines (136 loc) • 6.32 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
// eslint-disable no-access-missing-member
import { Component, ChangeDetectionStrategy, ChangeDetectorRef, Input } from '@angular/core';
import { PagerContextService } from "./pager-context.service";
import { PagerElementComponent } from './pager-element.component';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { DEFAULT_SIZE } from '../util';
import { PagerFocusableDirective } from './focusable.directive';
import { ButtonComponent } from '@progress/kendo-angular-buttons';
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 Next Buttons component for Angular. Displays buttons for navigating to the next and to the last page ([see example]({% slug pager_settings %})).
*
* @example
* ```html
* <kendo-pager [skip]="skip" [pageSize]="pageSize" [total]="total">
* <ng-template kendoPagerTemplate>
* <kendo-pager-next-buttons></kendo-pager-next-buttons>
* </ng-template>
* </kendo-pager>
* ```
*/
export class PagerNextButtonsComponent extends PagerElementComponent {
/**
* @hidden
*
* @readonly
* @type {boolean}
* @memberOf PagerNextButtonsComponent
*/
get disabled() {
return this.currentPage === this.totalPages || !this.total;
}
/**
* Specifies the padding of the navigation buttons.
*
* @default 'medium'
*/
size = DEFAULT_SIZE;
constructor(localization, pagerContext, cd) {
super(localization, pagerContext, cd);
}
/**
* @hidden
*/
onClick(isLast = false) {
if (this.disabled) {
return false;
}
const targetPage = isLast ? this.totalPages - 1 : this.currentPage;
return this.currentPage !== this.totalPages ? this.changePage(targetPage) : false;
}
onChanges({ total, skip, pageSize }) {
this.total = total;
this.skip = skip;
this.pageSize = pageSize;
this.cd.markForCheck();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerNextButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PagerNextButtonsComponent, isStandalone: true, selector: "kendo-datapager-next-buttons, kendo-pager-next-buttons", inputs: { size: "size" }, usesInheritance: true, ngImport: i0, template: `
<button kendoButton kendoPagerFocusable
type="button"
[]="size"
[]="nextArrowIcons[0]"
[]="nextArrowSVGIcons[0]"
fillMode="flat"
rounded="none"
class="k-pager-nav"
[]="disabled"
[]="disabled"
[]="textFor('nextPage')"
[]="textFor('nextPage')"
(click)="onClick()">
</button>
<button kendoButton kendoPagerFocusable
type="button"
[]="size"
[]="nextArrowIcons[1]"
[]="nextArrowSVGIcons[1]"
fillMode="flat"
rounded="none"
class="k-pager-nav k-pager-last"
[]="disabled"
[]="disabled"
[]="textFor('lastPage')"
[]="textFor('lastPage')"
(click)="onClick(true)">
</button>
`, isInline: true, dependencies: [{ 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"] }, { kind: "directive", type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerNextButtonsComponent, decorators: [{
type: Component,
args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'kendo-datapager-next-buttons, kendo-pager-next-buttons',
template: `
<button kendoButton kendoPagerFocusable
type="button"
[]="size"
[]="nextArrowIcons[0]"
[]="nextArrowSVGIcons[0]"
fillMode="flat"
rounded="none"
class="k-pager-nav"
[]="disabled"
[]="disabled"
[]="textFor('nextPage')"
[]="textFor('nextPage')"
(click)="onClick()">
</button>
<button kendoButton kendoPagerFocusable
type="button"
[]="size"
[]="nextArrowIcons[1]"
[]="nextArrowSVGIcons[1]"
fillMode="flat"
rounded="none"
class="k-pager-nav k-pager-last"
[]="disabled"
[]="disabled"
[]="textFor('lastPage')"
[]="textFor('lastPage')"
(click)="onClick(true)">
</button>
`,
standalone: true,
imports: [ButtonComponent, PagerFocusableDirective]
}]
}], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.PagerContextService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { size: [{
type: Input
}] } });