@progress/kendo-angular-dialog 11.0.0-develop.100 → 11.0.0-develop.102

package/common/actions-layout.d.ts

@@ -5,4 +5,4 @@
 /**
  * Specifies the layout of the Dialog action buttons.
  */
-export declare type ActionsLayout = 'normal' | 'stretched';
+export declare type ActionsLayout = 'normal' | 'stretched' | 'end';

package/common/util.d.ts

@@ -30,11 +30,11 @@ export declare enum Keys {
 /**
  * @hidden
  */
-export declare const DIALOG_ELEMENTS_HANDLING_ESC_KEY = "k-dialog-wrapper k-dialog-buttongroup k-dialog-action";
+export declare const DIALOG_ELEMENTS_HANDLING_ESC_KEY = "k-dialog-wrapper k-actions k-dialog-titlebar-action";
 /**
  * @hidden
  */
-export declare const DIALOG_ELEMENTS_HANDLING_ARROWS = "k-dialog-buttongroup";
+export declare const DIALOG_ELEMENTS_HANDLING_ARROWS = "k-actions";
 /**
  * @hidden
  */

package/dialog/dialog-actions.component.d.ts

@@ -32,8 +32,9 @@ export declare class DialogActionsComponent {
      * Fires when the user clicks an action button.
      */
     action: EventEmitter<DialogAction>;
-    buttonGroupClassName: boolean;
-    get className(): boolean;
+    hostClasses: boolean;
+    get stretchedClassName(): boolean;
+    get endClassName(): boolean;
     constructor(el: ElementRef);
     /**
      * @hidden

package/dialog/dialog.component.d.ts

@@ -10,6 +10,7 @@ import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { ActionsLayout } from '../common/actions-layout';
 import { DialogAction } from './models/dialog-action';
 import { DialogAnimation } from './models/dialog-animation';
+import { DialogThemeColor } from './models';
 import * as i0 from "@angular/core";
 /**
  * Represents the [Kendo UI Dialog component for Angular]({% slug overview_dialog_dialogs %}).
@@ -82,6 +83,17 @@ export declare class DialogComponent implements AfterContentInit, AfterViewInit,
      * @default true
      */
     animation: boolean | DialogAnimation;
+    /**
+     * 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: DialogThemeColor);
+    get themeColor(): DialogThemeColor;
     /**
      * @hidden
      */
@@ -129,6 +141,7 @@ export declare class DialogComponent implements AfterContentInit, AfterViewInit,
     dialog: ElementRef;
     private _htmlAttributes;
     private _cssClass;
+    private _themeColor;
     private direction;
     private subscriptions;
     private domSubs;
@@ -183,6 +196,7 @@ export declare class DialogComponent implements AfterContentInit, AfterViewInit,
     get wrapperClass(): boolean;
     get styles(): any;
     private bubble;
+    private handleThemeColorClass;
     static ɵfac: i0.ɵɵFactoryDeclaration<DialogComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DialogComponent, "kendo-dialog", ["kendoDialog"], { "actions": "actions"; "actionsLayout": "actionsLayout"; "autoFocusedElement": "autoFocusedElement"; "title": "title"; "width": "width"; "minWidth": "minWidth"; "maxWidth": "maxWidth"; "height": "height"; "minHeight": "minHeight"; "maxHeight": "maxHeight"; "animation": "animation"; }, { "action": "action"; "close": "close"; }, ["titlebarContent"], ["kendo-dialog-titlebar", "*", "kendo-dialog-actions"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DialogComponent, "kendo-dialog", ["kendoDialog"], { "actions": "actions"; "actionsLayout": "actionsLayout"; "autoFocusedElement": "autoFocusedElement"; "title": "title"; "width": "width"; "minWidth": "minWidth"; "maxWidth": "maxWidth"; "height": "height"; "minHeight": "minHeight"; "maxHeight": "maxHeight"; "animation": "animation"; "themeColor": "themeColor"; }, { "action": "action"; "close": "close"; }, ["titlebarContent"], ["kendo-dialog-titlebar", "*", "kendo-dialog-actions"]>;
 }

package/dialog/models/index.d.ts

@@ -8,3 +8,4 @@ export * from './dialog-ref';
 export * from './dialog-result';
 export * from './dialog-settings';
 export * from './dialog-animation';
+export * from './theme-color';

package/dialog/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 Dialog.
+ *
+ * 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 DialogThemeColor = 'primary' | 'light' | 'dark';

package/esm2020/common/util.mjs

@@ -33,11 +33,11 @@ export var Keys;
 /**
  * @hidden
  */
-export const DIALOG_ELEMENTS_HANDLING_ESC_KEY = 'k-dialog-wrapper k-dialog-buttongroup k-dialog-action';
+export const DIALOG_ELEMENTS_HANDLING_ESC_KEY = 'k-dialog-wrapper k-actions k-dialog-titlebar-action';
 /**
  * @hidden
  */
-export const DIALOG_ELEMENTS_HANDLING_ARROWS = 'k-dialog-buttongroup';
+export const DIALOG_ELEMENTS_HANDLING_ARROWS = 'k-actions';
 /**
  * @hidden
  */

package/esm2020/dialog/dialog-actions.component.mjs

@@ -21,7 +21,7 @@ export 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.
@@ -37,9 +37,12 @@ export 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
      */
@@ -62,7 +65,7 @@ export 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
@@ -103,13 +106,22 @@ 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']
             }] } });

