@progress/kendo-angular-dialog 5.1.1 → 5.2.0

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,7 +59,45 @@ 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 () {
+            return this._htmlAttributes;
+        },
+        /**
+         * @hidden
+         */
+        set: function (attributes) {
+            util_1.setHTMLAttributes(attributes, this._renderer, this._elRef.nativeElement);
+            var el = this._elRef.nativeElement;
+            var dir = el.getAttribute('dir');
+            var tIndex = el.getAttribute('tabindex');
+            if (this.direction !== dir) {
+                this.direction = dir;
+            }
+            if (this.tabIndex !== tIndex) {
+                this.tabIndex = tIndex;
+            }
+            this._htmlAttributes = attributes;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DialogComponent.prototype, "cssClass", {
+        get: function () {
+            return this._cssClass;
+        },
+        /**
+         * @hidden
+         */
+        set: function (classes) {
+            this.setServiceClasses(this._cssClass, classes);
+            this._cssClass = classes;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(DialogComponent.prototype, "dir", {
         get: function () {
             return this.direction;
@@ -86,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;
         }
@@ -101,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');
@@ -136,6 +182,20 @@ var DialogComponent = /** @class */ (function () {
             wrapper.focus();
         }
     };
+    DialogComponent.prototype.setServiceClasses = function (prevValue, value) {
+        var _this = this;
+        var el = this._elRef.nativeElement;
+        if (prevValue) {
+            util_1.parseCSSClassNames(prevValue).forEach(function (className) {
+                _this._renderer.removeClass(el, className);
+            });
+        }
+        if (value) {
+            util_1.parseCSSClassNames(value).forEach(function (className) {
+                _this._renderer.addClass(el, className);
+            });
+        }
+    };
     /**
      * @hidden
      */
@@ -178,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();
         }
@@ -207,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
@@ -217,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;
@@ -320,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 }),
@@ -363,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-widget 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/dialog/dialog.service.js

@@ -171,6 +171,8 @@ var DialogService = /** @class */ (function () {
         instance.maxHeight = options.maxHeight;
         instance.autoFocusedElement = options.autoFocusedElement;
         instance.closeTitle = options.closeTitle;
+        instance.cssClass = options.cssClass;
+        instance.htmlAttributes = options.htmlAttributes;
         if (options.content instanceof core_1.TemplateRef) {
             instance.contentTemplate = options.content;
         }

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: 1631198413,
+    publishDate: 1634903940,
     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/window.component.js

@@ -121,6 +121,43 @@ var WindowComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(WindowComponent.prototype, "cssClass", {
+        get: function () {
+            return this._cssClass;
+        },
+        /**
+         * @hidden
+         */
+        set: function (classes) {
+            this.setServiceClasses(this._cssClass, classes);
+            this._cssClass = classes;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(WindowComponent.prototype, "htmlAttributes", {
+        get: function () {
+            return this._htmlAttributes;
+        },
+        /**
+         * @hidden
+         */
+        set: function (attributes) {
+            util_1.setHTMLAttributes(attributes, this.renderer, this.el.nativeElement);
+            var el = this.el.nativeElement;
+            var dir = el.getAttribute('dir');
+            var tIndex = el.getAttribute('tabindex');
+            if (this.direction !== dir) {
+                this.direction = dir;
+            }
+            if (this.tabIndex !== tIndex) {
+                this.tabIndex = tIndex;
+            }
+            this._htmlAttributes = attributes;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(WindowComponent.prototype, "state", {
         get: function () {
             return this.options.state;
@@ -489,6 +526,20 @@ var WindowComponent = /** @class */ (function () {
             }
         }));
     };
+    WindowComponent.prototype.setServiceClasses = function (prevValue, value) {
+        var _this = this;
+        var el = this.el.nativeElement;
+        if (prevValue) {
+            util_1.parseCSSClassNames(prevValue).forEach(function (className) {
+                _this.renderer.removeClass(el, className);
+            });
+        }
+        if (value) {
+            util_1.parseCSSClassNames(value).forEach(function (className) {
+                _this.renderer.addClass(el, className);
+            });
+        }
+    };
     WindowComponent.prototype.setNextZIndex = function () {
         var currentZIndex = this.el.nativeElement.style['z-index'];
         var nextPossibleZIndex = this.service.nextPossibleZIndex;
@@ -657,7 +708,6 @@ var WindowComponent = /** @class */ (function () {
         tslib_1.__metadata("design:type", Number)
     ], WindowComponent.prototype, "tabIndex", void 0);
     tslib_1.__decorate([
-        core_1.HostBinding('class.k-widget'),
         core_1.HostBinding('class.k-window'),
         tslib_1.__metadata("design:type", Boolean),
         tslib_1.__metadata("design:paramtypes", [])

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

@@ -119,6 +119,12 @@ var WindowService = /** @class */ (function () {
         return windowRef;
     };
     WindowService.prototype.applyOptions = function (instance, options) {
+        if (util_1.isPresent(options.htmlAttributes)) {
+            instance.htmlAttributes = options.htmlAttributes;
+        }
+        if (util_1.isPresent(options.cssClass)) {
+            instance.cssClass = options.cssClass;
+        }
         if (util_1.isPresent(options.title)) {
             instance.title = options.title;
         }