@progress/kendo-angular-dialog 5.2.1-dev.202110281710 → 5.2.3-dev.202111171048

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: 1635440955,
+    publishDate: 1637146063,
     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;
 }());
@@ -1889,10 +1909,15 @@ var WindowComponent = /** @class */ (function () {
          * two-way binding of the `state` property.
          */
         this.stateChange = new EventEmitter();
+        /**
+         * @hidden
+         */
+        this.messages = {};
         this.tabIndex = 0;
         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 +2159,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 +2195,9 @@ var WindowComponent = /** @class */ (function () {
         if (this.windowSubscription) {
             this.windowSubscription.unsubscribe();
         }
+        if (this.domSubs) {
+            this.domSubs.unsubscribe();
+        }
         this.localizationChangeSubscription.unsubscribe();
     };
     /**
@@ -2254,14 +2283,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 +2357,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 +2601,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),

package/dist/npm/dialog/dialog.component.js

@@ -16,16 +16,17 @@ var util_1 = require("../common/util");
 var dialog_settings_1 = require("./dialog-settings");
 var dialog_localization_service_1 = require("./../localization/dialog-localization.service");
 var operators_1 = require("rxjs/operators");
+var rxjs_1 = require("rxjs");
 /**
  * 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.
@@ -52,6 +53,7 @@ var DialogComponent = /** @class */ (function () {
         this.close = new core_1.EventEmitter();
         this.tabIndex = 0;
         this.subscriptions = [];
+        this.domSubs = new rxjs_1.Subscription();
         kendo_licensing_1.validatePackage(package_metadata_1.packageMetadata);
         this.direction = localization.rtl ? 'rtl' : 'ltr';
         this.subscriptions.push(localization.changes.subscribe(function (_a) {
@@ -69,8 +71,8 @@ var DialogComponent = /** @class */ (function () {
          * @hidden
          */
         set: function (attributes) {
-            util_1.setHTMLAttributes(attributes, this._renderer, this._elRef.nativeElement);
-            var el = this._elRef.nativeElement;
+            util_1.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) {
@@ -105,30 +107,10 @@ var DialogComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
-    /**
-     * @hidden
-     */
-    DialogComponent.prototype.onComponentKeydown = function (event) {
-        var target = event.target;
-        var parent = target.parentElement;
-        if (util_1.hasClasses(target, util_1.DIALOG_ELEMENTS_HANDLING_ESC_KEY) || util_1.hasClasses(parent, util_1.DIALOG_ELEMENTS_HANDLING_ESC_KEY)) {
-            if (event.keyCode === util_1.Keys.esc) {
-                this.close.emit(new dialog_settings_1.DialogCloseResult());
-            }
-        }
-        if (util_1.hasClasses(target, 'k-button') &&
-            util_1.hasClasses(parent, util_1.DIALOG_ELEMENTS_HANDLING_ARROWS) &&
-            (event.keyCode === util_1.Keys.left || event.keyCode === util_1.Keys.right)) {
-            this.handleActionButtonFocus(parent, event.keyCode);
-        }
-        if (event.keyCode === util_1.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;
         }
@@ -136,9 +118,9 @@ var DialogComponent = /** @class */ (function () {
             this.subscriptions.push(this.titlebarContent.changes.subscribe(function () {
                 if (util_1.isPresent(_this.titlebarContent.first)) {
                     _this.titlebarContent.first.id = _this.titleId;
-                    _this.zone.onStable.pipe(operators_1.take(1)).subscribe(function () {
+                    _this.ngZone.onStable.pipe(operators_1.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);
                     });
                 }
             }));
@@ -151,48 +133,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 (util_1.isPresent(_this.titlebarView.first)) {
                     _this.titlebarView.first.id = _this.titleId;
-                    _this.zone.onStable.pipe(operators_1.take(1)).subscribe(function () {
+                    _this.ngZone.onStable.pipe(operators_1.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 (util_1.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 (util_1.hasClasses(target, util_1.DIALOG_ELEMENTS_HANDLING_ESC_KEY) || util_1.hasClasses(parent, util_1.DIALOG_ELEMENTS_HANDLING_ESC_KEY)) {
+            if (event.keyCode === util_1.Keys.esc) {
+                this.ngZone.run(function () {
+                    _this.close.emit(new dialog_settings_1.DialogCloseResult());
+                });
+            }
+        }
+        if (util_1.hasClasses(target, 'k-button') && util_1.hasClasses(parent, util_1.DIALOG_ELEMENTS_HANDLING_ARROWS) &&
+            (event.keyCode === util_1.Keys.left || event.keyCode === util_1.Keys.right)) {
+            this.ngZone.run(function () {
+                _this.handleActionButtonFocus(parent, event.keyCode);
+            });
+        }
+        if (event.keyCode === util_1.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) {
             util_1.parseCSSClassNames(prevValue).forEach(function (className) {
-                _this._renderer.removeClass(el, className);
+                _this.renderer.removeClass(el, className);
             });
         }
         if (value) {
             util_1.parseCSSClassNames(value).forEach(function (className) {
-                _this._renderer.addClass(el, className);
+                _this.renderer.addClass(el, className);
             });
         }
     };
@@ -200,7 +220,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);
@@ -238,7 +258,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;
@@ -394,12 +414,6 @@ var DialogComponent = /** @class */ (function () {
         core_1.ViewChild(dialog_actions_component_1.DialogActionsComponent, { static: false }),
         tslib_1.__metadata("design:type", dialog_actions_component_1.DialogActionsComponent)
     ], DialogComponent.prototype, "actionsView", void 0);
-    tslib_1.__decorate([
-        core_1.HostListener('keydown', ['$event']),
-        tslib_1.__metadata("design:type", Function),
-        tslib_1.__metadata("design:paramtypes", [Object]),
-        tslib_1.__metadata("design:returntype", void 0)
-    ], DialogComponent.prototype, "onComponentKeydown", null);
     tslib_1.__decorate([
         core_1.HostBinding('class.k-dialog-wrapper'),
         tslib_1.__metadata("design:type", Boolean),

package/dist/npm/package-metadata.js

@@ -11,7 +11,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-angular-dialog',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1635440955,
+    publishDate: 1637146063,
     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'
 };

package/dist/npm/window/navigation.service.js

@@ -12,10 +12,12 @@ var util_1 = require("../common/util");
  * @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 util_1.Keys.up:
@@ -23,11 +25,15 @@ var NavigationService = /** @class */ (function () {
             case util_1.Keys.left:
             case util_1.Keys.right: {
                 ev.preventDefault();
-                this.handleArrow(key, ev);
+                this.ngZone.run(function () {
+                    _this.handleArrow(key, ev);
+                });
                 break;
             }
             case util_1.Keys.esc:
-                this.handleEscape();
+                this.ngZone.run(function () {
+                    _this.handleEscape();
+                });
                 break;
             default:
                 break;
@@ -143,7 +149,8 @@ var NavigationService = /** @class */ (function () {
     };
     NavigationService = tslib_1.__decorate([
         core_1.Injectable(),
-        tslib_1.__metadata("design:paramtypes", [drag_resize_service_1.DragResizeService])
+        tslib_1.__metadata("design:paramtypes", [drag_resize_service_1.DragResizeService,
+            core_1.NgZone])
     ], NavigationService);
     return NavigationService;
 }());