@progress/kendo-angular-dialog 5.2.0 → 5.2.2

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

@@ -3,17 +3,19 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
-import { Injectable } from "@angular/core";
+import { Injectable, NgZone } from "@angular/core";
 import { DragResizeService } from './drag-resize.service';
 import { isPresent, OFFSET_STYLES, Keys } from '../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 Keys.up:
@@ -21,11 +23,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;
@@ -141,7 +147,8 @@ var NavigationService = /** @class */ (function () {
     };
     NavigationService = tslib_1.__decorate([
         Injectable(),
-        tslib_1.__metadata("design:paramtypes", [DragResizeService])
+        tslib_1.__metadata("design:paramtypes", [DragResizeService,
+            NgZone])
     ], NavigationService);
     return NavigationService;
 }());

package/dist/es/window/window.component.js

@@ -81,6 +81,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
@@ -322,6 +323,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');
@@ -357,6 +359,9 @@ var WindowComponent = /** @class */ (function () {
         if (this.windowSubscription) {
             this.windowSubscription.unsubscribe();
         }
+        if (this.domSubs) {
+            this.domSubs.unsubscribe();
+        }
         this.localizationChangeSubscription.unsubscribe();
     };
     /**
@@ -442,14 +447,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
      */
@@ -524,6 +521,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;
@@ -752,12 +765,6 @@ var WindowComponent = /** @class */ (function () {
         tslib_1.__metadata("design:type", Boolean),
         tslib_1.__metadata("design:paramtypes", [])
     ], WindowComponent.prototype, "wrapperMinimizedClass", null);
-    tslib_1.__decorate([
-        HostListener('keydown', ['$event']),
-        tslib_1.__metadata("design:type", Function),
-        tslib_1.__metadata("design:paramtypes", [Object]),
-        tslib_1.__metadata("design:returntype", void 0)
-    ], WindowComponent.prototype, "onComponentKeydown", null);
     tslib_1.__decorate([
         HostListener('focus'),
         tslib_1.__metadata("design:type", Function),

package/dist/es2015/dialog/dialog.component.d.ts

@@ -12,10 +12,10 @@ import { DialogAction } from './dialog-settings';
  * Represents the [Kendo UI Dialog component for Angular]({% slug overview_dialog_dialogs %}).
  */
 export declare class DialogComponent implements AfterContentInit, AfterViewInit, OnInit, OnDestroy {
-    private _elRef;
-    private _renderer;
+    private wrapper;
+    private renderer;
     private cdr;
-    private zone;
+    private ngZone;
     /**
      * Specifies the action buttons that will be rendered.
      */
@@ -115,11 +115,8 @@ export declare class DialogComponent implements AfterContentInit, AfterViewInit,
     private _cssClass;
     private direction;
     private subscriptions;
-    constructor(_elRef: ElementRef, _renderer: Renderer2, localization: LocalizationService, cdr: ChangeDetectorRef, zone: NgZone);
-    /**
-     * @hidden
-     */
-    onComponentKeydown(event: any): void;
+    private domSubs;
+    constructor(wrapper: ElementRef, renderer: Renderer2, localization: LocalizationService, cdr: ChangeDetectorRef, ngZone: NgZone);
     ngAfterContentInit(): void;
     ngAfterViewInit(): void;
     ngOnInit(): void;
@@ -128,6 +125,8 @@ export declare class DialogComponent implements AfterContentInit, AfterViewInit,
      * Focuses the wrapper of the Dialog component.
      */
     focus(): void;
+    private initDomEvents;
+    private onKeyDown;
     private setServiceClasses;
     /**
      * @hidden

package/dist/es2015/dialog/dialog.component.js

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
-import { Component, EventEmitter, HostBinding, Input, ViewChild, Output, ElementRef, Renderer2, HostListener, ChangeDetectorRef, NgZone, ContentChildren, QueryList, ViewChildren } from '@angular/core';
+import { Component, EventEmitter, HostBinding, Input, ViewChild, Output, ElementRef, Renderer2, ChangeDetectorRef, NgZone, ContentChildren, QueryList, ViewChildren } from '@angular/core';
 import { animate, state, style, transition, trigger } from '@angular/animations';
 import { DialogActionsComponent } from './dialog-actions.component';
 import { DialogTitleBarComponent } from './dialog-titlebar.component';
@@ -14,15 +14,16 @@ import { hasClasses, Keys, isPresent, focusableSelector, isFocusable, DIALOG_ELE
 import { DialogCloseResult } from './dialog-settings';
 import { DIALOG_LOCALIZATION_SERVICE } from './../localization/dialog-localization.service';
 import { take } from 'rxjs/operators';
+import { Subscription } from 'rxjs';
 /**
  * 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.
@@ -49,6 +50,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')));
@@ -59,8 +61,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) {
@@ -87,29 +89,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;
         }
@@ -117,9 +99,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);
                     });
                 }
             }));
@@ -131,47 +113,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);
             });
         }
     }
@@ -179,7 +197,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);
@@ -217,7 +235,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;
@@ -365,12 +383,6 @@ tslib_1.__decorate([
     ViewChild(DialogActionsComponent, { static: false }),
     tslib_1.__metadata("design:type", DialogActionsComponent)
 ], DialogComponent.prototype, "actionsView", void 0);
-tslib_1.__decorate([
-    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([
     HostBinding('class.k-dialog-wrapper'),
     tslib_1.__metadata("design:type", Boolean),