@progress/kendo-angular-dialog 5.1.1 → 5.2.0

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: 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'
 };
@@ -316,6 +316,60 @@ var isFocusable = function (element, checkVisibility) {
     }
     return false;
 };
+/**
+ * @hidden
+ */
+var setHTMLAttributes = function (attributes, renderer, element) {
+    for (var attribute in attributes) {
+        if (attribute) {
+            renderer.setAttribute(element, attribute, attributes[attribute]);
+        }
+    }
+};
+/**
+ * Receives CSS class declarations either as an object, string or array and returns an array of the class names.
+ *
+ * @hidden
+ */
+var parseCSSClassNames = function (value) {
+    if (isObject(value)) {
+        return parseObjectClassNames(value);
+    }
+    if (isString(value)) {
+        return parseStringClassNames(value);
+    }
+    if (Array.isArray(value)) {
+        return parseArrayClassNames(value);
+    }
+};
+var parseObjectClassNames = function (value) {
+    var classes = [];
+    Object.keys(value).forEach(function (className) {
+        var currentClassName = splitStringToArray(className);
+        if (value[className] && currentClassName[0]) {
+            classes.push.apply(classes, currentClassName);
+        }
+    });
+    return classes;
+};
+var parseStringClassNames = function (value) {
+    var classes = [];
+    var classesArray = splitStringToArray(value);
+    classesArray.forEach(function (className) {
+        classes.push(className);
+    });
+    return classes;
+};
+var parseArrayClassNames = function (value) {
+    var classes = [];
+    value.forEach(function (className) {
+        var current = splitStringToArray(className);
+        if (current[0]) {
+            classes.push.apply(classes, current);
+        }
+    });
+    return classes;
+};
 /**
  * @hidden
  */
@@ -352,6 +406,10 @@ var OFFSET_STYLES = ['top', 'left', 'width', 'height'];
  * @hidden
  */
 var isString = function (value) { return value instanceof String || typeof value === 'string'; };
+/**
+ * @hidden
+ */
+var isObject = function (value) { return isPresent(value) && !Array.isArray(value) && typeof value === 'object'; };
 /**
  * @hidden
  */
@@ -360,6 +418,10 @@ var isNumber = function (value) { return typeof value === 'number' && isFinite(v
  * @hidden
  */
 var createValueWithUnit = function (value) { return value + (isNumber(value) ? 'px' : ''); };
+/**
+ * @hidden
+ */
+var splitStringToArray = function (value) { return value.trim().replace(/\s+/g, " ").split(' '); };
 
 /**
  * The settings for the Dialog actions when the Dialog is opened through `DialogService`
@@ -421,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;
@@ -439,7 +505,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) {
+            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;
@@ -470,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;
         }
@@ -485,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');
@@ -520,6 +628,20 @@ var DialogComponent = /** @class */ (function () {
             wrapper.focus();
         }
     };
+    DialogComponent.prototype.setServiceClasses = function (prevValue, value) {
+        var _this = this;
+        var el = this._elRef.nativeElement;
+        if (prevValue) {
+            parseCSSClassNames(prevValue).forEach(function (className) {
+                _this._renderer.removeClass(el, className);
+            });
+        }
+        if (value) {
+            parseCSSClassNames(value).forEach(function (className) {
+                _this._renderer.addClass(el, className);
+            });
+        }
+    };
     /**
      * @hidden
      */
@@ -562,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();
         }
@@ -591,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
@@ -601,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;
@@ -704,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 }),
@@ -747,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-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    "
         }),
         __metadata("design:paramtypes", [ElementRef,
             Renderer2,
@@ -973,6 +1102,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 TemplateRef) {
             instance.contentTemplate = options.content;
         }
@@ -1800,6 +1931,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) {
+            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;
@@ -2168,6 +2336,20 @@ var WindowComponent = /** @class */ (function () {
             }
         }));
     };
