@progress/kendo-angular-dialog 5.2.0-dev.202110191158 → 5.2.2-dev.202111121554

package/dist/fesm2015/index.js

@@ -3,12 +3,12 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { __decorate, __metadata, __param } from 'tslib';
-import { EventEmitter, TemplateRef, Input, Output, HostBinding, Component, ElementRef, InjectionToken, Inject, Optional, NgZone, ContentChildren, QueryList, ViewChildren, ViewChild, HostListener, Renderer2, ChangeDetectorRef, Injectable, isDevMode, ComponentFactoryResolver, Directive, Host, ContentChild, ViewContainerRef, forwardRef, NgModule } from '@angular/core';
+import { EventEmitter, TemplateRef, Input, Output, HostBinding, Component, ElementRef, InjectionToken, Inject, Optional, NgZone, ContentChildren, QueryList, ViewChildren, ViewChild, Renderer2, ChangeDetectorRef, Injectable, isDevMode, ComponentFactoryResolver, Directive, Host, HostListener, ContentChild, ViewContainerRef, forwardRef, NgModule } from '@angular/core';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { LocalizationService, L10N_PREFIX, RTL, MessageService, ComponentMessages } from '@progress/kendo-angular-l10n';
 import { take, filter, map, share, tap, switchMap, takeUntil } from 'rxjs/operators';
 import { validatePackage } from '@progress/kendo-licensing';
-import { Subject, merge, Subscription, of } from 'rxjs';
+import { Subscription, Subject, merge, of } from 'rxjs';
 import { DraggableDirective, isChanged, isDocumentAvailable, DraggableModule } from '@progress/kendo-angular-common';
 import { offset, scrollPosition, positionWithScroll, getDocumentElement, getWindowViewPort } from '@progress/kendo-popup-common';
 import { Button } from '@progress/kendo-angular-buttons';
@@ -257,7 +257,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-dialog',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1634644651,
+    publishDate: 1636732380,
     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'
 };
