@progress/kendo-angular-pager
Version:
Kendo UI Angular Pager
175 lines (174 loc) • 7.73 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 { NumericTextBoxComponent } from '@progress/kendo-angular-inputs';
// eslint-disable no-access-missing-member
import { Component, ChangeDetectorRef, ViewChild, NgZone, Renderer2, Input } from '@angular/core';
import { PagerElementComponent } from './pager-element.component';
import { LocalizationService } from "@progress/kendo-angular-l10n";
import { PagerContextService } from "./pager-context.service";
import { Keys, EventsOutsideAngularDirective } from '@progress/kendo-angular-common';
import { DEFAULT_SIZE } from '../util';
import { PagerFocusableDirective } from './focusable.directive';
import { NgIf } from '@angular/common';
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 Input component for Angular. Displays an input element which allows you to type and render page numbers.
*
* @example
* ```html
* <kendo-pager [skip]="skip" [pageSize]="pageSize" [total]="total">
* <ng-template kendoPagerTemplate>
* <kendo-pager-input></kendo-pager-input>
* </ng-template>
* </kendo-pager>
* ```
*/
export class PagerInputComponent extends PagerElementComponent {
pagerContext;
zone;
renderer;
numericInput;
/**
* Controls the visibility of the page text label.
* @hidden
*/
showPageText = true;
/**
* Specifies the padding of the internal `NumericTextBox` component.
*
* @default 'medium'
*/
size = DEFAULT_SIZE;
constructor(localization, pagerContext, zone, cd, renderer) {
super(localization, pagerContext, cd);
this.pagerContext = pagerContext;
this.zone = zone;
this.renderer = renderer;
}
onChanges({ total, skip, pageSize }) {
this.total = total;
this.skip = skip;
this.pageSize = pageSize;
this.cd.markForCheck();
}
/**
* @hidden
*
* @param {string} value
*
* @memberOf PagerInputComponent
*/
handleKeyDown = (event) => {
const incomingValue = this.numericInput.value || this.current;
// eslint-disable import/no-deprecated
if (event.code === Keys.Enter || event.code === Keys.NumpadEnter) {
event.preventDefault();
if (incomingValue !== this.current) {
this.zone.run(() => {
this.changePage(incomingValue - 1);
});
}
}
};
/**
* @hidden
*
* @param {string} value
*
* @memberOf PagerInputComponent
*/
handleBlur = () => {
const inputValue = this.numericInput.value;
if (!inputValue) {
this.numericInput.writeValue(this.current);
return;
}
if (inputValue !== this.current) {
this.zone.run(() => {
this.changePage(inputValue - 1);
});
}
};
/**
* @hidden
*/
get current() {
return this.hasPages ? this.currentPage : 0;
}
/**
* @hidden
*/
get hasPages() {
return this.totalPages !== 0;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerInputComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PagerContextService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PagerInputComponent, isStandalone: true, selector: "kendo-datapager-input, kendo-pager-input", inputs: { showPageText: "showPageText", size: "size" }, viewQueries: [{ propertyName: "numericInput", first: true, predicate: NumericTextBoxComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
<span class="k-pager-input">
<ng-container *ngIf="showPageText">{{textFor('page')}}</ng-container>
<kendo-numerictextbox kendoPagerFocusable
[spinners]="false"
[decimals]="0"
format="n0"
[size]="size"
[disabled]="!hasPages"
[value]="current"
[min]="hasPages ? 1 : 0"
[max]="totalPages"
[autoCorrect]="true"
[inputAttributes]="{
'aria-label': textFor('inputLabel')
}"
[title]="textFor('pageNumberInputTitle')"
[kendoEventsOutsideAngular]="{
keydown: handleKeyDown,
focusout: handleBlur
}">
</kendo-numerictextbox>
{{textFor('of')}} {{totalPages}}
</span>
`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "directive", type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerInputComponent, decorators: [{
type: Component,
args: [{
selector: 'kendo-datapager-input, kendo-pager-input',
template: `
<span class="k-pager-input">
<ng-container *ngIf="showPageText">{{textFor('page')}}</ng-container>
<kendo-numerictextbox kendoPagerFocusable
[spinners]="false"
[decimals]="0"
format="n0"
[size]="size"
[disabled]="!hasPages"
[value]="current"
[min]="hasPages ? 1 : 0"
[max]="totalPages"
[autoCorrect]="true"
[inputAttributes]="{
'aria-label': textFor('inputLabel')
}"
[title]="textFor('pageNumberInputTitle')"
[kendoEventsOutsideAngular]="{
keydown: handleKeyDown,
focusout: handleBlur
}">
</kendo-numerictextbox>
{{textFor('of')}} {{totalPages}}
</span>
`,
standalone: true,
imports: [NgIf, NumericTextBoxComponent, PagerFocusableDirective, EventsOutsideAngularDirective]
}]
}], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.PagerContextService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }]; }, propDecorators: { numericInput: [{
type: ViewChild,
args: [NumericTextBoxComponent, { static: true }]
}], showPageText: [{
type: Input
}], size: [{
type: Input
}] } });