@progress/kendo-angular-dialog 5.1.1 → 5.2.0

package/dist/es2015/dialog/dialog.component.js

@@ -3,14 +3,14 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
-import { Component, EventEmitter, HostBinding, Input, ViewChild, Output, ElementRef, Renderer2, HostListener, ChangeDetectorRef, NgZone, ContentChildren, QueryList } from '@angular/core';
+import { Component, EventEmitter, HostBinding, Input, ViewChild, Output, ElementRef, Renderer2, HostListener, ChangeDetectorRef, NgZone, ContentChildren, QueryList, ViewChildren } from '@angular/core';
 import { animate, state, style, transition, trigger } from '@angular/animations';
 import { DialogActionsComponent } from './dialog-actions.component';
 import { DialogTitleBarComponent } from './dialog-titlebar.component';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
-import { hasClasses, Keys, isPresent, focusableSelector, isFocusable, DIALOG_ELEMENTS_HANDLING_ARROWS, DIALOG_ELEMENTS_HANDLING_ESC_KEY, createValueWithUnit } from '../common/util';
+import { hasClasses, Keys, isPresent, focusableSelector, isFocusable, DIALOG_ELEMENTS_HANDLING_ARROWS, DIALOG_ELEMENTS_HANDLING_ESC_KEY, createValueWithUnit, setHTMLAttributes, parseCSSClassNames } from '../common/util';
 import { DialogCloseResult } from './dialog-settings';
 import { DIALOG_LOCALIZATION_SERVICE } from './../localization/dialog-localization.service';
 import { take } from 'rxjs/operators';
@@ -34,13 +34,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;
@@ -49,6 +53,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;
@@ -75,6 +109,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;
         }
@@ -90,22 +125,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');
@@ -124,6 +162,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
      */
@@ -166,16 +217,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();
         }
@@ -195,9 +245,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
@@ -205,6 +257,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;
     }
@@ -300,8 +358,8 @@ tslib_1.__decorate([
     tslib_1.__metadata("design:type", QueryList)
 ], DialogComponent.prototype, "titlebarContent", void 0);
 tslib_1.__decorate([
-    ViewChild(DialogTitleBarComponent, { static: false }),
-    tslib_1.__metadata("design:type", DialogTitleBarComponent)
+    ViewChildren(DialogTitleBarComponent),
+    tslib_1.__metadata("design:type", QueryList)
 ], DialogComponent.prototype, "titlebarView", void 0);
 tslib_1.__decorate([
     ViewChild(DialogActionsComponent, { static: false }),
@@ -351,11 +409,11 @@ DialogComponent = tslib_1.__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>

package/dist/es2015/dialog/dialog.service.js

@@ -178,6 +178,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;
         }