@progress/kendo-angular-dialog 25.3.1-develop.2 → 25.4.0-develop.10

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

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { TemplateRef, EventEmitter, HostBinding, Output, Input, Component, InjectionToken, Inject, Optional, Injectable, Directive, forwardRef, ViewChild, ViewChildren, ContentChildren, isDevMode, Renderer2, Host, HostListener, ContentChild, NgModule } from '@angular/core';
+import { TemplateRef, EventEmitter, signal, HostBinding, Output, Input, ChangeDetectionStrategy, Component, InjectionToken, Inject, Optional, Injectable, Directive, forwardRef, afterNextRender, ViewChild, ViewChildren, ContentChildren, isDevMode, Renderer2, Host, HostListener, afterEveryRender, ContentChild, NgModule } from '@angular/core';
 import { NgClass, NgTemplateOutlet, NgStyle } from '@angular/common';
 import * as i2 from '@angular/animations';
 import { style, animate, keyframes, trigger, state, transition } from '@angular/animations';
@@ -11,12 +11,12 @@ import * as i1 from '@progress/kendo-angular-buttons';
 import { KENDO_BUTTON, ButtonComponent, Button } from '@progress/kendo-angular-buttons';
 import * as i1$1 from '@progress/kendo-angular-l10n';
 import { LocalizationService, L10N_PREFIX, RTL, ComponentMessages } from '@progress/kendo-angular-l10n';
-import { take, delay, takeUntil, filter, map, share, tap, switchMap } from 'rxjs/operators';
 import { xIcon, windowRestoreIcon, windowIcon, windowMinimizeIcon } from '@progress/kendo-svg-icons';
 import * as i1$2 from '@progress/kendo-angular-common';
 import { setHTMLAttributes, getLicenseMessage, shouldShowValidationUI, isDocumentAvailable, normalizeKeys, Keys, focusableSelector, WatermarkOverlayComponent, KENDO_WEBMCP_HOST, provideComponentName, DraggableDirective, isChanged } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import { of, Subscription, Subject, merge } from 'rxjs';
+import { delay, takeUntil, filter, map, take, share, tap, switchMap } from 'rxjs/operators';
 import { offset, getWindowViewPort } from '@progress/kendo-popup-common';
 import { IconWrapperComponent, IconsService } from '@progress/kendo-angular-icons';
 
