@progress/kendo-angular-pager 4.0.6 → 4.1.0-dev.202211250852

package/fesm2015/kendo-angular-pager.js

@@ -3,18 +3,18 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { Directive, Input, forwardRef, Component, ChangeDetectionStrategy, ViewChild, HostBinding, Optional, EventEmitter, ContentChild, Output, NgModule } from '@angular/core';
+import { Directive, Input, forwardRef, Component, ChangeDetectionStrategy, ViewChild, HostBinding, Optional, 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 i6 from '@progress/kendo-angular-common';
+import { Keys, anyChanged, ResizeSensorComponent, EventsModule, ResizeSensorModule } from '@progress/kendo-angular-common';
 import * as i3 from '@progress/kendo-angular-dropdowns';
 import { DropDownListModule } from '@progress/kendo-angular-dropdowns';
-import * as i3$1 from '@angular/common';
+import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i3$2 from '@progress/kendo-angular-inputs';
+import * as i3$1 from '@progress/kendo-angular-inputs';
 import { NumericTextBoxComponent, NumericTextBoxModule } from '@progress/kendo-angular-inputs';
-import * as i5 from '@progress/kendo-angular-common';
-import { Keys, anyChanged, ResizeSensorComponent, EventsModule, ResizeSensorModule } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 
 /**
@@ -62,9 +62,9 @@ class PageSizeChangeEvent extends PreventableEvent {
  */
 class Messages extends ComponentMessages {
 }
-Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", 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" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Messages, decorators: [{
+Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: Messages, selector: "kendoPagerMessages", inputs: { firstPage: "firstPage", lastPage: "lastPage", previousPage: "previousPage", nextPage: "nextPage", page: "page", pageNumberInputTitle: "pageNumberInputTitle", itemsPerPage: "itemsPerPage", of: "of", items: "items", selectPage: "selectPage", inputLabel: "inputLabel" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: Messages, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -90,6 +90,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], selectPage: [{
                 type: Input
+            }], inputLabel: [{
+                type: Input
             }] } });
 
 /**
@@ -105,14 +107,14 @@ class CustomMessagesComponent extends Messages {
         return true;
     }
 }
-CustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-CustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CustomMessagesComponent, selector: "kendo-datapager-messages", providers: [
+CustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+CustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CustomMessagesComponent, selector: "kendo-datapager-messages", providers: [
         {
             provide: Messages,
             useExisting: forwardRef(() => CustomMessagesComponent)
         }
     ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
@@ -135,14 +137,14 @@ class LocalizedMessagesDirective extends Messages {
         this.service = service;
     }
 }
-LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: LocalizedMessagesDirective, selector: "[kendoDataPagerLocalizedMessages]", providers: [
+LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: LocalizedMessagesDirective, selector: "[kendoDataPagerLocalizedMessages]", providers: [
         {
             provide: Messages,
             useExisting: forwardRef(() => LocalizedMessagesDirective)
         }
     ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -262,9 +264,9 @@ class PagerElementComponent {
         }
     }
 }
-PagerElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PagerElementComponent, deps: [{ token: i1.LocalizationService }, { token: PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-PagerElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PagerElementComponent, selector: "kendo-pager-element", ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PagerElementComponent, decorators: [{
+PagerElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerElementComponent, deps: [{ token: i1.LocalizationService }, { token: PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+PagerElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PagerElementComponent, selector: "kendo-pager-element", ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerElementComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-pager-element',
@@ -272,6 +274,112 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }], 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
+ */
+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: "12.2.17", ngImport: i0, type: PagerFocusableDirective, deps: [{ token: PagerNavigationService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+PagerFocusableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerFocusableDirective, decorators: [{
+            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 %})).
@@ -297,10 +405,10 @@ class PagerPrevButtonsComponent extends PagerElementComponent {
         this.cd.markForCheck();
     }
 }
-PagerPrevButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PagerPrevButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-PagerPrevButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons", usesInheritance: true, ngImport: i0, template: `
+PagerPrevButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerPrevButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+PagerPrevButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons", usesInheritance: true, ngImport: i0, template: `
         <button
-            type="button"
+            type="button" kendoPagerFocusable
             class="k-link k-pager-nav k-pager-first"
             [class.k-disabled]="disabled"
             [title]="textFor('firstPage')"
