@progress/kendo-angular-dialog 11.0.0-develop.99 → 11.0.0

package/fesm2020/progress-kendo-angular-dialog.mjs

@@ -51,11 +51,11 @@ var Keys;
 /**
  * @hidden
  */
-const DIALOG_ELEMENTS_HANDLING_ESC_KEY = 'k-dialog-wrapper k-dialog-buttongroup k-dialog-action';
+const DIALOG_ELEMENTS_HANDLING_ESC_KEY = 'k-dialog-wrapper k-actions k-dialog-titlebar-action';
 /**
  * @hidden
  */
-const DIALOG_ELEMENTS_HANDLING_ARROWS = 'k-dialog-buttongroup';
+const DIALOG_ELEMENTS_HANDLING_ARROWS = 'k-actions';
 /**
  * @hidden
  */
@@ -237,7 +237,7 @@ class DialogActionsComponent {
          * Fires when the user clicks an action button.
          */
         this.action = new EventEmitter();
-        this.buttonGroupClassName = true;
+        this.hostClasses = true;
     }
     /**
      * Allows the declarative specification of the actions.
@@ -253,9 +253,12 @@ class DialogActionsComponent {
             throw new Error('"actions" must be either TemplateRef or DialogAction[] instance.');
         }
     }
-    get className() {
+    get stretchedClassName() {
         return this.layout === 'stretched';
     }
+    get endClassName() {
+        return this.layout === 'end';
+    }
     /**
      * @hidden
      */
@@ -278,7 +281,7 @@ class DialogActionsComponent {
     }
 }
 DialogActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DialogActionsComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-DialogActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DialogActionsComponent, selector: "kendo-dialog-actions", inputs: { actions: "actions", layout: "layout" }, outputs: { action: "action" }, host: { properties: { "class.k-dialog-buttongroup": "this.buttonGroupClassName", "class.k-actions": "this.buttonGroupClassName", "class.k-actions-stretched": "this.className" } }, ngImport: i0, template: `
+DialogActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DialogActionsComponent, selector: "kendo-dialog-actions", inputs: { actions: "actions", layout: "layout" }, outputs: { action: "action" }, host: { properties: { "class.k-actions": "this.hostClasses", "class.k-actions-horizontal": "this.hostClasses", "class.k-window-actions": "this.hostClasses", "class.k-dialog-actions": "this.hostClasses", "class.k-actions-stretched": "this.stretchedClassName", "class.k-actions-end": "this.endClassName" } }, ngImport: i0, template: `
         <ng-content *ngIf="!actions"></ng-content>
         <ng-container *ngIf="actionsArray; else actionTemplate">
             <button