package/esm2020/dialog/dialog-titlebar.component.mjs

@@ -69,20 +69,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>
@@ -110,20 +110,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>

package/esm2020/dialog/dialog.component.mjs

@@ -66,6 +66,7 @@ export class DialogComponent {
          */
         this.close = new EventEmitter();
         this.tabIndex = 0;
+        this._themeColor = null;
         this.subscriptions = [];
         this.domSubs = new Subscription();
         validatePackage(packageMetadata);
@@ -74,6 +75,22 @@ export 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
      */
@@ -147,6 +164,7 @@ export class DialogComponent {
             }));
         }
         this.initDomEvents();
+        this.handleThemeColorClass(null, this.themeColor);
     }
     ngOnInit() {
         if (this.animation) {
@@ -343,9 +361,20 @@ export 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.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,
@@ -367,7 +396,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>
@@ -416,7 +445,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>
@@ -449,6 +478,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], animation: [{
                 type: Input
+            }], themeColor: [{
+                type: Input
             }], action: [{
                 type: Output
             }], close: [{

package/esm2020/dialog/models/index.mjs

@@ -8,3 +8,4 @@ export * from './dialog-ref';
 export * from './dialog-result';
 export * from './dialog-settings';
 export * from './dialog-animation';
+export * from './theme-color';

package/esm2020/dialog/models/theme-color.mjs

@@ -0,0 +1,5 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export {};

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-dialog',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1673469246,
+    publishDate: 1673519154,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2020/window/actions/window-close-action.directive.mjs

@@ -35,7 +35,7 @@ export 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: i1.DragResizeService, optional: true }, { token: i2.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,
@@ -45,7 +45,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">
@@ -70,7 +70,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">
@@ -89,7 +89,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']

package/esm2020/window/actions/window-maximize-action.directive.mjs

@@ -38,7 +38,7 @@ export 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: i1.DragResizeService, optional: true }, { token: i2.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,
@@ -92,7 +92,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']

package/esm2020/window/actions/window-minimize-action.directive.mjs

@@ -38,7 +38,7 @@ export 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: i1.DragResizeService, optional: true }, { token: i2.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,
@@ -92,7 +92,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']

package/esm2020/window/actions/window-restore-action.directive.mjs

@@ -38,7 +38,7 @@ export 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: i1.DragResizeService, optional: true }, { token: i2.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,
@@ -92,7 +92,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']

package/esm2020/window/models/index.mjs

@@ -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/esm2020/window/models/theme-color.mjs

@@ -0,0 +1,5 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export {};

package/esm2020/window/window-titlebar.component.mjs

@@ -107,7 +107,7 @@ export class WindowTitleBarComponent {
     }
 }
 WindowTitleBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowTitleBarComponent, deps: [{ token: i0.ElementRef }, { token: i1.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"
@@ -133,9 +133,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']

package/esm2020/window/window.component.mjs

@@ -94,10 +94,12 @@ export 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();
@@ -130,6 +132,22 @@ export 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
      */
@@ -260,9 +278,6 @@ export class WindowComponent {
         }
         return this.localization.get('minimizeTitle');
     }
-    get hostClasses() {
-        return true;
-    }
     get dir() {
         return this.direction;
     }
@@ -277,6 +292,7 @@ export 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');
@@ -543,9 +559,20 @@ export 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: i1.DragResizeService }, { token: i2.NavigationService }, { token: i0.NgZone }, { token: i3.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,
@@ -570,8 +597,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>
@@ -582,7 +609,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>
@@ -627,8 +654,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>
@@ -639,7 +666,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>
@@ -662,6 +689,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], resizable: [{
                 type: Input
+            }], themeColor: [{
+                type: Input
             }], keepContent: [{
                 type: Input
             }], state: [{
@@ -704,7 +733,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: [{