@progress/kendo-angular-grid 7.0.0-dev.202201251337 → 7.0.0-next.202204010834

package/esm2015/pager/pager-numeric-buttons.component.js

@@ -0,0 +1,226 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
+import { PagerElementComponent } from './pager-element.component';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "./pager-context.service";
+import * as i3 from "../navigation/focusable.directive";
+import * as i4 from "@angular/common";
+/**
+ * Displays numeric buttons to enable navigation between the pages.
+ */
+export class PagerNumericButtonsComponent extends PagerElementComponent {
+    constructor(localization, cd, pagerContext) {
+        super(localization, pagerContext, cd);
+        this.pagerContext = pagerContext;
+        this.numbersWrapClass = true;
+    }
+    /**
+     * @hidden
+     *
+     * @readonly
+     * @type {number[]}
+     * @memberOf PagerNumericButtonsComponent
+     */
+    get buttons() {
+        let 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;
+    }
+    /**
+     * @hidden
+     */
+    pageLabel(num) {
+        const pageText = this.textFor('pagerPage');
+        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();
+    }
+}
+PagerNumericButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PagerNumericButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
+PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PagerNumericButtonsComponent, selector: "kendo-pager-numeric-buttons", inputs: { buttonCount: "buttonCount" }, host: { properties: { "class.k-pager-numbers-wrap": "this.numbersWrapClass" } }, usesInheritance: true, ngImport: i0, template: `
+        <!-- updated to address https://docs.angular.lat/guide/ivy-compatibility-examples#cannot-bind-to-value-property-of-select-with-ngfor -->
+        <select
+            class="k-dropdownlist k-pager-nav"
+            kendoGridFocusable
+            tabindex="0"
+            (change)="onSelectChange($event)">
+            <option *ngIf="start > 1"
+                class="k-link"
+                value="previousButtons"
+                [selected]="false"
+                [attr.aria-label]="pageLabel(start - 1)">...
+            </option>
+            <option *ngFor="let num of buttons"
+                [value]="num.toString()"
+                [selected]="num === currentPage"
+                [attr.aria-label]="pageLabel(num)"
+                [attr.aria-current]="currentPage === num ? 'page' : undefined"
+                [ngClass]="{'k-link': true, 'k-state-selected':currentPage === num}">
+                {{num}}
+            </option>
+            <option *ngIf="end < totalPages"
+                value="nextButtons"
+                [selected]="false"
+                class="k-link"
+                [attr.aria-label]="pageLabel(end + 1)">...
+            </option>
+        </select>
+        <ul [ngClass]="{'k-pager-numbers': true, 'k-reset': true}">
+            <li *ngIf="start > 1">
+                <span
+                    kendoGridFocusable
+                    tabindex="0"
+                    class="k-link k-pager-nav"
+                    role="button"
+                    [attr.aria-label]="pageLabel(start - 1)"
+                    (click)="changePage(start - 2)"
+                    (keydown.enter)="changePage(start - 2)">...</span>
+            </li>
+            <li *ngFor="let num of buttons">
+                <span
+                    kendoGridFocusable
+                    tabindex="0"
+                    role="button"
+                    [attr.aria-label]="pageLabel(num)"
+                    [ngClass]="{'k-link': true, 'k-state-selected':currentPage === num, 'k-pager-nav': true}"
+                    (click)="changePage(num - 1)"
+                    (keydown.enter)="changePage(num - 1)">
+                    {{num}}
+                </span>
+            </li>
+            <li *ngIf="end < totalPages">
+                <span
+                    kendoGridFocusable
+                    tabindex="0"
+                    class="k-link k-pager-nav"
+                    role="button"
+                    [attr.aria-label]="pageLabel(end + 1)"
+                    (click)="changePage(end)"
+                    (keydown.enter)="changePage(end)">...</span>
+            </li>
+        </ul>
+    `, isInline: true, directives: [{ type: i3.FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PagerNumericButtonsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: 'kendo-pager-numeric-buttons',
+                    template: `
+        <!-- updated to address https://docs.angular.lat/guide/ivy-compatibility-examples#cannot-bind-to-value-property-of-select-with-ngfor -->
+        <select
+            class="k-dropdownlist k-pager-nav"
+            kendoGridFocusable
+            tabindex="0"
+            (change)="onSelectChange($event)">
+            <option *ngIf="start > 1"
+                class="k-link"
+                value="previousButtons"
+                [selected]="false"
+                [attr.aria-label]="pageLabel(start - 1)">...
+            </option>
+            <option *ngFor="let num of buttons"
+                [value]="num.toString()"
+                [selected]="num === currentPage"
+                [attr.aria-label]="pageLabel(num)"
+                [attr.aria-current]="currentPage === num ? 'page' : undefined"
+                [ngClass]="{'k-link': true, 'k-state-selected':currentPage === num}">
+                {{num}}
+            </option>
+            <option *ngIf="end < totalPages"
+                value="nextButtons"
+                [selected]="false"
+                class="k-link"
+                [attr.aria-label]="pageLabel(end + 1)">...
+            </option>
+        </select>
+        <ul [ngClass]="{'k-pager-numbers': true, 'k-reset': true}">
+            <li *ngIf="start > 1">
+                <span
+                    kendoGridFocusable
+                    tabindex="0"
+                    class="k-link k-pager-nav"
+                    role="button"
+                    [attr.aria-label]="pageLabel(start - 1)"
+                    (click)="changePage(start - 2)"
+                    (keydown.enter)="changePage(start - 2)">...</span>
+            </li>
+            <li *ngFor="let num of buttons">
+                <span
+                    kendoGridFocusable
+                    tabindex="0"
+                    role="button"
+                    [attr.aria-label]="pageLabel(num)"
+                    [ngClass]="{'k-link': true, 'k-state-selected':currentPage === num, 'k-pager-nav': true}"
+                    (click)="changePage(num - 1)"
+                    (keydown.enter)="changePage(num - 1)">
+                    {{num}}
+                </span>
+            </li>
+            <li *ngIf="end < totalPages">
+                <span
+                    kendoGridFocusable
+                    tabindex="0"
+                    class="k-link k-pager-nav"
+                    role="button"
+                    [attr.aria-label]="pageLabel(end + 1)"
+                    (click)="changePage(end)"
+                    (keydown.enter)="changePage(end)">...</span>
+            </li>
+        </ul>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i2.PagerContextService }]; }, propDecorators: { numbersWrapClass: [{
+                type: HostBinding,
+                args: ['class.k-pager-numbers-wrap']
+            }], buttonCount: [{
+                type: Input
+            }] } });

package/esm2015/pager/pager-page-sizes.component.js

@@ -0,0 +1,225 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, ChangeDetectionStrategy, HostBinding, Input } from '@angular/core';
+import { PagerElementComponent } from './pager-element.component';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "./pager-context.service";
+import * as i3 from "./../navigation/navigation.service";
+import * as i4 from "@progress/kendo-angular-dropdowns";
+import * as i5 from "@progress/kendo-angular-label";
+import * as i6 from "./pager-dropdown.directive";
+import * as i7 from "../navigation/focusable.directive";
+/**
+ * Displays a drop-down list for the page size selection ([see example]({% slug paging_grid %}#toc-pager-templates)).
+ */
+export class PagerPageSizesComponent extends PagerElementComponent {
+    constructor(localization, cd, pagerContext, navigationService) {
+        super(localization, pagerContext, cd);
+        this.pagerContext = pagerContext;
+        this.navigationService = navigationService;
+        this._pageSizes = [];
+    }
+    get pageSizes() {
+        return this._pageSizes;
+    }
+    /**
+     * The page sizes collection. Can be an Array of numbers and/or PageSizeItem objects.
+     *
+     * @example
+     * ```ts-preview
+     * _@Component({
+     *    selector: 'my-app',
+     *    template: `
+     *        <kendo-grid [kendoGridBinding]="gridData" [height]="200"
+     *           [pageable]="true"
+     *            [pageSize]="pageSize">
+     *            <ng-template kendoPagerTemplate let-totalPages="totalPages" let-currentPage="currentPage">
+     *                <kendo-pager-page-sizes [pageSizes]="pagesizes"></kendo-pager-page-sizes>
+     *            </ng-template>
+     *        </kendo-grid>
+     *    `
+     * })
+     * class AppComponent {
+     *    public gridData: any[] = products;
+     *    public pageSize = 2;
+     *    public pagesizes = [{text: 'One', value: 1}, {text: 'Two', value: 2}, {text: 'All', value : 'all'}];
+     * }
+     *
+     * const products = [{
+     *   'ProductID' : 1,
+     *   'ProductName' : "Chai",
+     *   'SupplierID' : 1,
+     *   'CategoryID' : 1,
+     *   'QuantityPerUnit' : "10 boxes x 20 bags",
+     *   'UnitPrice' : 18.0000,
+     *   'UnitsInStock' : 39,
+     *   'UnitsOnOrder' : 0,
+     *   'ReorderLevel' : 10,
+     *   'Discontinued' : false
+     *
+     * }, {
+     *   'ProductID' : 2,
+     *   'ProductName' : "Chang",
+     *   'SupplierID' : 1,
+     *   'CategoryID' : 1,
+     *   'QuantityPerUnit' : "24 - 12 oz bottles",
+     *   'UnitPrice' : 19.0000,
+     *   'UnitsInStock' : 17,
+     *   'UnitsOnOrder' : 40,
+     *   'ReorderLevel' : 25,
+     *   'Discontinued' : false
+     * }, {
+     *   'ProductID' : 3,
+     *   'ProductName' : "Aniseed Syrup",
+     *   'SupplierID' : 1,
+     *   'CategoryID' : 2,
+     *   'QuantityPerUnit' : "12 - 550 ml bottles",
+     *   'UnitPrice' : 10.0000,
+     *   'UnitsInStock' : 13,
+     *   'UnitsOnOrder' : 70,
+     *   'ReorderLevel' : 25,
+     *   'Discontinued' : false
+     * }, {
+     *   'ProductID' : 4,
+     *   'ProductName' : "Chef Anton\'s Cajun Seasoning",
+     *   'SupplierID' : 2,
+     *  'CategoryID' : 2,
+     *   'QuantityPerUnit' : "48 - 6 oz jars",
+     *   'UnitPrice' : 22.0000,
+     *   'UnitsInStock' : 53,
+     *   'UnitsOnOrder' : 0,
+     *   'ReorderLevel' : 0,
+     *   'Discontinued' : false
+     * }, {
+     *   'ProductID' : 5,
+     *   'ProductName' : "Chef Anton\'s Gumbo Mix",
+     *   'SupplierID' : 2,
+     *   'CategoryID' : 2,
+     *   'QuantityPerUnit' : "36 boxes",
+     *   'UnitPrice' : 21.3500,
+     *   'UnitsInStock' : 0,
+     *   'UnitsOnOrder' : 0,
+     *   'ReorderLevel' : 0,
+     *   'Discontinued' : true
+     * }, {
+     *   'ProductID' : 6,
+     *   'ProductName' : "Grandma\'s Boysenberry Spread",
+     *   'SupplierID' : 3,
+     *   'CategoryID' : 2,
+     *   'QuantityPerUnit' : "12 - 8 oz jars",
+     *   'UnitPrice' : 25.0000,
+     *   'UnitsInStock' : 120,
+     *   'UnitsOnOrder' : 0,
+     *   'ReorderLevel' : 25,
+     *   'Discontinued' : false
+     * }];
+     * ```
+     */
+    set pageSizes(pageSizes) {
+        let normalizedItems = [];
+        pageSizes.forEach(item => {
+            if (typeof item === 'number') {
+                normalizedItems.push({
+                    text: item.toString(),
+                    value: item
+                });
+            }
+            else {
+                normalizedItems.push(item);
+            }
+        });
+        if (this.pageSize && !normalizedItems.some(item => item.value === this.pageSize)) {
+            normalizedItems = [{ text: this.pageSize.toString(), value: this.pageSize }, ...normalizedItems];
+        }
+        this._pageSizes = normalizedItems;
+    }
+    /**
+     * @hidden
+     *
+     * @readonly
+     */
+    get classes() {
+        return true;
+    }
+    /**
+     * @hidden
+     *
+     * @readonly
+     */
+    get showInitialPageSize() {
+        return this.pageSizes
+            .filter(item => {
+            if (typeof item.value === 'number') {
+                return item.value === Number(this.pageSize);
+            }
+            return this.total === Number(this.pageSize);
+        })
+            .length === 0;
+    }
+    /**
+     * @hidden
+     */
+    pageSizeChange(value) {
+        this.pageSize = typeof value === 'number' ? value : this.total;
+        this.pagerContext.changePageSize(this.pageSize);
+    }
+    /**
+     * @hidden
+     */
+    getValue(page) {
+        return typeof page.value === 'number' ? page.value : this.total;
+    }
+    onChanges({ total, skip, pageSize }) {
+        this.total = total;
+        this.skip = skip;
+        this.pageSize = typeof pageSize === 'number' ? pageSize : this.total;
+        this.cd.markForCheck();
+    }
+}
+PagerPageSizesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PagerPageSizesComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.PagerContextService }, { token: i3.NavigationService }], target: i0.ɵɵFactoryTarget.Component });
+PagerPageSizesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PagerPageSizesComponent, selector: "kendo-pager-page-sizes", inputs: { pageSizes: "pageSizes" }, host: { properties: { "class.k-pager-sizes": "this.classes", "class.k-label": "this.classes" } }, usesInheritance: true, ngImport: i0, template: `
+        <kendo-dropdownlist
+            #dropdownlist
+            kendoGridPagerDropDown
+            [tabindex]="0"
+            kendoGridFocusable
+            [data]="pageSizes"
+            textField="text"
+            valueField="value"
+            [valuePrimitive]="true"
+            [value]="pageSize"
+            (valueChange)="pageSizeChange($event)"></kendo-dropdownlist>
+        <kendo-label [for]="dropdownlist" [text]="textFor('pagerItemsPerPage')"></kendo-label>
+    `, isInline: true, components: [{ type: i4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { type: i5.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }], directives: [{ type: i6.PagerDropDownListDirective, selector: "[kendoGridPagerDropDown]" }, { type: i7.FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PagerPageSizesComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: 'kendo-pager-page-sizes',
+                    template: `
+        <kendo-dropdownlist
+            #dropdownlist
+            kendoGridPagerDropDown
+            [tabindex]="0"
+            kendoGridFocusable
+            [data]="pageSizes"
+            textField="text"
+            valueField="value"
+            [valuePrimitive]="true"
+            [value]="pageSize"
+            (valueChange)="pageSizeChange($event)"></kendo-dropdownlist>
+        <kendo-label [for]="dropdownlist" [text]="textFor('pagerItemsPerPage')"></kendo-label>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i2.PagerContextService }, { type: i3.NavigationService }]; }, propDecorators: { pageSizes: [{
+                type: Input
+            }], classes: [{
+                type: HostBinding,
+                args: ['class.k-pager-sizes']
+            }, {
+                type: HostBinding,
+                args: ['class.k-label']
+            }] } });

