@progress/kendo-angular-pager
Version:
Kendo UI Angular Pager
192 lines (191 loc) • 9.08 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 { Component, ChangeDetectorRef, ChangeDetectionStrategy, HostBinding, Input, ViewChild, ElementRef, NgZone } from '@angular/core';
import { PagerElementComponent } from './pager-element.component';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { PagerContextService } from "./pager-context.service";
import { PageSizeChangeEvent } from './pagesizechange-event';
import { DropDownListComponent } from '@progress/kendo-angular-dropdowns';
import { Keys } from '@progress/kendo-angular-common';
import { DEFAULT_PAGE_SIZE_VALUES, 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 Page Sizes component for Angular. Displays a drop-down list for the page size selection ([see example]({% slug pager_settings %})).
*
* @example
* ```html
* <kendo-pager [skip]="skip" [pageSize]="pageSize" [total]="total">
* <ng-template kendoPagerTemplate>
* <kendo-pager-page-sizes [pageSizes]="[10, 20, 50]"></kendo-pager-page-sizes>
* </ng-template>
* </kendo-pager>
* ```
*/
export class PagerPageSizesComponent extends PagerElementComponent {
pagerContext;
element;
ngZone;
dropDownList;
_showItemsText = true;
/**
* Controls the visibility of the page text label.
* @hidden
*/
get showItemsText() {
return this._showItemsText;
}
set showItemsText(value) {
this._showItemsText = value;
this.cd.markForCheck();
}
/**
* Specifies the page sizes collection. You can include numbers and [`PageSizeItem`]({% slug api_pager_pagesizeitem %}) objects.
*
* @example
* ```html
* <kendo-pager [skip]="0" [pageSize]="10" [total]="100">
* <ng-template kendoPagerTemplate>
* <kendo-pager-page-sizes [pageSizes]="[5, 10, 20, { text: 'All', value: 'all' }]"></kendo-pager-page-sizes>
* </ng-template>
* </kendo-pager>
* ```
*/
set pageSizes(pageSizes) {
let normalizedItems = [];
if (Array.isArray(pageSizes)) {
pageSizes.forEach(item => {
if (typeof item === 'number') {
normalizedItems.push({
text: item.toString(),
value: item
});
}
else {
normalizedItems.push(item);
}
});
}
else {
normalizedItems = DEFAULT_PAGE_SIZE_VALUES;
}
if (this.pageSize && !normalizedItems.some(item => item.value === this.pageSize)) {
normalizedItems = [{ text: this.pageSize.toString(), value: this.pageSize }, ...normalizedItems];
}
this._pageSizes = normalizedItems;
}
/**
* Specifies the padding of the DropDownList component.
*
* @default 'medium'
*/
size = DEFAULT_SIZE;
/**
* Specifies the adaptive mode of the internal `DropDownList` component.
*
* @default 'auto'
*/
adaptiveMode = 'auto';
/**
* @hidden
*
* @readonly
*/
get classes() {
return true;
}
_pageSizes = [];
constructor(localization, cd, pagerContext, element, ngZone) {
super(localization, pagerContext, cd);
this.pagerContext = pagerContext;
this.element = element;
this.ngZone = ngZone;
}
ngAfterViewInit() {
this.ngZone.runOutsideAngular(() => {
this.element.nativeElement.addEventListener('keydown', this.keyDownHandler.bind(this), true);
});
}
ngOnDestroy() {
this.element.nativeElement.removeEventListener('keydown', this.keyDownHandler);
}
/**
* @hidden
*/
pageSizeChange(value, dropdownlist) {
const event = new PageSizeChangeEvent(value);
this.pagerContext.changePageSize(event);
if (event.isDefaultPrevented()) {
dropdownlist.writeValue(this.pageSize);
}
}
onChanges({ total, skip, pageSize }) {
this.total = total;
this.skip = skip;
this.pageSize = typeof pageSize === 'number' ? pageSize : this.total;
this.cd.markForCheck();
}
keyDownHandler(ev) {
if (ev.keyCode === Keys.Escape && this.dropDownList.isOpen) {
ev.stopPropagation();
this.dropDownList.toggle(false);
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerPageSizesComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.PagerContextService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PagerPageSizesComponent, isStandalone: true, selector: "kendo-datapager-page-sizes, kendo-pager-page-sizes", inputs: { showItemsText: "showItemsText", pageSizes: "pageSizes", size: "size", adaptiveMode: "adaptiveMode" }, host: { properties: { "class.k-pager-sizes": "this.classes" } }, viewQueries: [{ propertyName: "dropDownList", first: true, predicate: ["dropdownlist"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
<kendo-dropdownlist kendoPagerFocusable
#dropdownlist
[size]="size"
[data]="_pageSizes"
textField="text"
valueField="value"
[valuePrimitive]="true"
[value]="pageSize"
(valueChange)="pageSizeChange($event, dropdownlist)"
[adaptiveMode]="adaptiveMode"
[attr.aria-label]="textFor('itemsPerPage')"></kendo-dropdownlist>
<ng-container *ngIf="showItemsText">{{ textFor('itemsPerPage') }}</ng-container>
`, isInline: true, dependencies: [{ kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerPageSizesComponent, decorators: [{
type: Component,
args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'kendo-datapager-page-sizes, kendo-pager-page-sizes',
template: `
<kendo-dropdownlist kendoPagerFocusable
#dropdownlist
[size]="size"
[data]="_pageSizes"
textField="text"
valueField="value"
[valuePrimitive]="true"
[value]="pageSize"
(valueChange)="pageSizeChange($event, dropdownlist)"
[adaptiveMode]="adaptiveMode"
[attr.aria-label]="textFor('itemsPerPage')"></kendo-dropdownlist>
<ng-container *ngIf="showItemsText">{{ textFor('itemsPerPage') }}</ng-container>
`,
standalone: true,
imports: [DropDownListComponent, PagerFocusableDirective, NgIf]
}]
}], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i2.PagerContextService }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { dropDownList: [{
type: ViewChild,
args: ['dropdownlist', { static: true }]
}], showItemsText: [{
type: Input
}], pageSizes: [{
type: Input
}], size: [{
type: Input
}], adaptiveMode: [{
type: Input
}], classes: [{
type: HostBinding,
args: ["class.k-pager-sizes"]
}] } });