+    WindowComponent.prototype.setServiceClasses = function (prevValue, value) {
+        var _this = this;
+        var el = this.el.nativeElement;
+        if (prevValue) {
+            parseCSSClassNames(prevValue).forEach(function (className) {
+                _this.renderer.removeClass(el, className);
+            });
+        }
+        if (value) {
+            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;
@@ -2336,7 +2518,6 @@ var WindowComponent = /** @class */ (function () {
         __metadata("design:type", Number)
     ], WindowComponent.prototype, "tabIndex", void 0);
     __decorate([
-        HostBinding('class.k-widget'),
         HostBinding('class.k-window'),
         __metadata("design:type", Boolean),
         __metadata("design:paramtypes", [])
@@ -2836,6 +3017,12 @@ var WindowService = /** @class */ (function () {
         return windowRef;
     };
     WindowService.prototype.applyOptions = function (instance, options) {
+        if (isPresent(options.htmlAttributes)) {
+            instance.htmlAttributes = options.htmlAttributes;
+        }
+        if (isPresent(options.cssClass)) {
+            instance.cssClass = options.cssClass;
+        }
         if (isPresent(options.title)) {
             instance.title = options.title;
         }

package/dist/npm/common/util.js

@@ -80,6 +80,66 @@ exports.isFocusable = function (element, checkVisibility) {
     }
     return false;
 };
+/**
+ * @hidden
+ */
+exports.setHTMLAttributes = function (attributes, renderer, element) {
+    for (var attribute in attributes) {
+        if (attribute) {
+            renderer.setAttribute(element, attribute, attributes[attribute]);
+        }
+    }
+};
+/**
+ * Receives CSS class declarations either as an object, string or array and returns an array of the class names.
+ *
+ * @hidden
+ */
+exports.parseCSSClassNames = function (value) {
+    if (exports.isObject(value)) {
+        return parseObjectClassNames(value);
+    }
+    if (exports.isString(value)) {
+        return parseStringClassNames(value);
+    }
+    if (Array.isArray(value)) {
+        return parseArrayClassNames(value);
+    }
+};
+var parseObjectClassNames = function (value) {
+    var classes = [];
+    Object.keys(value).forEach(function (className) {
+        var currentClassName = exports.splitStringToArray(className);
+        if (value[className] && currentClassName[0]) {
+            classes.push.apply(classes, currentClassName);
+        }
+    });
+    return classes;
+};
+var ɵ1 = parseObjectClassNames;
+exports.ɵ1 = ɵ1;
+var parseStringClassNames = function (value) {
+    var classes = [];
+    var classesArray = exports.splitStringToArray(value);
+    classesArray.forEach(function (className) {
+        classes.push(className);
+    });
+    return classes;
+};
+var ɵ2 = parseStringClassNames;
+exports.ɵ2 = ɵ2;
+var parseArrayClassNames = function (value) {
+    var classes = [];
+    value.forEach(function (className) {
+        var current = exports.splitStringToArray(className);
+        if (current[0]) {
+            classes.push.apply(classes, current);
+        }
+    });
+    return classes;
+};
+var ɵ3 = parseArrayClassNames;
+exports.ɵ3 = ɵ3;
 /**
  * @hidden
  */
@@ -128,6 +188,10 @@ exports.OFFSET_STYLES = ['top', 'left', 'width', 'height'];
  * @hidden
  */
 exports.isString = function (value) { return value instanceof String || typeof value === 'string'; };
+/**
+ * @hidden
+ */
+exports.isObject = function (value) { return exports.isPresent(value) && !Array.isArray(value) && typeof value === 'object'; };
 /**
  * @hidden
  */
@@ -136,3 +200,7 @@ exports.isNumber = function (value) { return typeof value === 'number' && isFini
  * @hidden
  */
 exports.createValueWithUnit = function (value) { return value + (exports.isNumber(value) ? 'px' : ''); };
+/**
+ * @hidden
+ */
+exports.splitStringToArray = function (value) { return value.trim().replace(/\s+/g, " ").split(' '); };

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);
         });
     };