@progress/kendo-angular-pager 4.1.0-dev.202211230837 → 11.0.0-develop.79

package/esm2020/pager/pager-numeric-buttons.component.mjs

@@ -0,0 +1,273 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2022 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 * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "./pager-context.service";
+import * as i3 from "@progress/kendo-angular-buttons";
+import * as i4 from "./focusable.directive";
+import * as i5 from "@angular/common";
+/**
+ * Displays numeric buttons to enable navigation between the pages.
+ */
+export class PagerNumericButtonsComponent extends PagerElementComponent {
+    constructor(localization, cd, pagerContext, renderer) {
+        super(localization, pagerContext, cd);
+        this.pagerContext = pagerContext;
+        this.renderer = renderer;
+        this._size = DEFAULT_SIZE;
+    }
+    /**
+     * Specifies the padding of the numeric buttons.
+     *
+     * The possible values are:
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
+     */
+    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;
+    }
+    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);
+        }
+    }
+}
+PagerNumericButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerNumericButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.PagerContextService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons", inputs: { buttonCount: "buttonCount", size: "size" }, viewQueries: [{ propertyName: "selectElement", first: true, predicate: ["select"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
+        <select kendoPagerFocusable #select
+            class="k-dropdown-list k-dropdown k-picker k-rounded-md"
+            [attr.title]="pageChooserLabel"
+            [attr.aria-label]="pageChooserLabel"
+            (change)="onSelectChange($event)">
+            <option *ngIf="start > 1"
+                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-selected':currentPage === num}">
+                {{num}}
+            </option>
+            <option *ngIf="end < totalPages"
+                value="nextButtons"
+                [selected]="false"
+                [attr.aria-label]="pageLabel(end + 1)">...
+            </option>
+        </select>
+        <div [ngClass]="{'k-pager-numbers': true}">
+            <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)="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, components: [{ type: i3.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i4.PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerNumericButtonsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: 'kendo-datapager-numeric-buttons',
+                    template: `
+        <select kendoPagerFocusable #select
+            class="k-dropdown-list k-dropdown k-picker k-rounded-md"
+            [attr.title]="pageChooserLabel"
+            [attr.aria-label]="pageChooserLabel"
+            (change)="onSelectChange($event)">
+            <option *ngIf="start > 1"
+                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-selected':currentPage === num}">
+                {{num}}
+            </option>
+            <option *ngIf="end < totalPages"
+                value="nextButtons"
+                [selected]="false"
+                [attr.aria-label]="pageLabel(end + 1)">...
+            </option>
+        </select>
+        <div [ngClass]="{'k-pager-numbers': true}">
+            <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)="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>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i2.PagerContextService }, { type: i0.Renderer2 }]; }, propDecorators: { selectElement: [{
+                type: ViewChild,
+                args: ['select', { read: ElementRef }]
+            }], buttonCount: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }] } });

package/{esm2015/pager/pager-page-sizes.component.js → esm2020/pager/pager-page-sizes.component.mjs}

@@ -1,10 +1,15 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2022 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, ViewChild } from '@angular/core';
+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_SIZE } from '../util';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "./pager-context.service";
@@ -14,9 +19,21 @@ import * as i4 from "./focusable.directive";
  * Displays a drop-down list for the page size selection ([see example]({% slug pager_settings %})).
  */
 export class PagerPageSizesComponent extends PagerElementComponent {
-    constructor(localization, cd, pagerContext) {
+    constructor(localization, cd, pagerContext, element, ngZone) {
         super(localization, pagerContext, cd);
         this.pagerContext = pagerContext;
+        this.element = element;
+        this.ngZone = ngZone;
+        /**
+         * Specifies the padding of the dropdown.
+         *
+         * The possible values are:
+         * * `small`
+         * * `medium` (default)
+         * * `large`
+         * * `none`
+         */
+        this.size = DEFAULT_SIZE;
         this._pageSizes = [];
     }
     /**
@@ -170,6 +187,12 @@ export class PagerPageSizesComponent extends PagerElementComponent {
     }
     ngAfterViewInit() {
         this.dropDownList.wrapper.nativeElement.setAttribute('aria-label', this.textFor('itemsPerPage'));
+        this.ngZone.runOutsideAngular(() => {
+            this.element.nativeElement.addEventListener('keydown', this.keyDownHandler.bind(this), true);
+        });
+    }
+    ngOnDestroy() {
+        this.element.nativeElement.removeEventListener('keydown', this.keyDownHandler);
     }
     /**
      * @hidden
@@ -187,11 +210,19 @@ export class PagerPageSizesComponent extends PagerElementComponent {
         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);
+        }
+    }
 }
-PagerPageSizesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerPageSizesComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
-PagerPageSizesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PagerPageSizesComponent, selector: "kendo-datapager-page-sizes", inputs: { pageSizes: "pageSizes" }, host: { properties: { "class.k-pager-sizes": "this.classes", "class.k-label": "this.classes" } }, viewQueries: [{ propertyName: "dropDownList", first: true, predicate: ["dropdownlist"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+PagerPageSizesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerPageSizesComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.PagerContextService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+PagerPageSizesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PagerPageSizesComponent, selector: "kendo-datapager-page-sizes", inputs: { pageSizes: "pageSizes", size: "size" }, 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
+            class="k-dropdown"
             #dropdownlist
+            [size]="size"
             [data]="pageSizes"
             textField="text"
             valueField="value"
@@ -200,14 +231,16 @@ PagerPageSizesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             (valueChange)="pageSizeChange($event, dropdownlist)"></kendo-dropdownlist>
         {{ textFor('itemsPerPage') }}
     `, isInline: true, components: [{ type: i3.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"] }], directives: [{ type: i4.PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerPageSizesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerPageSizesComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     selector: 'kendo-datapager-page-sizes',
                     template: `
         <kendo-dropdownlist kendoPagerFocusable
+            class="k-dropdown"
             #dropdownlist
+            [size]="size"
             [data]="pageSizes"
             textField="text"
             valueField="value"
@@ -217,15 +250,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
         {{ textFor('itemsPerPage') }}
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i2.PagerContextService }]; }, propDecorators: { dropDownList: [{
+        }], 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 }]
             }], pageSizes: [{
                 type: Input
+            }], size: [{
+                type: Input
             }], classes: [{
                 type: HostBinding,
                 args: ["class.k-pager-sizes"]
-            }, {
-                type: HostBinding,
-                args: ["class.k-label"]
             }] } });

package/{esm2015/pager/pager-prev-buttons.component.js → esm2020/pager/pager-prev-buttons.component.mjs}

@@ -1,20 +1,34 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2022 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 } from '@angular/core';
+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 * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "./pager-context.service";
-import * as i3 from "./focusable.directive";
+import * as i3 from "@progress/kendo-angular-buttons";
+import * as i4 from "./focusable.directive";
 /**
  * Displays buttons for navigating to the first and to the previous page ([see example]({% slug pager_settings %})).
  */
 export class PagerPrevButtonsComponent extends PagerElementComponent {
     constructor(localization, pagerContext, cd) {
         super(localization, pagerContext, cd);
+        /**
+         * Specifies the padding of the buttons.
+         *
+         * The possible values are:
+         * * `small`
+         * * `medium` (default)
+         * * `large`
+         * * `none`
+         */
+        this.size = DEFAULT_SIZE;
     }
     /**
      * @hidden
@@ -33,55 +47,65 @@ export class PagerPrevButtonsComponent extends PagerElementComponent {
         this.cd.markForCheck();
     }
 }
-PagerPrevButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerPrevButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-PagerPrevButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons", usesInheritance: true, ngImport: i0, template: `
+PagerPrevButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerPrevButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+PagerPrevButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons", inputs: { size: "size" }, usesInheritance: true, ngImport: i0, template: `
         <button
-            type="button" kendoPagerFocusable
-            class="k-link k-pager-nav k-pager-first"
-            [class.k-disabled]="disabled"
+            type="button" kendoButton kendoPagerFocusable
+            class="k-pager-nav k-pager-first"
+            [disabled]="disabled"
+            icon="caret-alt-to-left"
+            fillMode="flat"
+            rounded="none"
+            [size]="size"
             [title]="textFor('firstPage')"
             [attr.aria-label]="textFor('firstPage')"
-            [attr.aria-disabled]="disabled ? true : undefined"
             (click)="currentPage !== 1 ? changePage(0) : false">
-            <span class="k-icon k-i-seek-w" role="note" [attr.aria-label]="textFor('firstPage')"></span>
         </button>
         <button
-            type="button" kendoPagerFocusable
-            class="k-link k-pager-nav"
-            [class.k-disabled]="disabled"
+            type="button" kendoButton kendoPagerFocusable
+            class="k-pager-nav"
+            [disabled]="disabled"
+            icon="caret-alt-left"
+            fillMode="flat"
+            rounded="none"
+            [size]="size"
             [title]="textFor('previousPage')"
             [attr.aria-label]="textFor('previousPage')"
-            [attr.aria-disabled]="disabled ? true : undefined"
             (click)="currentPage !== 1 ? changePage(currentPage-2) : false">
-            <span class="k-icon k-i-arrow-w" role="note" [attr.aria-label]="textFor('previousPage')"></span>
         </button>
-    `, isInline: true, directives: [{ type: i3.PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerPrevButtonsComponent, decorators: [{
+    `, isInline: true, components: [{ type: i3.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i4.PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerPrevButtonsComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     selector: 'kendo-datapager-prev-buttons',
                     template: `
         <button
-            type="button" kendoPagerFocusable
-            class="k-link k-pager-nav k-pager-first"
-            [class.k-disabled]="disabled"
+            type="button" kendoButton kendoPagerFocusable
+            class="k-pager-nav k-pager-first"
+            [disabled]="disabled"
+            icon="caret-alt-to-left"
+            fillMode="flat"
+            rounded="none"
+            [size]="size"
             [title]="textFor('firstPage')"
             [attr.aria-label]="textFor('firstPage')"
-            [attr.aria-disabled]="disabled ? true : undefined"
             (click)="currentPage !== 1 ? changePage(0) : false">
-            <span class="k-icon k-i-seek-w" role="note" [attr.aria-label]="textFor('firstPage')"></span>
         </button>
         <button
-            type="button" kendoPagerFocusable
-            class="k-link k-pager-nav"
-            [class.k-disabled]="disabled"
+            type="button" kendoButton kendoPagerFocusable
+            class="k-pager-nav"
+            [disabled]="disabled"
+            icon="caret-alt-left"
+            fillMode="flat"
+            rounded="none"
+            [size]="size"
             [title]="textFor('previousPage')"
             [attr.aria-label]="textFor('previousPage')"
-            [attr.aria-disabled]="disabled ? true : undefined"
             (click)="currentPage !== 1 ? changePage(currentPage-2) : false">
-            <span class="k-icon k-i-arrow-w" role="note" [attr.aria-label]="textFor('previousPage')"></span>
         </button>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.PagerContextService }, { type: i0.ChangeDetectorRef }]; } });
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.PagerContextService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { size: [{
+                type: Input
+            }] } });

package/{esm2015/pager/pager-template.directive.js → esm2020/pager/pager-template.directive.mjs}

@@ -1,8 +1,8 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2022 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Directive, Optional } from '@angular/core';
+import { Directive, TemplateRef, Optional } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
  * Represents the pager template which helps to customize the pager appearance. To define a pager
@@ -51,9 +51,9 @@ export class PagerTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-PagerTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-PagerTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: PagerTemplateDirective, selector: "[kendoDataPagerTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerTemplateDirective, decorators: [{
+PagerTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+PagerTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: PagerTemplateDirective, selector: "[kendoDataPagerTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDataPagerTemplate]'