@progress/kendo-angular-dialog 5.2.0-dev.202109270843 → 5.2.1-dev.202110281710

package/dist/fesm5/index.js

@@ -3,7 +3,7 @@
 * 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, ViewChild, HostListener, Renderer2, ChangeDetectorRef, Injectable, isDevMode, ComponentFactoryResolver, Directive, Host, ContentChild, ViewChildren, ViewContainerRef, forwardRef, NgModule } from '@angular/core';
+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 { 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';
@@ -180,7 +180,7 @@ var DialogTitleBarComponent = /** @class */ (function () {
     DialogTitleBarComponent.prototype.ngAfterViewInit = function () {
         var _this = this;
         this.zone.onStable.pipe(take(1)).subscribe(function () {
-            var element = _this.hostElement.nativeElement;
+            var element = _this.hostElement.nativeElement.querySelector('.k-dialog-title');
             element.setAttribute('id', _this.id);
         });
     };
@@ -239,7 +239,7 @@ var packageMetadata = {
     name: '@progress/kendo-angular-dialog',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1632732133,
+    publishDate: 1635440955,
     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'
 };
@@ -483,13 +483,17 @@ var DialogComponent = /** @class */ (function () {
          * @hidden
          */
         this.titleId = null;
+        /**
+         * @hidden
+         */
+        this.contentId = null;
         /**
          * Fires when the user clicks an action button of the Dialog.
          * The event is fired only when the action buttons are specified through the `actions` options.
          */
         this.action = new EventEmitter();
         /**
-         * Fires when the user clicks the **Close** button of the Dialog.
+         * Fires when the user clicks the **Close** button of the Dialog or the **ESC** key.
          */
         this.close = new EventEmitter();
         this.tabIndex = 0;
@@ -501,6 +505,7 @@ var DialogComponent = /** @class */ (function () {
             return (_this.direction = rtl ? 'rtl' : 'ltr');
         }));
         this.titleId = this.generateTitleId();
+        this.contentId = this.generateContentId();
     }
     Object.defineProperty(DialogComponent.prototype, "htmlAttributes", {
         get: function () {
@@ -569,6 +574,7 @@ var DialogComponent = /** @class */ (function () {
     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);
         if (this.titlebarContent.first) {
             this.titlebarContent.first.id = this.titleId;
         }
@@ -584,23 +590,26 @@ var DialogComponent = /** @class */ (function () {
             }));
         }
     };
-    DialogComponent.prototype.ngOnChanges = function (changes) {
-        var _this = this;
-        if (changes.title && changes.title.currentValue && !changes.title.previousValue) {
-            this.zone.onStable.pipe(take(1)).subscribe(function () {
-                _this.bubble('close', _this.titlebarView);
-                _this._renderer.setAttribute(_this._elRef.nativeElement.querySelector('.k-dialog'), 'aria-labelledby', _this.titleId);
-            });
-        }
-    };
     DialogComponent.prototype.ngAfterViewInit = function () {
+        var _this = this;
         this.handleInitialFocus();
-        this.bubble('close', this.titlebarView);
+        this.bubble('close', this.titlebarView.first);
         this.bubble('action', this.actionsView);
-        if (this.titlebarView || this.titlebarContent.first) {
+        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);
         }
+        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.bubble('close', _this.titlebarView.first);
+                        _this._renderer.setAttribute(_this._elRef.nativeElement.querySelector('.k-dialog'), 'aria-labelledby', _this.titleId);
+                    });
+                }
+            }));
+        }
     };
     DialogComponent.prototype.ngOnInit = function () {
         this._renderer.removeAttribute(this._elRef.nativeElement, 'title');
@@ -675,16 +684,15 @@ var DialogComponent = /** @class */ (function () {
      * @hidden
      */
     DialogComponent.prototype.keepFocusWithinComponent = function (target, event) {
-        var firstFocusable = this._elRef.nativeElement;
-        var lastFocusable = this.getLastFocusableElement(firstFocusable);
-        var tabBeforeFirstFocusable = target === firstFocusable && event.shiftKey;
-        var tabAfterLastFocusable = !event.shiftKey && isPresent(lastFocusable) && target === lastFocusable;
-        var tabWithNoFocusable = !isPresent(lastFocusable) && !event.shiftKey;
-        if (tabBeforeFirstFocusable || tabWithNoFocusable) {
+        var wrapper = this._elRef.nativeElement;
+        var _a = this.getFirstAndLastFocusable(wrapper), firstFocusable = _a[0], lastFocusable = _a[1];
+        var tabAfterLastFocusable = !event.shiftKey && target === lastFocusable;
+        var shiftTabAfterFirstFocusable = event.shiftKey && target === firstFocusable;
+        if (tabAfterLastFocusable) {
             event.preventDefault();
             firstFocusable.focus();
         }
-        if (tabAfterLastFocusable) {
+        if (shiftTabAfterFirstFocusable) {
             event.preventDefault();
             lastFocusable.focus();
         }
@@ -704,9 +712,11 @@ var DialogComponent = /** @class */ (function () {
     /**
      * @hidden
      */
-    DialogComponent.prototype.getLastFocusableElement = function (parent) {
+    DialogComponent.prototype.getFirstAndLastFocusable = function (parent) {
         var all = this.getAllFocusableChildren(parent);
-        return all.length > 0 ? all[all.length - 1] : null;
+        var firstFocusable = all.length > 0 ? all[0] : parent;
+        var lastFocusable = all.length > 0 ? all[all.length - 1] : parent;
+        return [firstFocusable, lastFocusable];
     };
     /**
      * @hidden
@@ -714,6 +724,12 @@ var DialogComponent = /** @class */ (function () {
     DialogComponent.prototype.generateTitleId = function () {
         return 'kendo-dialog-title-' + Math.ceil(Math.random() * 1000000).toString();
     };
+    /**
+     * @hidden
+     */
+    DialogComponent.prototype.generateContentId = function () {
+        return 'kendo-dialog-content-' + Math.ceil(Math.random() * 1000000).toString();
+    };
     Object.defineProperty(DialogComponent.prototype, "wrapperClass", {
         get: function () {
             return true;
@@ -817,8 +833,8 @@ var DialogComponent = /** @class */ (function () {
         __metadata("design:type", QueryList)
     ], DialogComponent.prototype, "titlebarContent", void 0);
     __decorate([
-        ViewChild(DialogTitleBarComponent, { static: false }),
-        __metadata("design:type", DialogTitleBarComponent)
+        ViewChildren(DialogTitleBarComponent),
+        __metadata("design:type", QueryList)
     ], DialogComponent.prototype, "titlebarView", void 0);
     __decorate([
         ViewChild(DialogActionsComponent, { static: false }),
@@ -860,7 +876,7 @@ var DialogComponent = /** @class */ (function () {
                 }
             ],
             selector: 'kendo-dialog',
-            template: "\n        <ng-container\n            kendoDialogLocalizedMessages\n            i18n-closeTitle=\"kendo.dialog.closeTitle|The title of the close button\"\n            closeTitle=\"Close\"\n        >\n        <div class=\"k-overlay\" @overlayAppear></div>\n\n        <div class=\"k-window k-dialog\" role=\"dialog\" [ngStyle]=\"styles\" @dialogSlideInAppear>\n            <kendo-dialog-titlebar *ngIf=\"title\" [closeTitle]=\"closeTitle\" [id]=\"titleId\">{{ title }}</kendo-dialog-titlebar>\n            <ng-content select=\"kendo-dialog-titlebar\" *ngIf=\"!title\"></ng-content>\n\n            <div class=\"k-content k-window-content k-dialog-content\">\n                <ng-content *ngIf=\"!contentTemplate\"></ng-content>\n                <ng-template [ngTemplateOutlet]=\"contentTemplate\" *ngIf=\"contentTemplate\"></ng-template>\n            </div>\n\n            <ng-content select=\"kendo-dialog-actions\" *ngIf=\"!actions\"></ng-content>\n            <kendo-dialog-actions *ngIf=\"actions\" [actions]=\"actions\" [layout]=\"actionsLayout\"> </kendo-dialog-actions>\n        </div>\n    </ng-container>\n    "
+            template: "\n        <ng-container\n            kendoDialogLocalizedMessages\n            i18n-closeTitle=\"kendo.dialog.closeTitle|The title of the close button\"\n            closeTitle=\"Close\"\n        >\n        <div class=\"k-overlay\" @overlayAppear></div>\n\n        <div class=\"k-window k-dialog\" role=\"dialog\" aria-modal=\"true\" [ngStyle]=\"styles\" @dialogSlideInAppear>\n            <kendo-dialog-titlebar *ngIf=\"title\" [closeTitle]=\"closeTitle\" [id]=\"titleId\">{{ title }}</kendo-dialog-titlebar>\n            <ng-content select=\"kendo-dialog-titlebar\" *ngIf=\"!title\"></ng-content>\n\n            <div [id]=\"contentId\" class=\"k-content k-window-content k-dialog-content\">\n                <ng-content *ngIf=\"!contentTemplate\"></ng-content>\n                <ng-template [ngTemplateOutlet]=\"contentTemplate\" *ngIf=\"contentTemplate\"></ng-template>\n            </div>\n\n            <ng-content select=\"kendo-dialog-actions\" *ngIf=\"!actions\"></ng-content>\n            <kendo-dialog-actions *ngIf=\"actions\" [actions]=\"actions\" [layout]=\"actionsLayout\"> </kendo-dialog-actions>\n        </div>\n    </ng-container>\n    "
         }),
         __metadata("design:paramtypes", [ElementRef,
             Renderer2,

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

@@ -42,7 +42,7 @@ var DialogTitleBarComponent = /** @class */ (function () {
     DialogTitleBarComponent.prototype.ngAfterViewInit = function () {
         var _this = this;
         this.zone.onStable.pipe(operators_1.take(1)).subscribe(function () {
-            var element = _this.hostElement.nativeElement;
+            var element = _this.hostElement.nativeElement.querySelector('.k-dialog-title');
             element.setAttribute('id', _this.id);
         });
     };

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

@@ -37,13 +37,17 @@ var DialogComponent = /** @class */ (function () {
          * @hidden
          */
         this.titleId = null;
+        /**
+         * @hidden
+         */
+        this.contentId = null;
         /**
          * Fires when the user clicks an action button of the Dialog.
          * The event is fired only when the action buttons are specified through the `actions` options.
          */
         this.action = new core_1.EventEmitter();
         /**
-         * Fires when the user clicks the **Close** button of the Dialog.
+         * Fires when the user clicks the **Close** button of the Dialog or the **ESC** key.
          */
         this.close = new core_1.EventEmitter();
         this.tabIndex = 0;
@@ -55,6 +59,7 @@ var DialogComponent = /** @class */ (function () {
             return (_this.direction = rtl ? 'rtl' : 'ltr');
         }));
         this.titleId = this.generateTitleId();
+        this.contentId = this.generateContentId();
     }
     Object.defineProperty(DialogComponent.prototype, "htmlAttributes", {
         get: function () {
@@ -123,6 +128,7 @@ var DialogComponent = /** @class */ (function () {
     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);
         if (this.titlebarContent.first) {
             this.titlebarContent.first.id = this.titleId;
         }
@@ -138,23 +144,26 @@ var DialogComponent = /** @class */ (function () {
             }));
         }
     };
-    DialogComponent.prototype.ngOnChanges = function (changes) {
-        var _this = this;
-        if (changes.title && changes.title.currentValue && !changes.title.previousValue) {
-            this.zone.onStable.pipe(operators_1.take(1)).subscribe(function () {
-                _this.bubble('close', _this.titlebarView);
-                _this._renderer.setAttribute(_this._elRef.nativeElement.querySelector('.k-dialog'), 'aria-labelledby', _this.titleId);
-            });
-        }
-    };
     DialogComponent.prototype.ngAfterViewInit = function () {
+        var _this = this;
         this.handleInitialFocus();
-        this.bubble('close', this.titlebarView);
+        this.bubble('close', this.titlebarView.first);
         this.bubble('action', this.actionsView);
-        if (this.titlebarView || this.titlebarContent.first) {
+        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);
         }
+        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.bubble('close', _this.titlebarView.first);
+                        _this._renderer.setAttribute(_this._elRef.nativeElement.querySelector('.k-dialog'), 'aria-labelledby', _this.titleId);
+                    });
+                }
+            }));
+        }
     };
     DialogComponent.prototype.ngOnInit = function () {
         this._renderer.removeAttribute(this._elRef.nativeElement, 'title');
@@ -229,16 +238,15 @@ var DialogComponent = /** @class */ (function () {
      * @hidden
      */
     DialogComponent.prototype.keepFocusWithinComponent = function (target, event) {
-        var firstFocusable = this._elRef.nativeElement;
-        var lastFocusable = this.getLastFocusableElement(firstFocusable);
-        var tabBeforeFirstFocusable = target === firstFocusable && event.shiftKey;
-        var tabAfterLastFocusable = !event.shiftKey && util_1.isPresent(lastFocusable) && target === lastFocusable;
-        var tabWithNoFocusable = !util_1.isPresent(lastFocusable) && !event.shiftKey;
-        if (tabBeforeFirstFocusable || tabWithNoFocusable) {
+        var wrapper = this._elRef.nativeElement;
+        var _a = this.getFirstAndLastFocusable(wrapper), firstFocusable = _a[0], lastFocusable = _a[1];
+        var tabAfterLastFocusable = !event.shiftKey && target === lastFocusable;
+        var shiftTabAfterFirstFocusable = event.shiftKey && target === firstFocusable;
+        if (tabAfterLastFocusable) {
             event.preventDefault();
             firstFocusable.focus();
         }
-        if (tabAfterLastFocusable) {
+        if (shiftTabAfterFirstFocusable) {
             event.preventDefault();
             lastFocusable.focus();
         }
@@ -258,9 +266,11 @@ var DialogComponent = /** @class */ (function () {
     /**
      * @hidden
      */
-    DialogComponent.prototype.getLastFocusableElement = function (parent) {
+    DialogComponent.prototype.getFirstAndLastFocusable = function (parent) {
         var all = this.getAllFocusableChildren(parent);
-        return all.length > 0 ? all[all.length - 1] : null;
+        var firstFocusable = all.length > 0 ? all[0] : parent;
+        var lastFocusable = all.length > 0 ? all[all.length - 1] : parent;
+        return [firstFocusable, lastFocusable];
     };
     /**
      * @hidden
@@ -268,6 +278,12 @@ var DialogComponent = /** @class */ (function () {
     DialogComponent.prototype.generateTitleId = function () {
         return 'kendo-dialog-title-' + Math.ceil(Math.random() * 1000000).toString();
     };
+    /**
+     * @hidden
+     */
+    DialogComponent.prototype.generateContentId = function () {
+        return 'kendo-dialog-content-' + Math.ceil(Math.random() * 1000000).toString();
+    };
     Object.defineProperty(DialogComponent.prototype, "wrapperClass", {
         get: function () {
             return true;
@@ -371,8 +387,8 @@ var DialogComponent = /** @class */ (function () {
         tslib_1.__metadata("design:type", core_1.QueryList)
     ], DialogComponent.prototype, "titlebarContent", void 0);
     tslib_1.__decorate([
-        core_1.ViewChild(dialog_titlebar_component_1.DialogTitleBarComponent, { static: false }),
-        tslib_1.__metadata("design:type", dialog_titlebar_component_1.DialogTitleBarComponent)
+        core_1.ViewChildren(dialog_titlebar_component_1.DialogTitleBarComponent),
+        tslib_1.__metadata("design:type", core_1.QueryList)
     ], DialogComponent.prototype, "titlebarView", void 0);
     tslib_1.__decorate([
         core_1.ViewChild(dialog_actions_component_1.DialogActionsComponent, { static: false }),
@@ -414,7 +430,7 @@ var DialogComponent = /** @class */ (function () {
                 }
             ],
             selector: 'kendo-dialog',
-            template: "\n        <ng-container\n            kendoDialogLocalizedMessages\n            i18n-closeTitle=\"kendo.dialog.closeTitle|The title of the close button\"\n            closeTitle=\"Close\"\n        >\n        <div class=\"k-overlay\" @overlayAppear></div>\n\n        <div class=\"k-window k-dialog\" role=\"dialog\" [ngStyle]=\"styles\" @dialogSlideInAppear>\n            <kendo-dialog-titlebar *ngIf=\"title\" [closeTitle]=\"closeTitle\" [id]=\"titleId\">{{ title }}</kendo-dialog-titlebar>\n            <ng-content select=\"kendo-dialog-titlebar\" *ngIf=\"!title\"></ng-content>\n\n            <div class=\"k-content k-window-content k-dialog-content\">\n                <ng-content *ngIf=\"!contentTemplate\"></ng-content>\n                <ng-template [ngTemplateOutlet]=\"contentTemplate\" *ngIf=\"contentTemplate\"></ng-template>\n            </div>\n\n            <ng-content select=\"kendo-dialog-actions\" *ngIf=\"!actions\"></ng-content>\n            <kendo-dialog-actions *ngIf=\"actions\" [actions]=\"actions\" [layout]=\"actionsLayout\"> </kendo-dialog-actions>\n        </div>\n    </ng-container>\n    "
+            template: "\n        <ng-container\n            kendoDialogLocalizedMessages\n            i18n-closeTitle=\"kendo.dialog.closeTitle|The title of the close button\"\n            closeTitle=\"Close\"\n        >\n        <div class=\"k-overlay\" @overlayAppear></div>\n\n        <div class=\"k-window k-dialog\" role=\"dialog\" aria-modal=\"true\" [ngStyle]=\"styles\" @dialogSlideInAppear>\n            <kendo-dialog-titlebar *ngIf=\"title\" [closeTitle]=\"closeTitle\" [id]=\"titleId\">{{ title }}</kendo-dialog-titlebar>\n            <ng-content select=\"kendo-dialog-titlebar\" *ngIf=\"!title\"></ng-content>\n\n            <div [id]=\"contentId\" class=\"k-content k-window-content k-dialog-content\">\n                <ng-content *ngIf=\"!contentTemplate\"></ng-content>\n                <ng-template [ngTemplateOutlet]=\"contentTemplate\" *ngIf=\"contentTemplate\"></ng-template>\n            </div>\n\n            <ng-content select=\"kendo-dialog-actions\" *ngIf=\"!actions\"></ng-content>\n            <kendo-dialog-actions *ngIf=\"actions\" [actions]=\"actions\" [layout]=\"actionsLayout\"> </kendo-dialog-actions>\n        </div>\n    </ng-container>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [core_1.ElementRef,
             core_1.Renderer2,

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: 1632732133,
+    publishDate: 1635440955,
     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'
 };