@@ -319,15 +322,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], action: [{
                 type: Output
-            }], buttonGroupClassName: [{
+            }], hostClasses: [{
                 type: HostBinding,
-                args: ['class.k-dialog-buttongroup']
+                args: ['class.k-actions']
             }, {
                 type: HostBinding,
-                args: ['class.k-actions']
-            }], className: [{
+                args: ['class.k-actions-horizontal']
+            }, {
+                type: HostBinding,
+                args: ['class.k-window-actions']
+            }, {
+                type: HostBinding,
+                args: ['class.k-dialog-actions']
+            }], stretchedClassName: [{
                 type: HostBinding,
                 args: ['class.k-actions-stretched']
+            }], endClassName: [{
+                type: HostBinding,
+                args: ['class.k-actions-end']
             }] } });
 
 class PreventableEvent {
@@ -508,20 +520,20 @@ DialogTitleBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             i18n-closeTitle="kendo.dialog.closeTitle|The title of the close button"
             closeTitle="Close"
         >
-            <div class="k-window-title k-dialog-title">
+            <span class="k-window-title k-dialog-title">
                 <ng-content></ng-content>
-            </div>
+            </span>
 
-            <div class="k-window-actions k-dialog-actions">
+            <div class="k-window-titlebar-actions k-dialog-titlebar-actions">
                 <button
                     kendoButton
                     fillMode="flat"
                     role="button"
                     [attr.title]="closeButtonTitle"
                     [attr.aria-label]="closeButtonTitle"
-                    icon="x"
+                    icon="close"
                     [svgIcon]="xIcon"
-                    class="k-window-action k-dialog-action"
+                    class="k-window-titlebar-action k-dialog-titlebar-action"
                     (click)="onCloseClick($event)"
                 >
                 </button>
@@ -549,20 +561,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             i18n-closeTitle="kendo.dialog.closeTitle|The title of the close button"
             closeTitle="Close"
         >
-            <div class="k-window-title k-dialog-title">
+            <span class="k-window-title k-dialog-title">
                 <ng-content></ng-content>
-            </div>
+            </span>
 
-            <div class="k-window-actions k-dialog-actions">
+            <div class="k-window-titlebar-actions k-dialog-titlebar-actions">
                 <button
                     kendoButton
                     fillMode="flat"
                     role="button"
                     [attr.title]="closeButtonTitle"
                     [attr.aria-label]="closeButtonTitle"
-                    icon="x"
+                    icon="close"
                     [svgIcon]="xIcon"
-                    class="k-window-action k-dialog-action"
+                    class="k-window-titlebar-action k-dialog-titlebar-action"
                     (click)="onCloseClick($event)"
                 >
                 </button>
@@ -593,8 +605,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-dialog',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1673466837,
-    version: '',
+    publishDate: 1674032329,
+    version: '11.0.0',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -747,6 +759,7 @@ class DialogComponent {
          */
         this.close = new EventEmitter();
         this.tabIndex = 0;
+        this._themeColor = null;
         this.subscriptions = [];
         this.domSubs = new Subscription();
         validatePackage(packageMetadata);
@@ -755,6 +768,22 @@ class DialogComponent {
         this.titleId = this.generateTitleId();
         this.contentId = this.generateContentId();
     }
+    /**
+     * The Dialog allows you to specify predefined theme colors.
+     * The theme color will be applied as a background and border color to the titlebar while also amending the text color accordingly.
+     *
+     * The possible values are:
+     * * `primary`
+     * * `dark`
+     * * `light`
+     */
+    set themeColor(themeColor) {
+        this.handleThemeColorClass(this.themeColor, themeColor);
+        this._themeColor = themeColor;
+    }
+    get themeColor() {
+        return this._themeColor;
+    }
     /**
      * @hidden
      */
@@ -828,6 +857,7 @@ class DialogComponent {
             }));
         }
         this.initDomEvents();
+        this.handleThemeColorClass(null, this.themeColor);
     }
     ngOnInit() {
         if (this.animation) {
@@ -1024,9 +1054,20 @@ class DialogComponent {
             this.subscriptions.push(s);
         }
     }
+    handleThemeColorClass(previousValue, currentValue) {
+        const dialog = this.dialog.nativeElement;
+        if (previousValue) {
+            const classToRemove = `k-dialog-${previousValue}`;
+            this.renderer.removeClass(dialog, classToRemove);
+        }
+        if (currentValue) {
+            const classToAdd = `k-dialog-${currentValue}`;
+            this.renderer.addClass(dialog, classToAdd);
+        }
+    }
 }
 DialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DialogComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i2$1.AnimationBuilder }], target: i0.ɵɵFactoryTarget.Component });
-DialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DialogComponent, selector: "kendo-dialog", inputs: { actions: "actions", actionsLayout: "actionsLayout", autoFocusedElement: "autoFocusedElement", title: "title", width: "width", minWidth: "minWidth", maxWidth: "maxWidth", height: "height", minHeight: "minHeight", maxHeight: "maxHeight", animation: "animation" }, outputs: { action: "action", close: "close" }, host: { properties: { "attr.dir": "this.dir", "attr.tabIndex": "this.tabIndex", "class.k-dialog-wrapper": "this.wrapperClass" } }, providers: [
+DialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DialogComponent, selector: "kendo-dialog", inputs: { actions: "actions", actionsLayout: "actionsLayout", autoFocusedElement: "autoFocusedElement", title: "title", width: "width", minWidth: "minWidth", maxWidth: "maxWidth", height: "height", minHeight: "minHeight", maxHeight: "maxHeight", animation: "animation", themeColor: "themeColor" }, outputs: { action: "action", close: "close" }, host: { properties: { "attr.dir": "this.dir", "attr.tabIndex": "this.tabIndex", "class.k-dialog-wrapper": "this.wrapperClass" } }, providers: [
         LocalizationService,
         {
             provide: DIALOG_LOCALIZATION_SERVICE,
@@ -1048,7 +1089,7 @@ DialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
             <kendo-dialog-titlebar *ngIf="title" [closeTitle]="closeTitle" [id]="titleId">{{ title }}</kendo-dialog-titlebar>
             <ng-content select="kendo-dialog-titlebar" *ngIf="!title"></ng-content>
 
-            <div [id]="contentId" class="k-content k-window-content k-dialog-content">
+            <div [id]="contentId" class="k-window-content k-dialog-content">
                 <ng-content *ngIf="!contentTemplate"></ng-content>
                 <ng-template [ngTemplateOutlet]="contentTemplate" *ngIf="contentTemplate"></ng-template>
             </div>
@@ -1097,7 +1138,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             <kendo-dialog-titlebar *ngIf="title" [closeTitle]="closeTitle" [id]="titleId">{{ title }}</kendo-dialog-titlebar>
             <ng-content select="kendo-dialog-titlebar" *ngIf="!title"></ng-content>
 
-            <div [id]="contentId" class="k-content k-window-content k-dialog-content">
+            <div [id]="contentId" class="k-window-content k-dialog-content">
                 <ng-content *ngIf="!contentTemplate"></ng-content>
                 <ng-template [ngTemplateOutlet]="contentTemplate" *ngIf="contentTemplate"></ng-template>
             </div>
@@ -1130,6 +1171,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], animation: [{
                 type: Input
+            }], themeColor: [{
+                type: Input
             }], action: [{
                 type: Output
             }], close: [{
@@ -1917,7 +1960,7 @@ class WindowTitleBarComponent {
     }
 }
 WindowTitleBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowTitleBarComponent, deps: [{ token: i0.ElementRef }, { token: DragResizeService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-WindowTitleBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: WindowTitleBarComponent, selector: "kendo-window-titlebar", inputs: { template: "template", id: "id" }, host: { listeners: { "dblclick": "handle($event)" }, properties: { "class.k-window-titlebar": "this.className", "class.k-dialog-titlebar": "this.className", "style.touch-action": "this.touchAction" } }, ngImport: i0, template: `
+WindowTitleBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: WindowTitleBarComponent, selector: "kendo-window-titlebar", inputs: { template: "template", id: "id" }, host: { listeners: { "dblclick": "handle($event)" }, properties: { "class.k-window-titlebar": "this.className", "style.touch-action": "this.touchAction" } }, ngImport: i0, template: `
 	<ng-content *ngIf="!template"></ng-content>
 	<ng-template
 		[ngTemplateOutlet]="template"
@@ -1943,9 +1986,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], className: [{
                 type: HostBinding,
                 args: ['class.k-window-titlebar']
-            }, {
-                type: HostBinding,
-                args: ['class.k-dialog-titlebar']
             }], touchAction: [{
                 type: HostBinding,
                 args: ['style.touch-action']
@@ -2124,7 +2164,7 @@ class WindowMinimizeActionDirective extends Button {
     }
 }
 WindowMinimizeActionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowMinimizeActionDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DragResizeService, optional: true }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-WindowMinimizeActionDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: WindowMinimizeActionDirective, selector: "button[kendoWindowMinimizeAction]", inputs: { window: "window" }, host: { listeners: { "click": "onClick()" }, properties: { "attr.type": "this.buttonType", "class.k-window-action": "this.buttonClass", "style.display": "this.visible" } }, providers: [
+WindowMinimizeActionDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: WindowMinimizeActionDirective, selector: "button[kendoWindowMinimizeAction]", inputs: { window: "window" }, host: { listeners: { "click": "onClick()" }, properties: { "attr.type": "this.buttonType", "class.k-window-titlebar-action": "this.buttonClass", "style.display": "this.visible" } }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
@@ -2178,7 +2218,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 args: ['attr.type']
             }], buttonClass: [{
                 type: HostBinding,
-                args: ['class.k-window-action']
+                args: ['class.k-window-titlebar-action']
             }], onClick: [{
                 type: HostListener,
                 args: ['click']
@@ -2213,7 +2253,7 @@ class WindowMaximizeActionDirective extends Button {
     }
 }
 WindowMaximizeActionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowMaximizeActionDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DragResizeService, optional: true }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-WindowMaximizeActionDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: WindowMaximizeActionDirective, selector: "button[kendoWindowMaximizeAction]", inputs: { window: "window" }, host: { listeners: { "click": "onClick()" }, properties: { "attr.type": "this.buttonType", "class.k-window-action": "this.buttonClass", "style.display": "this.visible" } }, providers: [
+WindowMaximizeActionDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: WindowMaximizeActionDirective, selector: "button[kendoWindowMaximizeAction]", inputs: { window: "window" }, host: { listeners: { "click": "onClick()" }, properties: { "attr.type": "this.buttonType", "class.k-window-titlebar-action": "this.buttonClass", "style.display": "this.visible" } }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
@@ -2267,7 +2307,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 args: ['attr.type']
             }], buttonClass: [{
                 type: HostBinding,
-                args: ['class.k-window-action']
+                args: ['class.k-window-titlebar-action']
             }], onClick: [{
                 type: HostListener,
                 args: ['click']
@@ -2302,7 +2342,7 @@ class WindowRestoreActionDirective extends Button {
     }
 }
 WindowRestoreActionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowRestoreActionDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DragResizeService, optional: true }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-WindowRestoreActionDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: WindowRestoreActionDirective, selector: "button[kendoWindowRestoreAction]", inputs: { window: "window" }, host: { listeners: { "click": "onClick()" }, properties: { "attr.type": "this.buttonType", "class.k-window-action": "this.buttonClass", "style.display": "this.visible" } }, providers: [
+WindowRestoreActionDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: WindowRestoreActionDirective, selector: "button[kendoWindowRestoreAction]", inputs: { window: "window" }, host: { listeners: { "click": "onClick()" }, properties: { "attr.type": "this.buttonType", "class.k-window-titlebar-action": "this.buttonClass", "style.display": "this.visible" } }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
@@ -2356,7 +2396,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 args: ['attr.type']
             }], buttonClass: [{
                 type: HostBinding,
-                args: ['class.k-window-action']
+                args: ['class.k-window-titlebar-action']
             }], onClick: [{
                 type: HostListener,
                 args: ['click']
@@ -2388,7 +2428,7 @@ class WindowCloseActionDirective extends Button {
     }
 }
 WindowCloseActionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowCloseActionDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DragResizeService, optional: true }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-WindowCloseActionDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: WindowCloseActionDirective, selector: "button[kendoWindowCloseAction]", inputs: { window: "window" }, host: { listeners: { "click": "onClick()" }, properties: { "attr.type": "this.buttonType", "class.k-window-action": "this.buttonClass" } }, providers: [
+WindowCloseActionDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: WindowCloseActionDirective, selector: "button[kendoWindowCloseAction]", inputs: { window: "window" }, host: { listeners: { "click": "onClick()" }, properties: { "attr.type": "this.buttonType", "class.k-window-titlebar-action": "this.buttonClass" } }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
@@ -2398,7 +2438,7 @@ WindowCloseActionDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
         <kendo-icon-wrapper
             *ngIf="!imageUrl && !iconClass"
             innerCssClass="k-button-icon"
-            name="x"
+            name="close"
             [svgIcon]="xIcon">
         </kendo-icon-wrapper>
         <span *ngIf="imageUrl" class="k-button-icon k-icon">
@@ -2423,7 +2463,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         <kendo-icon-wrapper
             *ngIf="!imageUrl && !iconClass"
             innerCssClass="k-button-icon"
-            name="x"
+            name="close"
             [svgIcon]="xIcon">
         </kendo-icon-wrapper>
         <span *ngIf="imageUrl" class="k-button-icon k-icon">
@@ -2442,7 +2482,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 args: ['attr.type']
             }], buttonClass: [{
                 type: HostBinding,
-                args: ['class.k-window-action']
+                args: ['class.k-window-titlebar-action']
             }], onClick: [{
                 type: HostListener,
                 args: ['click']
@@ -2515,10 +2555,12 @@ class WindowComponent {
         this.messages = {};
         this.tabIndex = 0;
         this.role = 'dialog';
+        this.hostClass = true;
         /**
          * @hidden
          */
         this.titleId = null;
+        this._themeColor = null;
         this.draged = false;
         this.resized = false;
         this.windowSubscription = new Subscription();
@@ -2551,6 +2593,22 @@ class WindowComponent {
     get resizable() {
         return this.options.resizable;
     }
+    /**
+     * The Window allows you to specify predefined theme colors.
+     * The theme color will be applied as a background and border color to the titlebar while also amending the text color accordingly.
+     *
+     * The possible values are:
+     * * `primary`
+     * * `dark`
+     * * `light`
+     */
+    set themeColor(themeColor) {
+        this.handleThemeColorClass(this.themeColor, themeColor);
+        this._themeColor = themeColor;
+    }
+    get themeColor() {
+        return this._themeColor;
+    }
     /**
      * @hidden
      */
@@ -2681,9 +2739,6 @@ class WindowComponent {
         }
         return this.localization.get('minimizeTitle');
     }
-    get hostClasses() {
-        return true;
-    }
     get dir() {
         return this.direction;
     }
@@ -2698,6 +2753,7 @@ class WindowComponent {
         if (this.titleBarView || this.titleBarContent) {
             this.renderer.setAttribute(this.el.nativeElement, 'aria-labelledby', this.titleId);
         }
+        this.handleThemeColorClass(null, this.themeColor);
     }
     ngOnInit() {
         this.renderer.removeAttribute(this.el.nativeElement, 'title');
@@ -2964,9 +3020,20 @@ class WindowComponent {
     generateTitleId() {
         return 'kendo-window-title-' + Math.ceil(Math.random() * 1000000).toString();
     }
+    handleThemeColorClass(previousValue, currentValue) {
+        const wrapper = this.el.nativeElement;
+        if (previousValue) {
+            const classToRemove = `k-window-${previousValue}`;
+            this.renderer.removeClass(wrapper, classToRemove);
+        }
+        if (currentValue) {
+            const classToAdd = `k-window-${currentValue}`;
+            this.renderer.addClass(wrapper, classToAdd);
+        }
+    }
 }
 WindowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DragResizeService }, { token: NavigationService }, { token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-WindowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: WindowComponent, selector: "kendo-window", inputs: { autoFocusedElement: "autoFocusedElement", title: "title", draggable: "draggable", resizable: "resizable", keepContent: "keepContent", state: "state", minWidth: "minWidth", minHeight: "minHeight", width: "width", height: "height", top: "top", left: "left" }, outputs: { dragStart: "dragStart", dragEnd: "dragEnd", resizeStart: "resizeStart", resizeEnd: "resizeEnd", close: "close", widthChange: "widthChange", heightChange: "heightChange", topChange: "topChange", leftChange: "leftChange", stateChange: "stateChange" }, host: { listeners: { "focus": "onComponentFocus()", "blur": "onComponentBlur()" }, properties: { "attr.tabIndex": "this.tabIndex", "attr.role": "this.role", "class.k-window": "this.hostClasses", "attr.dir": "this.dir", "style.minWidth": "this.styleMinWidth", "style.minHeight": "this.styleMinHeight", "style.position": "this.stylePosition", "class.k-window-maximized": "this.wrapperMaximizedClass", "class.k-window-minimized": "this.wrapperMinimizedClass" } }, providers: [
+WindowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: WindowComponent, selector: "kendo-window", inputs: { autoFocusedElement: "autoFocusedElement", title: "title", draggable: "draggable", resizable: "resizable", themeColor: "themeColor", keepContent: "keepContent", state: "state", minWidth: "minWidth", minHeight: "minHeight", width: "width", height: "height", top: "top", left: "left" }, outputs: { dragStart: "dragStart", dragEnd: "dragEnd", resizeStart: "resizeStart", resizeEnd: "resizeEnd", close: "close", widthChange: "widthChange", heightChange: "heightChange", topChange: "topChange", leftChange: "leftChange", stateChange: "stateChange" }, host: { listeners: { "focus": "onComponentFocus()", "blur": "onComponentBlur()" }, properties: { "attr.tabIndex": "this.tabIndex", "attr.role": "this.role", "class.k-window": "this.hostClass", "attr.dir": "this.dir", "style.minWidth": "this.styleMinWidth", "style.minHeight": "this.styleMinHeight", "style.position": "this.stylePosition", "class.k-window-maximized": "this.wrapperMaximizedClass", "class.k-window-minimized": "this.wrapperMinimizedClass" } }, providers: [
         DragResizeService,
         NavigationService,
         LocalizationService,
@@ -2991,8 +3058,8 @@ WindowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
         <ng-container>
 
         <kendo-window-titlebar *ngIf="showDefaultTitleBar" [template]="titleBarTemplate" [id]="titleId">
-            <div class="k-window-title">{{ title }}</div>
-            <div class="k-window-actions">
+            <span class="k-window-title">{{ title }}</span>
+            <div class="k-window-titlebar-actions">
                 <button kendoWindowMinimizeAction  [attr.title]="minimizeButtonTitle" [attr.aria-label]="minimizeButtonTitle"></button>
                 <button kendoWindowMaximizeAction [attr.title]="maximizeButtonTitle" [attr.aria-label]="maximizeButtonTitle"></button>
                 <button kendoWindowRestoreAction [attr.title]="restoreButtonTitle" [attr.aria-label]="restoreButtonTitle"></button>
@@ -3003,7 +3070,7 @@ WindowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
 
         <div *ngIf="state !== 'minimized' || keepContent"
             [hidden]="state === 'minimized' && keepContent"
-            class="k-content k-window-content"
+            class="k-window-content"
         >
             <ng-content *ngIf="!contentTemplate"></ng-content>
             <ng-template [ngTemplateOutlet]="contentTemplate" *ngIf="contentTemplate"></ng-template>
@@ -3048,8 +3115,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         <ng-container>
 
         <kendo-window-titlebar *ngIf="showDefaultTitleBar" [template]="titleBarTemplate" [id]="titleId">
-            <div class="k-window-title">{{ title }}</div>
-            <div class="k-window-actions">
+            <span class="k-window-title">{{ title }}</span>
+            <div class="k-window-titlebar-actions">
                 <button kendoWindowMinimizeAction  [attr.title]="minimizeButtonTitle" [attr.aria-label]="minimizeButtonTitle"></button>
                 <button kendoWindowMaximizeAction [attr.title]="maximizeButtonTitle" [attr.aria-label]="maximizeButtonTitle"></button>
                 <button kendoWindowRestoreAction [attr.title]="restoreButtonTitle" [attr.aria-label]="restoreButtonTitle"></button>
@@ -3060,7 +3127,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 
         <div *ngIf="state !== 'minimized' || keepContent"
             [hidden]="state === 'minimized' && keepContent"
-            class="k-content k-window-content"
+            class="k-window-content"
         >
             <ng-content *ngIf="!contentTemplate"></ng-content>
             <ng-template [ngTemplateOutlet]="contentTemplate" *ngIf="contentTemplate"></ng-template>
@@ -3083,6 +3150,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], resizable: [{
                 type: Input
+            }], themeColor: [{
+                type: Input
             }], keepContent: [{
                 type: Input
             }], state: [{
@@ -3125,7 +3194,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], role: [{
                 type: HostBinding,
                 args: ['attr.role']
-            }], hostClasses: [{
+            }], hostClass: [{
                 type: HostBinding,
                 args: ['class.k-window']
             }], dir: [{

package/index.d.ts

@@ -8,7 +8,7 @@ export { DialogContentBase } from './dialog/dialog-content-base';
 export { DialogActionsComponent } from './dialog/dialog-actions.component';
 export { DialogService } from './dialog/dialog.service';
 export { DialogContainerService } from './dialog/dialog-container.service';
-export { DialogCloseResult, DialogRef, DialogSettings, DialogAction, DialogResult, DialogAnimation } from './dialog/models/';
+export { DialogCloseResult, DialogRef, DialogSettings, DialogAction, DialogResult, DialogAnimation, DialogThemeColor } from './dialog/models/';
 export { ActionsLayout } from './common/actions-layout';
 export { DialogAnimationType } from './common/animation-types';
 export { AnimationDirection } from './common/dialog-animation-direction';
@@ -18,7 +18,7 @@ export { WindowMaximizeActionDirective } from './window/actions/window-maximize-
 export { WindowMinimizeActionDirective } from './window/actions/window-minimize-action.directive';
 export { WindowCloseActionDirective } from './window/actions/window-close-action.directive';
 export { WindowRestoreActionDirective } from './window/actions/window-restore-action.directive';
-export { WindowState, WindowSettings, WindowDimensionSetting, WindowRef, WindowCloseResult } from './window/models';
+export { WindowState, WindowSettings, WindowDimensionSetting, WindowRef, WindowCloseResult, WindowThemeColor } from './window/models';
 export { WindowService } from './window/window.service';
 export { DragResizeService } from './window/drag-resize.service';
 export { DialogModule } from './dialog.module';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-dialog",
-  "version": "11.0.0-develop.99",
+  "version": "11.0.0",
   "description": "Dialog Package for Angular",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -27,16 +27,16 @@
     "@angular/core": "13 - 15",
     "@angular/platform-browser": "13 - 15",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-popup-common": "^1.7.0",
-    "@progress/kendo-angular-buttons": "11.0.0-develop.99",
-    "@progress/kendo-angular-common": "11.0.0-develop.99",
-    "@progress/kendo-angular-icons": "11.0.0-develop.99",
-    "@progress/kendo-angular-l10n": "11.0.0-develop.99",
-    "@progress/kendo-angular-schematics": "11.0.0-develop.99",
+    "@progress/kendo-angular-buttons": "11.0.0",
+    "@progress/kendo-angular-common": "11.0.0",
+    "@progress/kendo-angular-icons": "11.0.0",
+    "@progress/kendo-angular-l10n": "11.0.0",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
-    "tslib": "^2.3.1"
+    "tslib": "^2.3.1",
+    "@progress/kendo-angular-schematics": "11.0.0",
+    "@progress/kendo-popup-common": "^1.7.0"
   },
   "schematics": "./schematics/collection.json",
   "module": "fesm2015/progress-kendo-angular-dialog.mjs",

package/schematics/ngAdd/index.js

@@ -4,9 +4,9 @@ const schematics_1 = require("@angular-devkit/schematics");
 function default_1(options) {
     const finalOptions = Object.assign(Object.assign({}, options), { mainNgModule: 'DialogsModule', package: 'dialog', peerDependencies: {
             // Peer dependency of buttons
-            "@progress/kendo-angular-popup": "^5.0.0",
+            '@progress/kendo-angular-popup': '11.0.0',
             // Peer dependency of icons
-            "@progress/kendo-svg-icons": "^1.0.0"
+            '@progress/kendo-svg-icons': '^1.0.0'
         } });
     return (0, schematics_1.externalSchematic)('@progress/kendo-angular-schematics', 'ng-add', finalOptions);
 }

package/window/models/index.d.ts

@@ -8,3 +8,4 @@ export * from './window-options';
 export * from './window-ref';
 export * from './window-settings';
 export * from './window-types';
+export * from './theme-color';

package/window/models/theme-color.d.ts

@@ -0,0 +1,13 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * Specifies the possible theme colors of the Window.
+ *
+ * The possible values are:
+ * * `primary` —Applies coloring based on the `primary` theme color.
+ * * `light`— Applies coloring based on the `light` theme color.
+ * * `dark`— Applies coloring based on the `dark` theme color.
+ */
+export declare type WindowThemeColor = 'primary' | 'light' | 'dark';

package/window/window.component.d.ts

@@ -10,6 +10,7 @@ import { WindowTitleBarComponent } from './window-titlebar.component';
 import { NavigationService } from './navigation.service';
 import { WindowDimensionSetting, WindowOffsetSetting, WindowState } from './models/window-types';
 import { WindowMessages } from './models/window-messages';
+import { WindowThemeColor } from './models';
 import * as i0 from "@angular/core";
 /**
  * Represents the [Kendo UI Window component for Angular]({% slug overview_window_dialogs %}).
@@ -41,6 +42,17 @@ export declare class WindowComponent implements OnInit, OnDestroy, OnChanges, Af
      */
     set resizable(value: boolean);
     get resizable(): boolean;
+    /**
+     * The Window allows you to specify predefined theme colors.
+     * The theme color will be applied as a background and border color to the titlebar while also amending the text color accordingly.
+     *
+     * The possible values are:
+     * * `primary`
+     * * `dark`
+     * * `light`
+     */
+    set themeColor(themeColor: WindowThemeColor);
+    get themeColor(): WindowThemeColor;
     /**
      * @hidden
      */
@@ -172,7 +184,7 @@ export declare class WindowComponent implements OnInit, OnDestroy, OnChanges, Af
     messages: WindowMessages;
     tabIndex: number;
     role: string;
-    get hostClasses(): boolean;
+    hostClass: boolean;
     get dir(): string;
     titleBarView: WindowTitleBarComponent;
     titleBarContent: WindowTitleBarComponent;
@@ -184,6 +196,7 @@ export declare class WindowComponent implements OnInit, OnDestroy, OnChanges, Af
     titleId: string;
     private _htmlAttributes;
     private _cssClass;
+    private _themeColor;
     private direction;
     private draged;
     private resized;
@@ -255,6 +268,7 @@ export declare class WindowComponent implements OnInit, OnDestroy, OnChanges, Af
      * @hidden
      */
     private generateTitleId;
+    private handleThemeColorClass;
     static ɵfac: i0.ɵɵFactoryDeclaration<WindowComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<WindowComponent, "kendo-window", ["kendoWindow"], { "autoFocusedElement": "autoFocusedElement"; "title": "title"; "draggable": "draggable"; "resizable": "resizable"; "keepContent": "keepContent"; "state": "state"; "minWidth": "minWidth"; "minHeight": "minHeight"; "width": "width"; "height": "height"; "top": "top"; "left": "left"; }, { "dragStart": "dragStart"; "dragEnd": "dragEnd"; "resizeStart": "resizeStart"; "resizeEnd": "resizeEnd"; "close": "close"; "widthChange": "widthChange"; "heightChange": "heightChange"; "topChange": "topChange"; "leftChange": "leftChange"; "stateChange": "stateChange"; }, ["titleBarContent"], ["kendo-window-titlebar", "*"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WindowComponent, "kendo-window", ["kendoWindow"], { "autoFocusedElement": "autoFocusedElement"; "title": "title"; "draggable": "draggable"; "resizable": "resizable"; "themeColor": "themeColor"; "keepContent": "keepContent"; "state": "state"; "minWidth": "minWidth"; "minHeight": "minHeight"; "width": "width"; "height": "height"; "top": "top"; "left": "left"; }, { "dragStart": "dragStart"; "dragEnd": "dragEnd"; "resizeStart": "resizeStart"; "resizeEnd": "resizeEnd"; "close": "close"; "widthChange": "widthChange"; "heightChange": "heightChange"; "topChange": "topChange"; "leftChange": "leftChange"; "stateChange": "stateChange"; }, ["titleBarContent"], ["kendo-window-titlebar", "*"]>;
 }