@progress/kendo-angular-dialog 5.1.1 → 5.2.0

package/dist/fesm2015/index.js

@@ -3,7 +3,7 @@
 * 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, ViewChild, HostListener, Renderer2, ChangeDetectorRef, Injectable, isDevMode, ComponentFactoryResolver, Directive, Host, ContentChild, ViewChildren, ViewContainerRef, forwardRef, NgModule } from '@angular/core';
+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 { 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';
@@ -176,7 +176,7 @@ let DialogTitleBarComponent = class DialogTitleBarComponent {
     }
     ngAfterViewInit() {
         this.zone.onStable.pipe(take(1)).subscribe(() => {
-            const element = this.hostElement.nativeElement;
+            const element = this.hostElement.nativeElement.querySelector('.k-dialog-title');
             element.setAttribute('id', this.id);
         });
     }
@@ -257,7 +257,7 @@ const 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'
 };
@@ -333,6 +333,60 @@ const isFocusable = (element, checkVisibility = true) => {
     }
     return false;
 };
+/**
+ * @hidden
+ */
+const setHTMLAttributes = (attributes, renderer, element) => {
+    for (const 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
+ */
+const parseCSSClassNames = (value) => {
+    if (isObject(value)) {
+        return parseObjectClassNames(value);
+    }
+    if (isString(value)) {
+        return parseStringClassNames(value);
+    }
+    if (Array.isArray(value)) {
+        return parseArrayClassNames(value);
+    }
+};
+const parseObjectClassNames = (value) => {
+    const classes = [];
+    Object.keys(value).forEach(className => {
+        const currentClassName = splitStringToArray(className);
+        if (value[className] && currentClassName[0]) {
+            classes.push(...currentClassName);
+        }
+    });
+    return classes;
+};
+const parseStringClassNames = (value) => {
+    const classes = [];
+    const classesArray = splitStringToArray(value);
+    classesArray.forEach(className => {
+        classes.push(className);
+    });
+    return classes;
+};
+const parseArrayClassNames = (value) => {
+    const classes = [];
+    value.forEach((className) => {
+        const current = splitStringToArray(className);
+        if (current[0]) {
+            classes.push(...current);
+        }
+    });
+    return classes;
+};
 /**
  * @hidden
  */
@@ -368,6 +422,10 @@ const OFFSET_STYLES = ['top', 'left', 'width', 'height'];
  * @hidden
  */
 const isString = (value) => value instanceof String || typeof value === 'string';
+/**
+ * @hidden
+ */
+const isObject = (value) => isPresent(value) && !Array.isArray(value) && typeof value === 'object';
 /**
  * @hidden
  */
@@ -376,6 +434,10 @@ const isNumber = (value) => typeof value === 'number' && isFinite(value);
  * @hidden
  */
 const createValueWithUnit = (value) => value + (isNumber(value) ? 'px' : '');
+/**
+ * @hidden
+ */
+const splitStringToArray = (value) => value.trim().replace(/\s+/g, " ").split(' ');
 
 /**
  * The settings for the Dialog actions when the Dialog is opened through `DialogService`
@@ -424,13 +486,17 @@ let DialogComponent = class DialogComponent {
          * @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,6 +505,36 @@ let DialogComponent = class DialogComponent {
         this.direction = localization.rtl ? 'rtl' : 'ltr';
         this.subscriptions.push(localization.changes.subscribe(({ rtl }) => (this.direction = rtl ? 'rtl' : 'ltr')));
         this.titleId = this.generateTitleId();
+        this.contentId = this.generateContentId();
+    }
+    /**
+     * @hidden
+     */
+    set htmlAttributes(attributes) {
+        setHTMLAttributes(attributes, this._renderer, this._elRef.nativeElement);
+        const el = this._elRef.nativeElement;
+        const dir = el.getAttribute('dir');
+        const tIndex = el.getAttribute('tabindex');
+        if (this.direction !== dir) {
+            this.direction = dir;
+        }
+        if (this.tabIndex !== tIndex) {
+            this.tabIndex = tIndex;
+        }
+        this._htmlAttributes = attributes;
+    }
+    get htmlAttributes() {
+        return this._htmlAttributes;
+    }
+    /**
+     * @hidden
+     */
+    set cssClass(classes) {
+        this.setServiceClasses(this._cssClass, classes);
+        this._cssClass = classes;
+    }
+    get cssClass() {
+        return this._cssClass;
     }
     get dir() {
         return this.direction;
@@ -465,6 +561,7 @@ let DialogComponent = class DialogComponent {
     }
     ngAfterContentInit() {
         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;
         }
@@ -480,22 +577,25 @@ let DialogComponent = class DialogComponent {
             }));
         }
     }
