@progress/kendo-angular-grid 7.4.2 → 11.0.0-develop.80

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

@@ -0,0 +1,249 @@
+/**-----------------------------------------------------------------------------------------
+* 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, HostBinding, Input } from '@angular/core';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { PagerContextService } from './pager-context.service';
+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 "@progress/kendo-angular-buttons";
+import * as i4 from "../navigation/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) {
+        super(localization, pagerContext, cd);
+        this.pagerContext = pagerContext;
+        this.numbersWrapClass = true;
+    }
+    /**
+     * @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;
+    }
+    /**
+     * @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: "13.3.11", 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: "13.3.11", type: PagerNumericButtonsComponent, selector: "kendo-pager-numeric-buttons", inputs: { buttonCount: "buttonCount" }, host: { properties: { "class.k-pager-numbers-wrap": "this.numbersWrapClass" } }, usesInheritance: true, ngImport: i0, template: `
+        <select
+            class="k-dropdown-list k-dropdown k-picker k-rounded-md k-pager-nav"
+            kendoGridFocusable
+            [attr.title]="textFor('selectPage')"
+            [attr.aria-label]="textFor('selectPage')"
+            [ngClass]="{
+                'k-picker-sm': size === 'small',
+                'k-picker-md': size === 'medium' || !size
+            }"
+            (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 class="k-pager-numbers">
+            <button *ngIf="start > 1"
+                type="button"
+                kendoGridFocusable
+                kendoButton
+                [size]="size"
+                fillMode="flat"
+                themeColor="primary"
+                class="k-pager-nav"
+                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"
+                kendoGridFocusable
+                kendoButton
+                [size]="size"
+                fillMode="flat"
+                themeColor="primary"
+                class="k-pager-nav"
+                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"
+                kendoGridFocusable
+                kendoButton
+                class="k-pager-nav"
+                [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.FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], 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-pager-numeric-buttons',
+                    template: `
+        <select
+            class="k-dropdown-list k-dropdown k-picker k-rounded-md k-pager-nav"
+            kendoGridFocusable
+            [attr.title]="textFor('selectPage')"
+            [attr.aria-label]="textFor('selectPage')"
+            [ngClass]="{
+                'k-picker-sm': size === 'small',
+                'k-picker-md': size === 'medium' || !size
+            }"
+            (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 class="k-pager-numbers">
+            <button *ngIf="start > 1"
+                type="button"
+                kendoGridFocusable
+                kendoButton
+                [size]="size"
+                fillMode="flat"
+                themeColor="primary"
+                class="k-pager-nav"
+                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"
+                kendoGridFocusable
+                kendoButton
+                [size]="size"
+                fillMode="flat"
+                themeColor="primary"
+                class="k-pager-nav"
+                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"
+                kendoGridFocusable
+                kendoButton
+                class="k-pager-nav"
+                [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 }]; }, propDecorators: { numbersWrapClass: [{
+                type: HostBinding,
+                args: ['class.k-pager-numbers-wrap']
+            }], buttonCount: [{
+                type: Input
+            }] } });

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

@@ -1,9 +1,12 @@
 /**-----------------------------------------------------------------------------------------
-* 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 } from '@angular/core';
+import { NavigationService } from './../navigation/navigation.service';
+import { Component, ChangeDetectorRef, ChangeDetectionStrategy, HostBinding, Input } from '@angular/core';
 import { PagerElementComponent } from './pager-element.component';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { PagerContextService } from './pager-context.service';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "./pager-context.service";
@@ -179,10 +182,12 @@ export class PagerPageSizesComponent extends PagerElementComponent {
         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: `
+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: i3.NavigationService }], target: i0.ɵɵFactoryTarget.Component });
+PagerPageSizesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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
+            class="k-dropdown"
             #dropdownlist
+            [size]="size"
             kendoGridPagerDropDown
             [tabindex]="0"
             kendoGridFocusable
@@ -194,14 +199,16 @@ PagerPageSizesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             (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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerPageSizesComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     selector: 'kendo-pager-page-sizes',
                     template: `
         <kendo-dropdownlist
+            class="k-dropdown"
             #dropdownlist
+            [size]="size"
             kendoGridPagerDropDown
             [tabindex]="0"
             kendoGridFocusable

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

@@ -0,0 +1,110 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2022 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { NavigationService } from './../navigation/navigation.service';
+import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
+import { PagerContextService } from "./pager-context.service";
+import { PagerElementComponent } from './pager-element.component';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+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-buttons";
+import * as i5 from "../navigation/focusable.directive";
+/**
+ * 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: "13.3.11", 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: "13.3.11", type: PagerPrevButtonsComponent, selector: "kendo-pager-prev-buttons", usesInheritance: true, ngImport: i0, template: `
+        <button
+            [kendoGridFocusable]="!disabled"
+            kendoButton
+            type="button"
+            [title]="textFor('pagerFirstPage')"
+            [attr.aria-label]="textFor('pagerFirstPage')"
+            (click)="currentPage !== 1 ? changePage(0) : false"
+            role="button"
+            icon="caret-alt-to-left"
+            class="k-pager-nav k-pager-first"
+            [disabled]="disabled"
+            fillMode="flat"
+            rounded="none"
+            [size]="size">
+        </button>
+        <button
+            kendoButton
+            [kendoGridFocusable]="!disabled"
+            type="button"
+            class="k-pager-nav"
+            [disabled]="disabled"
+            icon="caret-alt-left"
+            fillMode="flat"
+            rounded="none"
+            [size]="size"
+            [title]="textFor('pagerPreviousPage')"
+            [attr.aria-label]="textFor('pagerPreviousPage')"
+            (click)="currentPage !== 1 ? changePage(currentPage-2) : false">
+        </button>
+    `, isInline: true, components: [{ type: i4.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: i5.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: "13.3.11", ngImport: i0, type: PagerPrevButtonsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: 'kendo-pager-prev-buttons',
+                    template: `
+        <button
+            [kendoGridFocusable]="!disabled"
+            kendoButton
+            type="button"
+            [title]="textFor('pagerFirstPage')"
+            [attr.aria-label]="textFor('pagerFirstPage')"
+            (click)="currentPage !== 1 ? changePage(0) : false"
+            role="button"
+            icon="caret-alt-to-left"
+            class="k-pager-nav k-pager-first"
+            [disabled]="disabled"
+            fillMode="flat"
+            rounded="none"
+            [size]="size">
+        </button>
+        <button
+            kendoButton
+            [kendoGridFocusable]="!disabled"
+            type="button"
+            class="k-pager-nav"
+            [disabled]="disabled"
+            icon="caret-alt-left"
+            fillMode="flat"
+            rounded="none"
+            [size]="size"
+            [title]="textFor('pagerPreviousPage')"
+            [attr.aria-label]="textFor('pagerPreviousPage')"
+            (click)="currentPage !== 1 ? changePage(currentPage-2) : false">
+        </button>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.PagerContextService }, { type: i0.ChangeDetectorRef }, { type: i3.NavigationService }]; } });

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

@@ -1,5 +1,5 @@
 /**-----------------------------------------------------------------------------------------
-* 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
 *-------------------------------------------------------------------------------------------*/
 /**

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 in the Grid. To define a pager
@@ -68,9 +68,9 @@ export class PagerTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-PagerTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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.16", type: PagerTemplateDirective, selector: "[kendoPagerTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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: "[kendoPagerTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoPagerTemplate]'

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

@@ -1,12 +1,16 @@
 /**-----------------------------------------------------------------------------------------
-* 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, Input, EventEmitter, Output, HostBinding, HostListener, Optional, Inject } from '@angular/core';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { Component, Input, EventEmitter, Output, HostBinding, ElementRef, Renderer2, HostListener, NgZone, Optional, Inject } from '@angular/core';
 import { normalize } from './pager-settings';
+import { PagerTemplateDirective } from './pager-template.directive';
 import { anyChanged, replaceMessagePlaceholder } from '../utils';
+import { PagerContextService } from './pager-context.service';
 import { Subscription } from 'rxjs';
 import { RESPONSIVE_BREAKPOINT_LARGE, RESPONSIVE_BREAKPOINT_MEDIUM } from '../constants';
+import { NavigationService } from '../navigation/navigation.service';
 import { take } from 'rxjs/operators';
 import { CELL_CONTEXT } from '../rendering/common/cell-context';
 import { FocusGroup } from '../navigation/focus-group';
@@ -49,6 +53,7 @@ export class PagerComponent {
         this.subscriptions = new Subscription();
         this._templateContext = {};
         this._isFocused = false;
+        this._size = 'medium';
         this.resizeHandler = () => {
             const element = this.element.nativeElement;
             if (this.template || !element) {
@@ -56,12 +61,12 @@ export class PagerComponent {
             }
             const width = element.offsetWidth;
             if (width < RESPONSIVE_BREAKPOINT_MEDIUM) {
-                this.renderer.removeClass(element, 'k-pager-md');
-                this.renderer.addClass(element, 'k-pager-sm');
+                this.renderer.removeClass(element, 'k-pager-mobile-md');
+                this.renderer.addClass(element, 'k-pager-mobile-sm');
             }
             else if (width >= RESPONSIVE_BREAKPOINT_MEDIUM && width < RESPONSIVE_BREAKPOINT_LARGE) {
-                this.renderer.addClass(element, 'k-pager-md');
-                this.renderer.removeClass(element, 'k-pager-sm');
+                this.renderer.addClass(element, 'k-pager-mobile-md');
+                this.renderer.removeClass(element, 'k-pager-mobile-sm');
             }
             else {
                 this.clearResponsiveClasses();
@@ -71,15 +76,28 @@ export class PagerComponent {
     set options(value) {
         this.settings = normalize(value);
     }
+    set size(size) {
+        this._size = size;
+        if (size === 'none') {
+            this.element.nativeElement.classList.remove('k-pager-sm', 'k-pager-md');
+        }
+    }
+    ;
+    get size() {
+        return this._size;
+    }
+    get sizeSmallClass() {
+        return this.size === 'small';
+    }
+    get sizeMediumClass() {
+        return this.size === 'medium' || !this.size;
+    }
     get isFocused() {
         return this._isFocused;
     }
     get pagerAriaLabel() {
         return this.navigationService.pagerEnabled ? this.pagerLabel : undefined;
     }
-    /**
-     * @hidden
-     */
     get pagerLabel() {
         const localizationMsg = this.localizationService.get('pagerLabel') || '';
         return replaceMessagePlaceholder(replaceMessagePlaceholder(localizationMsg, 'currentPage', this.currentPage.toString()), 'totalPages', this.totalPages.toString());
@@ -112,6 +130,7 @@ export class PagerComponent {
     }
     onEnter(event) {
         if (this.navigationService.pagerEnabled && event.target === this.element.nativeElement) {
+            event.preventDefault();
             this.focusRoot.activate();
             this.focusFirstElement();
         }
@@ -168,11 +187,12 @@ export class PagerComponent {
                 total: this.total
             });
         }