@@ -310,7 +418,7 @@ PagerPrevButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             <span class="k-icon k-i-seek-w" role="note" [attr.aria-label]="textFor('firstPage')"></span>
         </button>
         <button
-            type="button"
+            type="button" kendoPagerFocusable
             class="k-link k-pager-nav"
             [class.k-disabled]="disabled"
             [title]="textFor('previousPage')"
@@ -319,15 +427,15 @@ PagerPrevButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             (click)="currentPage !== 1 ? changePage(currentPage-2) : false">
             <span class="k-icon k-i-arrow-w" role="note" [attr.aria-label]="textFor('previousPage')"></span>
         </button>
-    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PagerPrevButtonsComponent, decorators: [{
+    `, isInline: true, directives: [{ type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerPrevButtonsComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     selector: 'kendo-datapager-prev-buttons',
                     template: `
         <button
-            type="button"
+            type="button" kendoPagerFocusable
             class="k-link k-pager-nav k-pager-first"
             [class.k-disabled]="disabled"
             [title]="textFor('firstPage')"
@@ -337,7 +445,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             <span class="k-icon k-i-seek-w" role="note" [attr.aria-label]="textFor('firstPage')"></span>
         </button>
         <button
-            type="button"
+            type="button" kendoPagerFocusable
             class="k-link k-pager-nav"
             [class.k-disabled]="disabled"
             [title]="textFor('previousPage')"
@@ -354,9 +462,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  * Displays a drop-down list for the page size selection ([see example]({% slug pager_settings %})).
  */
 class PagerPageSizesComponent extends PagerElementComponent {
-    constructor(localization, cd, pagerContext) {
+    constructor(localization, cd, pagerContext, element, ngZone) {
         super(localization, pagerContext, cd);
         this.pagerContext = pagerContext;
+        this.element = element;
+        this.ngZone = ngZone;
         this._pageSizes = [];
     }
     /**
@@ -510,6 +620,12 @@ class PagerPageSizesComponent extends PagerElementComponent {
     }
     ngAfterViewInit() {
         this.dropDownList.wrapper.nativeElement.setAttribute('aria-label', this.textFor('itemsPerPage'));
+        this.ngZone.runOutsideAngular(() => {
+            this.element.nativeElement.addEventListener('keydown', this.keyDownHandler.bind(this), true);
+        });
+    }
+    ngOnDestroy() {
+        this.element.nativeElement.removeEventListener('keydown', this.keyDownHandler);
     }
     /**
      * @hidden
@@ -527,10 +643,16 @@ class PagerPageSizesComponent extends PagerElementComponent {
         this.pageSize = typeof pageSize === 'number' ? pageSize : this.total;
         this.cd.markForCheck();
     }
+    keyDownHandler(ev) {
+        if (ev.keyCode === Keys.Escape && this.dropDownList.isOpen) {
+            ev.stopPropagation();
+            this.dropDownList.toggle(false);
+        }
+    }
 }
-PagerPageSizesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PagerPageSizesComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
-PagerPageSizesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PagerPageSizesComponent, selector: "kendo-datapager-page-sizes", inputs: { pageSizes: "pageSizes" }, host: { properties: { "class.k-pager-sizes": "this.classes", "class.k-label": "this.classes" } }, viewQueries: [{ propertyName: "dropDownList", first: true, predicate: ["dropdownlist"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
-        <kendo-dropdownlist
+PagerPageSizesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerPageSizesComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+PagerPageSizesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PagerPageSizesComponent, selector: "kendo-datapager-page-sizes", inputs: { pageSizes: "pageSizes" }, host: { properties: { "class.k-pager-sizes": "this.classes", "class.k-label": "this.classes" } }, viewQueries: [{ propertyName: "dropDownList", first: true, predicate: ["dropdownlist"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+        <kendo-dropdownlist kendoPagerFocusable
             #dropdownlist
             [data]="pageSizes"
             textField="text"
@@ -539,14 +661,14 @@ PagerPageSizesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             [value]="pageSize"
             (valueChange)="pageSizeChange($event, dropdownlist)"></kendo-dropdownlist>
         {{ textFor('itemsPerPage') }}
-    `, isInline: true, components: [{ type: i3.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PagerPageSizesComponent, decorators: [{
+    `, isInline: true, components: [{ type: i3.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerPageSizesComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     selector: 'kendo-datapager-page-sizes',
                     template: `
-        <kendo-dropdownlist
+        <kendo-dropdownlist kendoPagerFocusable
             #dropdownlist
             [data]="pageSizes"
             textField="text"
@@ -557,7 +679,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         {{ textFor('itemsPerPage') }}
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: PagerContextService }]; }, propDecorators: { dropDownList: [{
+        }], 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: [{
@@ -617,9 +739,9 @@ class PagerTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-PagerTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PagerTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-PagerTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: PagerTemplateDirective, selector: "[kendoDataPagerTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PagerTemplateDirective, decorators: [{
+PagerTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+PagerTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: PagerTemplateDirective, selector: "[kendoDataPagerTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDataPagerTemplate]'
@@ -707,9 +829,9 @@ class PagerNumericButtonsComponent extends PagerElementComponent {
         return this.textFor('selectPage');
     }
 }
-PagerNumericButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PagerNumericButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
-PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons", inputs: { buttonCount: "buttonCount" }, host: { properties: { "class.k-pager-numbers-wrap": "this.numbersWrapClass" } }, usesInheritance: true, ngImport: i0, template: `
-        <select
+PagerNumericButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerNumericButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
+PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons", inputs: { buttonCount: "buttonCount" }, host: { properties: { "class.k-pager-numbers-wrap": "this.numbersWrapClass" } }, usesInheritance: true, ngImport: i0, template: `
+        <select kendoPagerFocusable
             class="k-dropdown-list k-picker k-picker-md k-rounded-md k-picker-solid"
             [attr.title]="pageChooserLabel"
             [attr.aria-label]="pageChooserLabel"
@@ -738,15 +860,17 @@ PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
         <ul [ngClass]="{'k-pager-numbers': true}">
             <li *ngIf="start > 1">
                 <button
-                    type="button"
+                    type="button" kendoPagerFocusable
                     class="k-link"
                     [attr.aria-label]="pageLabel(start - 1)"
+                    [attr.title]="pageLabel(start - 1)"
                     (click)="changePage(start - 2)">...</button>
             </li>
             <li *ngFor="let num of buttons">
                 <button
-                    type="button"
+                    type="button" kendoPagerFocusable
                     [attr.aria-label]="pageLabel(num)"
+                    [attr.title]="pageLabel(num)"
                     [attr.aria-current]="currentPage === num ? 'page' : undefined"
                     [ngClass]="{'k-link': true, 'k-selected':currentPage === num}"
                     (click)="changePage(num - 1)">
@@ -755,20 +879,21 @@ PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
             </li>
             <li *ngIf="end < totalPages">
                 <button
-                    type="button"
+                    type="button" kendoPagerFocusable
                     class="k-link"
                     [attr.aria-label]="pageLabel(end + 1)"
+                    [attr.title]="pageLabel(end + 1)"
                     (click)="changePage(end)">...</button>
             </li>
         </ul>
-    `, isInline: true, directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PagerNumericButtonsComponent, decorators: [{
+    `, isInline: true, directives: [{ type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerNumericButtonsComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     selector: 'kendo-datapager-numeric-buttons',
                     template: `
-        <select
+        <select kendoPagerFocusable
             class="k-dropdown-list k-picker k-picker-md k-rounded-md k-picker-solid"
             [attr.title]="pageChooserLabel"
             [attr.aria-label]="pageChooserLabel"
@@ -797,15 +922,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         <ul [ngClass]="{'k-pager-numbers': true}">
             <li *ngIf="start > 1">
                 <button
-                    type="button"
+                    type="button" kendoPagerFocusable
                     class="k-link"
                     [attr.aria-label]="pageLabel(start - 1)"
+                    [attr.title]="pageLabel(start - 1)"
                     (click)="changePage(start - 2)">...</button>
             </li>
             <li *ngFor="let num of buttons">
                 <button
-                    type="button"
+                    type="button" kendoPagerFocusable
                     [attr.aria-label]="pageLabel(num)"
+                    [attr.title]="pageLabel(num)"
                     [attr.aria-current]="currentPage === num ? 'page' : undefined"
                     [ngClass]="{'k-link': true, 'k-selected':currentPage === num}"
                     (click)="changePage(num - 1)">
@@ -814,9 +941,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             </li>
             <li *ngIf="end < totalPages">
                 <button
-                    type="button"
+                    type="button" kendoPagerFocusable
                     class="k-link"
                     [attr.aria-label]="pageLabel(end + 1)"
+                    [attr.title]="pageLabel(end + 1)"
                     (click)="changePage(end)">...</button>
             </li>
         </ul>
@@ -854,10 +982,10 @@ class PagerNextButtonsComponent extends PagerElementComponent {
         this.cd.markForCheck();
     }
 }
-PagerNextButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PagerNextButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-PagerNextButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons", usesInheritance: true, ngImport: i0, template: `
+PagerNextButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerNextButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+PagerNextButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons", usesInheritance: true, ngImport: i0, template: `
         <button
-            type="button"
+            type="button" kendoPagerFocusable
             class="k-link k-pager-nav"
             [class.k-disabled]="disabled"
             [title]="textFor('nextPage')"
@@ -867,7 +995,7 @@ PagerNextButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             <span class="k-icon k-i-arrow-e" role="note" [attr.aria-label]="textFor('nextPage')"></span>
         </button>
         <button
-            type="button"
+            type="button" kendoPagerFocusable
             class="k-link k-pager-nav k-pager-last"
             [class.k-disabled]="disabled"
             [title]="textFor('lastPage')"
@@ -876,15 +1004,15 @@ PagerNextButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             (click)="currentPage !== totalPages ? changePage(totalPages-1) : false">
             <span class="k-icon k-i-seek-e" role="note" [attr.aria-label]="textFor('lastPage')"></span>
         </button>
-    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PagerNextButtonsComponent, decorators: [{
+    `, isInline: true, directives: [{ type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerNextButtonsComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     selector: 'kendo-datapager-next-buttons',
                     template: `
         <button
-            type="button"
+            type="button" kendoPagerFocusable
             class="k-link k-pager-nav"
             [class.k-disabled]="disabled"
             [title]="textFor('nextPage')"
@@ -894,7 +1022,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             <span class="k-icon k-i-arrow-e" role="note" [attr.aria-label]="textFor('nextPage')"></span>
         </button>
         <button
-            type="button"
+            type="button" kendoPagerFocusable
             class="k-link k-pager-nav k-pager-last"
             [class.k-disabled]="disabled"
             [title]="textFor('lastPage')"
@@ -911,10 +1039,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  * Displays an input element which allows the typing and rendering of page numbers.
  */
 class PagerInputComponent extends PagerElementComponent {
-    constructor(localization, pagerContext, zone, cd) {
+    constructor(localization, pagerContext, zone, cd, renderer) {
         super(localization, pagerContext, cd);
         this.pagerContext = pagerContext;
         this.zone = zone;
+        this.renderer = renderer;
         /**
          * @hidden
          *
@@ -966,6 +1095,10 @@ class PagerInputComponent extends PagerElementComponent {
     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;
@@ -973,11 +1106,11 @@ class PagerInputComponent extends PagerElementComponent {
         this.cd.markForCheck();
     }
 }
-PagerInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PagerInputComponent, deps: [{ token: i1.LocalizationService }, { token: PagerContextService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-PagerInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PagerInputComponent, selector: "kendo-datapager-input", viewQueries: [{ propertyName: "numericInput", first: true, predicate: NumericTextBoxComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+PagerInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerInputComponent, deps: [{ token: i1.LocalizationService }, { token: PagerContextService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+PagerInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PagerInputComponent, selector: "kendo-datapager-input", viewQueries: [{ propertyName: "numericInput", first: true, predicate: NumericTextBoxComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
      <span [ngClass]="{'k-pager-input': true, 'k-label': true}">
         {{textFor('page')}}
-        <kendo-numerictextbox
+        <kendo-numerictextbox kendoPagerFocusable
             [spinners]="false"
             [decimals]="0"
             format="n0"
@@ -994,15 +1127,15 @@ PagerInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
         </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: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PagerInputComponent, decorators: [{
+    `, isInline: true, components: [{ type: i3$1.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }, { type: i6.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerInputComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-datapager-input',
                     template: `
      <span [ngClass]="{'k-pager-input': true, 'k-label': true}">
         {{textFor('page')}}
-        <kendo-numerictextbox
+        <kendo-numerictextbox kendoPagerFocusable
             [spinners]="false"
             [decimals]="0"
             format="n0"
@@ -1021,7 +1154,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
      </span>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: PagerContextService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { numericInput: [{
+        }], 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 }]
             }] } });
@@ -1074,9 +1207,9 @@ class PagerInfoComponent extends PagerElementComponent {
         this.cd.markForCheck();
     }
 }
-PagerInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PagerInfoComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
-PagerInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PagerInfoComponent, selector: "kendo-datapager-info", host: { properties: { "class.k-pager-info": "this.classes", "class.k-label": "this.classes" } }, usesInheritance: true, ngImport: i0, template: `{{currentPageText}} - {{maxItems}} {{textFor('of')}} {{total}} {{textFor('items')}}`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PagerInfoComponent, decorators: [{
+PagerInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerInfoComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
+PagerInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PagerInfoComponent, selector: "kendo-datapager-info", host: { properties: { "class.k-pager-info": "this.classes", "class.k-label": "this.classes" } }, usesInheritance: true, ngImport: i0, template: `{{currentPageText}} - {{maxItems}} {{textFor('of')}} {{total}} {{textFor('items')}}`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerInfoComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -1100,11 +1233,6 @@ const RESPONSIVE_BREAKPOINT_MEDIUM = 600;
  */
 const RESPONSIVE_BREAKPOINT_LARGE = 768;
 
-/**
- * @hidden
- */
-const DEFAULT_PAGE_SIZE_VALUES = [5, 10, 20];
-
 /**
  * @hidden
  */
@@ -1112,16 +1240,19 @@ const packageMetadata = {
     name: '@progress/kendo-angular-pager',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1668698798,
+    publishDate: 1669366305,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
 
 class PagerComponent {
-    constructor(pagerContext, element, localization) {
+    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.
          */
@@ -1158,10 +1289,15 @@ class PagerComponent {
          */
         this.pageSizeChange = new EventEmitter();
         this.pagerClass = true;
-        this.widgetRole = 'navigation';
+        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.resizeHandler = () => {
             if (this.template) {
                 return;
@@ -1193,9 +1329,30 @@ class PagerComponent {
     set pageSizeValues(pageSizeValues) {
         this._pageSizeValues = Array.isArray(pageSizeValues) ? pageSizeValues : pageSizeValues ? DEFAULT_PAGE_SIZE_VALUES : false;
     }
+    /**
+     * 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;
+    }
+    ;
     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);
     }
@@ -1221,9 +1378,17 @@ class PagerComponent {
         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);
     }
     ngOnChanges(changes) {
         if (anyChanged(["pageSize", "skip", "total"], changes, false)) {
@@ -1232,6 +1397,7 @@ class PagerComponent {
                 skip: this.skip,
                 total: this.total
             });
+            this.renderer.setAttribute(this.element.nativeElement, 'aria-label', this.ariaLabel);
         }
     }
     ngOnDestroy() {
@@ -1266,11 +1432,72 @@ class PagerComponent {
             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;
+    }
 }
-PagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PagerComponent, deps: [{ token: PagerContextService }, { token: i0.ElementRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PagerComponent, selector: "kendo-datapager", inputs: { total: "total", skip: "skip", pageSize: "pageSize", buttonCount: "buttonCount", info: "info", type: "type", pageSizeValues: "pageSizeValues", previousNext: "previousNext" }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, host: { properties: { "class.k-pager": "this.pagerClass", "attr.role": "this.widgetRole", "attr.dir": "this.dir" } }, providers: [
+PagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerComponent, deps: [{ token: PagerContextService }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: PagerNavigationService }], target: i0.ɵɵFactoryTarget.Component });
+PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PagerComponent, selector: "kendo-datapager", inputs: { total: "total", skip: "skip", pageSize: "pageSize", buttonCount: "buttonCount", info: "info", type: "type", pageSizeValues: "pageSizeValues", previousNext: "previousNext", navigable: "navigable" }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, host: { listeners: { "focusin": "focusHandler($event)" }, properties: { "class.k-pager": "this.pagerClass", "attr.role": "this.widgetRole", "attr.aria-roledescription": "this.roleDescription", "attr.aria-keyshortcuts": "this.keyShortcuts", "attr.tabindex": "this.hostTabindex", "attr.dir": "this.dir" } }, providers: [
         LocalizationService,
-        PagerContextService
+        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"
@@ -1302,6 +1529,9 @@ PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
 
             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
@@ -1321,15 +1551,16 @@ PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
             <kendo-datapager-page-sizes *ngIf="pageSizeValues" [pageSizes]="pageSizeValues"></kendo-datapager-page-sizes>
         </ng-container>
         <kendo-resize-sensor></kendo-resize-sensor>
-  `, isInline: true, components: [{ type: PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons" }, { type: PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons", inputs: ["buttonCount"] }, { type: PagerInputComponent, selector: "kendo-datapager-input" }, { type: PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons" }, { type: PagerInfoComponent, selector: "kendo-datapager-info" }, { type: PagerPageSizesComponent, selector: "kendo-datapager-page-sizes", inputs: ["pageSizes"] }, { type: i5.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoDataPagerLocalizedMessages]" }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PagerComponent, decorators: [{
+  `, isInline: true, components: [{ type: PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons" }, { type: PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons", inputs: ["buttonCount"] }, { type: PagerInputComponent, selector: "kendo-datapager-input" }, { type: PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons" }, { type: PagerInfoComponent, selector: "kendo-datapager-info" }, { type: PagerPageSizesComponent, selector: "kendo-datapager-page-sizes", inputs: ["pageSizes"] }, { type: i6.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoDataPagerLocalizedMessages]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-datapager',
                     exportAs: 'kendoDataPager',
                     providers: [
                         LocalizationService,
-                        PagerContextService
+                        PagerContextService,
+                        PagerNavigationService
                     ],
                     template: `
         <ng-container kendoDataPagerLocalizedMessages
@@ -1362,6 +1593,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 
             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
@@ -1383,7 +1617,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         <kendo-resize-sensor></kendo-resize-sensor>
   `
                 }]
-        }], ctorParameters: function () { return [{ type: PagerContextService }, { type: i0.ElementRef }, { type: i1.LocalizationService }]; }, propDecorators: { resizeSensor: [{
+        }], 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: [{
@@ -1405,6 +1639,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], previousNext: [{
                 type: Input
+            }], navigable: [{
+                type: Input
             }], pageChange: [{
                 type: Output
             }], pageSizeChange: [{
@@ -1415,9 +1651,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], 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 = [
@@ -1437,7 +1685,8 @@ const INTERNAL_COMPONENTS = [
     PagerPageSizesComponent,
     PagerTemplateDirective,
     LocalizedMessagesDirective,
-    CustomMessagesComponent
+    CustomMessagesComponent,
+    PagerFocusableDirective
 ];
 const providers = [
     {
@@ -1462,8 +1711,8 @@ class PagerModule {
         ];
     }
 }
-PagerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PagerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PagerModule, declarations: [PagerComponent,
+PagerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PagerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerModule, declarations: [PagerComponent,
         PagerPrevButtonsComponent,
         PagerNextButtonsComponent,
         PagerNumericButtonsComponent,
@@ -1472,7 +1721,8 @@ PagerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         PagerPageSizesComponent,
         PagerTemplateDirective,
         LocalizedMessagesDirective,
-        CustomMessagesComponent], imports: [CommonModule,
+        CustomMessagesComponent,
+        PagerFocusableDirective], imports: [CommonModule,
         NumericTextBoxModule,
         DropDownListModule,
         EventsModule,
@@ -1485,9 +1735,10 @@ PagerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         PagerPageSizesComponent,
         PagerTemplateDirective,
         LocalizedMessagesDirective,
-        CustomMessagesComponent] });
-PagerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PagerModule, providers: [providers], imports: [[...importedModules]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PagerModule, decorators: [{
+        CustomMessagesComponent,
+        PagerFocusableDirective] });
+PagerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerModule, providers: [providers], imports: [[...importedModules]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [INTERNAL_COMPONENTS],
@@ -1501,5 +1752,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CustomMessagesComponent, LocalizedMessagesDirective, PageSizeChangeEvent, PagerComponent, PagerInfoComponent, PagerInputComponent, PagerModule, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerPageSizesComponent, PagerPrevButtonsComponent, PagerTemplateDirective };
+export { CustomMessagesComponent, LocalizedMessagesDirective, PageSizeChangeEvent, PagerComponent, PagerFocusableDirective, PagerInfoComponent, PagerInputComponent, PagerModule, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerPageSizesComponent, PagerPrevButtonsComponent, PagerTemplateDirective };