@progress/kendo-angular-dialog 5.2.1 → 5.2.3

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: 1635940433,
+    publishDate: 1637576271,
     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);
 
 /**
@@ -1843,10 +1860,15 @@ let WindowComponent = class WindowComponent {
          * 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
@@ -2014,6 +2036,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 +2071,9 @@ let WindowComponent = class WindowComponent {
         if (this.windowSubscription) {
             this.windowSubscription.unsubscribe();
         }
+        if (this.domSubs) {
+            this.domSubs.unsubscribe();
+        }
         this.localizationChangeSubscription.unsubscribe();
     }
     /**
@@ -2109,14 +2135,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 +2208,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 +2446,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),