-        if (changes.template) {
+        const changesInTemplate = changes['template'];
+        if (changesInTemplate) {
             // eslint-disable-next-line no-unused-expressions
-            changes.template.currentValue ? this.clearResponsiveClasses() : this.resizeHandler();
+            changesInTemplate.currentValue ? this.clearResponsiveClasses() : this.resizeHandler();
         }
-        if (changes.options) {
+        if (changes['options']) {
             // eslint-disable-next-line no-unused-expressions
             this.settings.responsive ? this.resizeHandler() : this.clearResponsiveClasses();
         }
@@ -202,8 +222,8 @@ export class PagerComponent {
     }
     clearResponsiveClasses() {
         const element = this.element.nativeElement;
-        this.renderer.removeClass(element, 'k-pager-sm');
-        this.renderer.removeClass(element, 'k-pager-md');
+        this.renderer.removeClass(element, 'k-pager-mobile-sm');
+        this.renderer.removeClass(element, 'k-pager-mobile-md');
     }
     shouldTriggerPageChange(target, condition) {
         return this.navigationService.pagerEnabled &&
@@ -228,8 +248,8 @@ export class PagerComponent {
         }
     }
 }
-PagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PagerComponent, deps: [{ token: i1.PagerContextService }, { token: i2.NavigationService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i3.LocalizationService }, { token: CELL_CONTEXT, optional: true }, { token: i4.FocusRoot }, { token: i5.FocusGroup }], target: i0.ɵɵFactoryTarget.Component });
-PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PagerComponent, selector: "kendo-pager", inputs: { total: "total", skip: "skip", pageSize: "pageSize", options: "options", template: "template" }, outputs: { pageChange: "pageChange" }, host: { listeners: { "focusin": "onFocusIn($event)", "focusout": "onFocusOut()", "keydown.escape": "onEscape()", "keydown.enter": "onEnter($event)", "keydown.arrowleft": "navigateToPreviousPage($event)", "keydown.pageup": "navigateToPreviousPage($event)", "keydown.arrowright": "navigateToNextPage($event)", "keydown.pagedown": "navigateToNextPage($event)", "keydown.home": "navigateToFirstPage($event)", "keydown.end": "navigateToLastPage($event)" }, properties: { "class.k-pager-wrap": "this.pagerWrapClass", "class.k-grid-pager": "this.gridPagerClass", "class.k-focus": "this.isFocused", "attr.aria-label": "this.pagerAriaLabel" } }, providers: [{
+PagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerComponent, deps: [{ token: i1.PagerContextService }, { token: i2.NavigationService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i3.LocalizationService }, { token: CELL_CONTEXT, optional: true }, { token: i4.FocusRoot }, { token: i5.FocusGroup }], target: i0.ɵɵFactoryTarget.Component });
+PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PagerComponent, selector: "kendo-pager", inputs: { total: "total", skip: "skip", pageSize: "pageSize", options: "options", size: "size", template: "template" }, outputs: { pageChange: "pageChange" }, host: { listeners: { "focusin": "onFocusIn($event)", "focusout": "onFocusOut()", "keydown.escape": "onEscape()", "keydown.enter": "onEnter($event)", "keydown.arrowleft": "navigateToPreviousPage($event)", "keydown.pageup": "navigateToPreviousPage($event)", "keydown.arrowright": "navigateToNextPage($event)", "keydown.pagedown": "navigateToNextPage($event)", "keydown.home": "navigateToFirstPage($event)", "keydown.end": "navigateToLastPage($event)" }, properties: { "class.k-pager-wrap": "this.pagerWrapClass", "class.k-grid-pager": "this.gridPagerClass", "class.k-pager-sm": "this.sizeSmallClass", "class.k-pager-md": "this.sizeMediumClass", "class.k-focus": "this.isFocused", "attr.aria-label": "this.pagerAriaLabel" } }, providers: [{
             provide: FOCUS_ROOT_ACTIVE,
             useValue: true
         }, {
@@ -254,15 +274,17 @@ PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
             [ngTemplateOutletContext]="templateContext">
         </ng-container>
         <ng-container *ngIf="!template?.templateRef">
-            <kendo-pager-prev-buttons *ngIf="settings.previousNext"></kendo-pager-prev-buttons>
+            <kendo-pager-prev-buttons [size]="size" *ngIf="settings.previousNext"></kendo-pager-prev-buttons>
             <kendo-pager-numeric-buttons
+                [size]="size"
                 *ngIf="settings.type === 'numeric'"
                 [buttonCount]="settings.buttonCount">
             </kendo-pager-numeric-buttons>
-            <kendo-pager-input *ngIf="settings.type === 'input'"></kendo-pager-input>
-            <kendo-pager-next-buttons *ngIf="settings.previousNext"></kendo-pager-next-buttons>
+            <kendo-pager-input [size]="size" *ngIf="settings.type === 'input'"></kendo-pager-input>
+            <kendo-pager-next-buttons [size]="size" *ngIf="settings.previousNext"></kendo-pager-next-buttons>
             <kendo-pager-info *ngIf='settings.info'></kendo-pager-info>
             <kendo-pager-page-sizes
+                [size]="size"
                 *ngIf="settings.pageSizes"
                 [pageSizes]="$any(settings.pageSizes)"
                 #pageSizes
@@ -277,7 +299,7 @@ PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
         </div>
         <kendo-resize-sensor *ngIf="settings.responsive" (resize)="resizeHandler()"></kendo-resize-sensor>
   `, isInline: true, components: [{ type: i6.PagerPrevButtonsComponent, selector: "kendo-pager-prev-buttons" }, { type: i7.PagerNumericButtonsComponent, selector: "kendo-pager-numeric-buttons", inputs: ["buttonCount"] }, { type: i8.PagerInputComponent, selector: "kendo-pager-input" }, { type: i9.PagerNextButtonsComponent, selector: "kendo-pager-next-buttons" }, { type: i10.PagerInfoComponent, selector: "kendo-pager-info" }, { type: i11.PagerPageSizesComponent, selector: "kendo-pager-page-sizes", inputs: ["pageSizes"] }, { type: i12.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i13.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PagerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-pager',
@@ -307,15 +329,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             [ngTemplateOutletContext]="templateContext">
         </ng-container>
         <ng-container *ngIf="!template?.templateRef">
-            <kendo-pager-prev-buttons *ngIf="settings.previousNext"></kendo-pager-prev-buttons>
+            <kendo-pager-prev-buttons [size]="size" *ngIf="settings.previousNext"></kendo-pager-prev-buttons>
             <kendo-pager-numeric-buttons
+                [size]="size"
                 *ngIf="settings.type === 'numeric'"
                 [buttonCount]="settings.buttonCount">
             </kendo-pager-numeric-buttons>
-            <kendo-pager-input *ngIf="settings.type === 'input'"></kendo-pager-input>
-            <kendo-pager-next-buttons *ngIf="settings.previousNext"></kendo-pager-next-buttons>
+            <kendo-pager-input [size]="size" *ngIf="settings.type === 'input'"></kendo-pager-input>
+            <kendo-pager-next-buttons [size]="size" *ngIf="settings.previousNext"></kendo-pager-next-buttons>
             <kendo-pager-info *ngIf='settings.info'></kendo-pager-info>
             <kendo-pager-page-sizes
+                [size]="size"
                 *ngIf="settings.pageSizes"
                 [pageSizes]="$any(settings.pageSizes)"
                 #pageSizes
@@ -344,6 +368,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], options: [{
                 type: Input
+            }], size: [{
+                type: Input
             }], template: [{
                 type: Input
             }], pageChange: [{
@@ -354,6 +380,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], gridPagerClass: [{
                 type: HostBinding,
                 args: ['class.k-grid-pager']
+            }], sizeSmallClass: [{
+                type: HostBinding,
+                args: ['class.k-pager-sm']
+            }], sizeMediumClass: [{
+                type: HostBinding,
+                args: ['class.k-pager-md']
             }], isFocused: [{
                 type: HostBinding,
                 args: ['class.k-focus']