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

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: [{

package/fesm2015/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 {
@@ -510,20 +522,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>
@@ -551,20 +563,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>
@@ -597,8 +609,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-dialog',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1673460759,
-    version: '',
+    publishDate: 1674032329,
+    version: '11.0.0',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -751,6 +763,7 @@ class DialogComponent {
          */
         this.close = new EventEmitter();
         this.tabIndex = 0;
+        this._themeColor = null;
         this.subscriptions = [];
         this.domSubs = new Subscription();
         validatePackage(packageMetadata);
@@ -759,6 +772,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
      */
@@ -832,6 +861,7 @@ class DialogComponent {
             }));
         }
         this.initDomEvents();
+        this.handleThemeColorClass(null, this.themeColor);
     }
     ngOnInit() {
         if (this.animation) {
@@ -1028,9 +1058,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,
@@ -1052,7 +1093,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>
@@ -1101,7 +1142,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>
@@ -1134,6 +1175,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], animation: [{
                 type: Input
+            }], themeColor: [{
+                type: Input
             }], action: [{
                 type: Output
             }], close: [{
@@ -1925,7 +1968,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"
@@ -1951,9 +1994,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']
@@ -2132,7 +2172,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,
@@ -2188,7 +2228,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']
@@ -2223,7 +2263,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,
@@ -2279,7 +2319,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']
@@ -2314,7 +2354,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,
@@ -2370,7 +2410,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']
@@ -2402,7 +2442,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,
@@ -2412,7 +2452,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">
@@ -2437,7 +2477,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">
@@ -2458,7 +2498,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']
@@ -2531,10 +2571,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();
@@ -2567,6 +2609,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
      */
@@ -2697,9 +2755,6 @@ class WindowComponent {
         }
         return this.localization.get('minimizeTitle');
     }
-    get hostClasses() {
-        return true;
-    }
     get dir() {
         return this.direction;
     }
@@ -2714,6 +2769,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');
@@ -2980,9 +3036,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,
@@ -3007,8 +3074,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>
@@ -3019,7 +3086,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>
@@ -3064,8 +3131,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>
@@ -3076,7 +3143,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>
@@ -3099,6 +3166,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], resizable: [{
                 type: Input
+            }], themeColor: [{
+                type: Input
             }], keepContent: [{
                 type: Input
             }], state: [{
@@ -3141,7 +3210,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: [{