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

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

@@ -9,8 +9,9 @@ import { PagerElementComponent } from './pager-element.component';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "./pager-context.service";
-import * as i3 from "../navigation/focusable.directive";
-import * as i4 from "@angular/common";
+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.
  */
@@ -90,12 +91,16 @@ export class PagerNumericButtonsComponent extends PagerElementComponent {
 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-dropdownlist k-pager-nav"
+            class="k-dropdown-list k-dropdown k-picker k-rounded-md k-pager-nav"
             kendoGridFocusable
-            tabindex="0"
+            [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"
-                class="k-link"
                 value="previousButtons"
                 [selected]="false"
                 [attr.aria-label]="pageLabel(start - 1)">...
@@ -105,51 +110,58 @@ 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, 'k-reset': true}">
-            <li *ngIf="start > 1">
-                <span
-                    kendoGridFocusable
-                    tabindex="0"
-                    class="k-link k-pager-nav"
-                    role="button"
-                    [attr.aria-label]="pageLabel(start - 1)"
-                    (click)="changePage(start - 2)"
-                    (keydown.enter)="changePage(start - 2)">...</span>
-            </li>
-            <li *ngFor="let num of buttons">
-                <span
-                    kendoGridFocusable
-                    tabindex="0"
-                    role="button"
-                    [attr.aria-label]="pageLabel(num)"
-                    [ngClass]="{'k-link': true, 'k-selected':currentPage === num, 'k-pager-nav': true}"
-                    (click)="changePage(num - 1)"
-                    (keydown.enter)="changePage(num - 1)">
-                    {{num}}
-                </span>
-            </li>
-            <li *ngIf="end < totalPages">
-                <span
-                    kendoGridFocusable
-                    tabindex="0"
-                    class="k-link k-pager-nav"
-                    role="button"
-                    [attr.aria-label]="pageLabel(end + 1)"
-                    (click)="changePage(end)"
-                    (keydown.enter)="changePage(end)">...</span>
-            </li>
-        </ul>
-    `, isInline: true, directives: [{ type: i3.FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        <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: [{
@@ -157,12 +169,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     selector: 'kendo-pager-numeric-buttons',
                     template: `
         <select
-            class="k-dropdownlist k-pager-nav"
+            class="k-dropdown-list k-dropdown k-picker k-rounded-md k-pager-nav"
             kendoGridFocusable
-            tabindex="0"
+            [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"
-                class="k-link"
                 value="previousButtons"
                 [selected]="false"
                 [attr.aria-label]="pageLabel(start - 1)">...
@@ -172,50 +188,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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, 'k-reset': true}">
-            <li *ngIf="start > 1">
-                <span
-                    kendoGridFocusable
-                    tabindex="0"
-                    class="k-link k-pager-nav"
-                    role="button"
-                    [attr.aria-label]="pageLabel(start - 1)"
-                    (click)="changePage(start - 2)"
-                    (keydown.enter)="changePage(start - 2)">...</span>
-            </li>
-            <li *ngFor="let num of buttons">
-                <span
-                    kendoGridFocusable
-                    tabindex="0"
-                    role="button"
-                    [attr.aria-label]="pageLabel(num)"
-                    [ngClass]="{'k-link': true, 'k-selected':currentPage === num, 'k-pager-nav': true}"
-                    (click)="changePage(num - 1)"
-                    (keydown.enter)="changePage(num - 1)">
-                    {{num}}
-                </span>
-            </li>
-            <li *ngIf="end < totalPages">
-                <span
-                    kendoGridFocusable
-                    tabindex="0"
-                    class="k-link k-pager-nav"
-                    role="button"
-                    [attr.aria-label]="pageLabel(end + 1)"
-                    (click)="changePage(end)"
-                    (keydown.enter)="changePage(end)">...</span>
-            </li>
-        </ul>
+        <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: [{

package/esm2020/pager/pager-page-sizes.component.mjs

@@ -185,7 +185,9 @@ export class PagerPageSizesComponent extends PagerElementComponent {
 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
@@ -204,7 +206,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     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

@@ -11,8 +11,8 @@ import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "./pager-context.service";
 import * as i3 from "./../navigation/navigation.service";
-import * as i4 from "../navigation/focusable.directive";
-import * as i5 from "@angular/common";
+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)).
  */
@@ -40,93 +40,71 @@ export class PagerPrevButtonsComponent extends PagerElementComponent {
 }
 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: `
-        <span
+        <button
             [kendoGridFocusable]="!disabled"
+            kendoButton
+            type="button"
             [title]="textFor('pagerFirstPage')"
+            [attr.aria-label]="textFor('pagerFirstPage')"
             (click)="currentPage !== 1 ? changePage(0) : false"
-            (keydown.enter)="currentPage !== 1 ? changePage(0) : false"
             role="button"
-            [ngClass]="{
-                'k-link': true,
-                'k-pager-nav': true,
-                'k-disabled': disabled,
-                'k-pager-first': true
-            }">
-            <span role="note"
-                  [attr.aria-label]="textFor('pagerFirstPage')"
-                  [ngClass]="{
-                    'k-icon': true,
-                    'k-i-caret-alt-to-left': true
-                  }">
-            </span>
-        </span>
-        <span
+            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')"
-            role="button"
-            (click)="currentPage !== 1 ? changePage(currentPage-2) : false"
-            (keydown.enter)="currentPage !== 1 ? changePage(currentPage-2) : false"
-            [ngClass]="{
-                'k-link': true,
-                'k-pager-nav': true,
-                'k-disabled': disabled,
-                '': true
-            }">
-            <span role="note"
-                  [attr.aria-label]="textFor('pagerPreviousPage')"
-                  [ngClass]="{
-                    'k-icon': true,
-                    'k-i-caret-alt-left': true
-                  }">
-            </span>
-        </span>
-    `, isInline: true, directives: [{ type: i4.FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+            [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: `
-        <span
+        <button
             [kendoGridFocusable]="!disabled"
+            kendoButton
+            type="button"
             [title]="textFor('pagerFirstPage')"
+            [attr.aria-label]="textFor('pagerFirstPage')"
             (click)="currentPage !== 1 ? changePage(0) : false"
-            (keydown.enter)="currentPage !== 1 ? changePage(0) : false"
             role="button"
-            [ngClass]="{
-                'k-link': true,
-                'k-pager-nav': true,
-                'k-disabled': disabled,
-                'k-pager-first': true
-            }">
-            <span role="note"
-                  [attr.aria-label]="textFor('pagerFirstPage')"
-                  [ngClass]="{
-                    'k-icon': true,
-                    'k-i-caret-alt-to-left': true
-                  }">
-            </span>
-        </span>
-        <span
+            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')"
-            role="button"
-            (click)="currentPage !== 1 ? changePage(currentPage-2) : false"
-            (keydown.enter)="currentPage !== 1 ? changePage(currentPage-2) : false"
-            [ngClass]="{
-                'k-link': true,
-                'k-pager-nav': true,
-                'k-disabled': disabled,
-                '': true
-            }">
-            <span role="note"
-                  [attr.aria-label]="textFor('pagerPreviousPage')"
-                  [ngClass]="{
-                    'k-icon': true,
-                    'k-i-caret-alt-left': true
-                  }">
-            </span>
-        </span>
+            [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/esm2020/pager/pager.component.mjs

@@ -53,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) {
@@ -60,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();
@@ -75,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());
@@ -116,6 +130,7 @@ export class PagerComponent {
     }
     onEnter(event) {
         if (this.navigationService.pagerEnabled && event.target === this.element.nativeElement) {
+            event.preventDefault();
             this.focusRoot.activate();
             this.focusFirstElement();
         }
@@ -207,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 &&
@@ -234,7 +249,7 @@ export class PagerComponent {
     }
 }
 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", 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.ɵ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
         }, {
@@ -259,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
@@ -312,15 +329,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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
@@ -349,6 +368,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], options: [{
                 type: Input
+            }], size: [{
+                type: Input
             }], template: [{
                 type: Input
             }], pageChange: [{
@@ -359,6 +380,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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']

package/esm2020/pager/pager.module.mjs

@@ -19,11 +19,13 @@ import { PagerTemplateDirective } from './pager-template.directive';
 import { SharedModule } from "../shared.module";
 import { ResizeSensorModule } from '@progress/kendo-angular-common';
 import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
+import { ButtonModule } from '@progress/kendo-angular-buttons';
 import * as i0 from "@angular/core";
 const importedModules = [
     CommonModule,
     InputsModule,
     LabelModule,
+    ButtonModule,
     DropDownsModule,
     ResizeSensorModule,
     SharedModule
@@ -72,6 +74,7 @@ PagerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         PagerInputDirective], imports: [CommonModule,
         InputsModule,
         LabelModule,
+        ButtonModule,
         DropDownsModule,
         ResizeSensorModule,
         SharedModule], exports: [PagerComponent,

package/esm2020/rendering/footer/footer.component.mjs

@@ -23,6 +23,7 @@ export class FooterComponent {
         this.groups = [];
         this.lockedColumnsCount = 0;
         this.logicalRowIndex = 0;
+        this.hostClass = true;
     }
     get footerClass() {
         return !this.scrollable;
@@ -43,7 +44,7 @@ export class FooterComponent {
     }
 }
 FooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FooterComponent, deps: [{ token: i1.ColumnInfoService }], target: i0.ɵɵFactoryTarget.Component });
-FooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FooterComponent, selector: "[kendoGridFooter]", inputs: { columns: "columns", groups: "groups", detailTemplate: "detailTemplate", scrollable: "scrollable", lockedColumnsCount: "lockedColumnsCount", logicalRowIndex: "logicalRowIndex" }, host: { properties: { "class.k-grid-footer": "this.footerClass" } }, ngImport: i0, template: `
+FooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FooterComponent, selector: "[kendoGridFooter]", inputs: { columns: "columns", groups: "groups", detailTemplate: "detailTemplate", scrollable: "scrollable", lockedColumnsCount: "lockedColumnsCount", logicalRowIndex: "logicalRowIndex" }, host: { properties: { "class.k-grid-footer": "this.footerClass", "class.k-table-tfoot": "this.hostClass" } }, ngImport: i0, template: `
     <ng-container>
         <tr
             [class.k-footer-template]="true"
@@ -147,4 +148,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], footerClass: [{
                 type: HostBinding,
                 args: ['class.k-grid-footer']
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class.k-table-tfoot']
             }] } });