-    ngOnChanges(changes) {
-        if (changes.title && changes.title.currentValue && !changes.title.previousValue) {
-            this.zone.onStable.pipe(take(1)).subscribe(() => {
-                this.bubble('close', this.titlebarView);
-                this._renderer.setAttribute(this._elRef.nativeElement.querySelector('.k-dialog'), 'aria-labelledby', this.titleId);
-            });
-        }
-    }
     ngAfterViewInit() {
         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(() => {
+                if (isPresent(this.titlebarView.first)) {
+                    this.titlebarView.first.id = this.titleId;
+                    this.zone.onStable.pipe(take(1)).subscribe(() => {
+                        this.bubble('close', this.titlebarView.first);
+                        this._renderer.setAttribute(this._elRef.nativeElement.querySelector('.k-dialog'), 'aria-labelledby', this.titleId);
+                    });
+                }
+            }));
+        }
     }
     ngOnInit() {
         this._renderer.removeAttribute(this._elRef.nativeElement, 'title');
@@ -514,6 +614,19 @@ let DialogComponent = class DialogComponent {
             wrapper.focus();
         }
     }
+    setServiceClasses(prevValue, value) {
+        const el = this._elRef.nativeElement;
+        if (prevValue) {
+            parseCSSClassNames(prevValue).forEach(className => {
+                this._renderer.removeClass(el, className);
+            });
+        }
+        if (value) {
+            parseCSSClassNames(value).forEach(className => {
+                this._renderer.addClass(el, className);
+            });
+        }
+    }
     /**
      * @hidden
      */