@@ -41,10 +41,10 @@ class DialogActionsComponent {
      */
     set actions(value) {
         if (value instanceof TemplateRef) {
-            this.actionsTemplate = value;
+            this._actionsValue.set(value);
         }
         else if (Array.isArray(value)) {
-            this.actionsArray = value;
+            this._actionsValue.set(value);
         }
         else {
             throw new Error('"actions" must be either TemplateRef or DialogAction[] instance.');
@@ -53,16 +53,27 @@ class DialogActionsComponent {
     /**
      * @hidden
      */
-    actionsArray;
+    get actionsArray() {
+        const v = this._actionsValue();
+        return Array.isArray(v) ? v : null;
+    }
     /**
      * @hidden
      */
-    actionsTemplate;
+    get actionsTemplate() {
+        const v = this._actionsValue();
+        return v instanceof TemplateRef ? v : null;
+    }
     /**
      * Sets the possible layout of the action buttons.
      * @default 'stretched'
      */
-    layout = 'stretched';
+    set layout(value) {
+        this._layout.set(value);
+    }
+    get layout() {
+        return this._layout();
+    }
     /**
      * Fires when the user clicks an action button.
      */
@@ -80,6 +91,8 @@ class DialogActionsComponent {
     get stretchedClassName() {
         return this.layout === 'stretched';
     }
+    _actionsValue = signal(null, ...(ngDevMode ? [{ debugName: "_actionsValue" }] : []));
+    _layout = signal('stretched', ...(ngDevMode ? [{ debugName: "_layout" }] : []));
     constructor(el) {
         this.el = el;
     }
@@ -95,8 +108,8 @@ class DialogActionsComponent {
     isDivider(action) {
         return action === 'spacer';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DialogActionsComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: DialogActionsComponent, isStandalone: true, 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-start": "this.startClassName", "class.k-actions-center": "this.centerClassName", "class.k-actions-end": "this.endClassName", "class.k-actions-stretched": "this.stretchedClassName" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: DialogActionsComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", type: DialogActionsComponent, isStandalone: true, 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-start": "this.startClassName", "class.k-actions-center": "this.centerClassName", "class.k-actions-end": "this.endClassName", "class.k-actions-stretched": "this.stretchedClassName" } }, ngImport: i0, template: `
         @if (!actions) {
           <ng-content></ng-content>
         }
@@ -124,9 +137,9 @@ class DialogActionsComponent {
         } @else {
           <ng-container [ngTemplateOutlet]="actionsTemplate"></ng-container>
         }
-        `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DialogActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: DialogActionsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-dialog-actions',
@@ -160,6 +173,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
         }
         `,
                     standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [NgClass, NgTemplateOutlet, KENDO_BUTTON]
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { actions: [{
@@ -241,10 +255,10 @@ class TitleBarLocalizationService extends LocalizationService {
         }
         return super.get(shortKey);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: TitleBarLocalizationService, deps: [{ token: L10N_PREFIX }, { token: i1$1.MessageService, optional: true }, { token: RTL, optional: true }, { token: DIALOG_LOCALIZATION_SERVICE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: TitleBarLocalizationService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: TitleBarLocalizationService, deps: [{ token: L10N_PREFIX }, { token: i1$1.MessageService, optional: true }, { token: RTL, optional: true }, { token: DIALOG_LOCALIZATION_SERVICE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: TitleBarLocalizationService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: TitleBarLocalizationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: TitleBarLocalizationService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
@@ -270,23 +284,47 @@ class Messages extends ComponentMessages {
     /**
      * Sets the title for the **Close** button.
      */
-    closeTitle;
+    set closeTitle(value) {
+        this._closeTitle.set(value);
+    }
+    get closeTitle() {
+        return this._closeTitle();
+    }
     /**
      * Sets the title for the **Restore** button.
      */
-    restoreTitle;
+    set restoreTitle(value) {
+        this._restoreTitle.set(value);
+    }
+    get restoreTitle() {
+        return this._restoreTitle();
+    }
     /**
      * Sets the title for the **Maximize** button.
      */
-    maximizeTitle;
+    set maximizeTitle(value) {
+        this._maximizeTitle.set(value);
+    }
+    get maximizeTitle() {
+        return this._maximizeTitle();
+    }
     /**
      * Sets the title for the **Minimize** button.
      */
-    minimizeTitle;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.23", type: Messages, isStandalone: true, selector: "kendo-dialog-messages-base", inputs: { closeTitle: "closeTitle", restoreTitle: "restoreTitle", maximizeTitle: "maximizeTitle", minimizeTitle: "minimizeTitle" }, usesInheritance: true, ngImport: i0 });
+    set minimizeTitle(value) {
+        this._minimizeTitle.set(value);
+    }
+    get minimizeTitle() {
+        return this._minimizeTitle();
+    }
+    _minimizeTitle = signal(null, ...(ngDevMode ? [{ debugName: "_minimizeTitle" }] : []));
+    _maximizeTitle = signal(null, ...(ngDevMode ? [{ debugName: "_maximizeTitle" }] : []));
+    _restoreTitle = signal(null, ...(ngDevMode ? [{ debugName: "_restoreTitle" }] : []));
+    _closeTitle = signal(null, ...(ngDevMode ? [{ debugName: "_closeTitle" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.33", type: Messages, isStandalone: true, selector: "kendo-dialog-messages-base", inputs: { closeTitle: "closeTitle", restoreTitle: "restoreTitle", maximizeTitle: "maximizeTitle", minimizeTitle: "minimizeTitle" }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: Messages, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: Messages, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-dialog-messages-base'
@@ -310,15 +348,15 @@ class LocalizedMessagesDirective extends Messages {
         super();
         this.service = service;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.23", type: LocalizedMessagesDirective, isStandalone: true, selector: "\n    [kendoDialogLocalizedMessages],\n    [kendoWindowLocalizedMessages],\n    [kendoDialogTitleBarLocalizedMessages]\n  ", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.33", type: LocalizedMessagesDirective, isStandalone: true, selector: "\n    [kendoDialogLocalizedMessages],\n    [kendoWindowLocalizedMessages],\n    [kendoDialogTitleBarLocalizedMessages]\n  ", providers: [
             {
                 provide: Messages,
                 useExisting: forwardRef(() => LocalizedMessagesDirective)
             }
         ], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -351,8 +389,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
  *
  */
 class DialogTitleBarComponent {
-    zone;
     hostElement;
+    injector;
     localizationService;
     /**
      * Fires when the close button in the title bar is clicked.
@@ -361,15 +399,30 @@ class DialogTitleBarComponent {
     /**
      * @hidden
      */
-    id;
+    set id(value) {
+        this._id.set(value);
+    }
+    get id() {
+        return this._id();
+    }
     /**
      * @hidden
      */
-    closeTitle;
+    set closeTitle(value) {
+        this._closeTitle.set(value);
+    }
+    get closeTitle() {
+        return this._closeTitle();
+    }
     /**
      * @hidden
      */
-    closable = true;
+    set closable(value) {
+        this._closable.set(value);
+    }
+    get closable() {
+        return this._closable();
+    }
     get className() {
         return true;
     }
@@ -377,9 +430,12 @@ class DialogTitleBarComponent {
      * @hidden
      */
     xIcon = xIcon;
-    constructor(zone, hostElement, localizationService) {
-        this.zone = zone;
+    _id = signal(undefined, ...(ngDevMode ? [{ debugName: "_id" }] : []));
+    _closeTitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_closeTitle" }] : []));
+    _closable = signal(true, ...(ngDevMode ? [{ debugName: "_closable" }] : []));
+    constructor(hostElement, injector, localizationService) {
         this.hostElement = hostElement;
+        this.injector = injector;
         this.localizationService = localizationService;
     }
     get closeButtonTitle() {
@@ -389,10 +445,10 @@ class DialogTitleBarComponent {
         if (!this.id) {
             return;
         }
-        this.zone.onStable.pipe(take(1)).subscribe(() => {
+        afterNextRender(() => {
             const element = this.hostElement.nativeElement.querySelector('.k-dialog-title');
             element?.setAttribute('id', this.id);
-        });
+        }, { injector: this.injector });
     }
     /**
      * @hidden
@@ -402,8 +458,8 @@ class DialogTitleBarComponent {
         const eventArgs = new PreventableEvent();
         this.close.emit(eventArgs);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DialogTitleBarComponent, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: i1$1.LocalizationService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: DialogTitleBarComponent, isStandalone: true, selector: "kendo-dialog-titlebar", inputs: { id: "id", closeTitle: "closeTitle", closable: "closable" }, outputs: { close: "close" }, host: { properties: { "class.k-window-titlebar": "this.className", "class.k-dialog-titlebar": "this.className" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: DialogTitleBarComponent, deps: [{ token: i0.ElementRef }, { token: i0.Injector }, { token: i1$1.LocalizationService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", type: DialogTitleBarComponent, isStandalone: true, selector: "kendo-dialog-titlebar", inputs: { id: "id", closeTitle: "closeTitle", closable: "closable" }, outputs: { close: "close" }, host: { properties: { "class.k-window-titlebar": "this.className", "class.k-dialog-titlebar": "this.className" } }, providers: [
             TitleBarLocalizationService,
             {
                 provide: LocalizationService,
@@ -441,9 +497,9 @@ class DialogTitleBarComponent {
                 </div>
             }
         </ng-container>
-    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDialogLocalizedMessages],\n    [kendoWindowLocalizedMessages],\n    [kendoDialogTitleBarLocalizedMessages]\n  " }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDialogLocalizedMessages],\n    [kendoWindowLocalizedMessages],\n    [kendoDialogTitleBarLocalizedMessages]\n  " }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DialogTitleBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: DialogTitleBarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-dialog-titlebar',
@@ -488,9 +544,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
         </ng-container>
     `,
                     standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [LocalizedMessagesDirective, ButtonComponent]
                 }]
-        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: i1$1.LocalizationService, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Injector }, { type: i1$1.LocalizationService, decorators: [{
                     type: Optional
                 }] }], propDecorators: { close: [{
                 type: Output
@@ -516,8 +573,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1791536870,
-    version: '25.3.1-develop.2',
+    publishDate: 1792513813,
+    version: '25.4.0-develop.10',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -819,19 +876,30 @@ class DialogComponent {
     cdr;
     ngZone;
     builder;
+    injector;
     /**
      * Specifies the action buttons to render in the Dialog.
      *
      * @type {DialogAction[]}
      */
-    actions;
+    set actions(value) {
+        this._actions.set(value);
+    }
+    get actions() {
+        return this._actions();
+    }
     /**
      * Sets the layout of the action buttons in the Dialog. Applies only if you specify action buttons through the `actions` option.
      *
      * @type {ActionsLayout}
      * @default 'stretched'
      */
-    actionsLayout = 'stretched';
+    set actionsLayout(value) {
+        this._actionsLayout.set(value);
+    }
+    get actionsLayout() {
+        return this._actionsLayout();
+    }
     /**
      * Sets the query selector for the element to receive initial focus. ([See examples.](https://www.telerik.com/kendo-angular-ui/components/dialogs/dialog/initial-focus))
      *
@@ -840,7 +908,12 @@ class DialogComponent {
      * @remarks
      * This property is related to accessibility.
      */
-    autoFocusedElement;
+    set autoFocusedElement(value) {
+        this._autoFocusedElement.set(value);
+    }
+    get autoFocusedElement() {
+        return this._autoFocusedElement();
+    }
     /**
      * Specifies whether the Dialog can be closed by the **Close** button in the title bar or by pressing the `Esc` key.
      *
@@ -848,56 +921,91 @@ class DialogComponent {
      * @default true
      */
     set closable(value) {
-        this._closable = value;
+        this._closable.set(value);
         if (this.titlebarContent?.first) {
             this.titlebarContent.first.closable = value;
         }
     }
     get closable() {
-        return this._closable;
+        return this._closable();
     }
     /**
      * Sets the text in the Dialog title bar.
      *
      * @type {string}
      */
-    title;
+    set title(value) {
+        this._title.set(value);
+    }
+    get title() {
+        return this._title();
+    }
     /**
      * Sets the width of the Dialog. Use a number for pixels or a string for units (for example, `50%`).
      *
      * @type {number | string}
      */
-    width;
+    set width(value) {
+        this._width.set(value);
+    }
+    get width() {
+        return this._width();
+    }
     /**
      * Sets the minimum width of the Dialog. Use a number for pixels or a string for units (for example, `50%`).
      *
      * @type {number | string}
      */
-    minWidth;
+    set minWidth(value) {
+        this._minWidth.set(value);
+    }
+    get minWidth() {
+        return this._minWidth();
+    }
     /**
      * Sets the maximum width of the Dialog. Use a number for pixels or a string for units (for example, `50%`).
      *
      * @type {number | string}
      */
-    maxWidth;
+    set maxWidth(value) {
+        this._maxWidth.set(value);
+    }
+    get maxWidth() {
+        return this._maxWidth();
+    }
     /**
      * Sets the height of the Dialog. Use a number for pixels or a string for units (for example, `50%`).
      *
      * @type {number | string}
      */
-    height;
+    set height(value) {
+        this._height.set(value);
+    }
+    get height() {
+        return this._height();
+    }
     /**
      * Sets the minimum height of the Dialog. Use a number for pixels or a string for units (for example, `50%`).
      *
      * @type {number | string}
      */
-    minHeight;
+    set minHeight(value) {
+        this._minHeight.set(value);
+    }
+    get minHeight() {
+        return this._minHeight();
+    }
     /**
      * Sets the maximum height of the Dialog. Use a number for pixels or a string for units (for example, `50%`).
      *
      * @type {number | string}
      */
-    maxHeight;
+    set maxHeight(value) {
+        this._maxHeight.set(value);
+    }
+    get maxHeight() {
+        return this._maxHeight();
+    }
     /**
      * Configures the Dialog opening animation ([see example](https://www.telerik.com/kendo-angular-ui/components/dialogs/dialog/animations)).
      * The default animation type is `translate` and the duration is `300ms`.
@@ -905,7 +1013,12 @@ class DialogComponent {
      * @type {boolean | DialogAnimation}
      * @default true
      */
-    animation = true;
+    set animation(value) {
+        this._animation.set(value);
+    }
+    get animation() {
+        return this._animation();
+    }
     /**
      * @hidden
      */
@@ -914,26 +1027,26 @@ class DialogComponent {
         const el = this.wrapper.nativeElement;
         const dir = el.getAttribute('dir');
         const tIndex = el.getAttribute('tabindex');
-        if (this.direction !== dir && dir) {
-            this.direction = dir;
+        if (this._direction() !== dir && dir) {
+            this._direction.set(dir);
         }
         if (this.tabIndex !== tIndex && tIndex) {
             this.tabIndex = tIndex;
         }
-        this._htmlAttributes = attributes;
+        this._htmlAttributes.set(attributes);
     }
     get htmlAttributes() {
-        return this._htmlAttributes;
+        return this._htmlAttributes();
     }
     /**
      * @hidden
      */
     set cssClass(classes) {
-        this.setServiceClasses(this._cssClass, classes);
-        this._cssClass = classes;
+        this.setServiceClasses(this._cssClass(), classes);
+        this._cssClass.set(classes);
     }
     get cssClass() {
-        return this._cssClass;
+        return this._cssClass();
     }
     /**
      * @hidden
@@ -972,30 +1085,42 @@ class DialogComponent {
      */
     close = new EventEmitter();
     get dir() {
-        return this.direction;
+        return this._direction();
     }
     tabIndex = 0;
     titlebarContent;
     titlebarView;
     actionsView;
     dialog;
-    _htmlAttributes;
-    _cssClass;
-    _closable = true;
-    direction;
+    _htmlAttributes = signal(undefined, ...(ngDevMode ? [{ debugName: "_htmlAttributes" }] : []));
+    _cssClass = signal(undefined, ...(ngDevMode ? [{ debugName: "_cssClass" }] : []));
+    _actions = signal(undefined, ...(ngDevMode ? [{ debugName: "_actions" }] : []));
+    _actionsLayout = signal('stretched', ...(ngDevMode ? [{ debugName: "_actionsLayout" }] : []));
+    _autoFocusedElement = signal(undefined, ...(ngDevMode ? [{ debugName: "_autoFocusedElement" }] : []));
+    _closable = signal(true, ...(ngDevMode ? [{ debugName: "_closable" }] : []));
+    _title = signal(undefined, ...(ngDevMode ? [{ debugName: "_title" }] : []));
+    _width = signal(undefined, ...(ngDevMode ? [{ debugName: "_width" }] : []));
+    _minWidth = signal(undefined, ...(ngDevMode ? [{ debugName: "_minWidth" }] : []));
+    _maxWidth = signal(undefined, ...(ngDevMode ? [{ debugName: "_maxWidth" }] : []));
+    _height = signal(undefined, ...(ngDevMode ? [{ debugName: "_height" }] : []));
+    _minHeight = signal(undefined, ...(ngDevMode ? [{ debugName: "_minHeight" }] : []));
+    _maxHeight = signal(undefined, ...(ngDevMode ? [{ debugName: "_maxHeight" }] : []));
+    _animation = signal(true, ...(ngDevMode ? [{ debugName: "_animation" }] : []));
+    _direction = signal('ltr', ...(ngDevMode ? [{ debugName: "_direction" }] : []));
     subscriptions = [];
     domSubs = new Subscription();
-    constructor(wrapper, renderer, localization, cdr, ngZone, builder) {
+    constructor(wrapper, renderer, localization, cdr, ngZone, builder, injector) {
         this.wrapper = wrapper;
         this.renderer = renderer;
         this.cdr = cdr;
         this.ngZone = ngZone;
         this.builder = builder;
+        this.injector = injector;
         const isValid = validatePackage(packageMetadata);
         this.licenseMessage = getLicenseMessage(packageMetadata);
         this.showLicenseWatermark = shouldShowValidationUI(isValid);
-        this.direction = localization.rtl ? 'rtl' : 'ltr';
-        this.subscriptions.push(localization.changes.subscribe(({ rtl }) => (this.direction = rtl ? 'rtl' : 'ltr')));
+        this._direction.set(localization.rtl ? 'rtl' : 'ltr');
+        this.subscriptions.push(localization.changes.subscribe(({ rtl }) => this._direction.set(rtl ? 'rtl' : 'ltr')));
         this.titleId = this.generateTitleId();
         this.contentId = this.generateContentId();
     }
@@ -1009,9 +1134,9 @@ class DialogComponent {
             this.subscriptions.push(this.titlebarContent.changes.subscribe(() => {
                 if (isPresent(this.titlebarContent.first)) {
                     this.titlebarContent.first.closable = this.closable;
-                    this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+                    afterNextRender(() => {
                         this.bubble('close', this.titlebarContent.first);
-                    });
+                    }, { injector: this.injector });
                 }
             }));
         }
@@ -1020,9 +1145,9 @@ class DialogComponent {
         if (!isDocumentAvailable()) {
             return;
         }
-        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+        afterNextRender(() => {
             this.handleInitialFocus();
-        });
+        }, { injector: this.injector });
         this.bubble('close', this.titlebarView.first);
         this.bubble('action', this.actionsView);
         if (this.titlebarView.first) {
@@ -1032,10 +1157,10 @@ class DialogComponent {
             this.subscriptions.push(this.titlebarView.changes.subscribe(() => {
                 if (isPresent(this.titlebarView.first)) {
                     this.titlebarView.first.id = this.titleId;
-                    this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+                    afterNextRender(() => {
                         this.bubble('close', this.titlebarView.first);
                         this.renderer.setAttribute(this.wrapper.nativeElement.querySelector('.k-dialog'), 'aria-labelledby', this.titleId);
-                    });
+                    }, { injector: this.injector });
                 }
             }));
         }
@@ -1237,8 +1362,8 @@ class DialogComponent {
             this.subscriptions.push(s);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DialogComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i2.AnimationBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: DialogComponent, isStandalone: true, selector: "kendo-dialog", inputs: { actions: "actions", actionsLayout: "actionsLayout", autoFocusedElement: "autoFocusedElement", closable: "closable", 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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: DialogComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i2.AnimationBuilder }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", type: DialogComponent, isStandalone: true, selector: "kendo-dialog", inputs: { actions: "actions", actionsLayout: "actionsLayout", autoFocusedElement: "autoFocusedElement", closable: "closable", 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: [
             LocalizationService,
             {
                 provide: DIALOG_LOCALIZATION_SERVICE,
@@ -1292,9 +1417,9 @@ class DialogComponent {
                 state('in', style({ opacity: 1 })),
                 transition('void => *', [style({ opacity: 0.1 }), animate('.3s cubic-bezier(.2, .6, .4, 1)')])
             ])
-        ] });
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: DialogComponent, decorators: [{
             type: Component,
             args: [{
                     animations: [
@@ -1357,9 +1482,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
         </ng-container>
         `,
                     standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [LocalizedMessagesDirective, NgStyle, DialogTitleBarComponent, NgTemplateOutlet, DialogActionsComponent, WatermarkOverlayComponent]
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i2.AnimationBuilder }], propDecorators: { actions: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i2.AnimationBuilder }, { type: i0.Injector }], propDecorators: { actions: [{
                 type: Input
             }], actionsLayout: [{
                 type: Input
@@ -1490,10 +1616,10 @@ class DialogContentBase {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DialogContentBase, deps: [{ token: DialogRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.23", type: DialogContentBase, isStandalone: true, viewQueries: [{ propertyName: "dialogTitleBar", first: true, predicate: DialogTitleBarComponent, descendants: true }, { propertyName: "dialogActions", first: true, predicate: DialogActionsComponent, descendants: true }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: DialogContentBase, deps: [{ token: DialogRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.33", type: DialogContentBase, isStandalone: true, viewQueries: [{ propertyName: "dialogTitleBar", first: true, predicate: DialogTitleBarComponent, descendants: true }, { propertyName: "dialogActions", first: true, predicate: DialogActionsComponent, descendants: true }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DialogContentBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: DialogContentBase, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: DialogRef }], propDecorators: { dialogTitleBar: [{
                 type: ViewChild,
@@ -1514,10 +1640,10 @@ class DialogContainerService {
     get container() {
         return DialogContainerService.container;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DialogContainerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DialogContainerService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: DialogContainerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: DialogContainerService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DialogContainerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: DialogContainerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1834,10 +1960,10 @@ See https://www.telerik.com/kendo-angular-ui/components/dialogs/dialog/service/.
             ]
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DialogService, deps: [{ token: DialogContainerService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DialogService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: DialogService, deps: [{ token: DialogContainerService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: DialogService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DialogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: DialogService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1883,6 +2009,8 @@ const createMoveStream = (el, ev) => mouseDown => {
  */
 class DragResizeService {
     ngZone;
+    injector;
+    cdr;
     close = new EventEmitter();
     focus = new EventEmitter();
     change = new EventEmitter();
@@ -1891,14 +2019,16 @@ class DragResizeService {
     dragEnd = new EventEmitter();
     resizeStart = new EventEmitter();
     resizeEnd = new EventEmitter();
-    options = Object.assign({}, DEFAULT_OPTIONS);
+    options = signal(Object.assign({}, DEFAULT_OPTIONS), ...(ngDevMode ? [{ debugName: "options" }] : []));
     restoreOptions;
     window;
-    lastAction = null;
+    lastAction = signal(null, ...(ngDevMode ? [{ debugName: "lastAction" }] : []));
     subscriptions = new Subscription();
     dragSubscription = new Subscription();
-    constructor(ngZone) {
+    constructor(ngZone, injector, cdr) {
         this.ngZone = ngZone;
+        this.injector = injector;
+        this.cdr = cdr;
     }
     ngOnDestroy() {
         if (this.subscriptions) {
@@ -1909,8 +2039,8 @@ class DragResizeService {
         }
     }
     init(el) {
-        const state = this.options.state;
-        const options = this.options;
+        const state = this.options().state;
+        const options = this.options();
         this.window = el;
         if (state !== 'default' && !isPresent(this.restoreOptions)) {
             this.restoreOptions = Object.assign({}, options);
@@ -1946,11 +2076,11 @@ class DragResizeService {
         }));
     }
     handleDrag({ originalX, originalY, pageX, pageY, startPosition }) {
-        this.options.left = startPosition.x + pageX - originalX;
-        this.options.top = startPosition.y + pageY - originalY;
-        if (this.options.state === 'minimized' && isPresent(this.restoreOptions)) {
-            this.restoreOptions.left = this.options.left;
-            this.restoreOptions.top = this.options.top;
+        this.options().left = startPosition.x + pageX - originalX;
+        this.options().top = startPosition.y + pageY - originalY;
+        if (this.options().state === 'minimized' && isPresent(this.restoreOptions)) {
+            this.restoreOptions.left = this.options().left;
+            this.restoreOptions.top = this.options().top;
         }
         this.change.emit({
             left: startPosition.x + pageX - originalX,
@@ -1979,7 +2109,7 @@ class DragResizeService {
         }));
     }
     handleResize(initial, dir, deltaX, deltaY) {
-        const old = this.options;
+        const old = this.options();
         const ev = {};
         if (dir.indexOf('e') >= 0) {
             const newWidth = initial.width + deltaX;
@@ -2012,59 +2142,59 @@ class DragResizeService {
         if (isPresent(ev.width) || isPresent(ev.height)) {
             OFFSET_STYLES.forEach((style) => {
                 if (isPresent(ev[style])) {
-                    this.options[style] = ev[style];
+                    this.options()[style] = ev[style];
                 }
             });
             this.change.emit(ev);
         }
     }
     restoreAction() {
-        this.lastAction = 'restore';
+        this.lastAction.set('restore');
         this.defaultState();
     }
     defaultState() {
         if (isPresent(this.restoreOptions)) {
-            this.options = Object.assign({}, this.restoreOptions);
+            this.options.set(Object.assign({}, this.restoreOptions));
         }
-        this.options.state = 'default';
-        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
-            if (!isPresent(this.options.left) || !isPresent(this.options.top)) {
+        this.options().state = 'default';
+        afterNextRender(() => {
+            if (!isPresent(this.options().left) || !isPresent(this.options().top)) {
                 this.center();
             }
-        });
+        }, { injector: this.injector });
         this.stateChange.emit('default');
     }
     storeOptions() {
-        this.restoreOptions = Object.assign({}, this.options);
+        this.restoreOptions = Object.assign({}, this.options());
     }
     maximizeAction() {
-        this.lastAction = 'maximize';
+        this.lastAction.set('maximize');
         this.maximizeState();
     }
     maximizeState() {
         this.storeOptions();
         const wnd = this.windowViewPort;
-        this.options = Object.assign({}, this.options, {
+        this.options.set(Object.assign({}, this.options(), {
             height: wnd.height,
             left: 0,
             position: 'fixed',
             state: 'maximized',
             top: 0,
             width: wnd.width
-        });
+        }));
         this.stateChange.emit('maximized');
     }
     minimizeAction() {
-        this.lastAction = 'minimize';
+        this.lastAction.set('minimize');
         this.minimizeState();
     }
     minimizeState() {
         this.storeOptions();
-        this.options = Object.assign({}, this.options, {
+        this.options.set(Object.assign({}, this.options(), {
             height: null,
             position: 'absolute',
             state: 'minimized'
-        });
+        }));
         this.stateChange.emit('minimized');
     }
     /**
@@ -2072,7 +2202,7 @@ class DragResizeService {
      * Required to distinguish them from action clicks.
      */
     applyManualState(previousState) {
-        const state = this.options.state;
+        const state = this.options().state;
         switch (state) {
             case 'default':
                 this.defaultState();
@@ -2082,7 +2212,7 @@ class DragResizeService {
                 break;
             case 'minimized':
                 if (previousState) {
-                    this.options.state = previousState;
+                    this.options().state = previousState;
                 }
                 this.minimizeState();
                 break;
@@ -2095,52 +2225,51 @@ class DragResizeService {
     }
     ensureWidth() {
         const windowOffset = offset(this.window.nativeElement);
-        if (!isPresent(this.options.width)) {
-            this.options.width = windowOffset.width;
+        if (!isPresent(this.options().width)) {
+            this.options().width = windowOffset.width;
             this.change.emit({ width: windowOffset.width });
         }
     }
     center() {
-        if (this.options.state === 'maximized') {
+        if (this.options().state === 'maximized') {
             return;
         }
         const wnd = this.windowViewPort;
         const wrapper = offset(this.window.nativeElement);
         const el = this.window.nativeElement;
         const ev = {};
-        if (!isPresent(this.options.left)) {
+        if (!isPresent(this.options().left)) {
             const targetX = Math.max(0, (wnd.width - wrapper.width) / 2);
-            this.options.left = el.offsetLeft + targetX - wrapper.left;
-            ev.left = this.options.left;
+            this.options().left = el.offsetLeft + targetX - wrapper.left;
+            ev.left = this.options().left;
         }
-        if (!isPresent(this.options.top)) {
+        if (!isPresent(this.options().top)) {
             const targetY = Math.max(0, (wnd.height - wrapper.height) / 2);
-            this.options.top = el.offsetTop + targetY - wrapper.top;
-            ev.top = this.options.top;
+            this.options().top = el.offsetTop + targetY - wrapper.top;
+            ev.top = this.options().top;
         }
         this.change.emit(ev);
     }
     currentOffsetAndPosition() {
-        const o = this.options;
         const off = offset(this.window.nativeElement);
         return Object.assign({}, this.currentPosition(), {
-            height: o.height ? o.height : off.height,
-            width: o.width ? o.width : off.width
+            height: this.options().height ? this.options().height : off.height,
+            width: this.options().width ? this.options().width : off.width
         });
     }
     currentPosition() {
-        const o = this.options;
+        const o = this.options();
         if (!isPresent(o.top) || !isPresent(o.left)) {
             this.setPosition();
         }
         return {
-            x: this.options.left,
-            y: this.options.top
+            x: this.options().left,
+            y: this.options().top
         };
     }
     setPosition() {
-        this.options.left = this.window.nativeElement.offsetLeft;
-        this.options.top = this.window.nativeElement.offsetTop;
+        this.options().left = this.window.nativeElement.offsetLeft;
+        this.options().top = this.window.nativeElement.offsetTop;
     }
     setRestoreOption(style, value) {
         if (isPresent(this.restoreOptions)) {
@@ -2156,12 +2285,12 @@ class DragResizeService {
     get windowViewPort() {
         return getWindowViewPort(this.window.nativeElement);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DragResizeService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DragResizeService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: DragResizeService, deps: [{ token: i0.NgZone }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: DragResizeService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DragResizeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: DragResizeService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i0.NgZone }] });
+        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }] });
 
 /**
  * @hidden
@@ -2207,12 +2336,12 @@ class ResizeHandleDirective {
         this.subscriptions.unsubscribe();
     }
     setDisplay(value = 'block') {
-        this.renderer.setStyle(this.el.nativeElement, 'display', this.service.options.state === 'default' ? value : 'none');
+        this.renderer.setStyle(this.el.nativeElement, 'display', this.service.options().state === 'default' ? value : 'none');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ResizeHandleDirective, deps: [{ token: i1$2.DraggableDirective, host: true }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DragResizeService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.23", type: ResizeHandleDirective, isStandalone: true, selector: "[kendoWindowResizeHandle]", inputs: { direction: "direction" }, host: { properties: { "class.k-resize-handle": "this.hostClass" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: ResizeHandleDirective, deps: [{ token: i1$2.DraggableDirective, host: true }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DragResizeService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.33", type: ResizeHandleDirective, isStandalone: true, selector: "[kendoWindowResizeHandle]", inputs: { direction: "direction" }, host: { properties: { "class.k-resize-handle": "this.hostClass" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ResizeHandleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: ResizeHandleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoWindowResizeHandle]',
@@ -2234,24 +2363,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
 class WindowTitleBarComponent {
     el;
     ngZone;
+    injector;
     /**
      * @hidden
      */
-    template;
+    set template(value) {
+        this._template.set(value);
+    }
+    get template() {
+        return this._template();
+    }
     /**
      * @hidden
      */
-    id;
+    set id(value) {
+        this._id.set(value);
+    }
+    get id() {
+        return this._id();
+    }
     /**
      * @hidden
      */
     service;
+    _template = signal(undefined, ...(ngDevMode ? [{ debugName: "_template" }] : []));
+    _id = signal(undefined, ...(ngDevMode ? [{ debugName: "_id" }] : []));
     dragDirective;
     dragSubscription;
     stateSubscription;
-    constructor(el, service, ngZone) {
+    constructor(el, service, ngZone, injector) {
         this.el = el;
         this.ngZone = ngZone;
+        this.injector = injector;
         this.service = service;
     }
     ngOnInit() {
@@ -2265,10 +2408,10 @@ class WindowTitleBarComponent {
         if (!this.id || this.template) {
             return;
         }
-        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+        afterNextRender(() => {
             const element = this.el.nativeElement.querySelector('.k-window-title');
             element?.setAttribute('id', this.id);
-        });
+        }, { injector: this.injector });
     }
     ngOnDestroy() {
         this.dragDirective.ngOnDestroy();
@@ -2289,7 +2432,7 @@ class WindowTitleBarComponent {
      */
     subscribeStateChange() {
         this.stateSubscription = this.service.stateChange.subscribe((state) => {
-            if (this.service.options.draggable) {
+            if (this.service.options().draggable) {
                 if (state === 'maximized') {
                     this.unsubscribeDrag();
                 }
@@ -2331,8 +2474,8 @@ class WindowTitleBarComponent {
      */
     handle(ev) {
         const target = ev.target;
-        const state = this.service.options.state;
-        if (!hasClasses(target, 'k-icon') && !isFocusable(target, false) && this.service.options.resizable) {
+        const state = this.service.options().state;
+        if (!hasClasses(target, 'k-icon') && !isFocusable(target, false) && this.service.options().resizable) {
             if (state === 'default') {
                 this.service.maximizeAction();
             }
@@ -2342,11 +2485,11 @@ class WindowTitleBarComponent {
         }
     }
     get isDraggable() {
-        const options = this.service.options;
+        const options = this.service.options();
         return options.draggable && options.state !== 'maximized';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: WindowTitleBarComponent, deps: [{ token: i0.ElementRef }, { token: DragResizeService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: WindowTitleBarComponent, isStandalone: true, 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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: WindowTitleBarComponent, deps: [{ token: i0.ElementRef }, { token: DragResizeService }, { token: i0.NgZone }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", type: WindowTitleBarComponent, isStandalone: true, 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: `
 	@if (!template) {
 	  <ng-content></ng-content>
 	}
@@ -2356,9 +2499,9 @@ class WindowTitleBarComponent {
 	    [ngTemplateOutletContext]="{'$implicit': service}">
 	  </ng-template>
 	}
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: WindowTitleBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: WindowTitleBarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-window-titlebar',
@@ -2374,9 +2517,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
 	}
 	`,
                     standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [NgTemplateOutlet]
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: DragResizeService }, { type: i0.NgZone }], propDecorators: { template: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: DragResizeService }, { type: i0.NgZone }, { type: i0.Injector }], propDecorators: { template: [{
                 type: Input
             }], id: [{
                 type: Input
@@ -2429,7 +2573,7 @@ class NavigationService {
         }
     }
     handleArrow(key, ev) {
-        const options = this.window.options;
+        const options = this.window.options();
         if (ev.altKey) {
             this.handleStateChange(key, options.state);
             return;
@@ -2445,7 +2589,7 @@ class NavigationService {
         this.window.closeAction();
     }
     handleDrag(key) {
-        const options = this.window.options;
+        const options = this.window.options();
         if (!options.draggable) {
             return;
         }
@@ -2479,7 +2623,7 @@ class NavigationService {
         this.window.change.emit(ev);
     }
     handleResize(key) {
-        const options = this.window.options;
+        const options = this.window.options();
         if (!options.resizable) {
             return;
         }
@@ -2514,7 +2658,7 @@ class NavigationService {
         if (isPresent(ev.width) || isPresent(ev.height)) {
             OFFSET_STYLES.forEach((style) => {
                 if (isPresent(ev[style])) {
-                    this.window.options[style] = ev[style];
+                    this.window.options()[style] = ev[style];
                 }
             });
             this.window.change.emit(ev);
@@ -2535,10 +2679,10 @@ class NavigationService {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: NavigationService, deps: [{ token: DragResizeService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: NavigationService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: NavigationService, deps: [{ token: DragResizeService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: NavigationService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: NavigationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: NavigationService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: DragResizeService }, { type: i0.NgZone }] });
 
@@ -2575,8 +2719,8 @@ class WindowCloseActionDirective extends Button {
             this.window.closeAction();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: WindowCloseActionDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DragResizeService, optional: true }, { token: i1$1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: WindowCloseActionDirective, isStandalone: true, selector: "button[kendoWindowCloseAction]", inputs: { window: "window" }, host: { listeners: { "click": "onClick()" }, properties: { "attr.type": "this.buttonType", "class.k-window-titlebar-action": "this.buttonClass" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: WindowCloseActionDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DragResizeService, optional: true }, { token: i1$1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", type: WindowCloseActionDirective, isStandalone: true, 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,
@@ -2599,9 +2743,9 @@ class WindowCloseActionDirective extends Button {
           <span class="k-button-icon" [ngClass]="iconClass"></span>
         }
         <span class="k-button-text"><ng-content></ng-content></span>
-        `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: WindowCloseActionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: WindowCloseActionDirective, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoWindowCloseAction',
@@ -2632,7 +2776,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
         <span class="k-button-text"><ng-content></ng-content></span>
         `,
                     standalone: true,
-                    imports: [IconWrapperComponent, NgClass]
+                    imports: [IconWrapperComponent, NgClass],
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: DragResizeService, decorators: [{
                     type: Optional
@@ -2660,16 +2805,22 @@ class WindowRestoreActionDirective extends Button {
     /**
      * @hidden
      */
-    window;
+    set window(value) {
+        this._window.set(value);
+    }
+    get window() {
+        return this._window();
+    }
     /**
      * @hidden
      */
     windowRestoreIcon = windowRestoreIcon;
+    _window = signal(null, ...(ngDevMode ? [{ debugName: "_window" }] : []));
     buttonType = 'button';
     buttonClass = true;
     constructor(el, renderer, _service, localization, ngZone) {
         super(el, renderer, null, localization, ngZone);
-        this.window = _service;
+        this._window.set(_service);
         this.fillMode = 'flat';
         this.size = 'xsmall';
         this.icon = 'window-restore';
@@ -2683,10 +2834,10 @@ class WindowRestoreActionDirective extends Button {
         }
     }
     get visible() {
-        return this.window.options.state === 'default' ? 'none' : 'inline-flex';
+        return this.window.options().state === 'default' ? 'none' : 'inline-flex';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: WindowRestoreActionDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DragResizeService, optional: true }, { token: i1$1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: WindowRestoreActionDirective, isStandalone: true, 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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: WindowRestoreActionDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DragResizeService, optional: true }, { token: i1$1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", type: WindowRestoreActionDirective, isStandalone: true, 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,
@@ -2709,9 +2860,9 @@ class WindowRestoreActionDirective extends Button {
           <span class="k-button-icon" [ngClass]="iconClass"></span>
         }
         <span class="k-button-text"><ng-content></ng-content></span>
-        `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: WindowRestoreActionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: WindowRestoreActionDirective, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoWindowRestoreAction',
@@ -2742,7 +2893,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
         <span class="k-button-text"><ng-content></ng-content></span>
         `,
                     standalone: true,
-                    imports: [IconWrapperComponent, NgClass]
+                    imports: [IconWrapperComponent, NgClass],
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: DragResizeService, decorators: [{
                     type: Optional
@@ -2796,10 +2948,10 @@ class WindowMaximizeActionDirective extends Button {
         }
     }
     get visible() {
-        return this.window.options.state === 'default' ? 'inline-flex' : 'none';
+        return this.window.options().state === 'default' ? 'inline-flex' : 'none';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: WindowMaximizeActionDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DragResizeService, optional: true }, { token: i1$1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: WindowMaximizeActionDirective, isStandalone: true, 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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: WindowMaximizeActionDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DragResizeService, optional: true }, { token: i1$1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", type: WindowMaximizeActionDirective, isStandalone: true, 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,
@@ -2822,9 +2974,9 @@ class WindowMaximizeActionDirective extends Button {
           <span class="k-button-icon" [ngClass]="iconClass"></span>
         }
         <span class="k-button-text"><ng-content></ng-content></span>
-        `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: WindowMaximizeActionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: WindowMaximizeActionDirective, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoWindowMaximizeAction',
@@ -2855,7 +3007,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
         <span class="k-button-text"><ng-content></ng-content></span>
         `,
                     standalone: true,
-                    imports: [IconWrapperComponent, NgClass]
+                    imports: [IconWrapperComponent, NgClass],
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: DragResizeService, decorators: [{
                     type: Optional
@@ -2909,10 +3062,10 @@ class WindowMinimizeActionDirective extends Button {
         }
     }
     get visible() {
-        return this.window.options.state === 'default' ? 'inline-flex' : 'none';
+        return this.window.options().state === 'default' ? 'inline-flex' : 'none';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: WindowMinimizeActionDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DragResizeService, optional: true }, { token: i1$1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: WindowMinimizeActionDirective, isStandalone: true, 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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: WindowMinimizeActionDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DragResizeService, optional: true }, { token: i1$1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", type: WindowMinimizeActionDirective, isStandalone: true, 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,
@@ -2935,9 +3088,9 @@ class WindowMinimizeActionDirective extends Button {
           <span class="k-button-icon" [ngClass]="iconClass"></span>
         }
         <span class="k-button-text"><ng-content></ng-content></span>
-        `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: WindowMinimizeActionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: WindowMinimizeActionDirective, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoWindowMinimizeAction',
@@ -2968,7 +3121,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
         <span class="k-button-text"><ng-content></ng-content></span>
         `,
                     standalone: true,
-                    imports: [IconWrapperComponent, NgClass]
+                    imports: [IconWrapperComponent, NgClass],
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: DragResizeService, decorators: [{
                     type: Optional
@@ -3007,26 +3161,38 @@ class WindowComponent {
     navigation;
     ngZone;
     localization;
+    injector;
     /**
      * Specifies the query selector used to set the initial focus ([see examples](https://www.telerik.com/kendo-angular-ui/components/dialogs/window/initial-focus)).
      *
      * @remarks
      * This property is related to accessibility.
      */
-    autoFocusedElement;
+    set autoFocusedElement(value) {
+        this._autoFocusedElement.set(value);
+    }
+    get autoFocusedElement() {
+        return this._autoFocusedElement();
+    }
     /**
      * Sets the text in the title bar.
      */
-    title;
+    set title(value) {
+        this._title.set(value);
+    }
+    get title() {
+        return this._title();
+    }
     /**
      * Specifies if the user can drag the component.
      * @default true
      */
     set draggable(value) {
         this.options.draggable = value;
+        this._draggable.set(value);
     }
     get draggable() {
-        return this.options.draggable;
+        return this._draggable() ?? this.options.draggable;
     }
     /**
      * Specifies if the user can resize the component.
@@ -3034,19 +3200,20 @@ class WindowComponent {
      */
     set resizable(value) {
         this.options.resizable = value;
+        this._resizable.set(value);
     }
     get resizable() {
-        return this.options.resizable;
+        return this._resizable() ?? this.options.resizable;
     }
     /**
      * @hidden
      */
     set cssClass(classes) {
-        this.setServiceClasses(this._cssClass, classes);
-        this._cssClass = classes;
+        this.setServiceClasses(this._cssClass(), classes);
+        this._cssClass.set(classes);
     }
     get cssClass() {
-        return this._cssClass;
+        return this._cssClass();
     }
     /**
      * @hidden
@@ -3056,30 +3223,36 @@ class WindowComponent {
         const el = this.el.nativeElement;
         const dir = el.getAttribute('dir');
         const tIndex = el.getAttribute('tabindex');
-        if (this.direction !== dir) {
-            this.direction = dir;
+        if (this._direction() !== dir) {
+            this._direction.set(dir);
         }
         if (this.tabIndex !== tIndex) {
             this.tabIndex = tIndex;
         }
-        this._htmlAttributes = attributes;
+        this._htmlAttributes.set(attributes);
     }
     get htmlAttributes() {
-        return this._htmlAttributes;
+        return this._htmlAttributes();
     }
     /**
      * Specifies if the content stays in the DOM when minimized.
      * @default false
      */
-    keepContent = false;
+    set keepContent(value) {
+        this._keepContent.set(value);
+    }
+    get keepContent() {
+        return this._keepContent();
+    }
     /**
      * Sets the initial state of the Window.
      */
     set state(value) {
         this.options.state = value;
+        this._state.set(value);
     }
     get state() {
-        return this.options.state;
+        return this._state() ?? this.options.state;
     }
     /**
      * Sets the minimum width in pixels.
@@ -3087,9 +3260,10 @@ class WindowComponent {
      */
     set minWidth(value) {
         this.setOption('minWidth', value);
+        this._minWidth.set(value);
     }
     get minWidth() {
-        return this.options.minWidth;
+        return this._minWidth() ?? this.options.minWidth;
     }
     /**
      * Sets the minimum height in pixels.
@@ -3097,45 +3271,50 @@ class WindowComponent {
      */
     set minHeight(value) {
         this.setOption('minHeight', value);
+        this._minHeight.set(value);
     }
     get minHeight() {
-        return this.options.minHeight;
+        return this._minHeight() ?? this.options.minHeight;
     }
     /**
      * Sets the width in pixels.
      */
     set width(value) {
         this.setOption('width', value);
+        this._width.set(value);
     }
     get width() {
-        return this.options.width;
+        return this._width() ?? this.options.width;
     }
     /**
      * Sets the height in pixels.
      */
     set height(value) {
         this.setOption('height', value);
+        this._height.set(value);
     }
     get height() {
-        return this.options.height;
+        return this._height() ?? this.options.height;
     }
     /**
      * Sets the initial top offset in pixels.
      */
     set top(value) {
         this.setOption('top', value);
+        this._top.set(value);
     }
     get top() {
-        return this.options.top;
+        return this._top() ?? this.options.top;
     }
     /**
      * Sets the initial left offset in pixels.
      */
     set left(value) {
         this.setOption('left', value);
+        this._left.set(value);
     }
     get left() {
-        return this.options.left;
+        return this._left() ?? this.options.left;
     }
     get closeButtonTitle() {
         if (this.messages && this.messages.closeTitle) {
@@ -3225,7 +3404,7 @@ class WindowComponent {
     role = 'dialog';
     hostClass = true;
     get dir() {
-        return this.direction;
+        return this._direction();
     }
     titleBarView;
     titleBarContent;
@@ -3235,28 +3414,41 @@ class WindowComponent {
      * @hidden
      */
     titleId = null;
-    _htmlAttributes;
-    _cssClass;
-    direction;
-    draged = false;
-    resized = false;
+    _htmlAttributes = signal(undefined, ...(ngDevMode ? [{ debugName: "_htmlAttributes" }] : []));
+    _cssClass = signal(undefined, ...(ngDevMode ? [{ debugName: "_cssClass" }] : []));
+    _autoFocusedElement = signal(undefined, ...(ngDevMode ? [{ debugName: "_autoFocusedElement" }] : []));
+    _title = signal(undefined, ...(ngDevMode ? [{ debugName: "_title" }] : []));
+    _draggable = signal(undefined, ...(ngDevMode ? [{ debugName: "_draggable" }] : []));
+    _resizable = signal(undefined, ...(ngDevMode ? [{ debugName: "_resizable" }] : []));
+    _keepContent = signal(false, ...(ngDevMode ? [{ debugName: "_keepContent" }] : []));
+    _state = signal(undefined, ...(ngDevMode ? [{ debugName: "_state" }] : []));
+    _minWidth = signal(undefined, ...(ngDevMode ? [{ debugName: "_minWidth" }] : []));
+    _minHeight = signal(undefined, ...(ngDevMode ? [{ debugName: "_minHeight" }] : []));
+    _width = signal(undefined, ...(ngDevMode ? [{ debugName: "_width" }] : []));
+    _height = signal(undefined, ...(ngDevMode ? [{ debugName: "_height" }] : []));
+    _top = signal(undefined, ...(ngDevMode ? [{ debugName: "_top" }] : []));
+    _left = signal(undefined, ...(ngDevMode ? [{ debugName: "_left" }] : []));
+    _direction = signal('ltr', ...(ngDevMode ? [{ debugName: "_direction" }] : []));
+    dragged = signal(false, ...(ngDevMode ? [{ debugName: "dragged" }] : []));
+    resized = signal(false, ...(ngDevMode ? [{ debugName: "resized" }] : []));
     windowSubscription = new Subscription();
     domSubs = new Subscription();
     localizationChangeSubscription;
-    stateAppliedByAction = null;
-    constructor(el, renderer, service, navigation, ngZone, localization) {
+    stateAppliedByAction = signal(null, ...(ngDevMode ? [{ debugName: "stateAppliedByAction" }] : []));
+    constructor(el, renderer, service, navigation, ngZone, localization, injector) {
         this.el = el;
         this.renderer = renderer;
         this.service = service;
         this.navigation = navigation;
         this.ngZone = ngZone;
         this.localization = localization;
+        this.injector = injector;
         const isValid = validatePackage(packageMetadata);
         this.licenseMessage = getLicenseMessage(packageMetadata);
         this.showLicenseWatermark = shouldShowValidationUI(isValid);
-        this.direction = this.localization.rtl ? 'rtl' : 'ltr';
+        this._direction.set(this.localization.rtl ? 'rtl' : 'ltr');
         this.localizationChangeSubscription = this.localization.changes
-            .subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr');
+            .subscribe(({ rtl }) => this._direction.set(rtl ? 'rtl' : 'ltr'));
         this.resizeDirections = RESIZE_DIRECTIONS;
         this.subscribeEvents();
         this.titleId = this.generateTitleId();
@@ -3266,10 +3458,12 @@ class WindowComponent {
             return;
         }
         this.setNextZIndex();
-        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+        afterNextRender(() => {
             this.handleInitialFocus();
-        });
-        this.ngZone.runOutsideAngular(() => Promise.resolve(null).then(() => this.setInitialOffset()));
+        }, { injector: this.injector });
+        afterEveryRender(() => {
+            this.setInitialOffset();
+        }, { injector: this.injector });
         this.initDomEvents();
         if (this.titleBarView && !this.titleBarView.template) {
             this.renderer.setAttribute(this.el.nativeElement, 'aria-labelledby', this.titleId);
@@ -3295,8 +3489,8 @@ class WindowComponent {
             }
         }
         if (isChanged('state', changes)) {
-            const appliedByAction = this.stateAppliedByAction === changes['state'].currentValue;
-            this.stateAppliedByAction = null;
+            const appliedByAction = this.stateAppliedByAction() === changes['state'].currentValue;
+            this.stateAppliedByAction.set(null);
             if (!appliedByAction) {
                 this.service.applyManualState(changes['state'].previousValue);
                 this.updateAllOffset();
@@ -3339,6 +3533,12 @@ class WindowComponent {
     setDimension(dimension, value) {
         this.setOption(dimension, value);
         this.setStyle(dimension, value);
+        if (dimension === 'width') {
+            this._width.set(value);
+        }
+        else if (dimension === 'height') {
+            this._height.set(value);
+        }
     }
     /**
      * Manually updates the `top` or `left` offset of the Window.
@@ -3352,6 +3552,12 @@ class WindowComponent {
     setOffset(offset, value) {
         this.setOption(offset, value);
         this.setStyle(offset, value);
+        if (offset === 'top') {
+            this._top.set(value);
+        }
+        else if (offset === 'left') {
+            this._left.set(value);
+        }
     }
     get showDefaultTitleBar() {
         return !isPresent(this.titleBarContent);
@@ -3395,14 +3601,14 @@ class WindowComponent {
             this.el.nativeElement.focus({ preventScroll: true });
         }));
         this.windowSubscription.add(this.service.dragStart.subscribe(() => {
-            this.draged = true;
+            this.dragged.set(true);
             this.ngZone.run(() => {
                 this.dragStart.emit();
             });
         }));
         this.windowSubscription.add(this.service.dragEnd.subscribe(() => {
-            if (this.draged) {
-                this.draged = false;
+            if (this.dragged()) {
+                this.dragged.set(false);
                 this.ngZone.run(() => {
                     this.dragEnd.emit();
                 });
@@ -3412,14 +3618,14 @@ class WindowComponent {
             this.close.emit();
         }));
         this.windowSubscription.add(this.service.resizeStart.subscribe(() => {
-            this.resized = true;
+            this.resized.set(true);
             this.ngZone.run(() => {
                 this.resizeStart.emit();
             });
         }));
         this.windowSubscription.add(this.service.resizeEnd.subscribe(() => {
-            if (this.resized) {
-                this.resized = false;
+            if (this.resized()) {
+                this.resized.set(false);
                 this.ngZone.run(() => {
                     this.resizeEnd.emit();
                 });
@@ -3429,6 +3635,9 @@ class WindowComponent {
             OFFSET_STYLES.forEach((style) => {
                 if (isPresent(ev[style])) {
                     this.setStyle(style, ev[style]);
+                    // Keep the backing signal in sync so afterEveryRender's updateAllOffset
+                    // does not override keyboard/drag resize changes with the stale @Input value.
+                    this['_' + style].set(ev[style]);
                     if (this.state !== 'maximized') {
                         const emitter = this[style + 'Change'];
                         if (emitter.observers.length) {
@@ -3441,10 +3650,11 @@ class WindowComponent {
             });
         }));
         this.windowSubscription.add(this.service.stateChange.subscribe((state) => {
-            if (isPresent(this.service.lastAction)) {
+            if (isPresent(this.service.lastAction())) {
                 this.updateAllOffset();
-                this.service.lastAction = null;
-                this.stateAppliedByAction = state;
+                this.service.lastAction.set(null);
+                this.stateAppliedByAction.set(state);
+                this._state.set(state);
                 this.stateChange.emit(state);
             }
         }));
@@ -3514,7 +3724,7 @@ class WindowComponent {
         this.renderer.removeStyle(this.el.nativeElement, style);
     }
     get options() {
-        return this.service.options;
+        return this.service.options();
     }
     setOption(style, value) {
         if (typeof value !== 'number' && typeof value !== 'string') {
@@ -3542,8 +3752,8 @@ class WindowComponent {
     generateTitleId() {
         return 'kendo-window-title-' + Math.ceil(Math.random() * 1000000).toString();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: WindowComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DragResizeService }, { token: NavigationService }, { token: i0.NgZone }, { token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: WindowComponent, isStandalone: true, 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.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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: WindowComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DragResizeService }, { token: NavigationService }, { token: i0.NgZone }, { token: i1$1.LocalizationService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", type: WindowComponent, isStandalone: true, 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.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,
@@ -3611,9 +3821,9 @@ class WindowComponent {
             @if (showLicenseWatermark) {
               <div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
             }
-        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDialogLocalizedMessages],\n    [kendoWindowLocalizedMessages],\n    [kendoDialogTitleBarLocalizedMessages]\n  " }, { kind: "component", type: WindowTitleBarComponent, selector: "kendo-window-titlebar", inputs: ["template", "id"] }, { kind: "component", type: WindowMinimizeActionDirective, selector: "button[kendoWindowMinimizeAction]", inputs: ["window"], exportAs: ["kendoWindowMinimizeAction"] }, { kind: "component", type: WindowMaximizeActionDirective, selector: "button[kendoWindowMaximizeAction]", inputs: ["window"], exportAs: ["kendoWindowMaximizeAction"] }, { kind: "component", type: WindowRestoreActionDirective, selector: "button[kendoWindowRestoreAction]", inputs: ["window"], exportAs: ["kendoWindowRestoreAction"] }, { kind: "component", type: WindowCloseActionDirective, selector: "button[kendoWindowCloseAction]", inputs: ["window"], exportAs: ["kendoWindowCloseAction"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ResizeHandleDirective, selector: "[kendoWindowResizeHandle]", inputs: ["direction"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay], kendo-watermark-overlay", inputs: ["licenseMessage"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDialogLocalizedMessages],\n    [kendoWindowLocalizedMessages],\n    [kendoDialogTitleBarLocalizedMessages]\n  " }, { kind: "component", type: WindowTitleBarComponent, selector: "kendo-window-titlebar", inputs: ["template", "id"] }, { kind: "component", type: WindowMinimizeActionDirective, selector: "button[kendoWindowMinimizeAction]", inputs: ["window"], exportAs: ["kendoWindowMinimizeAction"] }, { kind: "component", type: WindowMaximizeActionDirective, selector: "button[kendoWindowMaximizeAction]", inputs: ["window"], exportAs: ["kendoWindowMaximizeAction"] }, { kind: "component", type: WindowRestoreActionDirective, selector: "button[kendoWindowRestoreAction]", inputs: ["window"], exportAs: ["kendoWindowRestoreAction"] }, { kind: "component", type: WindowCloseActionDirective, selector: "button[kendoWindowCloseAction]", inputs: ["window"], exportAs: ["kendoWindowCloseAction"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ResizeHandleDirective, selector: "[kendoWindowResizeHandle]", inputs: ["direction"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay], kendo-watermark-overlay", inputs: ["licenseMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: WindowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: WindowComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoWindow',
@@ -3689,9 +3899,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
             }
         `,
                     standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [LocalizedMessagesDirective, WindowTitleBarComponent, WindowMinimizeActionDirective, WindowMaximizeActionDirective, WindowRestoreActionDirective, WindowCloseActionDirective, NgTemplateOutlet, ResizeHandleDirective, DraggableDirective, WatermarkOverlayComponent]
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: DragResizeService }, { type: NavigationService }, { type: i0.NgZone }, { type: i1$1.LocalizationService }], propDecorators: { autoFocusedElement: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: DragResizeService }, { type: NavigationService }, { type: i0.NgZone }, { type: i1$1.LocalizationService }, { type: i0.Injector }], propDecorators: { autoFocusedElement: [{
                 type: Input
             }], title: [{
                 type: Input
@@ -3900,17 +4111,17 @@ class WindowSettings {
  * @hidden
  */
 class WindowContainerService {
-    static container = null;
+    static container = signal(null, ...(ngDevMode ? [{ debugName: "container" }] : []));
     set container(container) {
-        WindowContainerService.container = container;
+        WindowContainerService.container.set(container);
     }
     get container() {
-        return WindowContainerService.container;
+        return WindowContainerService.container();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: WindowContainerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: WindowContainerService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: WindowContainerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: WindowContainerService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: WindowContainerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: WindowContainerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -4089,10 +4300,10 @@ class WindowService {
             ]
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: WindowService, deps: [{ token: WindowContainerService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: WindowService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: WindowService, deps: [{ token: WindowContainerService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: WindowService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: WindowService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: WindowService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -4115,10 +4326,10 @@ class DialogContainerDirective {
     constructor(container, service) {
         service.container = container;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DialogContainerDirective, deps: [{ token: i0.ViewContainerRef }, { token: DialogContainerService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.23", type: DialogContainerDirective, isStandalone: true, selector: "[kendoDialogContainer]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: DialogContainerDirective, deps: [{ token: i0.ViewContainerRef }, { token: DialogContainerService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.33", type: DialogContainerDirective, isStandalone: true, selector: "[kendoDialogContainer]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DialogContainerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: DialogContainerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDialogContainer]',
@@ -4160,15 +4371,15 @@ class CustomMessagesComponent extends Messages {
     get override() {
         return true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.23", type: CustomMessagesComponent, isStandalone: true, selector: "kendo-dialog-messages, kendo-window-messages", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.33", type: CustomMessagesComponent, isStandalone: true, selector: "kendo-dialog-messages, kendo-window-messages", providers: [
             {
                 provide: Messages,
                 useExisting: forwardRef(() => CustomMessagesComponent)
             }
         ], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: CustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: CustomMessagesComponent, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -4195,10 +4406,10 @@ class WindowContainerDirective {
     constructor(container, service) {
         service.container = container;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: WindowContainerDirective, deps: [{ token: i0.ViewContainerRef }, { token: WindowContainerService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.23", type: WindowContainerDirective, isStandalone: true, selector: "[kendoWindowContainer]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: WindowContainerDirective, deps: [{ token: i0.ViewContainerRef }, { token: WindowContainerService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.33", type: WindowContainerDirective, isStandalone: true, selector: "[kendoWindowContainer]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: WindowContainerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: WindowContainerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoWindowContainer]',
@@ -4308,11 +4519,11 @@ const KENDO_DIALOGS = [
  * ```
  */
 class DialogModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.23", ngImport: i0, type: DialogModule, imports: [DialogComponent, DialogTitleBarComponent, DialogContainerDirective, DialogActionsComponent, CustomMessagesComponent], exports: [DialogComponent, DialogTitleBarComponent, DialogContainerDirective, DialogActionsComponent, CustomMessagesComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DialogModule, providers: [DialogContainerService, DialogService, IconsService], imports: [DialogComponent, DialogTitleBarComponent, DialogActionsComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: DialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.33", ngImport: i0, type: DialogModule, imports: [DialogComponent, DialogTitleBarComponent, DialogContainerDirective, DialogActionsComponent, CustomMessagesComponent], exports: [DialogComponent, DialogTitleBarComponent, DialogContainerDirective, DialogActionsComponent, CustomMessagesComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: DialogModule, providers: [DialogContainerService, DialogService, IconsService], imports: [DialogComponent, DialogTitleBarComponent, DialogActionsComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DialogModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: DialogModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_DIALOG],
@@ -4343,11 +4554,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
  * ```
  */
 class WindowModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: WindowModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.23", ngImport: i0, type: WindowModule, imports: [WindowComponent, WindowCloseActionDirective, WindowMinimizeActionDirective, WindowMaximizeActionDirective, WindowRestoreActionDirective, WindowTitleBarComponent, WindowContainerDirective, DialogActionsComponent, CustomMessagesComponent], exports: [WindowComponent, WindowCloseActionDirective, WindowMinimizeActionDirective, WindowMaximizeActionDirective, WindowRestoreActionDirective, WindowTitleBarComponent, WindowContainerDirective, DialogActionsComponent, CustomMessagesComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: WindowModule, providers: [WindowContainerService, WindowService, IconsService], imports: [WindowComponent, WindowCloseActionDirective, WindowMinimizeActionDirective, WindowMaximizeActionDirective, WindowRestoreActionDirective, DialogActionsComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: WindowModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.33", ngImport: i0, type: WindowModule, imports: [WindowComponent, WindowCloseActionDirective, WindowMinimizeActionDirective, WindowMaximizeActionDirective, WindowRestoreActionDirective, WindowTitleBarComponent, WindowContainerDirective, DialogActionsComponent, CustomMessagesComponent], exports: [WindowComponent, WindowCloseActionDirective, WindowMinimizeActionDirective, WindowMaximizeActionDirective, WindowRestoreActionDirective, WindowTitleBarComponent, WindowContainerDirective, DialogActionsComponent, CustomMessagesComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: WindowModule, providers: [WindowContainerService, WindowService, IconsService], imports: [WindowComponent, WindowCloseActionDirective, WindowMinimizeActionDirective, WindowMaximizeActionDirective, WindowRestoreActionDirective, DialogActionsComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: WindowModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: WindowModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...KENDO_WINDOW],
@@ -4379,11 +4590,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
  * ```
  */
 class DialogsModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DialogsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.23", ngImport: i0, type: DialogsModule, imports: [DialogComponent, DialogTitleBarComponent, DialogContainerDirective, DialogActionsComponent, CustomMessagesComponent, WindowComponent, WindowCloseActionDirective, WindowMinimizeActionDirective, WindowMaximizeActionDirective, WindowRestoreActionDirective, WindowTitleBarComponent, WindowContainerDirective, DialogActionsComponent, CustomMessagesComponent], exports: [DialogComponent, DialogTitleBarComponent, DialogContainerDirective, DialogActionsComponent, CustomMessagesComponent, WindowComponent, WindowCloseActionDirective, WindowMinimizeActionDirective, WindowMaximizeActionDirective, WindowRestoreActionDirective, WindowTitleBarComponent, WindowContainerDirective, DialogActionsComponent, CustomMessagesComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DialogsModule, providers: [IconsService, DialogService, DialogContainerService, WindowService, WindowContainerService], imports: [DialogComponent, DialogTitleBarComponent, DialogActionsComponent, WindowComponent, WindowCloseActionDirective, WindowMinimizeActionDirective, WindowMaximizeActionDirective, WindowRestoreActionDirective, DialogActionsComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: DialogsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.33", ngImport: i0, type: DialogsModule, imports: [DialogComponent, DialogTitleBarComponent, DialogContainerDirective, DialogActionsComponent, CustomMessagesComponent, WindowComponent, WindowCloseActionDirective, WindowMinimizeActionDirective, WindowMaximizeActionDirective, WindowRestoreActionDirective, WindowTitleBarComponent, WindowContainerDirective, DialogActionsComponent, CustomMessagesComponent], exports: [DialogComponent, DialogTitleBarComponent, DialogContainerDirective, DialogActionsComponent, CustomMessagesComponent, WindowComponent, WindowCloseActionDirective, WindowMinimizeActionDirective, WindowMaximizeActionDirective, WindowRestoreActionDirective, WindowTitleBarComponent, WindowContainerDirective, DialogActionsComponent, CustomMessagesComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: DialogsModule, providers: [IconsService, DialogService, DialogContainerService, WindowService, WindowContainerService], imports: [DialogComponent, DialogTitleBarComponent, DialogActionsComponent, WindowComponent, WindowCloseActionDirective, WindowMinimizeActionDirective, WindowMaximizeActionDirective, WindowRestoreActionDirective, DialogActionsComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DialogsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: DialogsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...KENDO_DIALOGS],