@@ -470,11 +470,11 @@ class DialogRef {
  * Represents the [Kendo UI Dialog component for Angular]({% slug overview_dialog_dialogs %}).
  */
 let DialogComponent = class DialogComponent {
-    constructor(_elRef, _renderer, localization, cdr, zone) {
-        this._elRef = _elRef;
-        this._renderer = _renderer;
+    constructor(wrapper, renderer, localization, cdr, ngZone) {
+        this.wrapper = wrapper;
+        this.renderer = renderer;
         this.cdr = cdr;
-        this.zone = zone;
+        this.ngZone = ngZone;
         /**
          * Specifies the layout of the action buttons in the Dialog.
          * This option is only applicable if the action buttons are specified through the `actions` options.
@@ -501,6 +501,7 @@ let DialogComponent = class DialogComponent {
         this.close = new EventEmitter();
         this.tabIndex = 0;
         this.subscriptions = [];
+        this.domSubs = new Subscription();
         validatePackage(packageMetadata);
         this.direction = localization.rtl ? 'rtl' : 'ltr';
         this.subscriptions.push(localization.changes.subscribe(({ rtl }) => (this.direction = rtl ? 'rtl' : 'ltr')));
@@ -511,8 +512,8 @@ let DialogComponent = class DialogComponent {
      * @hidden
      */
     set htmlAttributes(attributes) {
-        setHTMLAttributes(attributes, this._renderer, this._elRef.nativeElement);
-        const el = this._elRef.nativeElement;
+        setHTMLAttributes(attributes, this.renderer, this.wrapper.nativeElement);
+        const el = this.wrapper.nativeElement;
         const dir = el.getAttribute('dir');
         const tIndex = el.getAttribute('tabindex');
         if (this.direction !== dir) {
@@ -539,29 +540,9 @@ let DialogComponent = class DialogComponent {
     get dir() {
         return this.direction;
     }
-    /**
-     * @hidden
-     */
-    onComponentKeydown(event) {
-        const target = event.target;
-        const parent = target.parentElement;
-        if (hasClasses(target, DIALOG_ELEMENTS_HANDLING_ESC_KEY) || hasClasses(parent, DIALOG_ELEMENTS_HANDLING_ESC_KEY)) {
-            if (event.keyCode === Keys.esc) {
-                this.close.emit(new DialogCloseResult());
-            }
-        }
-        if (hasClasses(target, 'k-button') &&
-            hasClasses(parent, DIALOG_ELEMENTS_HANDLING_ARROWS) &&
-            (event.keyCode === Keys.left || event.keyCode === Keys.right)) {
-            this.handleActionButtonFocus(parent, event.keyCode);
-        }
-        if (event.keyCode === Keys.tab) {
-            this.keepFocusWithinComponent(target, event);
-        }
-    }
     ngAfterContentInit() {
         this.bubble('close', this.titlebarContent.first);
-        this._renderer.setAttribute(this._elRef.nativeElement.querySelector('.k-dialog'), 'aria-describedby', this.contentId);
+        this.renderer.setAttribute(this.wrapper.nativeElement.querySelector('.k-dialog'), 'aria-describedby', this.contentId);
         if (this.titlebarContent.first) {
             this.titlebarContent.first.id = this.titleId;
         }
@@ -569,9 +550,9 @@ let DialogComponent = class DialogComponent {
             this.subscriptions.push(this.titlebarContent.changes.subscribe(() => {
                 if (isPresent(this.titlebarContent.first)) {
                     this.titlebarContent.first.id = this.titleId;
-                    this.zone.onStable.pipe(take(1)).subscribe(() => {
+                    this.ngZone.onStable.pipe(take(1)).subscribe(() => {
                         this.bubble('close', this.titlebarContent.first);
-                        this._renderer.setAttribute(this._elRef.nativeElement.querySelector('.k-dialog'), 'aria-labelledby', this.titleId);
+                        this.renderer.setAttribute(this.wrapper.nativeElement.querySelector('.k-dialog'), 'aria-labelledby', this.titleId);
                     });
                 }
             }));
@@ -583,47 +564,83 @@ let DialogComponent = class DialogComponent {
         this.bubble('action', this.actionsView);
         if (this.titlebarView.first || this.titlebarContent.first) {
             //Needed for Dialogs created via service
-            this._renderer.setAttribute(this._elRef.nativeElement.querySelector('.k-dialog'), 'aria-labelledby', this.titleId);
+            this.renderer.setAttribute(this.wrapper.nativeElement.querySelector('.k-dialog'), 'aria-labelledby', this.titleId);
         }
         else {
             this.subscriptions.push(this.titlebarView.changes.subscribe(() => {
                 if (isPresent(this.titlebarView.first)) {
                     this.titlebarView.first.id = this.titleId;
-                    this.zone.onStable.pipe(take(1)).subscribe(() => {
+                    this.ngZone.onStable.pipe(take(1)).subscribe(() => {
                         this.bubble('close', this.titlebarView.first);
-                        this._renderer.setAttribute(this._elRef.nativeElement.querySelector('.k-dialog'), 'aria-labelledby', this.titleId);
+                        this.renderer.setAttribute(this.wrapper.nativeElement.querySelector('.k-dialog'), 'aria-labelledby', this.titleId);
                     });
                 }
             }));
         }
+        this.initDomEvents();
     }
     ngOnInit() {
-        this._renderer.removeAttribute(this._elRef.nativeElement, 'title');
+        this.renderer.removeAttribute(this.wrapper.nativeElement, 'title');
         this.cdr.detectChanges();
     }
     ngOnDestroy() {
         this.subscriptions.forEach(s => s.unsubscribe());
         this.subscriptions = [];
+        if (this.domSubs) {
+            this.domSubs.unsubscribe();
+        }
     }
     /**
      * Focuses the wrapper of the Dialog component.
      */
     focus() {
-        const wrapper = this._elRef.nativeElement;
+        const wrapper = this.wrapper.nativeElement;
         if (isPresent(wrapper)) {
             wrapper.focus();
         }
     }
+    initDomEvents() {
+        if (!this.wrapper) {
+            return;
+        }
+        this.ngZone.runOutsideAngular(() => {
+            this.domSubs.add(this.renderer.listen(this.wrapper.nativeElement, 'keydown', (ev) => {
+                this.onKeyDown(ev);
+            }));
+        });
+    }
+    onKeyDown(event) {
+        const target = event.target;
+        const parent = target.parentElement;
+        if (hasClasses(target, DIALOG_ELEMENTS_HANDLING_ESC_KEY) || hasClasses(parent, DIALOG_ELEMENTS_HANDLING_ESC_KEY)) {
+            if (event.keyCode === Keys.esc) {
+                this.ngZone.run(() => {
+                    this.close.emit(new DialogCloseResult());
+                });
+            }
+        }
+        if (hasClasses(target, 'k-button') && hasClasses(parent, DIALOG_ELEMENTS_HANDLING_ARROWS) &&
+            (event.keyCode === Keys.left || event.keyCode === Keys.right)) {
+            this.ngZone.run(() => {
+                this.handleActionButtonFocus(parent, event.keyCode);
+            });
+        }
+        if (event.keyCode === Keys.tab) {
+            this.ngZone.run(() => {
+                this.keepFocusWithinComponent(target, event);
+            });
+        }
+    }
     setServiceClasses(prevValue, value) {
-        const el = this._elRef.nativeElement;
+        const el = this.wrapper.nativeElement;
         if (prevValue) {
             parseCSSClassNames(prevValue).forEach(className => {
-                this._renderer.removeClass(el, className);
+                this.renderer.removeClass(el, className);
             });
         }
         if (value) {
             parseCSSClassNames(value).forEach(className => {
-                this._renderer.addClass(el, className);
+                this.renderer.addClass(el, className);
             });
         }
     }
@@ -631,7 +648,7 @@ let DialogComponent = class DialogComponent {
      * @hidden
      */
     handleInitialFocus() {
-        const wrapper = this._elRef.nativeElement;
+        const wrapper = this.wrapper.nativeElement;
         const primaryButton = wrapper.querySelector('.k-primary');
         if (this.autoFocusedElement) {
             const initiallyFocusedElement = wrapper.querySelector(this.autoFocusedElement);
@@ -669,7 +686,7 @@ let DialogComponent = class DialogComponent {
      * @hidden
      */
     keepFocusWithinComponent(target, event) {
-        const wrapper = this._elRef.nativeElement;
+        const wrapper = this.wrapper.nativeElement;
         const [firstFocusable, lastFocusable] = this.getFirstAndLastFocusable(wrapper);
         const tabAfterLastFocusable = !event.shiftKey && target === lastFocusable;
         const shiftTabAfterFirstFocusable = event.shiftKey && target === firstFocusable;
@@ -817,12 +834,6 @@ __decorate([
     ViewChild(DialogActionsComponent, { static: false }),
     __metadata("design:type", DialogActionsComponent)
 ], DialogComponent.prototype, "actionsView", void 0);
-__decorate([
-    HostListener('keydown', ['$event']),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], DialogComponent.prototype, "onComponentKeydown", null);
 __decorate([
     HostBinding('class.k-dialog-wrapper'),
     __metadata("design:type", Boolean),
@@ -1648,8 +1659,9 @@ WindowTitleBarComponent = __decorate([
  * @hidden
  */
 let NavigationService = class NavigationService {
-    constructor(window) {
+    constructor(window, ngZone) {
         this.window = window;
+        this.ngZone = ngZone;
     }
     process(ev) {
         const key = ev.keyCode;
@@ -1659,11 +1671,15 @@ let NavigationService = class NavigationService {
             case Keys.left:
             case Keys.right: {
                 ev.preventDefault();
-                this.handleArrow(key, ev);
+                this.ngZone.run(() => {
+                    this.handleArrow(key, ev);
+                });
                 break;
             }
             case Keys.esc:
-                this.handleEscape();
+                this.ngZone.run(() => {
+                    this.handleEscape();
+                });
                 break;
             default:
                 break;
@@ -1779,7 +1795,8 @@ let NavigationService = class NavigationService {
 };
 NavigationService = __decorate([
     Injectable(),
-    __metadata("design:paramtypes", [DragResizeService])
+    __metadata("design:paramtypes", [DragResizeService,
+        NgZone])
 ], NavigationService);
 
 /**
@@ -1847,6 +1864,7 @@ let WindowComponent = class WindowComponent {
         this.draged = false;
         this.resized = false;
         this.windowSubscription = new Subscription();
+        this.domSubs = new Subscription();
         validatePackage(packageMetadata);
         this.direction = this.localization.rtl ? 'rtl' : 'ltr';
         this.localizationChangeSubscription = this.localization.changes
@@ -2014,6 +2032,7 @@ let WindowComponent = class WindowComponent {
         this.setNextZIndex();
         this.handleInitialFocus();
         this.ngZone.runOutsideAngular(() => Promise.resolve(null).then(() => this.setInitialOffset()));
+        this.initDomEvents();
     }
     ngOnInit() {
         this.renderer.removeAttribute(this.el.nativeElement, 'title');
@@ -2048,6 +2067,9 @@ let WindowComponent = class WindowComponent {
         if (this.windowSubscription) {
             this.windowSubscription.unsubscribe();
         }
+        if (this.domSubs) {
+            this.domSubs.unsubscribe();
+        }
         this.localizationChangeSubscription.unsubscribe();
     }
     /**
@@ -2109,14 +2131,6 @@ let WindowComponent = class WindowComponent {
     get wrapperMinimizedClass() {
         return this.state === 'minimized';
     }
-    /**
-     * @hidden
-     */
-    onComponentKeydown(event) {
-        if (hasClasses(event.target, WINDOW_CLASSES)) {
-            this.navigation.process(event);
-        }
-    }
     /**
      * @hidden
      */
@@ -2190,6 +2204,21 @@ let WindowComponent = class WindowComponent {
             }
         }));
     }
+    initDomEvents() {
+        if (!this.el) {
+            return;
+        }
+        this.ngZone.runOutsideAngular(() => {
+            this.domSubs.add(this.renderer.listen(this.el.nativeElement, 'keydown', (ev) => {
+                this.onKeyDown(ev);
+            }));
+        });
+    }
+    onKeyDown(event) {
+        if (hasClasses(event.target, WINDOW_CLASSES)) {
+            this.navigation.process(event);
+        }
+    }
     setServiceClasses(prevValue, value) {
         const el = this.el.nativeElement;
         if (prevValue) {
@@ -2413,12 +2442,6 @@ __decorate([
     __metadata("design:type", Boolean),
     __metadata("design:paramtypes", [])
 ], WindowComponent.prototype, "wrapperMinimizedClass", null);
-__decorate([
-    HostListener('keydown', ['$event']),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], WindowComponent.prototype, "onComponentKeydown", null);
 __decorate([
     HostListener('focus'),
     __metadata("design:type", Function),

package/dist/fesm5/index.js

@@ -3,12 +3,12 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { __decorate, __metadata, __extends, __param } from 'tslib';
-import { TemplateRef, Input, Output, EventEmitter, HostBinding, Component, ElementRef, InjectionToken, Inject, Optional, NgZone, ContentChildren, QueryList, ViewChildren, ViewChild, HostListener, Renderer2, ChangeDetectorRef, Injectable, isDevMode, ComponentFactoryResolver, Directive, Host, ContentChild, ViewContainerRef, forwardRef, NgModule } from '@angular/core';
+import { TemplateRef, Input, Output, EventEmitter, HostBinding, Component, ElementRef, InjectionToken, Inject, Optional, NgZone, ContentChildren, QueryList, ViewChildren, ViewChild, Renderer2, ChangeDetectorRef, Injectable, isDevMode, ComponentFactoryResolver, Directive, Host, HostListener, ContentChild, ViewContainerRef, forwardRef, NgModule } from '@angular/core';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { L10N_PREFIX, RTL, MessageService, LocalizationService, ComponentMessages } from '@progress/kendo-angular-l10n';
 import { take, filter, map, share, tap, switchMap, takeUntil } from 'rxjs/operators';
 import { validatePackage } from '@progress/kendo-licensing';
-import { Subject, merge, Subscription, of } from 'rxjs';
+import { Subscription, Subject, merge, of } from 'rxjs';
 import { DraggableDirective, isChanged, isDocumentAvailable, DraggableModule } from '@progress/kendo-angular-common';
 import { offset, scrollPosition, positionWithScroll, getDocumentElement, getWindowViewPort } from '@progress/kendo-popup-common';
 import { Button } from '@progress/kendo-angular-buttons';
@@ -239,7 +239,7 @@ var packageMetadata = {
     name: '@progress/kendo-angular-dialog',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1634644651,
+    publishDate: 1636732380,
     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'
 };
@@ -466,12 +466,12 @@ var DialogRef = /** @class */ (function () {
  * Represents the [Kendo UI Dialog component for Angular]({% slug overview_dialog_dialogs %}).
  */
 var DialogComponent = /** @class */ (function () {
-    function DialogComponent(_elRef, _renderer, localization, cdr, zone) {
+    function DialogComponent(wrapper, renderer, localization, cdr, ngZone) {
         var _this = this;
-        this._elRef = _elRef;
-        this._renderer = _renderer;
+        this.wrapper = wrapper;
+        this.renderer = renderer;
         this.cdr = cdr;
-        this.zone = zone;
+        this.ngZone = ngZone;
         /**
          * Specifies the layout of the action buttons in the Dialog.
          * This option is only applicable if the action buttons are specified through the `actions` options.
@@ -498,6 +498,7 @@ var DialogComponent = /** @class */ (function () {
         this.close = new EventEmitter();
         this.tabIndex = 0;
         this.subscriptions = [];
+        this.domSubs = new Subscription();
         validatePackage(packageMetadata);
         this.direction = localization.rtl ? 'rtl' : 'ltr';
         this.subscriptions.push(localization.changes.subscribe(function (_a) {
@@ -515,8 +516,8 @@ var DialogComponent = /** @class */ (function () {
          * @hidden
          */
         set: function (attributes) {
-            setHTMLAttributes(attributes, this._renderer, this._elRef.nativeElement);
-            var el = this._elRef.nativeElement;
+            setHTMLAttributes(attributes, this.renderer, this.wrapper.nativeElement);
+            var el = this.wrapper.nativeElement;
             var dir = el.getAttribute('dir');
             var tIndex = el.getAttribute('tabindex');
             if (this.direction !== dir) {
@@ -551,30 +552,10 @@ var DialogComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
-    /**
-     * @hidden
-     */
-    DialogComponent.prototype.onComponentKeydown = function (event) {
-        var target = event.target;
-        var parent = target.parentElement;
-        if (hasClasses(target, DIALOG_ELEMENTS_HANDLING_ESC_KEY) || hasClasses(parent, DIALOG_ELEMENTS_HANDLING_ESC_KEY)) {
-            if (event.keyCode === Keys.esc) {
-                this.close.emit(new DialogCloseResult());
-            }
-        }
-        if (hasClasses(target, 'k-button') &&
-            hasClasses(parent, DIALOG_ELEMENTS_HANDLING_ARROWS) &&
-            (event.keyCode === Keys.left || event.keyCode === Keys.right)) {
-            this.handleActionButtonFocus(parent, event.keyCode);
-        }
-        if (event.keyCode === Keys.tab) {
-            this.keepFocusWithinComponent(target, event);
-        }
-    };
     DialogComponent.prototype.ngAfterContentInit = function () {
         var _this = this;
         this.bubble('close', this.titlebarContent.first);
-        this._renderer.setAttribute(this._elRef.nativeElement.querySelector('.k-dialog'), 'aria-describedby', this.contentId);
+        this.renderer.setAttribute(this.wrapper.nativeElement.querySelector('.k-dialog'), 'aria-describedby', this.contentId);
         if (this.titlebarContent.first) {
             this.titlebarContent.first.id = this.titleId;
         }
@@ -582,9 +563,9 @@ var DialogComponent = /** @class */ (function () {
             this.subscriptions.push(this.titlebarContent.changes.subscribe(function () {
                 if (isPresent(_this.titlebarContent.first)) {
                     _this.titlebarContent.first.id = _this.titleId;
-                    _this.zone.onStable.pipe(take(1)).subscribe(function () {
+                    _this.ngZone.onStable.pipe(take(1)).subscribe(function () {
                         _this.bubble('close', _this.titlebarContent.first);
-                        _this._renderer.setAttribute(_this._elRef.nativeElement.querySelector('.k-dialog'), 'aria-labelledby', _this.titleId);
+                        _this.renderer.setAttribute(_this.wrapper.nativeElement.querySelector('.k-dialog'), 'aria-labelledby', _this.titleId);
                     });
                 }
             }));
@@ -597,48 +578,86 @@ var DialogComponent = /** @class */ (function () {
         this.bubble('action', this.actionsView);
         if (this.titlebarView.first || this.titlebarContent.first) {
             //Needed for Dialogs created via service
-            this._renderer.setAttribute(this._elRef.nativeElement.querySelector('.k-dialog'), 'aria-labelledby', this.titleId);
+            this.renderer.setAttribute(this.wrapper.nativeElement.querySelector('.k-dialog'), 'aria-labelledby', this.titleId);
         }
         else {
             this.subscriptions.push(this.titlebarView.changes.subscribe(function () {
                 if (isPresent(_this.titlebarView.first)) {
                     _this.titlebarView.first.id = _this.titleId;
-                    _this.zone.onStable.pipe(take(1)).subscribe(function () {
+                    _this.ngZone.onStable.pipe(take(1)).subscribe(function () {
                         _this.bubble('close', _this.titlebarView.first);
-                        _this._renderer.setAttribute(_this._elRef.nativeElement.querySelector('.k-dialog'), 'aria-labelledby', _this.titleId);
+                        _this.renderer.setAttribute(_this.wrapper.nativeElement.querySelector('.k-dialog'), 'aria-labelledby', _this.titleId);
                     });
                 }
             }));
         }
+        this.initDomEvents();
     };
     DialogComponent.prototype.ngOnInit = function () {
-        this._renderer.removeAttribute(this._elRef.nativeElement, 'title');
+        this.renderer.removeAttribute(this.wrapper.nativeElement, 'title');
         this.cdr.detectChanges();
     };
     DialogComponent.prototype.ngOnDestroy = function () {
         this.subscriptions.forEach(function (s) { return s.unsubscribe(); });
         this.subscriptions = [];
+        if (this.domSubs) {
+            this.domSubs.unsubscribe();
+        }
     };
     /**
      * Focuses the wrapper of the Dialog component.
      */
     DialogComponent.prototype.focus = function () {
-        var wrapper = this._elRef.nativeElement;
+        var wrapper = this.wrapper.nativeElement;
         if (isPresent(wrapper)) {
             wrapper.focus();
         }
     };
+    DialogComponent.prototype.initDomEvents = function () {
+        var _this = this;
+        if (!this.wrapper) {
+            return;
+        }
+        this.ngZone.runOutsideAngular(function () {
+            _this.domSubs.add(_this.renderer.listen(_this.wrapper.nativeElement, 'keydown', function (ev) {
+                _this.onKeyDown(ev);
+            }));
+        });
+    };
+    DialogComponent.prototype.onKeyDown = function (event) {
+        var _this = this;
+        var target = event.target;
+        var parent = target.parentElement;
+        if (hasClasses(target, DIALOG_ELEMENTS_HANDLING_ESC_KEY) || hasClasses(parent, DIALOG_ELEMENTS_HANDLING_ESC_KEY)) {
+            if (event.keyCode === Keys.esc) {
+                this.ngZone.run(function () {
+                    _this.close.emit(new DialogCloseResult());
+                });
+            }
+        }
+        if (hasClasses(target, 'k-button') && hasClasses(parent, DIALOG_ELEMENTS_HANDLING_ARROWS) &&
+            (event.keyCode === Keys.left || event.keyCode === Keys.right)) {
+            this.ngZone.run(function () {
+                _this.handleActionButtonFocus(parent, event.keyCode);
+            });
+        }
+        if (event.keyCode === Keys.tab) {
+            this.ngZone.run(function () {
+                _this.keepFocusWithinComponent(target, event);
+            });
+        }
+    };
     DialogComponent.prototype.setServiceClasses = function (prevValue, value) {
         var _this = this;
-        var el = this._elRef.nativeElement;
+        var el = this.wrapper.nativeElement;
         if (prevValue) {
             parseCSSClassNames(prevValue).forEach(function (className) {
-                _this._renderer.removeClass(el, className);
+                _this.renderer.removeClass(el, className);
             });
         }
         if (value) {
             parseCSSClassNames(value).forEach(function (className) {
-                _this._renderer.addClass(el, className);
+                _this.renderer.addClass(el, className);
             });
         }
     };
@@ -646,7 +665,7 @@ var DialogComponent = /** @class */ (function () {
      * @hidden
      */
     DialogComponent.prototype.handleInitialFocus = function () {
-        var wrapper = this._elRef.nativeElement;
+        var wrapper = this.wrapper.nativeElement;
         var primaryButton = wrapper.querySelector('.k-primary');
         if (this.autoFocusedElement) {
             var initiallyFocusedElement = wrapper.querySelector(this.autoFocusedElement);
@@ -684,7 +703,7 @@ var DialogComponent = /** @class */ (function () {
      * @hidden
      */
     DialogComponent.prototype.keepFocusWithinComponent = function (target, event) {
-        var wrapper = this._elRef.nativeElement;
+        var wrapper = this.wrapper.nativeElement;
         var _a = this.getFirstAndLastFocusable(wrapper), firstFocusable = _a[0], lastFocusable = _a[1];
         var tabAfterLastFocusable = !event.shiftKey && target === lastFocusable;
         var shiftTabAfterFirstFocusable = event.shiftKey && target === firstFocusable;
@@ -840,12 +859,6 @@ var DialogComponent = /** @class */ (function () {
         ViewChild(DialogActionsComponent, { static: false }),
         __metadata("design:type", DialogActionsComponent)
     ], DialogComponent.prototype, "actionsView", void 0);
-    __decorate([
-        HostListener('keydown', ['$event']),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Object]),
-        __metadata("design:returntype", void 0)
-    ], DialogComponent.prototype, "onComponentKeydown", null);
     __decorate([
         HostBinding('class.k-dialog-wrapper'),
         __metadata("design:type", Boolean),
@@ -1691,10 +1704,12 @@ var WindowTitleBarComponent = /** @class */ (function () {
  * @hidden
  */
 var NavigationService = /** @class */ (function () {
-    function NavigationService(window) {
+    function NavigationService(window, ngZone) {
         this.window = window;
+        this.ngZone = ngZone;
     }
     NavigationService.prototype.process = function (ev) {
+        var _this = this;
         var key = ev.keyCode;
         switch (key) {
             case Keys.up:
@@ -1702,11 +1717,15 @@ var NavigationService = /** @class */ (function () {
             case Keys.left:
             case Keys.right: {
                 ev.preventDefault();
-                this.handleArrow(key, ev);
+                this.ngZone.run(function () {
+                    _this.handleArrow(key, ev);
+                });
                 break;
             }
             case Keys.esc:
-                this.handleEscape();
+                this.ngZone.run(function () {
+                    _this.handleEscape();
+                });
                 break;
             default:
                 break;
@@ -1822,7 +1841,8 @@ var NavigationService = /** @class */ (function () {
     };
     NavigationService = __decorate([
         Injectable(),
-        __metadata("design:paramtypes", [DragResizeService])
+        __metadata("design:paramtypes", [DragResizeService,
+            NgZone])
     ], NavigationService);
     return NavigationService;
 }());
@@ -1893,6 +1913,7 @@ var WindowComponent = /** @class */ (function () {
         this.draged = false;
         this.resized = false;
         this.windowSubscription = new Subscription();
+        this.domSubs = new Subscription();
         validatePackage(packageMetadata);
         this.direction = this.localization.rtl ? 'rtl' : 'ltr';
         this.localizationChangeSubscription = this.localization.changes
@@ -2134,6 +2155,7 @@ var WindowComponent = /** @class */ (function () {
         this.ngZone.runOutsideAngular(function () {
             return Promise.resolve(null).then(function () { return _this.setInitialOffset(); });
         });
+        this.initDomEvents();
     };
     WindowComponent.prototype.ngOnInit = function () {
         this.renderer.removeAttribute(this.el.nativeElement, 'title');
@@ -2169,6 +2191,9 @@ var WindowComponent = /** @class */ (function () {
         if (this.windowSubscription) {
             this.windowSubscription.unsubscribe();
         }
+        if (this.domSubs) {
+            this.domSubs.unsubscribe();
+        }
         this.localizationChangeSubscription.unsubscribe();
     };
     /**
@@ -2254,14 +2279,6 @@ var WindowComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
-    /**
-     * @hidden
-     */
-    WindowComponent.prototype.onComponentKeydown = function (event) {
-        if (hasClasses(event.target, WINDOW_CLASSES)) {
-            this.navigation.process(event);
-        }
-    };
     /**
      * @hidden
      */
@@ -2336,6 +2353,22 @@ var WindowComponent = /** @class */ (function () {
             }
         }));
     };
+    WindowComponent.prototype.initDomEvents = function () {
+        var _this = this;
+        if (!this.el) {
+            return;
+        }
+        this.ngZone.runOutsideAngular(function () {
+            _this.domSubs.add(_this.renderer.listen(_this.el.nativeElement, 'keydown', function (ev) {
+                _this.onKeyDown(ev);
+            }));
+        });
+    };
+    WindowComponent.prototype.onKeyDown = function (event) {
+        if (hasClasses(event.target, WINDOW_CLASSES)) {
+            this.navigation.process(event);
+        }
+    };
     WindowComponent.prototype.setServiceClasses = function (prevValue, value) {
         var _this = this;
         var el = this.el.nativeElement;
@@ -2564,12 +2597,6 @@ var WindowComponent = /** @class */ (function () {
         __metadata("design:type", Boolean),
         __metadata("design:paramtypes", [])
     ], WindowComponent.prototype, "wrapperMinimizedClass", null);
-    __decorate([
-        HostListener('keydown', ['$event']),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Object]),
-        __metadata("design:returntype", void 0)
-    ], WindowComponent.prototype, "onComponentKeydown", null);
     __decorate([
         HostListener('focus'),
         __metadata("design:type", Function),