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

package/dist/es2015/dialog/dialog.component.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { AfterContentInit, AfterViewInit, EventEmitter, OnInit, OnDestroy, ElementRef, TemplateRef, Renderer2, ChangeDetectorRef, OnChanges, SimpleChanges, NgZone, QueryList } from '@angular/core';
+import { AfterContentInit, AfterViewInit, EventEmitter, OnInit, OnDestroy, ElementRef, TemplateRef, Renderer2, ChangeDetectorRef, NgZone, QueryList } from '@angular/core';
 import { DialogActionsComponent } from './dialog-actions.component';
 import { DialogTitleBarComponent } from './dialog-titlebar.component';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
@@ -11,7 +11,7 @@ import { DialogAction } from './dialog-settings';
 /**
  * Represents the [Kendo UI Dialog component for Angular]({% slug overview_dialog_dialogs %}).
  */
-export declare class DialogComponent implements AfterContentInit, AfterViewInit, OnInit, OnChanges, OnDestroy {
+export declare class DialogComponent implements AfterContentInit, AfterViewInit, OnInit, OnDestroy {
     private _elRef;
     private _renderer;
     private cdr;
@@ -89,6 +89,10 @@ export declare class DialogComponent implements AfterContentInit, AfterViewInit,
      * @hidden
      */
     titleId: string;
+    /**
+     * @hidden
+     */
+    contentId: string;
     /**
      * @hidden
      */
@@ -99,13 +103,13 @@ export declare class DialogComponent implements AfterContentInit, AfterViewInit,
      */
     action: EventEmitter<DialogAction>;
     /**
-     * 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.
      */
     close: EventEmitter<any>;
     readonly dir: string;
     tabIndex: number;
     titlebarContent: QueryList<DialogTitleBarComponent>;
-    titlebarView: DialogTitleBarComponent;
+    titlebarView: QueryList<DialogTitleBarComponent>;
     actionsView: DialogActionsComponent;
     private _htmlAttributes;
     private _cssClass;
@@ -117,7 +121,6 @@ export declare class DialogComponent implements AfterContentInit, AfterViewInit,
      */
     onComponentKeydown(event: any): void;
     ngAfterContentInit(): void;
-    ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
     ngOnInit(): void;
     ngOnDestroy(): void;
@@ -149,11 +152,15 @@ export declare class DialogComponent implements AfterContentInit, AfterViewInit,
     /**
      * @hidden
      */
-    private getLastFocusableElement;
+    private getFirstAndLastFocusable;
     /**
      * @hidden
      */
     private generateTitleId;
+    /**
+     * @hidden
+     */
+    private generateContentId;
     readonly wrapperClass: boolean;
     readonly styles: any;
     private bubble;

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

@@ -3,7 +3,7 @@
 * 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';
@@ -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,7 @@ 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
@@ -104,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;
         }
@@ -119,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');
@@ -208,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();
         }
@@ -237,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
@@ -247,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;
     }
@@ -342,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 }),
@@ -393,11 +409,11 @@ DialogComponent = tslib_1.__decorate([
         >
         <div class="k-overlay" @overlayAppear></div>
 
-        <div class="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>