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

package/{fesm2015/kendo-angular-pager.js → fesm2020/progress-kendo-angular-pager.mjs}

@@ -1,19 +1,21 @@
 /**-----------------------------------------------------------------------------------------
-* 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 * as i0 from '@angular/core';
-import { Directive, Input, forwardRef, Component, ChangeDetectionStrategy, ViewChild, HostBinding, Optional, EventEmitter, ContentChild, Output, HostListener, NgModule } from '@angular/core';
+import { Directive, Input, forwardRef, Component, ChangeDetectionStrategy, ViewChild, HostBinding, Optional, ElementRef, EventEmitter, ContentChild, Output, HostListener, NgModule } from '@angular/core';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { Subject, Subscription } from 'rxjs';
+import * as i3 from '@progress/kendo-angular-buttons';
+import { ButtonsModule } from '@progress/kendo-angular-buttons';
+import * as i3$1 from '@progress/kendo-angular-dropdowns';
+import { DropDownListModule } from '@progress/kendo-angular-dropdowns';
 import * as i6 from '@progress/kendo-angular-common';
 import { Keys, anyChanged, ResizeSensorComponent, EventsModule, ResizeSensorModule } from '@progress/kendo-angular-common';
-import * as i3 from '@progress/kendo-angular-dropdowns';
-import { DropDownListModule } from '@progress/kendo-angular-dropdowns';
-import * as i4 from '@angular/common';
+import * as i5 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i3$1 from '@progress/kendo-angular-inputs';
+import * as i3$2 from '@progress/kendo-angular-inputs';
 import { NumericTextBoxComponent, NumericTextBoxModule } from '@progress/kendo-angular-inputs';
 import { validatePackage } from '@progress/kendo-licensing';
 
@@ -62,9 +64,9 @@ class PageSizeChangeEvent extends PreventableEvent {
  */
 class Messages extends ComponentMessages {
 }
-Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: Messages, selector: "kendoPagerMessages", inputs: { firstPage: "firstPage", lastPage: "lastPage", previousPage: "previousPage", nextPage: "nextPage", page: "page", pageNumberInputTitle: "pageNumberInputTitle", itemsPerPage: "itemsPerPage", of: "of", items: "items", selectPage: "selectPage", inputLabel: "inputLabel" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: Messages, decorators: [{
+Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: Messages, selector: "kendoPagerMessages", inputs: { firstPage: "firstPage", lastPage: "lastPage", previousPage: "previousPage", nextPage: "nextPage", page: "page", pageNumberInputTitle: "pageNumberInputTitle", itemsPerPage: "itemsPerPage", of: "of", items: "items", selectPage: "selectPage", inputLabel: "inputLabel" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: Messages, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -107,14 +109,14 @@ class CustomMessagesComponent extends Messages {
         return true;
     }
 }
-CustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-CustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CustomMessagesComponent, selector: "kendo-datapager-messages", providers: [
+CustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+CustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CustomMessagesComponent, selector: "kendo-datapager-messages", providers: [
         {
             provide: Messages,
             useExisting: forwardRef(() => CustomMessagesComponent)
         }
     ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
@@ -137,14 +139,14 @@ class LocalizedMessagesDirective extends Messages {
         this.service = service;
     }
 }
-LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: LocalizedMessagesDirective, selector: "[kendoDataPagerLocalizedMessages]", providers: [
+LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: LocalizedMessagesDirective, selector: "[kendoDataPagerLocalizedMessages]", providers: [
         {
             provide: Messages,
             useExisting: forwardRef(() => LocalizedMessagesDirective)
         }
     ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -264,9 +266,9 @@ class PagerElementComponent {
         }
     }
 }
-PagerElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerElementComponent, deps: [{ token: i1.LocalizationService }, { token: PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-PagerElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PagerElementComponent, selector: "kendo-pager-element", ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerElementComponent, decorators: [{
+PagerElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerElementComponent, deps: [{ token: i1.LocalizationService }, { token: PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+PagerElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PagerElementComponent, selector: "kendo-pager-element", ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerElementComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-pager-element',
@@ -304,6 +306,31 @@ const focusableSelector = [
     '*[tabindex]:not([disabled])',
     '*[contenteditable]:not([disabled]):not([contenteditable="false"])'
 ].join(',');
+/**
+ * @hidden
+ */
+const DEFAULT_SIZE = 'medium';
+const SIZES = {
+    small: 'sm',
+    medium: 'md',
+    large: 'lg'
+};
+/**
+ * @hidden
+ *
+ * Returns the styling classes to be added and removed
+ */
+const getStylingClasses = (componentType, stylingOption, previousValue, newValue) => {
+    switch (stylingOption) {
+        case 'size':
+            return {
+                toRemove: `k-${componentType}-${SIZES[previousValue]}`,
+                toAdd: newValue !== 'none' ? `k-${componentType}-${SIZES[newValue]}` : ''
+            };
+        default:
+            break;
+    }
+};
 
 /**
  * @hidden
@@ -370,9 +397,9 @@ class PagerFocusableDirective {
         });
     }
 }
-PagerFocusableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerFocusableDirective, deps: [{ token: PagerNavigationService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-PagerFocusableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerFocusableDirective, decorators: [{
+PagerFocusableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerFocusableDirective, deps: [{ token: PagerNavigationService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+PagerFocusableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerFocusableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoPagerFocusable]',
@@ -387,6 +414,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
 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
@@ -405,58 +442,68 @@ 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: 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: 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: 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: 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: PagerContextService }, { type: i0.ChangeDetectorRef }]; } });
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: PagerContextService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { size: [{
+                type: Input
+            }] } });
 
 /**
  * Displays a drop-down list for the page size selection ([see example]({% slug pager_settings %})).
@@ -467,6 +514,16 @@ class PagerPageSizesComponent extends PagerElementComponent {
         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 = [];
     }
     /**
@@ -650,10 +707,12 @@ class PagerPageSizesComponent extends PagerElementComponent {
         }
     }
 }
-PagerPageSizesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerPageSizesComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }, { token: i0.ElementRef }, { token: i0.NgZone }], 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: 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"
@@ -661,15 +720,17 @@ PagerPageSizesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             [value]="pageSize"
             (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: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerPageSizesComponent, decorators: [{
+    `, isInline: true, components: [{ type: i3$1.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: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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"
@@ -684,12 +745,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 args: ['dropdownlist', { static: true }]
             }], pageSizes: [{
                 type: Input
+            }], size: [{
+                type: Input
             }], classes: [{
                 type: HostBinding,
                 args: ["class.k-pager-sizes"]
-            }, {
-                type: HostBinding,
-                args: ["class.k-label"]
             }] } });
 
 /**
@@ -739,9 +799,9 @@ 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]'
@@ -754,10 +814,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
  * Displays numeric buttons to enable navigation between the pages.
  */
 class PagerNumericButtonsComponent extends PagerElementComponent {
-    constructor(localization, cd, pagerContext) {
+    constructor(localization, cd, pagerContext, renderer) {
         super(localization, pagerContext, cd);
         this.pagerContext = pagerContext;
-        this.numbersWrapClass = true;
+        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
@@ -767,7 +845,7 @@ class PagerNumericButtonsComponent extends PagerElementComponent {
      * @memberOf PagerNumericButtonsComponent
      */
     get buttons() {
-        let result = [];
+        const result = [];
         for (let idx = this.start; idx <= this.end; idx++) {
             result.push(idx);
         }
@@ -791,6 +869,9 @@ class PagerNumericButtonsComponent extends PagerElementComponent {
         }
         return 1;
     }
+    ngAfterViewInit() {
+        this.handleClasses(this.size, 'size');
+    }
     /**
      * @hidden
      */
@@ -828,16 +909,28 @@ class PagerNumericButtonsComponent extends PagerElementComponent {
     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: "12.2.17", ngImport: i0, type: PagerNumericButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
-PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons", inputs: { buttonCount: "buttonCount" }, host: { properties: { "class.k-pager-numbers-wrap": "this.numbersWrapClass" } }, usesInheritance: true, ngImport: i0, template: `
-        <select kendoPagerFocusable
-            class="k-dropdown-list k-picker k-picker-md k-rounded-md k-picker-solid"
+PagerNumericButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerNumericButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: 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"
-                class="k-link"
                 value="previousButtons"
                 [selected]="false"
                 [attr.aria-label]="pageLabel(start - 1)">...
@@ -847,59 +940,67 @@ PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                 [selected]="num === currentPage"
                 [attr.aria-label]="pageLabel(num)"
                 [attr.aria-current]="currentPage === num ? 'page' : undefined"
-                [ngClass]="{'k-link': true, 'k-selected':currentPage === num}">
+                [ngClass]="{'k-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}">
-            <li *ngIf="start > 1">
-                <button
-                    type="button" kendoPagerFocusable
-                    class="k-link"
-                    [attr.aria-label]="pageLabel(start - 1)"
-                    [attr.title]="pageLabel(start - 1)"
-                    (click)="changePage(start - 2)">...</button>
-            </li>
-            <li *ngFor="let num of buttons">
-                <button
-                    type="button" kendoPagerFocusable
-                    [attr.aria-label]="pageLabel(num)"
-                    [attr.title]="pageLabel(num)"
-                    [attr.aria-current]="currentPage === num ? 'page' : undefined"
-                    [ngClass]="{'k-link': true, 'k-selected':currentPage === num}"
-                    (click)="changePage(num - 1)">
-                    {{num}}
-                </button>
-            </li>
-            <li *ngIf="end < totalPages">
-                <button
-                    type="button" kendoPagerFocusable
-                    class="k-link"
-                    [attr.aria-label]="pageLabel(end + 1)"
-                    [attr.title]="pageLabel(end + 1)"
-                    (click)="changePage(end)">...</button>
-            </li>
-        </ul>
-    `, isInline: true, directives: [{ type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }, { 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.17", ngImport: i0, type: PagerNumericButtonsComponent, decorators: [{
+        <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: 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
-            class="k-dropdown-list k-picker k-picker-md k-rounded-md k-picker-solid"
+        <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"
-                class="k-link"
                 value="previousButtons"
                 [selected]="false"
                 [attr.aria-label]="pageLabel(start - 1)">...
@@ -909,52 +1010,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 [selected]="num === currentPage"
                 [attr.aria-label]="pageLabel(num)"
                 [attr.aria-current]="currentPage === num ? 'page' : undefined"
-                [ngClass]="{'k-link': true, 'k-selected':currentPage === num}">
+                [ngClass]="{'k-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}">
-            <li *ngIf="start > 1">
-                <button
-                    type="button" kendoPagerFocusable
-                    class="k-link"
-                    [attr.aria-label]="pageLabel(start - 1)"
-                    [attr.title]="pageLabel(start - 1)"
-                    (click)="changePage(start - 2)">...</button>
-            </li>
-            <li *ngFor="let num of buttons">
-                <button
-                    type="button" kendoPagerFocusable
-                    [attr.aria-label]="pageLabel(num)"
-                    [attr.title]="pageLabel(num)"
-                    [attr.aria-current]="currentPage === num ? 'page' : undefined"
-                    [ngClass]="{'k-link': true, 'k-selected':currentPage === num}"
-                    (click)="changePage(num - 1)">
-                    {{num}}
-                </button>
-            </li>
-            <li *ngIf="end < totalPages">
-                <button
-                    type="button" kendoPagerFocusable
-                    class="k-link"
-                    [attr.aria-label]="pageLabel(end + 1)"
-                    [attr.title]="pageLabel(end + 1)"
-                    (click)="changePage(end)">...</button>
-            </li>
-        </ul>
+        <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: PagerContextService }]; }, propDecorators: { numbersWrapClass: [{
-                type: HostBinding,
-                args: ['class.k-pager-numbers-wrap']
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: PagerContextService }, { type: i0.Renderer2 }]; }, propDecorators: { selectElement: [{
+                type: ViewChild,
+                args: ['select', { read: ElementRef }]
             }], buttonCount: [{
                 type: Input
+            }], size: [{
+                type: Input
             }] } });
 
 // eslint-disable  no-access-missing-member
@@ -964,6 +1076,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
 class PagerNextButtonsComponent 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
@@ -982,58 +1104,68 @@ class PagerNextButtonsComponent extends PagerElementComponent {
         this.cd.markForCheck();
     }
 }
-PagerNextButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerNextButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-PagerNextButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons", usesInheritance: true, ngImport: i0, template: `
-        <button
-            type="button" kendoPagerFocusable
-            class="k-link k-pager-nav"
-            [class.k-disabled]="disabled"
+PagerNextButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerNextButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+PagerNextButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons", inputs: { size: "size" }, usesInheritance: true, ngImport: i0, template: `
+        <button kendoButton kendoPagerFocusable
+            type="button"
+            [size]="size"
+            icon="caret-alt-right"
+            fillMode="flat"
+            rounded="none"
+            class="k-pager-nav"
+            [disabled]="disabled"
             [title]="textFor('nextPage')"
             [attr.aria-label]="textFor('nextPage')"
-            [attr.aria-disabled]="disabled ? true : undefined"
             (click)="currentPage !== totalPages ? changePage(currentPage) : false">
-            <span class="k-icon k-i-arrow-e" role="note" [attr.aria-label]="textFor('nextPage')"></span>
         </button>
-        <button
-            type="button" kendoPagerFocusable
-            class="k-link k-pager-nav k-pager-last"
-            [class.k-disabled]="disabled"
+        <button kendoButton kendoPagerFocusable
+            type="button"
+            [size]="size"
+            icon="caret-alt-to-right"
+            fillMode="flat"
+            rounded="none"
+            class="k-pager-nav k-pager-last"
+            [disabled]="disabled"
             [title]="textFor('lastPage')"
             [attr.aria-label]="textFor('lastPage')"
-            [attr.aria-disabled]="disabled ? true : undefined"
             (click)="currentPage !== totalPages ? changePage(totalPages-1) : false">
-            <span class="k-icon k-i-seek-e" role="note" [attr.aria-label]="textFor('lastPage')"></span>
         </button>
-    `, isInline: true, directives: [{ type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerNextButtonsComponent, 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: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerNextButtonsComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     selector: 'kendo-datapager-next-buttons',
                     template: `
-        <button
-            type="button" kendoPagerFocusable
-            class="k-link k-pager-nav"
-            [class.k-disabled]="disabled"
+        <button kendoButton kendoPagerFocusable
+            type="button"
+            [size]="size"
+            icon="caret-alt-right"
+            fillMode="flat"
+            rounded="none"
+            class="k-pager-nav"
+            [disabled]="disabled"
             [title]="textFor('nextPage')"
             [attr.aria-label]="textFor('nextPage')"
-            [attr.aria-disabled]="disabled ? true : undefined"
             (click)="currentPage !== totalPages ? changePage(currentPage) : false">
-            <span class="k-icon k-i-arrow-e" role="note" [attr.aria-label]="textFor('nextPage')"></span>
         </button>
-        <button
-            type="button" kendoPagerFocusable
-            class="k-link k-pager-nav k-pager-last"
-            [class.k-disabled]="disabled"
+        <button kendoButton kendoPagerFocusable
+            type="button"
+            [size]="size"
+            icon="caret-alt-to-right"
+            fillMode="flat"
+            rounded="none"
+            class="k-pager-nav k-pager-last"
+            [disabled]="disabled"
             [title]="textFor('lastPage')"
             [attr.aria-label]="textFor('lastPage')"
-            [attr.aria-disabled]="disabled ? true : undefined"
             (click)="currentPage !== totalPages ? changePage(totalPages-1) : false">
-            <span class="k-icon k-i-seek-e" role="note" [attr.aria-label]="textFor('lastPage')"></span>
         </button>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: PagerContextService }, { type: i0.ChangeDetectorRef }]; } });
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: PagerContextService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { size: [{
+                type: Input
+            }] } });
 
 /**
  * Displays an input element which allows the typing and rendering of page numbers.
@@ -1044,6 +1176,16 @@ class PagerInputComponent extends PagerElementComponent {
         this.pagerContext = pagerContext;
         this.zone = zone;
         this.renderer = renderer;
+        /**
+         * Specifies the padding of the internal numeric input element.
+         *
+         * The possible values are:
+         * * `small`
+         * * `medium` (default)
+         * * `large`
+         * * `none`
+         */
+        this.size = DEFAULT_SIZE;
         /**
          * @hidden
          *
@@ -1052,7 +1194,7 @@ class PagerInputComponent extends PagerElementComponent {
          * @memberOf PagerInputComponent
          */
         this.handleKeyDown = (event) => {
-            let incomingValue = this.numericInput.value || this.current;
+            const incomingValue = this.numericInput.value || this.current;
             // eslint-disable import/no-deprecated
             if (event.keyCode === Keys.Enter) {
                 event.preventDefault();
@@ -1106,14 +1248,15 @@ class PagerInputComponent extends PagerElementComponent {
         this.cd.markForCheck();
     }
 }
-PagerInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerInputComponent, deps: [{ token: i1.LocalizationService }, { token: PagerContextService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-PagerInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PagerInputComponent, selector: "kendo-datapager-input", viewQueries: [{ propertyName: "numericInput", first: true, predicate: NumericTextBoxComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+PagerInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerInputComponent, deps: [{ token: i1.LocalizationService }, { token: PagerContextService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+PagerInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PagerInputComponent, selector: "kendo-datapager-input", inputs: { size: "size" }, viewQueries: [{ propertyName: "numericInput", first: true, predicate: NumericTextBoxComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
      <span [ngClass]="{'k-pager-input': true, 'k-label': true}">
         {{textFor('page')}}
         <kendo-numerictextbox kendoPagerFocusable
             [spinners]="false"
             [decimals]="0"
             format="n0"
+            [size]="size"
             [disabled]="!hasPages"
             [value]="current"
             [min]="hasPages ? 1 : 0"
@@ -1127,8 +1270,8 @@ PagerInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
         </kendo-numerictextbox>
         {{textFor('of')}} {{totalPages}}
      </span>
-    `, isInline: true, components: [{ type: i3$1.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }, { type: i6.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerInputComponent, decorators: [{
+    `, isInline: true, components: [{ type: i3$2.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }], directives: [{ type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }, { type: i6.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerInputComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-datapager-input',
@@ -1139,6 +1282,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             [spinners]="false"
             [decimals]="0"
             format="n0"
+            [size]="size"
             [disabled]="!hasPages"
             [value]="current"
             [min]="hasPages ? 1 : 0"
@@ -1157,6 +1301,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: PagerContextService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }]; }, propDecorators: { numericInput: [{
                 type: ViewChild,
                 args: [NumericTextBoxComponent, { static: true }]
+            }], size: [{
+                type: Input
             }] } });
 
 // eslint-disable no-access-missing-member
@@ -1207,9 +1353,9 @@ class PagerInfoComponent extends PagerElementComponent {
         this.cd.markForCheck();
     }
 }
-PagerInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerInfoComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
-PagerInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PagerInfoComponent, selector: "kendo-datapager-info", host: { properties: { "class.k-pager-info": "this.classes", "class.k-label": "this.classes" } }, usesInheritance: true, ngImport: i0, template: `{{currentPageText}} - {{maxItems}} {{textFor('of')}} {{total}} {{textFor('items')}}`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerInfoComponent, decorators: [{
+PagerInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerInfoComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
+PagerInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PagerInfoComponent, selector: "kendo-datapager-info", host: { properties: { "class.k-pager-info": "this.classes" } }, usesInheritance: true, ngImport: i0, template: `{{currentPageText}} - {{maxItems}} {{textFor('of')}} {{total}} {{textFor('items')}}`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerInfoComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -1219,9 +1365,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: PagerContextService }]; }, propDecorators: { classes: [{
                 type: HostBinding,
                 args: ["class.k-pager-info"]
-            }, {
-                type: HostBinding,
-                args: ["class.k-label"]
             }] } });
 
 /**
@@ -1240,9 +1383,9 @@ const packageMetadata = {
     name: '@progress/kendo-angular-pager',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1669366305,
+    publishDate: 1672320914,
     version: '',
-    licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
+    licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
 class PagerComponent {
@@ -1298,6 +1441,7 @@ class PagerComponent {
         this._pageSizeValues = DEFAULT_PAGE_SIZE_VALUES;
         this.isInnerNavigationEnabled = false;
         this._navigable = false;
+        this._size = DEFAULT_SIZE;
         this.resizeHandler = () => {
             if (this.template) {
                 return;
@@ -1305,16 +1449,16 @@ class PagerComponent {
             const element = this.element.nativeElement;
             const width = element.offsetWidth;
             if (width < RESPONSIVE_BREAKPOINT_MEDIUM) {
-                element.classList.remove('k-pager-md');
-                element.classList.add('k-pager-sm');
+                element.classList.remove('k-pager-mobile-md');
+                element.classList.add('k-pager-mobile-sm');
             }
             else if (width >= RESPONSIVE_BREAKPOINT_MEDIUM && width < RESPONSIVE_BREAKPOINT_LARGE) {
-                element.classList.add('k-pager-md');
-                element.classList.remove('k-pager-sm');
+                element.classList.add('k-pager-mobile-md');
+                element.classList.remove('k-pager-mobile-sm');
             }
             else {
-                element.classList.remove('k-pager-md');
-                element.classList.remove('k-pager-sm');
+                element.classList.remove('k-pager-mobile-md');
+                element.classList.remove('k-pager-mobile-sm');
             }
         };
         validatePackage(packageMetadata);
@@ -1329,6 +1473,9 @@ class PagerComponent {
     set pageSizeValues(pageSizeValues) {
         this._pageSizeValues = Array.isArray(pageSizeValues) ? pageSizeValues : pageSizeValues ? DEFAULT_PAGE_SIZE_VALUES : false;
     }
+    get pageSizeValues() {
+        return this._pageSizeValues;
+    }
     /**
      * If set to `true`, the user can use dedicated shortcuts to interact with the Pager ([see example]({% slug keyboard_navigation_pager %})).
      * By default, navigation is disabled and the Pager content is accessible in the normal tab sequence.
@@ -1343,6 +1490,23 @@ class PagerComponent {
         return this._navigable;
     }
     ;
+    /**
+     * Specifies the padding of all Pager elements.
+     *
+     * 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;
+    }
     get dir() {
         return this.direction;
     }
@@ -1359,9 +1523,6 @@ class PagerComponent {
     get currentPage() {
         return Math.floor((this.skip || 0) / this.pageSize) + 1;
     }
-    get pageSizeValues() {
-        return this._pageSizeValues;
-    }
     get templateContext() {
         const context = this._templateContext;
         context.totalPages = this.totalPages;
@@ -1389,6 +1550,7 @@ class PagerComponent {
     ngAfterViewInit() {
         this.resizeHandler();
         this.renderer.setAttribute(this.element.nativeElement, 'aria-label', this.ariaLabel);
+        this.handleClasses(this.size, 'size');
     }
     ngOnChanges(changes) {
         if (anyChanged(["pageSize", "skip", "total"], changes, false)) {
@@ -1484,7 +1646,7 @@ class PagerComponent {
                     e.preventDefault();
                     const [firstFocusable] = this.navigationService.getFirstAndLastFocusable(wrapper);
                     this.navigationService.toggleInnerNavigation(true);
-                    firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
+                    firstFocusable?.focus();
                 }
             }
         });
@@ -1492,9 +1654,19 @@ class PagerComponent {
     innerNavigationChange(value) {
         this.isInnerNavigationEnabled = value;
     }
+    handleClasses(value, input) {
+        const elem = this.element.nativeElement;
+        const classes = getStylingClasses('pager', input, this[input], value);
+        if (classes.toRemove) {
+            this.renderer.removeClass(elem, classes.toRemove);
+        }
+        if (classes.toAdd) {
+            this.renderer.addClass(elem, classes.toAdd);
+        }
+    }
 }
-PagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerComponent, deps: [{ token: PagerContextService }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: PagerNavigationService }], target: i0.ɵɵFactoryTarget.Component });
-PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PagerComponent, selector: "kendo-datapager", inputs: { total: "total", skip: "skip", pageSize: "pageSize", buttonCount: "buttonCount", info: "info", type: "type", pageSizeValues: "pageSizeValues", previousNext: "previousNext", navigable: "navigable" }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, host: { listeners: { "focusin": "focusHandler($event)" }, properties: { "class.k-pager": "this.pagerClass", "attr.role": "this.widgetRole", "attr.aria-roledescription": "this.roleDescription", "attr.aria-keyshortcuts": "this.keyShortcuts", "attr.tabindex": "this.hostTabindex", "attr.dir": "this.dir" } }, providers: [
+PagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerComponent, deps: [{ token: PagerContextService }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: PagerNavigationService }], target: i0.ɵɵFactoryTarget.Component });
+PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PagerComponent, selector: "kendo-datapager", inputs: { total: "total", skip: "skip", pageSize: "pageSize", buttonCount: "buttonCount", info: "info", type: "type", pageSizeValues: "pageSizeValues", previousNext: "previousNext", navigable: "navigable", size: "size" }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, host: { listeners: { "focusin": "focusHandler($event)" }, properties: { "class.k-pager": "this.pagerClass", "attr.role": "this.widgetRole", "attr.aria-roledescription": "this.roleDescription", "attr.aria-keyshortcuts": "this.keyShortcuts", "attr.tabindex": "this.hostTabindex", "attr.dir": "this.dir" } }, providers: [
         LocalizationService,
         PagerContextService,
         PagerNavigationService
@@ -1540,19 +1712,22 @@ PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
             [ngTemplateOutletContext]="templateContext">
         </ng-container>
         <ng-container *ngIf="!template?.templateRef">
-            <kendo-datapager-prev-buttons *ngIf="previousNext"></kendo-datapager-prev-buttons>
-            <kendo-datapager-numeric-buttons
-                *ngIf="type === 'numeric' && buttonCount > 0"
-                [buttonCount]="buttonCount">
-            </kendo-datapager-numeric-buttons>
-            <kendo-datapager-input *ngIf="type === 'input'"></kendo-datapager-input>
-            <kendo-datapager-next-buttons *ngIf="previousNext"></kendo-datapager-next-buttons>
+            <div class="k-pager-numbers-wrap">
+                <kendo-datapager-prev-buttons [size]="size" *ngIf="previousNext"></kendo-datapager-prev-buttons>
+                <kendo-datapager-numeric-buttons
+                    [size]="size"
+                    *ngIf="type === 'numeric' && buttonCount > 0"
+                    [buttonCount]="buttonCount">
+                </kendo-datapager-numeric-buttons>
+                <kendo-datapager-input [size]="size" *ngIf="type === 'input'"></kendo-datapager-input>
+                <kendo-datapager-next-buttons [size]="size" *ngIf="previousNext"></kendo-datapager-next-buttons>
+            </div>
+            <kendo-datapager-page-sizes [size]="size" *ngIf="pageSizeValues" [pageSizes]="pageSizeValues"></kendo-datapager-page-sizes>
             <kendo-datapager-info *ngIf='info'></kendo-datapager-info>
-            <kendo-datapager-page-sizes *ngIf="pageSizeValues" [pageSizes]="pageSizeValues"></kendo-datapager-page-sizes>
         </ng-container>
         <kendo-resize-sensor></kendo-resize-sensor>
-  `, isInline: true, components: [{ type: PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons" }, { type: PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons", inputs: ["buttonCount"] }, { type: PagerInputComponent, selector: "kendo-datapager-input" }, { type: PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons" }, { type: PagerInfoComponent, selector: "kendo-datapager-info" }, { type: PagerPageSizesComponent, selector: "kendo-datapager-page-sizes", inputs: ["pageSizes"] }, { type: i6.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoDataPagerLocalizedMessages]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerComponent, decorators: [{
+  `, isInline: true, components: [{ type: PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons", inputs: ["size"] }, { type: PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons", inputs: ["buttonCount", "size"] }, { type: PagerInputComponent, selector: "kendo-datapager-input", inputs: ["size"] }, { type: PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons", inputs: ["size"] }, { type: PagerPageSizesComponent, selector: "kendo-datapager-page-sizes", inputs: ["pageSizes", "size"] }, { type: PagerInfoComponent, selector: "kendo-datapager-info" }, { type: i6.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoDataPagerLocalizedMessages]" }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-datapager',
@@ -1604,15 +1779,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             [ngTemplateOutletContext]="templateContext">
         </ng-container>
         <ng-container *ngIf="!template?.templateRef">
-            <kendo-datapager-prev-buttons *ngIf="previousNext"></kendo-datapager-prev-buttons>
-            <kendo-datapager-numeric-buttons
-                *ngIf="type === 'numeric' && buttonCount > 0"
-                [buttonCount]="buttonCount">
-            </kendo-datapager-numeric-buttons>
-            <kendo-datapager-input *ngIf="type === 'input'"></kendo-datapager-input>
-            <kendo-datapager-next-buttons *ngIf="previousNext"></kendo-datapager-next-buttons>
+            <div class="k-pager-numbers-wrap">
+                <kendo-datapager-prev-buttons [size]="size" *ngIf="previousNext"></kendo-datapager-prev-buttons>
+                <kendo-datapager-numeric-buttons
+                    [size]="size"
+                    *ngIf="type === 'numeric' && buttonCount > 0"
+                    [buttonCount]="buttonCount">
+                </kendo-datapager-numeric-buttons>
+                <kendo-datapager-input [size]="size" *ngIf="type === 'input'"></kendo-datapager-input>
+                <kendo-datapager-next-buttons [size]="size" *ngIf="previousNext"></kendo-datapager-next-buttons>
+            </div>
+            <kendo-datapager-page-sizes [size]="size" *ngIf="pageSizeValues" [pageSizes]="pageSizeValues"></kendo-datapager-page-sizes>
             <kendo-datapager-info *ngIf='info'></kendo-datapager-info>
-            <kendo-datapager-page-sizes *ngIf="pageSizeValues" [pageSizes]="pageSizeValues"></kendo-datapager-page-sizes>
         </ng-container>
         <kendo-resize-sensor></kendo-resize-sensor>
   `
@@ -1641,6 +1819,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }], navigable: [{
                 type: Input
+            }], size: [{
+                type: Input
             }], pageChange: [{
                 type: Output
             }], pageSizeChange: [{
@@ -1672,6 +1852,7 @@ const importedModules = [
     CommonModule,
     NumericTextBoxModule,
     DropDownListModule,
+    ButtonsModule,
     EventsModule,
     ResizeSensorModule
 ];
@@ -1711,8 +1892,8 @@ class PagerModule {
         ];
     }
 }
-PagerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PagerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerModule, declarations: [PagerComponent,
+PagerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PagerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerModule, declarations: [PagerComponent,
         PagerPrevButtonsComponent,
         PagerNextButtonsComponent,
         PagerNumericButtonsComponent,
@@ -1725,6 +1906,7 @@ PagerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         PagerFocusableDirective], imports: [CommonModule,
         NumericTextBoxModule,
         DropDownListModule,
+        ButtonsModule,
         EventsModule,
         ResizeSensorModule], exports: [PagerComponent,
         PagerPrevButtonsComponent,
@@ -1737,8 +1919,8 @@ PagerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         LocalizedMessagesDirective,
         CustomMessagesComponent,
         PagerFocusableDirective] });
-PagerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerModule, providers: [providers], imports: [[...importedModules]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerModule, decorators: [{
+PagerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerModule, providers: [providers], imports: [[...importedModules]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [INTERNAL_COMPONENTS],