package/esm2015/pager/pager-prev-buttons.component.js

@@ -0,0 +1,129 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { PagerElementComponent } from './pager-element.component';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "./pager-context.service";
+import * as i3 from "./../navigation/navigation.service";
+import * as i4 from "../navigation/focusable.directive";
+import * as i5 from "@angular/common";
+/**
+ * Displays buttons for navigating to the first and to the previous page ([see example]({% slug paging_grid %}#toc-pager-templates)).
+ */
+export class PagerPrevButtonsComponent extends PagerElementComponent {
+    constructor(localization, pagerContext, cd, navigationService) {
+        super(localization, pagerContext, cd);
+        this.navigationService = navigationService;
+    }
+    /**
+     * @hidden
+     *
+     * @readonly
+     * @type {boolean}
+     * @memberOf PagerPrevButtonsComponent
+     */
+    get disabled() {
+        return this.currentPage === 1 || !this.total;
+    }
+    onChanges({ total, skip, pageSize }) {
+        this.total = total;
+        this.skip = skip;
+        this.pageSize = pageSize;
+        this.cd.markForCheck();
+    }
+}
+PagerPrevButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PagerPrevButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PagerContextService }, { token: i0.ChangeDetectorRef }, { token: i3.NavigationService }], target: i0.ɵɵFactoryTarget.Component });
+PagerPrevButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PagerPrevButtonsComponent, selector: "kendo-pager-prev-buttons", usesInheritance: true, ngImport: i0, template: `
+        <span
+            [kendoGridFocusable]="!disabled"
+            [title]="textFor('pagerFirstPage')"
+            (click)="currentPage !== 1 ? changePage(0) : false"
+            (keydown.enter)="currentPage !== 1 ? changePage(0) : false"
+            role="button"
+            [ngClass]="{
+                'k-link': true,
+                'k-pager-nav': true,
+                'k-state-disabled': disabled,
+                'k-pager-first': true
+            }">
+            <span role="note"
+                  [attr.aria-label]="textFor('pagerFirstPage')"
+                  [ngClass]="{
+                    'k-icon': true,
+                    'k-i-seek-w': true
+                  }">
+            </span>
+        </span>
+        <span
+            [kendoGridFocusable]="!disabled"
+            [title]="textFor('pagerPreviousPage')"
+            role="button"
+            (click)="currentPage !== 1 ? changePage(currentPage-2) : false"
+            (keydown.enter)="currentPage !== 1 ? changePage(currentPage-2) : false"
+            [ngClass]="{
+                'k-link': true,
+                'k-pager-nav': true,
+                'k-state-disabled': disabled,
+                '': true
+            }">
+            <span role="note"
+                  [attr.aria-label]="textFor('pagerPreviousPage')"
+                  [ngClass]="{
+                    'k-icon': true,
+                    'k-i-arrow-w': true
+                  }">
+            </span>
+        </span>
+    `, isInline: true, directives: [{ type: i4.FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PagerPrevButtonsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: 'kendo-pager-prev-buttons',
+                    template: `
+        <span
+            [kendoGridFocusable]="!disabled"
+            [title]="textFor('pagerFirstPage')"
+            (click)="currentPage !== 1 ? changePage(0) : false"
+            (keydown.enter)="currentPage !== 1 ? changePage(0) : false"
+            role="button"
+            [ngClass]="{
+                'k-link': true,
+                'k-pager-nav': true,
+                'k-state-disabled': disabled,
+                'k-pager-first': true
+            }">
+            <span role="note"
+                  [attr.aria-label]="textFor('pagerFirstPage')"
+                  [ngClass]="{
+                    'k-icon': true,
+                    'k-i-seek-w': true
+                  }">
+            </span>
+        </span>
+        <span
+            [kendoGridFocusable]="!disabled"
+            [title]="textFor('pagerPreviousPage')"
+            role="button"
+            (click)="currentPage !== 1 ? changePage(currentPage-2) : false"
+            (keydown.enter)="currentPage !== 1 ? changePage(currentPage-2) : false"
+            [ngClass]="{
+                'k-link': true,
+                'k-pager-nav': true,
+                'k-state-disabled': disabled,
+                '': true
+            }">
+            <span role="note"
+                  [attr.aria-label]="textFor('pagerPreviousPage')"
+                  [ngClass]="{
+                    'k-icon': true,
+                    'k-i-arrow-w': true
+                  }">
+            </span>
+        </span>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.PagerContextService }, { type: i0.ChangeDetectorRef }, { type: i3.NavigationService }]; } });

package/esm2015/pager/pager-settings.js

@@ -0,0 +1,20 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * @hidden
+ */
+const normalizeSettings = ({ buttonCount = 10, info = true, type = 'numeric', pageSizes = false, previousNext = true, responsive = true, position = 'bottom' }) => ({
+    buttonCount,
+    info,
+    pageSizes: pageSizes === true ? [5, 10, 20] : pageSizes,
+    previousNext,
+    type,
+    responsive,
+    position
+});
+/**
+ * @hidden
+ */
+export const normalize = (settings) => normalizeSettings(settings === true ? {} : settings);