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

package/fesm2015/progress-kendo-angular-pager.mjs

@@ -0,0 +1,1941 @@
+/**-----------------------------------------------------------------------------------------
+* 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, 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 i6 from '@progress/kendo-angular-common';
+import { Keys, anyChanged, ResizeSensorComponent, EventsModule, ResizeSensorModule } from '@progress/kendo-angular-common';
+import * as i3$1 from '@progress/kendo-angular-dropdowns';
+import { DropDownListModule } from '@progress/kendo-angular-dropdowns';
+import * as i5 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i3$2 from '@progress/kendo-angular-inputs';
+import { NumericTextBoxComponent, NumericTextBoxModule } from '@progress/kendo-angular-inputs';
+import { validatePackage } from '@progress/kendo-licensing';
+
+/**
+ * @hidden
+ */
+class PreventableEvent {
+    constructor() {
+        this.prevented = false;
+    }
+    /**
+     * Prevents the default action for a specified event.
+     * In this way, the source component suppresses the built-in behavior that follows the event.
+     */
+    preventDefault() {
+        this.prevented = true;
+    }
+    /**
+     * If the event is prevented by any of its subscribers, returns `true`.
+     *
+     * @returns `true` if the default action was prevented. Otherwise, returns `false`.
+     */
+    isDefaultPrevented() {
+        return this.prevented;
+    }
+}
+
+/**
+ * Arguments for the `pageSizeChange` event. The `pageSizeChange` event fires when the page size
+ * is changed from the UI. If you cancel the event, the change is prevented.
+ */
+class PageSizeChangeEvent extends PreventableEvent {
+    /**
+     * Constructs the event arguments for the `pageSizeChange` event.
+     * @param newPageSize - The newly selected page size.
+     * @hidden
+     */
+    constructor(newPageSize) {
+        super();
+        this.newPageSize = newPageSize;
+    }
+}
+
+/**
+ * @hidden
+ */
+class Messages extends ComponentMessages {
+}
+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
+                    selector: 'kendoPagerMessages'
+                }]
+        }], propDecorators: { firstPage: [{
+                type: Input
+            }], lastPage: [{
+                type: Input
+            }], previousPage: [{
+                type: Input
+            }], nextPage: [{
+                type: Input
+            }], page: [{
+                type: Input
+            }], pageNumberInputTitle: [{
+                type: Input
+            }], itemsPerPage: [{
+                type: Input
+            }], of: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], selectPage: [{
+                type: Input
+            }], inputLabel: [{
+                type: Input
+            }] } });
+
+/**
+ * Custom component messages override default component messages
+ * ([see example]({% slug pager_globalization %}#toc-messages)).
+ */
+class CustomMessagesComponent extends Messages {
+    constructor(service) {
+        super();
+        this.service = service;
+    }
+    get override() {
+        return true;
+    }
+}
+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: "13.3.11", ngImport: i0, type: CustomMessagesComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [
+                        {
+                            provide: Messages,
+                            useExisting: forwardRef(() => CustomMessagesComponent)
+                        }
+                    ],
+                    selector: 'kendo-datapager-messages',
+                    template: ``
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
+
+/**
+ * @hidden
+ */
+class LocalizedMessagesDirective extends Messages {
+    constructor(service) {
+        super();
+        this.service = service;
+    }
+}
+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: "13.3.11", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    providers: [
+                        {
+                            provide: Messages,
+                            useExisting: forwardRef(() => LocalizedMessagesDirective)
+                        }
+                    ],
+                    selector: '[kendoDataPagerLocalizedMessages]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
+
+/**
+ * @hidden
+ */
+class PagerContextService {
+    constructor() {
+        this.changes = new Subject();
+        this.pageChange = new Subject();
+        this.pageSizeChange = new Subject();
+    }
+    get currentPage() {
+        return this.skip / this.pageSize;
+    }
+    notifyChanges(changes) {
+        this.total = changes.total;
+        this.pageSize = changes.pageSize;
+        this.skip = changes.skip;
+        this.changes.next(changes);
+    }
+    changePage(page) {
+        this.pageChange.next({ skip: page * this.pageSize, take: this.pageSize });
+    }
+    changePageSize(event) {
+        this.pageSizeChange.next(event);
+    }
+    nextPage() {
+        const nextPage = this.currentPage + 1;
+        if (nextPage * this.pageSize <= this.total) {
+            this.changePage(nextPage);
+        }
+    }
+    prevPage() {
+        const prevPage = this.currentPage - 1;
+        if (prevPage * this.pageSize >= 0) {
+            this.changePage(prevPage);
+        }
+    }
+}
+
+/**
+ * @hidden
+ */
+class PagerElementComponent {
+    constructor(localization, pagerContext, cd) {
+        this.localization = localization;
+        this.pagerContext = pagerContext;
+        this.cd = cd;
+        this.total = this.pagerContext.total;
+        this.skip = this.pagerContext.skip;
+        this.pageSize = this.pagerContext.pageSize;
+    }
+    /**
+     * @hidden
+     *
+     * @readonly
+     * @type {number}
+     * @memberOf PagerElementComponent
+     */
+    get currentPage() {
+        return Math.floor((this.skip || 0) / this.pageSize) + 1;
+    }
+    /**
+     * @hidden
+     *
+     * @readonly
+     * @type {number}
+     * @memberOf PagerElementComponent
+     */
+    get totalPages() {
+        return Math.ceil((this.total || 0) / this.pageSize);
+    }
+    /**
+     * @hidden
+     *
+     * @param {string} key
+     * @returns {string}
+     *
+     * @memberOf PagerElementComponent
+     */
+    textFor(key) {
+        return this.localization.get(key);
+    }
+    /**
+     * @hidden
+     *
+     * @param {number} page
+     *
+     * @memberOf PagerElementComponent
+     */
+    changePage(page) {
+        this.pagerContext.changePage(page);
+        return false;
+    }
+    /**
+     * @hidden
+     *
+     * @memberOf PagerElementComponent
+     */
+    ngOnInit() {
+        this.subscriptions = this.pagerContext.changes.subscribe(this.onChanges.bind(this));
+        this.subscriptions.add(this.localization.changes.subscribe(() => this.cd.markForCheck()));
+    }
+    ngOnDestroy() {
+        if (this.subscriptions) {
+            this.subscriptions.unsubscribe();
+        }
+    }
+}
+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',
+                    template: ``
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: PagerContextService }, { type: i0.ChangeDetectorRef }]; } });
+
+/**
+ * @hidden
+ */
+const DEFAULT_PAGE_SIZE_VALUES = [5, 10, 20];
+/**
+ * @hidden
+ */
+const focusableDirectiveSelector = '[kendoPagerFocusable]';
+/**
+ * @hidden
+ */
+const getAllFocusableChildren = (parent) => {
+    return parent.querySelectorAll(focusableDirectiveSelector);
+};
+/**
+ * @hidden
+ */
+const focusableSelector = [
+    'a[href]:not([disabled])',
+    'area[href]:not([disabled])',
+    'input:not([disabled])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    'button',
+    'iframe:not([disabled])',
+    'object:not([disabled])',
+    'embed:not([disabled])',
+    '*[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
+ */
+class PagerNavigationService {
+    constructor() {
+        this.isNavigable = false;
+        this.innerNavigationChange = new Subject();
+    }
+    toggleInnerNavigation(value) {
+        this.innerNavigationChange.next(value);
+    }
+    keepFocusWithinComponent(wrapper, target, event) {
+        const [firstFocusable, lastFocusable] = this.getFirstAndLastFocusable(wrapper);
+        const tabAfterLastFocusable = !event.shiftKey && target === lastFocusable;
+        const shiftTabAfterFirstFocusable = event.shiftKey && target === firstFocusable;
+        if (tabAfterLastFocusable) {
+            event.preventDefault();
+            firstFocusable.focus();
+        }
+        if (shiftTabAfterFirstFocusable) {
+            event.preventDefault();
+            lastFocusable.focus();
+        }
+    }
+    getFirstAndLastFocusable(wrapper) {
+        const all = getAllFocusableChildren(wrapper);
+        const firstFocusable = all.length > 0 ? all[0] : parent;
+        const lastFocusable = all.length > 0 ? all[all.length - 1] : parent;
+        return [firstFocusable, lastFocusable];
+    }
+}
+
+/**
+ * Place the directive on custom focusable elements in the [`kendoDataPagerTemplate`]({% slug api_pager_pagertemplatedirective %}) to include them in the built-in Pager keyboard navigation.
+ */
+class PagerFocusableDirective {
+    constructor(navigationService, element, renderer) {
+        this.navigationService = navigationService;
+        this.element = element;
+        this.renderer = renderer;
+        this.subscriptions = new Subscription();
+    }
+    ngOnInit() {
+        this.subscriptions.add(this.navigationService.innerNavigationChange.subscribe(this.innerNavigationChange.bind(this)));
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+    }
+    get nativeElement() {
+        return this.element.nativeElement;
+    }
+    innerNavigationChange(value) {
+        if (!this.navigationService.isNavigable) {
+            return;
+        }
+        const index = value ? '0' : '-1';
+        if (this.nativeElement.matches(focusableSelector)) {
+            this.renderer.setAttribute(this.nativeElement, 'tabindex', index);
+        }
+        const focusableElements = this.nativeElement.querySelectorAll(focusableSelector);
+        focusableElements.forEach(el => {
+            this.renderer.setAttribute(el, 'tabindex', index);
+        });
+    }
+}
+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]',
+                    exportAs: 'kendoPagerFocusable'
+                }]
+        }], ctorParameters: function () { return [{ type: PagerNavigationService }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; } });
+
+// eslint-disable no-access-missing-member
+/**
+ * Displays buttons for navigating to the first and to the previous page ([see example]({% slug pager_settings %})).
+ */
+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
+     *
+     * @readonly
+     * @type {boolean}
+     * @memberOf PagerPrevButtonsComponent
+     */
+    get disabled() {
+        return this.currentPage === 1 || !this.total;
+    }
+    onChanges({ total, skip, pageSize }) {
+        this.total = total;
+        this.skip = skip;
+        this.pageSize = pageSize;
+        this.cd.markForCheck();
+    }
+}
+PagerPrevButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerPrevButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: 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" 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')"
+            (click)="currentPage !== 1 ? changePage(0) : false">
+        </button>
+        <button
+            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')"
+            (click)="currentPage !== 1 ? changePage(currentPage-2) : false">
+        </button>
+    `, 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" 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')"
+            (click)="currentPage !== 1 ? changePage(0) : false">
+        </button>
+        <button
+            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')"
+            (click)="currentPage !== 1 ? changePage(currentPage-2) : false">
+        </button>
+    `
+                }]
+        }], 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 %})).
+ */
+class PagerPageSizesComponent extends PagerElementComponent {
+    constructor(localization, cd, pagerContext, element, ngZone) {
+        super(localization, pagerContext, cd);
+        this.pagerContext = pagerContext;
+        this.element = element;
+        this.ngZone = ngZone;
+        /**
+         * Specifies the padding of the dropdown.
+         *
+         * The possible values are:
+         * * `small`
+         * * `medium` (default)
+         * * `large`
+         * * `none`
+         */
+        this.size = DEFAULT_SIZE;
+        this._pageSizes = [];
+    }
+    /**
+     * The page sizes collection. Can contain numbers and [PageSizeItem]({% slug api_pager_pagesizeitem %}) objects.
+     *
+     * @example
+     *
+     * ```ts-preview
+     * _@Component({
+     *    selector: 'my-app',
+     *    template: `
+     *        <div *ngFor="let item of pagedData" style="border: 1px solid black; padding: 10px;">
+     *            <span>{{item.ProductID}}. </span>
+     *            <span>{{item.ProductName}}</span>
+     *        </div>
+     *        <kendo-datapager
+     *             [skip]="skip"
+     *             [pageSize]="pageSize"
+     *             [total]="total"
+     *             (pageChange)="onPageChange($event)">
+     *           <ng-template kendoDataPagerTemplate>
+     *               <kendo-datapager-page-sizes [pageSizes]="pagesizes"></kendo-datapager-page-sizes>
+     *           </ng-template>
+     *        </kendo-datapager>
+     *    `
+     * })
+     * class AppComponent {
+     *    public data: any[] = products;
+     *    public pagedData = [];
+     *    public skip = 0;
+     *    public pageSize = 2;
+     *    public total = products.length;
+     *    public pagesizes = [{text: 'One', value: 1}, {text: 'Two', value: 2}, {text: 'All', value : 'all'}];
+     *
+     *    public ngOnInit() {
+     *        this.pageData();
+     *    }
+     *
+     *    public onPageChange(e) {
+     *        this.skip = e.skip;
+     *        this.pageSize = e.take;
+     *        this.pageData();
+     *    }
+     *
+     *    private pageData() {
+     *        this.pagedData = this.data.slice(this.skip, this.skip + this.pageSize);
+     *    }
+     * }
+     *
+     * const products = [{
+     *   'ProductID' : 1,
+     *   'ProductName' : "Chai",
+     *   'SupplierID' : 1,
+     *   'CategoryID' : 1,
+     *   'QuantityPerUnit' : "10 boxes x 20 bags",
+     *   'UnitPrice' : 18.0000,
+     *   'UnitsInStock' : 39,
+     *   'UnitsOnOrder' : 0,
+     *   'ReorderLevel' : 10,
+     *   'Discontinued' : false
+     *
+     * }, {
+     *   'ProductID' : 2,
+     *   'ProductName' : "Chang",
+     *   'SupplierID' : 1,
+     *   'CategoryID' : 1,
+     *   'QuantityPerUnit' : "24 - 12 oz bottles",
+     *   'UnitPrice' : 19.0000,
+     *   'UnitsInStock' : 17,
+     *   'UnitsOnOrder' : 40,
+     *   'ReorderLevel' : 25,
+     *   'Discontinued' : false
+     * }, {
+     *   'ProductID' : 3,
+     *   'ProductName' : "Aniseed Syrup",
+     *   'SupplierID' : 1,
+     *   'CategoryID' : 2,
+     *   'QuantityPerUnit' : "12 - 550 ml bottles",
+     *   'UnitPrice' : 10.0000,
+     *   'UnitsInStock' : 13,
+     *   'UnitsOnOrder' : 70,
+     *   'ReorderLevel' : 25,
+     *   'Discontinued' : false
+     * }, {
+     *   'ProductID' : 4,
+     *   'ProductName' : "Chef Anton\'s Cajun Seasoning",
+     *   'SupplierID' : 2,
+     *  'CategoryID' : 2,
+     *   'QuantityPerUnit' : "48 - 6 oz jars",
+     *   'UnitPrice' : 22.0000,
+     *   'UnitsInStock' : 53,
+     *   'UnitsOnOrder' : 0,
+     *   'ReorderLevel' : 0,
+     *   'Discontinued' : false
+     * }, {
+     *   'ProductID' : 5,
+     *   'ProductName' : "Chef Anton\'s Gumbo Mix",
+     *   'SupplierID' : 2,
+     *   'CategoryID' : 2,
+     *   'QuantityPerUnit' : "36 boxes",
+     *   'UnitPrice' : 21.3500,
+     *   'UnitsInStock' : 0,
+     *   'UnitsOnOrder' : 0,
+     *   'ReorderLevel' : 0,
+     *   'Discontinued' : true
+     * }, {
+     *   'ProductID' : 6,
+     *   'ProductName' : "Grandma\'s Boysenberry Spread",
+     *   'SupplierID' : 3,
+     *   'CategoryID' : 2,
+     *   'QuantityPerUnit' : "12 - 8 oz jars",
+     *   'UnitPrice' : 25.0000,
+     *   'UnitsInStock' : 120,
+     *   'UnitsOnOrder' : 0,
+     *   'ReorderLevel' : 25,
+     *   'Discontinued' : false
+     * }];
+     * ```
+     *
+     */
+    set pageSizes(pageSizes) {
+        let normalizedItems = [];
+        if (Array.isArray(pageSizes)) {
+            pageSizes.forEach(item => {
+                if (typeof item === 'number') {
+                    normalizedItems.push({
+                        text: item.toString(),
+                        value: item
+                    });
+                }
+                else {
+                    normalizedItems.push(item);
+                }
+            });
+        }
+        if (this.pageSize && !normalizedItems.some(item => item.value === this.pageSize)) {
+            normalizedItems = [{ text: this.pageSize.toString(), value: this.pageSize }, ...normalizedItems];
+        }
+        this._pageSizes = normalizedItems;
+    }
+    get pageSizes() {
+        return this._pageSizes;
+    }
+    /**
+     * @hidden
+     *
+     * @readonly
+     */
+    get classes() {
+        return true;
+    }
+    ngAfterViewInit() {
+        this.dropDownList.wrapper.nativeElement.setAttribute('aria-label', this.textFor('itemsPerPage'));
+        this.ngZone.runOutsideAngular(() => {
+            this.element.nativeElement.addEventListener('keydown', this.keyDownHandler.bind(this), true);
+        });
+    }
+    ngOnDestroy() {
+        this.element.nativeElement.removeEventListener('keydown', this.keyDownHandler);
+    }
+    /**
+     * @hidden
+     */
+    pageSizeChange(value, dropdownlist) {
+        const event = new PageSizeChangeEvent(value);
+        this.pagerContext.changePageSize(event);
+        if (event.isDefaultPrevented()) {
+            dropdownlist.writeValue(this.pageSize);
+        }
+    }
+    onChanges({ total, skip, pageSize }) {
+        this.total = total;
+        this.skip = skip;
+        this.pageSize = typeof pageSize === 'number' ? pageSize : this.total;
+        this.cd.markForCheck();
+    }
+    keyDownHandler(ev) {
+        if (ev.keyCode === Keys.Escape && this.dropDownList.isOpen) {
+            ev.stopPropagation();
+            this.dropDownList.toggle(false);
+        }
+    }
+}
+PagerPageSizesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "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"
+            [valuePrimitive]="true"
+            [value]="pageSize"
+            (valueChange)="pageSizeChange($event, dropdownlist)"></kendo-dropdownlist>
+        {{ textFor('itemsPerPage') }}
+    `, 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"
+            [valuePrimitive]="true"
+            [value]="pageSize"
+            (valueChange)="pageSizeChange($event, dropdownlist)"></kendo-dropdownlist>
+        {{ textFor('itemsPerPage') }}
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: PagerContextService }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { dropDownList: [{
+                type: ViewChild,
+                args: ['dropdownlist', { static: true }]
+            }], pageSizes: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], classes: [{
+                type: HostBinding,
+                args: ["class.k-pager-sizes"]
+            }] } });
+
+/**
+ * Represents the pager template which helps to customize the pager appearance. To define a pager
+ * template, nest an `<ng-template>` tag with the `kendoDataPagerTemplate` directive inside `<kendo-datapager>`.
+ *
+ * The template context provides the following fields:
+ * * `currentPage`&mdash;The index of the displayed page.
+ * * `pageSize`&mdash;The value of the current `pageSize`.
+ * * `skip`&mdash;The current skip value.
+ * * `total`&mdash;The total number of records.
+ * * `totalPages`&mdash;The total number of available pages.
+ *
+ * @example
+ * ```ts-preview
+ *
+ * _@Component({
+ *     selector: 'my-app',
+ *     template: `
+ *       <kendo-datapager [total]="total" [pageSize]="pageSize" [skip]="skip" (pageChange)="onPageChange($event)">
+ *           <ng-template kendoDataPagerTemplate let-totalPages="totalPages" let-currentPage="currentPage">
+ *               <kendo-datapager-prev-buttons></kendo-datapager-prev-buttons>
+ *               <kendo-datapager-numeric-buttons [buttonCount]="10"></kendo-datapager-numeric-buttons>
+ *               <kendo-datapager-next-buttons></kendo-datapager-next-buttons>
+ *               <kendo-datapager-info></kendo-datapager-info>
+ *               Current page: {{currentPage}}
+ *           </ng-template>
+ *        </kendo-datapager>
+ *     `
+ * })
+ *
+ * class AppComponent {
+ *     public skip = 0;
+ *     public pageSize = 10;
+ *     public total = 100;
+ *
+ *     public onPageChange(e: any): void {
+ *         this.skip = e.skip;
+ *         this.pageSize = e.take;
+ *     }
+ * }
+ *
+ * ```
+ */
+class PagerTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+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]'
+                }]
+        }], ctorParameters: function () {
+        return [{ type: i0.TemplateRef, decorators: [{
+                        type: Optional
+                    }] }];
+    } });
+
+/**
+ * Displays numeric buttons to enable navigation between the pages.
+ */
+class PagerNumericButtonsComponent extends PagerElementComponent {
+    constructor(localization, cd, pagerContext, renderer) {
+        super(localization, pagerContext, cd);
+        this.pagerContext = pagerContext;
+        this.renderer = renderer;
+        this._size = DEFAULT_SIZE;
+    }
+    /**
+     * Specifies the padding of the numeric buttons.
+     *
+     * The possible values are:
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
+     */
+    set size(size) {
+        const newSize = size ? size : DEFAULT_SIZE;
+        this.handleClasses(newSize, 'size');
+        this._size = newSize;
+    }
+    get size() {
+        return this._size;
+    }
+    /**
+     * @hidden
+     *
+     * @readonly
+     * @type {number[]}
+     * @memberOf PagerNumericButtonsComponent
+     */
+    get buttons() {
+        const result = [];
+        for (let idx = this.start; idx <= this.end; idx++) {
+            result.push(idx);
+        }
+        return result;
+    }
+    /**
+     * @hidden
+     */
+    get end() {
+        return Math.min((this.start + this.buttonCount) - 1, this.totalPages);
+    }
+    /**
+     * @hidden
+     */
+    get start() {
+        const page = this.currentPage;
+        const buttonCount = this.buttonCount;
+        if (page > buttonCount) {
+            const reminder = (page % buttonCount);
+            return (reminder === 0) ? (page - buttonCount) + 1 : (page - reminder) + 1;
+        }
+        return 1;
+    }
+    ngAfterViewInit() {
+        this.handleClasses(this.size, 'size');
+    }
+    /**
+     * @hidden
+     */
+    pageLabel(num) {
+        const pageText = this.textFor('page');
+        if (pageText) {
+            return pageText + ' ' + num;
+        }
+        return num.toString();
+    }
+    /**
+     * @hidden
+     */
+    onSelectChange(e) {
+        const target = e.target;
+        const valueAsNumber = Number(target.value);
+        if (!Number.isNaN(valueAsNumber)) {
+            this.changePage(valueAsNumber - 1);
+        }
+        else {
+            if (target.value === 'previousButtons') {
+                this.changePage(this.start - 2);
+            }
+            else {
+                this.changePage(this.end);
+            }
+        }
+    }
+    onChanges({ total, skip, pageSize }) {
+        this.total = total;
+        this.skip = skip;
+        this.pageSize = pageSize;
+        this.cd.markForCheck();
+    }
+    get pageChooserLabel() {
+        return this.textFor('selectPage');
+    }
+    handleClasses(value, input) {
+        var _a;
+        const elem = (_a = this.selectElement) === null || _a === void 0 ? void 0 : _a.nativeElement;
+        const classes = getStylingClasses('picker', input, this[input], value);
+        if (!elem) {
+            return;
+        }
+        if (classes.toRemove) {
+            this.renderer.removeClass(elem, classes.toRemove);
+        }
+        if (classes.toAdd) {
+            this.renderer.addClass(elem, classes.toAdd);
+        }
+    }
+}
+PagerNumericButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerNumericButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons", inputs: { buttonCount: "buttonCount", size: "size" }, viewQueries: [{ propertyName: "selectElement", first: true, predicate: ["select"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
+        <select kendoPagerFocusable #select
+            class="k-dropdown-list k-dropdown k-picker k-rounded-md"
+            [attr.title]="pageChooserLabel"
+            [attr.aria-label]="pageChooserLabel"
+            (change)="onSelectChange($event)">
+            <option *ngIf="start > 1"
+                value="previousButtons"
+                [selected]="false"
+                [attr.aria-label]="pageLabel(start - 1)">...
+            </option>
+            <option *ngFor="let num of buttons"
+                [value]="num.toString()"
+                [selected]="num === currentPage"
+                [attr.aria-label]="pageLabel(num)"
+                [attr.aria-current]="currentPage === num ? 'page' : undefined"
+                [ngClass]="{'k-selected':currentPage === num}">
+                {{num}}
+            </option>
+            <option *ngIf="end < totalPages"
+                value="nextButtons"
+                [selected]="false"
+                [attr.aria-label]="pageLabel(end + 1)">...
+            </option>
+        </select>
+        <div [ngClass]="{'k-pager-numbers': true}">
+            <button *ngIf="start > 1"
+                type="button"
+                kendoPagerFocusable
+                kendoButton
+                [size]="size"
+                fillMode="flat"
+                themeColor="primary"
+                rounded="none"
+                [attr.aria-label]="pageLabel(start - 1)"
+                [attr.title]="pageLabel(start - 1)"
+                (click)="changePage(start - 2)">...</button>
+            <button *ngFor="let num of buttons"
+                type="button"
+                kendoPagerFocusable
+                kendoButton
+                [size]="size"
+                fillMode="flat"
+                themeColor="primary"
+                rounded="none"
+                [attr.aria-label]="pageLabel(num)"
+                [attr.title]="pageLabel(num)"
+                [attr.aria-current]="currentPage === num ? 'page' : undefined"
+                [selected]="currentPage === num"
+                (click)="changePage(num - 1)">
+                {{num}}
+            </button>
+            <button *ngIf="end < totalPages"
+                type="button"
+                kendoPagerFocusable
+                kendoButton
+                [size]="size"
+                fillMode="flat"
+                themeColor="primary"
+                rounded="none"
+                [attr.aria-label]="pageLabel(end + 1)"
+                [attr.title]="pageLabel(end + 1)"
+                (click)="changePage(end)">...</button>
+        </div>
+    `, isInline: true, components: [{ type: i3.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerNumericButtonsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: 'kendo-datapager-numeric-buttons',
+                    template: `
+        <select kendoPagerFocusable #select
+            class="k-dropdown-list k-dropdown k-picker k-rounded-md"
+            [attr.title]="pageChooserLabel"
+            [attr.aria-label]="pageChooserLabel"
+            (change)="onSelectChange($event)">
+            <option *ngIf="start > 1"
+                value="previousButtons"
+                [selected]="false"
+                [attr.aria-label]="pageLabel(start - 1)">...
+            </option>
+            <option *ngFor="let num of buttons"
+                [value]="num.toString()"
+                [selected]="num === currentPage"
+                [attr.aria-label]="pageLabel(num)"
+                [attr.aria-current]="currentPage === num ? 'page' : undefined"
+                [ngClass]="{'k-selected':currentPage === num}">
+                {{num}}
+            </option>
+            <option *ngIf="end < totalPages"
+                value="nextButtons"
+                [selected]="false"
+                [attr.aria-label]="pageLabel(end + 1)">...
+            </option>
+        </select>
+        <div [ngClass]="{'k-pager-numbers': true}">
+            <button *ngIf="start > 1"
+                type="button"
+                kendoPagerFocusable
+                kendoButton
+                [size]="size"
+                fillMode="flat"
+                themeColor="primary"
+                rounded="none"
+                [attr.aria-label]="pageLabel(start - 1)"
+                [attr.title]="pageLabel(start - 1)"
+                (click)="changePage(start - 2)">...</button>
+            <button *ngFor="let num of buttons"
+                type="button"
+                kendoPagerFocusable
+                kendoButton
+                [size]="size"
+                fillMode="flat"
+                themeColor="primary"
+                rounded="none"
+                [attr.aria-label]="pageLabel(num)"
+                [attr.title]="pageLabel(num)"
+                [attr.aria-current]="currentPage === num ? 'page' : undefined"
+                [selected]="currentPage === num"
+                (click)="changePage(num - 1)">
+                {{num}}
+            </button>
+            <button *ngIf="end < totalPages"
+                type="button"
+                kendoPagerFocusable
+                kendoButton
+                [size]="size"
+                fillMode="flat"
+                themeColor="primary"
+                rounded="none"
+                [attr.aria-label]="pageLabel(end + 1)"
+                [attr.title]="pageLabel(end + 1)"
+                (click)="changePage(end)">...</button>
+        </div>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: PagerContextService }, { type: i0.Renderer2 }]; }, propDecorators: { selectElement: [{
+                type: ViewChild,
+                args: ['select', { read: ElementRef }]
+            }], buttonCount: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }] } });
+
+// eslint-disable  no-access-missing-member
+/**
+ * Displays buttons for navigating to the next and to the last page ([see example]({% slug pager_settings %})).
+ */
+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
+     *
+     * @readonly
+     * @type {boolean}
+     * @memberOf PagerNextButtonsComponent
+     */
+    get disabled() {
+        return this.currentPage === this.totalPages || !this.total;
+    }
+    onChanges({ total, skip, pageSize }) {
+        this.total = total;
+        this.skip = skip;
+        this.pageSize = pageSize;
+        this.cd.markForCheck();
+    }
+}
+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')"
+            (click)="currentPage !== totalPages ? changePage(currentPage) : false">
+        </button>
+        <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')"
+            (click)="currentPage !== totalPages ? changePage(totalPages-1) : false">
+        </button>
+    `, 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 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')"
+            (click)="currentPage !== totalPages ? changePage(currentPage) : false">
+        </button>
+        <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')"
+            (click)="currentPage !== totalPages ? changePage(totalPages-1) : false">
+        </button>
+    `
+                }]
+        }], 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.
+ */
+class PagerInputComponent extends PagerElementComponent {
+    constructor(localization, pagerContext, zone, cd, renderer) {
+        super(localization, pagerContext, cd);
+        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
+         *
+         * @param {string} value
+         *
+         * @memberOf PagerInputComponent
+         */
+        this.handleKeyDown = (event) => {
+            const incomingValue = this.numericInput.value || this.current;
+            // eslint-disable import/no-deprecated
+            if (event.keyCode === Keys.Enter) {
+                event.preventDefault();
+                if (incomingValue !== this.current) {
+                    this.zone.run(() => {
+                        this.changePage(incomingValue - 1);
+                    });
+                }
+            }
+        };
+        /**
+         * @hidden
+         *
+         * @param {string} value
+         *
+         * @memberOf PagerInputComponent
+         */
+        this.handleBlur = () => {
+            const inputValue = this.numericInput.value;
+            if (!inputValue) {
+                this.numericInput.writeValue(this.current);
+                return;
+            }
+            if (inputValue !== this.current) {
+                this.zone.run(() => {
+                    this.changePage(inputValue - 1);
+                });
+            }
+        };
+    }
+    /**
+     * @hidden
+     */
+    get current() {
+        return this.hasPages ? this.currentPage : 0;
+    }
+    /**
+     * @hidden
+     */
+    get hasPages() {
+        return this.totalPages !== 0;
+    }
+    ngAfterViewInit() {
+        const innerNumericInput = this.numericInput.numericInput.nativeElement;
+        this.renderer.setAttribute(innerNumericInput, 'aria-label', this.textFor('inputLabel'));
+    }
+    onChanges({ total, skip, pageSize }) {
+        this.total = total;
+        this.skip = skip;
+        this.pageSize = pageSize;
+        this.cd.markForCheck();
+    }
+}
+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"
+            [max]="totalPages"
+            [autoCorrect]="true"
+            [title]="textFor('pageNumberInputTitle')"
+            [kendoEventsOutsideAngular]="{
+                keydown: handleKeyDown,
+                focusout: handleBlur
+            }">
+        </kendo-numerictextbox>
+        {{textFor('of')}} {{totalPages}}
+     </span>
+    `, 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',
+                    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"
+            [max]="totalPages"
+            [autoCorrect]="true"
+            [title]="textFor('pageNumberInputTitle')"
+            [kendoEventsOutsideAngular]="{
+                keydown: handleKeyDown,
+                focusout: handleBlur
+            }">
+        </kendo-numerictextbox>
+        {{textFor('of')}} {{totalPages}}
+     </span>
+    `
+                }]
+        }], 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
+/**
+ * Displays information about the current page and the total number of records ([see example]({% slug pager_settings %})).
+ */
+class PagerInfoComponent extends PagerElementComponent {
+    constructor(localization, cd, pagerContext) {
+        super(localization, pagerContext, cd);
+        this.pagerContext = pagerContext;
+    }
+    /**
+     * @hidden
+     *
+     * @readonly
+     * @type {number}
+     * @memberOf PagerInfoComponent
+     */
+    get maxItems() {
+        return Math.min(this.currentPage * this.pageSize, this.total);
+    }
+    /**
+     * @hidden
+     *
+     * @readonly
+     * @type {number}
+     * @memberOf PagerInfoComponent
+     */
+    get currentPageText() {
+        return this.total ?
+            (this.currentPage - 1) * this.pageSize + 1 :
+            0;
+    }
+    /**
+     * @hidden
+     *
+     * @readonly
+     * @type {boolean}
+     * @memberOf PagerInfoComponent
+     */
+    get classes() {
+        return true;
+    }
+    onChanges({ total, skip, pageSize }) {
+        this.total = total;
+        this.skip = skip;
+        this.pageSize = pageSize;
+        this.cd.markForCheck();
+    }
+}
+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,
+                    selector: 'kendo-datapager-info',
+                    template: `{{currentPageText}} - {{maxItems}} {{textFor('of')}} {{total}} {{textFor('items')}}`
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: PagerContextService }]; }, propDecorators: { classes: [{
+                type: HostBinding,
+                args: ["class.k-pager-info"]
+            }] } });
+
+/**
+ * @hidden
+ */
+const RESPONSIVE_BREAKPOINT_MEDIUM = 600;
+/**
+ * @hidden
+ */
+const RESPONSIVE_BREAKPOINT_LARGE = 768;
+
+/**
+ * @hidden
+ */
+const packageMetadata = {
+    name: '@progress/kendo-angular-pager',
+    productName: 'Kendo UI for Angular',
+    productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
+    publishDate: 1672320914,
+    version: '',
+    licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
+};
+
+class PagerComponent {
+    constructor(pagerContext, element, localization, renderer, ngZone, navigationService) {
+        this.pagerContext = pagerContext;
+        this.element = element;
+        this.localization = localization;
+        this.renderer = renderer;
+        this.ngZone = ngZone;
+        this.navigationService = navigationService;
+        /**
+         * Represents the total number of data items in the collection.
+         */
+        this.total = 0;
+        /**
+         * Defines the number of data items to be skipped.
+         */
+        this.skip = 0;
+        /**
+         * Sets the maximum numeric buttons count before the buttons are collapsed.
+         */
+        this.buttonCount = 10;
+        /**
+         * Toggles the information about the current page and the total number of records.
+         */
+        this.info = true;
+        /**
+         * Defines the type of the pager.
+         */
+        this.type = 'numeric';
+        /**
+         * Toggles the **Previous** and **Next** buttons.
+         */
+        this.previousNext = true;
+        /**
+         * Fires when the current page of the Pager is changed ([see example]({% slug overview_pager %}#toc-basic-usage)).
+         * You have to handle the event yourself and page the data.
+         */
+        this.pageChange = new EventEmitter();
+        /**
+         * Fires when the page size of the Pager is changed.
+         * You have to handle the event yourself and page the data.
+         * If the event is prevented, the page size will remain unchanged ([see example]({% slug pager_events %})).
+         */
+        this.pageSizeChange = new EventEmitter();
+        this.pagerClass = true;
+        this.widgetRole = 'application';
+        this.roleDescription = 'pager';
+        this.keyShortcuts = 'Enter ArrowRight ArrowLeft';
+        this.hostTabindex = '0';
+        this.subscriptions = new Subscription();
+        this._templateContext = {};
+        this._pageSizeValues = DEFAULT_PAGE_SIZE_VALUES;
+        this.isInnerNavigationEnabled = false;
+        this._navigable = false;
+        this._size = DEFAULT_SIZE;
+        this.resizeHandler = () => {
+            if (this.template) {
+                return;
+            }
+            const element = this.element.nativeElement;
+            const width = element.offsetWidth;
+            if (width < RESPONSIVE_BREAKPOINT_MEDIUM) {
+                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-mobile-md');
+                element.classList.remove('k-pager-mobile-sm');
+            }
+            else {
+                element.classList.remove('k-pager-mobile-md');
+                element.classList.remove('k-pager-mobile-sm');
+            }
+        };
+        validatePackage(packageMetadata);
+        this.direction = localization.rtl ? 'rtl' : 'ltr';
+    }
+    /**
+     * Shows a dropdown for selecting the page size.
+     * When set to `true`, the dropdown will contain the default list of options - 5, 10, 20.
+     * To customize the list of options, set `pageSizeValues` to an array of the desired values.
+     * The array can contain numbers and [PageSizeItem]({% slug api_pager_pagesizeitem %}) objects.
+     */
+    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.
+     * @default false
+     */
+    set navigable(value) {
+        this._navigable = value;
+        this.navigationService.isNavigable = value;
+    }
+    ;
+    get navigable() {
+        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;
+    }
+    /**
+     * @hidden
+     */
+    focusHandler(ev) {
+        const isInnerNavigationEnabled = ev.target !== this.element.nativeElement;
+        this.navigationService.toggleInnerNavigation(isInnerNavigationEnabled);
+    }
+    get totalPages() {
+        return Math.ceil((this.total || 0) / this.pageSize);
+    }
+    get currentPage() {
+        return Math.floor((this.skip || 0) / this.pageSize) + 1;
+    }
+    get templateContext() {
+        const context = this._templateContext;
+        context.totalPages = this.totalPages;
+        context.total = this.total;
+        context.skip = this.skip;
+        context.pageSize = this.pageSize;
+        context.currentPage = this.currentPage;
+        return context;
+    }
+    ngOnInit() {
+        this.subscriptions.add(this.pagerContext.pageChange.subscribe(this.changePage.bind(this)));
+        this.subscriptions.add(this.pagerContext.pageSizeChange.subscribe(this.changePageSize.bind(this)));
+        this.subscriptions.add(this.resizeSensor.resize.subscribe(() => this.resizeHandler()));
+        this.subscriptions.add(this.localization.changes.subscribe(({ rtl }) => {
+            this.direction = rtl ? 'rtl' : 'ltr';
+        }));
+        this.subscriptions.add(this.navigationService.innerNavigationChange.subscribe(this.innerNavigationChange.bind(this)));
+        if (this.navigable) {
+            const wrapper = this.element.nativeElement;
+            this.ngZone.runOutsideAngular(() => {
+                this.subscriptions.add(this.renderer.listen(wrapper, 'keydown', this.keyDownHandler.bind(this)));
+            });
+        }
+    }
+    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)) {
+            this.pagerContext.notifyChanges({
+                pageSize: this.pageSize,
+                skip: this.skip,
+                total: this.total
+            });
+            this.renderer.setAttribute(this.element.nativeElement, 'aria-label', this.ariaLabel);
+        }
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+    }
+    /**
+     * @hidden
+     */
+    changePage(event) {
+        this.pageChange.emit(event);
+    }
+    /**
+     * @hidden
+     */
+    changePageSize(event) {
+        this.pageSizeChange.emit(event);
+        if (!event.isDefaultPrevented()) {
+            if (event.newPageSize === 'all') {
+                this.pageChange.emit({ skip: 0, take: this.total });
+            }
+            else {
+                this.pageChange.emit({ skip: 0, take: event.newPageSize });
+            }
+        }
+    }
+    /**
+     * @hidden
+     */
+    onPageSizeChange(event) {
+        this.pageSizeChange.emit(event);
+        if (!event.isDefaultPrevented()) {
+            this.pageChange.emit({ skip: this.skip, take: event.newPageSize });
+        }
+    }
+    textFor(value) {
+        return this.localization.get(value);
+    }
+    get ariaLabel() {
+        return `${this.textFor('page')} ${this.currentPage} ${this.textFor('of')} ${this.totalPages}`;
+    }
+    keyDownHandler(e) {
+        const target = e.target;
+        const wrapper = this.element.nativeElement;
+        const isArrowLeftOrPageUp = e.keyCode === Keys.ArrowLeft || e.keyCode === Keys.PageUp;
+        const isArrowRightOrPageDown = e.keyCode === Keys.ArrowRight || e.keyCode === Keys.PageDown;
+        const isEnter = e.keyCode === Keys.Enter;
+        const isHome = e.keyCode === Keys.Home;
+        const isEnd = e.keyCode === Keys.End;
+        const isEsc = e.keyCode === Keys.Escape;
+        const isTab = e.keyCode === Keys.Tab;
+        const isFirstPage = this.currentPage === 1;
+        const isLastPage = this.currentPage === this.totalPages;
+        this.ngZone.run(() => {
+            if (isHome) {
+                e.preventDefault();
+                !isFirstPage && this.pagerContext.changePage(0);
+            }
+            else if (isEnd) {
+                e.preventDefault();
+                !isLastPage && this.pagerContext.changePage(this.totalPages - 1);
+            }
+            else if (this.isInnerNavigationEnabled) {
+                if (isEsc) {
+                    this.navigationService.toggleInnerNavigation(false);
+                    wrapper.focus();
+                }
+                else if (isTab) {
+                    this.navigationService.keepFocusWithinComponent(wrapper, target, e);
+                }
+            }
+            else {
+                if (isArrowLeftOrPageUp) {
+                    e.preventDefault();
+                    !isFirstPage && this.pagerContext.prevPage();
+                }
+                else if (isArrowRightOrPageDown) {
+                    e.preventDefault();
+                    !isLastPage && this.pagerContext.nextPage();
+                }
+                else if (isEnter) {
+                    if (e.target !== wrapper) {
+                        return;
+                    }
+                    e.preventDefault();
+                    const [firstFocusable] = this.navigationService.getFirstAndLastFocusable(wrapper);
+                    this.navigationService.toggleInnerNavigation(true);
+                    firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
+                }
+            }
+        });
+    }
+    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: "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
+    ], queries: [{ propertyName: "template", first: true, predicate: PagerTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "resizeSensor", first: true, predicate: ResizeSensorComponent, descendants: true, static: true }], exportAs: ["kendoDataPager"], usesOnChanges: true, ngImport: i0, template: `
+        <ng-container kendoDataPagerLocalizedMessages
+            i18n-firstPage="kendo.pager.firstPage|The label for the first page button in the Pager"
+            firstPage="Go to the first page"
+
+            i18n-previousPage="kendo.pager.previousPage|The label for the previous page button in the Pager"
+            previousPage="Go to the previous page"
+
+            i18n-nextPage="kendo.pager.nextPage|The label for the next page button in the Pager"
+            nextPage="Go to the next page"
+
+            i18n-lastPage="kendo.pager.lastPage|The label for the last page button in the Pager"
+            lastPage="Go to the last page"
+
+            i18n-page="kendo.pager.page|The label before the current page number in the Pager"
+            page="Page"
+
+            i18n-of="kendo.pager.of|The label before the total pages number in the Pager"
+            of="of"
+
+            i18n-pageNumberInputTitle="kendo.pager.pageNumberInputTitle|The label for the pager input in the Pager"
+            pageNumberInputTitle="Page Number"
+
+            i18n-items="kendo.pager.items|The label after the total pages number in the Pager"
+            items="items"
+
+            i18n-itemsPerPage="kendo.pager.itemsPerPage|The label for the page size chooser in the Pager"
+            itemsPerPage="items per page"
+
+            i18n-selectPage="kendo.pager.selectPage|The text of the title and aria-label attributes applied to the page chooser in the Pager"
+            selectPage="Select page"
+
+            i18n-inputLabel="kendo.pager.inputLabel|The text of the aria-label attribute applied to the input element for entering the page number."
+            inputLabel="Type a page number"
+         >
+        </ng-container>
+        <ng-container
+            *ngIf="template?.templateRef"
+            [ngTemplateOutlet]="template.templateRef"
+            [ngTemplateOutletContext]="templateContext">
+        </ng-container>
+        <ng-container *ngIf="!template?.templateRef">
+            <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>
+        </ng-container>
+        <kendo-resize-sensor></kendo-resize-sensor>
+  `, 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',
+                    exportAs: 'kendoDataPager',
+                    providers: [
+                        LocalizationService,
+                        PagerContextService,
+                        PagerNavigationService
+                    ],
+                    template: `
+        <ng-container kendoDataPagerLocalizedMessages
+            i18n-firstPage="kendo.pager.firstPage|The label for the first page button in the Pager"
+            firstPage="Go to the first page"
+
+            i18n-previousPage="kendo.pager.previousPage|The label for the previous page button in the Pager"
+            previousPage="Go to the previous page"
+
+            i18n-nextPage="kendo.pager.nextPage|The label for the next page button in the Pager"
+            nextPage="Go to the next page"
+
+            i18n-lastPage="kendo.pager.lastPage|The label for the last page button in the Pager"
+            lastPage="Go to the last page"
+
+            i18n-page="kendo.pager.page|The label before the current page number in the Pager"
+            page="Page"
+
+            i18n-of="kendo.pager.of|The label before the total pages number in the Pager"
+            of="of"
+
+            i18n-pageNumberInputTitle="kendo.pager.pageNumberInputTitle|The label for the pager input in the Pager"
+            pageNumberInputTitle="Page Number"
+
+            i18n-items="kendo.pager.items|The label after the total pages number in the Pager"
+            items="items"
+
+            i18n-itemsPerPage="kendo.pager.itemsPerPage|The label for the page size chooser in the Pager"
+            itemsPerPage="items per page"
+
+            i18n-selectPage="kendo.pager.selectPage|The text of the title and aria-label attributes applied to the page chooser in the Pager"
+            selectPage="Select page"
+
+            i18n-inputLabel="kendo.pager.inputLabel|The text of the aria-label attribute applied to the input element for entering the page number."
+            inputLabel="Type a page number"
+         >
+        </ng-container>
+        <ng-container
+            *ngIf="template?.templateRef"
+            [ngTemplateOutlet]="template.templateRef"
+            [ngTemplateOutletContext]="templateContext">
+        </ng-container>
+        <ng-container *ngIf="!template?.templateRef">
+            <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>
+        </ng-container>
+        <kendo-resize-sensor></kendo-resize-sensor>
+  `
+                }]
+        }], ctorParameters: function () { return [{ type: PagerContextService }, { type: i0.ElementRef }, { type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: PagerNavigationService }]; }, propDecorators: { resizeSensor: [{
+                type: ViewChild,
+                args: [ResizeSensorComponent, { static: true }]
+            }], template: [{
+                type: ContentChild,
+                args: [PagerTemplateDirective, { static: false }]
+            }], total: [{
+                type: Input
+            }], skip: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], buttonCount: [{
+                type: Input
+            }], info: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], pageSizeValues: [{
+                type: Input
+            }], previousNext: [{
+                type: Input
+            }], navigable: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], pageChange: [{
+                type: Output
+            }], pageSizeChange: [{
+                type: Output
+            }], pagerClass: [{
+                type: HostBinding,
+                args: ['class.k-pager']
+            }], widgetRole: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], roleDescription: [{
+                type: HostBinding,
+                args: ['attr.aria-roledescription']
+            }], keyShortcuts: [{
+                type: HostBinding,
+                args: ['attr.aria-keyshortcuts']
+            }], hostTabindex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], dir: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], focusHandler: [{
+                type: HostListener,
+                args: ['focusin', ['$event']]
+            }] } });
+
+const importedModules = [
+    CommonModule,
+    NumericTextBoxModule,
+    DropDownListModule,
+    ButtonsModule,
+    EventsModule,
+    ResizeSensorModule
+];
+const INTERNAL_COMPONENTS = [
+    PagerComponent,
+    PagerPrevButtonsComponent,
+    PagerNextButtonsComponent,
+    PagerNumericButtonsComponent,
+    PagerInputComponent,
+    PagerInfoComponent,
+    PagerPageSizesComponent,
+    PagerTemplateDirective,
+    LocalizedMessagesDirective,
+    CustomMessagesComponent,
+    PagerFocusableDirective
+];
+const providers = [
+    {
+        provide: L10N_PREFIX,
+        useValue: 'kendo.pager'
+    }
+];
+/**
+ * @hidden
+ */
+class PagerModule {
+    static exports() {
+        return [
+            PagerComponent,
+            PagerPrevButtonsComponent,
+            PagerNextButtonsComponent,
+            PagerNumericButtonsComponent,
+            PagerInputComponent,
+            PagerInfoComponent,
+            PagerPageSizesComponent,
+            PagerTemplateDirective
+        ];
+    }
+}
+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,
+        PagerInputComponent,
+        PagerInfoComponent,
+        PagerPageSizesComponent,
+        PagerTemplateDirective,
+        LocalizedMessagesDirective,
+        CustomMessagesComponent,
+        PagerFocusableDirective], imports: [CommonModule,
+        NumericTextBoxModule,
+        DropDownListModule,
+        ButtonsModule,
+        EventsModule,
+        ResizeSensorModule], exports: [PagerComponent,
+        PagerPrevButtonsComponent,
+        PagerNextButtonsComponent,
+        PagerNumericButtonsComponent,
+        PagerInputComponent,
+        PagerInfoComponent,
+        PagerPageSizesComponent,
+        PagerTemplateDirective,
+        LocalizedMessagesDirective,
+        CustomMessagesComponent,
+        PagerFocusableDirective] });
+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],
+                    exports: [INTERNAL_COMPONENTS],
+                    imports: [...importedModules],
+                    providers: [providers]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CustomMessagesComponent, LocalizedMessagesDirective, PageSizeChangeEvent, PagerComponent, PagerFocusableDirective, PagerInfoComponent, PagerInputComponent, PagerModule, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerPageSizesComponent, PagerPrevButtonsComponent, PagerTemplateDirective };
+