@@ -556,16 +669,15 @@ let DialogComponent = class DialogComponent {
      * @hidden
      */
     keepFocusWithinComponent(target, event) {
-        const firstFocusable = this._elRef.nativeElement;
-        const lastFocusable = this.getLastFocusableElement(firstFocusable);
-        const tabBeforeFirstFocusable = target === firstFocusable && event.shiftKey;
-        const tabAfterLastFocusable = !event.shiftKey && isPresent(lastFocusable) && target === lastFocusable;
-        const tabWithNoFocusable = !isPresent(lastFocusable) && !event.shiftKey;
-        if (tabBeforeFirstFocusable || tabWithNoFocusable) {
+        const wrapper = this._elRef.nativeElement;
+        const [firstFocusable, lastFocusable] = this.getFirstAndLastFocusable(wrapper);
+        const tabAfterLastFocusable = !event.shiftKey && target === lastFocusable;
+        const shiftTabAfterFirstFocusable = event.shiftKey && target === firstFocusable;
+        if (tabAfterLastFocusable) {
             event.preventDefault();
             firstFocusable.focus();
         }
-        if (tabAfterLastFocusable) {
+        if (shiftTabAfterFirstFocusable) {
             event.preventDefault();
             lastFocusable.focus();
         }
@@ -585,9 +697,11 @@ let DialogComponent = class DialogComponent {
     /**
      * @hidden
      */
-    getLastFocusableElement(parent) {
+    getFirstAndLastFocusable(parent) {
         const all = this.getAllFocusableChildren(parent);
-        return all.length > 0 ? all[all.length - 1] : null;
+        const firstFocusable = all.length > 0 ? all[0] : parent;
+        const lastFocusable = all.length > 0 ? all[all.length - 1] : parent;
+        return [firstFocusable, lastFocusable];
     }
     /**
      * @hidden
@@ -595,6 +709,12 @@ let DialogComponent = class DialogComponent {
     generateTitleId() {
         return 'kendo-dialog-title-' + Math.ceil(Math.random() * 1000000).toString();
     }
+    /**
+     * @hidden
+     */
+    generateContentId() {
+        return 'kendo-dialog-content-' + Math.ceil(Math.random() * 1000000).toString();
+    }
     get wrapperClass() {
         return true;
     }
@@ -690,8 +810,8 @@ __decorate([
     __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 }),
@@ -741,11 +861,11 @@ DialogComponent = __decorate([
         >
         <div class="k-overlay" @overlayAppear></div>
 
-        <div class="k-widget k-window k-dialog" role="dialog" [ngStyle]="styles" @dialogSlideInAppear>
+        <div class="k-window k-dialog" role="dialog" aria-modal="true" [ngStyle]="styles" @dialogSlideInAppear>
             <kendo-dialog-titlebar *ngIf="title" [closeTitle]="closeTitle" [id]="titleId">{{ title }}</kendo-dialog-titlebar>
             <ng-content select="kendo-dialog-titlebar" *ngIf="!title"></ng-content>
 
-            <div class="k-content k-window-content k-dialog-content">
+            <div [id]="contentId" class="k-content k-window-content k-dialog-content">
                 <ng-content *ngIf="!contentTemplate"></ng-content>
                 <ng-template [ngTemplateOutlet]="contentTemplate" *ngIf="contentTemplate"></ng-template>
             </div>
@@ -978,6 +1098,8 @@ See https://www.telerik.com/kendo-angular-ui/components/dialogs/dialog/service/.
         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;
         }
@@ -1752,6 +1874,35 @@ let WindowComponent = class WindowComponent {
     get resizable() {
         return this.options.resizable;
     }
+    /**
+     * @hidden
+     */
+    set cssClass(classes) {
+        this.setServiceClasses(this._cssClass, classes);
+        this._cssClass = classes;
+    }
+    get cssClass() {
+        return this._cssClass;
+    }
+    /**
+     * @hidden
+     */
+    set htmlAttributes(attributes) {
+        setHTMLAttributes(attributes, this.renderer, this.el.nativeElement);
+        const el = this.el.nativeElement;
+        const dir = el.getAttribute('dir');
+        const tIndex = el.getAttribute('tabindex');
+        if (this.direction !== dir) {
+            this.direction = dir;
+        }
+        if (this.tabIndex !== tIndex) {
+            this.tabIndex = tIndex;
+        }
+        this._htmlAttributes = attributes;
+    }
+    get htmlAttributes() {
+        return this._htmlAttributes;
+    }
     /**
      * Specifies the initial state of the component.
      * If not specified, the value is set to `default`.
@@ -2039,6 +2190,19 @@ let WindowComponent = class WindowComponent {
             }
         }));
     }
+    setServiceClasses(prevValue, value) {
+        const el = this.el.nativeElement;
+        if (prevValue) {
+            parseCSSClassNames(prevValue).forEach(className => {
+                this.renderer.removeClass(el, className);
+            });
+        }
+        if (value) {
+            parseCSSClassNames(value).forEach(className => {
+                this.renderer.addClass(el, className);
+            });
+        }
+    }
     setNextZIndex() {
         const currentZIndex = this.el.nativeElement.style['z-index'];
         const nextPossibleZIndex = this.service.nextPossibleZIndex;
@@ -2203,7 +2367,6 @@ __decorate([
     __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", [])
@@ -2704,6 +2867,12 @@ let WindowService = class WindowService {
         return windowRef;
     }
     applyOptions(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;
         }