@progress/kendo-angular-dialog 5.1.1 → 5.2.0

package/dist/es/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';
@@ -35,13 +35,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;
@@ -53,7 +57,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;
@@ -84,6 +126,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;
         }
@@ -99,23 +142,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');
@@ -134,6 +180,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
      */
@@ -176,16 +236,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();
         }
@@ -205,9 +264,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
@@ -215,6 +276,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;
@@ -318,8 +385,8 @@ var DialogComponent = /** @class */ (function () {
         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 }),
@@ -361,7 +428,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", [ElementRef,
             Renderer2,

package/dist/es/dialog/dialog.service.js

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

package/dist/es/package-metadata.js

@@ -9,7 +9,7 @@ export 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'
 };

package/dist/es/window/window.component.js

@@ -10,7 +10,7 @@ import { Subscription } from 'rxjs';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
 import { DragResizeService } from './drag-resize.service';
-import { OFFSET_STYLES, isPresent, isTruthy, hasClasses, WINDOW_CLASSES } from '../common/util';
+import { OFFSET_STYLES, isPresent, isTruthy, hasClasses, WINDOW_CLASSES, parseCSSClassNames, setHTMLAttributes } from '../common/util';
 import { RESIZE_DIRECTIONS } from "../common/util";
 import { ResizeHandleDirective } from './window-resize-handle.directive';
 import { WindowTitleBarComponent } from './window-titlebar.component';
@@ -119,6 +119,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;
@@ -487,6 +524,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;
@@ -655,7 +706,6 @@ var WindowComponent = /** @class */ (function () {
         tslib_1.__metadata("design:type", Number)
     ], WindowComponent.prototype, "tabIndex", void 0);
     tslib_1.__decorate([
-        HostBinding('class.k-widget'),
         HostBinding('class.k-window'),
         tslib_1.__metadata("design:type", Boolean),
         tslib_1.__metadata("design:paramtypes", [])

package/dist/es/window/window.service.js

@@ -116,6 +116,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/es2015/common/util.d.ts

@@ -2,6 +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 { Renderer2 } from '@angular/core';
 import { Observable } from 'rxjs';
 /**
  * @hidden
@@ -50,6 +51,18 @@ export declare const isVisible: (element: any) => boolean;
  * @hidden
  */
 export declare const isFocusable: (element: any, checkVisibility?: boolean) => boolean;
+/**
+ * @hidden
+ */
+export declare const setHTMLAttributes: (attributes: {
+    [key: string]: string;
+}, renderer: Renderer2, element: Element) => void;
+/**
+ * Receives CSS class declarations either as an object, string or array and returns an array of the class names.
+ *
+ * @hidden
+ */
+export declare const parseCSSClassNames: (value: any) => string[];
 /**
  * @hidden
  */
@@ -80,6 +93,10 @@ export declare const OFFSET_STYLES: Array<string>;
  * @hidden
  */
 export declare const isString: (value: any) => value is string;
+/**
+ * @hidden
+ */
+export declare const isObject: (value: any) => value is object;
 /**
  * @hidden
  */
@@ -88,3 +105,7 @@ export declare const isNumber: (value: string | number) => boolean;
  * @hidden
  */
 export declare const createValueWithUnit: (value: string | number) => string;
+/**
+ * @hidden
+ */
+export declare const splitStringToArray: (value: string) => string[];

package/dist/es2015/common/util.js

@@ -76,6 +76,63 @@ export const isFocusable = (element, checkVisibility = true) => {
     }
     return false;
 };
+/**
+ * @hidden
+ */
+export 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
+ */
+export 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 ɵ1 = parseObjectClassNames;
+const parseStringClassNames = (value) => {
+    const classes = [];
+    const classesArray = splitStringToArray(value);
+    classesArray.forEach(className => {
+        classes.push(className);
+    });
+    return classes;
+};
+const ɵ2 = parseStringClassNames;
+const parseArrayClassNames = (value) => {
+    const classes = [];
+    value.forEach((className) => {
+        const current = splitStringToArray(className);
+        if (current[0]) {
+            classes.push(...current);
+        }
+    });
+    return classes;
+};
+const ɵ3 = parseArrayClassNames;
 /**
  * @hidden
  */
@@ -121,6 +178,10 @@ export const OFFSET_STYLES = ['top', 'left', 'width', 'height'];
  * @hidden
  */
 export const isString = (value) => value instanceof String || typeof value === 'string';
+/**
+ * @hidden
+ */
+export const isObject = (value) => isPresent(value) && !Array.isArray(value) && typeof value === 'object';
 /**
  * @hidden
  */
@@ -129,4 +190,8 @@ export const isNumber = (value) => typeof value === 'number' && isFinite(value);
  * @hidden
  */
 export const createValueWithUnit = (value) => value + (isNumber(value) ? 'px' : '');
-export { ɵ0 };
+/**
+ * @hidden
+ */
+export const splitStringToArray = (value) => value.trim().replace(/\s+/g, " ").split(' ');
+export { ɵ0, ɵ1, ɵ2, ɵ3 };

package/dist/es2015/dialog/dialog-settings.d.ts

@@ -54,6 +54,18 @@ export declare class DialogSettings {
      * the Dialog will not render a **Close** button.
      */
     title?: string;
+    /**
+     * Sets the CSS classes that will be rendered on the Dialog wrapper element.
+     * Supports the union type of values that NgClass accepts [ngClass]({{ site.data.urls.angular['ngclassapi'] }}).
+     */
+    cssClass?: any;
+    /**
+     * Sets the HTML attributes of the Dialog wrapper element.
+     * The property accepts string key-value based pairs.
+     */
+    htmlAttributes?: {
+        [key: string]: string;
+    };
     /**
      * Defines the content of the Dialog.
      * ([see example]({% slug service_dialog %}#toc-using-components)).

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

@@ -31,7 +31,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);
         });
     }

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;
@@ -71,6 +71,16 @@ export declare class DialogComponent implements AfterContentInit, AfterViewInit,
      * A string value sets the maximum height in arbitrary units—for example, `50%`.
      */
     maxHeight: number | string;
+    /**
+     * @hidden
+     */
+    htmlAttributes: {
+        [key: string]: string;
+    };
+    /**
+     * @hidden
+     */
+    cssClass: any;
     /**
      * @hidden
      */
@@ -79,6 +89,10 @@ export declare class DialogComponent implements AfterContentInit, AfterViewInit,
      * @hidden
      */
     titleId: string;
+    /**
+     * @hidden
+     */
+    contentId: string;
     /**
      * @hidden
      */
@@ -89,14 +103,16 @@ 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;
     private direction;
     private subscriptions;
     constructor(_elRef: ElementRef, _renderer: Renderer2, localization: LocalizationService, cdr: ChangeDetectorRef, zone: NgZone);
@@ -105,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;
@@ -113,6 +128,7 @@ export declare class DialogComponent implements AfterContentInit, AfterViewInit,
      * Focuses the wrapper of the Dialog component.
      */
     focus(): void;
+    private setServiceClasses;
     /**
      * @hidden
      */
@@ -136,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;